usability improvements

src/VisualEditor/VisualEditor.css

@@ -3,6 +3,10 @@
   background-color: #eee;
 }
 
+.svgCanvas.dragging  {
+  cursor: grabbing !important;
+}
+
 .svgCanvas.active {
   background-color: rgb(255, 140, 0, 0.2);
 }
@@ -49,12 +53,6 @@ text.highlight {
   /* cursor: grab; */
 }
 
-.rountangle.dragging {
-  /* fill: lightgrey; */
-  /* stroke-width: 4px; */
-  cursor: grabbing;
-}
-
 .rountangle.selected {
   fill: rgba(0, 0, 255, 0.2);
   /* stroke: blue;
@@ -70,7 +68,7 @@ text.highlight {
   stroke-width: 3px;
 }
 
-.selected:hover {
+.selected:hover:not(:active) {
   cursor: grab;
 }
 
@@ -78,10 +76,10 @@ text.highlight {
   stroke: rgba(0, 0, 0, 0);
   stroke-width: 16px;
 }
-.lineHelper:hover {
+.lineHelper:hover:not(:active) {
   stroke: blue;
   stroke-opacity: 0.2;
-  /* cursor: grab; */
+  cursor: grab;
 }
 
 .pathHelper {
@@ -89,7 +87,7 @@ text.highlight {
   stroke: rgba(0, 0, 0, 0);
   stroke-width: 16px;
 }
-.pathHelper:hover {
+.pathHelper:hover:not(:active) {
   stroke: blue;
   stroke-opacity: 0.2;
   cursor: grab;
@@ -99,10 +97,10 @@ text.highlight {
 .circleHelper {
   fill: rgba(0, 0, 0, 0);
 }
-.circleHelper:hover {
+.circleHelper:hover:not(:active) {
   fill: blue;
   fill-opacity: 0.2;
-  /* cursor: grab; */
+  cursor: grab;
 }
 
 .rountangle.or {
@@ -134,9 +132,6 @@ text.highlight {
   cursor: grab;
 }
 
-
-
-
 line.selected, circle.selected {
   fill: rgba(0, 0, 255, 0.2);
   /* stroke-dasharray: 7 6; */

src/VisualEditor/VisualEditor.tsx

@@ -147,14 +147,20 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
       const compressedStateString = compressedStateBuffer.toBase64();
       window.location.hash = "#"+compressedStateString;
 
-      const [statechart, errors] = parseStatechart(state);
-      // console.log('statechart: ', statechart, 'errors:', errors);
-      setErrors(errors);
-      setAST(statechart);
-    }, 100);
+      // const [statechart, errors] = parseStatechart(state);
+      // setErrors(errors);
+      // setAST(statechart);
+    }, 200);
     return () => clearTimeout(timeout);
   }, [state]);
 
+  useEffect(() => {
+    const [statechart, errors] = parseStatechart(state);
+    setErrors(errors);
+    setAST(statechart);
+  }, [state])
+  
+
   function getCurrentPointer(e: {pageX: number, pageY: number}) {
     const bbox = refSVG.current!.getBoundingClientRect();
     return {
@@ -232,26 +238,25 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
             break;
           }
         }
-        // if (!allPartsInSelection) {
-        //   setSelection([{uid, parts}] as Selection);
-        // }
-
-        if (allPartsInSelection) {
-          // start dragging
-          setDragging({
-            lastMousePos: currentPointer,
-          });
-          return;
+        if (!allPartsInSelection) {
+          setSelection([{uid, parts}] as Selection);
         }
+
+        // start dragging
+        setDragging({
+          lastMousePos: currentPointer,
+        });
+        return;
       }
-      // otherwise, just start making a selection
-      setDragging(null);
-      setSelectingState({
-        topLeft: currentPointer,
-        size: {x: 0, y: 0},
-      });
-      setSelection([]);
     }
+
+    // otherwise, just start making a selection
+    setDragging(null);
+    setSelectingState({
+      topLeft: currentPointer,
+      size: {x: 0, y: 0},
+    });
+    setSelection([]);
   };
 
   const onMouseMove = (e: {pageX: number, pageY: number}) => {
@@ -680,7 +685,7 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
   const rootErrors = errors.filter(({shapeUid}) => shapeUid === "root").map(({message}) => message);
 
   return <svg width="4000px" height="4000px"
-      className={"svgCanvas"+(active.has("root")?" active":"")}
+      className={"svgCanvas"+(active.has("root")?" active":"")+(dragging!==null?" dragging":"")}
       onMouseDown={onMouseDown}
       onContextMenu={e => e.preventDefault()}
       ref={refSVG}
@@ -701,7 +706,7 @@ export function VisualEditor({setAST, rt, errors, setErrors, mode}: VisualEditor
         </marker>
       </defs>
 
-    {(rootErrors.length>0) && <text className="error" x={5} y={50}>{rootErrors.join(' ')}</text>}
+    {(rootErrors.length>0) && <text className="error" x={5} y={20}>{rootErrors.join(' ')}</text>}
 
     {state.rountangles.map(rountangle => <RountangleSVG
       key={rountangle.uid}