editor: better rendering of helper outlines

src/App/TopPanel.tsx

@@ -52,6 +52,13 @@ function PseudoStateIcon(props: {}) {
   </svg>;
 }
 
+function HistoryIcon(props: {kind: "shallow"|"deep"}) {
+  const w=20, h=20;
+  const text = props.kind === "shallow" ? "H" : "H*";
+  return <svg width={w} height={h}><circle cx={w/2} cy={h/2} r={Math.min(w,h)/2-1} fill="white" stroke="black"/><text x={w/2} y={h/2+4} textAnchor="middle" fontSize={11} fontWeight={400}>{text}</text></svg>;
+}
+
+
 export function TopPanel({rt, time, setTime, onInit, onClear, onRaise, ast, mode, setMode}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
   const [timescale, setTimescale] = useState(1);
@@ -111,6 +118,8 @@ export function TopPanel({rt, time, setTime, onInit, onClear, onRaise, ast, mode
       ["and", "AND-states", <RountangleIcon kind="and"/>],
       ["or", "OR-states", <RountangleIcon kind="or"/>],
       ["pseudo", "pseudo-states", <PseudoStateIcon/>],
+      ["shallow", "shallow history", <HistoryIcon kind="shallow"/>],
+      ["deep", "deep history", <HistoryIcon kind="deep"/>],
       ["transition", "transitions", <TrendingFlatIcon fontSize="small"/>],
       ["text", "text", <>&nbsp;T&nbsp;</>],
     ] as [InsertMode, string, ReactElement][]).map(([m, hint, buttonTxt]) =>

src/VisualEditor/ArrowSVG.tsx

@@ -31,7 +31,7 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
       data-parts="start end">{props.errors.join(' ')}</text>}
 
     <path
-      className="pathHelper"
+      className="pathHelper helper"
       d={`M ${start.x} ${start.y}
             ${arcOrLine}
             ${end.x} ${end.y}`}
@@ -39,7 +39,7 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
       data-parts="start end" />
 
     <circle
-      className={"circleHelper"
+      className={"circleHelper helper"
         + (props.selected.includes("start") ? " selected" : "")}
       cx={start.x}
       cy={start.y}
@@ -47,7 +47,7 @@ export function ArrowSVG(props: { arrow: Arrow; selected: string[]; errors: stri
       data-uid={uid}
       data-parts="start" />
     <circle
-      className={"circleHelper"
+      className={"circleHelper helper"
         + (props.selected.includes("end") ? " selected" : "")}
       cx={end.x}
       cy={end.y}

src/VisualEditor/RectHelpers.tsx

@@ -2,72 +2,50 @@ import { RountanglePart } from "../statecharts/concrete_syntax";
 import { Vec2D } from "./geometry";
 import { CORNER_HELPER_OFFSET, CORNER_HELPER_RADIUS } from "./parameters";
 
+function lineGeometryProps(size: Vec2D): [RountanglePart, object][] {
+  return [
+    ["top",    {x1: 0,      y1: 0,      x2: size.x, y2: 0     }],
+    ["right",  {x1: size.x, y1: 0,      x2: size.x, y2: size.y}],
+    ["bottom", {x1: 0,      y1: size.y, x2: size.x, y2: size.y}],
+    ["left",   {x1: 0,      y1: 0,      x2: 0,      y2: size.y}],
+  ];
+}
+
 export function RectHelper(props: { uid: string, size: Vec2D, selected: string[], highlight: RountanglePart[] }) {
+  const geomProps = lineGeometryProps(props.size);
   return <>
-    <line
+    {geomProps.map(([side, ps]) => <>
-      className={"lineHelper"
+      {(props.selected.includes(side) || props.highlight.includes(side)) && <line className={""
-        + (props.selected.includes("top") ? " selected" : "")
+            + (props.selected.includes(side) ? " selected" : "")
-        + (props.highlight.includes("top") ? " highlight" : "")}
+            + (props.highlight.includes(side) ? " highlight" : "")}
-      x1={0}
+            {...ps} data-uid={props.uid} data-parts={side}/>
-      y1={0}
+      }
-      x2={props.size.x}
+      <line className="helper" {...ps} data-uid={props.uid} data-parts={side}/>
-      y2={0}
+    </>)}
-      data-uid={props.uid}
-      data-parts="top" />
-    <line
-      className={"lineHelper"
-        + (props.selected.includes("right") ? " selected" : "")
-        + (props.highlight.includes("right") ? " highlight" : "")}
-      x1={props.size.x}
-      y1={0}
-      x2={props.size.x}
-      y2={props.size.y}
-      data-uid={props.uid}
-      data-parts="right" />
-    <line
-      className={"lineHelper"
-        + (props.selected.includes("bottom") ? " selected" : "")
-        + (props.highlight.includes("bottom") ? " highlight" : "")}
-      x1={0}
-      y1={props.size.y}
-      x2={props.size.x}
-      y2={props.size.y}
-      data-uid={props.uid}
-      data-parts="bottom" />
-    <line
-      className={"lineHelper"
-        + (props.selected.includes("left") ? " selected" : "")
-        + (props.highlight.includes("left") ? " highlight" : "")}
-      x1={0}
-      y1={0}
-      x2={0}
-      y2={props.size.y}
-      data-uid={props.uid}
-      data-parts="left" />
 
     <circle
-      className="circleHelper corner"
+      className="helper"
       cx={CORNER_HELPER_OFFSET}
       cy={CORNER_HELPER_OFFSET}
       r={CORNER_HELPER_RADIUS}
       data-uid={props.uid}
       data-parts="top left" />
     <circle
-      className="circleHelper corner"
+      className="helper"
       cx={props.size.x - CORNER_HELPER_OFFSET}
       cy={CORNER_HELPER_OFFSET}
       r={CORNER_HELPER_RADIUS}
       data-uid={props.uid}
       data-parts="top right" />
     <circle
-      className="circleHelper corner"
+      className="helper"
       cx={props.size.x - CORNER_HELPER_OFFSET}
       cy={props.size.y - CORNER_HELPER_OFFSET}
       r={CORNER_HELPER_RADIUS}
       data-uid={props.uid}
       data-parts="bottom right" />
     <circle
-      className="circleHelper corner"
+      className="helper"
       cx={CORNER_HELPER_OFFSET}
       cy={props.size.y - CORNER_HELPER_OFFSET}
       r={CORNER_HELPER_RADIUS}

src/VisualEditor/TextSVG.tsx

@@ -6,9 +6,9 @@ export function TextSVG(props: {text: Text, error: TraceableError|undefined, sel
     "data-uid": props.text.uid,
     "data-parts": "text",
     textAnchor: "middle" as "middle",
-    className: 
+    className: "draggableText"
-      (props.selected ? "selected":"")
+      + (props.selected ? " selected":"")
-      +(props.highlight ? " highlight":""),
+      + (props.highlight ? " highlight":""),
   }
 
   let textNode;
@@ -36,6 +36,8 @@ export function TextSVG(props: {text: Text, error: TraceableError|undefined, sel
       if (newText) {
         props.onEdit(newText);
       }
-    }}
+    }}>
-  >{textNode}</g>;
+      {textNode}
+      <text className="draggableText helper" textAnchor="middle" data-uid={props.text.uid} data-parts="text">{props.text.text}</text>
+    </g>;
 }

src/VisualEditor/VisualEditor.css

@@ -7,29 +7,16 @@
   cursor: grabbing !important;
 }
 
+/* do not render helpers while dragging something */
+.svgCanvas.dragging .helper:hover {
+  visibility: hidden !important;
+}
+
 .svgCanvas.active {
   background-color: rgb(255, 140, 0, 0.2);
 }
 
-text, text.highlight {
+/* rectangle drawn while a selection is being made */
-  user-select: none;
-  /* text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; */
-  /* -webkit-text-stroke: 4px white; */
-  paint-order: stroke;
-  stroke: white;
-  stroke-width: 4px;
-  stroke-linecap: butt;
-  stroke-linejoin: miter;
-  stroke-opacity: 1;
-  fill-opacity:1;
-  /* font-weight: 800; */
-}
-
-text.highlight {
-  fill: green;
-  font-weight: 600;
-}
-
 .selecting {
   fill: blue;
   fill-opacity: 0.2;
@@ -40,23 +27,12 @@ text.highlight {
 
 .rountangle {
   fill: white;
-  /* fill: none; */
   stroke: black;
   stroke-width: 2px;
 }
 
-.rountangle:hover {
-  /* stroke: blue; */
-  /* stroke-opacity: 0.2; */
-  /* fill: #eee; */
-  /* stroke-width: 4px; */
-  /* cursor: grab; */
-}
-
 .rountangle.selected {
   fill: rgba(0, 0, 255, 0.2);
-  /* stroke: blue;
-  stroke-width: 4px; */
 }
 .rountangle.error {
   stroke: rgb(230,0,0);
@@ -72,32 +48,31 @@ text.highlight {
   cursor: grab;
 }
 
-.lineHelper {
+line.helper {
   stroke: rgba(0, 0, 0, 0);
   stroke-width: 16px;
 }
-.lineHelper:hover:not(:active) {
+line.helper:hover:not(:active) {
   stroke: blue;
   stroke-opacity: 0.2;
   cursor: grab;
 }
 
-.pathHelper {
+path.helper {
   fill: none;
   stroke: rgba(0, 0, 0, 0);
   stroke-width: 16px;
 }
-.pathHelper:hover:not(:active) {
+path.helper:hover:not(:active) {
   stroke: blue;
   stroke-opacity: 0.2;
   cursor: grab;
 }
 
-
+circle.helper {
-.circleHelper {
   fill: rgba(0, 0, 0, 0);
 }
-.circleHelper:hover:not(:active) {
+circle.helper:hover:not(:active) {
   fill: blue;
   fill-opacity: 0.2;
   cursor: grab;
@@ -118,12 +93,6 @@ text.highlight {
   stroke-width: 3px;
 }
 
-/* .arrow.selected {
-  stroke: blue;
-  stroke-width: 4px;
-} */
-
-
 #arrowEnd {
   fill: context-stroke;
 }
@@ -139,14 +108,43 @@ line.selected, circle.selected {
   stroke-width: 4px;
 }
 
-text.selected, text.selected:hover {
+.draggableText.selected, .draggableText.selected:hover {
   fill: blue;
   font-weight: 600;
 }
-text:hover:not(:active) {
+.draggableText:hover:not(:active) {
   fill: blue;
   cursor: grab;
 }
+text.helper {
+  fill: rgba(0,0,0,0);
+  stroke: rgba(0,0,0,0);
+  stroke-width: 8px;
+}
+text.helper:hover {
+  stroke: blue;
+  stroke-opacity: 0.2;
+}
+
+.draggableText, .draggableText.highlight {
+  user-select: none;
+  /* text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; */
+  /* -webkit-text-stroke: 4px white; */
+  paint-order: stroke;
+  stroke: white;
+  stroke-width: 4px;
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  stroke-opacity: 1;
+  fill-opacity:1;
+  /* font-weight: 800; */
+}
+
+.draggableText.highlight {
+  fill: green;
+  font-weight: 600;
+}
+
 
 .highlight {
   stroke: green;
@@ -156,7 +154,7 @@ text:hover:not(:active) {
 .arrow.error {
   stroke: rgb(230,0,0);
 }
-text.error, tspan.error {
+.draggableText.error, tspan.error {
   fill: rgb(230,0,0);
   font-weight: 600;
 }

src/statecharts/concrete_syntax.ts

@@ -21,11 +21,18 @@ export type Arrow = {
   uid: string;
 } & Line2D;
 
+export type History = {
+  uid: string;
+  kind: "shallow" | "deep";
+  topLeft: Vec2D;
+};
+
 export type VisualEditorState = {
   rountangles: Rountangle[];
   texts: Text[];
   arrows: Arrow[];
   diamonds: Diamond[];
+  history: History[];
   nextID: number;
 };
 
@@ -34,19 +41,7 @@ export type RountanglePart = "left" | "top" | "right" | "bottom";
 export type ArrowPart = "start" | "end";
 
 export const emptyState: VisualEditorState = {
-  rountangles: [], texts: [], arrows: [], diamonds: [], nextID: 0,
+  rountangles: [], texts: [], arrows: [], diamonds: [], history: [], nextID: 0,
-};
-
-export const onOffStateMachine = {
-  rountangles: [
-    { uid: "0", topLeft: { x: 100, y: 100 }, size: { x: 100, y: 100 }, kind: "and" },
-    { uid: "1", topLeft: { x: 100, y: 300 }, size: { x: 100, y: 100 }, kind: "and" },
-  ],
-  texts: [],
-  arrows: [
-    { uid: "2", start: { x: 150, y: 200 }, end: { x: 160, y: 300 } },
-  ],
-  nextID: 3,
 };
 
 // used to find which rountangle an arrow connects to (src/tgt)

src/statecharts/interpreter.ts

@@ -20,7 +20,7 @@ type EnteredScope = { enteredStates: Mode } & ActionScope;
 export function entryActions(simtime: number, state: ConcreteState, actionScope: ActionScope): ActionScope {
   // console.log('enter', stateDescription(state), '...');
   let {environment, ...rest} = actionScope;
-  environment = environment.pushScope();
+  // environment = environment.pushScope();
   for (const action of state.entryActions) {
     ({environment, ...rest} = execAction(action, {environment, ...rest}));
   }
@@ -52,7 +52,7 @@ export function exitActions(simtime: number, state: ConcreteState, actionScope:
     // remove all timers of 'state':
     return oldTimers.filter(([_, {state: s}]) => s !== state.uid);
   }, []);
-  environment = environment.popScope();
+  // environment = environment.popScope();
   return {...actionScope, environment};
 }
 

src/statecharts/runtime_types.ts

@@ -17,8 +17,6 @@ export type TimerElapseEvent = {
 
 export type Mode = Set<string>; // set of active states
 
-// export type Environment = ReadonlyMap<string, any>; // variable name -> value
-
 export class Environment {
   scopes: ReadonlyMap<string, any>[]; // array of nested scopes - scope at the back of the array is used first
 
@@ -114,7 +112,6 @@ export type RaisedEvent = {
   param?: any,
 }
 
-
 export type RaisedEvents = {
   internalEvents: RaisedEvent[];
   outputEvents: RaisedEvent[];