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

chore(svelte): cleanup examples

Browse Source
This commit is contained in:
moklick
2024-05-02 15:00:39 +02:00
parent bd95cc1b59
commit d4bfea9b27
18 changed files with 85 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
View File

@@ -1,34 +1,35 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
type $$Props = NodeProps;
export let isConnectable: $$Props['isConnectable'];
export let isConnectable: $$Props['isConnectable'];
$$restProps;
const DEFAULT_HANDLE_STYLE = 'width: 10px; height: 10px; bottom: -5px;';
const handleStyle = 'width: 10px; height: 10px; bottom: -5px;';
</script>
<div style="background: #DDD; padding: 25px">
<div>Node</div>
<Handle
type="source"
id="red"
position={Position.Bottom}
style={DEFAULT_HANDLE_STYLE + 'left: 15%; background: red;'}
{isConnectable}
/>
<Handle
type="source"
position={Position.Bottom}
id="blue"
style={DEFAULT_HANDLE_STYLE + 'left: 50%; background: blue;'}
{isConnectable}
/>
<Handle
type="source"
position={Position.Bottom}
id="orange"
style={DEFAULT_HANDLE_STYLE + 'left: 85%; background: orange;'}
{isConnectable}
/>
<div>Node</div>
<Handle
type="source"
id="red"
position={Position.Bottom}
style={handleStyle + 'left: 15%; background: red;'}
{isConnectable}
/>
<Handle
type="source"
position={Position.Bottom}
id="blue"
style={handleStyle + 'left: 50%; background: blue;'}
{isConnectable}
/>
<Handle
type="source"
position={Position.Bottom}
id="orange"
style={handleStyle + 'left: 85%; background: orange;'}
{isConnectable}
/>
</div>

2
examples/svelte/src/routes/examples/customnode/CustomNode.svelte
View File

@@ -6,6 +6,8 @@
export let data: $$Props['data'];
$$restProps;
const { colorStore } = data;
</script>

25
examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
View File

@@ -4,27 +4,18 @@
type $$Props = EdgeProps;
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$$restProps;
$: [edgePath, labelX, labelY] = getBezierPath({
sourceX,
@@ -34,18 +25,6 @@
targetY,
targetPosition
});
source;
target;
animated;
selected;
data;
label;
labelStyle;
markerStart;
interactionWidth;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge path={edgePath} {markerEnd} {style} />

19
examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte
View File

@@ -3,14 +3,8 @@
type $$Props = EdgeProps;
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -19,23 +13,12 @@
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
id;
source;
target;
animated;
selected;
data;
sourcePosition;
targetPosition;
sourceHandleId;
targetHandleId;
$$restProps;
</script>
<BezierEdge

28
examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte
View File

@@ -33,33 +33,7 @@
console.log('connections', id, $connections);
}
export let data: $$Props['data'];
export let targetPosition: $$Props['targetPosition'] = Position.Top;
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
data;
targetPosition;
sourcePosition;
width;
height;
selected;
type;
zIndex;
dragging;
dragHandle;
positionAbsoluteX;
positionAbsoluteY;
isConnectable;
$$restProps;
</script>
<div class="custom">

29
examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
View File

@@ -21,34 +21,7 @@
console.log('disconnect source', connection);
}
export let data: $$Props['data'];
export let targetPosition: $$Props['targetPosition'] = Position.Top;
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsolute: $$Props['positionAbsolute'] = {
x: 0,
y: 0
};
export let isConnectable: $$Props['isConnectable'] = undefined;
data;
targetPosition;
sourcePosition;
width;
height;
selected;
type;
zIndex;
dragging;
dragHandle;
positionAbsolute;
isConnectable;
$$restProps;
</script>
<div class="custom">

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

@@ -1,13 +1,14 @@
<script lang="ts">
import { SvelteFlow, Controls, Panel, type Node, type Edge } from '@xyflow/svelte';
import { writable } from 'svelte/store';
import { SvelteFlow, Controls, Panel, type Edge } from '@xyflow/svelte';
import DefaultResizer from './DefaultResizer.svelte';
import CustomResizer from './CustomResizer.svelte';
import VerticalResizer from './VerticalResizer.svelte';
import HorizontalResizer from './HorizontalResizer.svelte';
import { writable } from 'svelte/store';
import '@xyflow/svelte/dist/style.css';
import type { ResizeNode } from './types';
const nodeTypes = {
defaultResizer: DefaultResizer,
@@ -20,7 +21,7 @@
const edges = writable<Edge[]>([]);
const nodes = writable<Node[]>([
const nodes = writable<ResizeNode[]>([
{
id: '1',
type: 'defaultResizer',

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

@@ -1,9 +1,10 @@
<script lang="ts">
import { Handle, Position, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps;
type $$Props = NodeProps<ResizeNode>;
export let data: $$Props['data'] = undefined;
export let data: $$Props['data'];
</script>
<NodeResizeControl

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

@@ -1,9 +1,10 @@
<script lang="ts">
import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps;
type $$Props = NodeProps<ResizeNode>;
export let data: $$Props['data'] = undefined;
export let data: $$Props['data'];
export let selected: $$Props['selected'] = undefined;
</script>

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

@@ -1,9 +1,10 @@
<script lang="ts">
import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps;
type $$Props = NodeProps<ResizeNode>;
export let data: $$Props['data'] = undefined;
export let data: $$Props['data'];
</script>
<NodeResizeControl

24
examples/svelte/src/routes/examples/node-resizer/ResizeIcon.tsx
View File

@@ -1,24 +0,0 @@
function ResizeIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 24 24"
strokeWidth="2"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'absolute', right: 2, bottom: 2 }}
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="16 20 20 20 20 16" />
<line x1="14" y1="14" x2="20" y2="20" />
<polyline points="8 4 4 4 4 8" />
<line x1="4" y1="4" x2="10" y2="10" />
</svg>
);
}
export default ResizeIcon;

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

@@ -1,9 +1,10 @@
<script lang="ts">
import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
type $$Props = NodeProps;
type $$Props = NodeProps<ResizeNode>;
export let data: $$Props['data'] = undefined;
export let data: $$Props['data'];
</script>
<NodeResizeControl

21
examples/svelte/src/routes/examples/node-resizer/types.ts Normal file
View File

@@ -0,0 +1,21 @@
import {
type Node,
type ShouldResize,
type OnResizeStart,
type OnResize,
type OnResizeEnd
} from '@xyflow/svelte';
export type ResizeNode = Node<{
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
shouldResize?: ShouldResize;
onResizeStart?: OnResizeStart;
onResize?: OnResize;
onResizeEnd?: OnResizeEnd;
keepAspectRatio?: boolean;
label?: string;
isVisible?: boolean;
}>;

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

@@ -2,6 +2,7 @@
import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
type $$Props = NodeProps;
$$restProps;
export let data: $$Props['data'];
</script>

5
examples/svelte/src/routes/examples/overview/CustomNode.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
import { Handle, Position, type BuiltInNode, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
type $$Props = NodeProps<BuiltInNode>;
$$restProps;
export let data: { label: string } = { label: 'Node' };
export let positionAbsoluteX: number = 0;

5
examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import type { NodeProps } from '@xyflow/svelte';
import type { BuiltInNode, NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
type $$Props = NodeProps<BuiltInNode>;
$$restProps;
export let data: { label: string } = { label: 'Node' };
</script>

9
examples/svelte/src/routes/examples/subflows/DebugNode.svelte
View File

@@ -1,16 +1,19 @@
<script lang="ts">
import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
export let id: string;
export let positionAbsolute: XYPosition = { x: 0, y: 0 };
export let positionAbsoluteX: number = 0;
export let positionAbsoluteY: number = 0;
export let zIndex: number = 0;
$$restProps;
</script>
<Handle type="target" position={Position.Top} />
<div>{id}</div>
<div>
x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
</div>
<Handle type="source" position={Position.Bottom} />

1
examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
View File

@@ -4,6 +4,7 @@
type $$Props = NodeProps;
export let id: $$Props['id'];
$$restProps;
const updateNodeInternals = useUpdateNodeInternals();