@eccenca/gui-elements 22.0.0-rc.6 → 22.1.0-rc.0

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

@@ -3,206 +3,15 @@ import {
     NodeProps as ReactFlowNodeProps,
     Position
 } from "react-flow-renderer";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Icon, Tooltip } from "../../../index";
-import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
-import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
+import { Tooltip } from "../../../index";
+import { NodeContent, NodeContentProps } from "./NodeContent";
 
-type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
-
-export interface IHandleProps extends HandleProps {
-    category?: "configuration";
-}
-
-interface NodeContentData {
-    /**
-     * Name of icon that should be displayed before the node label.
-     * Must be a name from our list of canonical icon names.
-     */
-    iconName?: ValidIconName;
-    /**
-     * Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
-     */
-    depiction?: string;
-    /**
-     * Label that is displayed in the node header.
-     */
-    label: string;
-    /**
-     * Content element, displayed in the node body.
-     */
-    content?: React.ReactNode;
-    /**
-     * Content extension, displayed at the bottom side of a node.
-     */
-    contentExtension?: React.ReactNode;
-}
-
-export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Size of the node.
-     * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
-     */
-    size?: "tiny" | "small" | "medium" | "large";
-    /**
-     * Defines if the node is initially displayed within a very small shape.
-     * If not set to `none` then the node is only displayed in normal size when it is selected.
-     */
-    minimalShape?: "none" | "circular" | "rectangular";
-    /**
-     * Set the type of used highlights to mark the node.
-     */
-    highlightedState?: HighlightingState | HighlightingState[];
-    /**
-     * Text used for tooltip used on icon and depiction.
-     */
-    typeLabel?: string;
-    /**
-     * If `executionButtons` content is included or not.
-     * It is displayed in the node header between label and menu.
-     */
-    showExecutionButtons?: boolean;
-    // For some still unknown reason this has to be a function instead of just a ReactNode. Else sometimes the nodes "froze".
-    /**
-     * Set of defined buttons and icons that can be displayed.
-     */
-    executionButtons?: () => React.ReactNode;
-    /**
-     * Can be used for permanent action button or context menu.
-     * It is displayed at the node header right to the label.
-     */
-    menuButtons?: React.ReactNode;
-    /**
-     * Array of property definition objects for `Handle` components that need to be created for the node.
-     * @see https://reactflow.dev/docs/api/handle/
-     */
-    handles?: IHandleProps[];
-    /**
-     * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
-     */
-    adaptHeightForHandleMinCount?: number;
-    /**
-     * Height per handle in px (without the unit) used for minimal height calculation of the node.
-     */
-    adaptSizeIncrement?: number;
-    /**
-     * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
-     * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
-     */
-    getMinimalTooltipData?: (node: NodeProps<T>) => NodeContentData;
-    /**
-     * Set if a handle is displayed even if it does not allow a connection to an edge.
-     */
-    showUnconnectableHandles?: boolean;
-    /**
-     * The node is displayed with some animated shadow for highlighting purposes.
-     */
-    animated?:boolean;
-
-    /** Additional data stored in the node. */
-    businessData?: T;
-
-    // we need to forward some ReactFlowNodeProps here
-
-    /**
-     * This property is only forwarded from the `NodeDefault` element.
-     * If set then it will be always overwritten internally.
-     */
-    targetPosition?: typeof Position[keyof typeof Position];
-    /**
-     * This property is only forwarded from the `NodeDefault` element.
-     * If set then it will be always overwritten internally.
-     */
-    sourcePosition?: typeof Position[keyof typeof Position];
-    /**
-     * This property is only forwarded from the `NodeDefault` element.
-     * If set then it will be always overwritten internally.
-     */
-    isConnectable?: boolean;
-    /**
-     * This property is only forwarded from the `NodeDefault` element.
-     * If set then it will be always overwritten internally.
-     */
-    selected?: boolean;
-}
-
-export interface NodeProps<T> extends ReactFlowNodeProps {
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<T>
-}
-
-const defaultHandles = [
-    { type: "target" },
-    { type: "source" },
-] as IHandleProps[];
-
-interface MemoHandlerProps extends HandleProps {
-     posdirection: string;
-     style: {
-        [key:string]: string | undefined
-     }
-}
-
-const MemoHandler = React.memo(
-    (props: MemoHandlerProps) => <HandleDefault {...props} />,
-    (prev, next) => {
-      const styleHasChanged =
-        prev.style[prev.posdirection] === next.style[next.posdirection];
-      return styleHasChanged;
-    }
-  );
-
-  const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any) => {
-      return handles[position].map((handle: any, idx: any) => {
-          const {
-              className,
-              style = {},
-              category,
-          } = handle;
-          const styleAdditions : {[key: string]: string}= {
-              color: nodeStyle.borderColor ?? undefined
-          }
-          styleAdditions[posDirection] = (100 / (handles[position].length + 1) * (idx + 1)) + "%";
-          const handleProperties = {
-              ...handle,
-              ...{
-                  position: handle.position ?? position,
-                  style: { ...style, ...styleAdditions},
-                  posdirection: posDirection,
-                  isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
-                  className: !!category ? (className?className+" ":"") + gethighlightedStateClasses(category, `${eccgui}-graphviz__handle`) : className,
-              }
-          };
-          return (
-              <MemoHandler {...handleProperties} key={"handle" + idx} />
-          );
-      });
-  }
-
-const getDefaultMinimalTooltipData = (node: any) => {
-    return {
-        label: node.data?.label,
-        content: node.data?.content,
-        iconName: node.data?.iconName,
-        depiction: node.data?.depiction,
-    }
-}
-
-const imgWithTooltip = (imgEl: any, tooltipText: any) => {
-    if (!!tooltipText) {
-        return <Tooltip content={tooltipText}><span>{imgEl}</span></Tooltip>;
-    }
-
-    return imgEl;
-}
-
-export const gethighlightedStateClasses = (state: any, baseClassName: any) => {
-    let hightlights = typeof state === "string" ? [state] : state;
-    //@ts-ignore
-    return hightlights.map(item => `${baseClassName}--highlight-${item}`).join(' ');
+    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>
 }
 
 /**
@@ -243,134 +52,3 @@ export const NodeDefault = memo(
         return nodeEl;
     }
 );
-
-/**
- * The `NodeContent` element manages the main view of how a node is displaying which content.
- * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
- */
-export const NodeContent = ({
-    iconName,
-    depiction,
-    typeLabel,
-    label,
-    showExecutionButtons = true,
-    executionButtons,
-    menuButtons,
-    content,
-    contentExtension,
-    size = "small",
-    minimalShape = "circular",
-    highlightedState,
-    handles = defaultHandles,
-    adaptHeightForHandleMinCount,
-    adaptSizeIncrement = 15,
-    getMinimalTooltipData = getDefaultMinimalTooltipData,
-    style = {},
-    showUnconnectableHandles = false,
-    animated = false,
-    // forwarded props
-    targetPosition = Position.Left,
-    sourcePosition = Position.Right,
-    isConnectable = true,
-    selected,
-    // businessData is just being ignored
-    businessData,
-    // other props for DOM element
-    ...otherProps
-}: NodeContentProps<any>) => {
-    const handleStack: { [key: string]: IHandleProps[] } = {};
-    handleStack[Position.Top] = [] as IHandleProps[];
-    handleStack[Position.Right] = [] as IHandleProps[];
-    handleStack[Position.Bottom] = [] as IHandleProps[];
-    handleStack[Position.Left] = [] as IHandleProps[];
-    if (handles.length > 0) {
-        handles.forEach(handle => {
-            if (!!handle.position) {
-                handleStack[handle.position].push(handle);
-            }
-            else if (handle.category === "configuration") {
-                handleStack[Position.Top].push(handle);
-            }
-            else {
-                if (handle.type === "target") {
-                    handleStack[targetPosition].push(handle);
-                }
-                if (handle.type === "source") {
-                    handleStack[sourcePosition].push(handle);
-                }
-            }
-        });
-    }
-    const styleExpandDimensions: { [key: string]: string | number } = {};
-    if (
-        typeof adaptHeightForHandleMinCount !== "undefined" &&
-        (minimalShape === "none" || !!selected) &&
-        adaptSizeIncrement && (
-            handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
-            handleStack[Position.Right].length >= adaptHeightForHandleMinCount
-        )
-    ) {
-        const minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
-        const minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
-        styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
-    }
-    return (
-        <>
-            <section
-                {...otherProps}
-                style={{...style, ...styleExpandDimensions}}
-                className={
-                    `${eccgui}-graphviz__node` +
-                    ` ${eccgui}-graphviz__node--${size}` +
-                    ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
-                    (!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) : "") +
-                    (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
-                    (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "")
-                }
-            >
-                <header className={`${eccgui}-graphviz__node__header`}>
-                    {(!!iconName || !!depiction) && (
-                        <span
-                            className={`${eccgui}-graphviz__node__header-depiction`}
-                        >
-                            {!!depiction && imgWithTooltip(<img src={depiction} alt="" />, (minimalShape === "none" || selected) ? typeLabel : undefined)}
-                            {(!!iconName && !depiction) && <Icon name={iconName} tooltipText={(minimalShape === "none" || selected) ? typeLabel : undefined} />}
-                        </span>
-                    )}
-                    <span
-                        className={`${eccgui}-graphviz__node__header-label`}
-                        title={label}
-                    >
-                        {label}
-                    </span>
-                    {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <span
-                            className={`${eccgui}-graphviz__node__header-menu`}
-                        >
-                            {(showExecutionButtons && typeof executionButtons === "function") ? executionButtons() : null}
-                            {menuButtons??null}
-                        </span>
-                    )}
-                </header>
-                {content && (
-                    <div className={`${eccgui}-graphviz__node__content`}>
-                        {content}
-                    </div>
-                )}
-                {contentExtension && (
-                    <div className={`${eccgui}-graphviz__node__footer`}>
-                        {contentExtension}
-                    </div>
-                )}
-            </section>
-            {!!handles && (
-                <>
-                    { addHandles(handleStack, Position.Top, "left", isConnectable, style) }
-                    { addHandles(handleStack, Position.Right, "top", isConnectable, style) }
-                    { addHandles(handleStack, Position.Bottom, "left", isConnectable, style) }
-                    { addHandles(handleStack, Position.Left, "top", isConnectable, style) }
-                </>
-            )}
-        </>
-    );
-}

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

@@ -4,10 +4,11 @@ import React, {memo, useState} from "react";import {
 } from "@blueprintjs/core";
 import {ContextOverlay, IconButton} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 
 export interface NodeToolsProps extends IBlueprintPopoverProps {
     children: string | JSX.Element;
-    togglerElement?: string | JSX.Element;
+    togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string
 }

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

@@ -2,11 +2,11 @@
     &.selected:before {
         content: " ";
         position: absolute;
-        top: -11 * $reactflow-node-border-width;
-        right: -11 * $reactflow-node-border-width;
-        bottom: -11 * $reactflow-node-border-width;
-        left: -11 * $reactflow-node-border-width;
-        border-width: $reactflow-node-border-width;
+        top: -6 * $reactflow-node-border-width;
+        right: -6 * $reactflow-node-border-width;
+        bottom: -6 * $reactflow-node-border-width;
+        left: -6 * $reactflow-node-border-width;
+        border-width: 1px;
         border-color: $reactflow-edge-stroke-color-selected;
         border-radius: $reactflow-node-border-radius;
         border-style: dotted;
@@ -23,6 +23,10 @@
         width: unset !important;
         text-align: unset !important;
         padding: unset !important;
+
+        &.selected, &.selected:hover {
+            box-shadow: none;
+        }
     }
 }
 
@@ -43,7 +47,7 @@
     border-style: solid;
 
     &:hover {
-        box-shadow: 0 0 0 11 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 }
 
@@ -53,13 +57,13 @@
 
 @keyframes pumpingshadow {
   0% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
   }
   50% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 11 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 11 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
+    box-shadow: 0 0 2 * $reactflow-node-border-width 6 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 6 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
   }
   100% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
   }
 }
 
@@ -197,113 +201,6 @@
     max-height: $reactflow-node-basesize * 13;
 }
 
-// Node types
-
-.react-flow__node-graphNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #fff;
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-    }
-}
-
-.react-flow__node-classNode {
-    .#{$eccgui}-graphviz__node {
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-        border-color: darken($button-background-color, 60%);
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken($button-background-color, 60%);
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-    }
-}
-
-.react-flow__node-instanceNode {
-    .#{$eccgui}-graphviz__node {
-        border-color: darken($button-background-color, 50%);
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken($button-background-color, 50%);
-    }
-}
-
-.react-flow__node-propertyNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: complement($button-background-color);
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-}
-
-.react-flow__node-datasetNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #e1f5fe;
-        border-color: #039be5;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #039be5;
-    }
-}
-
-.react-flow__node-linkingNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #e0f7fa;
-        border-color: #00acc1;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #00acc1;
-    }
-}
-
-.react-flow__node-transformNode {
-    .#{$eccgui}-graphviz__node {
-        border-color: #00897b;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #00897b;
-    }
-}
-
-.react-flow__node-taskNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #eceff1;
-        border-color: #546e7a;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #546e7a;
-    }
-}
-
-.react-flow__node-workflowNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #fff;
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-    }
-}
-
 // Node highlights
 
 .#{$eccgui}-graphviz__node--highlight-success,
@@ -313,12 +210,12 @@
         content: " ";
         display: block;
         position: absolute;
-        top: -3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        bottom: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-danger-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
         z-index: -1;
     }
 }
@@ -329,12 +226,12 @@
         content: " ";
         display: block;
         position: absolute;
-        top: -3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        bottom: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-accent;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
         z-index: -1;
     }
 
@@ -342,29 +239,29 @@
     &.#{$eccgui}-graphviz__node--highlight-warning,
     &.#{$eccgui}-graphviz__node--highlight-danger {
         &:after {
-            top: -7 * $reactflow-node-border-width;
-            left: -7 * $reactflow-node-border-width;
-            bottom: -7 * $reactflow-node-border-width;
-            right: -7 * $reactflow-node-border-width;
+            top: -4 * $reactflow-node-border-width;
+            left: -4 * $reactflow-node-border-width;
+            bottom: -4 * $reactflow-node-border-width;
+            right: -4 * $reactflow-node-border-width;
         }
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-success {
     &:before {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-success-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-warning {
     &:before {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-warning-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-altmatch {
     &:after {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width complement($eccgui-color-primary);
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
     }
 }
 
@@ -406,7 +303,7 @@
     // separation between node content and extension
     // do not inherit styles here
     border-top-color: $eccgui-color-separation-divider !important;
-    border-top-width: $reactflow-node-border-width !important;
+    border-top-width: 1px !important;
     border-top-style: solid !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
@@ -415,57 +312,6 @@
     top: 100%;
     left: -1 * $reactflow-node-border-width;
     right: -1 * $reactflow-node-border-width;
-
-    .react-flow__node-graphNode & {
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
-    }
-
-    .react-flow__node-classNode & {
-        border-color: darken($button-background-color, 60%);
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-        left: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
-    }
-
-    .react-flow__node-instanceNode & {
-        border-color: darken($button-background-color, 50%);
-    }
-
-    .react-flow__node-propertyNode & {
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-
-    .react-flow__node-datasetNode & {
-        border-color: #039be5;
-    }
-
-    .react-flow__node-linkingNode & {
-        border-color: #00acc1;
-    }
-
-    .react-flow__node-transformNode & {
-        border-color: #00897b;
-    }
-
-    .react-flow__node-taskNode & {
-        border-color: #546e7a;
-    }
-
-    .react-flow__node-workflowNode & {
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
-    }
 }
 
 .#{$eccgui}-graphviz__node__extension-expandbutton {