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

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, FC } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow } from "./ReactFlow";
-import { Elements } from 'react-flow-renderer';
+import IconButton from "../../../components/Icon/IconButton";
+import { ReactFlow, ReactFlowProps } from "./ReactFlow";
+import { ArrowHeadType, Elements, getMarkerEnd } from "react-flow-renderer";
 
 export default {
     title: "CMEM/React Flow/Configurations",
@@ -13,7 +14,7 @@ export default {
 const nodeExamples = {
     unspecified: [
         {
-            id: 1,
+            id: 'unspecified-1',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none"
@@ -21,7 +22,7 @@ const nodeExamples = {
             position: { x: 200, y: 50 },
         },
         {
-            id: 2,
+            id: 'unspecified-2',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none",
@@ -30,15 +31,15 @@ const nodeExamples = {
             position: { x: 200, y: 300 },
         },
         {
-            id: 'e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: '1', target: '2',
+            id: 'unspecified-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'unspecified-1', target: 'unspecified-2',
         },
         {
-            id: 'e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: '2', target: '1',
+            id: 'unspecified-e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: 'unspecified-2', target: 'unspecified-1',
         }
     ],
     linking: [
         {
-            id: 1,
+            id: 'linking-1',
             type: "sourcepath",
             data: {
                 label: "Source path", content: "Example content.", minimalShape: "none"
@@ -46,7 +47,7 @@ const nodeExamples = {
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'linking-2',
             type: "targetpath",
             data: {
                 label: "Target path", content: "Example content.", minimalShape: "none"
@@ -54,7 +55,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'linking-3',
             type: "transformation",
             data: {
                 label: "Transformation", content: "Example content.", minimalShape: "none"
@@ -62,7 +63,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'linking-4',
             type: "comparator",
             data: {
                 label: "Comparation", content: "Example content.", minimalShape: "none",
@@ -71,7 +72,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'linking-5',
             type: "aggregator",
             data: {
                 label: "Aggregation", content: "Example content.", minimalShape: "none",
@@ -79,15 +80,15 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', type: 'value', label: "value edge", arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', type: 'score', label: "score edge", arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'linking-e1', type: 'value', label: "value edge", arrowHeadType: "arrowclosed",source: 'linking-1', target: 'linking-2' },
+        { id: 'linking-e2', type: 'score', label: "score edge", arrowHeadType: "arrowclosed",source: 'linking-2', target: 'linking-3' },
+        { id: 'linking-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'linking-3', target: 'linking-4' },
+        { id: 'linking-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'linking-4', target: 'linking-5' },
+        { id: 'linking-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'linking-5', target: 'linking-1' },
     ],
     workflow: [
         {
-            id: 1,
+            id: 'workflow-1',
             type: "dataset",
             data: {
                 label: "Dataset", content: "Example content.", minimalShape: "none"
@@ -95,7 +96,7 @@ const nodeExamples = {
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'workflow-2',
             type: "linking",
             data: {
                 label: "Linking", content: "Example content.", minimalShape: "none"
@@ -103,7 +104,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'workflow-3',
             type: "transform",
             data: {
                 label: "Transform", content: "Example content.", minimalShape: "none"
@@ -111,7 +112,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'workflow-4',
             type: "task",
             data: {
                 label: "Task", content: "Example content.", minimalShape: "none",
@@ -120,7 +121,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'workflow-5',
             type: "workflow",
             data: {
                 label: "Workflow", content: "Example content.", minimalShape: "none",
@@ -128,15 +129,15 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'workflow-e1', arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
+        { id: 'workflow-e2', arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
+        { id: 'workflow-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'workflow-3', target: 'workflow-4' },
+        { id: 'workflow-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'workflow-4', target: 'workflow-5' },
+        { id: 'workflow-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'workflow-5', target: 'workflow-1' },
     ],
     graph: [
         {
-            id: 1,
+            id: 'graph-1',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none"
@@ -144,7 +145,7 @@ const nodeExamples = {
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'graph-2',
             type: "graph",
             data: {
                 label: "Graph", content: "Example content.", minimalShape: "none"
@@ -152,7 +153,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'graph-3',
             type: "class",
             data: {
                 label: "Class", content: "Example content.", minimalShape: "none"
@@ -160,7 +161,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'graph-4',
             type: "instance",
             data: {
                 label: "Instance", content: "Example content.", minimalShape: "none",
@@ -169,7 +170,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'graph-5',
             type: "property",
             data: {
                 label: "Property", content: "Example content.", minimalShape: "none",
@@ -177,21 +178,96 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', type: 'implicit', label: "implicit edge", arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', type: 'import', label: "import edge", arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'subclass', label: "subclass edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'graph-e1', type: 'implicit', label: "implicit edge", arrowHeadType: "arrowclosed",source: 'graph-1', target: 'graph-2' },
+        { id: 'graph-e2', type: 'import', label: "import edge", arrowHeadType: "arrowclosed",source: 'graph-2', target: 'graph-3' },
+        { id: 'graph-e3', type: 'subclass', label: "subclass edge", arrowHeadType: "arrowclosed",source: 'graph-3', target: 'graph-4' },
+        { id: 'graph-e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: 'graph-4', target: 'graph-5' },
+        { id: 'graph-e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: 'graph-5', target: 'graph-1' },
     ],
+    inverseEdge: [
+        {
+            id: 'inverseEdge-1',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 'inverseEdge-2',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
+                inversePath: true,
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'inverseEdge-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'inverseEdge-1', target: 'inverseEdge-2',
+        },
+        {
+            id: 'inverseEdge-e2', type: 'default', label: "inverse edge", source: 'inverseEdge-2', target: 'inverseEdge-1',
+            data: {
+                markerStart: getMarkerEnd(
+                    `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
+                ),
+            }
+        }
+    ],
+    customLabel: [
+        {
+            id: 'customLabel-1',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 'customLabel-2',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
+                inversePath: true,
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'customLabel-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed", source: 'customLabel-1', target: 'customLabel-2',
+        },
+        {
+            id: 'customLabel-e2', type: 'default', label: "custom edge", arrowHeadType: "arrowclosed", source: 'customLabel-2', target: 'customLabel-1',
+            data: {
+                renderLabel: (
+                    edgeCenter: [number, number, number, number]
+                ) => (
+                    <foreignObject
+                        width={30}
+                        height={30}
+                        x={edgeCenter[0] - 15}
+                        y={edgeCenter[1] - 15}
+                        className="instance-viz-multiedge"
+                        requiredExtensions="http://www.w3.org/1999/xhtml"
+                    >
+                        <body>
+                            <IconButton name="navigation-close" />
+                        </body>
+                    </foreignObject>
+                )
+            }
+        }
+    ]
 }
 
-const ReactFlowExample = (args) => {
+const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
     //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
-        setElements(nodeExamples[args.configuration] as Elements);
+        setElements(nodeExamples[args.configuration ?? "unspecified"] as Elements);
     }, [args]);
 
     const onLoad = useCallback(

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import {default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps} from "react-flow-renderer";
+import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
+import * as inverseEdgeConfig from "./../configuration/inverseEdge";
+import * as customLabelConfig from "./../configuration/customLabel";
 
-interface ReactFlowProps extends ReactFlowOriginalProps {
+export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
-    configuration?: "unspecified" | "graph" | "workflow" | "linking";
+    configuration?: "unspecified" | "graph" | "workflow" | "linking" | "inverseEdge" | "customLabel";
 }
 
 /**
@@ -27,6 +30,8 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
         graph: graphConfig,
         workflow: workflowConfig,
         linking: linkingConfig,
+        inverseEdge: inverseEdgeConfig,
+        customLabel: customLabelConfig,
     }
 
     return (
@@ -35,6 +40,8 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             nodeTypes={ configReactFlow[configuration].nodeTypes }
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
-        />
+        >
+            <ReactFlowMarkers />
+        </ReactFlowOriginal>
     );
 })

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -0,0 +1,35 @@
+$reactflow-color-graph-node: #745a85 !default;
+$reactflow-color-class-node: #3a7896 !default;
+$reactflow-color-instance-node: #0097a7 !default;
+$reactflow-color-property-node: #ffd54f !default;
+
+$reactflow-color-implicit-edge: #ae3c74 !default;
+$reactflow-color-import-edge: $reactflow-color-graph-node !default;
+$reactflow-color-subclass-edge: $reactflow-color-class-node !default;
+$reactflow-color-subproperty-edge: $reactflow-color-property-node !default;
+$reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
+
+@function bright($color) {
+    @return mix($color, #fff, 24%);
+}
+
+.#{eccgui}-configuration--colors__react-flow-graph {
+    --graphNode: #{$reactflow-color-graph-node};
+    --classNode: #{$reactflow-color-class-node};
+    --instanceNode: #{$reactflow-color-instance-node};
+    --propertyNode: #{$reactflow-color-property-node};
+    --implicitEdge: #{$reactflow-color-implicit-edge};
+    --importEdge: #{$reactflow-color-import-edge};
+    --subclassEdge: #{$reactflow-color-subclass-edge};
+    --subpropertyEdge: #{$reactflow-color-subproperty-edge};
+    --rdftypeEdge: #{$reactflow-color-rdftype-edge};
+    --graphNodeBright: #{bright($reactflow-color-graph-node)};
+    --classNodeBright: #{bright($reactflow-color-class-node)};
+    --instanceNodeBright: #{bright($reactflow-color-instance-node)};
+    --propertyNodeBright: #{bright($reactflow-color-property-node)};
+    --implicitEdgeBright: #{bright($reactflow-color-implicit-edge)};
+    --importEdgeBright: #{bright($reactflow-color-import-edge)};
+    --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)};
+    --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)};
+    --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)};
+}

package/src/cmem/react-flow/configuration/_colors-linking.scss

@@ -0,0 +1,29 @@
+$reactflow-color-sourcepath-node: #745a85 !default;
+$reactflow-color-targetpath-node: #3a7896 !default;
+$reactflow-color-transformation-node: #ae3c74 !default;
+$reactflow-color-comparator-node: #40a691 !default;
+$reactflow-color-aggregator-node: #0097a7 !default;
+
+$reactflow-color-value-edge: #222 !default;
+$reactflow-color-score-edge: $reactflow-color-aggregator-node !default;
+
+@function bright($color) {
+    @return mix($color, #fff, 24%);
+}
+
+.#{eccgui}-configuration--colors__react-flow-linking {
+    --sourcepathNode: #{$reactflow-color-sourcepath-node};
+    --targetpathNode: #{$reactflow-color-targetpath-node};
+    --transformationNode: #{$reactflow-color-transformation-node};
+    --comparatorNode: #{$reactflow-color-comparator-node};
+    --aggregatorNode: #{$reactflow-color-aggregator-node};
+    --valueEdge: #{$reactflow-color-value-edge};
+    --scoreEdge: #{$reactflow-color-score-edge};
+    --sourcepathNodeBright: #{bright($reactflow-color-sourcepath-node)};
+    --targetpathNodeBright: #{bright($reactflow-color-targetpath-node)};
+    --transformationNodeBright: #{bright($reactflow-color-transformation-node)};
+    --comparatorNodeBright: #{bright($reactflow-color-comparator-node)};
+    --aggregatorNodeBright: #{bright($reactflow-color-aggregator-node)};
+    --valueEdgeBright: #{bright($reactflow-color-value-edge)};
+    --scoreEdgeBright: #{bright($reactflow-color-score-edge)};
+}

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -0,0 +1,22 @@
+$reactflow-color-dataset-node: #3a7896 !default;
+$reactflow-color-linking-node: #0097a7 !default;
+$reactflow-color-transform-node: #40a691 !default;
+$reactflow-color-task-node: #80b67b !default;
+$reactflow-color-workflow-node: #745a85 !default;
+
+@function bright($color) {
+    @return mix($color, #fff, 24%);
+}
+
+.#{eccgui}-configuration--colors__react-flow-workflow {
+    --datasetNode: #{$reactflow-color-dataset-node};
+    --linkingNode: #{$reactflow-color-linking-node};
+    --transformNode: #{$reactflow-color-transform-node};
+    --taskNode: #{$reactflow-color-task-node};
+    --workflowNode: #{$reactflow-color-workflow-node};
+    --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
+    --linkingNodeBright: #{bright($reactflow-color-linking-node)};
+    --transformNodeBright: #{bright($reactflow-color-transform-node)};
+    --taskNodeBright: #{bright($reactflow-color-task-node)};
+    --workflowNodeBright: #{bright($reactflow-color-workflow-node)};
+}

package/src/cmem/react-flow/configuration/_colors.scss

@@ -1,3 +1,3 @@
-@import "colors-graph.module";
-@import "colors-workflow.module";
-@import "colors-linking.module";
+@import "colors-graph";
+@import "colors-workflow";
+@import "colors-linking";

package/src/cmem/react-flow/configuration/customLabel.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/graph.ts

@@ -1,6 +1,5 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-import colors from "./_colors-graph.module.scss";
 
 const edgeTypes = {
     default: EdgeDefault,
@@ -25,5 +24,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

package/src/cmem/react-flow/configuration/inverseEdge.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/linking.ts

@@ -1,7 +1,6 @@
 
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-import colors from "./_colors-linking.module.scss";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -24,5 +23,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

package/src/cmem/react-flow/configuration/workflow.ts

@@ -1,6 +1,5 @@
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
-import colors from "./_colors-workflow.module.scss";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -21,5 +20,4 @@ const nodeTypes = {
  export {
      edgeTypes,
      nodeTypes,
-     colors,
  }

package/src/common/utils/CssCustomProperties.ts

@@ -0,0 +1,133 @@
+/**
+ * Based on CSS Tricks tutorial.
+ * @see https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
+ */
+
+interface getLocalCssStyleRulesProps {
+    cssRuleType?: "CSSStyleRule";
+    selectorText?: string;
+}
+interface getLocalCssStyleRulePropertiesProps extends getLocalCssStyleRulesProps {
+    propertyType?: "all" | "normal" | "custom";
+}
+interface getCustomPropertiesProps extends getLocalCssStyleRulesProps {
+    removeDashPrefix?: boolean;
+    returnObject?: boolean;
+}
+
+export default class CssCustomProperties {
+
+    getterDefaultProps = {} as getCustomPropertiesProps;
+    customprops = {};
+
+    constructor(props: getCustomPropertiesProps = {}) {
+        this.getterDefaultProps = props;
+    }
+
+    // Methods
+
+    customProperties = (props: getCustomPropertiesProps = {}) => {
+        // FIXME:
+        // in case of performance issues results should get saved at least into intern variables
+        // other cache strategies could be also tested
+        if (Object.keys(this.customprops).length > 1) {
+            return this.customprops;
+        }
+        const customprops = CssCustomProperties.listCustomProperties({
+            ...this.getterDefaultProps,
+            ...props
+        });
+        this.customprops = customprops;
+        return customprops;
+    }
+
+    static listLocalStylesheets = (): CSSStyleSheet[] => {
+        if (document && document.styleSheets) {
+            return Array.from(document.styleSheets)
+                .filter((stylesheet) => {
+                    // is inline stylesheet or from same domain
+                    if (!stylesheet.href) {
+                        return true;
+                    }
+                    return stylesheet.href.indexOf(window.location.origin) === 0;
+                });
+        }
+
+        return [];
+    }
+
+    static listLocalCssRules = (): CSSRule[] => {
+        return CssCustomProperties.listLocalStylesheets()
+            .map((stylesheet) => {
+                return Array.from(stylesheet.cssRules);
+            })
+            .flat();
+    }
+
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): CSSStyleRule[] => {
+        const {cssRuleType = "CSSStyleRule", selectorText} = filter;
+        const cssStyleRules = CssCustomProperties.listLocalCssRules()
+            .filter((cssrule) => {
+                if((cssrule as CSSStyleRule).style) {
+                    const cssStyleRule = cssrule as CSSStyleRule
+                    if (cssStyleRule.constructor.name !== cssRuleType) {
+                        return false;
+                    }
+                    if (!!selectorText && cssStyleRule.selectorText !== selectorText) {
+                        return false;
+                    }
+                    return true;
+                } else {
+                    return false;
+                }
+            })
+        return cssStyleRules as CSSStyleRule[]
+    }
+
+    static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {
+        const { propertyType = "all", ...otherFilters } = filter;
+        return CssCustomProperties.listLocalCssStyleRules(otherFilters)
+            .map((cssrule) => {
+                return [...cssrule.style]
+                    .map((propertyname) => {
+                        return [
+                            propertyname.trim(),
+                            cssrule.style.getPropertyValue(propertyname).trim()
+                        ];
+                    });
+            })
+            .flat()
+            .filter((declaration) => {
+                switch(propertyType) {
+                    case "normal":
+                        return declaration[0].indexOf("--") !== 0;
+                    case "custom":
+                        return declaration[0].indexOf("--") === 0;
+                }
+                return true; // case "all"
+            });
+    }
+
+    static listCustomProperties = (props: getCustomPropertiesProps = {}) => {
+        const {
+            removeDashPrefix = true,
+            returnObject = true,
+            ...filterProps
+        } = props;
+
+        const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
+            ...filterProps,
+            propertyType: "custom",
+        }).map((declaration) => {
+            if (removeDashPrefix) {
+                return [
+                    declaration[0].substr(2),
+                    declaration[1]
+                ];
+            }
+            return declaration;
+        });
+
+        return returnObject ? Object.fromEntries(customProperties) : customProperties;
+    }
+}

package/src/common/utils/getColorConfiguration.ts

@@ -0,0 +1,21 @@
+import CssCustomProperties from "./CssCustomProperties";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+// Configurations can be found in `src/cmem/react-flow/configuration/_colors-*.scss`
+type colorconfigs = "react-flow-graph" | "react-flow-linking" | "react-flow-workflow";
+
+/**
+ * Read and returns color values provided by CSS custom properties.
+ * They are defined for special CSS classes.
+ * Currently color configurations for the react flow editors are supported.
+ **/
+const getColorConfiguration = (configId: colorconfigs) => {
+    return new CssCustomProperties({
+        selectorText: `.${eccgui}-configuration--colors__${configId}`,
+        cssRuleType: "CSSStyleRule",
+        removeDashPrefix: true,
+        returnObject: true,
+    }).customProperties();
+};
+
+export default getColorConfiguration;