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

merged next

Browse Source
This commit is contained in:
peterkogo
2024-03-14 15:40:17 +01:00
parent 4ee2b5f15d 9e30f3b2cd
commit 3e9479d38e
18 changed files with 135 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/Handle/Handle.svelte
+19 -14
View File
@@ -8,7 +8,8 @@
isMouseEvent,
type HandleConnection,
areConnectionMapsEqual,
handleConnectionChange
handleConnectionChange,
ConnectionMode
} from '@xyflow/system';
import { useStore } from '$lib/store';
@@ -23,6 +24,7 @@
export let isConnectable: $$Props['isConnectable'] = undefined;
export let onconnect: $$Props['onconnect'] = undefined;
export let ondisconnect: $$Props['ondisconnect'] = undefined;
// @todo implement connectablestart, connectableend
// export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
// export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
@@ -32,7 +34,7 @@
const isTarget = type === 'target';
const nodeId = getContext<string>('svelteflow__node_id');
const connectable = getContext<Writable<boolean>>('svelteflow__node_connectable');
$: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
$: isConnectable = isConnectable !== undefined ? isConnectable : $connectable;
const handleId = id || null;
@@ -99,7 +101,8 @@
onConnectEnd: (event) => {
$onConnectEndAction?.(event);
},
getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
getConnectionStartHandle: () => $connection.startHandle
});
}
}
@@ -124,6 +127,7 @@
prevConnections = connections ?? new Map();
}
$: connectionInProcess = !!$connection.startHandle;
$: connectingFrom =
$connection.startHandle?.nodeId === nodeId &&
$connection.startHandle?.type === type &&
@@ -132,9 +136,12 @@
$connection.endHandle?.nodeId === nodeId &&
$connection.endHandle?.type === type &&
$connection.endHandle?.handleId === handleId;
$: isPossibleEndHandle =
$connectionMode === ConnectionMode.Strict
? $connection.startHandle?.type !== type
: nodeId !== $connection.startHandle?.nodeId ||
handleId !== $connection.startHandle?.handleId;
$: valid = connectingTo && $connection.status === 'valid';
// @todo implement connectablestart, connectableend
</script>
<!--
@@ -152,19 +159,17 @@ The Handle component is the part of a node that can be used to connect nodes.
'nodrag',
'nopan',
position,
{
valid,
connectingto: connectingTo,
connectingfrom: connectingFrom
},
className
])}
class:valid
class:connectingto={connectingTo}
class:connectingfrom={connectingFrom}
class:source={!isTarget}
class:target={isTarget}
class:connectablestart={handleConnectable}
class:connectableend={handleConnectable}
class:connectable={handleConnectable}
class:connectionindicator={handleConnectable}
class:connectablestart={isConnectable}
class:connectableend={isConnectable}
class:connectable={isConnectable}
class:connectionindicator={isConnectable && (!connectionInProcess || isPossibleEndHandle)}
on:mousedown={onPointerDown}
on:touchstart={onPointerDown}
{style}
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+15 -1
View File
@@ -6,6 +6,7 @@
import { Selection } from '$lib/components/Selection';
import drag from '$lib/actions/drag';
import type { Node } from '$lib/types';
import { createNodeEventDispatcher } from '$lib';
const store = useStore();
const { selectionRectMode, nodes } = store;
@@ -14,6 +15,7 @@
selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
}>();
const dispatchNodeEvent = createNodeEventDispatcher();
$: selectedNodes = $nodes.filter((n) => n.selected);
$: bounds = getNodesBounds(selectedNodes);
@@ -31,7 +33,19 @@
<div
class="selection-wrapper nopan"
style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
use:drag={{ disabled: false, store }}
use:drag={{
disabled: false,
store,
onDrag: (event, _, __, nodes) => {
dispatchNodeEvent('nodedrag', { event, targetNode: null, nodes });
},
onDragStart: (event, _, __, nodes) => {
dispatchNodeEvent('nodedragstart', { event, targetNode: null, nodes });
},
onDragStop: (event, _, __, nodes) => {
dispatchNodeEvent('nodedragstop', { event, targetNode: null, nodes });
}
}}
on:contextmenu={onContextMenu}
on:click={onClick}
role="button"
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+13 -21
View File
@@ -12,6 +12,7 @@
import type { NodeWrapperProps } from './types';
import type { Node } from '$lib/types';
import { getNodeInlineStyleDimensions } from './utils';
import { createNodeEventDispatcher } from '$lib';
interface $$Props extends NodeWrapperProps {}
@@ -66,16 +67,7 @@
}
const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
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 dispatchNodeEvent = createNodeEventDispatcher();
const connectableStore = writable(connectable);
let prevType: string | undefined = undefined;
let prevSourcePosition: Position | undefined = undefined;
@@ -151,7 +143,7 @@
handleNodeSelection(id);
}
dispatch('nodeclick', { node, event });
dispatchNodeEvent('nodeclick', { node, event });
}
</script>
@@ -166,14 +158,14 @@
handleSelector: dragHandle,
noDragClass: 'nodrag',
onNodeMouseDown: handleNodeSelection,
onDrag: (event, _, node, nodes) => {
dispatch('nodedrag', { event, node, nodes });
onDrag: (event, _, targetNode, nodes) => {
dispatchNodeEvent('nodedrag', { event, targetNode, nodes });
},
onDragStart: (event, _, node, nodes) => {
dispatch('nodedragstart', { event, node, nodes });
onDragStart: (event, _, targetNode, nodes) => {
dispatchNodeEvent('nodedragstart', { event, targetNode, nodes });
},
onDragStop: (event, _, node, nodes) => {
dispatch('nodedragstop', { event, node, nodes });
onDragStop: (event, _, targetNode, nodes) => {
dispatchNodeEvent('nodedragstop', { event, targetNode, nodes });
},
store
}}
@@ -192,10 +184,10 @@
style:visibility={initialized ? 'visible' : 'hidden'}
style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
on:click={onSelectNodeHandler}
on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
on:mousemove={(event) => dispatch('nodemousemove', { node, event })}
on:contextmenu={(event) => dispatch('nodecontextmenu', { node, event })}
on:mouseenter={(event) => dispatchNodeEvent('nodemouseenter', { node, event })}
on:mouseleave={(event) => dispatchNodeEvent('nodemouseleave', { node, event })}
on:mousemove={(event) => dispatchNodeEvent('nodemousemove', { node, event })}
on:contextmenu={(event) => dispatchNodeEvent('nodecontextmenu', { node, event })}
>
<svelte:component
this={nodeComponent}
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+7 -1
View File
@@ -242,7 +242,13 @@
on:nodedragstop
on:nodecontextmenu
/>
<NodeSelection on:selectionclick on:selectioncontextmenu />
<NodeSelection
on:selectionclick
on:selectioncontextmenu
on:nodedragstart
on:nodedrag
on:nodedragstop
/>
</ViewportComponent>
<UserSelection />
</Pane>
packages/svelte/src/lib/index.ts
+1
View File
@@ -10,6 +10,7 @@ export * from '$lib/components/ViewportPortal';
export * from '$lib/components/BaseEdge';
export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
export * from '$lib/components/Handle';
export * from '$lib/components/EdgeLabel';
// plugins
export * from '$lib/plugins/Controls';
packages/svelte/src/lib/utils/index.ts
+13
View File
@@ -1,3 +1,4 @@
import { createEventDispatcher } from 'svelte';
import { isNodeBase, isEdgeBase } from '@xyflow/system';
import type { Edge, Node } from '$lib/types';
@@ -21,3 +22,15 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
*/
export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
isEdgeBase<EdgeType>(element);
export const createNodeEventDispatcher = () =>
createEventDispatcher<{
nodeclick: { node: Node; event: MouseEvent | TouchEvent };
nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
}>();