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

fix(svelte): selection for sub flows

Browse Source
This commit is contained in:
moklick
2024-05-06 11:47:45 +02:00
parent d562818f4c
commit de86c64128
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+11 -5
View File
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { getNodesBounds } from '@xyflow/system';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { getInternalNodesBounds, isNumeric, type Rect } from '@xyflow/system';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import { Selection } from '$lib/components/Selection'; import { Selection } from '$lib/components/Selection';
@@ -8,7 +8,7 @@
import type { Node, NodeEventMap } from '$lib/types'; import type { Node, NodeEventMap } from '$lib/types';
const store = useStore(); const store = useStore();
const { selectionRectMode, nodes } = store; const { selectionRectMode, nodes, nodeLookup } = store;
const dispatch = createEventDispatcher< const dispatch = createEventDispatcher<
NodeEventMap & { NodeEventMap & {
@@ -17,19 +17,25 @@
} }
>(); >();
$: selectedNodes = $nodes.filter((n) => n.selected); let bounds: Rect | null = null;
$: bounds = getNodesBounds(selectedNodes);
$: if ($selectionRectMode === 'nodes') {
bounds = getInternalNodesBounds($nodeLookup, { filter: (node) => !!node.selected });
$nodes;
}
function onContextMenu(event: MouseEvent | TouchEvent) { function onContextMenu(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected);
dispatch('selectioncontextmenu', { nodes: selectedNodes, event }); dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
} }
function onClick(event: MouseEvent | TouchEvent) { function onClick(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected);
dispatch('selectionclick', { nodes: selectedNodes, event }); dispatch('selectionclick', { nodes: selectedNodes, event });
} }
</script> </script>
{#if selectedNodes && $selectionRectMode === 'nodes'} {#if $selectionRectMode === 'nodes' && bounds && isNumeric(bounds.x) && isNumeric(bounds.y)}
<div <div
class="selection-wrapper nopan" class="selection-wrapper nopan"
style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)" style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"