move some files around to confuse everyone

src/App/VisualEditor/ArrowSVG.tsx

@@ -0,0 +1,91 @@
+import { memo } from "react";
+import { Arrow, ArrowPart } from "../../statecharts/concrete_syntax";
+import { ArcDirection, euclideanDistance } from "./geometry";
+import { CORNER_HELPER_RADIUS } from "./parameters";
+import { arraysEqual } from "@/util/util";
+
+
+export const ArrowSVG = memo(function(props: { arrow: Arrow; selected: ArrowPart[]; error: string; highlight: boolean; fired: boolean; arc: ArcDirection; initialMarker: boolean }) {
+  const { start, end, uid } = props.arrow;
+  const radius = euclideanDistance(start, end) / 1.6;
+  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.error ? " error" : "")
+        + (props.highlight ? " highlight" : "")
+        + (props.fired ? " fired" : "")
+      }
+      markerStart={props.initialMarker ? 'url(#initialMarker)' : undefined}
+      markerEnd='url(#arrowEnd)'
+      d={`M ${start.x} ${start.y}
+            ${arcOrLine}
+            ${end.x} ${end.y}`}
+      data-uid={uid}
+      data-parts="start end" />
+
+    {props.error && <text
+      className="error"
+      x={(start.x + end.x) / 2 + 5}
+      y={(start.y + end.y) / 2}
+      textAnchor="middle"
+      data-uid={uid}
+      data-parts="start end">{props.error}</text>}
+
+    <path
+      className="helper"
+      d={`M ${start.x} ${start.y}
+            ${arcOrLine}
+            ${end.x} ${end.y}`}
+      data-uid={uid}
+      data-parts="start end" />
+
+    {/* selection helper circles */}
+    <circle
+      className="helper"
+      cx={start.x}
+      cy={start.y}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="start" />
+    <circle
+      className="helper"
+      cx={end.x}
+      cy={end.y}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="end" />
+
+    {/* selection indicator circles */}
+    {props.selected.includes("start") && <circle
+      className="selected"
+      cx={start.x}
+      cy={start.y}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="start" />}
+    {props.selected.includes("end") && <circle
+      className="selected"
+      cx={end.x}
+      cy={end.y}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="end" />}
+
+  </g>;
+}, (prevProps, nextProps) => {
+  return prevProps.arrow === nextProps.arrow
+    && arraysEqual(prevProps.selected, nextProps.selected)
+    && prevProps.highlight === nextProps.highlight
+    && prevProps.error === nextProps.error
+    && prevProps.fired === nextProps.fired
+    && prevProps.arc === nextProps.arc
+    && prevProps.initialMarker === nextProps.initialMarker
+})