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

port more examples

Browse Source
This commit is contained in:
peterkogo
2024-12-17 16:52:14 +01:00
parent 2e03bbe063
commit 72d3e014b7
13 changed files with 61 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { useSvelteFlow } from '@xyflow/svelte';
const onDragStart = (event: DragEvent, nodeType: string) => {
if (!event.dataTransfer) {
return null;
@@ -9,8 +7,6 @@
event.dataTransfer.setData('application/svelteflow', nodeType);
event.dataTransfer.effectAllowed = 'move';
};
// const { zoomIn, zoomOut, fitView, viewport, nodes } = $derived(useSvelteFlow());
</script>
<aside>

10
examples/svelte/src/routes/examples/interaction/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
@@ -13,7 +12,7 @@
import '@xyflow/svelte/dist/style.css';
const nodes = writable([
let nodes = $state.raw([
{
id: '1',
type: 'input',
@@ -25,7 +24,7 @@
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }
]);
const edges = writable([
let edges = $state.raw([
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }
]);
@@ -54,8 +53,8 @@
</script>
<SvelteFlow
{nodes}
{edges}
bind:nodes
bind:edges
elementsSelectable={isSelectable}
nodesConnectable={isConnectable}
nodesDraggable={isDraggable}
@@ -66,6 +65,7 @@
{zoomOnDoubleClick}
{panOnDrag}
{onMoveEnd}
fitView
>
<MiniMap />
<Controls />

27
examples/svelte/src/routes/examples/intersections/Flow.svelte
View File

@@ -1,31 +1,30 @@
<script lang="ts">
import { SvelteFlow, Background, Controls, useSvelteFlow } from '@xyflow/svelte';
import type { Edge, Node } from '@xyflow/svelte';
import { writable } from 'svelte/store';
import '@xyflow/svelte/dist/style.css';
import { initialNodes, initialEdges } from './nodes-and-edges';
const nodes = writable<Node[]>(initialNodes);
const edges = writable<Edge[]>(initialEdges);
let nodes = $state.raw<Node[]>(initialNodes);
let edges = $state.raw<Edge[]>(initialEdges);
const { getIntersectingNodes } = $derived(useSvelteFlow());
function onNodeDrag({ targetNode }) {
const onNodeDrag = ({ targetNode }) => {
if (targetNode) {
const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
$nodes.forEach((n) => {
n.class = intersections.includes(n.id) ? 'highlight' : '';
});
$nodes = $nodes;
nodes = nodes.map((node) => ({
...node,
class: intersections.includes(node.id) ? 'highlight' : ''
}));
}
}
};
</script>
<div style="height:100vh;">
<SvelteFlow {nodes} {edges} fitView class="intersection-flow" onnodedrag={onNodeDrag}>
<SvelteFlow bind:nodes bind:edges fitView class="intersection-flow" onnodedrag={onNodeDrag}>
<Background />
<Controls />
</SvelteFlow>
@@ -48,10 +47,10 @@
}
:global(
.intersection-flow .svelte-flow__node.selected,
.intersection-flow .svelte-flow__node:hover,
.intersection-flow .svelte-flow__node:focus
) {
.intersection-flow .svelte-flow__node.selected,
.intersection-flow .svelte-flow__node:hover,
.intersection-flow .svelte-flow__node:focus
) {
box-shadow: 6px 6px 0 1px rgba(0, 0, 0, 0.7);
background-color: #eee;
}

9
examples/svelte/src/routes/examples/node-resizer/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { SvelteFlow, Controls, Panel, type Edge } from '@xyflow/svelte';
import DefaultResizer from './DefaultResizer.svelte';
@@ -19,9 +18,9 @@
const nodeStyle = 'border: 1px solid #222; font-size: 10px; background-color: #ddd;';
const edges = writable<Edge[]>([]);
let edges = $state.raw<Edge[]>([]);
const nodes = writable<ResizeNode[]>([
let nodes = $state.raw<ResizeNode[]>([
{
id: '1',
type: 'defaultResizer',
@@ -132,8 +131,8 @@
</script>
<SvelteFlow
{nodes}
{edges}
bind:nodes
bind:edges
{nodeTypes}
minZoom={0.2}
maxZoom={5}

10
examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
View File

@@ -1,14 +1,8 @@
<script lang="ts">
import { Handle, Position, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
import { Handle, Position, type NodeProps, NodeResizeControl, type Node } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps<ResizeNode>;
interface Props {
data: $$Props['data'];
}
let { data }: Props = $props();
let { data }: NodeProps<ResizeNode> = $props();
</script>
<NodeResizeControl

9
examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
View File

@@ -2,14 +2,7 @@
import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps<ResizeNode>;
interface Props {
data: $$Props['data'];
selected?: $$Props['selected'];
}
let { data, selected = undefined }: Props = $props();
let { data, selected = undefined }: NodeProps<ResizeNode> = $props();
</script>
<NodeResizer

8
examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
View File

@@ -2,13 +2,7 @@
import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps<ResizeNode>;
interface Props {
data: $$Props['data'];
}
let { data }: Props = $props();
let { data }: NodeProps<ResizeNode> = $props();
</script>
<NodeResizeControl

8
examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
View File

@@ -2,13 +2,7 @@
import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps<ResizeNode>;
interface Props {
data: $$Props['data'];
}
let { data }: Props = $props();
let { data }: NodeProps<ResizeNode> = $props();
</script>
<NodeResizeControl

13
examples/svelte/src/routes/examples/node-toolbar/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Background,
@@ -11,7 +10,7 @@
import '@xyflow/svelte/dist/style.css';
import CustomNode from './CustomNode.svelte';
import CustomNode, { type CustomNodeType } from './CustomNode.svelte';
import SelectedNodesToolbar from './SelectedNodesToolbar.svelte';
const nodeTypes: NodeTypes = {
@@ -19,9 +18,9 @@
};
const positions = ['top', 'right', 'bottom', 'left'];
const alignments = ['start', 'center', 'end'];
const alignments: ('start' | 'center' | 'end')[] = ['start', 'center', 'end'];
const initialNodes: Node[] = [
const initialNodes: CustomNodeType[] = [
{
id: 'default-node',
type: 'custom',
@@ -51,12 +50,12 @@
const initialEdges: Edge[] = [];
const nodes = writable<Node[]>(initialNodes);
const edges = writable<Edge[]>(initialEdges);
let nodes = $state.raw<Node[]>(initialNodes);
let edges = $state.raw<Edge[]>(initialEdges);
</script>
<div style="height: 100vh;">
<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView>
<Background />
<SelectedNodesToolbar />
</SvelteFlow>

13
examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
View File

@@ -1,7 +1,18 @@
<script lang="ts" module>
import { type Node } from '@xyflow/svelte';
export type CustomNodeType = Node<{
toolbarVisible?: boolean;
toolbarPosition: Position;
toolbarAlign?: 'start' | 'center' | 'end';
label: string;
}>;
</script>
<script lang="ts">
import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
let { data }: NodeProps = $props();
let { data }: NodeProps<CustomNodeType> = $props();
</script>
<NodeToolbar

4
examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
View File

@@ -3,7 +3,9 @@
const nodes = useNodes();
let selectedNodeIds = $derived($nodes.filter((node) => node.selected).map((node) => node.id));
let selectedNodeIds = $derived(
nodes.current.filter((node) => node.selected).map((node) => node.id)
);
let isVisible = $derived(selectedNodeIds.length > 1);
</script>

16
packages/svelte/src/lib/hooks/useNodesEdges.ts → packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts
View File

@@ -7,8 +7,12 @@ import { useStore } from '$lib/store';
* @returns store with an array of nodes
*/
export function useNodes() {
const { nodes } = useStore();
return nodes;
const { nodes } = $derived(useStore());
return {
get current() {
return nodes;
}
};
}
/**
@@ -18,6 +22,10 @@ export function useNodes() {
* @returns store with an array of edges
*/
export function useEdges() {
const { edges } = useStore();
return edges;
const { edges } = $derived(useStore());
return {
get current() {
return edges;
}
};
}

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

@@ -34,7 +34,7 @@ export * from '$lib/utils';
export * from '$lib/hooks/useSvelteFlow';
export * from '$lib/hooks/useUpdateNodeInternals';
export * from '$lib/hooks/useConnection.svelte';
export * from '$lib/hooks/useNodesEdges';
export * from '$lib/hooks/useNodesEdges.svelte';
export * from '$lib/hooks/useHandleConnections.svelte';
export * from '$lib/hooks/useNodesData';
export * from '$lib/hooks/useInternalNode';