highlight fired transitions

src/VisualEditor/ArrowSVG.tsx

@@ -3,18 +3,25 @@ import { ArcDirection, euclideanDistance } from "./geometry";
 import { CORNER_HELPER_RADIUS } from "./parameters";
 
 
-export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: string[]; highlight: boolean; arc: ArcDirection; }) {
+export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: string[]; highlight: boolean; fired: boolean; arc: ArcDirection; initialMarker: boolean }) {
   const { start, end, uid } = props.arrow;
   const radius = euclideanDistance(start, end) / 1.6;
-  const largeArc = "1";
-  const arcOrLine = props.arc === "no" ? "L" :
+  let largeArc = "1";
+  let arcOrLine = props.arc === "no" ? "L" :
     `A ${radius} ${radius} 0 ${largeArc} ${props.arc === "ccw" ? "0" : "1"}`;
+  if (props.initialMarker) {
+    // largeArc = "0";
+    arcOrLine = `A ${radius*2} ${radius*2} 0 0 1`
+  }
   return <g>
     <path
       className={"arrow"
         + (props.selected.length === 2 ? " selected" : "")
         + (props.errors.length > 0 ? " error" : "")
-        + (props.highlight ? " highlight" : "")}
+        + (props.highlight ? " highlight" : "")
+        + (props.fired ? " fired" : "")
+      }
+      markerStart={props.initialMarker ? 'url(#initialMarker)' : undefined}
       markerEnd='url(#arrowEnd)'
       d={`M ${start.x} ${start.y}
             ${arcOrLine}

src/VisualEditor/VisualEditor.css

@@ -46,7 +46,11 @@
   /* fill-opacity: 0.2; */
   /* stroke: rgb(100, 149, 237); */
   /* stroke:  */
-  filter: drop-shadow( 0px 0px 6px rgba(128, 72, 0, 0.856));
+  stroke: rgb(192, 125, 0);
+  fill:rgb(255, 251, 244);
+  /* fill: lightgrey; */
+  /* color: white; */
+  filter: drop-shadow( 0px 0px 3px rgba(192, 125, 0, 0.856));
   /* stroke-width: 3px; */
 }
 
@@ -99,9 +103,16 @@ circle.helper:hover:not(:active) {
   stroke-width: 3px;
 }
 
+.arrow::marker {
+  fill: content-stroke;
+}
+
 #arrowEnd {
   fill: context-stroke;
 }
+#initialMarker {
+  fill: context-stroke;
+}
 
 .arrow:hover {
   cursor: grab;
@@ -157,6 +168,11 @@ text.helper:hover {
 .arrow.error {
   stroke: rgb(230,0,0);
 }
+.arrow.fired {
+  stroke: rgb(192, 125, 0);
+  stroke-width: 3px;
+}
+
 text.error, tspan.error {
   fill: rgb(230,0,0);
   font-weight: 600;

src/VisualEditor/VisualEditor.tsx

@@ -68,9 +68,10 @@ type VisualEditorProps = {
   setErrors: Dispatch<SetStateAction<TraceableError[]>>,
   mode: InsertMode,
   highlightActive: Set<string>,
+  highlightTransitions: string[],
 };
 
-export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highlightActive}: VisualEditorProps) {
+export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highlightActive, highlightTransitions}: VisualEditorProps) {
   const [historyState, setHistoryState] = useState<HistoryState>({current: emptyState, history: [], future: []});
 
   const state = historyState.current;
@@ -679,11 +680,8 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
     }
   }
 
-
   const active = rt?.mode || new Set();
 
-  console.log(highlightActive);
-
   const rootErrors = errors.filter(({shapeUid}) => shapeUid === "root").map(({message}) => message);
 
   return <svg width="4000px" height="4000px"
@@ -700,6 +698,16 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
       onCut={onCut}
     >
       <defs>
+        <marker
+          id="initialMarker"
+          viewBox="0 0 9 9"
+          refX="4.5"
+          refY="4.5"
+          markerWidth="9"
+          markerHeight="9"
+          markerUnits="userSpaceOnUse">
+          <circle cx={4.5} cy={4.5} r={4.5}/>
+        </marker>
         <marker
           id="arrowEnd"
           viewBox="0 0 10 10"
@@ -709,7 +717,7 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
           markerHeight="12"
           orient="auto-start-reverse"
           markerUnits="userSpaceOnUse">
-          <path d="M 0 0 L 10 5 L 0 10 z" />
+          <path d="M 0 0 L 10 5 L 0 10 z"/>
         </marker>
       </defs>
 
@@ -752,6 +760,7 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
       if (sides && sides[0]?.uid === sides[1]?.uid && sides[0]!.uid !== undefined) {
         arc = arcDirection(sides[0]!.part, sides[1]!.part);
       }
+      const initialMarker = sides && sides[0] === undefined && sides[1] !== undefined;
       return <ArrowSVG
         key={arrow.uid}
         arrow={arrow}
@@ -760,7 +769,9 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
           .filter(({shapeUid}) => shapeUid === arrow.uid)
           .map(({message}) => message)}
         highlight={arrowsToHighlight.hasOwnProperty(arrow.uid)}
+        fired={highlightTransitions.includes(arrow.uid)}
         arc={arc}
+        initialMarker={initialMarker}
         />;
       }
     )}