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

refactor(nodes): add computed attr for width/height and absolute position

Browse Source
This commit is contained in:
moklick
2023-11-21 15:06:42 +01:00
parent a27e813cf7
commit d812dbbe53
30 changed files with 177 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+6 -3
View File
@@ -12,7 +12,10 @@ import type { MiniMapNodes, GetMiniMapNodeAttribute } from './types';
declare const window: any;
const selector = (s: ReactFlowState) => s.nodeOrigin;
const selectorNodes = (s: ReactFlowState) => s.nodes.filter((node) => !node.hidden && node.width && node.height);
const selectorNodes = (s: ReactFlowState) =>
s.nodes.filter(
(node) => !node.hidden && (node.computed?.width || node.width) && (node.computed?.height || node.height)
);
const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
function MiniMapNodes({
@@ -44,8 +47,8 @@ function MiniMapNodes({
key={node.id}
x={x}
y={y}
width={node.width!}
height={node.height!}
width={node.computed?.width ?? node.width ?? 0}
height={node.computed?.height ?? node.height ?? 0}
style={node.style}
selected={!!node.selected}
className={nodeClassNameFunc(node)}
packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+2 -2
View File
@@ -10,8 +10,8 @@ import NodeToolbarPortal from './NodeToolbarPortal';
import { NodeToolbarProps } from './types';
const nodeEqualityFn = (a: Node | undefined, b: Node | undefined) =>
a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
a?.computed?.positionAbsolute?.x === b?.computed?.positionAbsolute?.x &&
a?.computed?.positionAbsolute?.y === b?.computed?.positionAbsolute?.y &&
a?.width === b?.width &&
a?.height === b?.height &&
a?.selected === b?.selected &&
packages/react/src/components/ConnectionLine/index.tsx
+4 -4
View File
@@ -65,10 +65,10 @@ const ConnectionLine = ({
}
const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.width ?? 0) / 2;
const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.height ?? 0;
const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromHandleX;
const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromHandleY;
const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
const fromPosition = fromHandle?.position;
const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
packages/react/src/components/Nodes/wrapNode.tsx
+4 -4
View File
@@ -52,8 +52,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
disableKeyboardA11y,
ariaLabel,
rfId,
sizeWidth,
sizeHeight,
width,
height,
}: WrapNodeProps) => {
const store = useStoreApi();
const nodeRef = useRef<HTMLDivElement>(null);
@@ -186,8 +186,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
pointerEvents: hasPointerEvents ? 'all' : 'none',
visibility: initialized ? 'visible' : 'hidden',
width: sizeWidth,
height: sizeHeight,
width,
height,
...style,
}}
data-id={id}
packages/react/src/container/NodeRenderer/index.tsx
+7 -7
View File
@@ -91,19 +91,19 @@ const NodeRenderer = (props: NodeRendererProps) => {
const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
const clampedPosition = props.nodeExtent
? clampPosition(node.positionAbsolute, props.nodeExtent)
: node.positionAbsolute;
? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
: node.computed?.positionAbsolute;
const posX = clampedPosition?.x ?? 0;
const posY = clampedPosition?.y ?? 0;
const posOrigin = getPositionWithOrigin({
x: posX,
y: posY,
width: node.width ?? 0,
height: node.height ?? 0,
width: node.computed?.width ?? node.width ?? 0,
height: node.computed?.height ?? node.height ?? 0,
origin: node.origin || props.nodeOrigin,
});
const initialized = (!!node.width && !!node.height) || (!!node.size?.width && !!node.size?.height);
const initialized = (!!node.computed?.width && !!node.computed?.height) || (!!node.width && !!node.height);
return (
<NodeComponent
@@ -111,8 +111,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
id={node.id}
className={node.className}
style={node.style}
sizeWidth={node.size?.width}
sizeHeight={node.size?.height}
width={node.width ?? undefined}
height={node.height ?? undefined}
type={nodeType}
data={node.data}
sourcePosition={node.sourcePosition || Position.Bottom}
packages/react/src/hooks/useReactFlow.ts
+1 -1
View File
@@ -206,7 +206,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}
return (nodes || store.getState().nodes).filter((n) => {
if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
return false;
}
packages/react/src/hooks/useUpdateNodePositions.ts
+9 -3
View File
@@ -23,8 +23,11 @@ function useUpdateNodePositions() {
const yDiff = params.y * yVelo * factor;
const nodeUpdates = selectedNodes.map((node) => {
if (node.positionAbsolute) {
let nextPosition = { x: node.positionAbsolute.x + xDiff, y: node.positionAbsolute.y + yDiff };
if (node.computed?.positionAbsolute) {
let nextPosition = {
x: node.computed?.positionAbsolute.x + xDiff,
y: node.computed?.positionAbsolute.y + yDiff,
};
if (snapToGrid) {
nextPosition = snapPosition(nextPosition, snapGrid);
@@ -40,7 +43,10 @@ function useUpdateNodePositions() {
);
node.position = position;
node.positionAbsolute = positionAbsolute;
if (!node.computed) {
node.computed = {};
}
node.computed.positionAbsolute = positionAbsolute;
}
return node;
packages/react/src/store/index.ts
+5 -2
View File
@@ -147,7 +147,7 @@ const createRFStore = ({
};
if (positionChanged) {
change.positionAbsolute = node.positionAbsolute;
change.positionAbsolute = node.computed?.positionAbsolute;
change.position = node.position;
}
@@ -276,7 +276,10 @@ const createRFStore = ({
return {
...node,
positionAbsolute,
computed: {
...node.computed,
positionAbsolute,
},
};
}),
});
packages/react/src/store/initialState.ts
+1 -5
View File
@@ -28,11 +28,7 @@ const getInitialState = ({
let transform: Transform = [0, 0, 1];
if (fitView && width && height) {
const nodesWithDimensions = nextNodes.map((node) => ({
...node,
width: node.size?.width,
height: node.size?.height,
}));
const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
transform = [x, y, zoom];
packages/react/src/types/nodes.ts
+2 -2
View File
@@ -40,6 +40,6 @@ export type WrapNodeProps<NodeData = any> = Pick<
noPanClassName: string;
rfId: string;
disableKeyboardA11y: boolean;
sizeWidth?: number;
sizeHeight?: number;
width?: number;
height?: number;
};
packages/react/src/utils/changes.ts
+18 -9
View File
@@ -5,14 +5,17 @@ export function handleParentExpand(res: any[], updateItem: any) {
const parent = res.find((e) => e.id === updateItem.parentNode);
if (parent) {
const extendWidth = updateItem.position.x + updateItem.width - parent.width;
const extendHeight = updateItem.position.y + updateItem.height - parent.height;
if (!parent.computed) {
parent.computed = {};
}
const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
parent.style = { ...parent.style } || {};
parent.style.width = parent.style.width ?? parent.width;
parent.style.height = parent.style.height ?? parent.height;
parent.style.width = parent.style.width ?? parent.computed.width;
parent.style.height = parent.style.height ?? parent.computed.height;
if (extendWidth > 0) {
parent.style.width += extendWidth;
@@ -36,8 +39,8 @@ export function handleParentExpand(res: any[], updateItem: any) {
updateItem.position.y = 0;
}
parent.width = parent.style.width;
parent.height = parent.style.height;
parent.computed.width = parent.style.width;
parent.computed.height = parent.style.height;
}
}
}
@@ -87,7 +90,10 @@ function applyChanges(changes: any[], elements: any[]): any[] {
}
if (typeof currentChange.positionAbsolute !== 'undefined') {
updateItem.positionAbsolute = currentChange.positionAbsolute;
if (!updateItem.computed) {
updateItem.computed = {};
}
updateItem.computed.positionAbsolute = currentChange.positionAbsolute;
}
if (typeof currentChange.dragging !== 'undefined') {
@@ -101,8 +107,11 @@ function applyChanges(changes: any[], elements: any[]): any[] {
}
case 'dimensions': {
if (typeof currentChange.dimensions !== 'undefined') {
updateItem.width = currentChange.dimensions.width;
updateItem.height = currentChange.dimensions.height;
if (!updateItem.computed) {
updateItem.computed = {};
}
updateItem.computed.width = currentChange.dimensions.width;
updateItem.computed.height = currentChange.dimensions.height;
}
if (typeof currentChange.updateStyle !== 'undefined') {