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

Merge branch 'next' into fix/edge-props

Browse Source
This commit is contained in:
Moritz Klack
2023-11-30 13:03:41 +01:00
committed by GitHub
parent a70e25b1a2 45d11c8f2e
commit dd8ab45a46
21 changed files with 201 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/ColorMode/index.tsx
+2
View File
@@ -15,6 +15,8 @@ import {
Position, Position,
} from '@xyflow/react'; } from '@xyflow/react';
import './style.css';
const nodeDefaults = { const nodeDefaults = {
sourcePosition: Position.Right, sourcePosition: Position.Right,
targetPosition: Position.Left, targetPosition: Position.Left,
examples/react/src/examples/ColorMode/style.css
View File
examples/svelte/src/components/Header/Header.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
const routes = [ const routes = [
'add-node-on-drop', 'add-node-on-drop',
'colormode', 'color-mode',
'custom-connection-line', 'custom-connection-line',
'customnode', 'customnode',
'dagre', 'dagre',
examples/svelte/src/routes/examples/customnode/+page.svelte
+1 -1
View File
@@ -85,7 +85,7 @@
{nodes} {nodes}
{edges} {edges}
{nodeTypes} {nodeTypes}
style="--background-color: {$bgColor}" style="--xy-background-color: {$bgColor}"
fitView fitView
on:connect={onConnect} on:connect={onConnect}
> >
examples/svelte/src/routes/examples/edges/+page.svelte
+24 -3
View File
@@ -6,7 +6,8 @@
Background, Background,
BackgroundVariant, BackgroundVariant,
MiniMap, MiniMap,
MarkerType MarkerType,
type Connection
} from '@xyflow/svelte'; } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css'; import '@xyflow/svelte/dist/style.css';
@@ -146,14 +147,34 @@
} }
} }
]); ]);
const edgeTypes = { const edgeTypes = {
button: ButtonEdge, button: ButtonEdge,
customBezier: CustomBezierEdge customBezier: CustomBezierEdge
}; };
function getEdgeId(connection: Connection) {
return `edge-${connection.source}-${connection.target}}`;
}
$: console.log('edges', $edges);
</script> </script>
<SvelteFlow {nodes} {edges} {edgeTypes} fitView nodeDragThreshold={2}> <SvelteFlow
{nodes}
{edges}
{edgeTypes}
fitView
nodeDragThreshold={2}
onedgecreate={(connection) => {
console.log('on edge create', connection);
return {
...connection,
id: getEdgeId(connection)
};
}}
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
packages/react/src/additional-components/Background/Background.tsx
+2 -2
View File
@@ -55,8 +55,8 @@ function Background({
{ {
...style, ...style,
...containerStyle, ...containerStyle,
'--background-color-props': bgColor, '--xy-background-color-props': bgColor,
'--background-pattern-color-props': color, '--xy-background-pattern-color-props': color,
} as CSSProperties } as CSSProperties
} }
ref={ref} ref={ref}
packages/react/src/additional-components/MiniMap/MiniMap.tsx
+4 -4
View File
@@ -129,10 +129,10 @@ function MiniMap({
style={ style={
{ {
...style, ...style,
'--minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined, '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
'--minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined, '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
'--minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined, '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
'--minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined, '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
} as CSSProperties } as CSSProperties
} }
className={cc(['react-flow__minimap', className])} className={cc(['react-flow__minimap', className])}
packages/svelte/src/lib/components/Handle/Handle.svelte
+7 -1
View File
@@ -55,6 +55,7 @@
isValidConnection, isValidConnection,
lib, lib,
addEdge, addEdge,
onedgecreate,
panBy, panBy,
cancelConnection, cancelConnection,
updateConnection, updateConnection,
@@ -80,8 +81,13 @@
cancelConnection, cancelConnection,
panBy, panBy,
onConnect: (connection) => { onConnect: (connection) => {
addEdge(connection); const edge = $onedgecreate ? $onedgecreate(connection) : connection;
if (!edge) {
return;
}
addEdge(edge);
// @todo: should we change/ improve the stuff we are passing here? // @todo: should we change/ improve the stuff we are passing here?
// instead of source/target we could pass fromNodeId, fromHandleId, etc // instead of source/target we could pass fromNodeId, fromHandleId, etc
dispatch('connect', { connection }); dispatch('connect', { connection });
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+2
View File
@@ -71,6 +71,7 @@
export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true; export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
export let onerror: $$Props['onerror'] = undefined; export let onerror: $$Props['onerror'] = undefined;
export let ondelete: $$Props['ondelete'] = undefined; export let ondelete: $$Props['ondelete'] = undefined;
export let onedgecreate: $$Props['onedgecreate'] = undefined;
export let attributionPosition: $$Props['attributionPosition'] = undefined; export let attributionPosition: $$Props['attributionPosition'] = undefined;
export let proOptions: $$Props['proOptions'] = undefined; export let proOptions: $$Props['proOptions'] = undefined;
export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined; export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
@@ -149,6 +150,7 @@
autoPanOnNodeDrag, autoPanOnNodeDrag,
onerror, onerror,
ondelete, ondelete,
onedgecreate,
connectionMode, connectionMode,
nodeDragThreshold nodeDragThreshold
}; };
packages/svelte/src/lib/container/SvelteFlow/types.ts
+4 -1
View File
@@ -26,7 +26,8 @@ import type {
EdgeTypes, EdgeTypes,
DefaultEdgeOptions, DefaultEdgeOptions,
FitViewOptions, FitViewOptions,
OnDelete OnDelete,
OnEdgeCreate
} from '$lib/types'; } from '$lib/types';
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
@@ -89,4 +90,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
onMoveEnd?: OnMoveEnd; onMoveEnd?: OnMoveEnd;
onerror?: OnError; onerror?: OnError;
ondelete?: OnDelete; ondelete?: OnDelete;
onedgecreate?: OnEdgeCreate;
}; };
packages/svelte/src/lib/container/SvelteFlow/utils.ts
+1
View File
@@ -64,6 +64,7 @@ export type UpdatableStoreProps = {
connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>; connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
onerror?: UnwrapWritable<SvelteFlowStore['onerror']>; onerror?: UnwrapWritable<SvelteFlowStore['onerror']>;
ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>; ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
onedgecreate?: UnwrapWritable<SvelteFlowStore['onedgecreate']>;
nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>; nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
}; };
packages/svelte/src/lib/hooks/useSvelteFlow.ts
+2 -2
View File
@@ -136,12 +136,12 @@ export function useSvelteFlow(): {
) => { ) => {
const [nodeRect, node, isRect] = getNodeRect(nodeOrRect); const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
if (!nodeRect || !node) { if (!nodeRect) {
return []; return [];
} }
return (nodesToIntersect || get(nodes)).filter((n) => { return (nodesToIntersect || get(nodes)).filter((n) => {
if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) { if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
return false; return false;
} }
packages/svelte/src/lib/plugins/Background/Background.svelte
+2 -2
View File
@@ -45,8 +45,8 @@
<svg <svg
class={cc(['svelte-flow__background', className])} class={cc(['svelte-flow__background', className])}
data-testid="svelte-flow__background" data-testid="svelte-flow__background"
style:--background-color-props={bgColor} style:--xy-background-color-props={bgColor}
style:--background-pattern-color-props={patternColor} style:--xy-background-pattern-color-props={patternColor}
> >
<pattern <pattern
id={patternId} id={patternId}
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+5 -5
View File
@@ -15,11 +15,11 @@
type="button" type="button"
on:click on:click
class={cc(['svelte-flow__controls-button', className])} class={cc(['svelte-flow__controls-button', className])}
style:--controls-button-background-color-props={bgColor} style:--xy-controls-button-background-color-props={bgColor}
style:--controls-button-background-color-hover-props={bgColorHover} style:--xy-controls-button-background-color-hover-props={bgColorHover}
style:--controls-button-color-props={color} style:--xy-controls-button-color-props={color}
style:--controls-button-color-hover-props={colorHover} style:--xy-controls-button-color-hover-props={colorHover}
style:--controls-button-border-color-props={borderColor} style:--xy-controls-button-border-color-props={borderColor}
{...$$restProps} {...$$restProps}
> >
<slot class="button-svg" /> <slot class="button-svg" />
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+4 -4
View File
@@ -94,10 +94,10 @@
viewBox="{x} {y} {viewboxWidth} {viewboxHeight}" viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
role="img" role="img"
aria-labelledby={labelledBy} aria-labelledby={labelledBy}
style:--minimap-background-color-props={bgColor} style:--xy-minimap-background-color-props={bgColor}
style:--minimap-mask-color-props={maskColor} style:--xy-minimap-mask-color-props={maskColor}
style:--minimap-mask-stroke-color-props={maskStrokeColor} style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
style:--minimap-mask-stroke-width-props={maskStrokeWidth} style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
use:interactive={{ use:interactive={{
panZoom: $panZoom, panZoom: $panZoom,
viewport, viewport,
packages/svelte/src/lib/store/initial-store.ts
+4 -2
View File
@@ -39,7 +39,8 @@ import type {
Node, Node,
Edge, Edge,
FitViewOptions, FitViewOptions,
OnDelete OnDelete,
OnEdgeCreate
} from '$lib/types'; } from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils'; import { createNodesStore, createEdgesStore } from './utils';
import { initConnectionProps, type ConnectionProps } from './derived-connection-props'; import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -134,6 +135,7 @@ export const getInitialStore = ({
lib: readable<string>('svelte'), lib: readable<string>('svelte'),
onlyRenderVisibleElements: writable<boolean>(false), onlyRenderVisibleElements: writable<boolean>(false),
onerror: writable<OnError>(devWarn), onerror: writable<OnError>(devWarn),
ondelete: writable<OnDelete>(undefined) ondelete: writable<OnDelete>(undefined),
onedgecreate: writable<OnEdgeCreate>(undefined)
}; };
}; };
packages/svelte/src/lib/types/general.ts
+3 -1
View File
@@ -4,7 +4,8 @@ import type {
HandleType, HandleType,
Position, Position,
XYPosition, XYPosition,
ConnectingHandle ConnectingHandle,
Connection
} from '@xyflow/system'; } from '@xyflow/system';
import type { Node } from './nodes'; import type { Node } from './nodes';
@@ -35,3 +36,4 @@ export type HandleComponentProps = {
export type FitViewOptions = FitViewOptionsBase<Node>; export type FitViewOptions = FitViewOptionsBase<Node>;
export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void; export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;
packages/system/src/styles/base.css
+12 -12
View File
@@ -1,38 +1,38 @@
.xy-flow { .xy-flow {
--node-border-default: 1px solid #bbb; --xy-node-border-default: 1px solid #bbb;
--node-border-selected-default: 1px solid #555; --xy-node-border-selected-default: 1px solid #555;
--handle-background-color-default: #333; --xy-handle-background-color-default: #333;
--selection-background-color-default: rgba(150, 150, 180, 0.1); --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
--selection-border-default: 1px dotted rgba(155, 155, 155, 0.8); --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
} }
.xy-flow.dark { .xy-flow.dark {
--node-color-default: #f8f8f8; --xy-node-color-default: #f8f8f8;
} }
.xy-flow__handle { .xy-flow__handle {
background-color: var(--handle-background-color, var(--handle-background-color-default)); background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
} }
.xy-flow__node-input, .xy-flow__node-input,
.xy-flow__node-default, .xy-flow__node-default,
.xy-flow__node-output, .xy-flow__node-output,
.xy-flow__node-group { .xy-flow__node-group {
border: var(--node-border, var(--node-border-default)); border: var(--xy-node-border, var(--xy-node-border-default));
color: var(--node-color, var(--node-color-default)); color: var(--xy-node-color, var(--xy-node-color-default));
&.selected, &.selected,
&:focus, &:focus,
&:focus-visible { &:focus-visible {
outline: none; outline: none;
border: var(--node-border-selected, var(--node-border-selected-default)); border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
} }
} }
.xy-flow__nodesselection-rect, .xy-flow__nodesselection-rect,
.xy-flow__selection { .xy-flow__selection {
background: var(--selection-background-color, var(--selection-background-color-default)); background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--selection-border, var(--selection-border-default)); border: var(--xy-selection-border, var(--xy-selection-border-default));
} }
packages/system/src/styles/init.css
+56 -52
View File
@@ -1,51 +1,55 @@
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */ /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.xy-flow { .xy-flow {
--edge-stroke-default: #b1b1b7; --xy-edge-stroke-default: #b1b1b7;
--edge-stroke-width-default: 1; --xy-edge-stroke-width-default: 1;
--edge-stroke-selected-default: #555; --xy-edge-stroke-selected-default: #555;
--connectionline-stroke-default: #b1b1b7; --xy-connectionline-stroke-default: #b1b1b7;
--connectionline-stroke-width-default: 1; --xy-connectionline-stroke-width-default: 1;
--attribution-background-color-default: rgba(255, 255, 255, 0.5); --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
--minimap-background-color-default: #fff; --xy-minimap-background-color-default: #fff;
--minimap-mask-background-color-default: rgb(240, 240, 240, 0.6); --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
--minimap-node-background-color-default: #e2e2e2; --xy-minimap-node-background-color-default: #e2e2e2;
--minimap-node-stroke-color-default: transparent; --xy-minimap-node-stroke-color-default: transparent;
--minimap-node-stroke-width-default: 2; --xy-minimap-node-stroke-width-default: 2;
--background-color-default: transparent; --xy-background-color-default: transparent;
--background-pattern-dots-color-default: #91919a; --xy-background-pattern-dots-color-default: #91919a;
--background-pattern-lines-color-default: #eee; --xy-background-pattern-lines-color-default: #eee;
--background-pattern-cross-color-default: #e2e2e2; --xy-background-pattern-cross-color-default: #e2e2e2;
} }
.xy-flow.dark { .xy-flow.dark {
--edge-stroke-default: #3c3c3c; --xy-edge-stroke-default: #3c3c3c;
--edge-stroke-width-default: 1; --xy-edge-stroke-width-default: 1;
--edge-stroke-selected-default: #727272; --xy-edge-stroke-selected-default: #727272;
--connectionline-stroke-default: #b1b1b7; --xy-connectionline-stroke-default: #b1b1b7;
--connectionline-stroke-width-default: 1; --xy-connectionline-stroke-width-default: 1;
--attribution-background-color-default: rgba(150, 150, 150, 0.25); --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
--minimap-background-color-default: #141414; --xy-minimap-background-color-default: #141414;
--minimap-mask-background-color-default: rgb(60, 60, 60, 0.6); --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
--minimap-node-background-color-default: #2b2b2b; --xy-minimap-node-background-color-default: #2b2b2b;
--minimap-node-stroke-color-default: transparent; --xy-minimap-node-stroke-color-default: transparent;
--minimap-node-stroke-width-default: 2; --xy-minimap-node-stroke-width-default: 2;
--background-color-default: #141414; --xy-background-color-default: #141414;
--background-pattern-dots-color-default: #777; --xy-background-pattern-dots-color-default: #777;
--background-pattern-lines-color-default: #777; --xy-background-pattern-lines-color-default: #777;
--background-pattern-cross-color-default: #777; --xy-background-pattern-cross-color-default: #777;
} }
.xy-flow { .xy-flow {
background-color: var(--background-color-props, var(--background-color-default, 'transparent')); background-color: var(--xy-background-color, var(--xy-background-color-default));
}
.xy-flow__background {
background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));
} }
.xy-flow__container { .xy-flow__container {
@@ -94,14 +98,14 @@
} }
.xy-flow__edge-path { .xy-flow__edge-path {
stroke: var(--edge-stroke, var(--edge-stroke-default)); stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
stroke-width: var(--edge-stroke-width, var(--edge-stroke-width-default)); stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
fill: none; fill: none;
} }
.xy-flow__connection-path { .xy-flow__connection-path {
stroke: var(--connectionline-stroke, var(--connectionline-stroke-default)); stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
stroke-width: var(--connectionline-stroke-width, var(--connectionline-stroke-width-default)); stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
fill: none; fill: none;
} }
@@ -132,7 +136,7 @@
&.selected .xy-flow__edge-path, &.selected .xy-flow__edge-path,
&:focus .xy-flow__edge-path, &:focus .xy-flow__edge-path,
&:focus-visible .xy-flow__edge-path { &:focus-visible .xy-flow__edge-path {
stroke: var(--edge-stroke-selected, var(--edge-stroke-selected-default)); stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
} }
&-textwrapper { &-textwrapper {
@@ -266,7 +270,7 @@
.xy-flow__attribution { .xy-flow__attribution {
font-size: 10px; font-size: 10px;
background: var(--attribution-background-color, var(--attribution-background-color-default)); background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
padding: 2px 3px; padding: 2px 3px;
margin: 0; margin: 0;
@@ -293,27 +297,27 @@
} }
.xy-flow__minimap { .xy-flow__minimap {
background: var(--minimap-background-color, var(--minimap-background-color-default)); background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));
&-mask { &-mask {
fill: var( fill: var(
--minimap-mask-background-color-props, --xy-minimap-mask-background-color-props,
var(--minimap-mask-background-color, var(--minimap-mask-background-color-default)) var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
); );
} }
&-node { &-node {
fill: var( fill: var(
--minimap-node-background-color-props, --xy-minimap-node-background-color-props,
var(--minimap-node-background-color, var(--minimap-node-background-color-default)) var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
); );
stroke: var( stroke: var(
--minimap-node-stroke-color-props, --xy-minimap-node-stroke-color-props,
var(--minimap-node-stroke-color, var(--minimap-node-stroke-color-default)) var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
); );
stroke-width: var( stroke-width: var(
--minimap-node-stroke-width-props, --xy-minimap-node-stroke-width-props,
var(--minimap-node-stroke-width, var(--minimap-node-stroke-width-default)) var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
); );
} }
} }
@@ -326,22 +330,22 @@
.xy-flow__background-pattern { .xy-flow__background-pattern {
&.dots { &.dots {
fill: var( fill: var(
--background-pattern-color-props, --xy-background-pattern-color-props,
var(--background-pattern-color, var(--background-pattern-dots-color-default)) var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
); );
} }
&.lines { &.lines {
stroke: var( stroke: var(
--background-pattern-color-props, --xy-background-pattern-color-props,
var(--background-pattern-color, var(--background-pattern-lines-color-default)) var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
); );
} }
&.cross { &.cross {
stroke: var( stroke: var(
--background-pattern-color-props, --xy-background-pattern-color-props,
var(--background-pattern-color, var(--background-pattern-cross-color-default)) var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
); );
} }
} }
packages/system/src/styles/style.css
+56 -53
View File
@@ -1,46 +1,46 @@
.xy-flow { .xy-flow {
--node-color-default: inherit; --xy-node-color-default: inherit;
--node-border-default: 1px solid #1a192b; --xy-node-border-default: 1px solid #1a192b;
--node-background-color-default: #fff; --xy-node-background-color-default: #fff;
--node-group-background-color-default: rgba(240, 240, 240, 0.25); --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08); --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
--node-boxshadow-selected-default: 0 0 0 0.5px #1a192b; --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
--node-border-radius-default: 3px; --xy-node-border-radius-default: 3px;
--handle-background-color-default: #1a192b; --xy-handle-background-color-default: #1a192b;
--handle-border-color-default: #fff; --xy-handle-border-color-default: #fff;
--selection-background-color-default: rgba(0, 89, 220, 0.08); --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
--selection-border-default: 1px dotted rgba(0, 89, 220, 0.8); --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
--controls-button-background-color-default: #fefefe; --xy-controls-button-background-color-default: #fefefe;
--controls-button-background-color-hover-default: #f4f4f4; --xy-controls-button-background-color-hover-default: #f4f4f4;
--controls-button-color-default: inherit; --xy-controls-button-color-default: inherit;
--controls-button-color-hover-default: inherit; --xy-controls-button-color-hover-default: inherit;
--controls-button-border-color-default: #eee; --xy-controls-button-border-color-default: #eee;
--controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
} }
.xy-flow.dark { .xy-flow.dark {
--node-color-default: #f8f8f8; --xy-node-color-default: #f8f8f8;
--node-border-default: 1px solid #3c3c3c; --xy-node-border-default: 1px solid #3c3c3c;
--node-background-color-default: #1e1e1e; --xy-node-background-color-default: #1e1e1e;
--node-group-background-color-default: rgba(240, 240, 240, 0.25); --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08); --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
--node-boxshadow-selected-default: 0 0 0 0.5px #999; --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
--handle-background-color-default: #bebebe; --xy-handle-background-color-default: #bebebe;
--handle-border-color-default: #1e1e1e; --xy-handle-border-color-default: #1e1e1e;
--selection-background-color-default: rgba(200, 200, 220, 0.08); --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
--selection-border-default: 1px dotted rgba(200, 200, 220, 0.8); --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
--controls-button-background-color-default: #2b2b2b; --xy-controls-button-background-color-default: #2b2b2b;
--controls-button-background-color-hover-default: #3e3e3e; --xy-controls-button-background-color-hover-default: #3e3e3e;
--controls-button-color-default: #f8f8f8; --xy-controls-button-color-default: #f8f8f8;
--controls-button-color-hover-default: #fff; --xy-controls-button-color-hover-default: #fff;
--controls-button-border-color-default: #5b5b5b; --xy-controls-button-border-color-default: #5b5b5b;
--controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
} }
.xy-flow__edge { .xy-flow__edge {
@@ -67,35 +67,35 @@
.xy-flow__node-output, .xy-flow__node-output,
.xy-flow__node-group { .xy-flow__node-group {
padding: 10px; padding: 10px;
border-radius: var(--node-border-radius, var(--node-border-radius-default)); border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
width: 150px; width: 150px;
font-size: 12px; font-size: 12px;
color: var(--node-color, var(--node-color-default)); color: var(--xy-node-color, var(--xy-node-color-default));
text-align: center; text-align: center;
border: var(--node-border, var(--node-border-default)); border: var(--xy-node-border, var(--xy-node-border-default));
background-color: var(--node-background-color, var(--node-background-color-default)); background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
&.selectable { &.selectable {
&:hover { &:hover {
box-shadow: var(--node-boxshadow-hover, var(--node-boxshadow-hover-default)); box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
} }
&.selected, &.selected,
&:focus, &:focus,
&:focus-visible { &:focus-visible {
box-shadow: var(--node-boxshadow-selected, var(--node-boxshadow-selected-default)); box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
} }
} }
} }
.xy-flow__node-group { .xy-flow__node-group {
background-color: var(--node-group-background-color, var(--node-group-background-color-default)); background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
} }
.xy-flow__nodesselection-rect, .xy-flow__nodesselection-rect,
.xy-flow__selection { .xy-flow__selection {
background: var(--selection-background-color, var(--selection-background-color-default)); background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--selection-border, var(--selection-border-default)); border: var(--xy-selection-border, var(--xy-selection-border-default));
&:focus, &:focus,
&:focus-visible { &:focus-visible {
@@ -106,34 +106,37 @@
.xy-flow__handle { .xy-flow__handle {
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: var(--handle-background-color, var(--handle-background-color-default)); background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
border: 1px solid var(--handle-border-color, var(--handle-border-color-default)); border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
border-radius: 100%; border-radius: 100%;
} }
.xy-flow__controls { .xy-flow__controls {
box-shadow: var(--controls-box-shadow, var(--controls-box-shadow-default)); box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
&-button { &-button {
border: none; border: none;
background: var(--controls-button-background-color, var(--controls-button-background-color-default)); background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
border-bottom: 1px solid border-bottom: 1px solid
var( var(
--controls-button-border-color-props, --xy-controls-button-border-color-props,
var(--controls-button-border-color, var(--controls-button-border-color-default)) var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
); );
color: var(--controls-button-color-props, var(--controls-button-color, var(--controls-button-color-default))); color: var(
--xy-controls-button-color-props,
var(--xy-controls-button-color, var(--xy-controls-button-color-default))
);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:hover { &:hover {
background: var( background: var(
--controls-button-background-color-hover-props, --xy-controls-button-background-color-hover-props,
var(--controls-button-background-color-hover, var(--controls-button-background-color-hover-default)) var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
); );
color: var( color: var(
--controls-button-color-hover-props, --xy-controls-button-color-hover-props,
var(--controls-button-color-hover, var(--controls-button-color-hover-default)) var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
); );
} }
packages/system/src/utils/edges/general.ts
+9 -1
View File
@@ -112,7 +112,7 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform
} }
const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string => const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string =>
`xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`; `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => { const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
return edges.some( return edges.some(
@@ -148,6 +148,14 @@ export const addEdgeBase = <EdgeType extends EdgeBase>(
return edges; return edges;
} }
if (edge.sourceHandle === null) {
delete edge.sourceHandle;
}
if (edge.targetHandle === null) {
delete edge.targetHandle;
}
return edges.concat(edge); return edges.concat(edge);
}; };