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

fix examples

Browse Source
This commit is contained in:
peterkogo
2025-04-16 16:41:02 +02:00
parent b429c871a8
commit 13fdd15f59
17 changed files with 65 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
View File

@@ -1,13 +1,18 @@
<script lang="ts">
import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
import {
NodeToolbar,
type NodeProps,
type Node,
Handle,
Position,
type Align
} from '@xyflow/svelte';
type $$Props = NodeProps;
interface Props {
data: $$Props['data'];
}
let { data }: Props = $props();
let {
data
}: NodeProps<
Node<{ label: string; toolbarPosition: Position; toolbarAlign: Align; toolbarVisible: boolean }>
> = $props();
</script>
<NodeToolbar

2
examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type { NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
let {}: NodeProps = $props();
</script>
<div class="container">

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

@@ -9,6 +9,7 @@
};
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<aside>
<div class="label">You can drag these nodes to the pane on the left.</div>
<div

2
examples/svelte/src/routes/examples/edges/+page.svelte
View File

@@ -150,7 +150,7 @@
{edgeTypes}
fitView
nodeDragThreshold={2}
onedgecreate={(connection) => {
onbeforeconnect={(connection) => {
console.log('on edge create', connection);
return {

12
examples/svelte/src/routes/examples/figma/+page.svelte
View File

@@ -16,9 +16,9 @@
const panOnDrag = [1, 2];
const onMoveStart = (e: any) => console.log('move start', e);
const onMove = (e: any) => console.log('move', e);
const onMoveEnd = (e: any) => console.log('move end', e);
const onmovestart = (e: any) => console.log('move start', e);
const onmove = (e: any) => console.log('move', e);
const onmoveend = (e: any) => console.log('move end', e);
let nodes = $state.raw([
{
@@ -47,9 +47,9 @@
selectionOnDrag
panOnScroll
{panOnDrag}
{onMoveStart}
{onMove}
{onMoveEnd}
{onmovestart}
{onmove}
{onmoveend}
>
<Controls />
<Background variant={BackgroundVariant.Dots} />

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

@@ -29,14 +29,14 @@
{ id: 'e1-3', source: '1', target: '3' }
]);
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
const onnodedragstart = (_: MouseEvent, node: Node) => console.log('drag start', node);
const onnodedragstop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onnodeclick = (_: MouseEvent, node: Node) => console.log('click', node);
const onedgeclick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const onpaneclick = (event: MouseEvent) => console.log('onPaneClick', event);
const onpanescroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
const onpanecontextmenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
const onmoveend: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
let isSelectable = $state(false);
let isDraggable = $state(false);
@@ -64,7 +64,7 @@
{panOnScrollMode}
{zoomOnDoubleClick}
{panOnDrag}
{onMoveEnd}
{onmoveend}
fitView
>
<MiniMap />

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

@@ -10,21 +10,25 @@
let edges = $state.raw<Edge[]>(initialEdges);
const { getIntersectingNodes } = $derived(useSvelteFlow());
const onNodeDrag = ({ targetNode }) => {
if (targetNode) {
const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
nodes = nodes.map((node) => ({
...node,
class: intersections.includes(node.id) ? 'highlight' : ''
}));
}
};
</script>
<div style="height:100vh;">
<SvelteFlow bind:nodes bind:edges fitView class="intersection-flow" onnodedrag={onNodeDrag}>
<SvelteFlow
bind:nodes
bind:edges
fitView
class="intersection-flow"
onnodedrag={({ targetNode }) => {
if (targetNode) {
const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
nodes = nodes.map((node) => ({
...node,
class: intersections.includes(node.id) ? 'highlight' : ''
}));
}
}}
>
<Background />
<Controls />
</SvelteFlow>

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

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

2
examples/svelte/src/routes/examples/usenodesdata/+page.svelte
View File

@@ -5,7 +5,7 @@
type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
type ResultNodeType = Node<{}, 'result'>;
export function isTextNode(node: any): node is TextNodeType | UppercaseNode {
export function isTextNode(node: any): node is TextNodeType | UppercaseNodeType {
return !node || !node.type ? false : node.type === 'text' || node.type === 'uppercase';
}

3
examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
View File

@@ -4,7 +4,8 @@
Position,
useNodeConnections,
useNodesData,
type NodeProps
type NodeProps,
type Node
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';

13
examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
View File

@@ -1,5 +1,12 @@
<script lang="ts">
import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
import {
Background,
Controls,
MiniMap,
Panel,
SvelteFlow,
type SvelteFlowProps
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
@@ -9,10 +16,10 @@
let nodes = $state.raw(flowConfig.flowProps?.nodes ?? []);
let edges = $state.raw(flowConfig.flowProps?.edges ?? []);
const flowProps = { ...flowConfig.flowProps };
const flowProps: SvelteFlowProps = { ...flowConfig.flowProps };
</script>
<SvelteFlow bind:nodes bind:edges {...flowProps}>
<SvelteFlow {...flowProps} bind:nodes bind:edges>
{#if flowConfig.panelProps}
<Panel {...flowConfig.panelProps} />
{/if}

10
packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { portal } from '$lib/actions/portal';
let { children }: { children?: Snippet } = $props();
</script>
<div use:portal={'edgelabel'}>
{@render children?.()}
</div>

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

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

4
packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
View File

@@ -36,7 +36,7 @@
onmove,
onmovestart,
onmoveend,
onerror,
onflowerror,
ondelete,
onbeforedelete,
onbeforeconnect,
@@ -49,8 +49,8 @@
onreconnectend,
onclickconnectstart,
onclickconnectend,
clickConnect,
oninit,
clickConnect,
fitView,
fitViewOptions,
nodeOrigin,

2
packages/svelte/src/lib/container/SvelteFlow/types.ts
View File

@@ -379,7 +379,7 @@ export type SvelteFlowProps = NodeEvents &
* Instead of exploding your application, we log a message to the console and then call this event handler.
* You might use it for additional logging or to show a message to the user.
*/
onerror?: OnError;
onflowerror?: OnError;
/** This handler gets called when the user deletes nodes or edges.
* @example
* onDelete={({nodes, edges}) => {

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

@@ -5,7 +5,6 @@ export * from '$lib/container/SvelteFlow/types';
// components
export * from '$lib/container/Panel';
export * from '$lib/components/SvelteFlowProvider';
export * from '$lib/components/EdgeLabelRenderer';
export * from '$lib/components/ViewportPortal';
export {
BezierEdge,

2
packages/svelte/src/lib/store/initial-store.svelte.ts
View File

@@ -285,7 +285,7 @@ export const getInitialStore = (signals: StoreSignals) => {
});
});
onlyRenderVisibleElements: boolean = $derived(signals.props.onlyRenderVisibleElements ?? false);
onerror: OnError = $derived(signals.props.onerror ?? devWarn);
onerror: OnError = $derived(signals.props.onflowerror ?? devWarn);
ondelete?: OnDelete = $derived(signals.props.ondelete);
onbeforedelete?: OnBeforeDelete = $derived(signals.props.onbeforedelete);