@eccenca/gui-elements 24.2.0 → 24.4.0

package/src/components/Icon/IconButton.tsx

@@ -50,6 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
+        swapPlaceholderDelay: 1,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Tooltip/Tooltip.tsx

@@ -42,6 +42,12 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * You can prevent it in any case by setting it to `false`.
      */
     usePlaceholder?: boolean;
+    /**
+     * Time after the placeholder element is replaced by the actual tooltip component.
+     * Must be greater than 0.
+     * For the first display of the tooltip this time adds up to `hoverOpenDelay`.
+     */
+    swapPlaceholderDelay?: number;
 }
 
 export const Tooltip = ({
@@ -53,18 +59,21 @@ export const Tooltip = ({
     markdownEnabler = "\n\n",
     markdownProps,
     usePlaceholder,
-    hoverOpenDelay = 500,
+    swapPlaceholderDelay = 100,
+    hoverOpenDelay = 450,
     ...otherTooltipProps
 }: TooltipProps) => {
     const placeholderRef = React.useRef(null);
     const eventMemory = React.useRef<null | "afterhover" | "afterfocus">(null);
     const searchId = React.useRef<null | string>(null);
-    const swapDelayTime = 100;
+    const swapDelay = React.useRef<null | NodeJS.Timeout>(null);
+    const swapDelayTime = swapPlaceholderDelay;
     const [placeholder, setPlaceholder] = React.useState<boolean>(
         !otherTooltipProps.disabled &&
             !otherTooltipProps.defaultIsOpen &&
             !otherTooltipProps.isOpen &&
             otherTooltipProps.renderTarget === undefined &&
+            swapDelayTime > 0 &&
             hoverOpenDelay > swapDelayTime &&
             (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false))
     );
@@ -77,7 +86,10 @@ export const Tooltip = ({
     React.useEffect(() => {
         if (placeholderRef.current !== null) {
             const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
-                const swapDelay = setTimeout(() => {
+                if (swapDelay.current) {
+                    clearTimeout(swapDelay.current);
+                }
+                swapDelay.current = setTimeout(() => {
                     // we delay the swap to prevent unwanted effects
                     // (e.g. forced mouseover after the swap but the cursor is already somewhere else)
                     eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
@@ -86,16 +98,15 @@ export const Tooltip = ({
                 }, swapDelayTime);
                 if (placeholderRef.current !== null) {
                     const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
-                    (placeholderRef.current as HTMLElement).addEventListener(
-                        eventType,
-                        () => {
-                            if (eventType === "focusout" && eventMemory.current === "afterfocus" ||
-                                eventType === "mouseleave" && eventMemory.current === "afterhover") {
-                                eventMemory.current = null
-                            }
-                            clearTimeout(swapDelay)
+                    (placeholderRef.current as HTMLElement).addEventListener(eventType, () => {
+                        if (
+                            (eventType === "focusout" && eventMemory.current === "afterfocus") ||
+                            (eventType === "mouseleave" && eventMemory.current === "afterhover")
+                        ) {
+                            eventMemory.current = null;
                         }
-                    );
+                        clearTimeout(swapDelay.current as NodeJS.Timeout);
+                    });
                 }
             };
             (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
@@ -167,7 +178,7 @@ export const Tooltip = ({
     ) : (
         <BlueprintTooltip
             lazy={true}
-            hoverOpenDelay={hoverOpenDelay - swapDelayTime}
+            hoverOpenDelay={hoverOpenDelay}
             {...otherTooltipProps}
             content={tooltipContent}
             className={targetClassName}

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
-import { EditorState, Extension } from "@codemirror/state";
+import { EditorState, Extension, Compartment } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
@@ -30,7 +30,7 @@ import {
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
     adaptedLintGutter,
-    adaptedPlaceholder,
+    adaptedPlaceholder, compartment,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
 
@@ -53,6 +53,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Handler method to receive onChange events.
      * As input the new value is given.
+     * @deprecated (v25) use `(v: string) => void` in future
      */
     onChange?: (v: any) => void;
     /**
@@ -74,7 +75,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Called when the cursor position changes
      */
-    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+    onCursorChange?: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => void;
 
     /**
      * Syntax mode of the code editor.
@@ -83,7 +84,7 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Default value used first when the editor is instanciated.
      */
-    defaultValue?: any;
+    defaultValue?: string;
     /**
      * If enabled the code editor won't show numbers before each line.
      */
@@ -169,7 +170,7 @@ export interface CodeEditorProps extends TestableComponent {
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
-const addToKeyMapConfigFor = (flag: boolean, ...keys: any) => (flag ? [...keys] : []);
+const addToKeyMapConfigFor = (flag: boolean, ...keys: KeyBinding[]) => (flag ? [...keys] : []);
 const addHandlersFor = (flag: boolean, handlerName: string, handler: any) =>
     flag ? ({ [handlerName]: handler } as DOMEventHandlers<any>) : {};
 
@@ -221,7 +222,24 @@ export const CodeEditor = ({
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
+    const currentView = React.useRef<EditorView>()
+    currentView.current = view
+    const currentReadOnly = React.useRef(readOnly)
+    currentReadOnly.current = readOnly
     const [showPreview, setShowPreview] = React.useState<boolean>(false);
+    // CodeMirror Compartments in order to allow for re-configuration after initialization
+    const readOnlyCompartment = React.useRef<Compartment>(compartment())
+    const wrapLinesCompartment = React.useRef<Compartment>(compartment())
+    const preventLineNumbersCompartment = React.useRef<Compartment>(compartment())
+    const shouldHaveMinimalSetupCompartment = React.useRef<Compartment>(compartment())
+    const placeholderCompartment = React.useRef<Compartment>(compartment())
+    const modeCompartment = React.useRef<Compartment>(compartment())
+    const keyMapConfigsCompartment = React.useRef<Compartment>(compartment())
+    const tabIntentSizeCompartment = React.useRef<Compartment>(compartment())
+    const disabledCompartment = React.useRef<Compartment>(compartment())
+    const supportCodeFoldingCompartment = React.useRef<Compartment>(compartment())
+    const useLintingCompartment = React.useRef<Compartment>(compartment())
+    const shouldHighlightActiveLineCompartment = React.useRef<Compartment>(compartment())
 
     const linters = useMemo(() => {
         if (!mode) {
@@ -240,17 +258,15 @@ export const CodeEditor = ({
 
     const onKeyDownHandler = (event: KeyboardEvent, view: EditorView) => {
         if (onKeyDown && !onKeyDown(event)) {
-            if (event.key === "Enter") {
+            if (event.key === "Enter" && !currentReadOnly.current) {
                 const cursor = view.state.selection.main.head;
-                const cursorLine = view.state.doc.lineAt(cursor).number;
-                const offsetFromFirstLine = view.state.doc.line(cursorLine).to;
                 view.dispatch({
                     changes: {
-                        from: offsetFromFirstLine,
+                        from: cursor,
                         insert: "\n",
                     },
                     selection: {
-                        anchor: offsetFromFirstLine + 1,
+                        anchor: cursor + 1,
                     },
                 });
             }
@@ -265,14 +281,17 @@ export const CodeEditor = ({
         return false;
     };
 
-    React.useEffect(() => {
+    const createKeyMapConfigs = () => {
         const tabIndent =
             !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
-        const keyMapConfigs = [
+        return [
             defaultKeymap as KeyBinding,
-            ...addToKeyMapConfigFor(supportCodeFolding, foldKeymap),
+            ...addToKeyMapConfigFor(supportCodeFolding, ...foldKeymap),
             ...addToKeyMapConfigFor(tabIndent, indentWithTab),
         ];
+    }
+
+    React.useEffect(() => {
         const domEventHandlers = {
             ...addHandlersFor(!!onScroll, "scroll", onScroll),
             ...addHandlersFor(
@@ -286,13 +305,13 @@ export const CodeEditor = ({
         } as DOMEventHandlers<any>;
         const extensions = [
             markField,
-            adaptedPlaceholder(placeholder),
+            placeholderCompartment.current.of(adaptedPlaceholder(placeholder)),
             adaptedHighlightSpecialChars(),
-            useCodeMirrorModeExtension(mode),
-            keymap?.of(keyMapConfigs),
-            EditorState?.tabSize.of(tabIntentSize),
-            EditorState?.readOnly.of(readOnly),
-            EditorView?.editable.of(!disabled),
+            modeCompartment.current.of(useCodeMirrorModeExtension(mode)),
+            keyMapConfigsCompartment.current.of(keymap?.of(createKeyMapConfigs())),
+            tabIntentSizeCompartment.current.of(EditorState?.tabSize.of(tabIntentSize)),
+            readOnlyCompartment.current.of(EditorState?.readOnly.of(readOnly)),
+            disabledCompartment.current.of(EditorView?.editable.of(!disabled)),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
                 if (disabled) return;
@@ -328,12 +347,12 @@ export const CodeEditor = ({
                     }
                 }
             }),
-            addExtensionsFor(shouldHaveMinimalSetup, minimalSetup),
-            addExtensionsFor(!preventLineNumbers, adaptedLineNumbers()),
-            addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
-            addExtensionsFor(wrapLines, EditorView?.lineWrapping),
-            addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
-            addExtensionsFor(useLinting, ...linters),
+            shouldHaveMinimalSetupCompartment.current.of(addExtensionsFor(shouldHaveMinimalSetup, minimalSetup)),
+            preventLineNumbersCompartment.current.of(addExtensionsFor(!preventLineNumbers, adaptedLineNumbers())),
+            shouldHighlightActiveLineCompartment.current.of(addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine())),
+            wrapLinesCompartment.current.of(addExtensionsFor(wrapLines, EditorView?.lineWrapping)),
+            supportCodeFoldingCompartment.current.of(addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding())),
+            useLintingCompartment.current.of(addExtensionsFor(useLinting, ...linters)),
             additionalExtensions,
         ];
 
@@ -375,7 +394,64 @@ export const CodeEditor = ({
                 setView(undefined);
             }
         };
-    }, [parent.current, mode, preventLineNumbers, wrapLines]);
+    }, [parent.current]);
+
+    // Updates an extension for a specific parameter that has changed after the initialization
+    const updateExtension = (extension: Extension | undefined, parameterCompartment: Compartment): void => {
+        if(extension) {
+            currentView.current?.dispatch({
+                effects: parameterCompartment.reconfigure(extension)
+            })
+        }
+    }
+
+    React.useEffect(() => {
+        updateExtension(EditorState?.readOnly.of(readOnly!), readOnlyCompartment.current)
+    }, [readOnly])
+
+    React.useEffect(() => {
+        updateExtension(adaptedPlaceholder(placeholder), placeholderCompartment.current)
+    }, [placeholder])
+
+    React.useEffect(() => {
+        updateExtension(useCodeMirrorModeExtension(mode), modeCompartment.current)
+    }, [mode])
+
+    React.useEffect(() => {
+        updateExtension(keymap?.of(createKeyMapConfigs()), keyMapConfigsCompartment.current)
+    }, [supportCodeFolding, mode, tabIntentStyle, (tabForceSpaceForModes ?? []).join(", "), enableTab])
+
+    React.useEffect(() => {
+        updateExtension(EditorState?.tabSize.of(tabIntentSize ?? 2), tabIntentSizeCompartment.current)
+    }, [tabIntentSize])
+
+    React.useEffect(() => {
+        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current)
+    }, [disabled])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup), shouldHaveMinimalSetupCompartment.current)
+    }, [shouldHaveMinimalSetup])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(!preventLineNumbers, adaptedLineNumbers()), preventLineNumbersCompartment.current)
+    }, [preventLineNumbers])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(shouldHighlightActiveLine ?? false, adaptedHighlightActiveLine()), shouldHighlightActiveLineCompartment.current)
+    }, [shouldHighlightActiveLine])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(wrapLines ?? false, EditorView?.lineWrapping), wrapLinesCompartment.current)
+    }, [wrapLines])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(supportCodeFolding ?? false, adaptedFoldGutter(), adaptedCodeFolding()), supportCodeFoldingCompartment.current)
+    }, [supportCodeFolding])
+
+    React.useEffect(() => {
+        updateExtension(addExtensionsFor(useLinting ?? false, ...linters), useLintingCompartment.current)
+    }, [mode, useLinting])
 
     const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
 

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -9,7 +9,7 @@
 
 import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
-import { Extension } from "@codemirror/state";
+import {Extension, Compartment, StateEffect, EditorState} from "@codemirror/state";
 import { lintGutter } from "@codemirror/lint";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
@@ -34,6 +34,25 @@ export const AdaptedEditorView = isConstructor(EditorView)
           destroy() {}
       } as any);
 
+/** Creates a new compartment or a mock of a compartment. */
+export const compartment = () => {
+    if(isConstructor(Compartment)) {
+        return new Compartment()
+    } else {
+        let extension: Extension | undefined = undefined
+        return {
+            of: (ext: Extension): Extension => {
+                extension = ext
+                return ext
+            },
+            reconfigure: (_content: Extension): StateEffect<unknown> => {
+                return {} as StateEffect<any>
+            },
+            get: (_state: EditorState): Extension | undefined => extension
+        }
+    }
+}
+
 const emptyExtension = (() => {}) as any;
 /** extension adding event handlers, current error '(view, domEventHandlers) is not a function'  */
 export const AdaptedEditorViewDomEventHandlers =

package/src/extensions/react-flow/_react-flow.scss

@@ -3,6 +3,7 @@
 @import "edges/edges";
 @import "handles/handles";
 @import "minimap/minimap";
+@import "react-flow_v12";
 
 .react-flow__background {
     border: solid 1px $eccgui-color-separation-divider;

package/src/extensions/react-flow/_react-flow_v12.scss

@@ -0,0 +1,5 @@
+.react-flow .react-flow__edges svg {
+    overflow: visible;
+    position: absolute;
+    pointer-events: none;
+}

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

@@ -0,0 +1,154 @@
+import { memo } from "react";
+import React from "react";
+import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath, getEdgeCenter } from "@xyflow/react";
+
+import { IntentTypes } from "../../../common/Intent";
+import { nodeContentUtils } from "../nodes/NodeContent";
+import { NodeHighlightColor } from "../nodes/sharedTypes";
+
+import { edgeDefaultUtils } from "./EdgeDefault";
+
+export type EdgeDefaultV12DataProps = Record<string, unknown> & {
+    /**
+     * Overwrites the default style how the edge stroke is displayed.
+     */
+    strokeType?: "solid" | "dashed" | "dotted" | "double" | "doubledashed";
+    /**
+     * Feedback state of the node.
+     */
+    intent?: IntentTypes;
+    /**
+     * Set the color of used highlights to mark the edge.
+     */
+    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
+    /**
+     * Size of the "glow" effect when the edge is hovered.
+     */
+    pathGlowWidth?: number;
+    /*
+     * Direction of the SVG path is inversed.
+     * This is important for the placement of the markers and the animation movement.
+     */
+    inversePath?: boolean;
+    /**
+     * Callback handler that returns a React element used as edge title.
+     */
+    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    /**
+     * Properties are forwarded to the internally used SVG `g` element.
+     * Data attributes for test ids coud be included here.
+     */
+    edgeSvgProps?: React.SVGProps<SVGGElement>;
+};
+
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ * @deprecated (v26) will be removed when `EdgeDefault` supports v12 directly
+ */
+export const EdgeDefaultV12 = memo(
+    ({
+        id,
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        label,
+        labelStyle,
+        labelShowBg,
+        labelBgStyle,
+        labelBgPadding = [5, 5],
+        labelBgBorderRadius = 3,
+        data = {},
+        ...edgeOriginalProperties
+    }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => {
+        const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
+
+        const [edgePath, labelX, labelY] = getBezierPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+        });
+
+        const edgeStyle = edgeOriginalProperties.style ?? {};
+        const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
+            "--edge-highlight",
+            highlightColor
+        );
+
+        const edgeCenter = getEdgeCenter({
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+        });
+
+        const renderedLabel =
+            renderLabel?.([labelX, labelY, sourceX, targetX]) ??
+            (label ? (
+                <EdgeText
+                    x={edgeCenter[0]}
+                    y={edgeCenter[1]}
+                    label={label}
+                    labelStyle={labelStyle}
+                    labelShowBg={labelShowBg}
+                    labelBgStyle={labelBgStyle}
+                    labelBgPadding={labelBgPadding || [5, 5]}
+                    labelBgBorderRadius={labelBgBorderRadius || 3}
+                />
+            ) : null);
+
+        return (
+            <g
+                className={
+                    "react-flow__edge " +
+                    edgeDefaultUtils.createEdgeDefaultClassName(
+                        { intent },
+                        `${edgeOriginalProperties.selected ? "selected" : ""}`
+                    )
+                }
+                tabIndex={0}
+                role="button"
+                data-id={id}
+                aria-label={`Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`}
+                aria-describedby={`react-flow__edge-desc-${id}`}
+            >
+                <g className={edgeSvgProps?.className ?? ""}>
+                    {highlightColor && (
+                        <path
+                            d={edgePath}
+                            className={edgeDefaultUtils.createEdgeDefaultClassName(
+                                { highlightColor },
+                                "react-flow__edge-path-highlight"
+                            )}
+                            strokeWidth={10}
+                            style={{
+                                ...highlightCustomPropertySettings,
+                            }}
+                        />
+                    )}
+
+                    <BaseEdge
+                        id={id}
+                        path={edgePath}
+                        markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
+                        markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
+                        className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
+                        interactionWidth={pathGlowWidth}
+                        style={{
+                            ...edgeSvgProps?.style,
+                            ...edgeStyle,
+                            color: edgeStyle.color || edgeStyle.stroke,
+                        }}
+                    />
+                </g>
+                {renderedLabel}
+            </g>
+        );
+    }
+);

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

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const EdgeDefs = React.memo(() => (
+    <svg style={{ position: "absolute", top: 0, left: 0 }}>
+        <defs>
+            <marker
+                id="arrow-closed"
+                viewBox="-10 -10 20 20"
+                markerWidth="10"
+                markerHeight="10"
+                refX="0"
+                refY="0"
+                orient="auto"
+            >
+                <path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
+            </marker>
+            <marker
+                id="arrow-closed-reverse"
+                viewBox="-10 -10 20 20"
+                markerWidth="10"
+                markerHeight="10"
+                refX="0"
+                refY="0"
+                orient="auto-start-reverse"
+            >
+                <path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
+            </marker>
+        </defs>
+    </svg>
+));

package/src/extensions/react-flow/edges/_edges.scss

@@ -62,6 +62,24 @@ path.react-flow__edge-path {
     }
 }
 
+path.react-flow__edge-interaction {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+
+    .react-flow__edge & {
+        stroke-opacity: 0;
+    }
+
+    .react-flow__edge:hover & {
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+    }
+
+    .react-flow__edge.selected & {
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+    }
+}
+
 path.react-flow__edge-path-glow {
     fill: none;
     stroke: currentcolor;