@eccenca/gui-elements 23.1.0-rc.2 → 23.1.0-rc.4

package/src/components/TextField/textfield.scss

@@ -71,7 +71,7 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 }
 
 .#{$ns}-input {
-    .#{$ns}-input-group[class*="#{$ns}-intent"] & {
+    .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
         animation-delay: 0.5s;
         animation-duration: 1s;
     }
@@ -79,6 +79,28 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
     @include intent-state-flash("success", $eccgui-color-success-background);
     @include intent-state-flash("warning", $eccgui-color-warning-background);
     @include intent-state-flash("danger", $eccgui-color-danger-background);
+
+    .#{$ns}-input-group.#{$eccgui}-intent--info & {
+        @include pt-input-intent($eccgui-color-info-text);
+    }
+
+    .#{$ns}-input-group.#{$eccgui}-intent--accent & {
+        @include pt-input-intent($eccgui-color-primary);
+    }
+
+    .#{$ns}-input-group.#{$eccgui}-intent--neutral & {
+        @include pt-input-intent($eccgui-color-workspace-text);
+    }
+
+    .#{$ns}-input-group.#{$eccgui}-intent--edited & {
+        @include pt-input-intent($eccgui-color-info-text);
+        color: $eccgui-color-info-text;
+    }
+
+    .#{$ns}-input-group.#{$eccgui}-intent--removed & {
+        @include pt-input-intent($eccgui-color-danger-text);
+        text-decoration: line-through $eccgui-color-danger-text 2px;
+    }
 }
 
 .#{$eccgui}-textarea {

package/src/components/Tree/tree.scss

@@ -25,4 +25,8 @@
     .#{$ns}-tag {
         display: inline-flex;
     }
+
+    span.#{$ns}-fill {
+        display: inline-block;
+    }
 }

package/src/components/Typography/typography.scss

@@ -51,8 +51,8 @@ mark {
         styles from other stylesheets we cannot control here
         TODO: need to reevaluated when it is not used together with MDL anymore
     */
-    background-color: rgba(yellow, 0.61) !important;
-    color: black !important;
+    background-color: rgba($eccgui-color-info-background, 1) !important;
+    color: $eccgui-color-info-text !important;
 }
 
 // HtmlContentBlock

package/src/components/index.scss

@@ -2,4 +2,5 @@
 @import "./Depiction/depiction";
 @import "./Icon/icon";
 @import "./Tree/tree";
+@import "./Table/table";
 @import "./Typography/typography";

package/src/components/index.ts

@@ -1,5 +1,10 @@
 export * from "./Badge/Badge";
 export * from "./Depiction/Depiction";
 export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Table";
+export * from "./Tag";
 export * from "./Tree/Tree";
 export * from "./Typography";
+
+export * from "./interfaces";

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

@@ -1,16 +1,20 @@
 $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-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-color: rgba($eccgui-color-workspace-text, .61) !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-stroke-color-selected: $eccgui-color-accent !default;
+
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
 
-$reactflow-edge-stroke-opacity: alpha($reactflow-edge-stroke-color) !default;
-$reactflow-edge-stroke-opacity-hover: alpha($reactflow-edge-stroke-color) !default;
-$reactflow-edge-stroke-opacity-selected: alpha($reactflow-edge-stroke-color) !default;
+$reactflow-transition-anglestart: -90deg;

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

@@ -7,9 +7,24 @@ import {
     getEdgeCenter,
     EdgeText,
 } from "react-flow-renderer";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { NodeHighlightColor, evaluateHighlightColors } from "./../nodes/NodeContent";
 import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
+    /**
+     * 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.
      */
@@ -20,7 +35,7 @@ export interface EdgeDefaultDataProps {
      */
     inversePath?: boolean;
     /**
-     * Reference linnk to the SVG marker used for the start of the edge
+     * Reference link to the SVG marker used for the start of the edge
      */
     markerStart?: string;
     /**
@@ -49,7 +64,10 @@ export const EdgeDefault = memo(
         } = edge;
         const {
             pathGlowWidth = 10,
-            markerStart
+            markerStart,
+            strokeType,
+            intent,
+            highlightColor,
         } = data;
 
         const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
@@ -78,18 +96,38 @@ export const EdgeDefault = memo(
         ) : null);
 
         const edgeStyle = edgeOriginalProperties.style ?? {};
+        const {
+            highlightCustomPropertySettings
+        } = evaluateHighlightColors("--edge-highlight", highlightColor);
+
         return (
-            <g style={{...edgeStyle, color: edgeStyle.color || edgeStyle.stroke}}>
+            <g
+                className={createEdgeDefaultClassName({intent}, "")}
+                style={{
+                    ...edgeStyle,
+                    color: edgeStyle.color || edgeStyle.stroke
+                }}
+            >
+                { highlightColor && (
+                    <path
+                        d={pathDisplay}
+                        className={createEdgeDefaultClassName({highlightColor}, "react-flow__edge-path-highlight")}
+                        strokeWidth={pathGlowWidth}
+                        style={{
+                            ...highlightCustomPropertySettings,
+                        }}
+                    />
+                )}
                 { pathGlowWidth && (
                     <path
                         d={pathDisplay}
-                        className="react-flow__edge-path-glow"
+                        className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
                         strokeWidth={pathGlowWidth}
                     />
                 )}
                 <path
                     d={pathDisplay}
-                    className="react-flow__edge-path"
+                    className={createEdgeDefaultClassName({strokeType})}
                     markerStart={markerStart}
                     markerEnd={markerEnd}
                 />
@@ -98,3 +136,20 @@ export const EdgeDefault = memo(
         );
     }
 );
+
+export const createEdgeDefaultClassName = ({
+    strokeType,
+    intent,
+    highlightColor,
+}: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
+    const {
+        highlightClassNameSuffix,
+    } = evaluateHighlightColors("--edge-highlight", highlightColor);
+    return baseClass +
+    (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
+    (intent ? ` ${intentClassName(intent)}` : "") +
+    (highlightClassNameSuffix.length > 0
+        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
+        : ""
+    );
+}

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

@@ -0,0 +1,139 @@
+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";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+
+export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Depiction element displayed left from the label.
+     */
+    depiction?: ValidIconName | React.ReactElement<DepictionProps>;
+    /**
+     * Label of the edge.
+     * Cannot overflow the parent container.
+     */
+    text: string | JSX.Element;
+    /**
+     * One or multiple other elements displayed right from label.
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * The element is increased in its size.
+     */
+    large?: boolean;
+    /**
+     * Stretches the label component to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Add a info state to the label, visualized by color.
+     */
+    intent?: IntentTypes;
+}
+
+export const EdgeLabel = memo(({
+    depiction,
+    text,
+    actions,
+    large,
+    fullWidth,
+    intent,
+    ...otherDivProps
+} : EdgeLabelProps) => {
+
+    const depEl = (!!depiction && typeof depiction === "string")
+        ? <Depiction image={<Icon name={depiction as ValidIconName} />} />
+        : depiction;
+
+    return (
+        <div
+            className={
+                `${eccgui}-graphviz__edge-label` +
+                (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
+                (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
+                (!!intent ? ` ${intentClassName(intent)}` : '')
+            }
+            {...otherDivProps}
+        >
+            {!!depEl && (
+                <div className={`${eccgui}-graphviz__edge-label__depiction`}>
+                    {
+                        React.cloneElement(depEl, {
+                            padding: "tiny",
+                            ratio: "1:1",
+                            resizing: "contain",
+                            forceInlineSvg: true,
+                            border: false,
+                            backgroundColor: undefined,
+                        })
+                    }
+                </div>
+            )}
+            <div className={`${eccgui}-graphviz__edge-label__text`}>
+                { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
+            </div>
+            {!!actions && (
+                <div className={`${eccgui}-graphviz__edge-label__aux`}>
+                    { actions }
+                </div>
+            )}
+        </div>
+    )
+});
+
+interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+    /**
+     * The `<EdgeLabel />` element that need to be displayed.
+     */
+    children: React.ReactElement<EdgeLabelProps>;
+    /**
+     * 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 containerCallback = React.useCallback((containerRef) => {
+        if (containerRef) labelSize(containerRef);
+    }, [edgeCenter]);
+
+    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;
+            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)}, 500);
+        }
+    }
+
+    return (
+        <foreignObject
+            ref={containerCallback}
+            className={`${eccgui}-graphviz__edge-labelobject`}
+            width="1"
+            height="1"
+            {...otherForeignObjectProps}
+            requiredExtensions="http://www.w3.org/1999/xhtml"
+        >
+            { children }
+        </foreignObject>
+    )
+});

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

@@ -1,33 +1,42 @@
 .react-flow__edge {
+    --#{$eccgui}-reactflow-node-color-default: #{$reactflow-edge-stroke-color-default};
+    --#{$eccgui}-reactflow-node-color-hover: #{$reactflow-edge-stroke-color-hover};
+    --#{$eccgui}-reactflow-node-color-selected: #{$reactflow-edge-stroke-color-selected};
 
-    path, rect {
+    stroke: var(--#{$eccgui}-reactflow-node-color-default);
+    color: var(--#{$eccgui}-reactflow-node-color-default);
+
+    path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
         shape-rendering: optimizeSpeed;
-        /* TODO: transitions currently do not work like expected
-        transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
-        */
-        stroke-opacity: $reactflow-edge-stroke-opacity;
+        stroke-opacity: $reactflow-edge-stroke-opacity-default;
     }
 
-    text {
-        opacity: $reactflow-edge-stroke-opacity;
+    text[class*="react-flow__edge"] {
+        opacity: $reactflow-edge-stroke-opacity-default;
     }
 
     &:hover {
-        path, rect {
+        stroke: var(--#{$eccgui}-reactflow-node-color-hover);
+        color: var(--#{$eccgui}-reactflow-node-color-hover);
+
+        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-hover;
         }
 
-        text {
+        text[class*="react-flow__edge"] {
             opacity: $reactflow-edge-stroke-opacity-hover;
         }
     }
 
     &.selected {
-        path, rect {
+        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
+        color: var(--#{$eccgui}-reactflow-node-color-selected);
+
+        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-selected;
         }
 
-        text {
+        text[class*="react-flow__edge"] {
             opacity: $reactflow-edge-stroke-opacity-selected;
         }
     }
@@ -36,6 +45,7 @@
 path.react-flow__edge-path {
     stroke-width: 2;
     stroke: currentColor;
+    stroke-opacity: $reactflow-edge-stroke-opacity-default;
 
     .react-flow__edge.selected & {
         stroke-width: 2;
@@ -45,13 +55,19 @@ path.react-flow__edge-path {
 
 path.react-flow__edge-path-glow {
     stroke: currentColor;
-    stroke-opacity: 0;
     fill: none;
     stroke-linecap: round;
 
-    .react-flow__edge:hover &,
+    .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: 0.1;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
     }
 
     .react-flow__edge.animated & {
@@ -70,12 +86,6 @@ path.react-flow__edge-path-glow {
     }
 }
 
-.react-flow__edge-textwrapper {
-    /* TODO: transitions currently do not work like expected
-    transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
-    */
-}
-
 .react-flow__edge-text {
     fill: currentColor;
     stroke: none;
@@ -84,39 +94,127 @@ path.react-flow__edge-path-glow {
 .react-flow__edge-textbg {
 }
 
+// Stroke types
+
+path.react-flow__edge-path--stroke-solid {
+    stroke-dasharray: unset;
+}
+
+path.react-flow__edge-path--stroke-dashed,
+.react-flow__edge.animated path.react-flow__edge-path--stroke-dashed {
+    stroke-dasharray: 5;
+}
+
+path.react-flow__edge-path--stroke-dotted,
+.react-flow__edge.animated path.react-flow__edge-path--stroke-dotted {
+    stroke-dasharray: 2;
+}
+
+path.react-flow__edge-path--stroke-double {
+    stroke: #fff !important;
+    stroke-opacity: 1 !important;
+    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
+}
+
+path.react-flow__edge-path--stroke-doubledashed {
+    stroke: #fff !important;
+    stroke-opacity: 1 !important;
+    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
+    stroke-dasharray: 5;
+}
+
+// Intent states
+
+g[class*="#{$eccgui}-intent--"] {
+    color: var(--edge-intent-color);
+}
+
+g[class*="#{$eccgui}-intent--"] > path.react-flow__edge-path,
+g[class*="#{$eccgui}-intent--"] > path.react-flow__edge-path-glow {
+    stroke: var(--edge-intent-color);
+
+    .react-flow__edge.selected & {
+        stroke: var(--edge-intent-color);
+    }
+}
+
+g.#{$eccgui}-intent--primary {
+    --edge-intent-color: #{$eccgui-color-primary};
+}
+
+g.#{$eccgui}-intent--accent {
+    --edge-intent-color: #{$eccgui-color-accent};
+}
+
+g.#{$eccgui}-intent--info {
+    --edge-intent-color: #{$eccgui-color-info-text};
+}
+
+g.#{$eccgui}-intent--success {
+    --edge-intent-color: #{$eccgui-color-success-text};
+}
+
+g.#{$eccgui}-intent--warning {
+    --edge-intent-color: #{$eccgui-color-warning-text};
+}
+
+g.#{$eccgui}-intent--danger {
+    --edge-intent-color: #{$eccgui-color-danger-text};
+}
+
+// Highlightning
+
+path.react-flow__edge-path-highlight {
+    stroke-opacity: 1;
+    fill: none;
+    stroke-linecap: round;
+    stroke: #fff;
+    filter:
+        drop-shadow(2px -2px 1px var(--edge-highlight-default-color))
+        drop-shadow(-2px 2px 1px var(--edge-highlight-alternate-color, var(--edge-highlight-default-color)));
+}
+
+.#{$eccgui}-graphviz__edge--highlight-default {
+    --edge-highlight-default-color: #{$eccgui-color-accent};
+    --edge-highlight-alternate-color: #{$eccgui-color-accent};
+}
+
+.#{$eccgui}-graphviz__edge--highlight-alternate {
+    --edge-highlight-default-color: #{$eccgui-color-primary};
+    --edge-highlight-alternate-color: #{$eccgui-color-primary};
+}
+
+.#{$eccgui}-graphviz__edge--highlight-default.#{$eccgui}-graphviz__edge--highlight-alternate {
+    --edge-highlight-default-color: #{$eccgui-color-accent};
+    --edge-highlight-alternate-color: #{$eccgui-color-primary};
+}
+
+
+
 // Type colors
 
 .react-flow__edge-default,
 .react-flow__edge-straight,
 .react-flow__edge-smoothstep,
 .react-flow__edge-step {
-    stroke: $reactflow-edge-stroke-color;
-    color: $reactflow-edge-stroke-color;
-
-    &:hover {
-        stroke: $reactflow-edge-stroke-color-hover;
-        color: $reactflow-edge-stroke-color-hover;
-    }
-
-    &.selected {
-        stroke: $reactflow-edge-stroke-color-selected;
-        color: $reactflow-edge-stroke-color-selected;
-    }
 }
 
 .react-flow__edge-success {
-    stroke: $eccgui-color-success-text;
-    color: $eccgui-color-success-text;
+    --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-success-text};
+    --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-success-text};
+    --#{$eccgui}-reactflow-node-color-selected: #{$eccgui-color-success-text};
 }
 
 .react-flow__edge-warning {
-    stroke: $eccgui-color-warning-text;
-    color: $eccgui-color-warning-text;
+    --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-warning-text};
+    --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-warning-text};
+    --#{$eccgui}-reactflow-node-color-selected: #{$eccgui-color-warning-text};
 }
 
 .react-flow__edge-danger {
-    stroke: $eccgui-color-danger-text;
-    color: $eccgui-color-danger-text;
+    --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-danger-text};
+    --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-danger-text};
+    --#{$eccgui}-reactflow-node-color-selected: #{$eccgui-color-danger-text};
 }
 
 // Tools overlay
@@ -154,3 +252,81 @@ path.react-flow__edge-path-glow {
         transform: scale(1.75, 0.75);
     }
 }
+
+// Custom label
+
+.#{$eccgui}-graphviz__edge-label {
+    border: 0.5*$reactflow-node-border-width solid currentColor;
+    border-radius: $reactflow-node-border-radius;
+    background: #fff; // TODO color
+    color: currentColor;
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    max-width: 20rem;
+    height: 0.5 * $reactflow-node-largesize;
+    font-size: $reactflow-node-font-size;
+
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+        border-color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+        border-color: $eccgui-color-accent;
+    }
+    &.#{$eccgui}-intent--success {
+        color: $eccgui-color-success-text;
+        border-color: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--info {
+        color: $eccgui-color-info-text;
+        border-color: $eccgui-color-info-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        color: $eccgui-color-warning-text;
+        border-color: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        color: $eccgui-color-danger-text;
+        border-color: $eccgui-color-danger-text;
+    }
+}
+.#{$eccgui}-graphviz__edge-label--large {
+    height: $reactflow-node-largesize;
+}
+.#{$eccgui}-graphviz__edge-label--fullwidth {
+    max-width: none;
+    width: 100%;
+}
+.#{$eccgui}-graphviz__edge-label__depiction {
+    margin-left: 2px;
+    display: inline-flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    .#{$eccgui}-depiction__image {
+        height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
+
+        .#{$eccgui}-graphviz__edge-label--large & {
+            height: calc(#{$reactflow-node-largesize} - 4px);
+        }
+    }
+}
+.#{$eccgui}-graphviz__edge-label__text {
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 1;
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+
+    .#{$eccgui}-graphviz__edge-label--fullwidth & {
+        text-align: left;
+    }
+}
+.#{$eccgui}-graphviz__edge-label__aux {
+    margin-right: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 0;
+    flex-shrink: 0;
+}