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

Merge branch 'xyflow' into feat/ssr

Browse Source
This commit is contained in:
moklick
2023-10-23 12:15:21 +02:00
parent ed5606d870 747c136ced
commit d1589bac17
36 changed files with 534 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+2
View File
@@ -14,6 +14,8 @@
export let markerEnd: $$Props['markerEnd'] = undefined;
export let style: $$Props['style'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = 20;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<path
packages/svelte/src/lib/components/BaseEdge/types.ts
+1
View File
@@ -10,4 +10,5 @@ export type BaseEdgeProps = Pick<
labelY?: number;
markerStart?: string;
markerEnd?: string;
class?: string;
};
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+13 -4
View File
@@ -6,7 +6,7 @@
import { useStore } from '$lib/store';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import type { EdgeLayouted } from '$lib/types';
import type { EdgeLayouted, Edge } from '$lib/types';
type $$Props = EdgeLayouted;
@@ -39,7 +39,10 @@
export { className as class };
const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
edgecontextmenu: { edge: Edge; event: MouseEvent };
}>();
$: edgeComponent = $edgeTypes[type!] || BezierEdge;
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
@@ -51,12 +54,18 @@
}
const edge = $edges.find((e) => e.id === id);
dispatch('edgeclick', { event, edge });
if (edge) {
dispatch('edgeclick', { event, edge });
}
}
function onContextMenu(event: MouseEvent) {
const edge = $edges.find((e) => e.id === id);
dispatch('edgecontextmenu', { event, edge });
if (edge) {
dispatch('edgecontextmenu', { event, edge });
}
}
</script>
packages/svelte/src/lib/components/Handle/Handle.svelte
+19 -2
View File
@@ -1,7 +1,13 @@
<script lang="ts">
import { getContext, createEventDispatcher } from 'svelte';
import cc from 'classcat';
import { Position, XYHandle, isMouseEvent } from '@xyflow/system';
import {
Position,
XYHandle,
isMouseEvent,
type Connection,
type HandleType
} from '@xyflow/system';
import { useStore } from '$lib/store';
import type { HandleComponentProps } from '$lib/types';
@@ -26,7 +32,18 @@
$: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
const handleId = id || null;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
connect: { connection: Connection };
connectstart: {
event: MouseEvent | TouchEvent;
nodeId: string | null;
handleId: string | null;
handleType: HandleType | null;
};
connectend: {
event: MouseEvent | TouchEvent;
};
}>();
const store = useStore();
const {
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+3 -8
View File
@@ -17,14 +17,9 @@
class="selection-wrapper nopan"
style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
use:drag={{ disabled: false, store }}
/>
<Selection
isVisible={$selectionRectMode === 'nodes'}
width={rect.width}
height={rect.height}
x={rect.x}
y={rect.y}
/>
>
<Selection width="100%" height="100%" x={0} y={0} />
</div>
{/if}
<style>
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+48 -9
View File
@@ -9,13 +9,14 @@
type ComponentType
} from 'svelte';
import cc from 'classcat';
import { errorMessages, type NodeProps } from '@xyflow/system';
import { get, writable } from 'svelte/store';
import { errorMessages, Position, type NodeProps } from '@xyflow/system';
import drag from '$lib/actions/drag';
import { useStore } from '$lib/store';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import type { NodeWrapperProps } from './types';
import { writable } from 'svelte/store';
import type { Node } from '$lib/types';
interface $$Props extends NodeWrapperProps {}
@@ -42,25 +43,63 @@
export { className as class };
const store = useStore();
const { nodeTypes, addSelectedNodes } = store;
const { nodeTypes, nodeDragThreshold, addSelectedNodes, updateNodeDimensions } = store;
const nodeType = type || 'default';
let nodeRef: HTMLDivElement;
const nodeTypeValid = !!$nodeTypes[type!];
const nodeTypeValid = !!$nodeTypes[nodeType];
if (!nodeTypeValid) {
console.warn('003', errorMessages['error003'](type!));
type = 'default';
}
const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
const nodeComponent: ComponentType<SvelteComponent<NodeProps>> =
$nodeTypes[nodeType] || DefaultNode;
const selectNodesOnDrag = false;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
nodeclick: { node: Node; event: MouseEvent | TouchEvent };
nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
}>();
const connectableStore = writable(connectable);
let prevType: string | undefined = undefined;
let prevSourcePosition: Position | undefined = undefined;
let prevTargetPosition: Position | undefined = undefined;
$: {
connectableStore.set(!!connectable);
}
$: {
// if type, sourcePosition or targetPosition changes,
// we need to re-calculate the handle positions
const doUpdate =
(prevType && nodeType !== prevType) ||
(prevSourcePosition && sourcePosition !== prevSourcePosition) ||
(prevTargetPosition && targetPosition !== prevTargetPosition);
if (doUpdate) {
requestAnimationFrame(() =>
updateNodeDimensions([
{
id,
nodeElement: nodeRef,
forceUpdate: true
}
])
);
}
prevType = nodeType;
prevSourcePosition = sourcePosition;
prevTargetPosition = targetPosition;
}
setContext('svelteflow__node_id', id);
setContext('svelteflow__node_connectable', connectableStore);
@@ -73,7 +112,7 @@
});
function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) {
if (selectable && (!selectNodesOnDrag || !draggable || get(nodeDragThreshold) > 0)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true
addSelectedNodes([id]);
}
@@ -108,7 +147,7 @@
}}
bind:this={nodeRef}
data-id={id}
class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
class={cc(['svelte-flow__node', `svelte-flow__node-${nodeType}`, className])}
class:dragging
class:selected
class:draggable
packages/svelte/src/lib/components/Selection/Selection.svelte
+5 -3
View File
@@ -1,15 +1,17 @@
<script lang="ts">
export let x: number | null = 0;
export let y: number | null = 0;
export let width: number | null = 0;
export let height: number | null = 0;
export let width: number | string | null = 0;
export let height: number | string | null = 0;
export let isVisible: boolean = true;
</script>
{#if isVisible}
<div
class="svelte-flow__selection"
style="width: {width}px; height: {height}px; transform: translate({x}px, {y}px)"
style:width={typeof width === 'string' ? width : `${width}px`}
style:height={typeof height === 'string' ? height : `${height}px`}
style:transform={`translate(${x}px, ${y}px)`}
/>
{/if}
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+22
View File
@@ -8,6 +8,28 @@
export let data: $$Props['data'] = { label: 'Node' };
export let targetPosition: $$Props['targetPosition'] = Position.Top;
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let selected: $$Props['selected'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
selected;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
isConnectable;
</script>
<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
packages/svelte/src/lib/components/nodes/GroupNode.svelte
+33
View File
@@ -0,0 +1,33 @@
<script lang="ts">
import type { NodeProps } from '@xyflow/system';
interface $$Props extends NodeProps<{}> {}
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let data: $$Props['data'] = {};
export let selected: $$Props['selected'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
data;
selected;
sourcePosition;
targetPosition;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
isConnectable;
</script>
packages/svelte/src/lib/components/nodes/InputNode.svelte
+24
View File
@@ -7,6 +7,30 @@
export let data: $$Props['data'] = { label: 'Node' };
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let selected: $$Props['selected'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
selected;
targetPosition;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
isConnectable;
</script>
{data?.label}
packages/svelte/src/lib/components/nodes/OutputNode.svelte
+24
View File
@@ -7,6 +7,30 @@
export let data: $$Props['data'] = { label: 'Node' };
export let targetPosition: $$Props['targetPosition'] = Position.Top;
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let selected: $$Props['selected'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let xPos: $$Props['xPos'] = 0;
export let yPos: $$Props['yPos'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
// @todo: there must be a better way to do this
id;
selected;
sourcePosition;
type;
zIndex;
dragging;
dragHandle;
xPos;
yPos;
isConnectable;
</script>
{data?.label}