refactor(svelte): node wrapper position types

This commit is contained in:
moklick
2023-11-21 12:59:12 +01:00
parent b8affc1c82
commit 8a5dd652b3
3 changed files with 15 additions and 10 deletions
@@ -27,8 +27,10 @@
export let style: NodeWrapperProps['style'] = undefined; export let style: NodeWrapperProps['style'] = undefined;
export let type: NodeWrapperProps['type'] = 'default'; export let type: NodeWrapperProps['type'] = 'default';
export let isParent: NodeWrapperProps['isParent'] = false; export let isParent: NodeWrapperProps['isParent'] = false;
export let positionAbsolute: NodeWrapperProps['positionAbsolute'] = undefined; export let positionX: NodeWrapperProps['positionX'];
export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined; export let positionY: NodeWrapperProps['positionY'];
export let positionOriginX: NodeWrapperProps['positionOriginX'];
export let positionOriginY: NodeWrapperProps['positionOriginY'];
export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined; export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
export let targetPosition: NodeWrapperProps['targetPosition'] = undefined; export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
export let zIndex: NodeWrapperProps['zIndex']; export let zIndex: NodeWrapperProps['zIndex'];
@@ -164,7 +166,7 @@
class:nopan={draggable} class:nopan={draggable}
class:parent={isParent} class:parent={isParent}
style:z-index={zIndex} style:z-index={zIndex}
style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)" style:transform="translate({positionOriginX}px, {positionOriginY}px)"
style:visibility={initialized ? 'visible' : 'hidden'} style:visibility={initialized ? 'visible' : 'hidden'}
style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height
? `;height=${node.size?.height}px;` ? `;height=${node.size?.height}px;`
@@ -187,8 +189,8 @@
{dragging} {dragging}
{dragHandle} {dragHandle}
isConnectable={connectable} isConnectable={connectable}
xPos={positionAbsolute?.x ?? 0} xPos={positionX}
yPos={positionAbsolute?.y ?? 0} yPos={positionY}
on:connectstart on:connectstart
on:connect on:connect
on:connectend on:connectend
@@ -1,4 +1,3 @@
import type { XYPosition } from '@xyflow/system';
import type { Node } from '$lib/types'; import type { Node } from '$lib/types';
export type NodeWrapperProps = Pick< export type NodeWrapperProps = Pick<
@@ -9,7 +8,6 @@ export type NodeWrapperProps = Pick<
| 'data' | 'data'
| 'draggable' | 'draggable'
| 'dragging' | 'dragging'
| 'positionAbsolute'
| 'selected' | 'selected'
| 'selectable' | 'selectable'
| 'style' | 'style'
@@ -21,7 +19,10 @@ export type NodeWrapperProps = Pick<
| 'dragHandle' | 'dragHandle'
| 'hidden' | 'hidden'
> & { > & {
positionOrigin?: XYPosition; positionX: number;
positionY: number;
positionOriginX: number;
positionOriginY: number;
'on:nodeclick'?: (event: MouseEvent) => void; 'on:nodeclick'?: (event: MouseEvent) => void;
resizeObserver?: ResizeObserver | null; resizeObserver?: ResizeObserver | null;
isParent?: boolean; isParent?: boolean;
@@ -61,8 +61,10 @@
node.connectable || node.connectable ||
($nodesConnectable && typeof node.connectable === 'undefined') ($nodesConnectable && typeof node.connectable === 'undefined')
)} )}
positionAbsolute={node.positionAbsolute} positionX={node.positionAbsolute?.x ?? 0}
positionOrigin={posOrigin} positionY={node.positionAbsolute?.y ?? 0}
positionOriginX={posOrigin.x ?? 0}
positionOriginY={posOrigin.y ?? 0}
isParent={!!node[internalsSymbol]?.isParent} isParent={!!node[internalsSymbol]?.isParent}
style={node.style} style={node.style}
class={node.class} class={node.class}