@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.3-unofficial.0

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

@@ -11,6 +11,9 @@ import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
     pathGlowWidth?: number;
+    inversePath?: boolean;
+    markerStart?: string;
+    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
 }
 
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
@@ -27,6 +30,7 @@ export const EdgeDefault = memo(
         } = edge;
         const {
             pathGlowWidth = 10,
+            markerStart
         } = data;
 
         const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
@@ -41,7 +45,7 @@ export const EdgeDefault = memo(
             targetY: edgeOriginalProperties.targetY,
         });
 
-        const edgeLabel = edgeOriginalProperties.label ? (
+        const edgeLabel = data.renderLabel?.(edgeCenter) ?? (edgeOriginalProperties.label ? (
             <EdgeText
                 x={edgeCenter[0]}
                 y={edgeCenter[1]}
@@ -52,7 +56,7 @@ export const EdgeDefault = memo(
                 labelBgPadding={edgeOriginalProperties.labelBgPadding || [5, 5]}
                 labelBgBorderRadius={edgeOriginalProperties.labelBgBorderRadius || 3}
             />
-        ) : null;
+        ) : null);
 
         const edgeStyle = edgeOriginalProperties.style ?? {};
         return (
@@ -67,6 +71,7 @@ export const EdgeDefault = memo(
                 <path
                     d={pathDisplay}
                     className="react-flow__edge-path"
+                    markerStart={markerStart}
                     markerEnd={markerEnd}
                 />
                 { edgeLabel }

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

@@ -2,16 +2,17 @@ import React, {memo} from 'react';
 import {ContextOverlay} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {
-    IPopoverProps as IBlueprintPopoverProps,
     PopoverInteractionKind as BlueprintPopoverInteractionKind,
 } from "@blueprintjs/core";
 
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+
 interface PosOffset {
     left: number;
     top: number;
 }
 
-export interface EdgeToolsProps extends IBlueprintPopoverProps {
+export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
     children: string | JSX.Element | JSX.Element[];
 }
@@ -30,9 +31,10 @@ export const EdgeTools = memo(
                     autoFocus={true}
                     interactionKind={BlueprintPopoverInteractionKind.HOVER}
                     content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
-                    target={<div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />}
                     popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
-                />
+                >
+                    <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
+                </ContextOverlay>
             </div>
         );
     }

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

@@ -3,7 +3,7 @@
     path, rect {
         shape-rendering: optimizeSpeed;
         /* TODO: transitions currently do not work like expected
-        transition: $reactflow-transition-time/2 $reactflow-transition-function;
+        transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
         */
         stroke-opacity: $reactflow-edge-stroke-opacity;
     }
@@ -72,7 +72,7 @@ path.react-flow__edge-path-glow {
 
 .react-flow__edge-textwrapper {
     /* TODO: transitions currently do not work like expected
-    transition: $reactflow-transition-time/2 $reactflow-transition-function;
+    transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
     */
 }
 
@@ -135,7 +135,7 @@ path.react-flow__edge-path-glow {
 }
 
 .#{$eccgui}-graphviz__edgetools-content {
-    padding: $eccgui-size-block-whitespace / 2;
+    padding: $eccgui-size-block-whitespace * 0.5;
     max-width: $reactflow-node-basesize * 8;
     min-width: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;

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

@@ -25,7 +25,6 @@ export const HandleContent = memo(({
         return (
             <Tooltip
                 content={extendedTooltip}
-                wrapperTagName="div"
                 autoFocus={false}
                 enforceFocus={false}
                 openOnTargetFocus={false}

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

@@ -2,8 +2,8 @@ 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;
+    width: $eccgui-size-block-whitespace * 0.5;
+    height: $eccgui-size-block-whitespace * 0.5;
     z-index: 2;
     border-radius: 100%;
 
@@ -16,10 +16,10 @@ div.react-flow__handle {
         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;
+        top: $eccgui-size-block-whitespace * -0.5;
+        left: $eccgui-size-block-whitespace * -0.5;
+        bottom: $eccgui-size-block-whitespace * -0.5;
+        right: $eccgui-size-block-whitespace * -0.5;
         opacity: 0.61;
         display: none;
         background-color: currentColor;
@@ -29,7 +29,7 @@ div.react-flow__handle {
 
     &:hover {
         &:before {
-            box-shadow: 0 0 $eccgui-size-block-whitespace/2 $eccgui-size-block-whitespace/4 currentColor;
+            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentColor;
         }
     }
 
@@ -70,22 +70,22 @@ div.react-flow__handle {
 }
 
 div.react-flow__handle-right {
-    right: -1 * $eccgui-size-block-whitespace / 2;
+    right: -1 * $eccgui-size-block-whitespace * 0.5;
     transform: translateX(-50%) translateY(-50%);
 }
 
 div.react-flow__handle-left {
-    left: -1 * $eccgui-size-block-whitespace / 2;
+    left: -1 * $eccgui-size-block-whitespace * 0.5;
     transform: translateX(50%) translateY(-50%);
 }
 
 div.react-flow__handle-top {
-    top: -1 * $eccgui-size-block-whitespace / 2;
+    top: -1 * $eccgui-size-block-whitespace * 0.5;
     transform: translateX(-50%) translateY(50%);
 }
 
 div.react-flow__handle-bottom {
-    bottom: -1 * $eccgui-size-block-whitespace / 2;
+    bottom: -1 * $eccgui-size-block-whitespace * 0.5;
     transform: translateX(-50%) translateY(-50%);
 }
 
@@ -94,7 +94,7 @@ div.react-flow__handle-bottom {
     .react-flow__node:not(.selected) & {
         & ~ .react-flow__handle {
             top: 50%;
-            left: $reactflow-node-basesize / 2;
+            left: $reactflow-node-basesize * 0.5;
             right: auto;
             bottom: auto;
             transform: translateX(-50%) translateY(-50%);
@@ -107,7 +107,7 @@ div.react-flow__handle-bottom {
 
     & ~ .react-flow__handle:not(.connectable) {
         top: 50%;
-        left: $reactflow-node-basesize / 2;
+        left: $reactflow-node-basesize * 0.5;
         right: auto;
         bottom: auto;
         transform: translateX(-50%) translateY(-50%);

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

@@ -7,8 +7,11 @@ export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
+export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
 export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
+export { default as nodeUtils } from "./nodes/nodeUtils";
 
 export type { NodeProps } from "./nodes/NodeDefault";
 export type { NodeContentProps } from "./nodes/NodeContent";

package/src/extensions/react-flow/markers/MarkerArrowClosedInverse.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+
+export const MarkerArrowClosedInverse: FC = () => {
+    return (
+        <marker
+            className="react-flow__arrowhead"
+            id="react-flow__arrowclosed-inverse"
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            orient="auto"
+            refX="0"
+            refY="0"
+        >
+            <polyline
+                stroke="#b1b1b7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1"
+                fill="#b1b1b7"
+                points="5,-4 0,0 5,4 5,-4"
+            ></polyline>
+        </marker>
+    );
+};

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+
+import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
+
+export const ReactFlowMarkers: FC = () => {
+    return (
+        <svg>
+            <defs>
+                <MarkerArrowClosedInverse />
+            </defs>
+        </svg>
+    );
+};

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

@@ -5,6 +5,12 @@ import {
     OnLoadParams,
 } from "react-flow-renderer";
 import {FlowTransform} from "react-flow-renderer/dist/types";
+import {
+    minimapNodeClassName,
+    minimapNodeColor,
+    minimapBorderColor
+} from "../minimap/utils";
+
 
 export interface MiniMapProps extends ReactFlowMiniMapProps {
     flowInstance?: OnLoadParams;
@@ -31,6 +37,9 @@ export const MiniMap = memo(({
     flowInstance,
     enableNavigation = false,
     maskColor = "#ddddddbb",
+    nodeClassName = minimapNodeClassName,
+    nodeColor = minimapNodeColor,
+    nodeStrokeColor = minimapBorderColor,
     ...minimapProps
 }: MiniMapProps) => {
     const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
@@ -104,7 +113,13 @@ export const MiniMap = memo(({
             onMouseLeave={handleMiniMapMouseUp}
             style={flowInstance ? { cursor: "grab" } : {}}
         >
-            <ReactFlowMiniMap maskColor={maskColor} {...minimapProps} />
+            <ReactFlowMiniMap
+                maskColor={maskColor}
+                nodeClassName={nodeClassName}
+                nodeColor={nodeColor}
+                nodeStrokeColor={nodeStrokeColor}
+                {...minimapProps}
+            />
         </div>
     );
 });

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -1,6 +1,10 @@
 .#{$eccgui}-graphviz__minimap__node--default {
-    stroke: $reactflow-node-border-color;
-    fill: $reactflow-node-background-color;
+    &:not([fill]) {
+        fill: $reactflow-node-background-color;
+    }
+    &:not([stroke]) {
+        stroke: $reactflow-node-border-color;
+    }
 }
 
 .#{$eccgui}-graphviz__minimap__node--highlight-match {
@@ -28,7 +32,3 @@
     stroke: $eccgui-color-danger-text;
     stroke-width: 9;
 }
-
-.#{$eccgui}-graphviz__minimap__node--customcolor {
-    fill: unset;
-}

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

@@ -4,10 +4,15 @@ import { gethighlightedStateClasses } from "./../nodes/NodeContent";
 export const minimapNodeClassName = (node: any) => {
     const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
     const stateClass = node.data?.highlightedState ? gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
-    const customColor = node.data?.style?.borderColor ? `${eccgui}-graphviz__minimap__node--customcolor` : "";
-    return typeClass + (stateClass ? " " + stateClass : "") + (customColor ? " " + customColor : "");
+    return typeClass + (stateClass ? " " + stateClass : "");
 };
 
 export const minimapNodeColor = (node: any) => {
-    return node.data?.style?.borderColor ?? "";
+    const fillColor = node.data?.style?.backgroundColor || node.data?.style?.borderColor;
+    return fillColor ?? "";
+}
+
+export const minimapBorderColor = (node: any) => {
+    const strokeColor = node.data?.style?.borderColor || node.data?.style?.backgroundColor;
+    return strokeColor ?? "";
 }