Fix Edge Selection (OpenFn#1146)

* Fix update selection, add pointer cursor * Update CHANGELOG.md
rorymckinley · Sep 26, 2023 · 1229177 · 1229177
1 parent f2693b5
commit 1229177
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,9 @@ and this project adheres to
 
 ### Fixed
 
+- Fix highlighted Edge can get out of sync with selected Edge
+  [#1099](https://github.com/OpenFn/Lightning/issues/1099)
+
 - Creating a new user without a password fails and there is no user feedback
   [#731](https://github.com/OpenFn/Lightning/issues/731)
 

diff --git a/assets/js/workflow-diagram/WorkflowDiagram.tsx b/assets/js/workflow-diagram/WorkflowDiagram.tsx
@@ -42,17 +42,21 @@ export default React.forwardRef<HTMLElement, WorkflowDiagramProps>(
     const updateSelection = useCallback(
       (id?: string) => {
         if (id !== selection) {
-          chartCache.current.lastSelection = id;
           onSelectionChange(id);
         }
       },
       [onSelectionChange, selection]
     );
 
+    const requestSelectionChange = useCallback((id?: string) => {
+      chartCache.current.lastSelection = id;
+      updateSelection(id);
+    }, []);
+
     const { placeholders, add: addPlaceholder } = usePlaceholders(
       ref,
       store,
-      updateSelection
+      requestSelectionChange
     );
 
     const workflow = useStore(

diff --git a/assets/js/workflow-diagram/edges/Edge.tsx b/assets/js/workflow-diagram/edges/Edge.tsx
@@ -23,7 +23,7 @@ const CustomEdge: FC<EdgeProps> = props => {
               pointerEvents: 'all',
               ...labelStyles(selected),
             }}
-            className="nodrag nopan"
+            className="nodrag nopan cursor-pointer"
           >
             {label}
           </div>

diff --git a/assets/js/workflow-diagram/nodes/Node.tsx b/assets/js/workflow-diagram/nodes/Node.tsx
@@ -100,7 +100,7 @@ const Node = ({
 
   return (
     <div className="group">
-      <div className="flex flex-row">
+      <div className="flex flex-row cursor-pointer">
         <div>
           {targetPosition && (
             <Handle

diff --git a/assets/js/workflow-diagram/usePlaceholders.ts b/assets/js/workflow-diagram/usePlaceholders.ts
@@ -63,9 +63,6 @@ export default (
     const updated = create(parentNode);
     setPlaceholders(updated);
 
-    // clear the selection
-    // // TODO need to put the chart in placeholder mode
-    // chartCache.current.lastSelection = undefined;
     requestSelectionChange(updated.nodes[0].id);
   }, []);