@eccenca/gui-elements 23.0.0-rc.1 → 23.0.0-rc.3

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

@@ -11,6 +11,7 @@ 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/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 ?? "";
 }