Merge pull request #34 from MertenD/21-feedback-on-edge-selection

feat: add edgeSelected edge color
MertenD · Aug 24, 2023 · e1ac6f3 · e1ac6f3
2 parents cca32cc + 488421c
commit e1ac6f3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import {ReactFlowProvider, useReactFlow} from "reactflow";
+import {ReactFlowProvider} from "reactflow";
 import React, {useEffect} from "react";
 import HeaderBar, {CANVAS_HEIGHT} from "@/components/editor/headerbar/HeaderBar";
 import useEditorPageState from "@/stores/editor/EditorPageStore";
 import {Alert, Snackbar} from "@mui/material";
 import Engine from "@/components/editor/Engine";
-import useReactFlowStore from "@/stores/editor/ReactFlowStore";
+import {selectedColor} from "@/config/colors";
 
 export default function Canvas() {
 
@@ -33,6 +33,10 @@ export default function Canvas() {
         e.preventDefault()
     }
 
+    useEffect(() => {
+        document.documentElement.style.setProperty('--selected-color', selectedColor);
+    }, []);
+
     return <div style={{ height: "100vh"}}>
         <ReactFlowProvider>
             <HeaderBar />

diff --git a/src/components/editor/pages/canvas/edges/EdgeGradientStyles.css b/src/components/editor/pages/canvas/edges/EdgeGradientStyles.css
@@ -22,6 +22,15 @@
     stroke-opacity: 0.75;
 }
 
+/* Edge Selected Edge */
+/*noinspection ALL,CssUnusedSymbol*/
+.react-flow__edge.edgeSelected .react-flow__edge-path {
+    stroke: url(#edgeSelected-edge-gradient);
+    stroke-width: 2;
+    stroke-opacity: 0.75;
+    filter: drop-shadow(0px 0px 5px var(--selected-color));
+}
+
 /* Default Edge */
 /*noinspection ALL,CssUnusedSymbol*/
 .react-flow__edge.default .react-flow__edge-path {
@@ -38,23 +47,23 @@
     stroke-opacity: 0.75;
 }
 
-/* HtmlHighlight Edge */
+/* TextHighlight Edge */
 /*noinspection ALL,CssUnusedSymbol*/
 .react-flow__edge.text .react-flow__edge-path {
     stroke: url(#text-edge-gradient);
     stroke-width: 2;
     stroke-opacity: 0.75;
 }
 
-/* HtmlHighlight Edge */
+/* JsonHighlight Edge */
 /*noinspection ALL,CssUnusedSymbol*/
 .react-flow__edge.json .react-flow__edge-path {
     stroke: url(#json-edge-gradient);
     stroke-width: 2;
     stroke-opacity: 0.75;
 }
 
-/* HtmlHighlight Edge */
+/* NoneHighlight Edge */
 /*noinspection ALL,CssUnusedSymbol*/
 .react-flow__edge.none .react-flow__edge-path {
     stroke: url(#none-edge-gradient);

diff --git a/src/components/editor/pages/canvas/edges/Edges.ts b/src/components/editor/pages/canvas/edges/Edges.ts
@@ -9,6 +9,7 @@ export const DefaultEdge = createEdge(defaultEdgeColor, defaultEdgeColor, "defau
 export const SelectedIncomingEdge = createEdge(defaultEdgeColor, selectedColor, "incoming")
 export const SelectedOutgoingEdge = createEdge(selectedColor, defaultEdgeColor, "outgoing")
 export const BothSelectedEdge = createEdge(selectedColor, selectedColor, "bothSelected")
+export const EdgeSelectedEdge = createEdge(selectedColor, selectedColor, "edgeSelected")
 
 export const highlightEdges: HighlightEdgeInfoTypes = {
     [OutputValueType.NONE]: createEdge(defaultEdgeColor, defaultEdgeColor, OutputValueType.NONE),

diff --git a/src/stores/editor/ReactFlowStore.ts b/src/stores/editor/ReactFlowStore.ts
@@ -21,6 +21,7 @@ import {NodeType} from "@/config/NodeType";
 import {
     BothSelectedEdge,
     DefaultEdge,
+    EdgeSelectedEdge,
     highlightEdges,
     SelectedIncomingEdge,
     SelectedOutgoingEdge
@@ -79,6 +80,7 @@ export const useReactFlowStore = create<ReactFlowState>((set, get) => ({
         selectedIncomingEdge: SelectedIncomingEdge,
         selectedOutgoingEdge: SelectedOutgoingEdge,
         bothSelectedEdge: BothSelectedEdge,
+        edgeSelectedEdge: EdgeSelectedEdge,
         ...highlightEdges,
     },
     onNodesChange: (changes: NodeChange[]) => {
@@ -198,6 +200,12 @@ export const useReactFlowStore = create<ReactFlowState>((set, get) => ({
 
             set({
                 edges: get().edges.map(edge => {
+                    if (selectedNodeIds.length === 0 && edge.selected) {
+                        return {
+                            ...edge,
+                            type: "edgeSelectedEdge"
+                        }
+                    }
                     if (selectedNodeIds.includes(edge.source) && selectedNodeIds.includes(edge.target)) {
                         return {
                             ...edge,
@@ -220,6 +228,20 @@ export const useReactFlowStore = create<ReactFlowState>((set, get) => ({
                         ...edge,
                         type: "defaultEdge"
                     }
+                }).sort((a, b) => {
+                    if (a.type === "edgeSelectedEdge") {
+                        return 1
+                    }
+                    if (b.type === "edgeSelectedEdge") {
+                        return -1
+                    }
+                    if (a.type === "defaultEdge") {
+                        return -1
+                    }
+                    if (b.type === "defaultEdge") {
+                        return 1
+                    }
+                    return 0
                 })
             })