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

Merge pull request #4328 from xyflow/next

Browse Source 
React Flow 12.0.0-next.19 and Svelte Flow 0.1.4
This commit is contained in:
Moritz Klack
2024-06-05 13:08:46 +02:00
committed by GitHub
parent 467223b9a3 2236138b8a
commit 9f329703b8
40 changed files with 625 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/ControlledUncontrolled/index.tsx
+11 -9
View File
@@ -60,12 +60,13 @@ const ControlledUncontrolled = () => {
const updateNodePositions = () => {
instance.setNodes((nodes) =>
nodes.map((node) => {
node.position = {
x: Math.random() * 400,
y: Math.random() * 400,
return {
...node,
position: {
x: Math.random() * 400,
y: Math.random() * 400,
},
};
return node;
})
);
};
@@ -73,11 +74,12 @@ const ControlledUncontrolled = () => {
const updateEdgeColors = () => {
instance.setEdges((edges) =>
edges.map((edge) => {
edge.style = {
stroke: '#ff5050',
return {
...edge,
style: {
stroke: '#ff5050',
},
};
return edge;
})
);
};
examples/react/src/examples/Hidden/index.tsx
+2
View File
@@ -73,6 +73,8 @@ const HiddenFlow = () => {
setEdges(setHidden(isHidden));
}, [isHidden, setEdges, setNodes]);
console.log(nodes);
return (
<ReactFlow
nodes={nodes}
examples/svelte/package.json
+4 -4
View File
@@ -12,8 +12,8 @@
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.1.1",
"@sveltejs/kit": "^2.5.2",
"@sveltejs/adapter-auto": "^3.2.1",
"@sveltejs/kit": "^2.5.10",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"eslint": "^8.53.0",
@@ -25,12 +25,12 @@
"svelte-check": "^3.6.6",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^4.5.0"
"vite": "^5.2.12"
},
"type": "module",
"dependencies": {
"@dagrejs/dagre": "^1.0.4",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"@xyflow/svelte": "workspace:^"
}
}
examples/svelte/src/routes/examples/overview/+page.svelte
+2
View File
@@ -159,6 +159,8 @@
on:nodemouseenter={(event) => console.log('on node enter', event)}
on:nodemouseleave={(event) => console.log('on node leave', event)}
on:edgeclick={(event) => console.log('edge click', event)}
on:edgemouseenter={(event) => console.log('edge enter', event)}
on:edgemouseleave={(event) => console.log('edge leave', event)}
onconnectstart={(event) => console.log('on connect start', event)}
onconnect={(event) => console.log('on connect', event)}
onconnectend={(event) => console.log('on connect end', event)}
examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
+2 -2
View File
@@ -21,7 +21,7 @@
{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
]);
const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
const viewport = writable<Viewport>({ x: 0, y: 10, zoom: 1.25 });
const viewport = writable<Viewport>({ x: 100, y: 100, zoom: 1.25 });
const { fitView } = useSvelteFlow();
@@ -35,7 +35,7 @@
});
</script>
<SvelteFlow {nodes} {edges} fitView {viewport}>
<SvelteFlow {nodes} {edges} {viewport}>
<Controls />
<Background variant={BackgroundVariant.Dots} />
packages/react/CHANGELOG.md
+8
View File
@@ -1,5 +1,13 @@
# @xyflow/react
## 12.0.0-next.19
- update internals on node resizer updates
- re-observe node when `node.hidden` is toggled
- update `updateNodeData` argument type - thanks @ogroppo
- add `selectable`, `deletable` and `draggable` to node and edge props
- add `parentId` to node props
## 12.0.0-next.18
- don't show nodeTypes warning if not necessary you've created a new nodeTypes or edgeTypes
packages/react/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/react",
"version": "12.0.0-next.18",
"version": "12.0.0-next.19",
"description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
"keywords": [
"react",
packages/react/src/components/EdgeWrapper/index.tsx
+2
View File
@@ -215,6 +215,8 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
type={edge.type}
selected={edge.selected}
animated={edge.animated}
selectable={isSelectable}
deletable={edge.deletable ?? true}
label={edge.label}
labelStyle={edge.labelStyle}
labelShowBg={edge.labelShowBg}
packages/react/src/components/NodeWrapper/index.tsx
+4
View File
@@ -209,12 +209,16 @@ export function NodeWrapper<NodeType extends Node>({
positionAbsoluteX={clampedPosition.x}
positionAbsoluteY={clampedPosition.y}
selected={node.selected}
selectable={isSelectable}
draggable={isDraggable}
deletable={node.deletable ?? true}
isConnectable={isConnectable}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
dragging={dragging}
dragHandle={node.dragHandle}
zIndex={internals.z}
parentId={node.parentId}
{...nodeDimensions}
/>
</Provider>
packages/react/src/components/NodeWrapper/useNodeObserver.ts
+3 -3
View File
@@ -26,17 +26,17 @@ export function useNodeObserver({
const prevSourcePosition = useRef(node.sourcePosition);
const prevTargetPosition = useRef(node.targetPosition);
const prevType = useRef(nodeType);
const isInitialized = hasDimensions && !!node.internals.handleBounds && !node.hidden;
const isInitialized = hasDimensions && !!node.internals.handleBounds;
useEffect(() => {
if (nodeRef.current && (!isInitialized || observedNode.current !== nodeRef.current)) {
if (nodeRef.current && !node.hidden && (!isInitialized || observedNode.current !== nodeRef.current)) {
if (observedNode.current) {
resizeObserver?.unobserve(observedNode.current);
}
resizeObserver?.observe(nodeRef.current);
observedNode.current = nodeRef.current;
}
}, [isInitialized]);
}, [isInitialized, node.hidden]);
useEffect(() => {
return () => {
packages/react/src/container/NodeRenderer/useResizeObserver.ts
+1
View File
@@ -20,6 +20,7 @@ export function useResizeObserver() {
updates.set(id, {
id,
nodeElement: entry.target as HTMLDivElement,
force: true,
});
});
packages/react/src/types/edges.ts
+1 -1
View File
@@ -100,7 +100,7 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
*/
export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
EdgeType,
'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' | 'selectable' | 'deletable'
> &
EdgePosition &
EdgeLabelOptions & {
packages/react/src/types/instance.ts
+1 -1
View File
@@ -140,7 +140,7 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
*/
updateNodeData: (
id: string,
dataUpdate: object | ((node: NodeType) => object),
dataUpdate: Partial<NodeType['data']> | ((node: NodeType) => Partial<NodeType['data']>),
options?: { replace: boolean }
) => void;
};
packages/svelte/CHANGELOG.md
+9
View File
@@ -1,5 +1,14 @@
# @xyflow/svelte
## 0.1.4
- add `selectable`, `deletable` and `draggable` to node and edge props
- add `parentId` to node props
- add `on:edgemouseenter` and `on:edgemouseleave` event handler
- fix deselection of edges
- remove pointer events from panel when user selection is active
- fix viewport initialization with user viewport
## 0.1.3
- fix `NodeToolbar` for subflows
packages/svelte/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/svelte",
"version": "0.1.3",
"version": "0.1.4",
"description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [
"svelte",
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+18 -4
View File
@@ -23,6 +23,7 @@
export let animated: $$Props['animated'] = false;
export let selected: $$Props['selected'] = false;
export let selectable: $$Props['selectable'] = undefined;
export let deletable: $$Props['deletable'] = undefined;
export let hidden: $$Props['hidden'] = false;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
@@ -49,13 +50,15 @@
const dispatch = createEventDispatcher<{
edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
edgecontextmenu: { edge: Edge; event: MouseEvent };
edgemouseenter: { edge: Edge; event: MouseEvent };
edgemouseleave: { edge: Edge; event: MouseEvent };
}>();
$: edgeType = type || 'default';
$: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal;
$: markerStartUrl = markerStart ? `url('#${getMarkerId(markerStart, $flowId)}')` : undefined;
$: markerEndUrl = markerEnd ? `url('#${getMarkerId(markerEnd, $flowId)}')` : undefined;
$: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined');
$: isSelectable = selectable ?? $elementsSelectable;
const handleEdgeSelect = useHandleEdgeSelect();
@@ -68,11 +71,12 @@
}
}
function onContextMenu(event: MouseEvent) {
type EdgeMouseEvent = 'edgecontextmenu' | 'edgemouseenter' | 'edgemouseleave';
function onMouseEvent(event: MouseEvent, type: EdgeMouseEvent) {
const edge = $edgeLookup.get(id);
if (edge) {
dispatch('edgecontextmenu', { event, edge });
dispatch(type, { event, edge });
}
}
</script>
@@ -88,7 +92,15 @@
class:selectable={isSelectable}
data-id={id}
on:click={onClick}
on:contextmenu={onContextMenu}
on:contextmenu={(e) => {
onMouseEvent(e, 'edgecontextmenu');
}}
on:mouseenter={(e) => {
onMouseEvent(e, 'edgemouseenter');
}}
on:mouseleave={(e) => {
onMouseEvent(e, 'edgemouseleave');
}}
aria-label={ariaLabel === null
? undefined
: ariaLabel
@@ -114,6 +126,8 @@
{data}
{style}
{interactionWidth}
selectable={isSelectable}
deletable={deletable ?? true}
type={edgeType}
sourceHandleId={sourceHandle}
targetHandleId={targetHandle}
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+7
View File
@@ -22,6 +22,7 @@
export let draggable: $$Props['draggable'] = undefined;
export let selectable: $$Props['selectable'] = undefined;
export let connectable: $$Props['connectable'] = true;
export let deletable: $$Props['deletable'] = true;
export let hidden: $$Props['hidden'] = false;
export let dragging: boolean = false;
export let resizeObserver: $$Props['resizeObserver'] = null;
@@ -43,6 +44,8 @@
export let height: $$Props['height'] = undefined;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let initialized: $$Props['initialized'] = false;
export let parentId: $$Props['parentId'] = undefined;
let className: string = '';
export { className as class };
@@ -192,11 +195,15 @@
{data}
{id}
{selected}
{selectable}
{deletable}
{sourcePosition}
{targetPosition}
{zIndex}
{dragging}
{draggable}
{dragHandle}
{parentId}
type={nodeType}
isConnectable={$connectableStore}
positionAbsoluteX={positionX}
packages/svelte/src/lib/components/NodeWrapper/types.ts
+2
View File
@@ -10,6 +10,7 @@ export type NodeWrapperProps = Pick<
| 'dragging'
| 'selected'
| 'selectable'
| 'deletable'
| 'style'
| 'type'
| 'sourcePosition'
@@ -20,6 +21,7 @@ export type NodeWrapperProps = Pick<
| 'height'
| 'initialWidth'
| 'initialHeight'
| 'parentId'
> & {
measuredWidth?: number;
measuredHeight?: number;
packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
+2 -20
View File
@@ -6,16 +6,8 @@
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let type: $$Props['type'] = 'default';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -24,12 +16,10 @@
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getBezierPath({
sourceX,
@@ -40,16 +30,8 @@
targetPosition
});
// hopefully with Svelte5, we don't need this kind of workaround anymore
id;
source;
target;
type;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
<BaseEdge
packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
+2 -20
View File
@@ -6,17 +6,8 @@
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let type: $$Props['type'] = 'smoothstep';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -25,12 +16,10 @@
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX,
@@ -41,15 +30,8 @@
targetPosition
});
id;
source;
target;
type;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
<BaseEdge
packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
+2 -20
View File
@@ -6,16 +6,7 @@
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let type: $$Props['type'] = 'step';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let data: $$Props['data'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
@@ -25,12 +16,10 @@
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX,
@@ -42,15 +31,8 @@
borderRadius: 0
});
id;
source;
target;
type;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
<BaseEdge
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
+2 -24
View File
@@ -6,17 +6,8 @@
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let type: $$Props['type'] = 'straight';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -24,13 +15,9 @@
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getStraightPath({
sourceX,
@@ -39,17 +26,8 @@
targetY
});
id;
source;
target;
type;
animated;
selected;
data;
sourcePosition;
targetPosition;
sourceHandleId;
targetHandleId;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
<BaseEdge
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+6 -29
View File
@@ -7,36 +7,13 @@
interface $$Props extends NodeProps {}
export let data: $$Props['data'] = { label: 'Node' };
export let targetPosition: $$Props['targetPosition'] = Position.Top;
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let type: $$Props['type'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
width;
height;
selected;
type;
zIndex;
dragging;
dragHandle;
positionAbsoluteX;
positionAbsoluteY;
isConnectable;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
<Handle type="target" position={targetPosition} />
<Handle type="target" position={targetPosition ?? Position.Top} />
{data?.label}
<Handle type="source" position={sourcePosition} />
<Handle type="source" position={sourcePosition ?? Position.Bottom} />
packages/svelte/src/lib/components/nodes/GroupNode.svelte
+2 -31
View File
@@ -3,35 +3,6 @@
interface $$Props extends NodeProps {}
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
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 dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
width;
height;
data;
selected;
sourcePosition;
targetPosition;
type;
zIndex;
dragging;
dragHandle;
positionAbsoluteX;
positionAbsoluteY;
isConnectable;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
packages/svelte/src/lib/components/nodes/InputNode.svelte
+4 -29
View File
@@ -7,36 +7,11 @@
interface $$Props extends NodeProps {}
export let data: $$Props['data'] = { label: 'Node' };
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
width;
height;
selected;
targetPosition;
type;
zIndex;
dragging;
dragHandle;
positionAbsoluteX;
positionAbsoluteY;
isConnectable;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
{data?.label}
<Handle type="source" position={sourcePosition} />
<Handle type="source" position={sourcePosition ?? Position.Bottom} />
packages/svelte/src/lib/components/nodes/OutputNode.svelte
+4 -29
View File
@@ -7,36 +7,11 @@
interface $$Props extends NodeProps {}
export let data: $$Props['data'] = { label: 'Node' };
export let targetPosition: $$Props['targetPosition'] = Position.Top;
export let targetPosition: $$Props['targetPosition'] = undefined;
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
width;
height;
selected;
sourcePosition;
type;
zIndex;
dragging;
dragHandle;
positionAbsoluteX;
positionAbsoluteY;
isConnectable;
// this is a workaround for suppressing the warning about unused props
$$restProps;
</script>
{data?.label}
<Handle type="target" position={targetPosition} />
<Handle type="target" position={targetPosition ?? Position.Top} />
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+6 -2
View File
@@ -11,7 +11,8 @@
const {
visibleEdges,
edgesInitialized,
edges: { setDefaultOptions }
edges: { setDefaultOptions },
elementsSelectable
} = useStore();
onMount(() => {
@@ -33,7 +34,8 @@
style={edge.style}
animated={edge.animated}
selected={edge.selected}
selectable={edge.selectable}
selectable={edge.selectable ?? $elementsSelectable}
deletable={edge.deletable}
hidden={edge.hidden}
label={edge.label}
labelStyle={edge.labelStyle}
@@ -54,6 +56,8 @@
zIndex={edge.zIndex}
on:edgeclick
on:edgecontextmenu
on:edgemouseenter
on:edgemouseleave
/>
{/each}
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+2
View File
@@ -62,6 +62,7 @@
node.connectable ||
($nodesConnectable && typeof node.connectable === 'undefined')
)}
deletable={node.deletable ?? true}
positionX={node.internals.positionAbsolute.x}
positionY={node.internals.positionAbsolute.y}
positionOriginX={posOrigin.x ?? 0}
@@ -82,6 +83,7 @@
initialHeight={node.initialHeight}
measuredWidth={node.measured.width}
measuredHeight={node.measured.height}
parentId={node.parentId}
{resizeObserver}
on:nodeclick
on:nodemouseenter
packages/svelte/src/lib/container/Panel/Panel.svelte
+9 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import cc from 'classcat';
import type { PanelProps } from './types';
import { useStore } from '$lib/store';
type $$Props = PanelProps;
@@ -10,9 +11,16 @@
let className: $$Props['class'] = undefined;
export { className as class };
const { selectionRectMode } = useStore();
$: positionClasses = `${position}`.split('-');
</script>
<div class={cc(['svelte-flow__panel', className, ...positionClasses])} {style} {...$$restProps}>
<div
class={cc(['svelte-flow__panel', className, ...positionClasses])}
{style}
style:pointer-events={$selectionRectMode ? 'none' : undefined}
{...$$restProps}
>
<slot />
</div>
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+12 -4
View File
@@ -2,7 +2,7 @@
import { onMount, hasContext } from 'svelte';
import { get } from 'svelte/store';
import cc from 'classcat';
import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
import { ConnectionMode, PanOnScrollMode } from '@xyflow/system';
import { Zoom } from '$lib/container/Zoom';
import { Pane } from '$lib/container/Pane';
@@ -28,7 +28,7 @@
export let fitViewOptions: $$Props['fitViewOptions'] = 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: $$Props['initialViewport'] = undefined;
export let viewport: $$Props['viewport'] = undefined;
export let nodeTypes: $$Props['nodeTypes'] = undefined;
export let edgeTypes: $$Props['edgeTypes'] = undefined;
@@ -89,6 +89,8 @@
let clientWidth: number;
let clientHeight: number;
const initViewport = $viewport || initialViewport;
const store = hasContext(key)
? useStore()
: createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
@@ -203,7 +205,7 @@
{zoomActivationKey}
/>
<Zoom
{initialViewport}
initialViewport={initViewport}
{onMoveStart}
{onMove}
{onMoveEnd}
@@ -222,7 +224,13 @@
{selectionOnDrag}
>
<ViewportComponent>
<EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
<EdgeRenderer
on:edgeclick
on:edgecontextmenu
on:edgemouseenter
on:edgemouseleave
{defaultEdgeOptions}
/>
<ConnectionLine
containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
packages/svelte/src/lib/container/Zoom/Zoom.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
type $$Props = ZoomProps;
export let initialViewport: $$Props['initialViewport'];
export let initialViewport: $$Props['initialViewport'] = undefined;
export let onMoveStart: $$Props['onMoveStart'] = undefined;
export let onMove: $$Props['onMove'] = undefined;
export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
packages/svelte/src/lib/container/Zoom/types.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system';
export type ZoomProps = {
initialViewport: Viewport;
initialViewport?: Viewport;
panOnScrollMode: PanOnScrollMode;
onMove?: OnMove;
onMoveStart?: OnMoveStart;
packages/svelte/src/lib/store/index.ts
+2 -2
View File
@@ -210,10 +210,10 @@ export function createStore({
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
if (resetNodes) store.nodes.update((nds) => nds);
if (resetNodes) store.nodes.set(get(store.nodes));
const resetEdges = resetSelectedElements(params?.edges || get(store.edges));
if (resetEdges) store.edges.update((nds) => nds);
if (resetEdges) store.edges.set(get(store.edges));
}
store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => {
packages/svelte/src/lib/types/edges.ts
+1
View File
@@ -133,6 +133,7 @@ export type EdgeLayouted = Pick<
| 'animated'
| 'selected'
| 'selectable'
| 'deletable'
| 'label'
| 'labelStyle'
| 'interactionWidth'
packages/system/package.json
+5 -5
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/system",
"version": "0.0.26",
"version": "0.0.27",
"description": "xyflow core system that powers React Flow and Svelte Flow.",
"keywords": [
"node-based UI",
@@ -42,10 +42,10 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@types/d3": "^7.4.0",
"@types/d3-drag": "^3.0.1",
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"@types/d3-drag": "^3.0.7",
"@types/d3-selection": "^3.0.10",
"@types/d3-transition": "^3.0.8",
"@types/d3-zoom": "^3.0.8",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
packages/system/src/types/general.ts
+6 -1
View File
@@ -1,5 +1,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
import type { Selection as D3Selection } from 'd3-selection';
import type { D3DragEvent, SubjectPosition } from 'd3-drag';
import type { ZoomBehavior } from 'd3-zoom';
// this is needed for the Selection type to include the transition function :/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type { Transition } from 'd3-transition';
import type { XYPosition, Rect } from './utils';
import type { InternalNodeBase, NodeBase, NodeDragItem, NodeOrigin } from './nodes';
packages/system/src/types/nodes.ts
+12 -1
View File
@@ -87,7 +87,18 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
*/
export type NodeProps<NodeType extends NodeBase> = Pick<
NodeType,
'id' | 'data' | 'width' | 'height' | 'sourcePosition' | 'targetPosition' | 'selected' | 'dragHandle'
| 'id'
| 'data'
| 'width'
| 'height'
| 'sourcePosition'
| 'targetPosition'
| 'selected'
| 'dragHandle'
| 'selectable'
| 'deletable'
| 'draggable'
| 'parentId'
> &
Required<Pick<NodeType, 'type' | 'dragging' | 'zIndex'>> & {
/** whether a node is connectable or not */
packages/system/src/utils/general.ts
+1 -1
View File
@@ -247,7 +247,7 @@ export function evaluateAbsolutePosition(
const positionAbsolute = { ...position };
while (nextParentId) {
const parent = nodeLookup.get(parentId);
const parent = nodeLookup.get(nextParentId);
nextParentId = parent?.parentId;
if (parent) {
pnpm-lock.yaml
Generated
+458 -578
View File
File diff suppressed because it is too large Load Diff
tooling/rollup-config/package.json
+6 -6
View File
@@ -7,12 +7,12 @@
"main": "src/index.js",
"module": "src/index.js",
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-replace": "^5.0.2",
"@rollup/plugin-terser": "^0.4.3",
"@rollup/plugin-typescript": "11.0.0",
"rollup": "^3.23.0",
"@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.6",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "11.1.6",
"rollup": "^4.18.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"typescript": "^5.1.3"
}