Copilot commented on code in PR #3720:
URL:
https://github.com/apache/incubator-kie-tools/pull/3720#discussion_r3841505678
##########
packages/dmn-editor/src/diagram/Diagram.tsx:
##########
@@ -1762,15 +1802,34 @@ export function SetConnectionToReactFlowStore(props:
{}) {
const rfStoreApi = RF.useStoreApi();
useEffect(() => {
rfStoreApi.setState({
- connectionHandleId: ongoingConnection?.handleId,
- connectionHandleType: ongoingConnection?.handleType,
- connectionNodeId: ongoingConnection?.nodeId,
+ connection: {
+ fromHandle: ongoingConnection
+ ? {
+ nodeId: ongoingConnection.nodeId ?? null,
+ id: ongoingConnection.handleId ?? null,
+ type: ongoingConnection.handleType ?? null,
+ }
+ : undefined,
+ toHandle: null,
+ } as any,
Review Comment:
This replaces React Flow's complete `ConnectionState` with a two-field
object. In v12, the connection-line wrapper requires `connection.inProgress`
and reads the remaining geometry fields; after this effect runs following
`onConnectStart`, `inProgress` becomes `undefined`, so the dragged connection
line disappears until React Flow writes the state again. Preserve/update the
full connection state (and cancel it through `cancelConnection`), and handle
click-to-connect through `connectionClickStartHandle` or consumer fallbacks
rather than casting a partial object.
##########
packages/xyflow-react-kie-diagram/src/diagram/XyFlowReactKieDiagram.tsx:
##########
@@ -1035,83 +1095,99 @@ export function XyFlowReactKieDiagram<
);
return (
- <>
- <I18nDictionariesProvider
- defaults={kieDiagramI18nDefaults}
- dictionaries={kieDiagramI18nDictionaries}
- initialLocale={navigator.language}
- ctx={KieDiagramI18nContext}
- >
- <WaypointActionsContextProvider value={waypointActionsContextValue}>
- <RF.ReactFlow
- connectionMode={RF.ConnectionMode.Loose} // Allow target handles
to be used as source. This is very important for allowing the positional
handles to be updated for the base of an edge.
- onKeyDownCapture={handleRfKeyDownCapture} // Override Reactflow's
keyboard listeners.
- nodes={nodes}
- edges={edges}
- onNodesChange={onNodesChange}
- onEdgesChange={onEdgesChange}
- onEdgeUpdateStart={onEdgeUpdateStart}
- onEdgeUpdateEnd={onEdgeUpdateEnd}
- onEdgeUpdate={onEdgeUpdate}
- onlyRenderVisibleElements={true}
- zoomOnDoubleClick={false}
- elementsSelectable={true}
- panOnScroll={true}
- zoomOnScroll={false}
- preventScrolling={true}
- selectionOnDrag={true}
- panOnDrag={PAN_ON_DRAG}
- selectionMode={RF.SelectionMode.Full} // For selections happening
inside Containment nodes it's better to leave it as "Full"
- isValidConnection={isValidConnection}
- connectionLineComponent={connectionLineComponent}
- onConnect={onConnect}
- onConnectStart={onConnectStart}
- onConnectEnd={onConnectEnd}
- // (begin)
- // 'Starting to drag' and 'dragging' should have the same
behavior. Otherwise,
- // clicking a node and letting it go, without moving, won't work
properly, and
- // Nodes will be removed from Containment Nodes.
- onNodeDragStart={onNodeDragStart}
- onNodeDrag={onNodeDrag}
- // (end)
- onNodeDragStop={onNodeDragStop}
- nodeTypes={nodeComponents}
- edgeTypes={edgeComponents}
- snapToGrid={true}
- snapGrid={xyFlowSnapGrid}
- defaultViewport={DEFAULT_VIEWPORT}
- fitView={false}
- fitViewOptions={FIT_VIEW_OPTIONS}
- attributionPosition={"bottom-right"}
- onInit={setReactFlowInstance}
- deleteKeyCode={DELETE_NODE_KEY_CODES}
- // (begin)
- // Used to make the Palette work by dropping nodes on the
Reactflow Canvas
- onDrop={onDrop}
- onDragOver={onDragOver}
- // (end)
- >
- {children}
- <SelectionStatusLabel />
- {!isFirefox && <RF.Background />}
- <RF.Controls fitViewOptions={FIT_VIEW_OPTIONS}
position={"bottom-right"} />
- <SetConnectionToReactFlowStore />
- </RF.ReactFlow>
- </WaypointActionsContextProvider>
- </I18nDictionariesProvider>
- </>
+ <I18nDictionariesProvider
+ defaults={kieDiagramI18nDefaults}
+ dictionaries={kieDiagramI18nDictionaries}
+ initialLocale={navigator.language}
+ ctx={KieDiagramI18nContext}
+ >
+ <WaypointActionsContextProvider value={waypointActionsContextValue}>
+ <RF.ReactFlow
+ connectionMode={RF.ConnectionMode.Loose} // Allow target handles to
be used as source. This is very important for allowing the positional handles
to be updated for the base of an edge.
+ onKeyDownCapture={handleRfKeyDownCapture} // Override Reactflow's
keyboard listeners.
+ nodes={nodes}
+ edges={edges}
+ onNodesChange={onNodesChange}
+ onEdgesChange={onEdgesChange}
+ onReconnectStart={onReconnectStart}
+ onReconnectEnd={onReconnectEnd}
+ onReconnect={onReconnect}
+ onlyRenderVisibleElements={true}
+ zoomOnDoubleClick={false}
+ elementsSelectable={true}
+ panOnScroll={true}
+ zoomOnScroll={false}
+ preventScrolling={true}
+ selectionOnDrag={true}
+ panOnDrag={PAN_ON_DRAG}
+ selectionMode={RF.SelectionMode.Full} // For selections happening
inside Containment nodes it's better to leave it as "Full"
+ isValidConnection={isValidConnection}
+ connectionLineComponent={connectionLineComponent}
+ onConnect={onConnect}
+ onConnectStart={onConnectStart}
+ onConnectEnd={onConnectEnd}
+ // (begin)
+ // 'Starting to drag' and 'dragging' should have the same behavior.
Otherwise,
+ // clicking a node and letting it go, without moving, won't work
properly, and
+ // Nodes will be removed from Containment Nodes.
+ onNodeDragStart={onNodeDragStart as RF.OnNodeDrag}
+ onNodeDrag={onNodeDrag as RF.OnNodeDrag}
+ // (end)
+ onNodeDragStop={onNodeDragStop as RF.OnNodeDrag}
+ nodeTypes={nodeComponents}
+ edgeTypes={edgeComponents}
+ snapToGrid={true}
+ snapGrid={xyFlowSnapGrid}
+ defaultViewport={DEFAULT_VIEWPORT}
+ fitView={false}
+ fitViewOptions={FIT_VIEW_OPTIONS}
+ attributionPosition={"bottom-right"}
+ onInit={setReactFlowInstance as RF.OnInit}
+ deleteKeyCode={DELETE_NODE_KEY_CODES}
+ // (begin)
+ // Used to make the Palette work by dropping nodes on the Reactflow
Canvas
+ onDrop={onDrop}
+ onDragOver={onDragOver}
+ // (end)
+ >
+ {children}
+ <SelectionStatusLabel />
+ {!isFirefox && <RF.Background />}
+ <RF.Controls fitViewOptions={FIT_VIEW_OPTIONS}
position={"bottom-right"} />
+ <SetConnectionToReactFlowStore />
+ <NodeLookupSync nodeLookupRef={nodeLookupRef} />
+ </RF.ReactFlow>
+ </WaypointActionsContextProvider>
+ </I18nDictionariesProvider>
);
}
+function NodeLookupSync(props: { nodeLookupRef:
React.MutableRefObject<RF.ReactFlowState["nodeLookup"] | undefined> }) {
+ const xyFlowStoreApi = RF.useStoreApi();
+ // useLayoutEffect fires synchronously before paint, ensuring nodeLookupRef
is populated
+ // before onNodesChange can read from it during the same render cycle.
+ useLayoutEffect(() => {
+ props.nodeLookupRef.current = xyFlowStoreApi.getState().nodeLookup;
+ });
+ return null;
+}
+
export function SetConnectionToReactFlowStore(props: {}) {
const ongoingConnection = useXyFlowReactKieDiagramStore((s) =>
s.xyFlowReactKieDiagram.ongoingConnection);
const xyFlowStoreApi = RF.useStoreApi();
useEffect(() => {
xyFlowStoreApi.setState({
- connectionHandleId: ongoingConnection?.handleId,
- connectionHandleType: ongoingConnection?.handleType,
- connectionNodeId: ongoingConnection?.nodeId,
+ connection: {
+ fromHandle: ongoingConnection
+ ? {
+ nodeId: ongoingConnection.nodeId ?? null,
+ id: ongoingConnection.handleId ?? null,
+ type: ongoingConnection.handleType ?? null,
+ }
+ : undefined,
+ toHandle: null,
+ } as any,
Review Comment:
This replaces React Flow's complete `ConnectionState` with a two-field
object. In v12, the connection-line wrapper requires `connection.inProgress`
and reads the remaining geometry fields; after this effect runs following
`onConnectStart`, `inProgress` becomes `undefined`, so the dragged connection
line disappears until React Flow writes the state again. Preserve/update the
full connection state (and cancel it through `cancelConnection`), and handle
click-to-connect through `connectionClickStartHandle` or consumer fallbacks
rather than casting a partial object.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
