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

fixed some more stuff

Browse Source
This commit is contained in:
peterkogo
2024-04-10 11:18:30 +02:00
parent 2d1d4717d9
commit 91a642bb9c
9 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
View File

@@ -13,7 +13,7 @@
import '@xyflow/svelte/dist/style.css';
const nodes = writable([
const nodes = writable<Node[]>([
{
id: '1',
type: 'input',
@@ -63,6 +63,7 @@
};
const onDrop = (event: DragEvent) => {
console.log(event);
event.preventDefault();
if (!event.dataTransfer) {
@@ -81,7 +82,8 @@
data: { label: `${type} node` }
};
nodes.update((nds) => nds.concat(newNode));
$nodes.push(newNode);
$nodes = $nodes;
};
$: {

1
examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
View File

@@ -11,6 +11,7 @@
type $$Props = NodeProps;
export let id: $$Props['id'];
$$restProps;
const connections = useHandleConnections({
nodeId: id,

1
examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
View File

@@ -7,6 +7,7 @@
export let data: $$Props['data'];
const { updateNodeData } = useSvelteFlow();
$$restProps;
</script>
<div class="custom">

8
examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
View File

@@ -12,6 +12,8 @@
type $$Props = NodeProps;
export let id: $$Props['id'];
export let data: $$Props['data'];
$$restProps;
const { updateNodeData } = useSvelteFlow();
const connections = useHandleConnections({
@@ -22,8 +24,12 @@
$: nodeData = useNodesData<MyNode>($connections[0]?.source);
$: textNode = isTextNode($nodeData) ? $nodeData : null;
$: console.log(textNode?.data, data);
$: {
updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' });
const input = textNode?.data.text.toUpperCase() ?? '';
updateNodeData(id, { text: input });
console.log('updatedNodeData with', input);
}
</script>

2
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
View File

@@ -20,8 +20,6 @@
$: selectedNodes = $nodes.filter((n) => n.selected);
$: bounds = getNodesBounds(selectedNodes);
$: console.log($nodes);
function onContextMenu(event: MouseEvent | TouchEvent) {
dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
}

2
packages/svelte/src/lib/hooks/useNodesData.ts
View File

@@ -29,7 +29,7 @@ export function useNodesData(nodeIds: any): any {
const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
for (const nodeId of _nodeIds) {
const node = nodeLookup.get(nodeId);
const node = nodeLookup.get(nodeId)?.internals.userNode;
if (node) {
nextNodesData.push({
id: node.id,

49
packages/svelte/src/lib/hooks/useSvelteFlow.ts
View File

@@ -256,17 +256,28 @@ export function useSvelteFlow(): {
nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
options: { replace: boolean } = { replace: false }
) => {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
const node = get(nodeLookup).get(id)?.internals.userNode;
return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
}
if (!node) {
return;
}
return node;
})
);
const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
if (options.replace) {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
}
return node;
})
);
} else {
Object.assign(node, nextNode);
nodes.update((nds) => nds);
}
};
return {
@@ -448,13 +459,21 @@ export function useSvelteFlow(): {
},
updateNode,
updateNodeData: (id, dataUpdate, options) => {
updateNode(id, (node) => {
const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
const node = get(nodeLookup).get(id)?.internals.userNode;
return options?.replace
? { ...node, data: nextData }
: { ...node, data: { ...node.data, ...nextData } };
});
if (!node) {
return;
}
const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
if (options?.replace) {
node.data = nextData;
} else {
node.data = { ...node.data, ...nextData };
}
nodes.update((nds) => nds);
},
viewport
};

4
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
View File

@@ -69,7 +69,7 @@
};
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
const node = $nodeLookup.get(id);
const node = $nodeLookup.get(id)?.internals.userNode;
if (node) {
node.height = change.isHeightChange ? change.height : node.height;
node.width = change.isWidthChange ? change.width : node.width;
@@ -79,7 +79,7 @@
: node.position;
for (const childChange of childChanges) {
const childNode = $nodeLookup.get(childChange.id);
const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
if (childNode) {
childNode.position = childChange.position;
}

15
packages/svelte/src/lib/store/index.ts
View File

@@ -65,20 +65,17 @@ export function createStore({
const nodeLookup = get(store.nodeLookup);
for (const nodeDragItem of nodeDragItems) {
const node = nodeLookup.get(nodeDragItem.id);
const node = nodeLookup.get(nodeDragItem.id)?.internals.userNode;
if (!node) {
continue;
}
const userNode = node.internals.userNode;
userNode.position = nodeDragItem.position;
userNode.dragging = dragging;
// node.internals.positionAbsolute = nodeDragItem.internals.positionAbsolute;
node.position = nodeDragItem.position;
node.dragging = dragging;
}
store.nodes.set(get(store.nodes));
//$nodes = $nodes
};
function updateNodeDimensions(updates: Map<string, NodeDimensionUpdate>) {
@@ -111,11 +108,13 @@ export function createStore({
}
switch (nodeUpdate.type) {
case 'dimensions':
case 'dimensions': {
const measured = { ...node.measured, ...nodeUpdate.dimensions };
node.width = nodeUpdate.dimensions?.width ?? node.width;
node.height = nodeUpdate.dimensions?.height ?? node.height;
// TODO: do we need measured here?
node.measured = measured;
break;
}
case 'position':
node.position = nodeUpdate.position ?? node.position;
break;