toolbar buttons to select shape

2025-10-14 18:41:03 +02:00 · 2025-10-14 18:41:03 +02:00 · 5ffa084516
commit 5ffa084516
parent a73d51a31a
14 changed files with 367 additions and 239 deletions
--- a/src/VisualEditor/RountangleSVG.tsx
+++ b/src/VisualEditor/RountangleSVG.tsx
@ -0,0 +1,124 @@
+import { Rountangle, RountanglePart } from "../statecharts/concrete_syntax";
+import { Rect2D } from "./geometry";
+import { ROUNTANGLE_RADIUS, CORNER_HELPER_OFFSET, CORNER_HELPER_RADIUS } from "./parameters";
+import { rountangleMinSize } from "./VisualEditor";
+
+export function DiamondShape(props: {geometry: Rect2D, extraAttrs: object}) {
+  const {geometry} = props;
+  return <polygon
+    points={`
+      ${geometry.size.x/2} ${0},
+      ${geometry.size.x}   ${geometry.size.y/2},
+      ${geometry.size.x/2} ${geometry.size.y},
+      ${0}                 ${geometry.size.y/2}
+    `}
+    {...props.extraAttrs}
+  />;
+}
+
+export function RountangleSVG(props: { rountangle: Rountangle; selected: string[]; highlight: RountanglePart[]; errors: string[]; active: boolean; }) {
+  const { topLeft, size, uid } = props.rountangle;
+  // always draw a rountangle with a minimum size
+  // during resizing, rountangle can be smaller than this size and even have a negative size, but we don't show it
+  const minSize = rountangleMinSize(size);
+  const extraAttrs = {
+    className: 'rountangle'
+      + (props.selected.length === 4 ? " selected" : "")
+      + (' ' + props.rountangle.kind)
+      + (props.errors.length > 0 ? " error" : "")
+      + (props.active ? " active" : ""),
+    "data-uid": uid,
+    "data-parts": "left top right bottom",
+  };
+  return <g transform={`translate(${topLeft.x} ${topLeft.y})`}>
+    {props.rountangle.kind === "pseudo" ?
+        <DiamondShape geometry={props.rountangle} extraAttrs={extraAttrs}/>
+      : <rect
+        rx={ROUNTANGLE_RADIUS} ry={ROUNTANGLE_RADIUS}
+        x={0}
+        y={0}
+        width={minSize.x}
+        height={minSize.y}
+        {...extraAttrs}
+      />
+    }
+    
+
+    {(props.errors.length > 0) &&
+      <text className="error" x={10} y={40} data-uid={uid} data-parts="left top right bottom">{props.errors.join(' ')}</text>}
+
+
+    <line
+      className={"lineHelper"
+        + (props.selected.includes("top") ? " selected" : "")
+        + (props.highlight.includes("top") ? " highlight" : "")}
+      x1={0}
+      y1={0}
+      x2={minSize.x}
+      y2={0}
+      data-uid={uid}
+      data-parts="top" />
+    <line
+      className={"lineHelper"
+        + (props.selected.includes("right") ? " selected" : "")
+        + (props.highlight.includes("right") ? " highlight" : "")}
+      x1={minSize.x}
+      y1={0}
+      x2={minSize.x}
+      y2={minSize.y}
+      data-uid={uid}
+      data-parts="right" />
+    <line
+      className={"lineHelper"
+        + (props.selected.includes("bottom") ? " selected" : "")
+        + (props.highlight.includes("bottom") ? " highlight" : "")}
+      x1={0}
+      y1={minSize.y}
+      x2={minSize.x}
+      y2={minSize.y}
+      data-uid={uid}
+      data-parts="bottom" />
+    <line
+      className={"lineHelper"
+        + (props.selected.includes("left") ? " selected" : "")
+        + (props.highlight.includes("left") ? " highlight" : "")}
+      x1={0}
+      y1={0}
+      x2={0}
+      y2={minSize.y}
+      data-uid={uid}
+      data-parts="left" />
+
+    <circle
+      className="circleHelper corner"
+      cx={CORNER_HELPER_OFFSET}
+      cy={CORNER_HELPER_OFFSET}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="top left" />
+    <circle
+      className="circleHelper corner"
+      cx={minSize.x - CORNER_HELPER_OFFSET}
+      cy={CORNER_HELPER_OFFSET}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="top right" />
+    <circle
+      className="circleHelper corner"
+      cx={minSize.x - CORNER_HELPER_OFFSET}
+      cy={minSize.y - CORNER_HELPER_OFFSET}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="bottom right" />
+    <circle
+      className="circleHelper corner"
+      cx={CORNER_HELPER_OFFSET}
+      cy={minSize.y - CORNER_HELPER_OFFSET}
+      r={CORNER_HELPER_RADIUS}
+      data-uid={uid}
+      data-parts="bottom left" />
+    <text x={10} y={20}
+      className="uid"
+      data-uid={uid}>{uid}</text>
+  </g>;
+}