@eccenca/gui-elements 6.2.0 → 22.0.0-rc.7

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -0,0 +1,79 @@
+.#{$eccgui}-graphviz__minimap__node--default {
+    stroke: $reactflow-node-border-color;
+    fill: $reactflow-node-background-color;
+}
+
+.#{$eccgui}-graphviz__minimap__node--graphNode {
+    fill: #8e24aa;
+    stroke: #8e24aa;
+}
+
+.#{$eccgui}-graphviz__minimap__node--classNode {
+    fill: darken($button-background-color, 60%);
+    stroke: darken($button-background-color, 60%);
+}
+
+.#{$eccgui}-graphviz__minimap__node--instanceNode {
+    fill: darken($button-background-color, 50%);
+    stroke: darken($button-background-color, 50%);
+}
+
+.#{$eccgui}-graphviz__minimap__node--propertyNode {
+    fill: darken(complement($button-background-color), 40%);
+    stroke: darken(complement($button-background-color), 40%);
+}
+
+.#{$eccgui}-graphviz__minimap__node--datasetNode {
+    fill: #039be5;
+    stroke: #039be5;
+}
+
+.#{$eccgui}-graphviz__minimap__node--linkingNode {
+    fill: #00acc1;
+    stroke: #00acc1;
+}
+
+.#{$eccgui}-graphviz__minimap__node--transformNode {
+    fill: #00897b;
+    stroke: #00897b;
+}
+
+.#{$eccgui}-graphviz__minimap__node--taskNode {
+    fill: #546e7a;
+    stroke: #546e7a;
+}
+
+.#{$eccgui}-graphviz__minimap__node--workflowNode {
+    fill: #4527a0;
+    stroke: #4527a0;
+}
+
+.#{$eccgui}-graphviz__minimap__node--highlight-match {
+    stroke: $eccgui-color-accent;
+    stroke-width: 5;
+    //fill: $reactflow-node-background-color;
+}
+.#{$eccgui}-graphviz__minimap__node--highlight-altmatch {
+    stroke: complement($eccgui-color-primary);
+    stroke-width: 5;
+    //fill: $reactflow-node-background-color;
+}
+.#{$eccgui}-graphviz__minimap__node--highlight-success {
+    stroke: $eccgui-color-success-text;
+    stroke-width: 5;
+    //fill: $reactflow-node-background-color;
+}
+.#{$eccgui}-graphviz__minimap__node--highlight-warning {
+    stroke: $eccgui-color-warning-text;
+    stroke-width: 7;
+    //fill: $reactflow-node-background-color;
+}
+.#{$eccgui}-graphviz__minimap__node--highlight-danger {
+    fill: $eccgui-color-danger-text;
+    stroke: $eccgui-color-danger-text;
+    stroke-width: 9;
+}
+
+.#{$eccgui}-graphviz__minimap__node--customcolor {
+    fill: unset;
+}

package/src/extensions/react-flow/minimap/utils.ts

@@ -0,0 +1,13 @@
+import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
+import { gethighlightedStateClasses } from "./../nodes/NodeDefault";
+
+export const minimapNodeClassName = (node: any) => {
+    const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
+    const stateClass = node.data?.highlightedState ? gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
+    const customColor = node.data?.style?.borderColor ? `${eccgui}-graphviz__minimap__node--customcolor` : "";
+    return typeClass + (stateClass ? " " + stateClass : "") + (customColor ? " " + customColor : "");
+};
+
+export const minimapNodeColor = (node: any) => {
+    return node.data?.style?.borderColor ?? "";
+}

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

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import ReactFlow, { Elements } from 'react-flow-renderer';
+import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+
+import { NodeContent } from "./NodeDefault";
+import { nodeTypes } from "./nodeTypes";
+import { NodeContentExtension } from "./NodeContentExtension";
+import { Default as ContentExtensionExample } from "./NodeContentExtension.stories";
+
+export default {
+    title: "Extensions/React Flow/Node Content",
+    component: NodeContent,
+    subcomponents: { NodeContentExtension },
+    argTypes: {
+        contentExtension: {
+            control: "select",
+            options: ["Not set", "Default example"],
+            mapping: {
+                "Not set": undefined,
+                "Default example": <ContentExtensionExample />,
+            },
+        },
+        content: { control: "none" },
+        isConnectable: { table: { disable: true } },
+        targetPosition: { table: { disable: true } },
+        sourcePosition: { table: { disable: true } },
+        selected: { table: { disable: true } },
+        businessData: { table: { disable: true } },
+    },
+} as ComponentMeta<typeof NodeContent>;
+
+const NodeContentExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+
+    useEffect(() => {
+        setElements([
+            {
+                id: '1',
+                type: 'default',
+                data: args,
+                position: { x: 50, y: 50 },
+            }
+        ] as Elements);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return <ReactFlow
+        elements={elements}
+        style={{ height: '400px' }}
+        onLoad={onLoad}
+        nodeTypes={ nodeTypes }
+        defaultZoom={1}
+    />
+}
+
+const Template: ComponentStory<typeof NodeContent> = (args) => (
+    <NodeContentExample {...args} /*some comment*/ />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Node title',
+    content: (
+        <HtmlContentBlock>
+            <h4>Node body</h4>
+            <LoremIpsum p={4} avgSentencesPerParagraph={3} random={false} />
+        </HtmlContentBlock>
+    ),
+    contentExtension: <ContentExtensionExample />,
+    minimalShape: "none",
+};

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

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import { NodeContentExtension } from "./NodeContentExtension";
+import IconButton from "../../../components/Icon/IconButton";
+import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+
+export default {
+    title: "Extensions/React Flow/Node Content Extension",
+    component: NodeContentExtension,
+    argTypes: {
+    },
+} as ComponentMeta<typeof NodeContentExtension>;
+
+export const Default = () => {
+    const [isExpanded, setExpanded] = useState<boolean>(false);
+
+    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <NodeContentExtension
+            isExpanded={isExpanded}
+            onToggle={toggleExpansion}
+            actionButtons={
+                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
+            }
+        >
+            <HtmlContentBlock>
+                <h4>Extension example.</h4>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </NodeContentExtension>);
+}

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

@@ -0,0 +1,87 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import IconButton from "../../../components/Icon/IconButton";
+import Button from "../../../components/Button/Button";
+
+export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Element is displayed in expanded state.
+     * If it has no `onToggle` handler property set then it is always expanded.
+     */
+    isExpanded?: boolean;
+    /**
+     * Click handler to manage the expanded state from outside the the element.
+     * This state is not managed automatically by the element itself.
+     */
+    onToggle?: (event: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;
+    /**
+     * Single element or aray of `IconButton` and `Button` elements.
+     * They will be displayed beside the closing button under the element content body.
+     */
+    actionButtons?: React.ReactNode | React.ReactNode[];
+    /**
+     * Tooltip text for expand button.
+     */
+    tooltipExpand?: string;
+    /**
+     * Tooltip text for expand button.
+     */
+    tooltipReduce?: string;
+}
+
+/**
+ * Displays an content area that can be attached to `NodeContent` elements.
+ */
+export const NodeContentExtension = ({
+    children,
+    isExpanded = false,
+    onToggle = undefined,
+    actionButtons,
+    tooltipExpand = "Show more",
+    tooltipReduce = "Show less",
+    // other props for DOM element
+    ...otherProps
+}: NodeContentExtensionProps) => {
+
+    // always expand element if there is no handler to manage it
+    const expanded = onToggle ? isExpanded : true;
+
+    return (
+        <div
+            {...otherProps}
+            className={
+                `${eccgui}-graphviz__node__extension` +
+                (expanded ? ` ${eccgui}-graphviz__node__extension--expanded` : "")
+            }
+        >
+            {
+                !expanded && onToggle && (
+                    <IconButton
+                        className={`${eccgui}-graphviz__node__extension-expandbutton`}
+                        name="item-vertmenu"
+                        text={tooltipExpand}
+                        onClick={(e) => { onToggle(e, expanded); }}
+                    />
+                )
+            }
+            {
+                expanded && (
+                    <>
+                        <div className={`${eccgui}-graphviz__node__extension-body`}>
+                            {children}
+                        </div>
+                        <div className={`${eccgui}-graphviz__node__extension-actions`}>
+                            <IconButton
+                                className={`${eccgui}-graphviz__node__extension-reducebutton`}
+                                name="toggler-showless"
+                                text={tooltipReduce}
+                                onClick={onToggle ? (e) => { onToggle(e, expanded); } : undefined}
+                            />
+                            {actionButtons}
+                        </div>
+                    </>
+                )
+            }
+        </div>
+    );
+}

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

@@ -0,0 +1,138 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import ReactFlow, { Elements } from 'react-flow-renderer';
+
+import { NodeDefault, NodeContent } from "./NodeDefault";
+import { nodeTypes } from "./nodeTypes";
+import { Default as NodeContentExample } from "./NodeContent.stories";
+
+export default {
+    title: "Extensions/React Flow/Default Node",
+    component: NodeDefault,
+    subcomponents: { NodeContent },
+    argTypes: {
+        id: {
+            control: "text",
+            description: "Internal node identifier.",
+        },
+        position: {
+            type: { required: true },
+            description: "Position on React-Flow canvas.",
+            table: {
+                type: { summary: "XYPosition" }
+            },
+        },
+        type: {
+            control: "select",
+            description: "Key of the imported and connected `nodeTypes` to specify what node implementation is used.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "default" }
+            },
+            options: Object.keys(nodeTypes),
+            mapping: Object.fromEntries(Object.keys(nodeTypes).map(type => [type, type])),
+        },
+        style: {
+            control: "object",
+            description: "css properties",
+            table: {
+                type: { summary: "React.CSSProperties" }
+            },
+        },
+        className: {
+            control: "text",
+            description: "additional class name"
+        },
+        targetPosition: {
+            description: "'left' | 'right' | 'top' | 'bottom' handle position",
+            table: {
+                type: { summary: "Position" },
+                defaultValue: { summary: "Position.Left" }
+            },
+        },
+        sourcePosition: {
+            description: "'left' | 'right' | 'top' | 'bottom' handle position",
+            table: {
+                type: { summary: "Position" },
+                defaultValue: { summary: "Position.Right" }
+            },
+        },
+        isHidden: {
+            control: "boolean",
+            description: "if true, the node will not be rendered",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" }
+            },
+        },
+        draggable: {
+            control: "boolean",
+            description: "if option is not set, the node is draggable (overwrites general nodesDraggable option)",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" }
+            },
+        },
+        connectable: {
+            control: "boolean",
+            description: "if option is not set, the node is connectable (overwrites general nodesConnectable option)",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" }
+            },
+        },
+        selectable: {
+            control: "boolean",
+            description: "if option is not set, the node is selectable (overwrites general elementsSelectable option)",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" }
+            },
+        },
+        dragHandle: {
+            control: "text",
+            description: "selector for specifying an element as a drag handle"
+        },
+    },
+} as ComponentMeta<typeof NodeDefault>;
+
+const NodeDefaultExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+
+    useEffect(() => {
+        setElements([
+            args
+        ] as Elements);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return <ReactFlow
+        elements={elements}
+        style={{ height: '400px' }}
+        onLoad={onLoad}
+        nodeTypes={ nodeTypes }
+        defaultZoom={1}
+    />
+}
+
+const Template: ComponentStory<typeof NodeDefault> = (args) => (
+    <NodeDefaultExample {...args} /*some comment*/ />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    id: '1',
+    type: 'default',
+    data: NodeContentExample.args,
+    position: { x: 50, y: 50 },
+};