Skip to content

Commit 75913ae

Browse files
haschekhaschek
committed
use only css properties for react flow color configs
1 parent a39a440 commit 75913ae

8 files changed

Lines changed: 252 additions & 282 deletions

File tree

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

Lines changed: 134 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, {ReactElement, Ref} from "react";
1+
import React, { ReactElement, Ref } from "react";
22
import { KeyCode as KeyCodeV9 } from "react-flow-renderer";
3-
import { KeyCode as KeyCodeV12} from "@xyflow/react";
3+
import { KeyCode as KeyCodeV12 } from "@xyflow/react";
44

55
import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
66
import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
@@ -63,144 +63,155 @@ interface ReactFlowExtendedVersion12SupportProps {
6363
scrollOnDrag?: never;
6464
}
6565

66-
export type ReactFlowExtendedPropsV9 = ReactFlowExtendedVersion9SupportProps & ReactFlowV9ContainerProps & ReactFlowExtendedExtraProps & ReactFlowExtendedScrollProps
67-
export type ReactFlowExtendedPropsV12 = ReactFlowExtendedVersion12SupportProps & ReactFlowV12ContainerProps & ReactFlowExtendedExtraProps
66+
export type ReactFlowExtendedPropsV9 = ReactFlowExtendedVersion9SupportProps &
67+
ReactFlowV9ContainerProps &
68+
ReactFlowExtendedExtraProps &
69+
ReactFlowExtendedScrollProps;
70+
export type ReactFlowExtendedPropsV12 = ReactFlowExtendedVersion12SupportProps &
71+
ReactFlowV12ContainerProps &
72+
ReactFlowExtendedExtraProps;
6873

69-
export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV12
74+
export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV12;
7075

7176
/**
7277
* `ReactFlow` container extension that includes pre-configured nodes and edges for
7378
* Corporate Memory tools.
7479
*
7580
* @param T The concrete type of the corresponding version, i.e. either one of ReactFlowExtendedPropsV9 or ReactFlowExtendedPropsV12
7681
*/
77-
const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
78-
configuration = "unspecified",
79-
flowVersion = ReactFlowVersions.V9,
80-
dropzoneFor,
81-
scrollOnDrag,
82-
children,
83-
className,
84-
selectionKeyCode,
85-
multiSelectionKeyCode,
86-
deleteKeyCode,
87-
zoomActivationKeyCode,
88-
...originalProps
89-
}: T,
90-
outerRef: Ref<HTMLDivElement>
91-
) => {
92-
const innerRef = React.useRef<HTMLDivElement>(null);
93-
React.useImperativeHandle(outerRef, () => innerRef.current!, []);
94-
95-
React.useEffect(() => {
96-
const reactflowContainer = innerRef?.current;
97-
98-
if (reactflowContainer && dropzoneFor) {
99-
const addDragover = (event: DragEvent) => {
100-
reactflowContainer.classList.add(`${eccgui}-graphviz__canvas--draghover`);
101-
event.preventDefault();
102-
};
103-
104-
const removeDragover = (event: DragEvent) => {
105-
if (reactflowContainer === event.target) {
106-
reactflowContainer.classList.remove(`${eccgui}-graphviz__canvas--draghover`);
107-
}
108-
};
109-
110-
reactflowContainer.addEventListener("dragover", addDragover);
111-
reactflowContainer.addEventListener("dragleave", removeDragover);
112-
reactflowContainer.addEventListener("drop", removeDragover);
113-
return () => {
114-
reactflowContainer.removeEventListener("dragover", addDragover);
115-
reactflowContainer.removeEventListener("dragleave", removeDragover);
116-
reactflowContainer.removeEventListener("drop", removeDragover);
117-
};
118-
}
119-
return;
120-
}, [innerRef, dropzoneFor]);
121-
122-
/** If the hot keys should be disabled. By default, they are always disabled. */
123-
const { hotKeysDisabled } = React.useContext(ReactFlowHotkeyContext);
124-
125-
const configReactFlow = {
126-
unspecified: unspecifiedConfig,
127-
graph: graphConfig,
128-
workflow: workflowConfig,
129-
linking: linkingConfig,
130-
};
131-
132-
const sharedProperties = {
133-
className: `${eccgui}-graphviz__canvas` + (className ? ` ${className}` : ""),
134-
nodeTypes: configReactFlow[configuration].nodeTypes,
135-
edgeTypes: configReactFlow[configuration].edgeTypes,
136-
"data-dropzone-for": dropzoneFor ? dropzoneFor.join(" ") : undefined,
137-
};
138-
139-
let keyCodeConfig = {};
140-
switch (flowVersion) {
141-
case "v9":
142-
keyCodeConfig = {
143-
selectionKeyCode: hotKeysDisabled ? undefined : (selectionKeyCode as KeyCodeV9),
144-
deleteKeyCode: hotKeysDisabled ? undefined : (deleteKeyCode as KeyCodeV9),
145-
multiSelectionKeyCode: hotKeysDisabled ? undefined : (multiSelectionKeyCode as KeyCodeV9),
146-
zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV9),
147-
};
148-
break;
149-
case "v12":
150-
keyCodeConfig = {
151-
selectionKeyCode: hotKeysDisabled ? null : (selectionKeyCode as KeyCodeV12),
152-
deleteKeyCode: hotKeysDisabled ? null : (deleteKeyCode as KeyCodeV12),
153-
multiSelectionKeyCode: hotKeysDisabled ? null : (multiSelectionKeyCode as KeyCodeV12),
154-
zoomActivationKeyCode: hotKeysDisabled ? null : (zoomActivationKeyCode as KeyCodeV12),
155-
};
156-
break;
82+
const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>(
83+
{
84+
configuration = "unspecified",
85+
flowVersion = ReactFlowVersions.V9,
86+
dropzoneFor,
87+
scrollOnDrag,
88+
children,
89+
className,
90+
selectionKeyCode,
91+
multiSelectionKeyCode,
92+
deleteKeyCode,
93+
zoomActivationKeyCode,
94+
...originalProps
95+
}: T,
96+
outerRef: Ref<HTMLDivElement>
97+
) => {
98+
const innerRef = React.useRef<HTMLDivElement>(null);
99+
React.useImperativeHandle(outerRef, () => innerRef.current!, []);
100+
101+
React.useEffect(() => {
102+
const reactflowContainer = innerRef?.current;
103+
104+
if (reactflowContainer && dropzoneFor) {
105+
const addDragover = (event: DragEvent) => {
106+
reactflowContainer.classList.add(`${eccgui}-graphviz__canvas--draghover`);
107+
event.preventDefault();
108+
};
109+
110+
const removeDragover = (event: DragEvent) => {
111+
if (reactflowContainer === event.target) {
112+
reactflowContainer.classList.remove(`${eccgui}-graphviz__canvas--draghover`);
113+
}
114+
};
115+
116+
reactflowContainer.addEventListener("dragover", addDragover);
117+
reactflowContainer.addEventListener("dragleave", removeDragover);
118+
reactflowContainer.addEventListener("drop", removeDragover);
119+
return () => {
120+
reactflowContainer.removeEventListener("dragover", addDragover);
121+
reactflowContainer.removeEventListener("dragleave", removeDragover);
122+
reactflowContainer.removeEventListener("drop", removeDragover);
123+
};
157124
}
125+
return;
126+
}, [innerRef, dropzoneFor]);
158127

159-
let scrollOnDragFunctions = {};
160-
switch (flowVersion) {
161-
case "v9":
162-
scrollOnDragFunctions = useReactFlowScrollOnDragV9({
163-
reactFlowProps: (originalProps as unknown) as ReactFlowV9ContainerProps,
164-
scrollOnDrag,
165-
});
166-
break;
167-
// should not be necessary for v12
168-
}
128+
/** If the hot keys should be disabled. By default, they are always disabled. */
129+
const { hotKeysDisabled } = React.useContext(ReactFlowHotkeyContext);
169130

170-
const containerConfig = {
171-
...sharedProperties,
172-
...keyCodeConfig,
173-
...originalProps,
174-
...scrollOnDragFunctions,
175-
};
176-
177-
switch (flowVersion) {
178-
case "v9":
179-
return (
180-
<ReactFlowV9Container ref={innerRef} {...((containerConfig as unknown) as ReactFlowV9ContainerProps)}>
181-
{children}
182-
<ReactFlowMarkers />
183-
</ReactFlowV9Container>
184-
);
185-
case "v12":
186-
return (
187-
<ReactFlowV12Container ref={innerRef} {...(containerConfig as ReactFlowV12ContainerProps)}>
188-
{children}
189-
<ReactFlowMarkers />
190-
</ReactFlowV12Container>
191-
);
192-
default:
193-
return <div></div>;
194-
}
131+
const configReactFlow = {
132+
unspecified: unspecifiedConfig,
133+
graph: graphConfig,
134+
workflow: workflowConfig,
135+
linking: linkingConfig,
136+
};
137+
138+
const sharedProperties = {
139+
className:
140+
`${eccgui}-graphviz__canvas` +
141+
` ${eccgui}-configuration--colors__react-flow-${configuration}` +
142+
(className ? ` ${className}` : ""),
143+
nodeTypes: configReactFlow[configuration].nodeTypes,
144+
edgeTypes: configReactFlow[configuration].edgeTypes,
145+
"data-dropzone-for": dropzoneFor ? dropzoneFor.join(" ") : undefined,
146+
};
147+
148+
let keyCodeConfig = {};
149+
switch (flowVersion) {
150+
case "v9":
151+
keyCodeConfig = {
152+
selectionKeyCode: hotKeysDisabled ? undefined : (selectionKeyCode as KeyCodeV9),
153+
deleteKeyCode: hotKeysDisabled ? undefined : (deleteKeyCode as KeyCodeV9),
154+
multiSelectionKeyCode: hotKeysDisabled ? undefined : (multiSelectionKeyCode as KeyCodeV9),
155+
zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV9),
156+
};
157+
break;
158+
case "v12":
159+
keyCodeConfig = {
160+
selectionKeyCode: hotKeysDisabled ? null : (selectionKeyCode as KeyCodeV12),
161+
deleteKeyCode: hotKeysDisabled ? null : (deleteKeyCode as KeyCodeV12),
162+
multiSelectionKeyCode: hotKeysDisabled ? null : (multiSelectionKeyCode as KeyCodeV12),
163+
zoomActivationKeyCode: hotKeysDisabled ? null : (zoomActivationKeyCode as KeyCodeV12),
164+
};
165+
break;
166+
}
167+
168+
let scrollOnDragFunctions = {};
169+
switch (flowVersion) {
170+
case "v9":
171+
scrollOnDragFunctions = useReactFlowScrollOnDragV9({
172+
reactFlowProps: originalProps as unknown as ReactFlowV9ContainerProps,
173+
scrollOnDrag,
174+
});
175+
break;
176+
// should not be necessary for v12
195177
}
196178

179+
const containerConfig = {
180+
...sharedProperties,
181+
...keyCodeConfig,
182+
...originalProps,
183+
...scrollOnDragFunctions,
184+
};
185+
186+
switch (flowVersion) {
187+
case "v9":
188+
return (
189+
<ReactFlowV9Container ref={innerRef} {...(containerConfig as unknown as ReactFlowV9ContainerProps)}>
190+
{children}
191+
<ReactFlowMarkers />
192+
</ReactFlowV9Container>
193+
);
194+
case "v12":
195+
return (
196+
<ReactFlowV12Container ref={innerRef} {...(containerConfig as ReactFlowV12ContainerProps)}>
197+
{children}
198+
<ReactFlowMarkers />
199+
</ReactFlowV12Container>
200+
);
201+
default:
202+
return <div></div>;
203+
}
204+
};
205+
197206
/** Hack to make the Type Parameter work with the forward ref. */
198-
export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T extends ReactFlowExtendedProps>(p: T & { ref?: Ref<HTMLDivElement> }) => ReactElement
207+
export const ReactFlowExtended = React.forwardRef(ReactFlowExtendedPlain) as <T extends ReactFlowExtendedProps>(
208+
p: T & { ref?: Ref<HTMLDivElement> }
209+
) => ReactElement;
199210

200-
/**
211+
/**
201212
* @deprecated (v26) use `ReactFlowExtended`
202213
*/
203214
export const ReactFlow = ReactFlowExtended;
204215

205216
/** Classes that when set for an element, prevent that they trigger react-flow dragging, wheel and panning actions. */
206-
export const preventReactFlowActionsClasses = "nodrag nopan nowheel"
217+
export const preventReactFlowActionsClasses = "nodrag nopan nowheel";

‎src/cmem/react-flow/_edges.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
@mixin edgetypestyles($type, $color) {
1+
@mixin edgetypestyles($type) {
22
.react-flow__edge-#{$type} {
3-
@include edgecoloring($color);
3+
@include edgecoloring($type);
44
}
55
}
66

7-
@mixin edgecoloring($color) {
8-
--#{$eccgui}-reactflow-node-color-default: #{$color};
9-
--#{$eccgui}-reactflow-node-color-hover: #{$color};
10-
--#{$eccgui}-reactflow-node-color-selected: #{$color};
7+
@mixin edgecoloring($type) {
8+
--#{$eccgui}-reactflow-node-color-default: var(--#{$eccgui}-#{$type}-edge);
9+
--#{$eccgui}-reactflow-node-color-hover: var(--#{$eccgui}-#{$type}-edge);
10+
--#{$eccgui}-reactflow-node-color-selected: var(--#{$eccgui}-#{$type}-edge);
1111
}
1212

1313
// Graph edge types
1414

15-
@include edgetypestyles("implicit", $reactflow-color-implicit-edge);
16-
@include edgetypestyles("import", $reactflow-color-import-edge);
17-
@include edgetypestyles("subclass", $reactflow-color-subclass-edge);
18-
@include edgetypestyles("subproperty", $reactflow-color-subproperty-edge);
19-
@include edgetypestyles("rdftype", $reactflow-color-rdftype-edge);
15+
@include edgetypestyles("implicit");
16+
@include edgetypestyles("import");
17+
@include edgetypestyles("subclass");
18+
@include edgetypestyles("subproperty");
19+
@include edgetypestyles("rdftype");
2020

2121
// Linking edge types
2222

23-
@include edgetypestyles("value", $reactflow-color-value-edge);
24-
@include edgetypestyles("score", $reactflow-color-score-edge);
23+
@include edgetypestyles("value");
24+
@include edgetypestyles("score");

‎src/cmem/react-flow/_handles.scss‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
@mixin handletypestyles($type, $color) {
1+
@mixin handletypestyles($type) {
22
.react-flow__node-#{$type} {
3-
@include handlecoloring($color);
3+
@include handlecoloring($type);
44
}
55
}
66

7-
@mixin handlecoloring($color) {
7+
@mixin handlecoloring($type) {
88
.react-flow__handle {
9-
color: $color;
9+
color: var(--#{$eccgui}-#{$type}-node);
1010
}
1111
}
1212

1313
// Graph handle types
1414

15-
@include handletypestyles("graph", $reactflow-color-graph-node);
16-
@include handletypestyles("class", $reactflow-color-class-node);
17-
@include handletypestyles("instance", $reactflow-color-instance-node);
18-
@include handletypestyles("property", $reactflow-color-property-node);
15+
@include handletypestyles("graph");
16+
@include handletypestyles("class");
17+
@include handletypestyles("instance");
18+
@include handletypestyles("property");
1919

2020
// Workflow handle types
2121

22-
@include handletypestyles("dataset", $reactflow-color-dataset-node);
23-
@include handletypestyles("linking", $reactflow-color-linking-node);
24-
@include handletypestyles("transform", $reactflow-color-transform-node);
25-
@include handletypestyles("task", $reactflow-color-task-node);
26-
@include handletypestyles("workflow", $reactflow-color-workflow-node);
22+
@include handletypestyles("dataset");
23+
@include handletypestyles("linking");
24+
@include handletypestyles("transform");
25+
@include handletypestyles("task");
26+
@include handletypestyles("workflow");
2727

2828
// Linking handle types
2929

30-
@include handletypestyles("sourcepath", $reactflow-color-sourcepath-node);
31-
@include handletypestyles("targetpath", $reactflow-color-targetpath-node);
32-
@include handletypestyles("transformation", $reactflow-color-transformation-node);
33-
@include handletypestyles("comparator", $reactflow-color-comparator-node);
34-
@include handletypestyles("aggregator", $reactflow-color-aggregator-node);
30+
@include handletypestyles("sourcepath");
31+
@include handletypestyles("targetpath");
32+
@include handletypestyles("transformation");
33+
@include handletypestyles("comparator");
34+
@include handletypestyles("aggregator");

0 commit comments

Comments
 (0)