@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

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

@@ -0,0 +1,181 @@
+.react-flow__edge {
+
+    path, rect {
+        shape-rendering: optimizeSpeed;
+        /* TODO: transitions currently do not work like expected
+        transition: $reactflow-transition-time/2 $reactflow-transition-function;
+        */
+        stroke-opacity: $reactflow-edge-stroke-opacity;
+    }
+
+    text {
+        opacity: $reactflow-edge-stroke-opacity;
+    }
+
+    &:hover {
+        path, rect {
+            stroke-opacity: $reactflow-edge-stroke-opacity-hover;
+        }
+
+        text {
+            opacity: $reactflow-edge-stroke-opacity-hover;
+        }
+    }
+
+    &.selected {
+        path, rect {
+            stroke-opacity: $reactflow-edge-stroke-opacity-selected;
+        }
+
+        text {
+            opacity: $reactflow-edge-stroke-opacity-selected;
+        }
+    }
+}
+
+path.react-flow__edge-path {
+    stroke-width: 2;
+    stroke: currentColor;
+
+    .react-flow__edge.selected & {
+        stroke-width: 2;
+        stroke: currentColor;
+    }
+}
+
+path.react-flow__edge-path-glow {
+    stroke: currentColor;
+    stroke-opacity: 0;
+    fill: none;
+    stroke-linecap: round;
+
+    .react-flow__edge:hover &,
+    .react-flow__edge.selected & {
+        stroke-opacity: 0.1;
+    }
+
+    .react-flow__edge.animated & {
+        stroke-dasharray: unset;
+        animation: unset;
+    }
+}
+
+.react-flow__edgeupdater {
+    stroke: currentColor;
+    fill: currentColor;
+    opacity: 0;
+
+    &:hover {
+        opacity: 0.05;
+    }
+}
+
+.react-flow__edge-textwrapper {
+    /* TODO: transitions currently do not work like expected
+    transition: $reactflow-transition-time/2 $reactflow-transition-function;
+    */
+}
+
+.react-flow__edge-text {
+    fill: currentColor;
+    stroke: none;
+}
+
+.react-flow__edge-textbg {
+}
+
+// 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-implicitEdge {
+    stroke: #00acc1;
+    color: #00acc1;
+}
+
+.react-flow__edge-importEdge {
+    stroke: #8e24aa;
+    color: #8e24aa;
+}
+
+.react-flow__edge-subclassEdge {
+    stroke: darken($button-background-color, 60%);
+    color: darken($button-background-color, 60%);
+}
+
+.react-flow__edge-subpropertyEdge {
+    stroke: darken(complement($button-background-color), 40%);
+    color: darken(complement($button-background-color), 40%);
+}
+
+.react-flow__edge-rdftypeEdge {
+    stroke: darken($button-background-color, 50%);
+    color: darken($button-background-color, 50%);
+}
+
+.react-flow__edge-successStep {
+    stroke: $eccgui-color-success-text;
+    color: $eccgui-color-success-text;
+}
+
+.react-flow__edge-warningStep {
+    stroke: $eccgui-color-warning-text;
+    color: $eccgui-color-warning-text;
+}
+
+.react-flow__edge-dangerStep {
+    stroke: $eccgui-color-danger-text;
+    color: $eccgui-color-danger-text;
+}
+
+// Tools overlay
+
+.#{$eccgui}-graphviz__edgetools-target {
+    position: fixed;
+    width: $eccgui-size-block-whitespace * 2;
+    height: $eccgui-size-block-whitespace * 2;
+    //margin-left: -1 * $eccgui-size-block-whitespace;
+    margin-top: -1 * $eccgui-size-block-whitespace;
+    z-index: 1000;
+}
+
+.#{$eccgui}-graphviz__edgetools-overlay {
+    //transform: translate(#{$eccgui-size-block-whitespace}, #{-1 * $eccgui-size-block-whitespace});
+}
+
+.#{$eccgui}-graphviz__edgetools-content {
+    padding: $eccgui-size-block-whitespace / 2;
+    max-width: $reactflow-node-basesize * 8;
+    min-width: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+    min-height: $reactflow-node-basesize;
+}
+
+// Arrows
+
+.react-flow__arrowhead {
+    polyline {
+        stroke-width: 1px;
+        stroke-linecap: square;
+        stroke-linejoin: miter;
+        stroke: currentColor;
+        fill: currentColor;
+        transform: scale(1.75, 0.75);
+    }
+}

package/src/extensions/react-flow/edges/edgeTypes.ts

@@ -0,0 +1,24 @@
+/*
+    We need to replicate some elements from react flow because they
+
+    1. do not export all sub elements, e.g. edges
+    2. we need to add additional features for better usage
+*/
+
+import { EdgeDefault } from "./EdgeDefault";
+import { EdgeStep } from "./EdgeStep";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+    step: EdgeStep,
+    smoothstep: EdgeStep,
+    implicitEdge: EdgeDefault,
+    importEdge: EdgeDefault,
+    subclassEdge: EdgeDefault,
+    subpropertyEdge: EdgeDefault,
+    rdftypeEdge: EdgeDefault,
+    successStep: EdgeStep,
+    warningStep: EdgeStep,
+    dangerStep: EdgeStep,
+};

package/src/extensions/react-flow/edges/utils.ts

@@ -0,0 +1,32 @@
+import { EdgeDefaultProps } from "./EdgeDefault";
+import { EdgeStepProps } from "./EdgeStep";
+import { getSmoothStepPath } from "react-flow-renderer";
+
+export const drawEdgeStraight = ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+}: EdgeDefaultProps) => {
+    return `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
+}
+
+export const drawEdgeStep = ({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    data = {},
+}: EdgeStepProps) => {
+    return getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: data.stepCornerRadius || 10
+    });
+}

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -0,0 +1,39 @@
+import React, {memo} from 'react';
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { Tooltip } from "../../../index";
+
+export interface HandleContentProps {
+    children?: JSX.Element | string;
+    extendedTooltip?: JSX.Element | string;
+}
+
+export const HandleContent = memo(({
+    children,
+    extendedTooltip
+}: HandleContentProps) => {
+    const handleContent = !!children ? (
+        <div className={`${eccgui}-graphviz__handle__content`}>
+            { children }
+        </div>
+    ) : !!extendedTooltip ? (
+        <div className={`${eccgui}-graphviz__handle__content`} />
+    ) : (
+        <></>
+    );
+
+    if (!!extendedTooltip) {
+        return (
+            <Tooltip
+                content={extendedTooltip}
+                wrapperTagName="div"
+                autoFocus={false}
+                enforceFocus={false}
+                openOnTargetFocus={false}
+            >
+                { handleContent }
+            </Tooltip>
+        );
+    }
+
+    return handleContent;
+});

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -0,0 +1,29 @@
+import React, {memo} from 'react';
+import {
+    HandleProps as ReactFlowHandleProps,
+    Handle,
+} from "react-flow-renderer";
+import { HandleContent, HandleContentProps } from "./HandleContent";
+
+export interface HandleProps extends ReactFlowHandleProps {
+    data?: HandleContentProps;
+    tooltip?: string;
+    children?: JSX.Element | string;
+}
+
+export const HandleDefault = memo(({
+    data,
+    tooltip,
+    children,
+    ...handleProps
+}: HandleProps) => {
+    const tooltipTitle = !!tooltip ? { title: tooltip } : {};
+
+    return (
+        <Handle {...handleProps} {...tooltipTitle}>
+            <HandleContent {...data}>
+                { children }
+            </HandleContent>
+        </Handle>
+    );
+});

package/src/extensions/react-flow/handles/_handles.scss

@@ -0,0 +1,208 @@
+div.react-flow__handle {
+    color: $reactflow-node-border-color;
+    background-color: currentColor;
+    border-color: currentColor;
+    width: $eccgui-size-block-whitespace / 2;
+    height: $eccgui-size-block-whitespace / 2;
+    z-index: 2;
+    border-radius: 100%;
+
+    .react-flow__node-default & {
+        background-color: currentColor;
+    }
+
+    &:before {
+        content: " ";
+        position: absolute;
+        //width: $eccgui-size-block-whitespace;
+        //height: $eccgui-size-block-whitespace;
+        top: $eccgui-size-block-whitespace/-2;
+        left: $eccgui-size-block-whitespace/-2;
+        bottom: $eccgui-size-block-whitespace/-2;
+        right: $eccgui-size-block-whitespace/-2;
+        opacity: 0.61;
+        display: none;
+        background-color: transparent;
+        border: solid 1px currentColor;
+        border-radius: 100%;
+    }
+
+    &:hover {
+        &:before {
+            background-color: currentColor;
+        }
+    }
+
+    &.#{eccgui}-graphviz__handle--highlight-configuration {
+        border-radius: 0;
+
+        &:before {
+            border-radius: 0;
+        }
+    }
+
+    .react-flow__node:hover &.connectable {
+        &:before {
+            display: block;
+        }
+    }
+
+    &.react-flow__handle-connecting:hover {
+        color: $eccgui-color-danger-text;
+        &:before {
+            display: block;
+        }
+    }
+
+    &.react-flow__handle-valid:hover {
+        color: $eccgui-color-success-text;
+    }
+}
+
+.#{$eccgui}-graphviz__handle__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    cursor: help;
+    overflow: hidden;
+}
+
+div.react-flow__handle-right {
+    right: -1 * $eccgui-size-block-whitespace / 2;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+div.react-flow__handle-left {
+    left: -1 * $eccgui-size-block-whitespace / 2;
+    transform: translateX(50%) translateY(-50%);
+}
+
+div.react-flow__handle-top {
+    top: -1 * $eccgui-size-block-whitespace / 2;
+    transform: translateX(-50%) translateY(50%);
+}
+
+div.react-flow__handle-bottom {
+    bottom: -1 * $eccgui-size-block-whitespace / 2;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.#{$eccgui}-graphviz__node--minimal-rectangular,
+.#{$eccgui}-graphviz__node--minimal-circular {
+    .react-flow__node:not(.selected) & {
+        & ~ .react-flow__handle {
+            top: 50%;
+            left: $reactflow-node-basesize / 2;
+            right: auto;
+            bottom: auto;
+            transform: translateX(-50%) translateY(-50%);
+            z-index: 0;
+            opacity: 0;
+            height: $reactflow-node-basesize;
+            width: $reactflow-node-basesize;
+        }
+    }
+
+    & ~ .react-flow__handle:not(.connectable) {
+        top: 50%;
+        left: $reactflow-node-basesize / 2;
+        right: auto;
+        bottom: auto;
+        transform: translateX(-50%) translateY(-50%);
+        z-index: 0;
+        opacity: 0;
+        height: $reactflow-node-basesize;
+        width: $reactflow-node-basesize;
+    }
+}
+
+.#{$eccgui}-graphviz__node--minimal-rectangular {
+    .react-flow__node:not(.selected) & {
+        & ~ .react-flow__handle {
+            border-radius: $reactflow-node-border-radius;
+        }
+    }
+
+    & ~ .react-flow__handle:not(.connectable) {
+        border-radius: $reactflow-node-border-radius;
+    }
+}
+
+.#{$eccgui}-graphviz__node--hidehandles {
+    & ~ .react-flow__handle:not(.connectable) {
+        height: 1px;
+        width: 1px;
+        visibility: hidden;
+        border: none;
+        z-index: -1;
+
+        &.react-flow__handle-top {
+            top: 0;
+        }
+        &.react-flow__handle-right {
+            right: 0;
+        }
+        &.react-flow__handle-bottom {
+            bottom: 0;
+        }
+        &.react-flow__handle-left {
+            left: 0;
+        }
+    }
+}
+
+.react-flow__node-graphNode {
+    .react-flow__handle {
+        color: #8e24aa;
+    }
+}
+
+.react-flow__node-classNode {
+    .react-flow__handle {
+        color: darken($button-background-color, 60%);
+    }
+}
+
+.react-flow__node-instanceNode {
+    .react-flow__handle {
+        color: darken($button-background-color, 50%);
+    }
+}
+
+.react-flow__node-propertyNode {
+    .react-flow__handle {
+        color: darken(complement($button-background-color), 40%);
+    }
+}
+
+.react-flow__node-datasetNode {
+    .react-flow__handle {
+        color: #039be5;
+    }
+}
+
+.react-flow__node-linkingNode {
+    .react-flow__handle {
+        color: #00acc1;
+    }
+}
+
+.react-flow__node-transformNode {
+    .react-flow__handle {
+        color: #00897b;
+    }
+}
+
+.react-flow__node-taskNode {
+    .react-flow__handle {
+        color: #546e7a;
+    }
+}
+
+.react-flow__node-workflowNode {
+    .react-flow__handle {
+        color: #4527a0;
+    }
+}

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

@@ -0,0 +1,15 @@
+export { NodeDefault } from "./nodes/NodeDefault";
+export { NodeTools } from "./nodes/NodeTools";
+export { nodeTypes } from "./nodes/nodeTypes";
+export { EdgeDefault } from "./edges/EdgeDefault";
+export { EdgeStep } from "./edges/EdgeStep";
+export { EdgeTools } from "./edges/EdgeTools";
+export { edgeTypes } from "./edges/edgeTypes";
+export { MiniMap } from "./minimap/MiniMap";
+export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
+
+export type { NodeProps } from "./nodes/NodeDefault";
+export type { NodeToolsProps } from "./nodes/NodeTools";
+export type { EdgeDefaultProps } from "./edges/EdgeDefault";
+export type { EdgeStepProps } from "./edges/EdgeStep";
+export type { MiniMapProps } from "./minimap/MiniMap";

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, memo } from "react";
+import {
+    MiniMap as ReactFlowMiniMap,
+    MiniMapProps as ReactFlowMiniMapProps,
+    OnLoadParams,
+} from "react-flow-renderer";
+import {FlowTransform} from "react-flow-renderer/dist/types";
+
+export interface MiniMapProps extends ReactFlowMiniMapProps {
+    flowInstance?: OnLoadParams;
+    enableNavigation?: boolean;
+}
+
+interface configParams {
+    // Key has been pressed down over the mini-map and navigation mode has thus started
+    navigationOn: boolean;
+    // The mini-map element
+    minimapElement: Element | null;
+    // The react-flow element
+    flowElement: Element | null;
+}
+
+let minimapCalcConf: configParams  = {
+    navigationOn: false,
+    minimapElement: null,
+    flowElement: null
+};
+
+/** An improved mini-map for react-flow that supports navigation via the mini-map. */
+export const MiniMap = memo(({
+    flowInstance,
+    enableNavigation = false,
+    maskColor = "#ddddddbb",
+    ...minimapProps
+}: MiniMapProps) => {
+    const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        const minimapDiv: HTMLDivElement | null = minimapWrapper.current
+        if (enableNavigation && flowInstance && minimapDiv) {
+            minimapCalcConf = {
+                navigationOn: false,
+                minimapElement: minimapDiv.querySelector(".react-flow__minimap"),
+                flowElement: minimapDiv.closest(".react-flow"),
+            }
+        }
+    }, [flowInstance, enableNavigation])
+
+    // sets the visible area of the canvas based on mouse movement on the mini-map
+    const handleMiniMapMouseMove = (event: any) => {
+        const minimapConfig = minimapCalcConf.minimapElement?.getAttribute("viewBox")?.split(" ");
+        if (minimapCalcConf.navigationOn && minimapCalcConf.minimapElement && minimapCalcConf.flowElement && flowInstance && minimapConfig) {
+            const minimapBounds = minimapCalcConf.minimapElement.getBoundingClientRect();
+            const canvasBounds = minimapCalcConf.flowElement.getBoundingClientRect();
+            const instanceState = flowInstance.toObject();
+            const minimapCoordinates = {
+                x0: parseInt(minimapConfig[0]),
+                y0: parseInt(minimapConfig[1]),
+                x1: parseInt(minimapConfig[2]) + parseInt(minimapConfig[0]),
+                y1: parseInt(minimapConfig[3]) + parseInt(minimapConfig[1]),
+            };
+            const minimapClick = {
+                x: event.clientX - minimapBounds.left,
+                y: event.clientY - minimapBounds.top,
+            };
+            const canvasPosition = {
+                x:
+                    ((minimapCoordinates.x1 - minimapCoordinates.x0) / minimapBounds.width) * minimapClick.x * -1 -
+                    minimapCoordinates.x0,
+                y:
+                    ((minimapCoordinates.y1 - minimapCoordinates.y0) / minimapBounds.height) * minimapClick.y * -1 -
+                    minimapCoordinates.y0,
+            };
+            const canvasNewState: FlowTransform = {
+                zoom: instanceState.zoom,
+                x: canvasPosition.x * instanceState.zoom + canvasBounds.width / 2,
+                y: canvasPosition.y * instanceState.zoom + canvasBounds.height / 2,
+            };
+            flowInstance.setTransform(canvasNewState);
+        }
+    };
+
+    /**
+        sets the view for the user when clicked and finish navigation
+     **/
+    const handleMiniMapMouseUp = (event: any) => {
+        handleMiniMapMouseMove(event);
+        minimapCalcConf.navigationOn = false;
+    };
+
+    /**
+        enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
+     **/
+    const handleMiniMapMouseDown = (event: any) => {
+        if (enableNavigation && flowInstance) { minimapCalcConf.navigationOn = true; }
+    };
+
+    return (
+        <div
+            ref={minimapWrapper}
+            onMouseDown={handleMiniMapMouseDown}
+            onMouseUp={handleMiniMapMouseUp}
+            onMouseMove={handleMiniMapMouseMove}
+            onMouseLeave={handleMiniMapMouseUp}
+            style={flowInstance ? { cursor: "grab" } : {}}
+        >
+            <ReactFlowMiniMap maskColor={maskColor} {...minimapProps} />
+        </div>
+    );
+});