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

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

@@ -271,6 +271,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]);