@eccenca/gui-elements 24.4.1-featurepreparefinalnextcmem6943.2 → 25.0.0-featureimproveprintstylescmem6985.0

package/src/extensions/react-flow/_react-flow_v12.scss

@@ -67,7 +67,7 @@
     position: absolute;
 }
 
-.react-flow .react-flow__edges svg {
+.react-flow .react-flow__edges svg:not(.#{$eccgui}-icon) {
     position: absolute;
     overflow: visible;
     pointer-events: none;
@@ -179,31 +179,27 @@ svg.react-flow__connectionline {
     pointer-events: none;
     background-color: $reactflow-background-color;
     border: solid 1px $eccgui-color-separation-divider;
-
-    pattern path {
-        opacity: $eccgui-opacity-ghostly;
-        stroke: #{eccgui-color-var("identity", "text", "300")};
-    }
 }
 
 .react-flow__background-pattern,
-.react-flow__background pattern path:first-child {
-    opacity: $eccgui-opacity-ghostly;
-    stroke: #{eccgui-color-var("identity", "text", "500")};
+.react-flow__background pattern *:first-child:not(.react-flow__background-pattern) {
+    opacity: $eccgui-opacity-muted;
+    stroke: $eccgui-color-separation-divider;
 }
 
 .react-flow__background-pattern.dots,
-.react-flow__background pattern circle:first-child {
-    opacity: $eccgui-opacity-muted;
-    fill: #{eccgui-color-var("identity", "text", "700")};
+.react-flow__background pattern circle:first-child:not(.react-flow__background-pattern) {
+    fill: #{eccgui-color-var("identity", "text", "500")};
 }
 
 .react-flow__background-pattern.cross {
-    stroke: #{eccgui-color-var("identity", "text", "300")};
+    opacity: $eccgui-opacity-disabled;
+    stroke: #{eccgui-color-var("identity", "text", "500")};
+    stroke-width: 0.3;
 }
 
 .react-flow__background-pattern.lines {
-    stroke: #{eccgui-color-var("identity", "text", "300")};
+    stroke-width: 0.4;
 }
 
 .react-flow__attribution {

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -28,7 +28,7 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     fullWidth?: boolean;
     /**
-     * Label is diaplayed without a box that comes with borders and background color.
+     * Label is displayed without a box that comes with borders and background color.
      */
     loose?: boolean;
     /**

package/src/extensions/react-flow/edges/_edges.scss

@@ -10,7 +10,7 @@
     path[class*="react-flow__edge"],
     rect[class*="react-flow__edge"] {
         stroke-opacity: $reactflow-edge-stroke-opacity-default;
-        shape-rendering: optimizespeed;
+        shape-rendering: $reactflow-edge-rendering;
     }
 
     text[class*="react-flow__edge"] {
@@ -60,11 +60,15 @@
 path.react-flow__edge-path {
     stroke: currentcolor;
     stroke-opacity: $reactflow-edge-stroke-opacity-default;
-    stroke-width: 2;
+    stroke-width: $reactflow-edge-stroke-width-default;
+
+    .react-flow__edge:hover & {
+        stroke-width: $reactflow-edge-stroke-width-hover;
+    }
 
     .react-flow__edge.selected & {
         stroke: currentcolor;
-        stroke-width: 2;
+        stroke-width: $reactflow-edge-stroke-width-selected;
     }
 }
 
@@ -78,11 +82,11 @@ path.react-flow__edge-interaction {
     }
 
     .react-flow__edge:hover & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.selected & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 }
 
@@ -96,11 +100,11 @@ path.react-flow__edge-path-glow {
     }
 
     .react-flow__edge:hover & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.selected & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.animated & {
@@ -271,6 +275,10 @@ path.react-flow__edge-path-highlight {
 
 // Custom label
 
+.#{$eccgui}-graphviz__edge-labelobject {
+    overflow: visible;
+}
+
 .#{$eccgui}-graphviz__edge-label {
     --#{$eccgui}-reactflow-edge-label-color: currentcolor;
     --#{$eccgui}-reactflow-edge-label-color-background: #{$card-background-color};

package/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useState } from "react";
 import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
-import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
+import { EdgeDefaultProps, EdgeLabel, EdgeLabelObject, ReactFlowExtended } from "./../../../../../index";
 import { edgeTypes } from "./../../../../cmem/react-flow/configuration/workflow";
+import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table
-    return <></>;
+    return <>{data.intent}</>;
 };
 
 export default {
@@ -23,7 +23,7 @@ export default {
     },
 } as Meta<typeof EdgeDefault>;
 
-const EdgeDefaultExample = (args: any) => {
+const EdgeDefaultExample = (args: EdgeDefaultProps) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
 
@@ -66,7 +66,7 @@ const EdgeDefaultExample = (args: any) => {
 
     return (
         <ReactFlowProvider>
-            <ReactFlow
+            <ReactFlowExtended
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -754,7 +754,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                 nodeContentRef.current.style.height = `${nextHeight}px`;
             }
         }
-    }, [resizeDirections, originalSize])
+    }, [resizeDirections, originalSize, width, height])
 
     const onResizeStop = React.useCallback((_0, _1, _2, d) => {
         const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
@@ -767,7 +767,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                 width: nextWidth,
             });
         }
-    }, [onNodeResize])
+    }, [onNodeResize, width, height, originalSize]);
 
     const resizableSize = React.useMemo(() => ({ height: height ?? "auto", width: width ?? "auto" }), [height, width]);
     const enableResize = React.useMemo(() => resizeDirections!.bottom && resizeDirections!.right ? { bottomRight: true } : resizeDirections, [resizeDirections]);