@hitachivantara/uikit-react-lab 5.16.1 → 5.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -76,29 +76,29 @@ const HvDroppableFlow = ({
|
|
|
76
76
|
id: elementId
|
|
77
77
|
});
|
|
78
78
|
const handleDragEnd = React.useCallback((event) => {
|
|
79
|
-
if (event.over
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
});
|
|
86
|
-
const data = event.active.data.current?.hvFlow?.data || {};
|
|
87
|
-
const newNode = {
|
|
88
|
-
id: uid.uid(),
|
|
89
|
-
position,
|
|
90
|
-
data,
|
|
91
|
-
type
|
|
92
|
-
};
|
|
93
|
-
if (onDndDrop) {
|
|
94
|
-
onDndDrop(event, newNode);
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
setNodes((nds) => nds.concat(newNode));
|
|
98
|
-
} else {
|
|
99
|
-
console.error(`Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`);
|
|
100
|
-
}
|
|
79
|
+
if (event.over?.id !== elementId)
|
|
80
|
+
return;
|
|
81
|
+
const hvFlow = event.active.data.current?.hvFlow;
|
|
82
|
+
const type = hvFlow?.type;
|
|
83
|
+
if (!type || !nodeTypes?.[type]) {
|
|
84
|
+
return;
|
|
101
85
|
}
|
|
86
|
+
const position = reactFlowInstance.project({
|
|
87
|
+
x: (hvFlow?.x || 0) - event.over.rect.left,
|
|
88
|
+
y: (hvFlow?.y || 0) - event.over.rect.top
|
|
89
|
+
});
|
|
90
|
+
const data = hvFlow?.data || {};
|
|
91
|
+
const newNode = {
|
|
92
|
+
id: uid.uid(),
|
|
93
|
+
position,
|
|
94
|
+
data,
|
|
95
|
+
type
|
|
96
|
+
};
|
|
97
|
+
if (onDndDrop) {
|
|
98
|
+
onDndDrop(event, newNode);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
setNodes((nds) => nds.concat(newNode));
|
|
102
102
|
}, [elementId, nodeTypes, onDndDrop, reactFlowInstance]);
|
|
103
103
|
core.useDndMonitor({
|
|
104
104
|
onDragEnd: handleDragEnd
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string | undefined = string | undefined,\n NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Callback called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /**\n * Callback called when a node is dropped in the flow.\n *\n * This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n *\n * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n *\n * Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n edge: Edge,\n nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return false;\n\n const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) =>\n edg.target === edge.target && edg.targetHandle === edge.targetHandle\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) =>\n edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over && event.over.id === elementId) {\n const type = event.active.data.current?.hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (type && nodeTypes?.[type]) {\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x:\n (event.active.data.current?.hvFlow?.x || 0) -\n event.over.rect.left,\n y:\n (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n });\n\n // Node data\n const data = event.active.data.current?.hvFlow?.data || {};\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n setNodes((nds) => nds.concat(newNode));\n } else {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n );\n }\n }\n },\n [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const { registry } = useNodeMetaRegistry();\n const isValidConnection = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edges","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","sourceMaxConnections","maxConnections","targetMaxConnections","isValid","length","includes","targetConnections","filter","edg","sourceConnections","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string | undefined = string | undefined,\n NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Callback called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /**\n * Callback called when a node is dropped in the flow.\n *\n * This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n *\n * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n *\n * Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n edge: Edge,\n nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return false;\n\n const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) =>\n edg.target === edge.target && edg.targetHandle === edge.targetHandle\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) =>\n edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over?.id !== elementId) return;\n\n const hvFlow = event.active.data.current?.hvFlow;\n const type = hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (!type || !nodeTypes?.[type]) {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n );\n }\n return;\n }\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (hvFlow?.x || 0) - event.over.rect.left,\n y: (hvFlow?.y || 0) - event.over.rect.top,\n });\n\n // Node data\n const data = hvFlow?.data || {};\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n setNodes((nds) => nds.concat(newNode));\n },\n [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const { registry } = useNodeMetaRegistry();\n const isValidConnection = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edges","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","sourceMaxConnections","maxConnections","targetMaxConnections","isValid","length","includes","targetConnections","filter","edg","sourceConnections","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","hvFlow","active","data","current","position","project","x","rect","left","y","top","newNode","uid","nds","concat","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}
|
|
@@ -73,29 +73,29 @@ const HvDroppableFlow = ({
|
|
|
73
73
|
id: elementId
|
|
74
74
|
});
|
|
75
75
|
const handleDragEnd = useCallback((event) => {
|
|
76
|
-
if (event.over
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
});
|
|
83
|
-
const data = event.active.data.current?.hvFlow?.data || {};
|
|
84
|
-
const newNode = {
|
|
85
|
-
id: uid(),
|
|
86
|
-
position,
|
|
87
|
-
data,
|
|
88
|
-
type
|
|
89
|
-
};
|
|
90
|
-
if (onDndDrop) {
|
|
91
|
-
onDndDrop(event, newNode);
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
setNodes((nds) => nds.concat(newNode));
|
|
95
|
-
} else {
|
|
96
|
-
console.error(`Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`);
|
|
97
|
-
}
|
|
76
|
+
if (event.over?.id !== elementId)
|
|
77
|
+
return;
|
|
78
|
+
const hvFlow = event.active.data.current?.hvFlow;
|
|
79
|
+
const type = hvFlow?.type;
|
|
80
|
+
if (!type || !nodeTypes?.[type]) {
|
|
81
|
+
return;
|
|
98
82
|
}
|
|
83
|
+
const position = reactFlowInstance.project({
|
|
84
|
+
x: (hvFlow?.x || 0) - event.over.rect.left,
|
|
85
|
+
y: (hvFlow?.y || 0) - event.over.rect.top
|
|
86
|
+
});
|
|
87
|
+
const data = hvFlow?.data || {};
|
|
88
|
+
const newNode = {
|
|
89
|
+
id: uid(),
|
|
90
|
+
position,
|
|
91
|
+
data,
|
|
92
|
+
type
|
|
93
|
+
};
|
|
94
|
+
if (onDndDrop) {
|
|
95
|
+
onDndDrop(event, newNode);
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
setNodes((nds) => nds.concat(newNode));
|
|
99
99
|
}, [elementId, nodeTypes, onDndDrop, reactFlowInstance]);
|
|
100
100
|
useDndMonitor({
|
|
101
101
|
onDragEnd: handleDragEnd
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string | undefined = string | undefined,\n NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Callback called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /**\n * Callback called when a node is dropped in the flow.\n *\n * This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n *\n * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n *\n * Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n edge: Edge,\n nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return false;\n\n const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) =>\n edg.target === edge.target && edg.targetHandle === edge.targetHandle\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) =>\n edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over && event.over.id === elementId) {\n const type = event.active.data.current?.hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (type && nodeTypes?.[type]) {\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x:\n (event.active.data.current?.hvFlow?.x || 0) -\n event.over.rect.left,\n y:\n (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n });\n\n // Node data\n const data = event.active.data.current?.hvFlow?.data || {};\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n setNodes((nds) => nds.concat(newNode));\n } else {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n );\n }\n }\n },\n [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const { registry } = useNodeMetaRegistry();\n const isValidConnection = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edges","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","sourceMaxConnections","maxConnections","targetMaxConnections","isValid","length","includes","targetConnections","filter","edg","sourceConnections","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","flowStyles","root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string | undefined = string | undefined,\n NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Callback called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /**\n * Callback called when a node is dropped in the flow.\n *\n * This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n *\n * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n *\n * Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n edge: Edge,\n nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return false;\n\n const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) =>\n edg.target === edge.target && edg.targetHandle === edge.targetHandle\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) =>\n edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over?.id !== elementId) return;\n\n const hvFlow = event.active.data.current?.hvFlow;\n const type = hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (!type || !nodeTypes?.[type]) {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n );\n }\n return;\n }\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (hvFlow?.x || 0) - event.over.rect.left,\n y: (hvFlow?.y || 0) - event.over.rect.top,\n });\n\n // Node data\n const data = hvFlow?.data || {};\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n setNodes((nds) => nds.concat(newNode));\n },\n [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const { registry } = useNodeMetaRegistry();\n const isValidConnection = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edges","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","sourceMaxConnections","maxConnections","targetMaxConnections","isValid","length","includes","targetConnections","filter","edg","sourceConnections","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","hvFlow","active","data","current","position","project","x","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","flowStyles","root"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.16.
|
|
3
|
+
"version": "5.16.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"@dnd-kit/core": "^6.0.8",
|
|
33
33
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
34
34
|
"@emotion/css": "^11.11.0",
|
|
35
|
-
"@hitachivantara/uikit-react-core": "^5.36.
|
|
36
|
-
"@hitachivantara/uikit-react-icons": "^5.7.
|
|
35
|
+
"@hitachivantara/uikit-react-core": "^5.36.7",
|
|
36
|
+
"@hitachivantara/uikit-react-icons": "^5.7.4",
|
|
37
37
|
"@hitachivantara/uikit-styles": "^5.16.2",
|
|
38
38
|
"lodash": "^4.17.21",
|
|
39
39
|
"reactflow": "^11.9.4",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"access": "public",
|
|
49
49
|
"directory": "package"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "bfd6e39f249b7304495fe67cc8f9ba06caf2de78",
|
|
52
52
|
"main": "dist/cjs/index.cjs",
|
|
53
53
|
"exports": {
|
|
54
54
|
".": {
|