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

clean up BaseEdge, fix store functions

Browse Source
This commit is contained in:
peterkogo
2024-12-10 12:12:21 +01:00
parent 9199cbd278
commit 0cd68914c1
16 changed files with 91 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/svelte/src/lib/components/BaseEdge/index.ts
View File

@@ -1 +0,0 @@
export { default as BaseEdge } from './BaseEdge.svelte';

23
packages/svelte/src/lib/components/BaseEdge/types.ts
View File

@@ -1,23 +0,0 @@
import type { EdgeProps } from '$lib/types';
export type BaseEdgeProps = Pick<
EdgeProps,
'interactionWidth' | 'label' | 'labelStyle' | 'style'
> & {
id?: string;
/** SVG path of the edge */
path: string;
/** The x coordinate of the label */
labelX?: number;
/** The y coordinate of the label */
labelY?: number;
/** Marker at start of edge
* @example 'url(#arrow)'
*/
markerStart?: string;
/** Marker at end of edge
* @example 'url(#arrow)'
*/
markerEnd?: string;
class?: string;
};

1
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
View File

@@ -4,7 +4,6 @@
import { getMarkerId } from '@xyflow/system';
import { useStore } from '$lib/store';
import { BezierEdgeInternal } from '$lib/components/edges';
import { useHandleEdgeSelect } from '$lib/hooks/useHandleEdgeSelect';

2
packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte → packages/svelte/src/lib/components/edges/BaseEdge.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import cc from 'classcat';
import type { BaseEdgeProps } from './types';
import type { BaseEdgeProps } from '../../types';
import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
let {

15
packages/svelte/src/lib/components/edges/BezierEdge.svelte
View File

@@ -1,25 +1,24 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { BezierEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
id,
interactionWidth,
label,
labelStyle,
style,
markerStart,
markerEnd,
markerStart,
pathOptions,
interactionWidth,
sourcePosition,
sourceX,
sourceY,
sourcePosition,
style,
targetPosition,
targetX,
targetY,
targetPosition
targetY
}: BezierEdgeProps = $props();
let [path, labelX, labelY] = $derived(

21
packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
View File

@@ -1,21 +1,22 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
interactionWidth,
label,
labelStyle,
markerStart,
markerEnd,
interactionWidth,
style
markerStart,
sourcePosition,
sourceX,
sourceY,
style,
targetPosition,
targetX,
targetY
}: EdgeProps = $props();
let [path, labelX, labelY] = $derived(

12
packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
View File

@@ -1,24 +1,24 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { SmoothStepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
id,
interactionWidth,
label,
labelStyle,
style,
markerStart,
markerEnd,
markerStart,
pathOptions,
interactionWidth,
sourcePosition,
sourceX,
sourceY,
sourcePosition,
targetPosition,
targetX,
targetY,
targetPosition
targetY
}: SmoothStepEdgeProps = $props();
let [path, labelX, labelY] = $derived(

20
packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
View File

@@ -1,22 +1,22 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
interactionWidth,
label,
labelStyle,
markerStart,
style,
markerEnd,
interactionWidth,
style
markerStart,
sourcePosition,
sourceX,
sourceY,
targetPosition,
targetX,
targetY
}: EdgeProps = $props();
let [path, labelX, labelY] = $derived(

2
packages/svelte/src/lib/components/edges/StepEdge.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { StepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
id,

2
packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
sourceX,

2
packages/svelte/src/lib/components/edges/StraightEdge.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { StraightEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
id,

2
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import BaseEdge from './BaseEdge.svelte';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
let {
sourceX,

4
packages/svelte/src/lib/components/edges/index.ts
View File

@@ -5,7 +5,7 @@
// @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
// both are quite similar, it's just about 1-2 props that are different
export { default as BezierEdge } from './BezierEdge.svelte';
export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
export { default as BezierEdgeInternal } from './BezierEdge.svelte';
export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
@@ -15,3 +15,5 @@ export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
export { default as StepEdge } from './StepEdge.svelte';
export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';
export { default as BaseEdge } from './BaseEdge.svelte';

9
packages/svelte/src/lib/index.ts
View File

@@ -7,8 +7,13 @@ export * from '$lib/container/Panel';
export * from '$lib/components/SvelteFlowProvider';
export * from '$lib/components/EdgeLabelRenderer';
export * from '$lib/components/ViewportPortal';
export * from '$lib/components/BaseEdge';
export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
export {
BezierEdge,
StepEdge,
SmoothStepEdge,
StraightEdge,
BaseEdge
} from '$lib/components/edges';
export * from '$lib/components/Handle';
export * from '$lib/components/EdgeLabel';

122
packages/svelte/src/lib/store/index.ts
View File

@@ -46,7 +46,6 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
function addEdge(edgeParams: Edge | Connection) {
// TODO: let's see
store.edges = addEdgeUtil(edgeParams, store.edges);
}
@@ -215,33 +214,29 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
}
function resetSelectedElements(elements: Node[] | Edge[]) {
let elementsChanged = false;
elements.forEach((element) => {
if (element.selected) {
element.selected = false;
elementsChanged = true;
}
});
return elementsChanged;
}
function setPaneClickDistance(distance: number) {
store.panZoom?.setClickDistance(distance);
}
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
resetSelectedElements(params?.nodes || store.nodes);
// if (resetNodes) store.nodes.set(get(store.nodes));
function deselect<T extends Node | Edge>(element: T) {
return element.selected ? { ...element, selected: false } : element;
}
resetSelectedElements(params?.edges || store.edges);
// if (resetEdges) store.edges.set(get(store.edges));
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const nodesToDeselect = params?.nodes ? new Set(params.nodes.map((node) => node.id)) : null;
store.nodes = store.nodes.map((node) =>
!nodesToDeselect || nodesToDeselect.has(node.id) ? deselect(node) : node
);
const edgesToDeselect = params?.edges ? new Set(params.edges.map((node) => node.id)) : null;
store.edges = store.edges.map((edge) =>
!edgesToDeselect || edgesToDeselect.has(edge.id) ? deselect(edge) : edge
);
}
function addSelectedNodes(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed;
// store.nodes.update((ns) =>
store.nodes = store.nodes.map((node) => {
const nodeWillBeSelected = ids.includes(node.id);
const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
@@ -251,7 +246,6 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
node.selected = selected;
return { ...node };
}
return node;
});
@@ -265,30 +259,23 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
function addSelectedEdges(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed;
// store.edges.update((edges) =>
store.edges.forEach((edge) => {
store.edges = store.edges.map((edge) => {
const edgeWillBeSelected = ids.includes(edge.id);
const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
edge.selected = selected;
// return edge;
if (edge.selected !== selected) {
return { ...edge, selected };
}
return edge;
});
// );
if (!isMultiSelection) {
// store.nodes.update((ns) =>
store.nodes.forEach((node) => {
node.selected = false;
// return node;
});
// );
store.nodes = store.nodes.map(deselect);
}
}
function handleNodeSelection(id: string) {
const node = store.nodes?.find((n) => n.id === id);
// const node = store.nodeLookup.get(id)?.internals.userNode;
const node = store.nodeLookup.get(id);
if (!node) {
console.warn('012', errorMessages['error012'](id));
@@ -357,73 +344,4 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
} satisfies SvelteFlowStoreActions);
return storeWithActions;
// return {
// // state
// ...store,
// // derived state
// // visibleEdges: getVisibleEdges(store),
// // visibleNodes: getVisibleNodes(store),
// // connection: derived([_connection, store.viewport], ([connection, viewport]) => {
// // return connection.inProgress
// // ? {
// // ...connection,
// // to: pointToRendererPoint(connection.to, [viewport.x, viewport.y, viewport.zoom])
// // }
// // : { ...connection };
// // }),
// // markers: derived(
// // [store.edges, store.defaultMarkerColor, store.flowId],
// // ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
// // ),
// // initialized: (() => {
// // let initialized = false;
// // const initialNodesLength = get(store.nodes).length;
// // const initialEdgesLength = get(store.edges).length;
// // return derived(
// // [store.nodesInitialized, store.edgesInitialized, store.viewportInitialized],
// // ([nodesInitialized, edgesInitialized, viewportInitialized]) => {
// // // If it was already initialized, return true from then on
// // if (initialized) return initialized;
// // // if it hasn't been initialised check if it's now
// // if (initialNodesLength === 0) {
// // initialized = viewportInitialized;
// // } else if (initialEdgesLength === 0) {
// // initialized = viewportInitialized && nodesInitialized;
// // } else {
// // initialized = viewportInitialized && nodesInitialized && edgesInitialized;
// // }
// // return initialized;
// // }
// // );
// // })(),
// // actions
// syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
// syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
// // syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
// setNodeTypes,
// setEdgeTypes,
// addEdge,
// updateNodePositions,
// updateNodeInternals,
// zoomIn,
// zoomOut,
// fitView: (options?: FitViewOptions) => fitView(options),
// setMinZoom,
// setMaxZoom,
// setTranslateExtent,
// setPaneClickDistance,
// unselectNodesAndEdges,
// addSelectedNodes,
// addSelectedEdges,
// handleNodeSelection,
// panBy,
// updateConnection,
// cancelConnection,
// reset
// };
}

22
packages/svelte/src/lib/types/edges.ts
View File

@@ -23,6 +23,28 @@ export type Edge<
class?: string;
};
export type BaseEdgeProps = Pick<
EdgeProps,
'interactionWidth' | 'label' | 'labelStyle' | 'style'
> & {
id?: string;
/** SVG path of the edge */
path: string;
/** The x coordinate of the label */
labelX?: number;
/** The y coordinate of the label */
labelY?: number;
/** Marker at start of edge
* @example 'url(#arrow)'
*/
markerStart?: string;
/** Marker at end of edge
* @example 'url(#arrow)'
*/
markerEnd?: string;
class?: string;
};
type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<
EdgeData,
'smoothstep'