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

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

@@ -1,16 +1,73 @@
 import React, { FC } from "react";
 
+import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 // FIXME: we need to check how these markers are used and if we can justify the namings
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
+type ReactFlowMarkerAppearance = "arrow-closed";
+
+interface ReactFlowMarkerProps extends React.SVGProps<SVGMarkerElement> {
+    /**
+     * Visual appearance of the marker.
+     */
+    appearance?: ReactFlowMarkerAppearance;
+    /**
+     * Feedback state of the marker.
+     * SVG markers are reused by paths but they cannot inherit their state color automatically.
+     */
+    intent?: IntentTypes;
+    /**
+     * If set, then the marker orientation is reversed.
+     * Can be used if a start marker should displayed similar to an end marker.
+     */
+    reverse?: boolean;
+}
+
+const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, reverse }: ReactFlowMarkerProps) => {
+    const markerDisplay: Record<ReactFlowMarkerAppearance, unknown> = {
+        "arrow-closed": (
+            <path d="M-5,-4 L5,0 L-5,4 Z" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+        ),
+    };
+
+    return (
+        <marker
+            id={`react-flow__marker--${appearance}${intent ? `-${intent}` : ""}${reverse ? "-reverse" : ""}`}
+            className={
+                `${eccgui}-graphviz__marker` +
+                (className ? ` ${className}` : "") +
+                (intent ? ` ${intentClassName(intent)}` : "")
+            }
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            refX="0"
+            refY="0"
+            orient={reverse ? "auto-start-reverse" : "auto"}
+        >
+            {markerDisplay[appearance]}
+        </marker>
+    );
+};
+
 const ReactFlowMarkers: FC = () => {
+    const intents = ["none", "primary", "accent", "success", "warning", "danger", "info" ] as IntentTypes[];
+
     return (
         <svg>
             <defs>
                 <MarkerArrowClosedInverse />
+                {intents.map((intent) => (
+                    <>
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} />
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} reverse />
+                    </>
+                ))}
             </defs>
         </svg>
     );
 };
 
-export { MarkerArrowClosedInverse, ReactFlowMarkers };
+export { MarkerArrowClosedInverse, ReactFlowMarkers, ReactFlowMarker };

package/src/extensions/react-flow/markers/_markers.scss

@@ -0,0 +1,31 @@
+marker[id|="react-flow__marker"] {
+    color: var(--marker-intent-color);
+
+    &.#{$eccgui}-intent--none {
+        --marker-intent-color: #{$reactflow-edge-stroke-color-default};
+    }
+
+    &.#{$eccgui}-intent--primary {
+        --marker-intent-color: #{$eccgui-color-primary};
+    }
+
+    &.#{$eccgui}-intent--accent {
+        --marker-intent-color: #{$eccgui-color-accent};
+    }
+
+    &.#{$eccgui}-intent--info {
+        --marker-intent-color: #{$eccgui-color-info-text};
+    }
+
+    &.#{$eccgui}-intent--success {
+        --marker-intent-color: #{$eccgui-color-success-text};
+    }
+
+    &.#{$eccgui}-intent--warning {
+        --marker-intent-color: #{$eccgui-color-warning-text};
+    }
+
+    &.#{$eccgui}-intent--danger {
+        --marker-intent-color: #{$eccgui-color-danger-text};
+    }
+}

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

@@ -1,32 +1,26 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { Background, BackgroundVariant, Elements, FlowElement } from "react-flow-renderer";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Background, BackgroundVariant, Elements } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories";
 
-import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index";
+import { ApplicationContainer, MiniMap, MiniMapProps, ReactFlowExtended } from "./../../../index";
 
 export default {
     title: "Extensions/React Flow/MiniMap",
-    component: MiniMapElement,
+    component: MiniMap,
     argTypes: {},
-} as Meta<typeof MiniMapElement>;
+} as Meta<typeof MiniMap>;
 
 const MiniMapExample: FC<MiniMapProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(undefined);
     const [elements, setElements] = useState([] as Elements);
-    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
     const nodeExamples = ReactFlowExample.nodeExamples.workflow;
 
     useEffect(() => {
-        setElements(nodeExamples as Elements);
+        setElements([...nodeExamples.nodes, ...nodeExamples.edges] as Elements);
     }, [args]);
 
-    // Helper methods for nodes and edges
-    const isNode = (element: FlowElement & { source?: string }): boolean => !element.source;
-    const isEdge = (element: FlowElement & { source?: string }): boolean => !isNode(element);
-
     const onLoad = useCallback((rfi) => {
         if (!reactflowInstance) {
             setReactflowInstance(rfi);
@@ -34,23 +28,23 @@ const MiniMapExample: FC<MiniMapProps> = (args) => {
     }, []);
 
     return (
-        <OverlaysProvider>
-            <ReactFlow
+        <ApplicationContainer style={{ background: "white" }}>
+            <ReactFlowExtended
                 configuration={"workflow"}
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
                 defaultZoom={1}
             >
-                <MiniMapElement flowInstance={reactflowInstance} {...args} />
+                <MiniMap flowInstance={reactflowInstance} {...args} />
                 <Background variant={BackgroundVariant.Lines} gap={16} />
-            </ReactFlow>
-            {edgeTools}
-        </OverlaysProvider>
+            </ReactFlowExtended>
+        </ApplicationContainer>
     );
 };
 
-const Template: StoryFn<typeof MiniMapExample> = (args) => <MiniMapExample {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const Template: StoryFn<MiniMapProps> = (args) => <MiniMapExample {...args} key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,14 +1,17 @@
 import React, { memo, useEffect } from "react";
-import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
+import {
+    MiniMap as ReactFlowMiniMapV9,
+    MiniMapProps as ReactFlowMiniMapV9Props,
+    OnLoadParams
+} from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "../minimap/utils";
+import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
 
-export interface MiniMapProps extends ReactFlowMiniMapProps {
-    /**
-     * React-Flow instance
-     */
-    flowInstance?: OnLoadParams;
+import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
+import { miniMapUtils } from "./utils";
+
+export interface MiniMapBasicProps {
     /**
      * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
      */
@@ -23,6 +26,15 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
     >;
 }
 
+export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+    /**
+     * React-Flow instance
+     */
+    flowInstance?: OnLoadParams;
+}
+
+export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
+
 interface configParams {
     // Key has been pressed down over the mini-map and navigation mode has thus started
     navigationOn: boolean;
@@ -40,6 +52,28 @@ let minimapCalcConf: configParams = {
 
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
 export const MiniMap = memo(
+    ({
+        flowVersion,
+        ...otherProps
+    }: MiniMapProps) => {
+        const flowVersionCheck = flowVersion || useReactFlowVersion();
+        
+        switch (flowVersionCheck) {
+            case ReactFlowVersions.V9:
+                return <MiniMapV9 {...otherProps as MiniMapV9Props} />;
+            case ReactFlowVersions.V12:
+                return <MiniMapV12 {...otherProps as MiniMapV12Props} />;
+            default:
+                return <></>; // cannot exit on its own
+        }
+    }
+);
+
+/**
+ * Mini-map support for for React Flow v9.
+ * @deprecated (v26) will be removed, use when `MiniMap` directly
+ */
+export const MiniMapV9 = memo(
     ({
         flowInstance,
         enableNavigation = false,
@@ -49,7 +83,7 @@ export const MiniMap = memo(
         nodeStrokeColor = miniMapUtils.borderColor,
         wrapperProps,
         ...minimapProps
-    }: MiniMapProps) => {
+    }: MiniMapV9Props) => {
         const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
 
         useEffect(() => {
@@ -130,7 +164,7 @@ export const MiniMap = memo(
                         : wrapperProps?.style
                 }
             >
-                <ReactFlowMiniMap
+                <ReactFlowMiniMapV9
                     maskColor={maskColor}
                     nodeClassName={nodeClassName}
                     nodeColor={nodeColor}
@@ -141,3 +175,5 @@ export const MiniMap = memo(
         );
     }
 );
+
+export default MiniMap;

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

@@ -0,0 +1,39 @@
+import React, { memo } from "react";
+import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
+
+import { MiniMapBasicProps } from "./MiniMap";
+import { miniMapUtils } from "./utils";
+
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
+}
+
+/**
+ * Mini-map support for for React Flow v12.
+ * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ */
+export const MiniMapV12 = memo(
+    ({
+        enableNavigation = false,
+        nodeClassName = miniMapUtils.nodeClassName,
+        nodeColor = miniMapUtils.nodeColor,
+        nodeStrokeColor = miniMapUtils.borderColor,
+        wrapperProps,
+        ...minimapProps
+    }: MiniMapV12Props) => {
+        return (
+            <div
+                {...wrapperProps}
+                style={enableNavigation ? { ...(wrapperProps?.style ?? {}), cursor: "grab" } : wrapperProps?.style}
+            >
+                <ReactFlowMiniMap
+                    nodeClassName={nodeClassName}
+                    nodeColor={nodeColor}
+                    nodeStrokeColor={nodeStrokeColor}
+                    {...minimapProps}
+                    zoomable={enableNavigation}
+                    pannable={enableNavigation}
+                />
+            </div>
+        );
+    }
+);

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

@@ -1,3 +1,17 @@
+.react-flow__minimap {
+    right: $eccgui-size-block-whitespace * 0.5 !important;
+    bottom: $eccgui-size-block-whitespace !important;
+    border: solid 1px $eccgui-color-separation-divider;
+
+    & > svg {
+        display: block;
+    }
+}
+
+.react-flow__minimap-mask {
+    fill: rgba($eccgui-color-separation-divider, $eccgui-opacity-muted);
+}
+
 .#{$eccgui}-graphviz__minimap__node--default {
     &:not([fill]) {
         fill: $reactflow-node-background-color;