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