File size: 1,863 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script>import { createEventDispatcher } from 'svelte';
import { getInternalNodesBounds, isNumeric } from '@xyflow/system';
import { useStore } from '../../store';
import { Selection } from '../Selection';
import drag from '../../actions/drag';
const store = useStore();
const { selectionRectMode, nodes, nodeLookup } = store;
const dispatch = createEventDispatcher();
let bounds = null;
$: if ($selectionRectMode === 'nodes') {
bounds = getInternalNodesBounds($nodeLookup, { filter: (node) => !!node.selected });
$nodes;
}
function onContextMenu(event) {
const selectedNodes = $nodes.filter((n) => n.selected);
dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
}
function onClick(event) {
const selectedNodes = $nodes.filter((n) => n.selected);
dispatch('selectionclick', { nodes: selectedNodes, event });
}
</script>
{#if $selectionRectMode === 'nodes' && bounds && isNumeric(bounds.x) && isNumeric(bounds.y)}
<div
class="selection-wrapper nopan"
style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
use:drag={{
disabled: false,
store,
onDrag: (event, _, __, nodes) => {
dispatch('nodedrag', { event, targetNode: null, nodes });
},
onDragStart: (event, _, __, nodes) => {
dispatch('nodedragstart', { event, targetNode: null, nodes });
},
onDragStop: (event, _, __, nodes) => {
dispatch('nodedragstop', { event, targetNode: null, nodes });
}
}}
on:contextmenu={onContextMenu}
on:click={onClick}
role="button"
tabindex="-1"
on:keyup={() => {}}
>
<Selection width="100%" height="100%" x={0} y={0} />
</div>
{/if}
<style>
.selection-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 7;
pointer-events: all;
}
</style>
|