@eccenca/gui-elements 24.4.1 → 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0

package/src/configuration/_palettes.scss

@@ -0,0 +1,40 @@
+/**
+ * Base definition for colors.
+ * Can be overwritten if it is defined before this file is included.
+ * You need to define all or nothing, we currently don't support overwriting only some parts of it.
+ */
+
+$eccgui-color-palette-light: (
+    "identity": (
+        "brand": eccgui-create-color-tints(#fbead9 #f8cd99 #f6b966 #f4a533 #f29100),
+        "accent": eccgui-create-color-tints(#e5f4fb #aecfe3 #77abca #4186b2 #0a6199),
+        "text": eccgui-create-color-tints(#f8f8f8 #bcbcbc #818181 #434343 #090909),
+        "background": eccgui-create-color-tints(#fff #e8e8e8 #d6d6d6 #bfbfbf #a6a6a6),
+    ),
+    "semantic": (
+        "info": eccgui-create-color-tints(#e5f4fb #aecfe3 #77aaca #4086b2 #096199),
+        "success": eccgui-create-color-tints(#e8f5e9 #b1d4b7 #7ab286 #429154 #0b6f22),
+        "warning": eccgui-create-color-tints(#fff3e0 #fad2b3 #f5b287 #f0915a #eb702d),
+        "danger": eccgui-create-color-tints(#fff5f6 #edbfc0 #db8989 #c95253 #b71c1c),
+    ),
+    "layout": (
+        "yellow": eccgui-create-color-tints(#fff6d5 #f1ecb5 #e3db79 #d4c93c #a07d00),
+        "purple": eccgui-create-color-tints(#f8e9f7 #c8a2d1 #9d6eb8 #71378f #370e59),
+        "magenta": eccgui-create-color-tints(#ffeaf2 #f5a6c3 #e276a4 #be4c80 #8c1656),
+        "pink": eccgui-create-color-tints(#fde4f1 #e6b4ce #d08aae #bb5f8e #711c4d),
+        "violet": eccgui-create-color-tints(#f4e3f4 #d8b0d8 #b377b3 #904490 #6e1f6e),
+        "indigo": eccgui-create-color-tints(#efe4fb #b89ee0 #8f72c5 #6547aa #3b1e8f),
+        "petrol": eccgui-create-color-tints(#e7eef2 #b0c8d4 #7aa2b5 #437c97 #0c5678),
+        "cyan": eccgui-create-color-tints(#dff9fc #86d6e5 #5abfd4 #2da9c4 #006a8f),
+        "teal": eccgui-create-color-tints(#dff4ef #a3ddd3 #6dc0b2 #479d8d #104c42),
+        "lime": eccgui-create-color-tints(#e4f3ea #d2edd6 #9dcd99 #688a55 #5a7b2c),
+        "amber": eccgui-create-color-tints(#fff3d9 #ffe9c4 #f9cd8d #eeb757 #c77400),
+        "vermilion": eccgui-create-color-tints(#ffe8e2 #f5b8a8 #d48772 #8c4b3a #651c09),
+        "grey": eccgui-create-color-tints(#f5f6f7 #b7b7b7 #808080 #484848 #1c2329),
+    ),
+    "extra": (
+        "gold": eccgui-create-color-tints(#fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b),
+        "silver": eccgui-create-color-tints(#f0f0f0 #dedede #ccc #bababa #a8a8a8),
+        "bronze": eccgui-create-color-tints(#fbe9db #f2d6bc #eac29d #e1af7e #d89b5f),
+    ),
+) !default;

package/src/configuration/_variables.scss

@@ -12,29 +12,30 @@
 */
 
 @use "sass:math";
-
-$eccgui: "eccgui" !default;
+@use "sass:map";
+@use "sass:list";
+@import "palettes";
 
 // -- Configuration stack of colors --------------------------------------------
 
-$eccgui-color-primary: rgb(254 143 1) !default;
-$eccgui-color-primary-contrast: rgb(255 255 255) !default;
-$eccgui-color-accent: rgb(10 103 163) !default;
-$eccgui-color-accent-contrast: rgb(255 255 255) !default;
-$eccgui-color-success-text: #1b5e20 !default;
-$eccgui-color-success-background: rgb(232 245 233) !default;
-$eccgui-color-info-text: rgb(21 101 192) !default;
-$eccgui-color-info-background: rgb(227 242 253) !default;
-$eccgui-color-warning-text: #e65100 !default;
-$eccgui-color-warning-background: rgb(255 243 224) !default;
-$eccgui-color-danger-text: #b71c1c !default;
-$eccgui-color-danger-background: rgb(255 235 238) !default;
-$eccgui-color-applicationheader-text: #222 !default;
-$eccgui-color-applicationheader-background: #ddd !default;
-$eccgui-color-workspace-text: #444 !default;
-$eccgui-color-workspace-background: #f5f5f5 !default;
-$eccgui-color-application-text: $eccgui-color-workspace-text !default; // deprecated
-$eccgui-color-application-background: $eccgui-color-workspace-background !default; // deprecated
+// @deprecated (v26) those variable cannot be set by other SCSS, the will only set here (no `default!` anymore)
+
+$eccgui-color-primary: eccgui-color-var("identity", "brand", "900") !default;
+$eccgui-color-primary-contrast: eccgui-color-var("identity", "brand", "100") !default;
+$eccgui-color-accent: eccgui-color-var("identity", "accent", "900") !default;
+$eccgui-color-accent-contrast: eccgui-color-var("identity", "accent", "100") !default;
+$eccgui-color-success-text: eccgui-color-var("semantic", "success", "900") !default;
+$eccgui-color-success-background: eccgui-color-var("semantic", "success", "100") !default;
+$eccgui-color-info-text: eccgui-color-var("semantic", "info", "900") !default;
+$eccgui-color-info-background: eccgui-color-var("semantic", "info", "100") !default;
+$eccgui-color-warning-text: eccgui-color-var("semantic", "warning", "900") !default;
+$eccgui-color-warning-background: eccgui-color-var("semantic", "warning", "100") !default;
+$eccgui-color-danger-text: eccgui-color-var("semantic", "danger", "900") !default;
+$eccgui-color-danger-background: eccgui-color-var("semantic", "danger", "100") !default;
+$eccgui-color-applicationheader-text: eccgui-color-var("identity", "text", "900") !default;
+$eccgui-color-applicationheader-background: eccgui-color-var("identity", "background", "500") !default;
+$eccgui-color-workspace-text: eccgui-color-var("identity", "text", "700") !default;
+$eccgui-color-workspace-background: eccgui-color-var("identity", "background", "300") !default;
 
 // -- Configuration stack of typography ----------------------------------------
 

package/src/configuration/constants.ts

@@ -1,2 +1,4 @@
 // basic vars
 export const CLASSPREFIX = "eccgui";
+export const COLORMINDISTANCE = 10;
+export const COLORMINCONTRAST = 4;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,15 +1,14 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
-import { foldKeymap } from "@codemirror/language";
-import { EditorState, Extension, Compartment } from "@codemirror/state";
+import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
+import { Compartment,EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
-import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
-import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -30,11 +29,14 @@ import {
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
     adaptedLintGutter,
-    adaptedPlaceholder, compartment,
+    adaptedPlaceholder,
+    adaptedSyntaxHighlighting,
+    compartment,
 } from "./tests/codemirrorTestHelper";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
 import { ExtensionCreator } from "./types";
 
-export interface CodeEditorProps extends TestableComponent {
+export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
     // Is called with the editor instance that allows access via the CodeMirror API
     setEditorView?: (editor: EditorView | undefined) => void;
     /**
@@ -53,9 +55,8 @@ 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;
+    onChange?: (v: string) => void;
     /**
      *  Called when the focus status changes
      */
@@ -99,7 +100,11 @@ export interface CodeEditorProps extends TestableComponent {
     /** Long lines are wrapped and displayed on multiple lines */
     wrapLines?: boolean;
 
-    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
+    /**
+     * Add properties to the `div` used as warpper element.
+     * @deprecated (v26) You can now use all properties directly on `CodeEditor`.
+     */
+    outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id" | "data-testid" | "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">;
 
     /**
      * Size in spaces that is used for a tabulator key.
@@ -185,6 +190,7 @@ const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"]
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export const CodeEditor = ({
+    className,
     onChange,
     onSelection,
     onMouseDown,
@@ -212,7 +218,6 @@ export const CodeEditor = ({
     enableTab = false,
     height,
     useLinting = false,
-    "data-test-id": dataTestId,
     autoFocus = false,
     disabled = false,
     intent,
@@ -353,6 +358,7 @@ export const CodeEditor = ({
             wrapLinesCompartment.current.of(addExtensionsFor(wrapLines, EditorView?.lineWrapping)),
             supportCodeFoldingCompartment.current.of(addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding())),
             useLintingCompartment.current.of(addExtensionsFor(useLinting, ...linters)),
+            adaptedSyntaxHighlighting(defaultHighlightStyle),
             additionalExtensions,
         ];
 
@@ -488,14 +494,13 @@ export const CodeEditor = ({
             // overwrite/extend some attributes
             id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
-            // @deprecated (v25) fallback with static test id will be removed
-            data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
+            {...otherCodeEditorProps}
             className={
                 `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
+                (className ? ` ${className}` : "") +
                 (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "") +
                 (hasToolbarSupport ? ` ${eccgui}-codeeditor--has-toolbar` : "")
             }
-            {...otherCodeEditorProps}
         >
             {hasToolbarSupport && editorToolbar(mode)}
         </div>

package/src/extensions/codemirror/_codemirror.scss

@@ -71,7 +71,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
         @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
             &.#{eccgui}-intent--#{$each-intent} {
-                background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+                background-color: eccgui-color-mix($each-bgcolor 24%, $eccgui-color-textfield-background);
                 animation-name: intent-state-flash-#{$each-intent};
             }
         }
@@ -195,7 +195,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             &::after {
                 position: absolute;
                 left: 10%;
-                color: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+                color: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
                 content: "⇥";
             }
         }

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,4 +1,5 @@
 //adapted v6 modes imports
+import {html} from "@codemirror/lang-html"
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
@@ -30,6 +31,7 @@ const supportedModes = {
     mathematica,
     sql,
     javascript,
+    html
 } as const;
 
 export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
@@ -42,6 +44,7 @@ const v6AdaptedModes: ReadonlyMap<SupportedCodeEditorModes, boolean> = new Map([
     ["sql", true],
     ["yaml", true],
     ["javascript", true],
+    ["html", true]
 ]);
 
 export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {

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

@@ -7,10 +7,10 @@
  */
 //Todo this should become redundant with later patches that avoid this error
 
-import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
-import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
-import {Extension, Compartment, StateEffect, EditorState} from "@codemirror/state";
+import { codeFolding,foldGutter, syntaxHighlighting } from "@codemirror/language";
 import { lintGutter } from "@codemirror/lint";
+import {Compartment, EditorState,Extension, StateEffect} from "@codemirror/state";
+import { EditorView, highlightActiveLine,highlightSpecialChars, lineNumbers, placeholder } from "@codemirror/view";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>

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

@@ -1,16 +1,22 @@
+$reactflow-background-color: $card-background-color !default;
 $reactflow-node-basesize: $button-height !default;
 $reactflow-node-largesize: mini-units(6) !default;
-$reactflow-node-border-color: $eccgui-color-workspace-text !default;
-$reactflow-node-background-color: $button-background-color !default;
+$reactflow-node-border-color: #{eccgui-color-var("identity", "text", "700")} !default;
+$reactflow-node-background-color: #{eccgui-color-var("layout", "grey", "100")} !default;
 $reactflow-node-color: $eccgui-color-workspace-text !default;
 $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
-$reactflow-edge-stroke-opacity-default: 0.6 !default;
-$reactflow-edge-stroke-opacity-hover: 0.8 !default;
-$reactflow-edge-stroke-opacity-selected: 1 !default;
-$reactflow-edge-stroke-color-default: $eccgui-color-workspace-text !default;
-$reactflow-edge-stroke-color-hover: $eccgui-color-workspace-text !default;
+$reactflow-edge-rendering: geometricprecision !default;
+$reactflow-edge-stroke-width-default: 2px !default;
+$reactflow-edge-stroke-width-hover: 2px !default;
+$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
+$reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
+$reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;
+$reactflow-edge-stroke-opacity-interaction-ratio: $eccgui-opacity-ghostly !default;
+$reactflow-edge-stroke-color-default: #{eccgui-color-var("identity", "text", "700")} !default;
+$reactflow-edge-stroke-color-hover: $reactflow-edge-stroke-color-default !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;

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

@@ -1,10 +1,7 @@
 @import "config";
 @import "nodes/nodes";
 @import "edges/edges";
+@import "markers/markers";
 @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

@@ -1,12 +1,220 @@
-// needed styles from "@xyflow/react/dist/style.css" to ensure proper functionality
+/**
+ * We need some styles from "@xyflow/react/dist/style.css" to ensure proper functionality.
+ * Some of them are directly included to the component styles.
+ * Other stuff is here.
+ * Colors are removed or altered.
+ */
+
+.react-flow {
+    direction: ltr;
+    z-index: 0;
+}
+
+.react-flow__pane {
+    z-index: 1;
+}
+
+.react-flow__pane.draggable {
+    cursor: grab;
+}
+
+.react-flow__pane.dragging {
+    cursor: grabbing;
+}
+
+.react-flow__pane.selection {
+    cursor: pointer;
+}
+
+.react-flow__viewport {
+    z-index: 2;
+    pointer-events: none;
+    transform-origin: 0 0;
+}
+
+.react-flow__renderer {
+    z-index: 4;
+}
+
+.react-flow__selection {
+    z-index: 6;
+}
+
+.react-flow__controls {
+    display: flex;
+    flex-direction: column;
+}
+
+.react-flow__controls.horizontal {
+    flex-direction: row;
+}
+
+.react-flow__controls-button {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.react-flow__controls-button svg {
+    width: 100%;
+    max-width: 12px;
+    max-height: 12px;
+    fill: currentcolor;
+}
+
+.react-flow .react-flow__edges {
+    position: absolute;
+}
+
+.react-flow .react-flow__edges svg:not(.#{$eccgui}-icon) {
+    position: absolute;
+    overflow: visible;
+    pointer-events: none;
+}
+
+.react-flow__edge {
+    pointer-events: visiblestroke;
+}
+
+.react-flow__edge.inactive {
+    pointer-events: none;
+}
+
+.react-flow__edge-textwrapper {
+    pointer-events: all;
+}
+
+.react-flow__edge .react-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+}
+
+.react-flow__connection {
+    pointer-events: none;
+}
+
 svg.react-flow__connectionline {
     position: absolute;
     z-index: 1001;
     overflow: visible;
 }
 
-.react-flow .react-flow__edges svg {
+.react-flow__nodes {
+    pointer-events: none;
+    transform-origin: 0 0;
+}
+
+.react-flow__node {
     position: absolute;
-    overflow: visible;
+    box-sizing: border-box;
+    pointer-events: all;
+    cursor: default;
+    user-select: none;
+    transform-origin: 0 0;
+}
+
+.react-flow__node.selectable {
+    cursor: pointer;
+}
+
+.react-flow__node.draggable {
+    pointer-events: all;
+    cursor: grab;
+}
+
+.react-flow__node.draggable.dragging {
+    cursor: grabbing;
+}
+
+.react-flow__nodesselection {
+    z-index: 3;
     pointer-events: none;
+    transform-origin: left top;
+}
+
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+}
+
+.react-flow__handle.connectingfrom {
+    pointer-events: all;
+}
+
+.react-flow__handle.connectionindicator {
+    pointer-events: all;
+}
+
+.react-flow__edgeupdater {
+    pointer-events: all;
+    cursor: move;
+}
+
+.react-flow__minimap-svg {
+    display: block;
+}
+
+.react-flow__node.selectable:focus,
+.react-flow__node.selectable:focus-visible {
+    outline: none;
+}
+
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible,
+.react-flow__selection:focus,
+.react-flow__selection:focus-visible {
+    outline: none;
+}
+
+.react-flow__controls-button:disabled {
+    pointer-events: none;
+}
+
+// -- adjustments
+
+.react-flow__background {
+    z-index: -1;
+    pointer-events: none;
+    background-color: $reactflow-background-color;
+    border: solid 1px $eccgui-color-separation-divider;
+}
+
+.react-flow__background-pattern,
+.react-flow__background pattern *:first-child:not(.react-flow__background-pattern) {
+    opacity: $eccgui-opacity-muted;
+    stroke: $eccgui-color-separation-divider;
+}
+
+.react-flow__background-pattern.dots,
+.react-flow__background pattern circle:first-child:not(.react-flow__background-pattern) {
+    fill: #{eccgui-color-var("identity", "text", "500")};
+}
+
+.react-flow__background-pattern.cross {
+    opacity: $eccgui-opacity-disabled;
+    stroke: #{eccgui-color-var("identity", "text", "500")};
+    stroke-width: 0.3;
+}
+
+.react-flow__background-pattern.lines {
+    stroke-width: 0.4;
+}
+
+.react-flow__attribution {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    padding: $eccgui-size-inline-whitespace * 0.5 $eccgui-size-inline-whitespace;
+    margin: 0;
+    font-size: $eccgui-size-typo-caption * 0.61;
+    background: transparent;
+    opacity: $eccgui-opacity-muted;
+}
+
+.react-flow__attribution a {
+    color: $eccgui-color-workspace-text;
+    text-decoration: none;
 }

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

@@ -0,0 +1,47 @@
+import React, { memo } from "react";
+import { Edge, EdgeProps, getBezierPath } from "@xyflow/react";
+
+import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
+import { EdgeDefault, EdgeDefaultV9Props } from "./EdgeDefault";
+import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
+
+interface EdgeBezierDataV12Props extends EdgeDefaultV12DataProps {
+    curvature?: number;
+}
+
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeBezierV12Props
+    extends Omit<EdgeDefaultV12Props, "data">,
+        EdgeProps<Edge<EdgeBezierDataV12Props>> {}
+
+export type EdgeBezierProps = EdgeDefaultV9Props | EdgeBezierV12Props;
+
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * Our v9 edges do not support bezier paths.
+ * @see https://reactflow.dev/docs/api/nodes/
+ */
+export const EdgeBezier = memo((props: EdgeBezierProps) => {
+    const flowVersionCheck = useReactFlowVersion();
+    switch (flowVersionCheck) {
+        case ReactFlowVersions.V9:
+            return <EdgeDefault {...(props as EdgeDefaultV9Props)} />;
+        case ReactFlowVersions.V12:
+            return (
+                <EdgeDefault
+                    {...(props as EdgeDefaultV12Props)}
+                    getPath={(params) => {
+                        return getBezierPath({
+                            ...params,
+                            curvature: (props.data as EdgeBezierDataV12Props)?.curvature,
+                        });
+                    }}
+                />
+            );
+        default:
+            return <></>;
+    }
+});