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

refactor(svelte): cleanup types

Browse Source
This commit is contained in:
moklick
2023-02-22 17:26:41 +01:00
parent fb8d0d677e
commit f91ec399a7
16 changed files with 157 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/edge-utils/README.md
View File

@@ -1,10 +1,10 @@
# @reactflow/core
# @reactflow/edge-utils
Core components and util functions of React Flow.
Edge util functions of React Flow.
## Installation
```sh
npm install @reactflow/core
npm install @reactflow/edge-utils
```

16
packages/svelte/README.md
View File

@@ -1,18 +1,6 @@
# create-svelte
# SvelteFlow
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
A highly customizable Svelte component for building interactive graphs and node-based editors.
## Developing

7
packages/svelte/src/lib/actions/drag/index.ts
View File

@@ -1,9 +1,10 @@
import { get, type Writable } from 'svelte/store';
import { drag as d3Drag, type D3DragEvent, type SubjectPosition } from 'd3-drag';
import { select } from 'd3-selection';
import type { XYPosition, CoordinateExtent, Node, Transform } from '@reactflow/system';
import type { XYPosition, CoordinateExtent, Transform, Node as RFNode } from '@reactflow/system';
import { getDragItems, hasSelector, calcNextPosition } from './utils';
import type { Node } from '$lib/types';
export type UseDragData = { dx: number; dy: number };
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
@@ -69,7 +70,7 @@ export default function drag(
dragItems = dragItems.map((n) => {
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
const updatedPos = calcNextPosition(n, nextPosition, get(nodesStore));
const updatedPos = calcNextPosition(n, nextPosition, get(nodesStore) as RFNode[]);
// we want to make sure that we only fire a change event when there is a changes
hasChange =
@@ -96,7 +97,7 @@ export default function drag(
const pointerPos = getPointerPosition(event);
console.log(pointerPos);
lastPos = pointerPos;
dragItems = getDragItems(get(nodesStore), pointerPos, nodeId);
dragItems = getDragItems(get(nodesStore) as RFNode[], pointerPos, nodeId);
})
.on('drag', (event: UseDragEvent) => {
const pointerPos = getPointerPosition(event);

30
packages/svelte/src/lib/components/nodes/BaseNode.svelte
View File

@@ -1,25 +1,31 @@
<script lang="ts">
import { onMount, setContext, SvelteComponentTyped } from 'svelte';
import cc from 'classcat';
import { type XYPosition, Position } from '@reactflow/system';
import drag from '$lib/actions/drag'
import { useStore } from '$lib/store';
import DefaultNode from './DefaultNode.svelte';
import type { NodeProps } from '$lib/types';
import type { WrapNodeProps, NodeProps } from '$lib/types';
export let id: NodeProps['id'];
export let data: NodeProps['data'] = {};
export let selected: NodeProps['selected'] = false;
interface $$Props extends WrapNodeProps {}
export let id: WrapNodeProps['id'];
export let data: WrapNodeProps['data'] = {};
export let selected: WrapNodeProps['selected'] = false;
export let positionAbsolute: XYPosition = { x: 0, y: 0 };
export let position: XYPosition = { x: 0, y: 0 };
export let dragging: boolean = false;
export let resizeObserver: ResizeObserver | null = null;
export let style: any = {};
export let width: number = 0;
export let height: number = 0;
export let type: string = 'default';
export let sourcePosition: Position = Position.Bottom;
export let targetPosition: Position = Position.Top;
export let resizeObserver: WrapNodeProps['resizeObserver'] = undefined;
export let style: WrapNodeProps['style'] = undefined;
export let width: WrapNodeProps['width'] = undefined;
export let height: WrapNodeProps['height'] = undefined;
export let type: WrapNodeProps['type'] = 'default';
export let sourcePosition: WrapNodeProps['sourcePosition'] = Position.Bottom;
export let targetPosition: WrapNodeProps['targetPosition'] = Position.Top;
let className: string = '';
export { className as class };
let nodeRef: HTMLDivElement;
@@ -39,7 +45,7 @@
<div
use:drag={{ nodeId: id, nodesStore, transformStore, updateNodePositions }}
class="react-flow__node"
class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
class:initializing={!width && !height}
class:dragging={dragging}
bind:this={nodeRef}

2
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
View File

@@ -13,7 +13,7 @@
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
export let xPos: $$Props['xPos'];
export let yPos: $$Props['yPos'];
export let selected: $$Props['selected'];
export let selected: $$Props['selected'] = false;
</script>
<Handle type="target" position={targetPosition} />

0
packages/svelte/src/lib/container/NodeRenderer.svelte → packages/svelte/src/lib/container/NodeRenderer/index.svelte
View File

15
packages/svelte/src/lib/container/SvelteFlow.svelte
View File

@@ -1,24 +1,23 @@
<script lang="ts">
import { setContext, onMount, SvelteComponent } from 'svelte'
import { setContext, onMount } from 'svelte'
import cc from 'classcat';
import type { Node, Edge } from '@reactflow/system';
import { key, createStore } from '$lib/store';
import Zoom from '$lib/container/Zoom/index.svelte';
import Pane from '$lib/container/Pane/index.svelte';
import Viewport from '$lib/container/Viewport.svelte';
import NodeRenderer from '$lib/container/NodeRenderer.svelte';
import NodeRenderer from '$lib/container/NodeRenderer/index.svelte';
import EdgeRenderer from '$lib/container/EdgeRenderer/index.svelte';
import UserSelection from '$lib/components/UserSelection/index.svelte';
import NodeSelection from '$lib/components/NodeSelection/index.svelte';
import KeyHandler from '$lib/components/KeyHandler/index.svelte';
import type { NodeTypes, Node, Edge } from '$lib/types';
export let id: string = '1';
export let nodes: Node[] = [];
export let edges: Edge[] = [];
export let fitView: boolean = false;
export let nodeTypes: Record<string, SvelteComponent>
export let nodeTypes: NodeTypes;
let className: string = '';
export { className as class };
@@ -71,4 +70,10 @@
position: relative;
z-index: 0;
}
.react-flow :global(.react-flow__node-default),
.react-flow :global(.react-flow__node-input),
.react-flow :global(.react-flow__node-output) {
padding: 10px;
}
</style>

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

@@ -3,5 +3,6 @@ export { Controls, ControlButton } from '$lib/plugins/Controls';
export { Background, BackgroundVariant } from '$lib/plugins/Background';
export { Minimap } from '$lib/plugins/Minimap';
export { default as Panel } from '$lib/container/Panel/index.svelte';
export * from '$lib/types';
export default SvelteFlow;

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

@@ -1,18 +1,17 @@
import { getContext } from 'svelte';
import { derived, get, writable, type Readable, type Writable } from 'svelte/store';
import {
type Node,
type Transform,
type NodeDragItem,
type NodeDimensionUpdate,
type Edge,
Position,
internalsSymbol,
type NodeOrigin,
type D3ZoomInstance,
type D3SelectionInstance,
type ViewportHelperFunctionOptions,
type SelectionRect
type SelectionRect,
type Node as RFNode
} from '@reactflow/system';
import { fitView, getD3Transition, getDimensions } from '@reactflow/utils';
@@ -27,7 +26,7 @@ import { SelectionMode } from 'reactflow';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import InputNode from '$lib/components/nodes/InputNode.svelte';
import OutputNode from '$lib/components/nodes/OutputNode.svelte';
import type { EdgeTypes, NodeTypes } from '$lib/types';
import type { EdgeTypes, NodeTypes, Node, Edge } from '$lib/types';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
@@ -128,8 +127,12 @@ export function createStore({
.map((edge) => {
const sourceNode = $nodes.find((node) => node.id === edge.source);
const targetNode = $nodes.find((node) => node.id === edge.target);
const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(
sourceNode as RFNode
);
const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(
targetNode as RFNode
);
if (!sourceIsValid || !targetIsValid) {
return null;
@@ -261,7 +264,7 @@ export function createStore({
return fitView(
{
nodes: get(nodesStore),
nodes: get(nodesStore) as RFNode[],
width: get(widthStore),
height: get(heightStore),
minZoom: 0.2,

24
packages/svelte/src/lib/types/edges.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { SvelteComponentTyped } from 'svelte';
import type { Position } from '@reactflow/system';
export type Edge = {
id: string;
type: string;
source: string;
target: string;
sourceHandle?: string;
targetHandle?: string;
selected?: boolean;
};
export type EdgeProps = {
id: string;
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourcePosition?: Position;
targetPosition?: Position;
};
export type EdgeTypes = Record<string, typeof SvelteComponentTyped<EdgeProps>>;

11
packages/svelte/src/lib/types/general.ts Normal file
View File

@@ -0,0 +1,11 @@
import type { Node, NodeTypes } from './nodes';
import type { Edge } from './edges';
export type SvelteFlowProps = {
nodes: Node[];
edges: Edge[];
nodeTypes?: NodeTypes;
fitView?: boolean;
class?: string;
style?: string;
};

30
packages/svelte/src/lib/types/index.ts
View File

@@ -1,27 +1,5 @@
import type { SvelteComponentTyped } from 'svelte';
import type { Position } from '@reactflow/system';
export type { Position, XYPosition } from '@reactflow/system';
export type NodeProps<NodeData extends Record<string, unknown> = Record<string, never>> = {
id: string;
data: NodeData;
xPos: number;
yPos: number;
selected: boolean;
isConnectable: boolean;
sourcePosition: Position;
targetPosition: Position;
};
export type NodeTypes = Record<string, typeof SvelteComponentTyped<NodeProps>>;
export type EdgeProps = {
id: string;
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourcePosition?: Position;
targetPosition?: Position;
};
export type EdgeTypes = Record<string, typeof SvelteComponentTyped<EdgeProps>>;
export * from './nodes';
export * from './edges';
export * from './general';

41
packages/svelte/src/lib/types/nodes.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { SvelteComponentTyped } from 'svelte';
import type { internalsSymbol, NodeHandleBounds, Position, XYPosition } from '@reactflow/system';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type Node<NodeData = any> = {
id: string;
type: string;
data: NodeData;
position: XYPosition;
sourcePosition?: Position;
targetPosition?: Position;
width?: number;
height?: number;
selected?: boolean;
class?: string;
style?: string;
// only used internally
[internalsSymbol]?: {
z?: number;
handleBounds?: NodeHandleBounds;
isParent?: boolean;
};
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type NodeProps<NodeData = any> = Pick<
Node<NodeData>,
'id' | 'data' | 'selected' | 'sourcePosition' | 'targetPosition'
> & {
xPos: number;
yPos: number;
isConnectable?: boolean;
};
export type WrapNodeProps = Node & {
resizeObserver?: ResizeObserver;
};
export type NodeTypes = Record<string, typeof SvelteComponentTyped<NodeProps>>;

26
packages/svelte/src/routes/+page.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import type { Node, Edge } from '@reactflow/system';
import type { Node, Edge } from '../lib/types';
import SvelteFlow, { Controls, Background, BackgroundVariant, Minimap } from '../lib/index';
import CustomNode from '../customnodes/Custom.svelte';
@@ -44,7 +43,7 @@
// }
// }
const nodes: Node[] = [{
const nodes: Node<{ label: string }>[] = [{
id: '1',
type: 'input',
data: { label: 'Input Node' },
@@ -54,12 +53,26 @@
type: 'default',
data: { label: 'Node' },
position: { x: 0, y: 150 },
}, {
id: 'A',
type: 'default',
data: { label: 'Styled with class' },
class: 'custom-style',
position: { x: 150, y: 150 },
}, {
id: '3',
type: 'output',
data: { label: 'Output Node' },
position: { x: 300, y: 150 },
}, {
},
{
id: 'B',
type: 'default',
data: { label: 'Styled with style' },
style: 'border: 2px solid #ff5050;',
position: { x: 450, y: 150 },
},
{
id: '4',
type: 'custom',
data: { label: 'Custom Node' },
@@ -94,4 +107,9 @@
:root {
--node-width: 50;
}
:global(.react-flow .custom-style) {
background: #ff5050;
color: white;
}
</style>

6
packages/system/README.md
View File

@@ -1,10 +1,10 @@
# @reactflow/core
# @reactflow/system
Core components and util functions of React Flow.
Types for React Flow.
## Installation
```sh
npm install @reactflow/core
npm install @reactflow/system
```

6
packages/utils/README.md
View File

@@ -1,10 +1,10 @@
# @reactflow/core
# @reactflow/utils
Core components and util functions of React Flow.
Util functions of React Flow.
## Installation
```sh
npm install @reactflow/core
npm install @reactflow/utils
```