@eccenca/gui-elements 23.0.0-rc.5 → 23.0.0-rc.7

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

@@ -10,14 +10,33 @@ import {
 import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
+    /**
+     * Size of the "glow" effect when the edge is hovered.
+     */
     pathGlowWidth?: number;
+    /*
+     * Direction of the SVG path is inversed.
+     * This is important for the placement of the markers and the animation movement.
+     */
     inversePath?: boolean;
+    /**
+     * Reference linnk to the SVG marker used for the start of the edge
+     */
     markerStart?: string;
+    /**
+     * Callback handler that returns a React element used as edge title.
+     */
     renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
 }
 
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
+    /**
+     * Defining content and markers for the edge.
+     */
     data?: EdgeDefaultDataProps,
+    /**
+     * Callback handler that returns a SVG path as string to define how the edge is rendered.
+     */
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
 

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

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ReactFlow, Tag } from "./../../../../../index";
+import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
+
+import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
+import { edgeTypes } from "./../edgeTypes";
+
+const EdgeDefaultDataProps = (data: EdgeData) => {
+    // this is only a mock to get it as sub element in the table
+    return <></>;
+}
+
+export default {
+    title: "Extensions/React Flow/Default Edge",
+    component: EdgeDefault,
+    subcomponents: { EdgeDefaultDataProps },
+    argTypes: {
+    },
+} as ComponentMeta<typeof EdgeDefault>;
+
+const EdgeDefaultExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+
+    useEffect(() => {
+        setElements([
+            {
+                id: args.source,
+                type: "default",
+                data: {
+                    label: "Default ", content: "Example content.", minimalShape: "none",
+                },
+                position: { x: 50, y: 200 },
+            },
+            {
+                id: args.target,
+                type: "default",
+                data: {
+                    label: "Default ", content: "Example content.", minimalShape: "none",
+                },
+                position: { x: 600, y: 200 },
+            },
+            {
+                ...args
+            }
+        ] as Elements);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return <ReactFlowProvider>
+        <ReactFlow
+            elements={elements}
+            style={{ height: '400px' }}
+            onLoad={onLoad}
+            edgeTypes={ edgeTypes }
+            defaultZoom={1}
+        />
+    </ReactFlowProvider>
+}
+
+const Template: ComponentStory<typeof EdgeDefault> = (args) => (
+    <EdgeDefaultExample {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    id: 'default',
+    type: 'default',
+    label: "edge",
+    arrowHeadType: "arrowclosed",
+    source: 'node-1',
+    target: 'node-2',
+    data: {
+    }
+};
+
+export const CustomLabel = Template.bind({});
+CustomLabel.args = {
+    ...Default.args,
+    id: "customlabel",
+    arrowHeadType: undefined,
+    data: {
+        renderLabel: (
+            edgeCenter: [number, number, number, number]
+        ) => (
+            <foreignObject
+                width={100}
+                height={20}
+                x={edgeCenter[0] - 50}
+                y={edgeCenter[1] - 10}
+                requiredExtensions="http://www.w3.org/1999/xhtml"
+            >
+                <body>
+                    <Tag>Custom label</Tag>
+                </body>
+            </foreignObject>
+        )
+    }
+};
+
+export const InverseEdge = Template.bind({});
+InverseEdge.args = {
+    ...Default.args,
+    id: "inverse",
+    arrowHeadType: undefined,
+    data: {
+        inversePath: true,
+        markerStart: getMarkerEnd(
+            `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
+        ),
+    }
+};

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

@@ -117,5 +117,5 @@ Default.args = {
 export const Resizeable = Template.bind({});
 Resizeable.args = {
     ...Default.args,
-    onNodeResize: (dimensions) => { alert(`new dimensions: ${dimensions.width}x${dimensions.height}`); },
+    onNodeResize: (dimensions) => { console.log('onNodeResize', `new dimensions: ${dimensions.width}x${dimensions.height}`); },
 }

package/dist/cjs/cmem/react-flow/configuration/customLabel.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.nodeTypes = exports.edgeTypes = void 0;
-const EdgeDefault_1 = require("./../../../extensions/react-flow/edges/EdgeDefault");
-const NodeDefault_1 = require("./../../../extensions/react-flow/nodes/NodeDefault");
-exports.edgeTypes = {
-    default: EdgeDefault_1.EdgeDefault,
-    straight: EdgeDefault_1.EdgeDefault,
-};
-exports.nodeTypes = {
-    default: NodeDefault_1.NodeDefault,
-};
-//# sourceMappingURL=customLabel.js.map

package/dist/cjs/cmem/react-flow/configuration/customLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"customLabel.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/configuration/customLabel.ts"],"names":[],"mappings":";;;AAAA,oFAAiF;AACjF,oFAAiF;AAEpE,QAAA,SAAS,GAAG;IACrB,OAAO,EAAE,yBAAW;IACpB,QAAQ,EAAE,yBAAW;CACxB,CAAC;AAEW,QAAA,SAAS,GAAG;IACrB,OAAO,EAAE,yBAAW;CACvB,CAAC"}

package/dist/cjs/cmem/react-flow/configuration/inverseEdge.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.nodeTypes = exports.edgeTypes = void 0;
-const EdgeDefault_1 = require("./../../../extensions/react-flow/edges/EdgeDefault");
-const NodeDefault_1 = require("./../../../extensions/react-flow/nodes/NodeDefault");
-exports.edgeTypes = {
-    default: EdgeDefault_1.EdgeDefault,
-    straight: EdgeDefault_1.EdgeDefault,
-};
-exports.nodeTypes = {
-    default: NodeDefault_1.NodeDefault,
-};
-//# sourceMappingURL=inverseEdge.js.map

package/dist/cjs/cmem/react-flow/configuration/inverseEdge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inverseEdge.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/configuration/inverseEdge.ts"],"names":[],"mappings":";;;AAAA,oFAAiF;AACjF,oFAAiF;AAEpE,QAAA,SAAS,GAAG;IACrB,OAAO,EAAE,yBAAW;IACpB,QAAQ,EAAE,yBAAW;CACxB,CAAC;AAEW,QAAA,SAAS,GAAG;IACrB,OAAO,EAAE,yBAAW;CACvB,CAAC"}

package/dist/esm/cmem/react-flow/configuration/customLabel.js

@@ -1,10 +0,0 @@
-import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault.js";
-import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault.js";
-export var edgeTypes = {
-    default: EdgeDefault,
-    straight: EdgeDefault,
-};
-export var nodeTypes = {
-    default: NodeDefault,
-};
-//# sourceMappingURL=customLabel.js.map

package/dist/esm/cmem/react-flow/configuration/customLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"customLabel.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/configuration/customLabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEjF,MAAM,CAAC,IAAM,SAAS,GAAG;IACrB,OAAO,EAAE,WAAW;IACpB,QAAQ,EAAE,WAAW;CACxB,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG;IACrB,OAAO,EAAE,WAAW;CACvB,CAAC"}

package/dist/esm/cmem/react-flow/configuration/inverseEdge.js

@@ -1,10 +0,0 @@
-import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault.js";
-import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault.js";
-export var edgeTypes = {
-    default: EdgeDefault,
-    straight: EdgeDefault,
-};
-export var nodeTypes = {
-    default: NodeDefault,
-};
-//# sourceMappingURL=inverseEdge.js.map

package/dist/esm/cmem/react-flow/configuration/inverseEdge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inverseEdge.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/configuration/inverseEdge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEjF,MAAM,CAAC,IAAM,SAAS,GAAG;IACrB,OAAO,EAAE,WAAW;IACpB,QAAQ,EAAE,WAAW;CACxB,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG;IACrB,OAAO,EAAE,WAAW;CACvB,CAAC"}

package/dist/types/cmem/react-flow/configuration/customLabel.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    straight: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-};
-export declare const nodeTypes: {
-    default: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
-};

package/dist/types/cmem/react-flow/configuration/inverseEdge.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const edgeTypes: {
-    default: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    straight: import("react").MemoExoticComponent<(edge: import("./../../../extensions/react-flow/edges/EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-};
-export declare const nodeTypes: {
-    default: import("react").MemoExoticComponent<(node: import("./../../../extensions/react-flow/nodes/NodeDefault").NodeProps<any, any>) => JSX.Element>;
-};

package/src/cmem/react-flow/configuration/customLabel.ts

@@ -1,11 +0,0 @@
-import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
-import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-
-export const edgeTypes = {
-    default: EdgeDefault,
-    straight: EdgeDefault,
-};
-
-export const nodeTypes = {
-    default: NodeDefault,
-};

package/src/cmem/react-flow/configuration/inverseEdge.ts

@@ -1,11 +0,0 @@
-import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
-import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-
-export const edgeTypes = {
-    default: EdgeDefault,
-    straight: EdgeDefault,
-};
-
-export const nodeTypes = {
-    default: NodeDefault,
-};