chore(svelte): run prettier
This commit is contained in:
moklick
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import cc from 'classcat';
|
||||
|
||||
import { useStore } from '$lib/store';
|
||||
import type { ConnectionLineProps } from '$lib/types';
|
||||
import { useStore } from '$lib/store';
|
||||
import type { ConnectionLineProps } from '$lib/types';
|
||||
|
||||
type $$Props = ConnectionLineProps;
|
||||
|
||||
@@ -10,11 +10,7 @@
|
||||
</script>
|
||||
|
||||
{#if $connectionPath}
|
||||
<svg
|
||||
width={$width}
|
||||
height={$height}
|
||||
class="react-flow__connectionline"
|
||||
>
|
||||
<svg width={$width} height={$height} class="react-flow__connectionline">
|
||||
<g class={cc(['react-flow__connection', $connection.status])}>
|
||||
<path d={$connectionPath} fill="none" class="react-flow__connection-path" />
|
||||
</g>
|
||||
@@ -43,4 +39,4 @@
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import portal from '$lib/actions/portal';
|
||||
|
||||
type $$Props = {}
|
||||
type $$Props = {};
|
||||
</script>
|
||||
|
||||
<div use:portal={'.react-flow__edgelabel-renderer'}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,210 +1,210 @@
|
||||
import {
|
||||
getHostForElement,
|
||||
calcAutoPan,
|
||||
getEventPosition,
|
||||
pointToRendererPoint,
|
||||
rendererPointToPoint
|
||||
getHostForElement,
|
||||
calcAutoPan,
|
||||
getEventPosition,
|
||||
pointToRendererPoint,
|
||||
rendererPointToPoint
|
||||
} from '@reactflow/utils';
|
||||
import type {
|
||||
OnConnect,
|
||||
HandleType,
|
||||
Connection,
|
||||
ConnectionMode,
|
||||
Node,
|
||||
XYPosition,
|
||||
Transform
|
||||
OnConnect,
|
||||
HandleType,
|
||||
Connection,
|
||||
ConnectionMode,
|
||||
Node,
|
||||
XYPosition,
|
||||
Transform
|
||||
} from '@reactflow/system';
|
||||
|
||||
import {
|
||||
getClosestHandle,
|
||||
getConnectionStatus,
|
||||
getHandleLookup,
|
||||
getHandleType,
|
||||
isValidHandle,
|
||||
resetRecentHandle,
|
||||
type ConnectionHandle,
|
||||
type ValidConnectionFunc
|
||||
getClosestHandle,
|
||||
getConnectionStatus,
|
||||
getHandleLookup,
|
||||
getHandleType,
|
||||
isValidHandle,
|
||||
resetRecentHandle,
|
||||
type ConnectionHandle,
|
||||
type ValidConnectionFunc
|
||||
} from './utils';
|
||||
import { get, type Writable } from 'svelte/store';
|
||||
import type { ConnectionData } from '$lib/types';
|
||||
|
||||
export function handlePointerDown({
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
onConnect,
|
||||
domNode,
|
||||
nodes,
|
||||
connectionMode,
|
||||
connectionRadius,
|
||||
isTarget,
|
||||
transform: transformStore,
|
||||
panBy,
|
||||
updateConnection,
|
||||
cancelConnection,
|
||||
isValidConnection,
|
||||
edgeUpdaterType,
|
||||
onEdgeUpdateEnd
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
onConnect,
|
||||
domNode,
|
||||
nodes,
|
||||
connectionMode,
|
||||
connectionRadius,
|
||||
isTarget,
|
||||
transform: transformStore,
|
||||
panBy,
|
||||
updateConnection,
|
||||
cancelConnection,
|
||||
isValidConnection,
|
||||
edgeUpdaterType,
|
||||
onEdgeUpdateEnd
|
||||
}: {
|
||||
event: MouseEvent | TouchEvent;
|
||||
handleId: string | null;
|
||||
nodeId: string;
|
||||
onConnect: OnConnect;
|
||||
isTarget: boolean;
|
||||
connectionMode: ConnectionMode;
|
||||
domNode: HTMLDivElement | null;
|
||||
nodes: Node[];
|
||||
connectionRadius: number;
|
||||
isValidConnection: ValidConnectionFunc;
|
||||
transform: Writable<Transform>;
|
||||
updateConnection: (connection: Partial<ConnectionData>) => void;
|
||||
cancelConnection: () => void;
|
||||
panBy: (delta: XYPosition) => void;
|
||||
edgeUpdaterType?: HandleType;
|
||||
onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
|
||||
event: MouseEvent | TouchEvent;
|
||||
handleId: string | null;
|
||||
nodeId: string;
|
||||
onConnect: OnConnect;
|
||||
isTarget: boolean;
|
||||
connectionMode: ConnectionMode;
|
||||
domNode: HTMLDivElement | null;
|
||||
nodes: Node[];
|
||||
connectionRadius: number;
|
||||
isValidConnection: ValidConnectionFunc;
|
||||
transform: Writable<Transform>;
|
||||
updateConnection: (connection: Partial<ConnectionData>) => void;
|
||||
cancelConnection: () => void;
|
||||
panBy: (delta: XYPosition) => void;
|
||||
edgeUpdaterType?: HandleType;
|
||||
onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
|
||||
}): void {
|
||||
// when react-flow is used inside a shadow root we can't use document
|
||||
const doc = getHostForElement(event.target as HTMLElement);
|
||||
let autoPanId = 0;
|
||||
let prevClosestHandle: ConnectionHandle | null;
|
||||
// when react-flow is used inside a shadow root we can't use document
|
||||
const doc = getHostForElement(event.target as HTMLElement);
|
||||
let autoPanId = 0;
|
||||
let prevClosestHandle: ConnectionHandle | null;
|
||||
|
||||
const { x, y } = getEventPosition(event);
|
||||
const clickedHandle = doc?.elementFromPoint(x, y);
|
||||
const handleType = getHandleType(edgeUpdaterType, clickedHandle);
|
||||
const containerBounds = domNode?.getBoundingClientRect();
|
||||
const { x, y } = getEventPosition(event);
|
||||
const clickedHandle = doc?.elementFromPoint(x, y);
|
||||
const handleType = getHandleType(edgeUpdaterType, clickedHandle);
|
||||
const containerBounds = domNode?.getBoundingClientRect();
|
||||
|
||||
if (!containerBounds || !handleType) {
|
||||
return;
|
||||
}
|
||||
if (!containerBounds || !handleType) {
|
||||
return;
|
||||
}
|
||||
|
||||
let prevActiveHandle: Element;
|
||||
let connectionPosition = getEventPosition(event, containerBounds);
|
||||
let autoPanStarted = false;
|
||||
let connection: Connection | null = null;
|
||||
let isValid = false;
|
||||
let handleDomNode: Element | null = null;
|
||||
let prevActiveHandle: Element;
|
||||
let connectionPosition = getEventPosition(event, containerBounds);
|
||||
let autoPanStarted = false;
|
||||
let connection: Connection | null = null;
|
||||
let isValid = false;
|
||||
let handleDomNode: Element | null = null;
|
||||
|
||||
const autoPanOnConnect = true;
|
||||
const autoPanOnConnect = true;
|
||||
|
||||
const handleLookup = getHandleLookup({
|
||||
nodes,
|
||||
nodeId,
|
||||
handleId,
|
||||
handleType
|
||||
});
|
||||
const handleLookup = getHandleLookup({
|
||||
nodes,
|
||||
nodeId,
|
||||
handleId,
|
||||
handleType
|
||||
});
|
||||
|
||||
// when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
|
||||
const autoPan = (): void => {
|
||||
// @todd add prop
|
||||
if (!autoPanOnConnect) {
|
||||
return;
|
||||
}
|
||||
const [xMovement, yMovement] = calcAutoPan(connectionPosition, containerBounds);
|
||||
// when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
|
||||
const autoPan = (): void => {
|
||||
// @todd add prop
|
||||
if (!autoPanOnConnect) {
|
||||
return;
|
||||
}
|
||||
const [xMovement, yMovement] = calcAutoPan(connectionPosition, containerBounds);
|
||||
|
||||
panBy({ x: xMovement, y: yMovement });
|
||||
autoPanId = requestAnimationFrame(autoPan);
|
||||
};
|
||||
panBy({ x: xMovement, y: yMovement });
|
||||
autoPanId = requestAnimationFrame(autoPan);
|
||||
};
|
||||
|
||||
updateConnection({
|
||||
position: connectionPosition,
|
||||
nodeId,
|
||||
handleId,
|
||||
handleType,
|
||||
status: null
|
||||
});
|
||||
updateConnection({
|
||||
position: connectionPosition,
|
||||
nodeId,
|
||||
handleId,
|
||||
handleType,
|
||||
status: null
|
||||
});
|
||||
|
||||
// @todo add prop
|
||||
// onConnectStart?.(event, { nodeId, handleId, handleType });
|
||||
// @todo add prop
|
||||
// onConnectStart?.(event, { nodeId, handleId, handleType });
|
||||
|
||||
function onPointerMove(event: MouseEvent | TouchEvent) {
|
||||
const transform = get(transformStore);
|
||||
connectionPosition = getEventPosition(event, containerBounds);
|
||||
function onPointerMove(event: MouseEvent | TouchEvent) {
|
||||
const transform = get(transformStore);
|
||||
connectionPosition = getEventPosition(event, containerBounds);
|
||||
|
||||
prevClosestHandle = getClosestHandle(
|
||||
pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
|
||||
connectionRadius,
|
||||
handleLookup
|
||||
);
|
||||
prevClosestHandle = getClosestHandle(
|
||||
pointToRendererPoint(connectionPosition, transform, false, [1, 1]),
|
||||
connectionRadius,
|
||||
handleLookup
|
||||
);
|
||||
|
||||
if (!autoPanStarted) {
|
||||
autoPan();
|
||||
autoPanStarted = true;
|
||||
}
|
||||
if (!autoPanStarted) {
|
||||
autoPan();
|
||||
autoPanStarted = true;
|
||||
}
|
||||
|
||||
const result = isValidHandle(
|
||||
event,
|
||||
prevClosestHandle,
|
||||
connectionMode,
|
||||
nodeId,
|
||||
handleId,
|
||||
isTarget ? 'target' : 'source',
|
||||
isValidConnection,
|
||||
doc
|
||||
);
|
||||
const result = isValidHandle(
|
||||
event,
|
||||
prevClosestHandle,
|
||||
connectionMode,
|
||||
nodeId,
|
||||
handleId,
|
||||
isTarget ? 'target' : 'source',
|
||||
isValidConnection,
|
||||
doc
|
||||
);
|
||||
|
||||
handleDomNode = result.handleDomNode;
|
||||
connection = result.connection;
|
||||
isValid = result.isValid;
|
||||
handleDomNode = result.handleDomNode;
|
||||
connection = result.connection;
|
||||
isValid = result.isValid;
|
||||
|
||||
updateConnection({
|
||||
position:
|
||||
prevClosestHandle && isValid
|
||||
? rendererPointToPoint(
|
||||
{
|
||||
x: prevClosestHandle.x,
|
||||
y: prevClosestHandle.y
|
||||
},
|
||||
transform
|
||||
)
|
||||
: connectionPosition,
|
||||
status: getConnectionStatus(!!prevClosestHandle, isValid)
|
||||
});
|
||||
updateConnection({
|
||||
position:
|
||||
prevClosestHandle && isValid
|
||||
? rendererPointToPoint(
|
||||
{
|
||||
x: prevClosestHandle.x,
|
||||
y: prevClosestHandle.y
|
||||
},
|
||||
transform
|
||||
)
|
||||
: connectionPosition,
|
||||
status: getConnectionStatus(!!prevClosestHandle, isValid)
|
||||
});
|
||||
|
||||
if (!prevClosestHandle && !isValid && !handleDomNode) {
|
||||
return resetRecentHandle(prevActiveHandle);
|
||||
}
|
||||
if (!prevClosestHandle && !isValid && !handleDomNode) {
|
||||
return resetRecentHandle(prevActiveHandle);
|
||||
}
|
||||
|
||||
if (connection.source !== connection.target && handleDomNode) {
|
||||
resetRecentHandle(prevActiveHandle);
|
||||
prevActiveHandle = handleDomNode;
|
||||
// @todo: remove the old class names "react-flow__handle-" in the next major version
|
||||
handleDomNode.classList.add('connecting');
|
||||
handleDomNode.classList.toggle('valid', isValid);
|
||||
}
|
||||
}
|
||||
if (connection.source !== connection.target && handleDomNode) {
|
||||
resetRecentHandle(prevActiveHandle);
|
||||
prevActiveHandle = handleDomNode;
|
||||
// @todo: remove the old class names "react-flow__handle-" in the next major version
|
||||
handleDomNode.classList.add('connecting');
|
||||
handleDomNode.classList.toggle('valid', isValid);
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerUp(event: MouseEvent | TouchEvent) {
|
||||
if ((prevClosestHandle || handleDomNode) && connection && isValid) {
|
||||
onConnect?.(connection);
|
||||
}
|
||||
function onPointerUp(event: MouseEvent | TouchEvent) {
|
||||
if ((prevClosestHandle || handleDomNode) && connection && isValid) {
|
||||
onConnect?.(connection);
|
||||
}
|
||||
|
||||
// it's important to get a fresh reference from the store here
|
||||
// in order to get the latest state of onConnectEnd
|
||||
// @todo add onConnectEnd prop
|
||||
// getState().onConnectEnd?.(event);
|
||||
// it's important to get a fresh reference from the store here
|
||||
// in order to get the latest state of onConnectEnd
|
||||
// @todo add onConnectEnd prop
|
||||
// getState().onConnectEnd?.(event);
|
||||
|
||||
if (edgeUpdaterType) {
|
||||
onEdgeUpdateEnd?.(event);
|
||||
}
|
||||
if (edgeUpdaterType) {
|
||||
onEdgeUpdateEnd?.(event);
|
||||
}
|
||||
|
||||
resetRecentHandle(prevActiveHandle);
|
||||
cancelConnection();
|
||||
cancelAnimationFrame(autoPanId);
|
||||
autoPanStarted = false;
|
||||
isValid = false;
|
||||
connection = null;
|
||||
handleDomNode = null;
|
||||
resetRecentHandle(prevActiveHandle);
|
||||
cancelConnection();
|
||||
cancelAnimationFrame(autoPanId);
|
||||
autoPanStarted = false;
|
||||
isValid = false;
|
||||
connection = null;
|
||||
handleDomNode = null;
|
||||
|
||||
doc.removeEventListener('mousemove', onPointerMove as EventListener);
|
||||
doc.removeEventListener('mouseup', onPointerUp as EventListener);
|
||||
doc.removeEventListener('mousemove', onPointerMove as EventListener);
|
||||
doc.removeEventListener('mouseup', onPointerUp as EventListener);
|
||||
|
||||
doc.removeEventListener('touchmove', onPointerMove as EventListener);
|
||||
doc.removeEventListener('touchend', onPointerUp as EventListener);
|
||||
}
|
||||
doc.removeEventListener('touchmove', onPointerMove as EventListener);
|
||||
doc.removeEventListener('touchend', onPointerUp as EventListener);
|
||||
}
|
||||
|
||||
doc.addEventListener('mousemove', onPointerMove as EventListener);
|
||||
doc.addEventListener('mouseup', onPointerUp as EventListener);
|
||||
doc.addEventListener('mousemove', onPointerMove as EventListener);
|
||||
doc.addEventListener('mouseup', onPointerUp as EventListener);
|
||||
|
||||
doc.addEventListener('touchmove', onPointerMove as EventListener);
|
||||
doc.addEventListener('touchend', onPointerUp as EventListener);
|
||||
doc.addEventListener('touchmove', onPointerMove as EventListener);
|
||||
doc.addEventListener('touchend', onPointerUp as EventListener);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import cc from 'classcat';
|
||||
import { Position, type Connection, type HandleProps } from '@reactflow/system';
|
||||
import { isMouseEvent } from '@reactflow/utils';
|
||||
import { Position, type Connection, type HandleProps } from '@reactflow/system';
|
||||
import { isMouseEvent } from '@reactflow/utils';
|
||||
|
||||
import { handlePointerDown } from './handler';
|
||||
import { useStore } from '$lib/store';
|
||||
import { handlePointerDown } from './handler';
|
||||
import { useStore } from '$lib/store';
|
||||
|
||||
type $$Props = HandleProps;
|
||||
|
||||
@@ -34,40 +34,40 @@
|
||||
} = useStore();
|
||||
|
||||
function onConnectExtended(params: Connection) {
|
||||
addEdge(params);
|
||||
// @todo add props
|
||||
// onConnectAction?.(edgeParams);
|
||||
// onConnect?.(edgeParams);
|
||||
};
|
||||
addEdge(params);
|
||||
// @todo add props
|
||||
// onConnectAction?.(edgeParams);
|
||||
// onConnect?.(edgeParams);
|
||||
}
|
||||
|
||||
function onPointerDown(event: MouseEvent | TouchEvent) {
|
||||
const isMouseTriggered = isMouseEvent(event);
|
||||
function onPointerDown(event: MouseEvent | TouchEvent) {
|
||||
const isMouseTriggered = isMouseEvent(event);
|
||||
|
||||
if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
|
||||
handlePointerDown({
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
isTarget,
|
||||
connectionRadius: $connectionRadius,
|
||||
domNode: $domNode,
|
||||
nodes: $nodes,
|
||||
connectionMode: $connectionMode,
|
||||
transform,
|
||||
isValidConnection: isValidConnection!,
|
||||
onConnect: onConnectExtended,
|
||||
updateConnection,
|
||||
cancelConnection,
|
||||
panBy,
|
||||
});
|
||||
}
|
||||
if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
|
||||
handlePointerDown({
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
isTarget,
|
||||
connectionRadius: $connectionRadius,
|
||||
domNode: $domNode,
|
||||
nodes: $nodes,
|
||||
connectionMode: $connectionMode,
|
||||
transform,
|
||||
isValidConnection: isValidConnection!,
|
||||
onConnect: onConnectExtended,
|
||||
updateConnection,
|
||||
cancelConnection,
|
||||
panBy
|
||||
});
|
||||
}
|
||||
|
||||
// if (isMouseTriggered) {
|
||||
// onMouseDown?.(event);
|
||||
// } else {
|
||||
// onTouchStart?.(event);
|
||||
// }
|
||||
};
|
||||
// if (isMouseTriggered) {
|
||||
// onMouseDown?.(event);
|
||||
// } else {
|
||||
// onTouchStart?.(event);
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -92,7 +92,6 @@
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.react-flow__handle {
|
||||
position: absolute;
|
||||
@@ -134,4 +133,4 @@
|
||||
left: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,11 +3,11 @@ import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from
|
||||
import { getEventPosition } from '@reactflow/utils';
|
||||
|
||||
export type ConnectionHandle = {
|
||||
id: string | null;
|
||||
type: HandleType;
|
||||
nodeId: string;
|
||||
x: number;
|
||||
y: number;
|
||||
id: string | null;
|
||||
type: HandleType;
|
||||
nodeId: string;
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
export type ValidConnectionFunc = (connection: Connection) => boolean;
|
||||
@@ -15,174 +15,174 @@ export type ValidConnectionFunc = (connection: Connection) => boolean;
|
||||
// this functions collects all handles and adds an absolute position
|
||||
// so that we can later find the closest handle to the mouse position
|
||||
export function getHandles(
|
||||
node: Node,
|
||||
handleBounds: NodeHandleBounds,
|
||||
type: HandleType,
|
||||
currentHandle: string
|
||||
node: Node,
|
||||
handleBounds: NodeHandleBounds,
|
||||
type: HandleType,
|
||||
currentHandle: string
|
||||
): ConnectionHandle[] {
|
||||
return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
|
||||
if (`${node.id}-${h.id}-${type}` !== currentHandle) {
|
||||
res.push({
|
||||
id: h.id || null,
|
||||
type,
|
||||
nodeId: node.id,
|
||||
x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
|
||||
y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2
|
||||
});
|
||||
}
|
||||
return res;
|
||||
}, []);
|
||||
return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
|
||||
if (`${node.id}-${h.id}-${type}` !== currentHandle) {
|
||||
res.push({
|
||||
id: h.id || null,
|
||||
type,
|
||||
nodeId: node.id,
|
||||
x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
|
||||
y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2
|
||||
});
|
||||
}
|
||||
return res;
|
||||
}, []);
|
||||
}
|
||||
|
||||
export function getClosestHandle(
|
||||
pos: XYPosition,
|
||||
connectionRadius: number,
|
||||
handles: ConnectionHandle[]
|
||||
pos: XYPosition,
|
||||
connectionRadius: number,
|
||||
handles: ConnectionHandle[]
|
||||
): ConnectionHandle | null {
|
||||
let closestHandle: ConnectionHandle | null = null;
|
||||
let minDistance = Infinity;
|
||||
let closestHandle: ConnectionHandle | null = null;
|
||||
let minDistance = Infinity;
|
||||
|
||||
handles.forEach((handle) => {
|
||||
const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
|
||||
if (distance <= connectionRadius && distance < minDistance) {
|
||||
minDistance = distance;
|
||||
closestHandle = handle;
|
||||
}
|
||||
});
|
||||
handles.forEach((handle) => {
|
||||
const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
|
||||
if (distance <= connectionRadius && distance < minDistance) {
|
||||
minDistance = distance;
|
||||
closestHandle = handle;
|
||||
}
|
||||
});
|
||||
|
||||
return closestHandle;
|
||||
return closestHandle;
|
||||
}
|
||||
|
||||
type Result = {
|
||||
handleDomNode: Element | null;
|
||||
isValid: boolean;
|
||||
connection: Connection;
|
||||
handleDomNode: Element | null;
|
||||
isValid: boolean;
|
||||
connection: Connection;
|
||||
};
|
||||
|
||||
const nullConnection: Connection = {
|
||||
source: null,
|
||||
target: null,
|
||||
sourceHandle: null,
|
||||
targetHandle: null
|
||||
source: null,
|
||||
target: null,
|
||||
sourceHandle: null,
|
||||
targetHandle: null
|
||||
};
|
||||
|
||||
// checks if and returns connection in fom of an object { source: 123, target: 312 }
|
||||
export function isValidHandle(
|
||||
event: MouseEvent | TouchEvent,
|
||||
handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | null,
|
||||
connectionMode: ConnectionMode,
|
||||
fromNodeId: string,
|
||||
fromHandleId: string | null,
|
||||
fromType: string,
|
||||
isValidConnection: ValidConnectionFunc,
|
||||
doc: Document | ShadowRoot
|
||||
event: MouseEvent | TouchEvent,
|
||||
handle: Pick<ConnectionHandle, 'nodeId' | 'id' | 'type'> | null,
|
||||
connectionMode: ConnectionMode,
|
||||
fromNodeId: string,
|
||||
fromHandleId: string | null,
|
||||
fromType: string,
|
||||
isValidConnection: ValidConnectionFunc,
|
||||
doc: Document | ShadowRoot
|
||||
) {
|
||||
const isTarget = fromType === 'target';
|
||||
const handleDomNode = doc.querySelector(
|
||||
`.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
|
||||
);
|
||||
const { x, y } = getEventPosition(event);
|
||||
const handleBelow = doc.elementFromPoint(x, y);
|
||||
const handleToCheck = handleBelow?.classList.contains('react-flow__handle')
|
||||
? handleBelow
|
||||
: handleDomNode;
|
||||
const isTarget = fromType === 'target';
|
||||
const handleDomNode = doc.querySelector(
|
||||
`.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
|
||||
);
|
||||
const { x, y } = getEventPosition(event);
|
||||
const handleBelow = doc.elementFromPoint(x, y);
|
||||
const handleToCheck = handleBelow?.classList.contains('react-flow__handle')
|
||||
? handleBelow
|
||||
: handleDomNode;
|
||||
|
||||
const result: Result = {
|
||||
handleDomNode: handleToCheck,
|
||||
isValid: false,
|
||||
connection: nullConnection
|
||||
};
|
||||
const result: Result = {
|
||||
handleDomNode: handleToCheck,
|
||||
isValid: false,
|
||||
connection: nullConnection
|
||||
};
|
||||
|
||||
if (handleToCheck) {
|
||||
const handleType = getHandleType(undefined, handleToCheck);
|
||||
const handleNodeId = handleToCheck.getAttribute('data-nodeid');
|
||||
const handleId = handleToCheck.getAttribute('data-handleid');
|
||||
if (handleToCheck) {
|
||||
const handleType = getHandleType(undefined, handleToCheck);
|
||||
const handleNodeId = handleToCheck.getAttribute('data-nodeid');
|
||||
const handleId = handleToCheck.getAttribute('data-handleid');
|
||||
|
||||
const connection: Connection = {
|
||||
source: isTarget ? handleNodeId : fromNodeId,
|
||||
sourceHandle: isTarget ? handleId : fromHandleId,
|
||||
target: isTarget ? fromNodeId : handleNodeId,
|
||||
targetHandle: isTarget ? fromHandleId : handleId
|
||||
};
|
||||
const connection: Connection = {
|
||||
source: isTarget ? handleNodeId : fromNodeId,
|
||||
sourceHandle: isTarget ? handleId : fromHandleId,
|
||||
target: isTarget ? fromNodeId : handleNodeId,
|
||||
targetHandle: isTarget ? fromHandleId : handleId
|
||||
};
|
||||
|
||||
result.connection = connection;
|
||||
result.connection = connection;
|
||||
|
||||
// in strict mode we don't allow target to target or source to source connections
|
||||
const isValid =
|
||||
connectionMode === ConnectionMode.Strict
|
||||
? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
|
||||
: handleNodeId !== fromNodeId || handleId !== fromHandleId;
|
||||
// in strict mode we don't allow target to target or source to source connections
|
||||
const isValid =
|
||||
connectionMode === ConnectionMode.Strict
|
||||
? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
|
||||
: handleNodeId !== fromNodeId || handleId !== fromHandleId;
|
||||
|
||||
if (isValid) {
|
||||
result.isValid = isValidConnection(connection);
|
||||
}
|
||||
}
|
||||
if (isValid) {
|
||||
result.isValid = isValidConnection(connection);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
return result;
|
||||
}
|
||||
|
||||
type GetHandleLookupParams = {
|
||||
nodes: Node[];
|
||||
nodeId: string;
|
||||
handleId: string | null;
|
||||
handleType: string;
|
||||
nodes: Node[];
|
||||
nodeId: string;
|
||||
handleId: string | null;
|
||||
handleType: string;
|
||||
};
|
||||
|
||||
export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHandleLookupParams) {
|
||||
return nodes.reduce<ConnectionHandle[]>((res, node) => {
|
||||
if (node[internalsSymbol]) {
|
||||
const { handleBounds } = node[internalsSymbol];
|
||||
let sourceHandles: ConnectionHandle[] = [];
|
||||
let targetHandles: ConnectionHandle[] = [];
|
||||
return nodes.reduce<ConnectionHandle[]>((res, node) => {
|
||||
if (node[internalsSymbol]) {
|
||||
const { handleBounds } = node[internalsSymbol];
|
||||
let sourceHandles: ConnectionHandle[] = [];
|
||||
let targetHandles: ConnectionHandle[] = [];
|
||||
|
||||
if (handleBounds) {
|
||||
sourceHandles = getHandles(
|
||||
node,
|
||||
handleBounds,
|
||||
'source',
|
||||
`${nodeId}-${handleId}-${handleType}`
|
||||
);
|
||||
targetHandles = getHandles(
|
||||
node,
|
||||
handleBounds,
|
||||
'target',
|
||||
`${nodeId}-${handleId}-${handleType}`
|
||||
);
|
||||
}
|
||||
if (handleBounds) {
|
||||
sourceHandles = getHandles(
|
||||
node,
|
||||
handleBounds,
|
||||
'source',
|
||||
`${nodeId}-${handleId}-${handleType}`
|
||||
);
|
||||
targetHandles = getHandles(
|
||||
node,
|
||||
handleBounds,
|
||||
'target',
|
||||
`${nodeId}-${handleId}-${handleType}`
|
||||
);
|
||||
}
|
||||
|
||||
res.push(...sourceHandles, ...targetHandles);
|
||||
}
|
||||
return res;
|
||||
}, []);
|
||||
res.push(...sourceHandles, ...targetHandles);
|
||||
}
|
||||
return res;
|
||||
}, []);
|
||||
}
|
||||
|
||||
export function getHandleType(
|
||||
edgeUpdaterType: HandleType | undefined,
|
||||
handleDomNode: Element | null
|
||||
edgeUpdaterType: HandleType | undefined,
|
||||
handleDomNode: Element | null
|
||||
): HandleType | null {
|
||||
if (edgeUpdaterType) {
|
||||
return edgeUpdaterType;
|
||||
} else if (handleDomNode?.classList.contains('target')) {
|
||||
return 'target';
|
||||
} else if (handleDomNode?.classList.contains('source')) {
|
||||
return 'source';
|
||||
}
|
||||
if (edgeUpdaterType) {
|
||||
return edgeUpdaterType;
|
||||
} else if (handleDomNode?.classList.contains('target')) {
|
||||
return 'target';
|
||||
} else if (handleDomNode?.classList.contains('source')) {
|
||||
return 'source';
|
||||
}
|
||||
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function resetRecentHandle(handleDomNode: Element): void {
|
||||
handleDomNode?.classList.remove('valid', 'connecting');
|
||||
handleDomNode?.classList.remove('valid', 'connecting');
|
||||
}
|
||||
|
||||
export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
|
||||
let connectionStatus = null;
|
||||
let connectionStatus = null;
|
||||
|
||||
if (isHandleValid) {
|
||||
connectionStatus = 'valid';
|
||||
} else if (isInsideConnectionRadius && !isHandleValid) {
|
||||
connectionStatus = 'invalid';
|
||||
}
|
||||
if (isHandleValid) {
|
||||
connectionStatus = 'valid';
|
||||
} else if (isInsideConnectionRadius && !isHandleValid) {
|
||||
connectionStatus = 'invalid';
|
||||
}
|
||||
|
||||
return connectionStatus as ConnectionStatus;
|
||||
return connectionStatus as ConnectionStatus;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { KeyDefinition } from '$lib/types';
|
||||
|
||||
export type KeyHandlerProps = {
|
||||
selectionKey?: KeyDefinition;
|
||||
deleteKey?: KeyDefinition;
|
||||
selectionKey?: KeyDefinition;
|
||||
deleteKey?: KeyDefinition;
|
||||
};
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
import { shortcut } from '@svelte-put/shortcut';
|
||||
|
||||
import { useStore } from '$lib/store';
|
||||
import type { KeyHandlerProps } from './KeyHandler'
|
||||
import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
|
||||
import type { KeyHandlerProps } from './KeyHandler';
|
||||
import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
|
||||
|
||||
const { selectionKeyPressed, deleteKeyPressed } = useStore();
|
||||
|
||||
type $$Props = KeyHandlerProps;
|
||||
|
||||
export let selectionKey: $$Props['selectionKey'] = 'Shift';
|
||||
export let deleteKey: $$Props['deleteKey'] = 'Backspace';
|
||||
export let selectionKey: $$Props['selectionKey'] = 'Shift';
|
||||
export let deleteKey: $$Props['deleteKey'] = 'Backspace';
|
||||
|
||||
function isKeyObject(key?: KeyDefinition): key is KeyDefinitionObject {
|
||||
return typeof key === 'object';
|
||||
}
|
||||
}
|
||||
|
||||
$: selectionKeyString = typeof selectionKey === 'string' ? selectionKey : selectionKey!.key;
|
||||
$: selectionKeyModifier = isKeyObject(selectionKey) ? selectionKey?.modifier : [];
|
||||
@@ -24,20 +24,44 @@
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
use:shortcut={{
|
||||
trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(true) }],
|
||||
use:shortcut={{
|
||||
trigger: [
|
||||
{
|
||||
key: selectionKeyString,
|
||||
modifier: selectionKeyModifier,
|
||||
callback: () => selectionKeyPressed.set(true)
|
||||
}
|
||||
],
|
||||
type: 'keydown'
|
||||
}}
|
||||
use:shortcut={{
|
||||
trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(false) }],
|
||||
use:shortcut={{
|
||||
trigger: [
|
||||
{
|
||||
key: selectionKeyString,
|
||||
modifier: selectionKeyModifier,
|
||||
callback: () => selectionKeyPressed.set(false)
|
||||
}
|
||||
],
|
||||
type: 'keyup'
|
||||
}}
|
||||
use:shortcut={{
|
||||
trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(true) }],
|
||||
use:shortcut={{
|
||||
trigger: [
|
||||
{
|
||||
key: deleteKeyString,
|
||||
modifier: deleteKeyModifier,
|
||||
callback: () => deleteKeyPressed.set(true)
|
||||
}
|
||||
],
|
||||
type: 'keydown'
|
||||
}}
|
||||
use:shortcut={{
|
||||
trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(false) }],
|
||||
use:shortcut={{
|
||||
trigger: [
|
||||
{
|
||||
key: deleteKeyString,
|
||||
modifier: deleteKeyModifier,
|
||||
callback: () => deleteKeyPressed.set(false)
|
||||
}
|
||||
],
|
||||
type: 'keyup'
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { getRectOfNodes } from '@reactflow/utils';
|
||||
import { getRectOfNodes } from '@reactflow/utils';
|
||||
|
||||
import { useStore } from '$lib/store';
|
||||
import Selection from '$lib/components/Selection/index.svelte';
|
||||
import drag from '$lib/actions/drag'
|
||||
import drag from '$lib/actions/drag';
|
||||
|
||||
const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();
|
||||
|
||||
$: selectedNodes = $nodes.filter(n => n.selected);
|
||||
$: selectedNodes = $nodes.filter((n) => n.selected);
|
||||
$: rect = getRectOfNodes(selectedNodes, $nodeOrigin);
|
||||
</script>
|
||||
</script>
|
||||
|
||||
{#if selectedNodes}
|
||||
<div
|
||||
@@ -34,4 +34,4 @@
|
||||
z-index: 7;
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
export let width: number | null = 0;
|
||||
export let height: number | null = 0;
|
||||
export let isVisible: boolean = true;
|
||||
</script>
|
||||
</script>
|
||||
|
||||
{#if isVisible}
|
||||
<div
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Selection from '$lib/components/Selection/index.svelte';
|
||||
|
||||
const { selectionRect, selectionRectMode } = useStore();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<Selection
|
||||
isVisible={!!($selectionRect && $selectionRectMode === 'user')}
|
||||
|
||||
@@ -11,11 +11,7 @@
|
||||
export let interactionWidth: $$Props['interactionWidth'] = 20;
|
||||
</script>
|
||||
|
||||
<path
|
||||
d={path}
|
||||
fill="none"
|
||||
class="react-flow__edge-path"
|
||||
/>
|
||||
<path d={path} fill="none" class="react-flow__edge-path" />
|
||||
|
||||
{#if interactionWidth}
|
||||
<path
|
||||
@@ -33,7 +29,7 @@
|
||||
class="react-flow__edge-label"
|
||||
style:transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
|
||||
>
|
||||
{label}
|
||||
{label}
|
||||
</div>
|
||||
</EdgeLabelRenderer>
|
||||
{/if}
|
||||
@@ -43,4 +39,4 @@
|
||||
position: absolute;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { getBezierPath } from '@reactflow/edge-utils';
|
||||
|
||||
import type { EdgeProps } from '$lib/types';
|
||||
import BaseEdge from './BaseEdge.svelte';
|
||||
import BaseEdge from './BaseEdge.svelte';
|
||||
|
||||
type $$Props = EdgeProps;
|
||||
|
||||
@@ -12,13 +12,8 @@
|
||||
targetX: $$props.targetX,
|
||||
targetY: $$props.targetY,
|
||||
sourcePosition: $$props.sourcePosition,
|
||||
targetPosition: $$props.targetPosition,
|
||||
targetPosition: $$props.targetPosition
|
||||
});
|
||||
</script>
|
||||
|
||||
<BaseEdge
|
||||
{path}
|
||||
{labelX}
|
||||
{labelY}
|
||||
{...$$props}
|
||||
/>
|
||||
<BaseEdge {path} {labelX} {labelY} {...$$props} />
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { SvelteComponentTyped } from 'svelte';
|
||||
import type { SvelteComponentTyped } from 'svelte';
|
||||
import { Position } from '@reactflow/system';
|
||||
|
||||
import { useStore } from '$lib/store';
|
||||
import { useStore } from '$lib/store';
|
||||
import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
|
||||
import type { EdgeProps, WrapEdgeProps } from '$lib/types';
|
||||
import type { EdgeProps, WrapEdgeProps } from '$lib/types';
|
||||
|
||||
type $$Props = WrapEdgeProps;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
export let targetX: $$Props['targetX'] = 0;
|
||||
export let targetY: $$Props['targetY'] = 0;
|
||||
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
|
||||
export let targetPosition: $$Props['targetPosition'] = Position.Top;
|
||||
export let targetPosition: $$Props['targetPosition'] = Position.Top;
|
||||
export let animated: $$Props['animated'] = false;
|
||||
export let selected: $$Props['selected'] = false;
|
||||
export let label: $$Props['label'] = undefined;
|
||||
@@ -26,11 +26,7 @@
|
||||
const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
|
||||
</script>
|
||||
|
||||
<g
|
||||
class="react-flow__edge"
|
||||
class:animated
|
||||
data-id={id}
|
||||
>
|
||||
<g class="react-flow__edge" class:animated data-id={id}>
|
||||
<svelte:component
|
||||
this={edgeComponent}
|
||||
{id}
|
||||
|
||||
@@ -6,19 +6,14 @@
|
||||
|
||||
type $$Props = EdgeProps;
|
||||
|
||||
$: [path, labelX, labelY] = getSmoothStepPath({
|
||||
$: [path, labelX, labelY] = getSmoothStepPath({
|
||||
sourceX: $$props.sourceX,
|
||||
sourceY: $$props.sourceY,
|
||||
targetX: $$props.targetX,
|
||||
targetY: $$props.targetY,
|
||||
sourcePosition: $$props.sourcePosition,
|
||||
targetPosition: $$props.targetPosition,
|
||||
targetPosition: $$props.targetPosition
|
||||
});
|
||||
</script>
|
||||
|
||||
<BaseEdge
|
||||
{path}
|
||||
{labelX}
|
||||
{labelY}
|
||||
{...$$props}
|
||||
/>
|
||||
<BaseEdge {path} {labelX} {labelY} {...$$props} />
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { getStraightPath } from '@reactflow/edge-utils';
|
||||
|
||||
import type { EdgeProps } from '$lib/types';
|
||||
import BaseEdge from './BaseEdge.svelte';
|
||||
import type { EdgeProps } from '$lib/types';
|
||||
import BaseEdge from './BaseEdge.svelte';
|
||||
|
||||
type $$Props = EdgeProps;
|
||||
|
||||
@@ -10,13 +10,8 @@
|
||||
sourceX: $$props.sourceX,
|
||||
sourceY: $$props.sourceY,
|
||||
targetX: $$props.targetX,
|
||||
targetY: $$props.targetY,
|
||||
targetY: $$props.targetY
|
||||
});
|
||||
</script>
|
||||
|
||||
<BaseEdge
|
||||
{path}
|
||||
{labelX}
|
||||
{labelY}
|
||||
{...$$props}
|
||||
/>
|
||||
<BaseEdge {path} {labelX} {labelY} {...$$props} />
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { Position } from '@reactflow/system';
|
||||
|
||||
import Handle from '$lib/components/Handle/index.svelte';
|
||||
import type { NodeProps } from '$lib/types';
|
||||
|
||||
interface $$Props extends NodeProps<{ label: string }>{}
|
||||
import Handle from '$lib/components/Handle/index.svelte';
|
||||
import type { NodeProps } from '$lib/types';
|
||||
|
||||
interface $$Props extends NodeProps<{ label: string }> {}
|
||||
|
||||
export let id: $$Props['id'];
|
||||
export let data: $$Props['data'] = { label: 'Node' };
|
||||
@@ -18,4 +18,4 @@
|
||||
|
||||
<Handle type="target" position={targetPosition} />
|
||||
{data?.label}
|
||||
<Handle type="source" position={sourcePosition} />
|
||||
<Handle type="source" position={sourcePosition} />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Position } from '@reactflow/system';
|
||||
|
||||
|
||||
import Handle from '$lib/components/Handle/index.svelte';
|
||||
|
||||
export let data: { label: string } = { label: 'Node' };
|
||||
@@ -10,4 +10,3 @@
|
||||
|
||||
{data?.label}
|
||||
<Handle type="source" position={sourcePosition} />
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { onMount, setContext, SvelteComponentTyped } from 'svelte';
|
||||
import { onMount, setContext, SvelteComponentTyped } from 'svelte';
|
||||
import cc from 'classcat';
|
||||
import { type XYPosition, Position } from '@reactflow/system';
|
||||
|
||||
import drag from '$lib/actions/drag'
|
||||
import { useStore } from '$lib/store';
|
||||
import DefaultNode from './DefaultNode.svelte';
|
||||
import type { WrapNodeProps, NodeProps } from '$lib/types';
|
||||
|
||||
import drag from '$lib/actions/drag';
|
||||
import { useStore } from '$lib/store';
|
||||
import DefaultNode from './DefaultNode.svelte';
|
||||
import type { WrapNodeProps, NodeProps } from '$lib/types';
|
||||
|
||||
interface $$Props extends WrapNodeProps {}
|
||||
|
||||
@@ -29,7 +29,8 @@
|
||||
let nodeRef: HTMLDivElement;
|
||||
|
||||
const { nodes, transform, nodeTypes, updateNodePositions, addSelectedNodes } = useStore();
|
||||
const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypes[type] || DefaultNode;
|
||||
const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
|
||||
$nodeTypes[type] || DefaultNode;
|
||||
const isSelectable = true;
|
||||
const selectNodesOnDrag = false;
|
||||
const isDraggable = true;
|
||||
@@ -41,7 +42,7 @@
|
||||
|
||||
return () => {
|
||||
resizeObserver?.unobserve(nodeRef);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
function onSelectNodeHandler(event: MouseEvent) {
|
||||
@@ -54,15 +55,15 @@
|
||||
// const node = store.getState().nodeInternals.get(id)!;
|
||||
// onClick(event, { ...node });
|
||||
// }
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
use:drag={{ nodeId: id, nodes, transform, updateNodePositions }}
|
||||
class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
|
||||
class:initializing={!width && !height}
|
||||
class:dragging={dragging}
|
||||
class:selected={selected}
|
||||
class:dragging
|
||||
class:selected
|
||||
bind:this={nodeRef}
|
||||
on:click={onSelectNodeHandler}
|
||||
style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}
|
||||
@@ -92,7 +93,7 @@
|
||||
border-color: #1a192b;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
cursor: grab;
|
||||
pointer-events: all;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -109,4 +110,4 @@
|
||||
.initializing {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Position } from '@reactflow/system';
|
||||
|
||||
|
||||
import Handle from '$lib/components/Handle/index.svelte';
|
||||
|
||||
export let data: { label: string } = { label: 'Node' };
|
||||
@@ -10,4 +10,3 @@
|
||||
|
||||
{data?.label}
|
||||
<Handle type="target" position={targetPosition} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user