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

refactor(libs) add width, height and positionAbsolute props to NodeProps

Browse Source
This commit is contained in:
moklick
2023-11-23 13:50:28 +01:00
parent 38b5051179
commit 1dfff1bf5b
16 changed files with 63 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const sourceHandleStyleB: CSSProperties = {
left: 'auto',
};
const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
const CustomNode: FC<NodeProps> = ({ data, positionAbsolute }) => {
return (
<>
<Handle type="target" position={Position.Top} />
@@ -18,7 +18,7 @@ const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
<div>
Position:{' '}
<strong>
{xPos.toFixed(2)},{yPos.toFixed(2)}
{positionAbsolute.x.toFixed(2)},{positionAbsolute.y.toFixed(2)}
</strong>
</div>
</div>
examples/react/src/examples/Subflow/DebugNode.tsx
+2 -2
View File
@@ -11,13 +11,13 @@ const idStyle: CSSProperties = {
left: 2,
};
const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsolute, id }) => {
return (
<>
<Handle type="target" position={Position.Top} />
<div style={idStyle}>{id}</div>
<div style={infoStyle}>
x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
</div>
<Handle type="source" position={Position.Bottom} />
</>
examples/svelte/src/routes/examples/overview/CustomNode.svelte
+3 -4
View File
@@ -1,16 +1,15 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
type $$Props = NodeProps;
export let data: { label: string } = { label: 'Node' };
export let xPos: number = 0;
export let yPos: number = 0;
export let positionAbsolute: XYPosition = { x: 0, y: 0 };
</script>
<div class="custom">
<div>{data.label}</div>
<div>{~~xPos}, {~~yPos}</div>
<div>{~~positionAbsolute.x}, {~~positionAbsolute.y}</div>
<Handle type="target" position={Position.Top} />
examples/svelte/src/routes/examples/subflows/DebugNode.svelte
+3 -11
View File
@@ -1,24 +1,16 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
type $$Props = NodeProps;
export let id: string;
export let xPos: number = 0;
export let yPos: number = 0;
export let positionAbsolute: XYPosition = { x: 0, y: 0 };
export let zIndex: number = 0;
</script>
<Handle type="target" position={Position.Top} />
<div>{id}</div>
<div>
x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
</div>
<Handle type="source" position={Position.Bottom} />
<style>
.custom {
background: #ffcc00;
padding: 10px;
}
</style>
packages/react/src/components/Nodes/wrapNode.tsx
+4 -2
View File
@@ -52,6 +52,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
disableKeyboardA11y,
ariaLabel,
rfId,
positionAbsolute,
width,
height,
}: WrapNodeProps) => {
@@ -209,8 +210,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
id={id}
data={data}
type={type}
xPos={xPos}
yPos={yPos}
width={width}
height={height}
positionAbsolute={positionAbsolute}
selected={selected}
isConnectable={isConnectable}
sourcePosition={sourcePosition}
packages/react/src/container/NodeRenderer/index.tsx
+1
View File
@@ -122,6 +122,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
yPos={posY}
xPosOrigin={posOrigin.x}
yPosOrigin={posOrigin.y}
positionAbsolute={clampedPosition || { x: 0, y: 0 }}
onClick={props.onNodeClick}
onMouseEnter={props.onNodeMouseEnter}
onMouseMove={props.onNodeMouseMove}
packages/react/src/types/nodes.ts
+2 -1
View File
@@ -1,5 +1,5 @@
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import type { NodeBase } from '@xyflow/system';
import type { NodeBase, XYPosition } from '@xyflow/system';
export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
NodeData,
@@ -24,6 +24,7 @@ export type WrapNodeProps<NodeData = any> = Pick<
yPos: number;
xPosOrigin: number;
yPosOrigin: number;
positionAbsolute: XYPosition;
initialized: boolean;
isSelectable: boolean;
isDraggable: boolean;
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+3 -2
View File
@@ -191,8 +191,9 @@
{dragging}
{dragHandle}
isConnectable={connectable}
xPos={positionX}
yPos={positionY}
positionAbsolute={{ x: positionX, y: positionY }}
{width}
{height}
on:connectstart
on:connect
on:connectend
packages/svelte/src/lib/components/NodeWrapper/types.ts
+2 -2
View File
@@ -11,14 +11,14 @@ export type NodeWrapperProps = Pick<
| 'selected'
| 'selectable'
| 'style'
| 'width'
| 'height'
| 'type'
| 'sourcePosition'
| 'targetPosition'
| 'dragHandle'
| 'hidden'
> & {
width?: number;
height?: number;
type: string;
positionX: number;
positionY: number;
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+9 -4
View File
@@ -11,24 +11,29 @@
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let positionAbsolute: $$Props['positionAbsolute'] = {
x: 0,
y: 0
};
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
width;
height;
selected;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
positionAbsolute;
isConnectable;
</script>
packages/svelte/src/lib/components/nodes/GroupNode.svelte
+9 -4
View File
@@ -5,6 +5,8 @@
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let data: $$Props['data'] = {};
export let selected: $$Props['selected'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
@@ -13,12 +15,16 @@
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let positionAbsolute: $$Props['positionAbsolute'] = {
x: 0,
y: 0
};
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
width;
height;
data;
selected;
sourcePosition;
@@ -27,7 +33,6 @@
zIndex;
dragging;
dragHandle;
xPos;
yPos;
positionAbsolute;
isConnectable;
</script>
packages/svelte/src/lib/components/nodes/InputNode.svelte
+9 -4
View File
@@ -10,26 +10,31 @@
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let positionAbsolute: $$Props['positionAbsolute'] = {
x: 0,
y: 0
};
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
width;
height;
selected;
targetPosition;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
positionAbsolute;
isConnectable;
</script>
packages/svelte/src/lib/components/nodes/OutputNode.svelte
+6 -4
View File
@@ -10,26 +10,28 @@
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let positionAbsolute: $$Props['positionAbsolute'] = { x: 0, y: 0 };
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
width;
height;
selected;
sourcePosition;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
positionAbsolute;
isConnectable;
</script>
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+3 -3
View File
@@ -68,14 +68,14 @@
isParent={!!node[internalsSymbol]?.isParent}
style={node.style}
class={node.class}
type={node.type || 'default'}
type={node.type ?? 'default'}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
dragging={node.dragging}
zIndex={node[internalsSymbol]?.z ?? 0}
dragHandle={node.dragHandle}
width={node.width}
height={node.height}
width={node.width ?? undefined}
height={node.height ?? undefined}
initialized={(!!node.computed?.width && !!node.computed?.height) ||
(!!node.width && !!node.height)}
{resizeObserver}
packages/system/src/types/nodes.ts
+3 -2
View File
@@ -52,8 +52,9 @@ export type NodeProps<T = any> = {
selected: NodeBase['selected'];
isConnectable: NodeBase['connectable'];
zIndex: NodeBase['zIndex'];
xPos: number;
yPos: number;
positionAbsolute: XYPosition;
width?: number;
height?: number;
dragging: boolean;
targetPosition?: Position;
sourcePosition?: Position;
packages/system/src/utils/graph.ts
+2 -2
View File
@@ -254,8 +254,8 @@ export function calcNextPosition<NodeType extends NodeBase>(
? [
[parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
[
parentPos.x + parentNode.computed.width - nodeWidth + nodeWidth * currNodeOrigin[0],
parentPos.y + parentNode.computed.height - nodeHeight + nodeHeight * currNodeOrigin[1],
parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
],
]
: currentExtent;