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

Merge branch 'next' into svelte-edge-type-change

Browse Source
This commit is contained in:
Moritz Klack
2024-04-03 16:57:47 +02:00
committed by GitHub
parent 6857b90bd7 989bbf2ec6
commit 60bb72d592
21 changed files with 136 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+44 -40
View File
@@ -1,7 +1,7 @@
<svelte:options immutable />
<script lang="ts">
import { createEventDispatcher, setContext, onDestroy } from 'svelte';
import { setContext, onDestroy } from 'svelte';
import { get, writable } from 'svelte/store';
import cc from 'classcat';
import { errorMessages, Position } from '@xyflow/system';
@@ -10,40 +10,39 @@
import { useStore } from '$lib/store';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import type { NodeWrapperProps } from './types';
import type { Node } from '$lib/types';
import { getNodeInlineStyleDimensions } from './utils';
import { createNodeEventDispatcher } from '$lib';
interface $$Props extends NodeWrapperProps {}
export let node: NodeWrapperProps['node'];
export let id: NodeWrapperProps['id'];
export let data: NodeWrapperProps['data'] = {};
export let selected: NodeWrapperProps['selected'] = false;
export let draggable: NodeWrapperProps['draggable'] = undefined;
export let selectable: NodeWrapperProps['selectable'] = undefined;
export let connectable: NodeWrapperProps['connectable'] = true;
export let hidden: NodeWrapperProps['hidden'] = false;
export let node: $$Props['node'];
export let id: $$Props['id'];
export let data: $$Props['data'] = {};
export let selected: $$Props['selected'] = false;
export let draggable: $$Props['draggable'] = undefined;
export let selectable: $$Props['selectable'] = undefined;
export let connectable: $$Props['connectable'] = true;
export let hidden: $$Props['hidden'] = false;
export let dragging: boolean = false;
export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
export let style: NodeWrapperProps['style'] = undefined;
export let type: NodeWrapperProps['type'] = 'default';
export let isParent: NodeWrapperProps['isParent'] = false;
export let positionX: NodeWrapperProps['positionX'];
export let positionY: NodeWrapperProps['positionY'];
export let positionOriginX: NodeWrapperProps['positionOriginX'];
export let positionOriginY: NodeWrapperProps['positionOriginY'];
export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
export let zIndex: NodeWrapperProps['zIndex'];
export let computedWidth: NodeWrapperProps['computedWidth'] = undefined;
export let computedHeight: NodeWrapperProps['computedHeight'] = undefined;
export let initialWidth: NodeWrapperProps['initialWidth'] = undefined;
export let initialHeight: NodeWrapperProps['initialHeight'] = undefined;
export let width: NodeWrapperProps['width'] = undefined;
export let height: NodeWrapperProps['height'] = undefined;
export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
export let initialized: NodeWrapperProps['initialized'] = false;
export let resizeObserver: $$Props['resizeObserver'] = null;
export let style: $$Props['style'] = undefined;
export let type: $$Props['type'] = 'default';
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'];
export let computedWidth: $$Props['computedWidth'] = undefined;
export let computedHeight: $$Props['computedHeight'] = undefined;
export let initialWidth: $$Props['initialWidth'] = undefined;
export let initialHeight: $$Props['initialHeight'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let initialized: $$Props['initialized'] = false;
let className: string = '';
export { className as class };
@@ -57,7 +56,15 @@
} = store;
let nodeRef: HTMLDivElement;
let prevNodeRef: HTMLDivElement;
let prevNodeRef: HTMLDivElement | null = null;
const nodeTypeValid = !!$nodeTypes[nodeType];
if (!nodeTypeValid) {
console.warn('003', errorMessages['error003'](type!));
}
const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
const dispatchNodeEvent = createNodeEventDispatcher();
const connectableStore = writable(connectable);
let prevType: string | undefined = undefined;
@@ -121,20 +128,17 @@
setContext('svelteflow__node_connectable', connectableStore);
$: {
if (nodeRef) {
if (!prevNodeRef) {
resizeObserver?.observe(nodeRef);
prevNodeRef = nodeRef;
} else if (prevNodeRef !== nodeRef || (!computedWidth && !computedHeight)) {
resizeObserver?.unobserve(prevNodeRef);
resizeObserver?.observe(nodeRef);
prevNodeRef = nodeRef;
}
if (resizeObserver && nodeRef !== prevNodeRef) {
prevNodeRef && resizeObserver.unobserve(prevNodeRef);
nodeRef && resizeObserver.observe(nodeRef);
prevNodeRef = nodeRef;
}
}
onDestroy(() => {
resizeObserver?.unobserve(nodeRef);
if (prevNodeRef) {
resizeObserver?.unobserve(prevNodeRef);
}
});
function onSelectNodeHandler(event: MouseEvent | TouchEvent) {