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

Merge branch 'next' into svelte-edge-type-change

Browse Source
This commit is contained in:
Moritz Klack
2024-04-03 16:57:47 +02:00
committed by GitHub
parent 6857b90bd7 989bbf2ec6
commit 60bb72d592
21 changed files with 136 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/svelte/src/routes/examples/overview/+page.svelte
+1
View File
@@ -189,6 +189,7 @@
autoPanOnNodeDrag
connectionMode={ConnectionMode.Strict}
attributionPosition={'top-center'}
deleteKey={['Backspace', 'd']}
>
<Controls>
<ControlButton slot="before">xy</ControlButton>
packages/react/src/hooks/useKeyPress.ts
+2
View File
@@ -109,11 +109,13 @@ export function useKeyPress(
target?.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
target?.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
window.addEventListener('blur', resetHandler);
window.addEventListener('contextmenu', resetHandler);
return () => {
target?.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
target?.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
window.removeEventListener('blur', resetHandler);
window.removeEventListener('contextmenu', resetHandler);
};
}
}, [keyCode, setKeyPressed]);
packages/svelte/.eslintignore
+1
View File
@@ -2,6 +2,7 @@
node_modules
/build
/.svelte-kit
dist
/package
.env
.env.*
packages/svelte/.prettierrc
-1
View File
@@ -3,6 +3,5 @@
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
packages/svelte/CHANGELOG.md
+5 -5
View File
@@ -16,7 +16,7 @@
## ⚠️ Breaking changes
- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps<AppNode>`
- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps<AppNode>`
## Patch changes
@@ -45,7 +45,7 @@
- fix `on:panecontextmenu`
- add `role="button"` to `<EdgeLabel />` to prevent a11y warnings
- don't delete node when input is focused and user presses Backspace + Ctrl (or any other mod key)
- `useHandleConnections`: use context node id when no node id is passed
- `useHandleConnections`: use context node id when no node id is passed
- don't trigger drag start / end when node is not draggable
## 0.0.35
@@ -87,7 +87,7 @@
### ⚠️ Breaking
- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)`
- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)`
## 0.0.32
@@ -106,7 +106,7 @@
### Features
- add `onbeforedelete` handler to prevent/ manage deletions
- TSDocs for hooks and some types
- TSDocs for hooks and some types
### Patch changes
@@ -302,4 +302,4 @@ This very first release comes with lots of features already:
- draggable, selectable and deletable nodes
- support for custom `nodeTypes` and `edgeTypes`
- basic viewport settings like `fitView`, `minZoom` and `maxZoom`
- additional components: `<MiniMap />`, `<Controls />` & `<Background />`
- additional components: `<MiniMap />`, `<Controls />` & `<Background />`
packages/svelte/README.md
+6 -19
View File
@@ -10,7 +10,7 @@ Svelte Flow is a highly customizable component for building interactive graphs a
☣️ **Svelte Flow is still alpha and currently under heavy development. The API is relatively stable but some things might change.** ☣️
[🚀 Getting Started](https://svelteflow.dev/learn) | [📖 Documentation](https://svelteflow.dev/api-reference/svelte-flow) | [📺 Examples](https://svelteflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW)
[🚀 Getting Started](https://svelteflow.dev/learn) | [📖 Documentation](https://svelteflow.dev/api-reference/svelte-flow) | [📺 Examples](https://svelteflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW)
</div>
@@ -18,7 +18,7 @@ Svelte Flow is a highly customizable component for building interactive graphs a
- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
- **Customizable:** Different [node](https://svelteflow.dev/examples) and [edge types](https://svelteflow.dev/examples/edges/edge-types) and support for custom nodes with multiple handles and custom edges
- **Fast rendering:** Only nodes that have changed are re-rendered
- **Fast rendering:** Only nodes that have changed are re-rendered
- **Hooks and Utils:** [Hooks](https://svelteflow.dev/api-reference/hooks) for handling nodes, edges and the viewport and graph [helper functions](https://svelteflow.dev/api-reference/utils)
- **Plugin Components:** [Background](https://svelteflow.dev/api-reference/components/background), [MiniMap](https://svelteflow.dev/api-reference/components/minimap) and [Controls](https://svelteflow.dev/api-reference/components/controls)
- **Reliable**: Written in [Typescript](https://www.typescriptlang.org) and tested with [Playwright](https://www.playwright.dev)
@@ -38,18 +38,12 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes
```svelte
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
Background,
BackgroundVariant,
MiniMap,
} from '@xyflow/svelte';
import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';
// you need to import the styles for Svelte Flow to work
// if you just want to load the basic styleds, you can import '@xyflow/svelte/dist/base.css'
import '@xyflow/svelte/dist/style.css'
import '@xyflow/svelte/dist/style.css';
// We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position. This also makes it easier to update nodes in user land.
const nodes = writable([
{
@@ -78,12 +72,7 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes
]);
</script>
<SvelteFlow
{nodes}
{edges}
fitView
on:nodeclick={(event) => console.log('on node click', event)}
>
<SvelteFlow {nodes} {edges} fitView on:nodeclick={(event) => console.log('on node click', event)}>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<MiniMap />
@@ -102,7 +91,6 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes
And of course, we love Github stars ⭐
## Development
If you want to check out the current version you need to run the following command from the root directory:
@@ -113,7 +101,6 @@ If you want to check out the current version you need to run the following comma
You can now access the examples under http://127.0.0.1:5173
## Maintainers
Svelte Flow is maintained by the team behind [xyflow](https://xyflow.com). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs).
packages/svelte/src/lib/components/Attribution/Attribution.svelte
+2 -2
View File
@@ -4,8 +4,8 @@
type $$Props = AttributionProps;
export let proOptions: AttributionProps['proOptions'] = undefined;
export let position: AttributionProps['position'] = 'bottom-right';
export let proOptions: $$Props['proOptions'] = undefined;
export let position: $$Props['position'] = 'bottom-right';
</script>
{#if !proOptions?.hideAttribution}
packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
-2
View File
@@ -2,8 +2,6 @@
import portal from '$lib/actions/portal';
import { useStore } from '$lib/store';
type $$Props = {};
const { domNode } = useStore();
</script>
packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts
+1 -1
View File
@@ -1 +1 @@
export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';
export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+1 -1
View File
@@ -80,7 +80,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
{#if !hidden}
<svg style:zIndex>
<svg style:z-index={zIndex}>
<g
class={cc(['svelte-flow__edge', className])}
class:animated
packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+49 -103
View File
@@ -1,5 +1,9 @@
<script lang="ts">
import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
import {
shortcut,
type ShortcutEventDetail,
type ShortcutModifierDefinition
} from '@svelte-put/shortcut';
import { isInputDOMNode, isMacOs } from '@xyflow/system';
import { useStore } from '$lib/store';
@@ -19,7 +23,8 @@
multiselectionKeyPressed,
deleteKeyPressed,
panActivationKeyPressed,
zoomActivationKeyPressed
zoomActivationKeyPressed,
selectionRect
} = useStore();
function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
@@ -40,140 +45,81 @@
return isKeyObject(key) ? key.key : key;
}
$: selectionKeyDefinition = {
key: getKeyString(selectionKey),
modifier: getModifier(selectionKey)
};
function getShortcutTrigger(
key: KeyDefinition | KeyDefinition[] | null | undefined,
callback: (detail: ShortcutEventDetail) => void
) {
const keys = Array.isArray(key) ? key : [key];
return keys.map((_key) => {
const keyString = getKeyString(_key);
return {
key: keyString,
modifier: getModifier(_key),
enabled: keyString !== null,
callback
};
});
}
$: multiSelectionKeyDefinition = {
key: getKeyString(multiSelectionKey),
modifier: getModifier(multiSelectionKey)
};
$: deleteKeyDefinition = {
key: getKeyString(deleteKey),
modifier: getModifier(deleteKey)
};
$: panActivationKeyDefinition = {
key: getKeyString(panActivationKey),
modifier: getModifier(panActivationKey)
};
$: zoomActivationKeyDefinition = {
key: getKeyString(zoomActivationKey),
modifier: getModifier(zoomActivationKey)
};
function resetKeysAndSelection() {
selectionRect.set(null);
selectionKeyPressed.set(false);
multiselectionKeyPressed.set(false);
deleteKeyPressed.set(false);
panActivationKeyPressed.set(false);
zoomActivationKeyPressed.set(false);
}
</script>
<svelte:window
on:blur={resetKeysAndSelection}
on:contextmenu={resetKeysAndSelection}
use:shortcut={{
trigger: [
{
...selectionKeyDefinition,
enabled: selectionKeyDefinition.key !== null,
callback: () => selectionKeyPressed.set(true)
}
],
trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(true)),
type: 'keydown'
}}
use:shortcut={{
trigger: [
{
...selectionKeyDefinition,
enabled: selectionKeyDefinition.key !== null,
callback: () => selectionKeyPressed.set(false)
}
],
trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(false)),
type: 'keyup'
}}
use:shortcut={{
trigger: [
{
...multiSelectionKeyDefinition,
enabled: multiSelectionKeyDefinition.key !== null,
callback: () => multiselectionKeyPressed.set(true)
}
],
trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(true)),
type: 'keydown'
}}
use:shortcut={{
trigger: [
{
...multiSelectionKeyDefinition,
enabled: multiSelectionKeyDefinition.key !== null,
callback: () => multiselectionKeyPressed.set(false)
}
],
trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(false)),
type: 'keyup'
}}
use:shortcut={{
trigger: [
{
...deleteKeyDefinition,
enabled: deleteKeyDefinition.key !== null,
callback: (detail) => {
const isModifierKey =
detail.originalEvent.ctrlKey ||
detail.originalEvent.metaKey ||
detail.originalEvent.shiftKey;
if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
deleteKeyPressed.set(true);
}
}
trigger: getShortcutTrigger(deleteKey, (detail) => {
const isModifierKey =
detail.originalEvent.ctrlKey ||
detail.originalEvent.metaKey ||
detail.originalEvent.shiftKey;
if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
deleteKeyPressed.set(true);
}
],
}),
type: 'keydown'
}}
use:shortcut={{
trigger: [
{
...deleteKeyDefinition,
enabled: deleteKeyDefinition.key !== null,
callback: () => deleteKeyPressed.set(false)
}
],
trigger: getShortcutTrigger(deleteKey, () => deleteKeyPressed.set(false)),
type: 'keyup'
}}
use:shortcut={{
trigger: [
{
...panActivationKeyDefinition,
enabled: panActivationKeyDefinition.key !== null,
callback: () => panActivationKeyPressed.set(true)
}
],
trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(true)),
type: 'keydown'
}}
use:shortcut={{
trigger: [
{
...panActivationKeyDefinition,
enabled: panActivationKeyDefinition.key !== null,
callback: () => panActivationKeyPressed.set(false)
}
],
trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(false)),
type: 'keyup'
}}
use:shortcut={{
trigger: [
{
...zoomActivationKeyDefinition,
enabled: zoomActivationKeyDefinition.key !== null,
callback: () => zoomActivationKeyPressed.set(true)
}
],
trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(true)),
type: 'keydown'
}}
use:shortcut={{
trigger: [
{
...zoomActivationKeyDefinition,
enabled: zoomActivationKeyDefinition.key !== null,
callback: () => zoomActivationKeyPressed.set(false)
}
],
trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(false)),
type: 'keyup'
}}
/>
packages/svelte/src/lib/components/KeyHandler/types.ts
+5 -5
View File
@@ -1,9 +1,9 @@
import type { KeyDefinition } from '$lib/types';
export type KeyHandlerProps = {
selectionKey?: KeyDefinition | null;
multiSelectionKey?: KeyDefinition | null;
deleteKey?: KeyDefinition | null;
panActivationKey?: KeyDefinition | null;
zoomActivationKey?: KeyDefinition | null;
selectionKey?: KeyDefinition | KeyDefinition[] | null;
multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
deleteKey?: KeyDefinition | KeyDefinition[] | null;
panActivationKey?: KeyDefinition | KeyDefinition[] | null;
zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
};
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+44 -40
View File
@@ -1,7 +1,7 @@
<svelte:options immutable />
<script lang="ts">
import { createEventDispatcher, setContext, onDestroy } from 'svelte';
import { setContext, onDestroy } from 'svelte';
import { get, writable } from 'svelte/store';
import cc from 'classcat';
import { errorMessages, Position } from '@xyflow/system';
@@ -10,40 +10,39 @@
import { useStore } from '$lib/store';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import type { NodeWrapperProps } from './types';
import type { Node } from '$lib/types';
import { getNodeInlineStyleDimensions } from './utils';
import { createNodeEventDispatcher } from '$lib';
interface $$Props extends NodeWrapperProps {}
export let node: NodeWrapperProps['node'];
export let id: NodeWrapperProps['id'];
export let data: NodeWrapperProps['data'] = {};
export let selected: NodeWrapperProps['selected'] = false;
export let draggable: NodeWrapperProps['draggable'] = undefined;
export let selectable: NodeWrapperProps['selectable'] = undefined;
export let connectable: NodeWrapperProps['connectable'] = true;
export let hidden: NodeWrapperProps['hidden'] = false;
export let node: $$Props['node'];
export let id: $$Props['id'];
export let data: $$Props['data'] = {};
export let selected: $$Props['selected'] = false;
export let draggable: $$Props['draggable'] = undefined;
export let selectable: $$Props['selectable'] = undefined;
export let connectable: $$Props['connectable'] = true;
export let hidden: $$Props['hidden'] = false;
export let dragging: boolean = false;
export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
export let style: NodeWrapperProps['style'] = undefined;
export let type: NodeWrapperProps['type'] = 'default';
export let isParent: NodeWrapperProps['isParent'] = false;
export let positionX: NodeWrapperProps['positionX'];
export let positionY: NodeWrapperProps['positionY'];
export let positionOriginX: NodeWrapperProps['positionOriginX'];
export let positionOriginY: NodeWrapperProps['positionOriginY'];
export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
export let zIndex: NodeWrapperProps['zIndex'];
export let computedWidth: NodeWrapperProps['computedWidth'] = undefined;
export let computedHeight: NodeWrapperProps['computedHeight'] = undefined;
export let initialWidth: NodeWrapperProps['initialWidth'] = undefined;
export let initialHeight: NodeWrapperProps['initialHeight'] = undefined;
export let width: NodeWrapperProps['width'] = undefined;
export let height: NodeWrapperProps['height'] = undefined;
export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
export let initialized: NodeWrapperProps['initialized'] = false;
export let resizeObserver: $$Props['resizeObserver'] = null;
export let style: $$Props['style'] = undefined;
export let type: $$Props['type'] = 'default';
export let isParent: $$Props['isParent'] = false;
export let positionX: $$Props['positionX'];
export let positionY: $$Props['positionY'];
export let positionOriginX: $$Props['positionOriginX'];
export let positionOriginY: $$Props['positionOriginY'];
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let zIndex: $$Props['zIndex'];
export let computedWidth: $$Props['computedWidth'] = undefined;
export let computedHeight: $$Props['computedHeight'] = undefined;
export let initialWidth: $$Props['initialWidth'] = undefined;
export let initialHeight: $$Props['initialHeight'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let initialized: $$Props['initialized'] = false;
let className: string = '';
export { className as class };
@@ -57,7 +56,15 @@
} = store;
let nodeRef: HTMLDivElement;
let prevNodeRef: HTMLDivElement;
let prevNodeRef: HTMLDivElement | null = null;
const nodeTypeValid = !!$nodeTypes[nodeType];
if (!nodeTypeValid) {
console.warn('003', errorMessages['error003'](type!));
}
const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
const dispatchNodeEvent = createNodeEventDispatcher();
const connectableStore = writable(connectable);
let prevType: string | undefined = undefined;
@@ -121,20 +128,17 @@
setContext('svelteflow__node_connectable', connectableStore);
$: {
if (nodeRef) {
if (!prevNodeRef) {
resizeObserver?.observe(nodeRef);
prevNodeRef = nodeRef;
} else if (prevNodeRef !== nodeRef || (!computedWidth && !computedHeight)) {
resizeObserver?.unobserve(prevNodeRef);
resizeObserver?.observe(nodeRef);
prevNodeRef = nodeRef;
}
if (resizeObserver && nodeRef !== prevNodeRef) {
prevNodeRef && resizeObserver.unobserve(prevNodeRef);
nodeRef && resizeObserver.observe(nodeRef);
prevNodeRef = nodeRef;
}
}
onDestroy(() => {
resizeObserver?.unobserve(nodeRef);
if (prevNodeRef) {
resizeObserver?.unobserve(prevNodeRef);
}
});
function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
-2
View File
@@ -2,8 +2,6 @@
import portal from '$lib/actions/portal';
import { useStore } from '$lib/store';
type $$Props = {};
const { domNode } = useStore();
</script>
packages/svelte/src/lib/container/Pane/Pane.svelte
+1 -1
View File
@@ -178,7 +178,7 @@
// onSelectionEnd?.(event);
}
const onMouseLeave = (event: MouseEvent) => {
const onMouseLeave = () => {
if ($selectionRectMode === 'user') {
selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null);
// onSelectionEnd?.(event);
packages/svelte/src/lib/container/SvelteFlow/types.ts
+5 -5
View File
@@ -86,27 +86,27 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
/** Pressing down this key you can select multiple elements with a selection box.
* @default 'Shift'
*/
selectionKey?: KeyDefinition | null;
selectionKey?: KeyDefinition | KeyDefinition[] | null;
/** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
*
* By setting this prop to null you can disable this functionality.
* @default 'Space'
*/
panActivationKey?: KeyDefinition | null;
panActivationKey?: KeyDefinition | KeyDefinition[] | null;
/** Pressing down this key deletes all selected nodes & edges.
* @default 'Backspace'
*/
deleteKey?: KeyDefinition | null;
deleteKey?: KeyDefinition | KeyDefinition[] | null;
/** Pressing down this key you can select multiple elements by clicking.
* @default 'Meta' for macOS, "Ctrl" for other systems
*/
multiSelectionKey?: KeyDefinition | null;
multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
/** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
*
* By setting this prop to null you can disable this functionality.
* @default 'Meta' for macOS, "Ctrl" for other systems
* */
zoomActivationKey?: KeyDefinition | null;
zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
/** If set, initial viewport will show all nodes & edges */
fitView?: boolean;
/** Options to be used in combination with fitView
packages/svelte/src/lib/container/SvelteFlow/utils.ts
+1 -2
View File
@@ -76,8 +76,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
// @ts-expect-error @todo: how to fix this TS error?
store[prop].set(update);
}
});
packages/svelte/src/lib/hooks/useNodesData.ts
+2 -1
View File
@@ -20,7 +20,8 @@ export function useNodesData<NodeType extends Node = Node>(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useNodesData(nodeIds: any): any {
const { nodes, nodeLookup } = useStore();
let prevNodesData: any = [];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let prevNodesData: any[] = [];
return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
const nextNodesData = [];
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+3 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts" context="module">
declare const window: any;
declare const window: Window | undefined;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
func instanceof Function ? func : () => func;
</script>
@@ -61,6 +61,7 @@
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
const nodeClassFunc = getAttrFunction(nodeClass);
const shapeRendering =
// @ts-expect-error - TS doesn't know about chrome
typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+1 -1
View File
@@ -52,7 +52,7 @@
$: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
$: _style = style ?? '';
$: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;
$: controlStyle = color ? `${_style} ${colorStyleProp}: ${color};` : _style;
onMount(() => {
if (resizeControlRef) {
packages/svelte/src/lib/store/derived-connection-props.ts
+6 -5
View File
@@ -6,7 +6,8 @@ import {
ConnectionLineType,
ConnectionMode,
Position,
internalsSymbol
internalsSymbol,
type HandleElement
} from '@xyflow/system';
import type { SvelteFlowStoreState } from './types';
@@ -68,16 +69,16 @@ export function getDerivedConnectionProps(
const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
const handleBoundsStrict =
fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || [];
const handleBoundsLoose = handleBoundsStrict
const handleBoundsLoose: HandleElement[] | undefined | null = handleBoundsStrict
? handleBoundsStrict
: fromHandleBounds?.[
connection?.connectionStartHandle?.type === 'source' ? 'target' : 'source'
]!;
];
const handleBounds =
connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
const fromHandle = connection.connectionStartHandle?.handleId
? handleBounds.find((d) => d.id === connection.connectionStartHandle?.handleId)
: handleBounds[0];
? handleBounds?.find((d) => d.id === connection.connectionStartHandle?.handleId)
: handleBounds?.[0];
const fromHandleX = fromHandle
? fromHandle.x + fromHandle.width / 2
: (fromNode?.computed?.width ?? 0) / 2;