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

chore(svelte): use prettier

Browse Source
This commit is contained in:
moklick
2023-06-06 15:46:19 +02:00
parent c4e98dd420
commit 84603bd966
34 changed files with 335 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/Attribution/Attribution.svelte
+7 -3
View File
@@ -8,14 +8,18 @@
export let position: AttributionProps['position'] = 'bottom-right'; export let position: AttributionProps['position'] = 'bottom-right';
</script> </script>
{#if !proOptions?.hideAttribution} {#if !proOptions?.hideAttribution}
<Panel <Panel
position={position} {position}
class="svelte-flow__attribution" class="svelte-flow__attribution"
data-message="Please only hide this attribution when you are subscribed to Svelte Flow Pro: https://pro.reactflow.dev" data-message="Please only hide this attribution when you are subscribed to Svelte Flow Pro: https://pro.reactflow.dev"
> >
<a href="https://reactflow.dev/svelte" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution"> <a
href="https://reactflow.dev/svelte"
target="_blank"
rel="noopener noreferrer"
aria-label="Svelte Flow attribution"
>
Svelte Flow Svelte Flow
</a> </a>
</Panel> </Panel>
packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+2 -2
View File
@@ -18,12 +18,12 @@
<path <path
d={path} d={path}
id={id} {id}
fill="none" fill="none"
class="svelte-flow__edge-path" class="svelte-flow__edge-path"
marker-start={markerStart} marker-start={markerStart}
marker-end={markerEnd} marker-end={markerEnd}
style={style} {style}
/> />
{#if interactionWidth} {#if interactionWidth}
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+3 -9
View File
@@ -30,7 +30,7 @@
export let sourceHandleId: $$Props['sourceHandleId'] = undefined; export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetHandleId: $$Props['targetHandleId'] = undefined; export let targetHandleId: $$Props['targetHandleId'] = undefined;
// @ todo: support edge updates // @ todo: support edge updates
const { edges, edgeTypes, flowId, addSelectedEdges } = useStore(); const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -45,19 +45,13 @@
addSelectedEdges([id]); addSelectedEdges([id]);
} }
const edge = $edges.find(e => e.id === id); const edge = $edges.find((e) => e.id === id);
dispatch('edge:click', edge); dispatch('edge:click', edge);
} }
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<g <g class="svelte-flow__edge" class:animated class:selected data-id={id} on:click={onClick}>
class="svelte-flow__edge"
class:animated
class:selected
data-id={id}
on:click={onClick}
>
<svelte:component <svelte:component
this={edgeComponent} this={edgeComponent}
{id} {id}
packages/svelte/src/lib/components/Handle/Handle.svelte
+3 -3
View File
@@ -38,7 +38,7 @@
addEdge, addEdge,
panBy, panBy,
cancelConnection, cancelConnection,
updateConnection, updateConnection
} = store; } = store;
function dispatchEvent(eventName: string, params?: Connection) { function dispatchEvent(eventName: string, params?: Connection) {
@@ -47,7 +47,7 @@
function onConnectExtended(params: Connection) { function onConnectExtended(params: Connection) {
addEdge(params); addEdge(params);
dispatchEvent('connect', params) dispatchEvent('connect', params);
} }
function onPointerDown(event: MouseEvent | TouchEvent) { function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -69,7 +69,7 @@
cancelConnection, cancelConnection,
panBy, panBy,
onConnect: onConnectExtended, onConnect: onConnectExtended,
getTransform: () => $transform, getTransform: () => $transform
}); });
} }
} }
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+10 -4
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte'; import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
import cc from 'classcat'; import cc from 'classcat';
import { errorMessages, type NodeProps } from '@xyflow/system'; import { errorMessages, type NodeProps } from '@xyflow/system';
@@ -59,7 +58,7 @@
}); });
function dispatchEvent(eventName: string) { function dispatchEvent(eventName: string) {
const node = $nodes.find(n => n.id === id); const node = $nodes.find((n) => n.id === id);
dispatch(eventName, node); dispatch(eventName, node);
} }
@@ -69,13 +68,20 @@
addSelectedNodes([id]); addSelectedNodes([id]);
} }
dispatchEvent('node:click') dispatchEvent('node:click');
} }
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div <div
use:drag={{ nodeId: id, isSelectable: selectable, disabled: false, handleSelector: undefined, noDragClassName: 'nodrag', store }} use:drag={{
nodeId: id,
isSelectable: selectable,
disabled: false,
handleSelector: undefined,
noDragClassName: 'nodrag',
store
}}
bind:this={nodeRef} bind:this={nodeRef}
data-id={id} data-id={id}
class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])} class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
packages/svelte/src/lib/components/edges/BezierEdge.svelte
-1
View File
@@ -28,4 +28,3 @@
interactionWidth={$$props.interactionWidth} interactionWidth={$$props.interactionWidth}
style={$$props.style} style={$$props.style}
/> />
packages/svelte/src/lib/components/edges/StraightEdge.svelte
-1
View File
@@ -26,4 +26,3 @@
interactionWidth={$$props.interactionWidth} interactionWidth={$$props.interactionWidth}
style={$$props.style} style={$$props.style}
/> />
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
-1
View File
@@ -17,4 +17,3 @@
<Handle type="target" position={targetPosition} on:connect:start on:connect on:connect:end /> <Handle type="target" position={targetPosition} on:connect:start on:connect on:connect:end />
{data?.label} {data?.label}
<Handle type="source" position={sourcePosition} on:connect:start on:connect on:connect:end /> <Handle type="source" position={sourcePosition} on:connect:start on:connect on:connect:end />
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
-1
View File
@@ -14,7 +14,6 @@
<MarkerDefinition /> <MarkerDefinition />
</svg> </svg>
<style> <style>
.svelte-flow__edges { .svelte-flow__edges {
width: 100%; width: 100%;
packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+4 -4
View File
@@ -8,19 +8,19 @@
export let width: $$Props['width'] = 12.5; export let width: $$Props['width'] = 12.5;
export let height: $$Props['height'] = 12.5; export let height: $$Props['height'] = 12.5;
export let markerUnits: $$Props['markerUnits'] = 'strokeWidth'; export let markerUnits: $$Props['markerUnits'] = 'strokeWidth';
export let orient: $$Props['orient']= 'auto-start-reverse'; export let orient: $$Props['orient'] = 'auto-start-reverse';
export let color: $$Props['color'] = undefined; export let color: $$Props['color'] = undefined;
export let strokeWidth: $$Props['strokeWidth'] = undefined; export let strokeWidth: $$Props['strokeWidth'] = undefined;
</script> </script>
<marker <marker
class="svelte-flow__arrowhead" class="svelte-flow__arrowhead"
id={id} {id}
markerWidth={`${width}`} markerWidth={`${width}`}
markerHeight={`${height}`} markerHeight={`${height}`}
viewBox="-10 -10 20 20" viewBox="-10 -10 20 20"
markerUnits={markerUnits} {markerUnits}
orient={orient} {orient}
refX="0" refX="0"
refY="0" refY="0"
> >
packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
</script> </script>
<defs> <defs>
{#each $markers as marker(marker.id)} {#each $markers as marker (marker.id)}
<Marker {...marker} /> <Marker {...marker} />
{/each} {/each}
</defs> </defs>
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+10 -3
View File
@@ -5,7 +5,8 @@
import { NodeWrapper } from '$lib/components/NodeWrapper'; import { NodeWrapper } from '$lib/components/NodeWrapper';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(); const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } =
useStore();
const resizeObserver: ResizeObserver | null = const resizeObserver: ResizeObserver | null =
typeof ResizeObserver === 'undefined' typeof ResizeObserver === 'undefined'
@@ -38,8 +39,14 @@
data={node.data} data={node.data}
selected={node.selected} selected={node.selected}
draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))} draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
selectable={!!(node.selectable || ($elementsSelectable && typeof node.selectable === 'undefined'))} selectable={!!(
connectable={!!(node.connectable || ($nodesConnectable && typeof node.connectable === 'undefined'))} node.selectable ||
($elementsSelectable && typeof node.selectable === 'undefined')
)}
connectable={!!(
node.connectable ||
($nodesConnectable && typeof node.connectable === 'undefined')
)}
positionAbsolute={node.positionAbsolute} positionAbsolute={node.positionAbsolute}
positionOrigin={posOrigin} positionOrigin={posOrigin}
isParent={!!node[internalsSymbol]?.isParent} isParent={!!node[internalsSymbol]?.isParent}
packages/svelte/src/lib/container/Pane/Pane.svelte
+2 -3
View File
@@ -30,7 +30,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system'; import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import { getConnectedEdges } from '$lib/utils'; import { getConnectedEdges } from '$lib/utils';
@@ -52,7 +52,7 @@
selectionRectMode, selectionRectMode,
selectionKeyPressed, selectionKeyPressed,
selectionMode, selectionMode,
unselectNodesAndEdges, unselectNodesAndEdges
} = useStore(); } = useStore();
let container: HTMLDivElement; let container: HTMLDivElement;
@@ -166,7 +166,6 @@
dispatch('pane:contextmenu', event); dispatch('pane:contextmenu', event);
}; };
</script> </script>
<div <div
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+7 -7
View File
@@ -25,7 +25,7 @@
export let fitView: $$Props['fitView'] = undefined; export let fitView: $$Props['fitView'] = undefined;
export let minZoom: $$Props['minZoom'] = undefined; export let minZoom: $$Props['minZoom'] = undefined;
export let maxZoom: $$Props['maxZoom'] = undefined; export let maxZoom: $$Props['maxZoom'] = undefined;
export let initialViewport: Viewport = { x:0, y: 0, zoom: 1 }; export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
export let nodeTypes: $$Props['nodeTypes'] = undefined; export let nodeTypes: $$Props['nodeTypes'] = undefined;
export let edgeTypes: $$Props['edgeTypes'] = undefined; export let edgeTypes: $$Props['edgeTypes'] = undefined;
export let selectionKey: $$Props['selectionKey'] = undefined; export let selectionKey: $$Props['selectionKey'] = undefined;
@@ -66,8 +66,8 @@
store.height.set(height); store.height.set(height);
store.domNode.set(domNode); store.domNode.set(domNode);
store.syncNodeStores(nodes) store.syncNodeStores(nodes);
store.syncEdgeStores(edges) store.syncEdgeStores(edges);
if (fitView !== undefined) { if (fitView !== undefined) {
store.fitViewOnInit.set(fitView); store.fitViewOnInit.set(fitView);
@@ -78,12 +78,12 @@
edgeTypes, edgeTypes,
minZoom, minZoom,
maxZoom, maxZoom,
translateExtent, translateExtent
}); });
return () => { return () => {
store.reset(); store.reset();
} };
}); });
// this updates the store for simple changes // this updates the store for simple changes
@@ -99,10 +99,10 @@
nodesDraggable, nodesDraggable,
nodesConnectable, nodesConnectable,
elementsSelectable, elementsSelectable,
isValidConnection, isValidConnection
}; };
updateStoreByKeys(store, updatableProps); updateStoreByKeys(store, updatableProps);
} }
$: updateStore(store, { $: updateStore(store, {
packages/svelte/src/lib/container/SvelteFlow/utils.ts
+1
View File
@@ -64,6 +64,7 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr
getKeys(keys).forEach((prop) => { getKeys(keys).forEach((prop) => {
const update = keys[prop]; const update = keys[prop];
if (update !== undefined) { if (update !== undefined) {
// @todo: how to fix this TS error?
// @ts-ignore // @ts-ignore
store[prop].set(update); store[prop].set(update);
} }
packages/svelte/src/lib/container/Zoom/Zoom.svelte
+33 -30
View File
@@ -12,12 +12,12 @@
export let onMove: $$Props['onMove'] = undefined; export let onMove: $$Props['onMove'] = undefined;
export let onMoveEnd: $$Props['onMoveEnd'] = undefined; export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
export let panOnScrollMode: $$Props['panOnScrollMode']; export let panOnScrollMode: $$Props['panOnScrollMode'];
export let preventScrolling: $$Props['preventScrolling'];; export let preventScrolling: $$Props['preventScrolling'];
export let zoomOnScroll: $$Props['zoomOnScroll'];; export let zoomOnScroll: $$Props['zoomOnScroll'];
export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];; export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];
export let zoomOnPinch: $$Props['zoomOnPinch'];; export let zoomOnPinch: $$Props['zoomOnPinch'];
export let panOnDrag: $$Props['panOnDrag']; export let panOnDrag: $$Props['panOnDrag'];
export let panOnScroll: $$Props['panOnScroll'];; export let panOnScroll: $$Props['panOnScroll'];
const { const {
transform, transform,
@@ -33,31 +33,34 @@
$: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 }; $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
</script> </script>
<div class="svelte-flow__zoom" use:zoom={{ <div
transform, class="svelte-flow__zoom"
minZoom: $minZoom, use:zoom={{
maxZoom: $maxZoom, transform,
initialViewport: viewPort, minZoom: $minZoom,
dragging, maxZoom: $maxZoom,
panZoom, initialViewport: viewPort,
onPanZoomStart: onMoveStart, dragging,
onPanZoom: onMove, panZoom,
onPanZoomEnd: onMoveEnd, onPanZoomStart: onMoveStart,
zoomOnScroll, onPanZoom: onMove,
zoomOnDoubleClick, onPanZoomEnd: onMoveEnd,
zoomOnPinch, zoomOnScroll,
panOnScroll, zoomOnDoubleClick,
panOnDrag, zoomOnPinch,
panOnScrollSpeed: 0.5, panOnScroll,
panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free, panOnDrag,
zoomActivationKeyPressed: false, panOnScrollSpeed: 0.5,
preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true, panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
noPanClassName: 'nopan', zoomActivationKeyPressed: false,
noWheelClassName: 'nowheel', preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
userSelectionActive: $selectionKeyPressed, noPanClassName: 'nopan',
translateExtent: $translateExtent, noWheelClassName: 'nowheel',
lib: $lib userSelectionActive: $selectionKeyPressed,
}}> translateExtent: $translateExtent,
lib: $lib
}}
>
<slot /> <slot />
</div> </div>
packages/svelte/src/lib/plugins/Background/Background.svelte
+5 -1
View File
@@ -47,7 +47,11 @@
: [patternDimensions[0] / 2, patternDimensions[1] / 2]; : [patternDimensions[0] / 2, patternDimensions[1] / 2];
</script> </script>
<svg class={cc(['svelte-flow__background', className])} {style} data-testid="svelte-flow__background"> <svg
class={cc(['svelte-flow__background', className])}
{style}
data-testid="svelte-flow__background"
>
<pattern <pattern
id={patternId} id={patternId}
x={$transform[0] % scaledGap[0]} x={$transform[0] % scaledGap[0]}
packages/svelte/src/lib/plugins/Controls/Controls.svelte
+9 -1
View File
@@ -18,7 +18,15 @@
export let showInteractive: $$Props['showInteractive'] = true; export let showInteractive: $$Props['showInteractive'] = true;
const { const {
zoomIn, zoomOut, fitView, transform, minZoom, maxZoom, nodesDraggable, nodesConnectable, elementsSelectable zoomIn,
zoomOut,
fitView,
transform,
minZoom,
maxZoom,
nodesDraggable,
nodesConnectable,
elementsSelectable
} = useStore(); } = useStore();
$: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable; $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+16 -9
View File
@@ -12,12 +12,12 @@
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import { Panel } from '$lib/container/Panel'; import { Panel } from '$lib/container/Panel';
import MinimapNode from './MinimapNode.svelte'; import MinimapNode from './MinimapNode.svelte';
import interactive from './interactive' import interactive from './interactive';
import type { GetMiniMapNodeAttribute, MiniMapProps } from './types'; import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
type $$Props = MiniMapProps; type $$Props = MiniMapProps;
let position: $$Props['position'] = 'bottom-right'; let position: $$Props['position'] = 'bottom-right';
let ariaLabel: $$Props['ariaLabel'] = 'Mini map'; let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
let style: $$Props['style'] = ''; let style: $$Props['style'] = '';
let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent'; let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
@@ -41,7 +41,15 @@
const defaultWidth = 200; const defaultWidth = 200;
const defaultHeight = 150; const defaultHeight = 150;
const { nodes, transform, width: containerWidth, height: containerHeight, flowId, panZoom, translateExtent } = useStore(); const {
nodes,
transform,
width: containerWidth,
height: containerHeight,
flowId,
panZoom,
translateExtent
} = useStore();
const nodeColorFunc = getAttrFunction(nodeColor); const nodeColorFunc = getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -56,8 +64,7 @@
width: $containerWidth / $transform[2], width: $containerWidth / $transform[2],
height: $containerHeight / $transform[2] height: $containerHeight / $transform[2]
}; };
$: boundingRect = $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
$nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
$: elementWidth = width ?? defaultWidth; $: elementWidth = width ?? defaultWidth;
$: elementHeight = height ?? defaultHeight; $: elementHeight = height ?? defaultHeight;
$: scaledWidth = boundingRect.width / elementWidth; $: scaledWidth = boundingRect.width / elementWidth;
@@ -97,7 +104,7 @@
inversePan, inversePan,
zoomStep, zoomStep,
pannable, pannable,
zoomable, zoomable
}} }}
> >
{#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if} {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
@@ -122,9 +129,9 @@
{/each} {/each}
<path <path
class="svelte-flow__minimap-mask" class="svelte-flow__minimap-mask"
d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${ d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${
-viewboxWidth - offset * 2 viewboxHeight + offset * 2
}z }h${-viewboxWidth - offset * 2}z
M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`} M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
fill={maskColor} fill={maskColor}
fill-rule="evenodd" fill-rule="evenodd"
packages/svelte/src/routes/+layout.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Header } from '../example-components/Header' import { Header } from '../example-components/Header';
</script> </script>
<div class="app"> <div class="app">
packages/svelte/src/routes/customnode/+page.svelte
+41 -45
View File
@@ -6,8 +6,10 @@
Background, Background,
BackgroundVariant, BackgroundVariant,
MiniMap, MiniMap,
Position,
type Node,
type NodeTypes, type NodeTypes,
Position type Edge
} from '../../lib/index'; } from '../../lib/index';
import { CustomNode } from './CustomNode'; import { CustomNode } from './CustomNode';
@@ -15,7 +17,7 @@
colorNode: CustomNode colorNode: CustomNode
}; };
const bgColor = writable('#1A192B') const bgColor = writable('#1A192B');
const onChange: ChangeEventHandler<HTMLInputElement> = (event) => { const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
nodes.update((nds) => nodes.update((nds) =>
@@ -32,75 +34,69 @@
...node, ...node,
data: { data: {
...node.data, ...node.data,
color, color
}, }
}; };
}) })
); );
}; };
const nodes = writable([ const nodes = writable<Node[]>([
{ {
id: '1', id: '1',
type: 'input', type: 'input',
data: { label: 'An input node' }, data: { label: 'An input node' },
position: { x: 0, y: 50 }, position: { x: 0, y: 50 },
sourcePosition: Position.Right, sourcePosition: Position.Right
}, },
{ {
id: '2', id: '2',
type: 'colorNode', type: 'colorNode',
data: { onChange: onChange, color: $bgColor }, data: { onChange: onChange, color: $bgColor },
style: 'border: 1px solid #777; padding: 10px', style: 'border: 1px solid #777; padding: 10px',
position: { x: 250, y: 50 }, position: { x: 250, y: 50 }
}, },
{ {
id: '3', id: '3',
type: 'output', type: 'output',
data: { label: 'Output A' }, data: { label: 'Output A' },
position: { x: 650, y: 25 }, position: { x: 650, y: 25 },
targetPosition: Position.Left, targetPosition: Position.Left
}, },
{ {
id: '4', id: '4',
type: 'output', type: 'output',
data: { label: 'Output B' }, data: { label: 'Output B' },
position: { x: 650, y: 120 }, position: { x: 650, y: 120 },
targetPosition: Position.Left, targetPosition: Position.Left
}, }
]); ]);
const edges = writable([ const edges = writable<Edge[]>([
{ {
id: 'e1-2', id: 'e1-2',
source: '1', source: '1',
target: '2', target: '2',
animated: true, animated: true
}, },
{ {
id: 'e2a-3', id: 'e2a-3',
source: '2', source: '2',
sourceHandle: 'a', sourceHandle: 'a',
target: '3', target: '3',
animated: true, animated: true
}, },
{ {
id: 'e2b-4', id: 'e2b-4',
source: '2', source: '2',
sourceHandle: 'b', sourceHandle: 'b',
target: '4', target: '4',
animated: true, animated: true
}, }
]); ]);
</script> </script>
<SvelteFlow <SvelteFlow {nodes} {edges} {nodeTypes} style="--bgcolor: {$bgColor}" fitView>
{nodes}
{edges}
{nodeTypes}
style="--bgcolor: {$bgColor}"
fitView
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
+3 -8
View File
@@ -2,7 +2,7 @@
import { Position } from '@xyflow/system'; import { Position } from '@xyflow/system';
import { Handle } from '../../../lib/index'; import { Handle } from '../../../lib/index';
export let data: { color: string, onChange: () => void } = { color: '#111', onChange: () => {} }; export let data: { color: string; onChange: () => void } = { color: '#111', onChange: () => {} };
export let xPos: number = 0; export let xPos: number = 0;
export let yPos: number = 0; export let yPos: number = 0;
</script> </script>
@@ -12,10 +12,5 @@
Custom Color Picker Node: <strong>{data.color}</strong> Custom Color Picker Node: <strong>{data.color}</strong>
</div> </div>
<input class="nodrag" type="color" on:input={data.onChange} value={data.color} /> <input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
<Handle <Handle type="source" position={Position.Right} id="a" style="top: 10px;" />
type="source" <Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />
position={Position.Right}
id="a"
style="top: 10px;"
/>
<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />
packages/svelte/src/routes/drag-n-drop/Flow.svelte
+25 -33
View File
@@ -10,28 +10,26 @@
} from '../../lib/index'; } from '../../lib/index';
import Sidebar from './Sidebar.svelte'; import Sidebar from './Sidebar.svelte';
const nodes = writable( const nodes = writable([
[ {
{ id: '1',
id: '1', type: 'input',
type: 'input', data: { label: 'Input Node' },
data: { label: 'Input Node' }, position: { x: 150, y: 5 }
position: { x: 150, y: 5 } },
}, {
{ id: '2',
id: '2', type: 'default',
type: 'default', data: { label: 'Node' },
data: { label: 'Node' }, position: { x: 0, y: 150 }
position: { x: 0, y: 150 } },
}, {
{ id: '3',
id: '3', type: 'output',
type: 'output', data: { label: 'Output Node' },
data: { label: 'Output Node' }, position: { x: 300, y: 150 }
position: { x: 300, y: 150 } }
} ]);
]
);
const edges = writable([ const edges = writable([
{ {
@@ -54,7 +52,7 @@
const onDragOver = (event: DragEvent) => { const onDragOver = (event: DragEvent) => {
event.preventDefault(); event.preventDefault();
console.log(event) console.log(event);
if (event.dataTransfer) { if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move'; event.dataTransfer.dropEffect = 'move';
@@ -71,27 +69,21 @@
const type = event.dataTransfer.getData('application/svelteflow'); const type = event.dataTransfer.getData('application/svelteflow');
const position = svelteFlow.project({ const position = svelteFlow.project({
x: event.clientX, x: event.clientX,
y: event.clientY - 40, y: event.clientY - 40
}); });
const newNode: Node = { const newNode: Node = {
id: `${Math.random()}`, id: `${Math.random()}`,
type, type,
position, position,
data: { label: `${type} node` }, data: { label: `${type} node` }
}; };
svelteFlow.nodes.update(nds => nds.concat(newNode)); svelteFlow.nodes.update((nds) => nds.concat(newNode));
}; };
</script> </script>
<main> <main>
<SvelteFlow <SvelteFlow {nodes} {edges} fitView on:dragover={onDragOver} on:drop={onDrop}>
{nodes}
{edges}
fitView
on:dragover={onDragOver}
on:drop={onDrop}
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
packages/svelte/src/routes/drag-n-drop/Sidebar.svelte
+8 -6
View File
@@ -1,7 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { useSvelteFlow } from '../../lib/index';
useSvelteFlow
} from '../../lib/index';
const onDragStart = (event: DragEvent, nodeType: string) => { const onDragStart = (event: DragEvent, nodeType: string) => {
if (!event.dataTransfer) { if (!event.dataTransfer) {
@@ -17,7 +15,11 @@
<aside> <aside>
<div class="label">You can drag these nodes to the pane on the left.</div> <div class="label">You can drag these nodes to the pane on the left.</div>
<div class="input-node node" on:dragstart={(event) => onDragStart(event, 'input')} draggable={true}> <div
class="input-node node"
on:dragstart={(event) => onDragStart(event, 'input')}
draggable={true}
>
Input Node Input Node
</div> </div>
<div <div
@@ -38,7 +40,7 @@
<style> <style>
.label { .label {
margin: 0.5rem 0 .25rem 0; margin: 0.5rem 0 0.25rem 0;
} }
aside { aside {
@@ -51,7 +53,7 @@
.node { .node {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border: 1px solid #111; border: 1px solid #111;
padding: .5rem 1rem; padding: 0.5rem 1rem;
font-weight: 700; font-weight: 700;
border-radius: 3px; border-radius: 3px;
cursor: grab; cursor: grab;
packages/svelte/src/routes/edges/+page.svelte
+21 -25
View File
@@ -13,7 +13,7 @@
id: '1', id: '1',
type: 'input', type: 'input',
data: { label: 'Input 1' }, data: { label: 'Input 1' },
position: { x: 250, y: 0 }, position: { x: 250, y: 0 }
}, },
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } }, { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } }, { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -26,26 +26,26 @@
id: '6', id: '6',
type: 'output', type: 'output',
data: { label: 'Output 6' }, data: { label: 'Output 6' },
position: { x: 50, y: 550 }, position: { x: 50, y: 550 }
}, },
{ {
id: '7', id: '7',
type: 'output', type: 'output',
data: { label: 'Output 7' }, data: { label: 'Output 7' },
position: { x: 250, y: 550 }, position: { x: 250, y: 550 }
}, },
{ {
id: '8', id: '8',
type: 'output', type: 'output',
data: { label: 'Output 8' }, data: { label: 'Output 8' },
position: { x: 525, y: 600 }, position: { x: 525, y: 600 }
}, },
{ {
id: '9', id: '9',
type: 'output', type: 'output',
data: { label: 'Output 9' }, data: { label: 'Output 9' },
position: { x: 675, y: 500 }, position: { x: 675, y: 500 }
}, }
]); ]);
const edges = writable([ const edges = writable([
@@ -53,21 +53,21 @@
id: 'e1-2', id: 'e1-2',
source: '1', source: '1',
target: '2', target: '2',
label: 'bezier edge (default)', label: 'bezier edge (default)'
}, },
{ {
id: 'e2-2a', id: 'e2-2a',
source: '2', source: '2',
target: '2a', target: '2a',
type: 'smoothstep', type: 'smoothstep',
label: 'smoothstep edge', label: 'smoothstep edge'
}, },
{ {
id: 'e2a-2b', id: 'e2a-2b',
source: '2a', source: '2a',
target: '2b', target: '2b',
type: 'simplebezier', type: 'simplebezier',
label: 'simple bezier edge', label: 'simple bezier edge'
}, },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' }, { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ {
@@ -75,7 +75,7 @@
source: '3', source: '3',
target: '4', target: '4',
type: 'straight', type: 'straight',
label: 'straight edge', label: 'straight edge'
}, },
{ {
id: 'e3-3a', id: 'e3-3a',
@@ -83,7 +83,7 @@
target: '3a', target: '3a',
type: 'straight', type: 'straight',
label: 'label only edge', label: 'label only edge',
style: 'stroke: none', style: 'stroke: none'
}, },
{ {
id: 'e3-5', id: 'e3-5',
@@ -91,7 +91,7 @@
target: '5', target: '5',
animated: true, animated: true,
label: 'animated styled edge', label: 'animated styled edge',
style: 'stroke: red', style: 'stroke: red'
}, },
{ {
id: 'e5-7', id: 'e5-7',
@@ -100,20 +100,20 @@
label: 'label with styled bg', label: 'label with styled bg',
labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7', labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed
}, }
}, },
{ {
id: 'e5-8', id: 'e5-8',
source: '5', source: '5',
target: '8', target: '8',
data: { text: 'custom edge' }, data: { text: 'custom edge' }
}, },
{ {
id: 'e5-9', id: 'e5-9',
source: '5', source: '5',
target: '9', target: '9',
data: { text: 'custom edge 2' }, data: { text: 'custom edge 2' }
}, },
{ {
id: 'e5-6', id: 'e5-6',
@@ -128,7 +128,7 @@
markerUnits: 'userSpaceOnUse', markerUnits: 'userSpaceOnUse',
width: 20, width: 20,
height: 20, height: 20,
strokeWidth: 2, strokeWidth: 2
}, },
markerStart: { markerStart: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
@@ -136,17 +136,13 @@
orient: 'auto-start-reverse', orient: 'auto-start-reverse',
markerUnits: 'userSpaceOnUse', markerUnits: 'userSpaceOnUse',
width: 20, width: 20,
height: 20, height: 20
}, }
}, }
]); ]);
</script> </script>
<SvelteFlow <SvelteFlow {nodes} {edges} fitView>
{nodes}
{edges}
fitView
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
packages/svelte/src/routes/interaction/+page.svelte
+15 -14
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import SvelteFlow, { import SvelteFlow, {
Controls, Controls,
Panel, Panel,
@@ -7,7 +7,7 @@
MiniMap, MiniMap,
type OnMoveEnd, type OnMoveEnd,
type Node, type Node,
type Edge, type Edge
} from '../../lib/index'; } from '../../lib/index';
const nodes = writable([ const nodes = writable([
@@ -15,16 +15,16 @@
id: '1', id: '1',
type: 'input', type: 'input',
data: { label: 'Node 1' }, data: { label: 'Node 1' },
position: { x: 250, y: 5 }, position: { x: 250, y: 5 }
}, },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } }, { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } }, { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }, { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }
]); ]);
const edges = writable([ const edges = writable([
{ id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }, { id: 'e1-3', source: '1', target: '3' }
]); ]);
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node); const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
@@ -36,7 +36,6 @@
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event); const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport); const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
let isSelectable = false; let isSelectable = false;
let isDraggable = false; let isDraggable = false;
let isConnectable = false; let isConnectable = false;
@@ -57,13 +56,13 @@
elementsSelectable={isSelectable} elementsSelectable={isSelectable}
nodesConnectable={isConnectable} nodesConnectable={isConnectable}
nodesDraggable={isDraggable} nodesDraggable={isDraggable}
zoomOnScroll={zoomOnScroll} {zoomOnScroll}
zoomOnPinch={zoomOnPinch} {zoomOnPinch}
panOnScroll={panOnScroll} {panOnScroll}
panOnScrollMode={panOnScrollMode} {panOnScrollMode}
zoomOnDoubleClick={zoomOnDoubleClick} {zoomOnDoubleClick}
panOnDrag={panOnDrag} {panOnDrag}
onMoveEnd={onMoveEnd} {onMoveEnd}
> >
<MiniMap /> <MiniMap />
<Controls /> <Controls />
@@ -141,7 +140,9 @@
<select <select
id="panonscrollmode" id="panonscrollmode"
bind:value={panOnScrollMode} bind:value={panOnScrollMode}
on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }} on:change={(event) => {
panOnScrollMode = PanOnScrollMode.Free;
}}
class="react-flow__panonscrollmode" class="react-flow__panonscrollmode"
> >
<option value="free">free</option> <option value="free">free</option>
packages/svelte/src/routes/overview/+page.svelte
+18 -13
View File
@@ -34,14 +34,14 @@
type: 'default', type: 'default',
data: { label: 'Node' }, data: { label: 'Node' },
position: { x: 0, y: 150 }, position: { x: 0, y: 150 },
selectable: false, selectable: false
}, },
{ {
id: 'A', id: 'A',
type: 'default', type: 'default',
data: { label: 'Styled with class' }, data: { label: 'Styled with class' },
class: 'custom-style', class: 'custom-style',
position: { x: 150, y: 150 }, position: { x: 150, y: 150 }
}, },
{ {
id: 'D', id: 'D',
@@ -90,25 +90,27 @@
id: '2-4', id: '2-4',
type: 'custom', type: 'custom',
source: '2', source: '2',
target: '4', target: '4'
} }
]); ]);
function updateNode() { function updateNode() {
nodes.update(nds => nds.map(n => { nodes.update((nds) =>
if (n.id === '1') { nds.map((n) => {
return { if (n.id === '1') {
...n, return {
position: { x: n.position.x + 20, y: n.position.y } ...n,
position: { x: n.position.x + 20, y: n.position.y }
};
} }
}
return n; return n;
})); })
);
} }
$: { $: {
console.log('nodes changed', $nodes) console.log('nodes changed', $nodes);
} }
</script> </script>
@@ -131,7 +133,10 @@
on:connect={(event) => console.log('on connect', event)} on:connect={(event) => console.log('on connect', event)}
on:connect:end={(event) => console.log('on connect end', event)} on:connect:end={(event) => console.log('on connect end', event)}
on:pane:click={(event) => console.log('on pane click', event)} on:pane:click={(event) => console.log('on pane click', event)}
on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }} on:pane:contextmenu={(event) => {
event.preventDefault();
console.log('on pane contextmenu', event);
}}
> >
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
packages/svelte/src/routes/overview/CustomEdge/Custom.svelte
+3 -4
View File
@@ -17,7 +17,7 @@
const svelteFlow = useSvelteFlow(); const svelteFlow = useSvelteFlow();
function onClick() { function onClick() {
svelteFlow.edges.update(eds => eds.filter(e => e.id !== $$props.id)); svelteFlow.edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
} }
</script> </script>
@@ -29,11 +29,10 @@
class="edge-button" class="edge-button"
on:click={onClick} on:click={onClick}
> >
✕ ✕
</button> </button>
</EdgeLabelRenderer> </EdgeLabelRenderer>
<style> <style>
.edge-button { .edge-button {
border-radius: 50%; border-radius: 50%;
@@ -51,6 +50,6 @@
} }
.edge-button:hover { .edge-button:hover {
box-shadow: 0 0 2px 1px rgba(0,0,0,0.12); box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.12);
} }
</style> </style>
packages/svelte/src/routes/stress/+page.svelte
+4 -9
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import SvelteFlow, { import SvelteFlow, {
Controls, Controls,
Background, Background,
@@ -26,7 +26,7 @@
id, id,
data, data,
position, position,
type: 'default', type: 'default'
}; };
nodeItems.push(node); nodeItems.push(node);
@@ -34,7 +34,7 @@
const edge = { const edge = {
id: `${source.id}-${id}`, id: `${source.id}-${id}`,
source: source.id, source: source.id,
target: id, target: id
}; };
edgeItems.push(edge); edgeItems.push(edge);
} }
@@ -47,12 +47,7 @@
const edges = writable(edgeItems); const edges = writable(edgeItems);
</script> </script>
<SvelteFlow <SvelteFlow {nodes} {edges} fitView minZoom={0.2}>
{nodes}
{edges}
fitView
minZoom={0.2}
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
packages/svelte/src/routes/subflows/+page.svelte
+38 -44
View File
@@ -1,31 +1,32 @@
<script lang="ts"> <script lang="ts">
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import SvelteFlow, { import SvelteFlow, {
Controls, Controls,
Background, Background,
BackgroundVariant, BackgroundVariant,
MiniMap, MiniMap,
type NodeTypes, type NodeTypes,
type Node
} from '../../lib/index'; } from '../../lib/index';
import { DebugNode } from './DebugNode'; import { DebugNode } from './DebugNode';
const nodeTypes: NodeTypes = { const nodeTypes: NodeTypes = {
default: DebugNode, default: DebugNode
}; };
const nodes = writable([ const nodes = writable<Node[]>([
{ {
id: '1', id: '1',
type: 'input', type: 'input',
data: { label: 'Node 1' }, data: { label: 'Node 1' },
position: { x: 250, y: 5 }, position: { x: 250, y: 5 },
origin: [0.5, 0.5], origin: [0.5, 0.5]
}, },
{ {
id: '4', id: '4',
data: { label: 'Node 4' }, data: { label: 'Node 4' },
position: { x: 100, y: 200 }, position: { x: 100, y: 200 },
style: "width:500px; height:300px;" style: 'width:500px; height:300px;'
}, },
{ {
id: '4a', id: '4a',
@@ -34,96 +35,89 @@
parentNode: '4', parentNode: '4',
extent: [ extent: [
[0, 0], [0, 0],
[100, 100], [100, 100]
], ]
}, },
{ {
id: '4b', id: '4b',
data: { label: 'Node 4b' }, data: { label: 'Node 4b' },
position: { x: 100, y: 60 }, position: { x: 100, y: 60 },
style: "width: 300px; height: 200px;", style: 'width: 300px; height: 200px;',
parentNode: '4', parentNode: '4'
}, },
{ {
id: '4b1', id: '4b1',
data: { label: 'Node 4b1' }, data: { label: 'Node 4b1' },
position: { x: 40, y: 20 }, position: { x: 40, y: 20 },
parentNode: '4b', parentNode: '4b'
}, },
{ {
id: '4b2', id: '4b2',
data: { label: 'Node 4b2' }, data: { label: 'Node 4b2' },
position: { x: 20, y: 100 }, position: { x: 20, y: 100 },
parentNode: '4b', parentNode: '4b'
}, },
{ {
id: '5', id: '5',
type: 'group', type: 'group',
data: { label: 'Node 5' }, data: { label: 'Node 5' },
position: { x: 650, y: 250 }, position: { x: 650, y: 250 },
style: "width: 400px; height: 150px", style: 'width: 400px; height: 150px',
zIndex: 1000, zIndex: 1000
}, },
{ {
id: '5a', id: '5a',
data: { label: 'Node 5a' }, data: { label: 'Node 5a' },
position: { x: 0, y: 0 }, position: { x: 0, y: 0 },
parentNode: '5', parentNode: '5',
extent: 'parent', extent: 'parent'
}, },
{ {
id: '5b', id: '5b',
data: { label: 'Node 5b' }, data: { label: 'Node 5b' },
position: { x: 225, y: 50 }, position: { x: 225, y: 50 },
parentNode: '5', parentNode: '5',
expandParent: true, expandParent: true
}, },
{ {
id: '2', id: '2',
data: { label: 'Node 2' }, data: { label: 'Node 2' },
position: { x: 100, y: 100 }, position: { x: 100, y: 100 }
}, },
{ {
id: '3', id: '3',
data: { label: 'Node 3' }, data: { label: 'Node 3' },
position: { x: 400, y: 100 }, position: { x: 400, y: 100 }
} }
]); ]);
const edges = writable([ const edges = writable([
{ {
id: 'e1-2', id: 'e1-2',
source: '1', source: '1',
target: '2', target: '2'
// markerEnd: { // markerEnd: {
// type: MarkerType.Arrow, // type: MarkerType.Arrow,
// strokeWidth: 2, // strokeWidth: 2,
// width: 15, // width: 15,
// height: 15, // height: 15,
// color: '#f00', // color: '#f00',
// }, // },
}, },
{ id: 'e1-3', source: '1', target: '3' }, { id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', zIndex: 100 }, { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
{ id: 'e3-4b', source: '3', target: '4b' }, { id: 'e3-4b', source: '3', target: '4b' },
{ id: 'e4a-4b1', source: '4a', target: '4b1' }, { id: 'e4a-4b1', source: '4a', target: '4b1' },
{ id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 }, { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
{ id: 'e4b1-4b2', source: '4b1', target: '4b2' }, { id: 'e4b1-4b2', source: '4b1', target: '4b2' }
]); ]);
$: { $: {
console.log($nodes) console.log($nodes);
} }
</script> </script>
<SvelteFlow <SvelteFlow {nodes} {edges} {nodeTypes} fitView minZoom={0.1} maxZoom={2.5}>
{nodes}
{edges}
{nodeTypes}
fitView
minZoom={0.1}
maxZoom={2.5}
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
@@ -131,6 +125,6 @@
<style> <style>
:global(.svelte-flow .svelte-flow__node.parent) { :global(.svelte-flow .svelte-flow__node.parent) {
background-color: rgba(220,220,255,0.4) background-color: rgba(220, 220, 255, 0.4);
} }
</style> </style>
packages/svelte/src/routes/usesvelteflow/Flow.svelte
+2 -11
View File
@@ -1,11 +1,6 @@
<script lang="ts"> <script lang="ts">
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import SvelteFlow, { import SvelteFlow, { Controls, Background, BackgroundVariant, MiniMap } from '../../lib/index';
Controls,
Background,
BackgroundVariant,
MiniMap,
} from '../../lib/index';
import Sidebar from './Sidebar.svelte'; import Sidebar from './Sidebar.svelte';
const nodes = writable([ const nodes = writable([
@@ -47,11 +42,7 @@
</script> </script>
<main> <main>
<SvelteFlow <SvelteFlow {nodes} {edges} fitView>
{nodes}
{edges}
fitView
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
packages/svelte/src/routes/usesvelteflow/Sidebar.svelte
+16 -6
View File
@@ -1,9 +1,17 @@
<script lang="ts"> <script lang="ts">
import { import { useSvelteFlow } from '../../lib/index';
useSvelteFlow
} from '../../lib/index';
const { zoomIn, zoomOut, setZoom, fitView, setCenter, setViewport, getViewport, viewport, nodes } = useSvelteFlow(); const {
zoomIn,
zoomOut,
setZoom,
fitView,
setCenter,
setViewport,
getViewport,
viewport,
nodes
} = useSvelteFlow();
</script> </script>
<aside> <aside>
@@ -22,13 +30,15 @@
{/each} {/each}
<div class="label">Viewport:</div> <div class="label">Viewport:</div>
<div>x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}</div> <div>
x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
</div>
</aside> </aside>
<style> <style>
.label { .label {
font-weight: 700; font-weight: 700;
margin: 0.5rem 0 .25rem 0; margin: 0.5rem 0 0.25rem 0;
} }
aside { aside {