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

feat(svelte): ssr

Browse Source
This commit is contained in:
moklick
2023-10-05 17:27:53 +02:00
parent 1c791811a9
commit f37a2d9a19
10 changed files with 111 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+2
View File
@@ -116,6 +116,8 @@
class:parent={isParent}
style:z-index={zIndex}
style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
style:width={node.dimensions?.width && `${node.dimensions?.width}px`}
style:height={node.dimensions?.height && `${node.dimensions?.height}px`}
{style}
on:click={onSelectNodeHandler}
on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
+7 -1
View File
@@ -2,8 +2,14 @@
import { onDestroy, setContext } from 'svelte';
import { createStore, key } from '$lib/store';
import type { SvelteFlowProviderProps } from './types';
const store = createStore();
type $$Props = SvelteFlowProviderProps;
export let nodes: $$Props['nodes'] = undefined;
export let edges: $$Props['edges'] = undefined;
const store = createStore({ nodes, edges });
setContext(key, {
getStore: () => store
packages/svelte/src/lib/components/SvelteFlowProvider/types.ts
+6
View File
@@ -0,0 +1,6 @@
import type { Edge, Node } from '$lib/types';
export type SvelteFlowProviderProps = {
nodes?: Node[];
edges?: Edge[];
};
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+1 -3
View File
@@ -8,8 +8,6 @@
export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
const {
width,
height,
elementsSelectable,
edgeTree,
edges: { setDefaultOptions }
@@ -21,7 +19,7 @@
</script>
{#each $edgeTree as group (group.level)}
<svg width={$width} height={$height} style="z-index: {group.level}" class="svelte-flow__edges">
<svg style="z-index: {group.level}" class="svelte-flow__edges">
{#if group.isMaxLevel} <MarkerDefinition />{/if}
<g>
{#each group.edges as edge (edge.id)}
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+6 -1
View File
@@ -16,6 +16,7 @@
import { key, useStore, createStoreContext } from '$lib/store';
import type { SvelteFlowProps } from './types';
import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
import { get } from 'svelte/store';
type $$Props = SvelteFlowProps;
@@ -63,6 +64,8 @@
export let attributionPosition: $$Props['attributionPosition'] = undefined;
export let proOptions: $$Props['proOptions'] = undefined;
export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let defaultMarkerColor = '#b1b1b7';
@@ -72,7 +75,9 @@
let domNode: HTMLDivElement;
const store = hasContext(key) ? useStore() : createStoreContext();
const store = hasContext(key)
? useStore()
: createStoreContext({ nodes: get(nodes), edges: get(edges), width, height });
onMount(() => {
const { width, height } = domNode.getBoundingClientRect();
packages/svelte/src/lib/container/SvelteFlow/types.ts
+2
View File
@@ -72,6 +72,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
attributionPosition?: PanelPosition;
proOptions?: ProOptions;
defaultEdgeOptions?: DefaultEdgeOptions;
width?: number;
height?: number;
class?: string;
style?: string;
packages/svelte/src/lib/store/index.ts
+24 -4
View File
@@ -29,8 +29,18 @@ import { getDerivedConnectionProps } from './derived-connection-props';
export const key = Symbol();
export function createStore(): SvelteFlowStore {
const store = getInitialStore();
export function createStore({
nodes,
edges,
width,
height
}: {
nodes?: Node[];
edges?: Edge[];
width?: number;
height?: number;
}): SvelteFlowStore {
const store = getInitialStore({ nodes, edges, width, height });
function setNodeTypes(nodeTypes: NodeTypes) {
store.nodeTypes.set({
@@ -333,8 +343,18 @@ export function useStore(): SvelteFlowStore {
return store.getStore();
}
export function createStoreContext() {
const store = createStore();
export function createStoreContext({
nodes,
edges,
width,
height
}: {
nodes?: Node[];
edges?: Edge[];
width?: number;
height?: number;
}) {
const store = createStore({ nodes, edges, width, height });
setContext(key, {
getStore: () => store
packages/svelte/src/lib/store/initial-store.ts
+61 -49
View File
@@ -24,7 +24,7 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
import StepEdge from '$lib/components/edges/StepEdge.svelte';
import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, FitViewOptions } from '$lib/types';
import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, Edge, FitViewOptions } from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -41,51 +41,63 @@ export const initialEdgeTypes = {
step: StepEdge
};
export const getInitialStore = () => ({
flowId: writable<string | null>(null),
nodes: createNodesStore([]),
visibleNodes: readable<Node[]>([]),
edges: createEdgesStore([]),
edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
maxZoom: writable<number>(2),
nodeOrigin: writable<NodeOrigin>([0, 0]),
nodeDragThreshold: writable<number>(0),
nodeExtent: writable<CoordinateExtent>(infiniteExtent),
translateExtent: writable<CoordinateExtent>(infiniteExtent),
autoPanOnNodeDrag: writable<boolean>(true),
autoPanOnConnect: writable<boolean>(true),
fitViewOnInit: writable<boolean>(false),
fitViewOnInitDone: writable<boolean>(false),
fitViewOptions: writable<FitViewOptions>(undefined),
panZoom: writable<PanZoomInstance | null>(null),
snapGrid: writable<SnapGrid | null>(null),
dragging: writable<boolean>(false),
selectionRect: writable<SelectionRect | null>(null),
selectionKeyPressed: writable<boolean>(false),
multiselectionKeyPressed: writable<boolean>(false),
deleteKeyPressed: writable<boolean>(false),
panActivationKeyPressed: writable<boolean>(false),
selectionRectMode: writable<string | null>(null),
selectionMode: writable<SelectionMode>(SelectionMode.Partial),
nodeTypes: writable<NodeTypes>(initialNodeTypes),
edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
viewport: writable<Viewport>({ x: 0, y: 0, zoom: 1 }),
connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
domNode: writable<HTMLDivElement | null>(null),
connection: readable<ConnectionProps>(initConnectionProps),
connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
connectionRadius: writable<number>(20),
isValidConnection: writable<IsValidConnection>(() => true),
nodesDraggable: writable<boolean>(true),
nodesConnectable: writable<boolean>(true),
elementsSelectable: writable<boolean>(true),
selectNodesOnDrag: writable<boolean>(true),
markers: readable<MarkerProps[]>([]),
defaultMarkerColor: writable<string>('#b1b1b7'),
lib: readable<string>('svelte'),
onlyRenderVisibleElements: writable<boolean>(false),
onError: writable<OnError>(devWarn)
});
export const getInitialStore = ({
nodes = [],
edges = [],
width,
height
}: {
nodes?: Node[];
edges?: Edge[];
width?: number;
height?: number;
}) => {
return {
flowId: writable<string | null>(null),
nodes: createNodesStore(nodes),
visibleNodes: readable<Node[]>([]),
edges: createEdgesStore(edges),
edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
maxZoom: writable<number>(2),
nodeOrigin: writable<NodeOrigin>([0, 0]),
nodeDragThreshold: writable<number>(0),
nodeExtent: writable<CoordinateExtent>(infiniteExtent),
translateExtent: writable<CoordinateExtent>(infiniteExtent),
autoPanOnNodeDrag: writable<boolean>(true),
autoPanOnConnect: writable<boolean>(true),
fitViewOnInit: writable<boolean>(false),
fitViewOnInitDone: writable<boolean>(false),
fitViewOptions: writable<FitViewOptions>(undefined),
panZoom: writable<PanZoomInstance | null>(null),
snapGrid: writable<SnapGrid | null>(null),
dragging: writable<boolean>(false),
selectionRect: writable<SelectionRect | null>(null),
selectionKeyPressed: writable<boolean>(false),
multiselectionKeyPressed: writable<boolean>(false),
deleteKeyPressed: writable<boolean>(false),
panActivationKeyPressed: writable<boolean>(false),
selectionRectMode: writable<string | null>(null),
selectionMode: writable<SelectionMode>(SelectionMode.Partial),
nodeTypes: writable<NodeTypes>(initialNodeTypes),
edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
viewport: writable<Viewport>({ x: 0, y: 0, zoom: 1 }),
connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
domNode: writable<HTMLDivElement | null>(null),
connection: readable<ConnectionProps>(initConnectionProps),
connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
connectionRadius: writable<number>(20),
isValidConnection: writable<IsValidConnection>(() => true),
nodesDraggable: writable<boolean>(true),
nodesConnectable: writable<boolean>(true),
elementsSelectable: writable<boolean>(true),
selectNodesOnDrag: writable<boolean>(true),
markers: readable<MarkerProps[]>([]),
defaultMarkerColor: writable<string>('#b1b1b7'),
lib: readable<string>('svelte'),
onlyRenderVisibleElements: writable<boolean>(false),
onError: writable<OnError>(devWarn)
};
};
packages/svelte/src/lib/store/utils.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import {
type Writable,
get
} from 'svelte/store';
import { updateNodes, type Transform, type Viewport, type PanZoomInstance } from '@xyflow/system';
import { updateNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
packages/svelte/src/lib/store/visible-nodes.ts
+1
View File
@@ -9,6 +9,7 @@ export function getVisibleNodes(store: SvelteFlowStoreState) {
[store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.viewport],
([nodes, onlyRenderVisibleElements, width, height, viewport]) => {
const transform: Transform = [viewport.x, viewport.y, viewport.zoom];
return onlyRenderVisibleElements
? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true)
: nodes;