npm - @eccenca/gui-elements - Versions diffs - 23.0.0-rc.6 → 23.0.0-rc.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

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

@@ -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 CHANGED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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,
-};