@eccenca/gui-elements 23.1.0-rc.3 → 23.1.0

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -22,6 +22,10 @@
             margin-top: $eccgui-size-block-whitespace * 0.5;
         }
     }
+
+    .#{$eccgui}-label {
+        color: inherit;
+    }
 }
 
 .#{$eccgui}-propertyvalue__property,

package/src/components/Table/table.scss

@@ -179,7 +179,8 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 .#{$prefix}--data-table--zebra > tbody > tr[data-parent-row]:nth-child(4n+3),
 .#{$prefix}--data-table--zebra > tbody > tr[data-child-row]:nth-child(4n+4),
 .#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra,
- .#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra + tr[data-child-row] {
+.#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra + tr[data-child-row],
+.#{$prefix}--data-table--zebra > tbody > tr:not([data-parent-row]):not([data-child-row]):nth-child(2n+0) {
     // even rows
 
     &.#{$prefix}--expandable-row:not([data-child-row]) {

package/src/components/interfaces.ts

@@ -1,4 +1,7 @@
 export interface TestableComponent {
+    /**
+     * Can be set to use it as selector in test environments.
+     */
     "data-test-id"?: string
 }
 

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

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef } from "react";
+import React, { memo } from "react";
 import { Icon, Depiction, DepictionProps, OverflowText } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
@@ -91,30 +91,42 @@ interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectEleme
      * Property from the `renderLabel` callback method.
      */
     edgeCenter: [number, number, number, number];
+    /**
+     * Number of milliseconds.
+     * If set and larger then zero then the re-sizing process is repeated after this time.
+     */
+    resizeTimeout?: number;
 }
 
 export const EdgeLabelObject = memo(({
     children,
     edgeCenter,
+    resizeTimeout = -1,
     ...otherForeignObjectProps
 } : EdgeLabelObjectProps) => {
-    const containerRef = useRef<SVGForeignObjectElement>(null);
+    const containerCallback = React.useCallback((containerRef) => {
+        if (containerRef) labelSize(containerRef);
+    }, [edgeCenter]);
 
-    useEffect(() => {
-        const labelElement = containerRef.current!.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
+    const labelSize = (container: SVGForeignObjectElement) => {
+        const labelElement = container.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
         if (labelElement.length > 0) {
             const width = (labelElement[0] as HTMLElement).offsetWidth;
             const height = (labelElement[0] as HTMLElement).offsetHeight;
-            containerRef.current!.setAttribute("width", width.toString());
-            containerRef.current!.setAttribute("height", height.toString());
-            containerRef.current!.setAttribute("x", (edgeCenter[0] - width/2).toString());
-            containerRef.current!.setAttribute("y", (edgeCenter[1] - height/2).toString());
+            container.setAttribute("x", (edgeCenter[0] - width/2).toString());
+            container.setAttribute("y", (edgeCenter[1] - height/2).toString());
+            container.setAttribute("width", width.toString());
+            container.setAttribute("height", height.toString());
+        } else if (resizeTimeout > 0){
+            // Content is not ready yet, recall resizing process after timeout.
+            // This can happen in case the children is actually not a `EdgeLabel`.
+            setTimeout(() => { labelSize(container)}, resizeTimeout);
         }
-    })
+    }
 
     return (
         <foreignObject
-            ref={containerRef}
+            ref={containerCallback}
             className={`${eccgui}-graphviz__edge-labelobject`}
             width="1"
             height="1"

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -4,6 +4,9 @@ import { Tooltip } from "../../../index";
 
 export interface HandleContentProps {
     children?: JSX.Element | string;
+    /**
+     * Tooltip displayed as overlay on hover.
+     */
     extendedTooltip?: JSX.Element | string;
 }
 

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -11,7 +11,13 @@ import { HandleContent, HandleContentProps } from "./HandleContent";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 interface HandleExtensionProps extends ReacFlowVersionSupportProps {
+    /**
+     * Extended handle data.
+     */
     data?: HandleContentProps;
+    /**
+     * Simple text tooltip displayed as title on hover.
+     */
     tooltip?: string;
     children?: JSX.Element | string;
     onClick?: () => void;

package/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ReactFlow, HandleDefault, HandleProps } from "./../../../../../index";
+import { Elements, ReactFlowProvider } from 'react-flow-renderer';
+import { edgeTypes } from "./../../edges/edgeTypes";
+
+const HandleDefaultDataProps = (data: HandleProps["data"]) => {
+    // this is only a mock to get it as sub element in the table
+    return <>{data.extendedTooltip}</>;
+}
+
+export default {
+    title: "Extensions/React Flow/Default Handle",
+    component: HandleDefault,
+    subcomponents: { HandleDefaultDataProps },
+    argTypes: {
+    },
+} as ComponentMeta<typeof HandleDefault>;
+
+const HandleDefaultExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+
+    useEffect(() => {
+        setElements([
+            {
+                id: "node-1",
+                type: "default",
+                data: {
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
+                    handles: [
+                        { ...args }
+                    ],
+                },
+                position: { x: 50, y: 200 },
+            },
+        ] 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 HandleDefault> = (args) => (
+    <HandleDefaultExample {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    type: "target",
+    tooltip: "this is a target handle",
+    isConnectable: false,
+};

package/src/extensions/react-flow/index.ts

@@ -21,3 +21,4 @@ export type { EdgeStepProps } from "./edges/EdgeStep";
 export type { MiniMapProps } from "./minimap/MiniMap";
 
 export * from "./edges/EdgeDefault";
+export * from "./handles/HandleDefault";

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

@@ -10,25 +10,41 @@
 .#{$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;
 }
+
+.react-flow__minimap-node {
+
+    // FIXME: this is a first basic implementation, later it should be possible to highlight without overwriting stroke/fill colors
+
+    &[class*="#{$eccgui}-intent--"] {
+        stroke-width: 20;
+    }
+
+    &.#{$eccgui}-intent--success {
+        stroke: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        stroke: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        stroke: $eccgui-color-danger-text;
+        fill: $eccgui-color-danger-text !important;
+    }
+}

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

@@ -1,10 +1,12 @@
 import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
 import { gethighlightedStateClasses } from "./../nodes/NodeContent";
+import { intentClassName } from "../../../common/Intent";
 
 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`) : "";
-    return typeClass + (stateClass ? " " + stateClass : "");
+    const intentClass = node.data?.intent ? intentClassName(node.data.intent) : "";
+    return `${typeClass} ${intentClass} ${stateClass}`;
 };
 
 export const minimapNodeColor = (node: any) => {

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

@@ -271,8 +271,12 @@ export const gethighlightedStateClasses = (
 const MemoHandler = React.memo(
     (props: MemoHandlerProps) => <HandleDefault {...props} />,
     (prev, next) => {
-        const styleHasChanged = prev.style[prev.posdirection] === next.style[next.posdirection];
-        return styleHasChanged;
+        return (
+            // we only test a few properties to control re-rendering
+            // need to be extended if also other properties need to be changed late
+            prev.style[prev.posdirection] === next.style[next.posdirection]
+            && prev.isConnectable === next.isConnectable
+        )
     }
 );
 

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -501,7 +501,7 @@
         bottom: -2 * $reactflow-node-border-width;
         right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text !important;
         z-index: -1;
     }
 }
@@ -535,18 +535,18 @@
 
 .#{$eccgui}-graphviz__node--highlight-success {
     &:before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text !important;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-warning {
     &:before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text !important;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-altmatch {
     &:after {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary) !important;
     }
 }