@eccenca/gui-elements 23.1.0-easynav.0 → 23.1.0-easynav.1

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

@@ -1,11 +1,11 @@
 import React from "react";
 import { Position, useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
-import { Icon, Depiction } from "../../../index";
+import { Icon, Depiction, OverflowText } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { DepictionProps } from "../../../components/Depiction/Depiction";
-import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
@@ -44,7 +44,11 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Label that is displayed in the node header.
      */
-    label: string;
+    label: string | JSX.Element;
+    /**
+     * Element that is displayed as subline under the label in the header.
+     */
+    labelSubline?: JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -72,6 +76,16 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * If not set to `none` then the node is only displayed in normal size when it is selected.
      */
     minimalShape?: "none" | "circular" | "rectangular";
+    /**
+     * Stretches the node to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Increase the hight of the node header.
+     * Use this for example if you need more space for a label subline.
+     * Also the depiction is displayed larger.
+     */
+    increadeHeader?: boolean;
     /**
      * Set the type of used highlights to mark the node.
      */
@@ -181,7 +195,17 @@ interface MemoHandlerNextProps extends HandleNextProps {
 
 type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
 
-const defaultHandles = [{ type: "target" }, { type: "source" }] as IHandleProps[];
+const defaultHandles = () => {
+    const flowVersion = useReactFlowVersion();
+    switch (flowVersion) {
+        case "legacy":
+            return [{ type: "target" }, { type: "source" }] as IHandleProps[];
+        case "next":
+            return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
+        default:
+            return [];
+    }
+}
 
 const getDefaultMinimalTooltipData = (node: any) => {
     return {
@@ -235,22 +259,25 @@ const MemoHandler = React.memo(
  * 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 function NodeContent<CONTENT_PROPS = any>({
-    flowVersion = "legacy",
+    flowVersion = useReactFlowVersion(),
     iconName,
     depiction,
     leftElement,
     typeLabel,
     label,
+    labelSubline,
+    increadeHeader,
+    fullWidth,
     showExecutionButtons = true,
     executionButtons,
     menuButtons,
     content,
     contentExtension,
-     footerContent,
+    footerContent,
     size = "small",
     minimalShape = "circular",
     highlightedState,
-    handles = defaultHandles,
+    handles = defaultHandles(),
     adaptHeightForHandleMinCount,
     adaptSizeIncrement = 15,
     getMinimalTooltipData = getDefaultMinimalTooltipData,
@@ -270,11 +297,15 @@ export function NodeContent<CONTENT_PROPS = any>({
     // other props for DOM element
     ...otherProps
 }: NodeContentProps<any>) {
+    const isResizeable = (!!onNodeResize && minimalShape === "none");
     const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
     const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
-    const [, , zoom] = flowVersion === "legacy"
-        ? useStoreStateFlowLegacy((state) => state.transform)
-        : useStoreStateFlowNext((state) => state.transform);
+    let zoom = 1;
+    if (isResizeable) try {
+        [, , zoom] = flowVersion === "legacy"
+            ? useStoreStateFlowLegacy((state) => state.transform)
+            : useStoreStateFlowNext((state) => state.transform);
+    } catch {}
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
     const handleStack = flowVersion==="legacy" ? {} as { [key: string]: IHandleProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
@@ -346,6 +377,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                     `${eccgui}-graphviz__node` +
                     ` ${eccgui}-graphviz__node--${size}` +
                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
+                    (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") +
                     (!!highlightedState
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
@@ -354,9 +386,12 @@ export function NodeContent<CONTENT_PROPS = any>({
                     (letPassWheelEvents === false ? ` nowheel` : "")
                 }
             >
-                <header className={`${eccgui}-graphviz__node__header`}>
+                <header className={
+                    `${eccgui}-graphviz__node__header` +
+                    ((increadeHeader && minimalShape==="none") ? ` ${eccgui}-graphviz__node__header--large` : "")
+                }>
                     {(!!iconName || !!depiction || !!leftElement) && (
-                        <span className={`${eccgui}-graphviz__node__header-depiction`}>
+                        <div className={`${eccgui}-graphviz__node__header-depiction`}>
                             { leftElement }
                             {!!depiction && !leftElement && typeof depiction === "string" && (
                                 <Depiction
@@ -380,23 +415,37 @@ export function NodeContent<CONTENT_PROPS = any>({
                                 })
                             )}
                             {!!iconName && !leftElement && !depiction && (
-                                <Icon
-                                    name={iconName}
-                                    tooltipText={minimalShape === "none" || selected ? typeLabel : undefined}
+                                <Depiction
+                                    image={<Icon name={iconName} />}
+                                    caption={minimalShape === "none" || selected ? typeLabel : undefined}
+                                    captionPosition="tooltip"
+                                    padding="tiny"
+                                    ratio="1:1"
+                                    resizing="contain"
+                                    forceInlineSvg
                                 />
                             )}
-                        </span>
+                        </div>
                     )}
-                    <span className={`${eccgui}-graphviz__node__header-label`} title={label}>
-                        {label}
-                    </span>
+                    <div className={`${eccgui}-graphviz__node__header-label`} title={typeof label==="string" ? label : undefined}>
+                        {
+                            typeof label === "string"
+                                ? <OverflowText className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</OverflowText>
+                                : <div className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</div>
+                        }
+                        {!!labelSubline && (
+                            <div className={`${eccgui}-graphviz__node__header-label__subline`}>
+                                { labelSubline }
+                            </div>
+                        )}
+                    </div>
                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <span className={`${eccgui}-graphviz__node__header-menu`}>
+                        <div className={`${eccgui}-graphviz__node__header-menu`}>
                             {showExecutionButtons && typeof executionButtons === "function"
                                 ? executionButtons(adjustedContentProps, setAdjustedContentProps)
                                 : null}
                             {menuButtons ?? null}
-                        </span>
+                        </div>
                     )}
                 </header>
                 {content && (
@@ -449,5 +498,5 @@ export function NodeContent<CONTENT_PROPS = any>({
         </Resizable>
     );
 
-    return (!!onNodeResize && minimalShape === "none") ? resizableNode() : nodeContent;
+    return (isResizeable) ? resizableNode() : nodeContent;
 }

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

@@ -5,7 +5,7 @@ import {
 } from "react-flow-renderer";
 import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
-import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
@@ -23,7 +23,7 @@ export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlow
 export const NodeDefault = memo(
     (node: NodeProps<any>) => {
         const {
-            flowVersion,
+            flowVersion = useReactFlowVersion(),
             data,
             targetPosition = Position.Left,
             sourcePosition = Position.Right,

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

@@ -120,22 +120,20 @@
     }
 }
 
+.#{$eccgui}-graphviz__node__header--large {
+    min-height: $reactflow-node-largesize;
+}
+
 .#{$eccgui}-graphviz__node__header-depiction,
 .#{$eccgui}-graphviz__node__header-menu {
     flex-grow: 0;
     flex-shrink: 0;
     max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
-}
-
-.#{$eccgui}-graphviz__node__header-label {
     margin: 0 $eccgui-size-block-whitespace * 0.25;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-    flex-shrink: 1;
-    display: inline-block;
-    text-align: left;
+
+    .#{$eccgui}-graphviz__node__header--large & {
+        max-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+    }
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
@@ -165,6 +163,37 @@
             height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
         }
     }
+
+    .#{$eccgui}-graphviz__node__header--large & {
+        min-width: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        min-height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        max-width: calc(2 * (#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width}));
+
+        .#{$eccgui}-depiction__image {
+            height: calc(#{$reactflow-node-largesize} - #{2 * $reactflow-node-border-width});
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node__header-label {
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: inline-flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.#{$eccgui}-graphviz__node__header-label__mainline,
+.#{$eccgui}-graphviz__node__header-label__subline {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
 .#{$eccgui}-graphviz__node__content {
@@ -231,6 +260,10 @@
     max-height: $reactflow-node-basesize * 13;
 }
 
+.#{$eccgui}-graphviz__node--fullwidth:not(.is-resizeable) {
+    width: 100%;
+}
+
 // Node highlights
 
 .#{$eccgui}-graphviz__node--highlight-success,

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

@@ -1,10 +1,16 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum, loremIpsum } from 'react-lorem-ipsum';
 import ReactFlow, { Elements, ReactFlowProvider } from 'react-flow-renderer';
 import {
+    Badge,
+    ContextMenu,
+    MenuItem,
     OverflowText,
     HtmlContentBlock,
+    IconButton,
+    Tag,
+    TagList,
 } from "./../../../../index";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 
@@ -30,6 +36,31 @@ export default {
                 "Slide out example": <NodeContentExtension {...ContentExtensionExampleSlideOut.args} />,
             },
         },
+        labelSubline: {
+            control: "select",
+            options: ["Not set", "Text string", "OverflowText element", "Tag list"],
+            mapping: {
+                "Not set": undefined,
+                "Text string": loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+                "OverflowText element": <OverflowText>{loremIpsum({ p: 1, avgSentencesPerParagraph: 2, avgWordsPerSentence: 4, random: false }).toString()}</OverflowText>,
+                "Tag list": <TagList>{
+                    loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
+                    .toString()
+                    .split(" ")
+                    .map((term) => <Tag small>{term}</Tag>)
+                }</TagList>
+            },
+        },
+        menuButtons: {
+            control: "select",
+            options: ["Not set", "Icon button", "Context Menu", "Info badge"],
+            mapping: {
+                "Not set": undefined,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Context Menu": <ContextMenu><MenuItem text="Context menu" /></ContextMenu>,
+                "Info badge": <Badge intent="info">Info</Badge>,
+            },
+        },
         iconName: {
             control: "select",
             options: [...(Object.keys(canonicalIcons))],

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

@@ -1,6 +1,22 @@
+import { useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
+import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
+
 export interface ReacFlowVersionSupportProps {
     /**
      * Spevifies the context of the react flow renderer version that is used for the component.
      */
-    flowVersion?: "legacy" | "next";
+    flowVersion?: "legacy" | "next" | "none";
+}
+
+export const useReactFlowVersion = () => {
+    try {
+        const [, , zoom] = useStoreStateFlowLegacy((state) => state.transform);
+        return !!zoom ? "legacy" : "none";
+    } catch {}
+    try {
+        const [, , zoom] = useStoreStateFlowNext((state) => state.transform);
+        return !!zoom ? "next" : "none";
+    } catch {}
+
+    return "none";
 }