feat(utils): add vanilla drag and panzoom (#3108)
* refactor(panzoom): create vanilla helper * feat(svelte): add interaction example * refactor(panzoom): cleanup * Update function-runner.ts * refactor(panzoom): cleanup * refactor(panzoom): rename functions * feat(utils): add vanilla drag helper (#3107) * feat(utils): add vanilla drag helper * refactor(drag): cleanup * refactor(drag): cleanup * chore(packages): cleanup * refactor(panzoom): cleanup and simplify
This commit is contained in:
Moritz Klack
@@ -0,0 +1,215 @@
|
||||
<script lang="ts">
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Panel,
|
||||
createNodes,
|
||||
createEdges,
|
||||
PanOnScrollMode,
|
||||
Minimap,
|
||||
type OnMoveEnd,
|
||||
type Node,
|
||||
type Edge,
|
||||
} from '../../lib/index';
|
||||
|
||||
const nodes = createNodes([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Node 1' },
|
||||
position: { x: 250, y: 5 },
|
||||
},
|
||||
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
|
||||
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
|
||||
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
|
||||
]);
|
||||
|
||||
const edges = createEdges([
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{ id: 'e1-3', source: '1', target: '3' },
|
||||
]);
|
||||
|
||||
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
|
||||
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
|
||||
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
|
||||
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
|
||||
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
|
||||
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
|
||||
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
|
||||
const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
|
||||
|
||||
|
||||
let isSelectable = false;
|
||||
let isDraggable = false;
|
||||
let isConnectable = false;
|
||||
let zoomOnScroll = false;
|
||||
let zoomOnPinch = false;
|
||||
let panOnScroll = false;
|
||||
let panOnScrollMode = PanOnScrollMode.Free;
|
||||
let zoomOnDoubleClick = false;
|
||||
let panOnDrag = true;
|
||||
let captureZoomClick = false;
|
||||
let captureZoomScroll = false;
|
||||
let captureElementClick = false;
|
||||
</script>
|
||||
|
||||
|
||||
<SvelteFlowProvider
|
||||
{nodes}
|
||||
{edges}
|
||||
>
|
||||
<SvelteFlow
|
||||
elementsSelectable={isSelectable}
|
||||
nodesConnectable={isConnectable}
|
||||
nodesDraggable={isDraggable}
|
||||
zoomOnScroll={zoomOnScroll}
|
||||
zoomOnPinch={zoomOnPinch}
|
||||
panOnScroll={panOnScroll}
|
||||
panOnScrollMode={panOnScrollMode}
|
||||
zoomOnDoubleClick={zoomOnDoubleClick}
|
||||
panOnDrag={panOnDrag}
|
||||
onMoveEnd={onMoveEnd}
|
||||
>
|
||||
<Minimap />
|
||||
<Controls />
|
||||
|
||||
<Panel position="top-right">
|
||||
<div>
|
||||
<label for="draggable">
|
||||
nodesDraggable
|
||||
<input
|
||||
id="draggable"
|
||||
type="checkbox"
|
||||
bind:checked={isDraggable}
|
||||
class="react-flow__draggable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="connectable">
|
||||
nodesConnectable
|
||||
<input
|
||||
id="connectable"
|
||||
type="checkbox"
|
||||
bind:checked={isConnectable}
|
||||
class="react-flow__connectable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="selectable">
|
||||
elementsSelectable
|
||||
<input
|
||||
id="selectable"
|
||||
type="checkbox"
|
||||
bind:checked={isSelectable}
|
||||
class="react-flow__selectable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomonscroll">
|
||||
zoomOnScroll
|
||||
<input
|
||||
id="zoomonscroll"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnScroll}
|
||||
class="react-flow__zoomonscroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomonpinch">
|
||||
zoomOnPinch
|
||||
<input
|
||||
id="zoomonpinch"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnPinch}
|
||||
class="react-flow__zoomonpinch"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panonscroll">
|
||||
panOnScroll
|
||||
<input
|
||||
id="panonscroll"
|
||||
type="checkbox"
|
||||
bind:checked={panOnScroll}
|
||||
class="react-flow__panonscroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panonscrollmode">
|
||||
panOnScrollMode
|
||||
<select
|
||||
id="panonscrollmode"
|
||||
bind:value={panOnScrollMode}
|
||||
on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
|
||||
class="react-flow__panonscrollmode"
|
||||
>
|
||||
<option value="free">free</option>
|
||||
<option value="horizontal">horizontal</option>
|
||||
<option value="vertical">vertical</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomondbl">
|
||||
zoomOnDoubleClick
|
||||
<input
|
||||
id="zoomondbl"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnDoubleClick}
|
||||
class="react-flow__zoomondbl"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panondrag">
|
||||
panOnDrag
|
||||
<input
|
||||
id="panondrag"
|
||||
type="checkbox"
|
||||
bind:checked={panOnDrag}
|
||||
class="react-flow__panondrag"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="capturezoompaneclick">
|
||||
capture onPaneClick
|
||||
<input
|
||||
id="capturezoompaneclick"
|
||||
type="checkbox"
|
||||
bind:checked={captureZoomClick}
|
||||
class="react-flow__capturezoompaneclick"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="capturezoompanescroll">
|
||||
capture onPaneScroll
|
||||
<input
|
||||
id="capturezoompanescroll"
|
||||
type="checkbox"
|
||||
bind:checked={captureZoomScroll}
|
||||
class="react-flow__capturezoompanescroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="captureelementclick">
|
||||
capture onElementClick
|
||||
<input
|
||||
id="captureelementclick"
|
||||
type="checkbox"
|
||||
bind:checked={captureElementClick}
|
||||
class="react-flow__captureelementclick"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Panel>
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
@@ -11,8 +11,8 @@
|
||||
type Edge
|
||||
} from '../../lib/index';
|
||||
|
||||
const yNodes = 10;
|
||||
const xNodes = 10;
|
||||
const yNodes = 20;
|
||||
const xNodes = 20;
|
||||
|
||||
const nodeItems: Node[] = [];
|
||||
const edgeItems: Edge[] = [];
|
||||
@@ -55,6 +55,7 @@
|
||||
>
|
||||
<SvelteFlow
|
||||
fitView
|
||||
minZoom={0.2}
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
|
||||
Reference in New Issue
Block a user