alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4301 from xyflow/absolute-origin

Browse Source 
Include origin directly in positionAbsolute of node
This commit is contained in:
Moritz Klack
2024-06-27 17:04:38 +02:00
committed by GitHub
parent 2fa017de7a b00eff979a
commit ba3ee1c24c
42 changed files with 383 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/NodeResizer/index.tsx
+9 -4
View File
@@ -37,6 +37,7 @@ const initialNodes: Node[] = [
type: 'defaultResizer',
data: { label: 'default resizer' },
position: { x: 0, y: 0 },
origin: [1, 1],
style: { ...nodeStyle },
},
{
@@ -127,7 +128,7 @@ const initialNodes: Node[] = [
data: { label: 'Parent', keepAspectRatio: true },
position: { x: 700, y: 0 },
width: 300,
height: 400,
height: 300,
style: { ...nodeStyle },
},
{
@@ -147,7 +148,9 @@ const initialNodes: Node[] = [
id: '5b',
type: 'defaultResizer',
data: { label: 'Child with expandParent' },
position: { x: 150, y: 100 },
position: { x: 100, y: 100 },
width: 100,
height: 100,
parentId: '5',
expandParent: true,
style: { ...nodeStyle },
@@ -155,8 +158,10 @@ const initialNodes: Node[] = [
{
id: '5c',
type: 'defaultResizer',
data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
position: { x: 25, y: 200 },
data: { label: 'Child with expandParent & keepAspectRatio' },
position: { x: 250, y: 200 },
height: 100,
width: 100,
parentId: '5',
expandParent: true,
style: { ...nodeStyle },
examples/react/src/examples/Subflow/DebugNode.tsx
+6 -1
View File
@@ -1,6 +1,6 @@
import React, { memo, FC, CSSProperties } from 'react';
import { Handle, NodeProps, Position } from '@xyflow/react';
import { Handle, NodeProps, Position, useInternalNode } from '@xyflow/react';
const infoStyle: CSSProperties = { fontSize: 11 };
const idStyle: CSSProperties = {
@@ -12,6 +12,8 @@ const idStyle: CSSProperties = {
};
const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY, id }) => {
const node = useInternalNode(id)!;
return (
<>
<Handle type="target" position={Position.Top} />
@@ -19,6 +21,9 @@ const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY
<div style={infoStyle}>
x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
</div>
<div style={infoStyle}>
x:{Math.round(node.position.x)} y:{Math.round(node.position.y)}
</div>
<Handle type="source" position={Position.Bottom} />
</>
);
examples/react/src/examples/Subflow/index.tsx
+11 -2
View File
@@ -14,6 +14,8 @@ import {
Background,
Panel,
NodeOrigin,
useUpdateNodeInternals,
ReactFlowProvider,
} from '@xyflow/react';
import DebugNode from './DebugNode';
@@ -104,7 +106,7 @@ const initialNodes: Node[] = [
{
id: '5b',
data: { label: 'Node 5b' },
position: { x: 225, y: 50 },
position: { x: 200, y: 200 },
className: 'light',
parentId: '5',
expandParent: true,
@@ -151,6 +153,7 @@ const nodeTypes = {
const Subflow = () => {
const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
const updateNodeInternals = useUpdateNodeInternals();
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -216,6 +219,7 @@ const Subflow = () => {
onlyRenderVisibleElements={false}
nodeTypes={nodeTypes}
fitView
nodeOrigin={[0, 0]}
>
<MiniMap />
<Controls />
@@ -228,9 +232,14 @@ const Subflow = () => {
<button onClick={toggleChildNodes}>toggleChildNodes</button>
<button onClick={logToObject}>toObject</button>
<button onClick={() => setNodes(initialNodes)}>setNodes</button>
<button onClick={() => updateNodeInternals(nodes.map((node) => node.id))}>updateNodeInternals</button>
</Panel>
</ReactFlow>
);
};
export default Subflow;
export default () => (
<ReactFlowProvider>
<Subflow />
</ReactFlowProvider>
);
packages/react/src/additional-components/MiniMap/MiniMap.tsx
+1 -5
View File
@@ -25,12 +25,8 @@ const selector = (s: ReactFlowState) => {
return {
viewBB,
boundingRect:
s.nodeLookup.size > 0
? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
: viewBB,
boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
rfId: s.rfId,
nodeOrigin: s.nodeOrigin,
panZoom: s.panZoom,
translateExtent: s.translateExtent,
flowWidth: s.width,
packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+2 -7
View File
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ComponentType, memo } from 'react';
import { NodeOrigin, getNodeDimensions, getNodePositionWithOrigin, nodeHasDimensions } from '@xyflow/system';
import { getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
@@ -11,7 +11,6 @@ import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMa
declare const window: any;
const selector = (s: ReactFlowState) => s.nodeOrigin;
const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
const getAttrFunction = <NodeType extends Node>(func: any): GetMiniMapNodeAttribute<NodeType> =>
func instanceof Function ? func : () => func;
@@ -28,7 +27,6 @@ function MiniMapNodes<NodeType extends Node>({
onClick,
}: MiniMapNodesProps<NodeType>) {
const nodeIds = useStore(selectorNodeIds, shallow);
const nodeOrigin = useStore(selector);
const nodeColorFunc = getAttrFunction<NodeType>(nodeColor);
const nodeStrokeColorFunc = getAttrFunction<NodeType>(nodeStrokeColor);
const nodeClassNameFunc = getAttrFunction<NodeType>(nodeClassName);
@@ -46,7 +44,6 @@ function MiniMapNodes<NodeType extends Node>({
<NodeComponentWrapper<NodeType>
key={nodeId}
id={nodeId}
nodeOrigin={nodeOrigin}
nodeColorFunc={nodeColorFunc}
nodeStrokeColorFunc={nodeStrokeColorFunc}
nodeClassNameFunc={nodeClassNameFunc}
@@ -63,7 +60,6 @@ function MiniMapNodes<NodeType extends Node>({
function NodeComponentWrapperInner<NodeType extends Node>({
id,
nodeOrigin,
nodeColorFunc,
nodeStrokeColorFunc,
nodeClassNameFunc,
@@ -74,7 +70,6 @@ function NodeComponentWrapperInner<NodeType extends Node>({
onClick,
}: {
id: string;
nodeOrigin: NodeOrigin;
nodeColorFunc: GetMiniMapNodeAttribute<NodeType>;
nodeStrokeColorFunc: GetMiniMapNodeAttribute<NodeType>;
nodeClassNameFunc: GetMiniMapNodeAttribute<NodeType>;
@@ -86,7 +81,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
}) {
const { node, x, y } = useStore((s) => {
const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
const { x, y } = node.internals.positionAbsolute;
return {
node,
packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+13 -8
View File
@@ -67,26 +67,30 @@ function ResizeControl({
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
const changes: NodeChange[] = [];
const nextPosition = { x: change.x, y: change.y };
const node = nodeLookup.get(id);
if (node && node.expandParent && node.parentId) {
const origin = node.origin ?? nodeOrigin;
const width = change.width ?? node.measured.width!;
const height = change.height ?? node.measured.height!;
const child: ParentExpandChild = {
id: node.id,
parentId: node.parentId,
rect: {
width: change.width ?? node.measured.width!,
height: change.height ?? node.measured.height!,
width,
height,
...evaluateAbsolutePosition(
{
x: change.x ?? node.position.x,
y: change.y ?? node.position.y,
},
{ width, height },
node.parentId,
nodeLookup,
node.origin ?? nodeOrigin
origin
),
},
};
@@ -94,9 +98,10 @@ function ResizeControl({
const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
changes.push(...parentExpandChanges);
// when the parent was expanded by the child node, its position will be clamped at 0,0
nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
// when the parent was expanded by the child node, its position will be clamped at
// 0,0 when node origin is 0,0 and to width, height if it's 1,1
nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : undefined;
nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : undefined;
}
if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+32 -23
View File
@@ -1,7 +1,7 @@
import { useCallback, CSSProperties } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { Rect, Position, getNodeToolbarTransform, getNodesBounds } from '@xyflow/system';
import { Position, getNodeToolbarTransform, getInternalNodesBounds, NodeLookup } from '@xyflow/system';
import { InternalNode, ReactFlowState } from '../../types';
import { useStore } from '../../hooks/useStore';
@@ -17,21 +17,24 @@ const nodeEqualityFn = (a?: InternalNode, b?: InternalNode) =>
a?.selected !== b?.selected ||
a?.internals.z !== b?.internals.z;
const nodesEqualityFn = (a: InternalNode[], b: InternalNode[]) => {
if (a.length !== b.length) {
const nodesEqualityFn = (a: NodeLookup, b: NodeLookup) => {
if (a.size !== b.size) {
return false;
}
return !a.some((node, i) => nodeEqualityFn(node, b[i]));
for (const [key, node] of a) {
if (nodeEqualityFn(node, b.get(key))) {
return false;
}
}
return true;
};
const storeSelector = (state: ReactFlowState) => ({
viewport: {
x: state.transform[0],
y: state.transform[1],
zoom: state.transform[2],
},
nodeOrigin: state.nodeOrigin,
x: state.transform[0],
y: state.transform[1],
zoom: state.transform[2],
selectedNodesCount: state.nodes.filter((node) => node.selected).length,
});
@@ -49,36 +52,41 @@ export function NodeToolbar({
const contextNodeId = useNodeId();
const nodesSelector = useCallback(
(state: ReactFlowState): InternalNode[] => {
(state: ReactFlowState): NodeLookup => {
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
return nodeIds.reduce<InternalNode[]>((acc, id) => {
const internalNodes = nodeIds.reduce<NodeLookup>((res, id) => {
const node = state.nodeLookup.get(id);
if (node) {
acc.push(node);
res.set(node.id, node);
}
return acc;
}, []);
return res;
}, new Map());
return internalNodes;
},
[nodeId, contextNodeId]
);
const nodes = useStore(nodesSelector, nodesEqualityFn);
const { viewport, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow);
// if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
const isActive =
typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
typeof isVisible === 'boolean'
? isVisible
: nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1;
if (!isActive || !nodes.length) {
if (!isActive || !nodes.size) {
return null;
}
const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin });
const zIndex: number = Math.max(...nodes.map((node) => node.internals.z + 1));
const nodeRect = getInternalNodesBounds(nodes);
const nodesArray = Array.from(nodes.values());
const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
const wrapperStyle: CSSProperties = {
position: 'absolute',
transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
zIndex,
...style,
};
@@ -89,7 +97,8 @@ export function NodeToolbar({
style={wrapperStyle}
className={cc(['react-flow__node-toolbar', className])}
{...rest}
data-id={nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
// @todo: check if we could only do this for non-prod envs
data-id={nodesArray.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
>
{children}
</div>
packages/react/src/components/NodeWrapper/index.tsx
+2 -8
View File
@@ -6,7 +6,6 @@ import {
elementSelectionKeys,
errorMessages,
getNodeDimensions,
getPositionWithOrigin,
isInputDOMNode,
nodeHasDimensions,
} from '@xyflow/system';
@@ -40,7 +39,6 @@ export function NodeWrapper<NodeType extends Node>({
rfId,
nodeTypes,
nodeExtent,
nodeOrigin,
onError,
}: NodeWrapperProps<NodeType>) {
const { node, internals, isParent } = useStore((s) => {
@@ -87,15 +85,11 @@ export function NodeWrapper<NodeType extends Node>({
const nodeDimensions = getNodeDimensions(node);
const inlineDimensions = getNodeInlineStyleDimensions(node);
// TODO: clamping should happen earlier
const clampedPosition = nodeExtent
? clampPosition(internals.positionAbsolute, nodeExtent)
: internals.positionAbsolute;
const positionWithOrigin = getPositionWithOrigin({
...clampedPosition,
...nodeDimensions,
origin: node.origin || nodeOrigin,
});
const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
const onMouseEnterHandler = onMouseEnter
@@ -181,7 +175,7 @@ export function NodeWrapper<NodeType extends Node>({
ref={nodeRef}
style={{
zIndex: internals.z,
transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
pointerEvents: hasPointerEvents ? 'all' : 'none',
visibility: hasDimensions ? 'visible' : 'hidden',
...node.style,
packages/react/src/components/NodesSelection/index.tsx
-1
View File
@@ -21,7 +21,6 @@ export type NodesSelectionProps<NodeType> = {
const selector = (s: ReactFlowState) => {
const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
nodeOrigin: s.nodeOrigin,
filter: (node) => !!node.selected,
});
packages/react/src/components/ReactFlowProvider/index.tsx
+4
View File
@@ -4,6 +4,7 @@ import { Provider } from '../../contexts/StoreContext';
import { createStore } from '../../store';
import { BatchProvider } from '../BatchProvider';
import type { Node, Edge } from '../../types';
import { NodeOrigin } from '@xyflow/system';
export type ReactFlowProviderProps = {
initialNodes?: Node[];
@@ -13,6 +14,7 @@ export type ReactFlowProviderProps = {
initialWidth?: number;
initialHeight?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
children: ReactNode;
};
@@ -24,6 +26,7 @@ export function ReactFlowProvider({
initialWidth: width,
initialHeight: height,
fitView,
nodeOrigin,
children,
}: ReactFlowProviderProps) {
const [store] = useState(() =>
@@ -35,6 +38,7 @@ export function ReactFlowProvider({
width,
height,
fitView,
nodeOrigin,
})
);
packages/react/src/container/FlowRenderer/index.tsx
-1
View File
@@ -22,7 +22,6 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<
| 'selectNodesOnDrag'
| 'defaultMarkerColor'
| 'rfId'
| 'nodeOrigin'
> & {
isControlledViewport: boolean;
children: ReactNode;
packages/react/src/container/GraphView/index.tsx
-3
View File
@@ -32,7 +32,6 @@ export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge =
| 'noPanClassName'
| 'defaultViewport'
| 'disableKeyboardA11y'
| 'nodeOrigin'
>
> & {
rfId: string;
@@ -97,7 +96,6 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
noWheelClassName,
noPanClassName,
disableKeyboardA11y,
nodeOrigin,
nodeExtent,
rfId,
viewport,
@@ -186,7 +184,6 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
noPanClassName={noPanClassName}
noDragClassName={noDragClassName}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
rfId={rfId}
/>
packages/react/src/container/NodeRenderer/index.tsx
-2
View File
@@ -22,7 +22,6 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
| 'noDragClassName'
| 'rfId'
| 'disableKeyboardA11y'
| 'nodeOrigin'
| 'nodeExtent'
| 'nodeTypes'
>;
@@ -72,7 +71,6 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
id={nodeId}
nodeTypes={props.nodeTypes}
nodeExtent={props.nodeExtent}
nodeOrigin={props.nodeOrigin}
onClick={props.onNodeClick}
onMouseEnter={props.onNodeMouseEnter}
onMouseMove={props.onNodeMouseMove}
packages/react/src/container/Pane/index.tsx
+2 -3
View File
@@ -155,7 +155,7 @@ export function Pane({
};
const onPointerMove = (event: ReactPointerEvent): void => {
const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
store.getState();
if (!containerBounds.current || !userSelectionRect) {
@@ -181,8 +181,7 @@ export function Pane({
nextUserSelectRect,
transform,
selectionMode === SelectionMode.Partial,
true,
nodeOrigin
true
);
const selectedEdgeIds = new Set<string>();
packages/react/src/container/ReactFlow/Wrapper.tsx
+4
View File
@@ -3,6 +3,7 @@ import { useContext, type ReactNode } from 'react';
import StoreContext from '../../contexts/StoreContext';
import { ReactFlowProvider } from '../../components/ReactFlowProvider';
import type { Node, Edge } from '../../types';
import { NodeOrigin } from '@xyflow/system';
export function Wrapper({
children,
@@ -13,6 +14,7 @@ export function Wrapper({
width,
height,
fitView,
nodeOrigin,
}: {
children: ReactNode;
nodes?: Node[];
@@ -22,6 +24,7 @@ export function Wrapper({
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}) {
const isWrapped = useContext(StoreContext);
@@ -40,6 +43,7 @@ export function Wrapper({
initialWidth={width}
initialHeight={height}
fitView={fitView}
nodeOrigin={nodeOrigin}
>
{children}
</ReactFlowProvider>
packages/react/src/container/ReactFlow/index.tsx
+1 -2
View File
@@ -157,7 +157,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
data-testid="rf__wrapper"
id={id}
>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView} nodeOrigin={nodeOrigin}>
<GraphView<NodeType, EdgeType>
onInit={onInit}
onNodeClick={onNodeClick}
@@ -217,7 +217,6 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
noPanClassName={noPanClassName}
rfId={rfId}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
viewport={viewport}
onViewportChange={onViewportChange}
packages/react/src/hooks/useReactFlow.ts
+1 -1
View File
@@ -50,7 +50,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
const position = nodeToUse.parentId
? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)
: nodeToUse.position;
const nodeWithPosition = {
packages/react/src/hooks/useViewportHelper.ts
+16 -15
View File
@@ -45,22 +45,23 @@ const useViewportHelper = (): ViewportHelperFunctions => {
return { x, y, zoom };
},
fitView: (options) => {
const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
return panZoom
? fitView(
{
nodeLookup,
width,
height,
nodeOrigin,
minZoom,
maxZoom,
panZoom,
},
options
)
: false;
if (!panZoom) {
return false;
}
return fitView(
{
nodeLookup,
width,
height,
minZoom,
maxZoom,
panZoom,
},
options
);
},
setCenter: (x, y, options) => {
const { width, height, maxZoom, panZoom } = store.getState();
packages/react/src/store/index.ts
+8 -6
View File
@@ -12,6 +12,7 @@ import {
EdgeSelectionChange,
NodeSelectionChange,
ParentExpandChild,
NodeOrigin,
} from '@xyflow/system';
import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -26,6 +27,7 @@ const createStore = ({
width,
height,
fitView,
nodeOrigin,
}: {
nodes?: Node[];
edges?: Edge[];
@@ -34,10 +36,11 @@ const createStore = ({
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}) =>
createWithEqualityFn<ReactFlowState>(
(set, get) => ({
...getInitialState({ nodes, edges, width, height, fitView, defaultNodes, defaultEdges }),
...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, defaultNodes, defaultEdges }),
setNodes: (nodes: Node[]) => {
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
// setNodes() is called exclusively in response to user actions:
@@ -98,7 +101,7 @@ const createStore = ({
return;
}
updateAbsolutePositions(nodeLookup, { nodeOrigin });
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin });
// we call fitView once initially after all dimensions are set
let nextFitViewDone = fitViewDone;
@@ -155,8 +158,8 @@ const createStore = ({
}
if (parentExpandChildren.length > 0) {
const { nodeLookup, parentLookup } = get();
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
const { nodeLookup, parentLookup, nodeOrigin } = get();
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
changes.push(...parentExpandChanges);
}
@@ -288,7 +291,7 @@ const createStore = ({
return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
},
fitView: (options?: FitViewOptions): boolean => {
const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
if (!panZoom) {
return false;
@@ -302,7 +305,6 @@ const createStore = ({
panZoom,
minZoom,
maxZoom,
nodeOrigin,
},
options
);
packages/react/src/store/initialState.ts
+7 -4
View File
@@ -7,6 +7,7 @@ import {
updateConnectionLookup,
devWarn,
getInternalNodesBounds,
NodeOrigin,
} from '@xyflow/system';
import type { Edge, InternalNode, Node, ReactFlowStore } from '../types';
@@ -19,6 +20,7 @@ const getInitialState = ({
width,
height,
fitView,
nodeOrigin,
}: {
nodes?: Node[];
edges?: Edge[];
@@ -27,6 +29,7 @@ const getInitialState = ({
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
} = {}): ReactFlowStore => {
const nodeLookup = new Map<string, InternalNode>();
const parentLookup = new Map();
@@ -34,21 +37,21 @@ const getInitialState = ({
const edgeLookup = new Map();
const storeEdges = defaultEdges ?? edges ?? [];
const storeNodes = defaultNodes ?? nodes ?? [];
const storeNodeOrigin = nodeOrigin ?? [0, 0];
updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
nodeOrigin: [0, 0],
nodeOrigin: storeNodeOrigin,
elevateNodesOnSelect: false,
});
let transform: Transform = [0, 0, 1];
if (fitView && width && height) {
// @todo users nodeOrigin should be used here
const bounds = getInternalNodesBounds(nodeLookup, {
nodeOrigin: [0, 0],
filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
});
const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
transform = [x, y, zoom];
}
@@ -80,7 +83,7 @@ const getInitialState = ({
domNode: null,
paneDragging: false,
noPanClassName: 'nopan',
nodeOrigin: [0, 0],
nodeOrigin: storeNodeOrigin,
nodeDragThreshold: 1,
snapGrid: [15, 15],
packages/react/src/types/nodes.ts
+1 -9
View File
@@ -1,12 +1,5 @@
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import type {
CoordinateExtent,
NodeBase,
NodeOrigin,
OnError,
NodeProps as NodePropsBase,
InternalNodeBase,
} from '@xyflow/system';
import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';
import { NodeTypes } from './general';
@@ -59,7 +52,6 @@ export type NodeWrapperProps<NodeType extends Node> = {
disableKeyboardA11y: boolean;
nodeTypes?: NodeTypes;
nodeExtent?: CoordinateExtent;
nodeOrigin: NodeOrigin;
onError?: OnError;
};
packages/react/src/types/store.ts
+2 -1
View File
@@ -26,6 +26,7 @@ import {
type NodeLookup,
type NodeChange,
type EdgeChange,
type ParentLookup,
} from '@xyflow/system';
import type {
@@ -53,7 +54,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
transform: Transform;
nodes: NodeType[];
nodeLookup: NodeLookup<InternalNode<NodeType>>;
parentLookup: Map<string, InternalNode<NodeType>[]>;
parentLookup: ParentLookup<InternalNode<NodeType>>;
edges: Edge[];
edgeLookup: EdgeLookup<EdgeType>;
connectionLookup: ConnectionLookup;
packages/svelte/src/lib/actions/drag/index.ts
+1 -1
View File
@@ -34,7 +34,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
nodeExtent: get(store.nodeExtent),
snapGrid: snapGrid ? snapGrid : [0, 0],
snapToGrid: !!snapGrid,
nodeOrigin: [0, 0],
nodeOrigin: get(store.nodeOrigin),
multiSelectionActive: get(store.multiselectionKeyPressed),
domNode: get(store.domNode),
transform: [vp.x, vp.y, vp.zoom],
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+1 -3
View File
@@ -31,8 +31,6 @@
export let isParent: $$Props['isParent'] = false;
export let positionX: $$Props['positionX'];
export let positionY: $$Props['positionY'];
export let positionOriginX: $$Props['positionOriginX'];
export let positionOriginY: $$Props['positionOriginY'];
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let zIndex: $$Props['zIndex'];
@@ -181,7 +179,7 @@
class:nopan={draggable}
class:parent={isParent}
style:z-index={zIndex}
style:transform="translate({positionOriginX}px, {positionOriginY}px)"
style:transform="translate({positionX}px, {positionY}px)"
style:visibility={initialized ? 'visible' : 'hidden'}
style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
on:click={onSelectNodeHandler}
packages/svelte/src/lib/components/NodeWrapper/types.ts
-2
View File
@@ -28,8 +28,6 @@ export type NodeWrapperProps = Pick<
type: string;
positionX: number;
positionY: number;
positionOriginX: number;
positionOriginY: number;
'on:nodeclick'?: (event: MouseEvent) => void;
resizeObserver?: ResizeObserver | null;
isParent?: boolean;
packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
+2
View File
@@ -11,12 +11,14 @@
export let initialWidth: $$Props['initialWidth'] = undefined;
export let initialHeight: $$Props['initialHeight'] = undefined;
export let fitView: $$Props['fitView'] = undefined;
export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
const store = createStore({
nodes: initialNodes,
edges: initialEdges,
width: initialWidth,
height: initialHeight,
nodeOrigin,
fitView
});
packages/svelte/src/lib/components/SvelteFlowProvider/types.ts
+2
View File
@@ -1,4 +1,5 @@
import type { Edge, Node } from '$lib/types';
import type { NodeOrigin } from '@xyflow/system';
export type SvelteFlowProviderProps = {
initialNodes?: Node[];
@@ -6,4 +7,5 @@ export type SvelteFlowProviderProps = {
initialWidth?: number;
initialHeight?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
};
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+1 -10
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { getPositionWithOrigin, getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
import { nodeHasDimensions } from '@xyflow/system';
import { NodeWrapper } from '$lib/components/NodeWrapper';
import { useStore } from '$lib/store';
@@ -40,13 +40,6 @@
<div class="svelte-flow__nodes">
{#each $visibleNodes as node (node.id)}
{@const nodeDimesions = getNodeDimensions(node)}
{@const posOrigin = getPositionWithOrigin({
x: node.internals.positionAbsolute.x,
y: node.internals.positionAbsolute.y,
...nodeDimesions,
origin: node.origin
})}
<NodeWrapper
{node}
id={node.id}
@@ -65,8 +58,6 @@
deletable={node.deletable ?? true}
positionX={node.internals.positionAbsolute.x}
positionY={node.internals.positionAbsolute.y}
positionOriginX={posOrigin.x ?? 0}
positionOriginY={posOrigin.y ?? 0}
isParent={$parentLookup.has(node.id)}
style={node.style}
class={node.class}
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+11 -2
View File
@@ -78,6 +78,7 @@
export let onconnectend: $$Props['onconnectend'] = undefined;
export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
export let oninit: $$Props['oninit'] = undefined;
export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
export let defaultMarkerColor = '#b1b1b7';
@@ -93,7 +94,14 @@
const store = hasContext(key)
? useStore()
: createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
: createStoreContext({
nodes: get(nodes),
edges: get(edges),
width,
height,
fitView,
nodeOrigin
});
onMount(() => {
store.width.set(clientWidth);
@@ -168,7 +176,8 @@
onconnect,
onconnectstart,
onconnectend,
onbeforedelete
onbeforedelete,
nodeOrigin
};
updateStoreByKeys(store, updatableProps);
packages/svelte/src/lib/container/SvelteFlow/utils.ts
+1
View File
@@ -70,6 +70,7 @@ export type UpdatableStoreProps = {
onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
onbeforedelete?: UnwrapWritable<SvelteFlowStore['onbeforedelete']>;
nodeOrigin?: UnwrapWritable<SvelteFlowStore['nodeOrigin']>;
};
export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+2 -4
View File
@@ -11,7 +11,6 @@
getBoundsOfRects,
getInternalNodesBounds,
getNodeDimensions,
getNodePositionWithOrigin,
nodeHasDimensions,
type Rect
} from '@xyflow/system';
@@ -134,11 +133,10 @@
{#each $nodes as userNode (userNode.id)}
{@const node = $nodeLookup.get(userNode.id)}
{#if node && nodeHasDimensions(node)}
{@const pos = getNodePositionWithOrigin(node).positionAbsolute}
{@const nodeDimesions = getNodeDimensions(node)}
<MinimapNode
x={pos.x}
y={pos.y}
x={node.internals.positionAbsolute.x}
y={node.internals.positionAbsolute.y}
{...nodeDimesions}
selected={node.selected}
color={nodeColorFunc?.(node)}
packages/svelte/src/lib/store/index.ts
+18 -6
View File
@@ -15,6 +15,7 @@ import {
type CoordinateExtent,
type UpdateConnection,
errorMessages,
type NodeOrigin,
type ConnectionState
} from '@xyflow/system';
@@ -33,15 +34,24 @@ export function createStore({
edges,
width,
height,
fitView: fitViewOnCreate
fitView: fitViewOnCreate,
nodeOrigin
}: {
nodes?: Node[];
edges?: Edge[];
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}): SvelteFlowStore {
const store = getInitialStore({ nodes, edges, width, height, fitView: fitViewOnCreate });
const store = getInitialStore({
nodes,
edges,
width,
height,
fitView: fitViewOnCreate,
nodeOrigin
});
function setNodeTypes(nodeTypes: NodeTypes) {
store.nodeTypes.set({
@@ -123,6 +133,7 @@ export function createStore({
}
case 'position':
node.position = change.position ?? node.position;
break;
}
}
@@ -148,8 +159,7 @@ export function createStore({
height: get(store.height),
minZoom: get(store.minZoom),
maxZoom: get(store.maxZoom),
panZoom,
nodeOrigin: get(store.nodeOrigin)
panZoom
},
options
);
@@ -444,15 +454,17 @@ export function createStoreContext({
edges,
width,
height,
fitView
fitView,
nodeOrigin
}: {
nodes?: Node[];
edges?: Edge[];
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}) {
const store = createStore({ nodes, edges, width, height, fitView });
const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin });
setContext(key, {
getStore: () => store
packages/svelte/src/lib/store/initial-store.ts
+14 -13
View File
@@ -6,7 +6,6 @@ import {
ConnectionLineType,
devWarn,
adoptUserNodes,
getNodesBounds,
getViewportForBounds,
updateConnectionLookup,
type SelectionRect,
@@ -22,7 +21,9 @@ import {
type OnConnectStart,
type OnConnectEnd,
type NodeLookup,
type EdgeLookup
type EdgeLookup,
type ParentLookup,
getInternalNodesBounds
} from '@xyflow/system';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -72,18 +73,21 @@ export const getInitialStore = ({
edges = [],
width,
height,
fitView
fitView,
nodeOrigin
}: {
nodes?: Node[];
edges?: Edge[];
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}) => {
const nodeLookup: NodeLookup = new Map();
const parentLookup = new Map();
const storeNodeOrigin = nodeOrigin ?? [0, 0];
adoptUserNodes(nodes, nodeLookup, parentLookup, {
nodeOrigin: [0, 0],
nodeOrigin: storeNodeOrigin,
elevateNodesOnSelect: false,
checkEquality: false
});
@@ -94,20 +98,17 @@ export const getInitialStore = ({
let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
if (fitView && width && height) {
const nodesWithDimensions = nodes.filter(
(node) => (node.width && node.height) || (node.initialWidth && node.initialHeight)
);
// @todo users nodeOrigin should be used here
const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
const bounds = getInternalNodesBounds(nodeLookup, {
filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
});
viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
}
return {
flowId: writable<string | null>(null),
nodes: createNodesStore(nodes, nodeLookup, parentLookup),
nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin),
nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
parentLookup: readable<Map<string, InternalNode[]>>(parentLookup),
parentLookup: readable<ParentLookup<InternalNode>>(parentLookup),
edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
visibleNodes: readable<InternalNode[]>([]),
edges: createEdgesStore(edges, connectionLookup, edgeLookup),
@@ -117,7 +118,7 @@ export const getInitialStore = ({
width: writable<number>(500),
minZoom: writable<number>(0.5),
maxZoom: writable<number>(2),
nodeOrigin: writable<NodeOrigin>([0, 0]),
nodeOrigin: writable<NodeOrigin>(storeNodeOrigin),
nodeDragThreshold: writable<number>(1),
nodeExtent: writable<CoordinateExtent>(infiniteExtent),
translateExtent: writable<CoordinateExtent>(infiniteExtent),
packages/svelte/src/lib/store/utils.ts
+6 -2
View File
@@ -13,7 +13,9 @@ import {
type PanZoomInstance,
type ConnectionLookup,
type EdgeLookup,
type NodeLookup
type NodeLookup,
type ParentLookup,
type NodeOrigin
} from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
@@ -128,7 +130,8 @@ export type NodeStoreOptions = {
export const createNodesStore = (
nodes: Node[],
nodeLookup: NodeLookup<InternalNode>,
parentLookup: Map<string, InternalNode[]>
parentLookup: ParentLookup<InternalNode>,
nodeOrigin: NodeOrigin = [0, 0]
): {
subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
update: (this: void, updater: Updater<Node[]>) => void;
@@ -144,6 +147,7 @@ export const createNodesStore = (
const _set = (nds: Node[]): Node[] => {
adoptUserNodes(nds, nodeLookup, parentLookup, {
elevateNodesOnSelect,
nodeOrigin,
defaults,
checkEquality: false
});
packages/system/src/types/general.ts
+1 -2
View File
@@ -7,7 +7,7 @@ import type { ZoomBehavior } from 'd3-zoom';
import type { Transition } from 'd3-transition';
import type { XYPosition, Rect } from './utils';
import type { InternalNodeBase, NodeBase, NodeDragItem, NodeOrigin } from './nodes';
import type { InternalNodeBase, NodeBase, NodeDragItem } from './nodes';
import type { ConnectingHandle, HandleType } from './handles';
import { PanZoomInstance } from './panzoom';
import { EdgeBase } from '..';
@@ -61,7 +61,6 @@ export type FitViewParamsBase<NodeType extends NodeBase> = {
panZoom: PanZoomInstance;
minZoom: number;
maxZoom: number;
nodeOrigin?: NodeOrigin;
};
export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
packages/system/src/types/nodes.ts
+2 -1
View File
@@ -77,6 +77,7 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
* Used as an optimization to avoid certain operations. */
userNode: NodeType;
handleBounds?: NodeHandleBounds;
bounds?: NodeBounds;
};
};
@@ -153,4 +154,4 @@ export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
export type Align = 'center' | 'start' | 'end';
export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;
export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType[]>;
export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, Map<string, NodeType>>;
packages/system/src/utils/dom.ts
+6 -14
View File
@@ -1,4 +1,4 @@
import type { Transform, XYPosition, SnapGrid, Dimensions, NodeOrigin, HandleElement, Position } from '../types';
import type { Transform, XYPosition, SnapGrid, Dimensions, HandleElement, Position } from '../types';
import { snapPosition, pointToRendererPoint } from './general';
export type GetPointerPositionParams = {
@@ -62,8 +62,7 @@ export const getHandleBounds = (
selector: string,
nodeElement: HTMLDivElement,
nodeBounds: DOMRect,
zoom: number,
nodeOrigin: NodeOrigin = [0, 0]
zoom: number
): HandleElement[] | null => {
const handles = nodeElement.querySelectorAll(selector);
@@ -71,22 +70,15 @@ export const getHandleBounds = (
return null;
}
const handlesArray = Array.from(handles) as HTMLDivElement[];
const nodeOffset = {
x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
};
return handlesArray.map((handle): HandleElement => {
return Array.from(handles).map((handle): HandleElement => {
const handleBounds = handle.getBoundingClientRect();
return {
id: handle.getAttribute('data-handleid'),
position: handle.getAttribute('data-handlepos') as unknown as Position,
x: (handleBounds.left - nodeOffset.x) / zoom,
y: (handleBounds.top - nodeOffset.y) / zoom,
...getDimensions(handle),
x: (handleBounds.left - nodeBounds.left) / zoom,
y: (handleBounds.top - nodeBounds.top) / zoom,
...getDimensions(handle as HTMLDivElement),
};
});
};
packages/system/src/utils/general.ts
+15 -35
View File
@@ -12,7 +12,7 @@ import type {
NodeLookup,
} from '../types';
import { type Viewport } from '../types';
import { getNodePositionWithOrigin } from './graph';
import { getNodePositionWithOrigin, isInternalNodeBase } from './graph';
export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
@@ -68,24 +68,28 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
});
export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
const { x, y } = isInternalNodeBase(node)
? node.internals.positionAbsolute
: getNodePositionWithOrigin(node, nodeOrigin);
return {
x,
y,
width: node.measured?.width ?? node.width ?? 0,
height: node.measured?.height ?? node.height ?? 0,
width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
};
};
export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
const { x, y } = isInternalNodeBase(node)
? node.internals.positionAbsolute
: getNodePositionWithOrigin(node, nodeOrigin);
return {
x,
y,
x2: x + (node.measured?.width ?? node.width ?? 0),
y2: y + (node.measured?.height ?? node.height ?? 0),
x2: x + (node.measured?.width ?? node.width ?? node.initialWidth ?? 0),
y2: y + (node.measured?.height ?? node.height ?? node.initialHeight ?? 0),
};
};
@@ -114,29 +118,6 @@ export const devWarn = (id: string, message: string) => {
}
};
export const getPositionWithOrigin = ({
x,
y,
width,
height,
origin = [0, 0],
}: {
x: number;
y: number;
width: number;
height: number;
origin?: NodeOrigin;
}): XYPosition => {
if (!width || !height || origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
return { x, y };
}
return {
x: x - width * origin[0],
y: y - height * origin[1],
};
};
export const snapPosition = (position: XYPosition, snapGrid: SnapGrid = [1, 1]): XYPosition => {
return {
x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
@@ -239,9 +220,10 @@ export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: No
*/
export function evaluateAbsolutePosition(
position: XYPosition,
dimensions: { width?: number; height?: number } = { width: 0, height: 0 },
parentId: string,
nodeLookup: NodeLookup,
nodeOrigin: NodeOrigin = [0, 0]
nodeOrigin: NodeOrigin
): XYPosition {
let nextParentId: string | undefined = parentId;
const positionAbsolute = { ...position };
@@ -252,10 +234,8 @@ export function evaluateAbsolutePosition(
if (parent) {
const origin = parent.origin || nodeOrigin;
const xOffset = (parent.measured.width ?? 0) * origin[0];
const yOffset = (parent.measured.height ?? 0) * origin[1];
positionAbsolute.x += parent.position.x - xOffset;
positionAbsolute.y += parent.position.y - yOffset;
positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0];
positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
}
}
packages/system/src/utils/graph.ts
+21 -39
View File
@@ -106,25 +106,15 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
return nodes.filter((n) => incomersIds.has(n.id));
};
export const getNodePositionWithOrigin = (
node: InternalNodeBase | NodeBase,
nodeOrigin: NodeOrigin = [0, 0]
): { position: XYPosition; positionAbsolute: XYPosition } => {
export const getNodePositionWithOrigin = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): XYPosition => {
const { width, height } = getNodeDimensions(node);
const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
const origin = node.origin || nodeOrigin;
const origin = node.origin ?? nodeOrigin;
const offsetX = width * origin[0];
const offsetY = height * origin[1];
return {
position: {
x: node.position.x - offsetX,
y: node.position.y - offsetY,
},
positionAbsolute: {
x: positionAbsolute.x - offsetX,
y: positionAbsolute.y - offsetY,
},
x: node.position.x - offsetX,
y: node.position.y - offsetY,
};
};
@@ -157,7 +147,6 @@ export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams =
};
export type GetInternalNodesBoundsParams<NodeType> = {
nodeOrigin?: NodeOrigin;
useRelativePosition?: boolean;
filter?: (node: NodeType) => boolean;
};
@@ -168,9 +157,7 @@ export type GetInternalNodesBoundsParams<NodeType> = {
*/
export const getInternalNodesBounds = <NodeType extends InternalNodeBase | NodeDragItem>(
nodeLookup: Map<string, NodeType>,
params: GetInternalNodesBoundsParams<NodeType> = {
nodeOrigin: [0, 0],
}
params: GetInternalNodesBoundsParams<NodeType> = {}
): Rect => {
if (nodeLookup.size === 0) {
return { x: 0, y: 0, width: 0, height: 0 };
@@ -179,8 +166,8 @@ export const getInternalNodesBounds = <NodeType extends InternalNodeBase | NodeD
let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
nodeLookup.forEach((node) => {
if (params.filter == undefined || params.filter(node)) {
const nodeBox = nodeToBox(node as InternalNodeBase, params.nodeOrigin);
if (params.filter === undefined || params.filter(node)) {
const nodeBox = nodeToBox(node as InternalNodeBase);
box = getBoundsOfBoxes(box, nodeBox);
}
});
@@ -194,8 +181,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
[tx, ty, tScale]: Transform = [0, 0, 1],
partially = false,
// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
excludeNonSelectableNodes = false,
nodeOrigin: NodeOrigin = [0, 0]
excludeNonSelectableNodes = false
): InternalNodeBase<NodeType>[] => {
const paneRect = {
...pointToRendererPoint(rect, [tx, ty, tScale]),
@@ -214,7 +200,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
continue;
}
const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node));
const notInitialized = width === null || height === null;
const partiallyVisible = partially && overlappingArea > 0;
@@ -248,22 +234,22 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
};
export function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
{ nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
{ nodeLookup, width, height, panZoom, minZoom, maxZoom }: Params,
options?: Options
) {
const filteredNodes: InternalNodeBase[] = [];
const filteredNodes: Map<string, InternalNodeBase> = new Map();
const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
nodeLookup.forEach((n) => {
const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
filteredNodes.push(n);
filteredNodes.set(n.id, n);
}
});
if (filteredNodes.length > 0) {
const bounds = getNodesBounds(filteredNodes, { nodeOrigin });
if (filteredNodes.size > 0) {
const bounds = getInternalNodesBounds(filteredNodes);
const viewport = getViewportForBounds(
bounds,
@@ -323,9 +309,8 @@ export function calculateNodePosition<NodeType extends NodeBase>({
}): { position: XYPosition; positionAbsolute: XYPosition } {
const node = nodeLookup.get(nodeId)!;
const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
const { x: parentX, y: parentY } = parentNode
? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
: { x: 0, y: 0 };
const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
const origin = node.origin ?? nodeOrigin;
let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
@@ -339,13 +324,9 @@ export function calculateNodePosition<NodeType extends NodeBase>({
const parentHeight = parentNode.measured.height;
if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
const currNodeOrigin = node.origin || nodeOrigin;
const extentX = parentX + nodeWidth * currNodeOrigin[0];
const extentY = parentY + nodeHeight * currNodeOrigin[1];
currentExtent = [
[extentX, extentY],
[extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight],
[parentX, parentY],
[parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight],
];
}
}
@@ -362,8 +343,9 @@ export function calculateNodePosition<NodeType extends NodeBase>({
return {
position: {
x: positionAbsolute.x - parentX,
y: positionAbsolute.y - parentY,
// TODO: is there a better way to do this?
x: positionAbsolute.x - parentX + node.measured.width! * origin[0],
y: positionAbsolute.y - parentY + node.measured.height! * origin[1],
},
positionAbsolute,
};
packages/system/src/utils/store.ts
+120 -103
View File
@@ -6,7 +6,6 @@ import {
PanZoomInstance,
Transform,
XYPosition,
XYZPosition,
ConnectionLookup,
EdgeBase,
EdgeLookup,
@@ -22,48 +21,28 @@ import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './ge
import { getNodePositionWithOrigin } from './graph';
import { ParentExpandChild } from './types';
const defaultOptions = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
defaults: {},
};
const adoptUserNodesDefaultOptions = {
...defaultOptions,
checkEquality: true,
};
export function updateAbsolutePositions<NodeType extends NodeBase>(
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
options: UpdateNodesOptions<NodeType> = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
defaults: {},
}
nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
options?: UpdateNodesOptions<NodeType>
) {
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
for (const [, node] of nodeLookup) {
const parentId = node.parentId;
if (!parentId) {
const _options = { ...defaultOptions, ...options };
for (const node of nodeLookup.values()) {
if (!node.parentId) {
continue;
}
if (!nodeLookup.has(parentId)) {
throw new Error(`Parent node ${parentId} not found`);
}
const parentNode = nodeLookup.get(parentId);
const { x, y, z } = calculateXYZPosition(
node,
nodeLookup,
{
...node.position,
z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
},
parentNode?.origin ?? options.nodeOrigin
);
const currPosition = node.internals.positionAbsolute;
const positionChanged = x !== currPosition.x || y !== currPosition.y;
if (positionChanged || z !== node.internals.z) {
node.internals = {
...node.internals,
positionAbsolute: positionChanged ? { x, y } : currPosition,
z,
};
}
updateChildPosition(node, nodeLookup, parentLookup, _options);
}
}
@@ -76,38 +55,33 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
export function adoptUserNodes<NodeType extends NodeBase>(
nodes: NodeType[],
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
parentLookup: Map<string, InternalNodeBase<NodeType>[]>,
options: UpdateNodesOptions<NodeType> = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
defaults: {},
checkEquality: true,
}
nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
options?: UpdateNodesOptions<NodeType>
) {
const _options = { ...adoptUserNodesDefaultOptions, ...options };
const tmpLookup = new Map(nodeLookup);
nodeLookup.clear();
parentLookup.clear();
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
nodes.forEach((userNode) => {
for (const userNode of nodes) {
let internalNode = tmpLookup.get(userNode.id);
if (options.checkEquality && userNode === internalNode?.internals.userNode) {
if (_options.checkEquality && userNode === internalNode?.internals.userNode) {
nodeLookup.set(userNode.id, internalNode);
} else {
internalNode = {
...options.defaults,
..._options.defaults,
...userNode,
measured: {
width: userNode.measured?.width,
height: userNode.measured?.height,
},
internals: {
positionAbsolute: userNode.position,
positionAbsolute: getNodePositionWithOrigin(userNode, _options.nodeOrigin),
handleBounds: internalNode?.internals.handleBounds,
z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
z: calculateZ(userNode, selectedNodeZ),
userNode,
},
};
@@ -115,50 +89,75 @@ export function adoptUserNodes<NodeType extends NodeBase>(
}
if (userNode.parentId) {
const childNodes = parentLookup.get(userNode.parentId);
if (childNodes) {
childNodes.push(internalNode);
} else {
parentLookup.set(userNode.parentId, [internalNode]);
}
updateChildPosition(internalNode, nodeLookup, parentLookup, options);
}
});
if (parentLookup.size > 0) {
updateAbsolutePositions(nodeLookup, options);
}
}
function calculateXYZPosition<NodeType extends NodeBase>(
node: NodeType,
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
result: XYZPosition,
nodeOrigin: NodeOrigin = [0, 0]
): XYZPosition {
if (!node.parentId) {
return result;
function updateChildPosition<NodeType extends NodeBase>(
node: InternalNodeBase<NodeType>,
nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
options?: UpdateNodesOptions<NodeType>
) {
const _options = { ...defaultOptions, ...options };
const parentId = node.parentId!;
const parentNode = nodeLookup.get(parentId);
if (!parentNode) {
throw new Error(`Parent node ${parentId} not found`);
}
const parent = nodeLookup.get(node.parentId)!;
const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
// update the parentLookup
const childNodes = parentLookup.get(parentId);
if (childNodes) {
childNodes.set(node.id, node);
} else {
parentLookup.set(parentId, new Map([[node.id, node]]));
}
return calculateXYZPosition(
parent,
nodeLookup,
{
x: (result.x ?? 0) + parentPosition.x,
y: (result.y ?? 0) + parentPosition.y,
z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0,
},
parent.origin || nodeOrigin
);
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
const { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin!, selectedNodeZ);
const currPosition = node.internals.positionAbsolute;
const positionChanged = x !== currPosition.x || y !== currPosition.y;
if (positionChanged || z !== node.internals.z) {
node.internals = {
...node.internals,
positionAbsolute: positionChanged ? { x, y } : currPosition,
z,
};
}
}
function calculateZ(node: NodeBase, selectedNodeZ: number) {
return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
}
function calculateChildXYZ<NodeType extends NodeBase>(
childNode: InternalNodeBase<NodeType>,
parentNode: InternalNodeBase<NodeType>,
nodeOrigin: NodeOrigin,
selectedNodeZ: number
) {
const position = getNodePositionWithOrigin(childNode, nodeOrigin);
const childZ = calculateZ(childNode, selectedNodeZ);
const parentZ = parentNode.internals.z ?? 0;
return {
x: parentNode.internals.positionAbsolute.x + position.x,
y: parentNode.internals.positionAbsolute.y + position.y,
z: parentZ > childZ ? parentZ : childZ,
};
}
export function handleExpandParent(
children: ParentExpandChild[],
nodeLookup: NodeLookup,
parentLookup: ParentLookup,
nodeOrigin?: NodeOrigin
nodeOrigin: NodeOrigin = [0, 0]
): (NodeDimensionChange | NodePositionChange)[] {
const changes: (NodeDimensionChange | NodePositionChange)[] = [];
const parentExpansions = new Map<string, { expandedRect: Rect; parent: InternalNodeBase }>();
@@ -170,36 +169,45 @@ export function handleExpandParent(
continue;
}
const parentRect =
parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent);
const expandedRect = getBoundsOfRects(parentRect, child.rect);
parentExpansions.set(child.parentId, { expandedRect, parent });
}
if (parentExpansions.size > 0) {
parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
// determine the position & dimensions of the parent
const { position } = getNodePositionWithOrigin(parent, parent.origin);
const positionAbsolute = parent.internals.positionAbsolute;
const dimensions = getNodeDimensions(parent);
const origin = parent.origin ?? nodeOrigin;
// determine how much the parent expands by moving the position
const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
// determine how much the parent expands in width and position
const xChange =
expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0;
const yChange =
expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0;
if (xChange > 0 || yChange > 0) {
const newWidth = Math.max(dimensions.width, Math.round(expandedRect.width));
const newHeight = Math.max(dimensions.height, Math.round(expandedRect.height));
const widthChange = (newWidth - dimensions.width) * origin[0];
const heightChange = (newHeight - dimensions.height) * origin[1];
// We need to correct the position of the parent node if the origin is not [0,0]
if (xChange > 0 || yChange > 0 || widthChange || heightChange) {
changes.push({
id: parentId,
type: 'position',
position: {
x: position.x - xChange,
y: position.y - yChange,
x: parent.position.x - xChange + widthChange,
y: parent.position.y - yChange + heightChange,
},
});
// We move all child nodes in the oppsite direction
// so the x,y changes of the parent do not move the children
const childNodes = parentLookup.get(parentId);
childNodes?.forEach((childNode) => {
parentLookup.get(parentId)?.forEach((childNode) => {
if (!children.some((child) => child.id === childNode.id)) {
changes.push({
id: childNode.id,
@@ -213,14 +221,15 @@ export function handleExpandParent(
});
}
if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
// We need to correct the dimensions of the parent node if the origin is not [0,0]
if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) {
changes.push({
id: parentId,
type: 'dimensions',
setAttributes: true,
dimensions: {
width: Math.max(dimensions.width, Math.round(expandedRect.width)),
height: Math.max(dimensions.height, Math.round(expandedRect.height)),
width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0),
},
});
}
@@ -250,16 +259,19 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
// in this array we collect nodes, that might trigger changes (like expanding parent)
const parentExpandChildren: ParentExpandChild[] = [];
updates.forEach((update) => {
for (const update of updates.values()) {
const node = nodeLookup.get(update.id);
if (!node) {
continue;
}
if (node?.hidden) {
if (node.hidden) {
node.internals = {
...node.internals,
handleBounds: undefined,
};
updatedInternals = true;
} else if (node) {
} else {
const dimensions = getDimensions(update.nodeElement);
const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
const doUpdate = !!(
@@ -270,14 +282,19 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
if (doUpdate) {
const nodeBounds = update.nodeElement.getBoundingClientRect();
node.measured = dimensions;
node.internals = {
...node.internals,
positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
handleBounds: {
source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom),
target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom),
},
};
if (node.parentId) {
updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin });
}
updatedInternals = true;
@@ -298,7 +315,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
}
}
}
});
}
if (parentExpandChildren.length > 0) {
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
packages/system/src/xydrag/XYDrag.ts
+1 -2
View File
@@ -124,13 +124,12 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
let nodesBox: Box = { x: 0, y: 0, x2: 0, y2: 0 };
if (dragItems.size > 1 && nodeExtent) {
const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
const rect = getInternalNodesBounds(dragItems);
nodesBox = rectToBox(rect);
}
for (const [id, dragItem] of dragItems) {
let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
if (snapToGrid) {
nextPosition = snapPosition(nextPosition, snapGrid);
}
packages/system/src/xyresizer/XYResizer.ts
+36 -25
View File
@@ -3,7 +3,15 @@ import { select } from 'd3-selection';
import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
import { getPointerPosition } from '../utils';
import type { CoordinateExtent, NodeBase, NodeLookup, NodeOrigin, Transform, XYPosition } from '../types';
import type {
CoordinateExtent,
InternalNodeBase,
NodeBase,
NodeLookup,
NodeOrigin,
Transform,
XYPosition,
} from '../types';
import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';
const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
@@ -100,9 +108,9 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
const controlDirection = getControlDirection(controlPosition);
let node: NodeBase | undefined = undefined;
let node: InternalNodeBase | undefined = undefined;
let childNodes: XYResizerChildChange[] = [];
let parentNode: NodeBase | undefined = undefined; // Needed to fix expandParent
let parentNode: InternalNodeBase | undefined = undefined; // Needed to fix expandParent
let parentExtent: CoordinateExtent | undefined = undefined;
let childExtent: CoordinateExtent | undefined = undefined;
@@ -118,8 +126,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
prevValues = {
width: node.measured?.width ?? 0,
height: node.measured?.height ?? 0,
width: node.measured.width ?? 0,
height: node.measured.height ?? 0,
x: node.position.x ?? 0,
y: node.position.y ?? 0,
};
@@ -132,11 +140,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
};
parentNode = undefined;
if (node.extent === 'parent' || node.expandParent) {
parentNode = nodeLookup.get(node.parentId!);
if (parentNode && node.extent === 'parent') {
parentExtent = nodeToParentExtent(parentNode);
}
if (node.parentId && (node.extent === 'parent' || node.expandParent)) {
parentNode = nodeLookup.get(node.parentId);
parentExtent = parentNode && node.extent === 'parent' ? nodeToParentExtent(parentNode) : undefined;
}
// Collect all child nodes to correct their relative positions when top/left changes
@@ -153,7 +160,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
});
if (child.extent === 'parent' || child.expandParent) {
const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
const extent = nodeToChildExtent(child, node, child.origin ?? nodeOrigin);
if (childExtent) {
childExtent = [
@@ -202,26 +209,15 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
return;
}
if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] === 1) {
change.x = isXPosChange ? x : prevValues.x;
change.y = isYPosChange ? y : prevValues.y;
prevValues.x = change.x;
prevValues.y = change.y;
// Fix expandParent when resizing from top/left
if (parentNode && node.expandParent) {
if (change.x && change.x < 0) {
prevValues.x = 0;
startValues.x = startValues.x - change.x;
}
if (change.y && change.y < 0) {
prevValues.y = 0;
startValues.y = startValues.y - change.y;
}
}
// when top/left changes, correct the relative positions of child nodes
// so that they stay in the same position
if (childNodes.length > 0) {
const xChange = x - prevX;
const yChange = y - prevY;
@@ -243,6 +239,21 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
prevValues.height = change.height;
}
// Fix expandParent when resizing from top/left
if (parentNode && node.expandParent) {
const xLimit = nodeOrigin[0] * (change.width ?? 0);
if (change.x && change.x < xLimit) {
prevValues.x = xLimit;
startValues.x = startValues.x - (change.x - xLimit);
}
const yLimit = nodeOrigin[1] * (change.height ?? 0);
if (change.y && change.y < yLimit) {
prevValues.y = yLimit;
startValues.y = startValues.y - (change.y - yLimit);
}
}
const direction = getResizeDirection({
width: prevValues.width,
prevWidth,