Merge branch 'xyflow' into svelte-flow-fix-hidden
This commit is contained in:
moklick
Vendored
+7
@@ -1,4 +1,7 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
|
||||
import type { Edge, Node, SvelteFlowProps } from '@xyflow/svelte';
|
||||
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
@@ -7,6 +10,10 @@ declare global {
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
|
||||
interface FlowConfig {
|
||||
flowProps: Omit<SvelteFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<div class="logo">Svelte Flow</div>
|
||||
<select on:change={onChange} value={$page.route.id}>
|
||||
{#each routes as route}
|
||||
<option value={`/${route}`}>{route}</option>
|
||||
<option value={`/examples/${route}`}>{route}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</header>
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
import { MarkerType } from '@xyflow/svelte';
|
||||
|
||||
export default {
|
||||
flowProps: {
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
data: { label: '4' },
|
||||
position: { x: -100, y: 200 }
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
data: { label: '5' },
|
||||
position: { x: 100, y: 200 }
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
data: { label: '6' },
|
||||
position: { x: -100, y: 300 }
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
data: { label: '7' },
|
||||
position: { x: 100, y: 300 }
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
data: { label: '8' },
|
||||
position: { x: -100, y: 400 }
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
data: { label: '9' },
|
||||
position: { x: 100, y: 400 }
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
data: { label: '10' },
|
||||
position: { x: -100, y: 500 }
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
data: { label: '11' },
|
||||
position: { x: 100, y: 500 }
|
||||
}
|
||||
// {
|
||||
// id: '12',
|
||||
// data: { label: '12' },
|
||||
// position: { x: -100, y: 600 }
|
||||
// },
|
||||
// {
|
||||
// id: '13',
|
||||
// data: { label: '13' },
|
||||
// position: { x: 100, y: 600 }
|
||||
// }
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'edge-with-class',
|
||||
source: '1',
|
||||
target: '2',
|
||||
class: 'edge-class-test'
|
||||
},
|
||||
{
|
||||
id: 'edge-with-style',
|
||||
source: '1',
|
||||
target: '3',
|
||||
style: 'stroke: red;'
|
||||
},
|
||||
{
|
||||
id: 'hidden-edge',
|
||||
source: '2',
|
||||
target: '4',
|
||||
label: 'hidden',
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
id: 'animated-edge',
|
||||
source: '3',
|
||||
target: '5',
|
||||
label: 'animated',
|
||||
animated: true
|
||||
},
|
||||
{
|
||||
id: 'not-selectable-edge',
|
||||
source: '4',
|
||||
target: '6',
|
||||
label: 'not-selectable',
|
||||
selectable: false
|
||||
},
|
||||
{
|
||||
id: 'not-deletable',
|
||||
source: '5',
|
||||
target: '7',
|
||||
label: 'not-deletable',
|
||||
deletable: false
|
||||
},
|
||||
{
|
||||
id: 'z-index',
|
||||
source: '6',
|
||||
target: '8',
|
||||
label: 'z-index',
|
||||
zIndex: 3141592
|
||||
},
|
||||
{
|
||||
id: 'aria-label',
|
||||
source: '7',
|
||||
target: '9',
|
||||
label: 'aria-label',
|
||||
ariaLabel: 'aria-label-test'
|
||||
},
|
||||
{
|
||||
id: 'interaction-width',
|
||||
source: '8',
|
||||
target: '10',
|
||||
label: 'interaction-width',
|
||||
interactionWidth: 42
|
||||
},
|
||||
{
|
||||
id: 'markers',
|
||||
source: '9',
|
||||
target: '11',
|
||||
label: 'markers',
|
||||
markerEnd: { type: MarkerType.Arrow },
|
||||
markerStart: { type: MarkerType.ArrowClosed }
|
||||
}
|
||||
// {
|
||||
// id: 'updatable',
|
||||
// source: '9',
|
||||
// target: '11',
|
||||
// label: 'focusable',
|
||||
// updatable: true
|
||||
// },
|
||||
// {
|
||||
// id: 'not-focusable',
|
||||
//
|
||||
// source: '5',
|
||||
// target: '7',
|
||||
// label: 'not-focusable',
|
||||
// focusable: false
|
||||
// },
|
||||
]
|
||||
}
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import type { NodeProps } from '@xyflow/svelte';
|
||||
|
||||
type $$Props = NodeProps;
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="drag-handle custom-drag-handle" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.drag-handle {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
import DragHandleNode from './components/DragHandleNode.svelte';
|
||||
|
||||
export default {
|
||||
flowProps: {
|
||||
fitView: true,
|
||||
nodeTypes: {
|
||||
DragHandleNode
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
id: 'Node-1',
|
||||
data: { label: 'Node-1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
class: 'playwright-test-class-123',
|
||||
style: 'background-color: red;'
|
||||
},
|
||||
{
|
||||
id: 'Node-2',
|
||||
type: 'output',
|
||||
data: { label: 'Node-2' },
|
||||
position: { x: -100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: 'Node-3',
|
||||
data: { label: 'Node-3' },
|
||||
position: { x: 100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: 'Node-4',
|
||||
data: { label: 'Node-4' },
|
||||
position: { x: 0, y: 200 },
|
||||
type: 'output'
|
||||
},
|
||||
{
|
||||
id: 'drag-handle',
|
||||
data: { label: 'Drag Handle' },
|
||||
position: { x: 200, y: 0 },
|
||||
type: 'DragHandleNode',
|
||||
dragHandle: '.custom-drag-handle'
|
||||
},
|
||||
{
|
||||
id: 'notConnectable',
|
||||
type: 'output',
|
||||
data: { label: 'notConnectable' },
|
||||
position: { x: 0, y: 300 },
|
||||
connectable: false
|
||||
},
|
||||
{
|
||||
id: 'notDraggable',
|
||||
data: { label: 'notDraggable' },
|
||||
position: { x: 0, y: 400 },
|
||||
draggable: false
|
||||
},
|
||||
{
|
||||
id: 'notSelectable',
|
||||
data: { label: 'notSelectable' },
|
||||
position: { x: 0, y: 500 },
|
||||
selectable: false
|
||||
},
|
||||
{
|
||||
id: 'notDeletable',
|
||||
data: { label: 'notDeletable' },
|
||||
position: { x: 0, y: 600 },
|
||||
deletable: false
|
||||
},
|
||||
{
|
||||
id: 'hidden',
|
||||
data: { label: 'hidden' },
|
||||
position: { x: 0, y: 700 },
|
||||
hidden: true
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: 'Node-1',
|
||||
target: 'Node-2',
|
||||
label: 'edge'
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'default',
|
||||
source: 'Node-1',
|
||||
target: 'Node-3',
|
||||
label: 'edge'
|
||||
}
|
||||
]
|
||||
}
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,40 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
zoomOnScroll: false,
|
||||
// zoomActivationKey: 'Space',
|
||||
// panOnDrag: false,
|
||||
// panOnScroll: false,
|
||||
panActivationKey: 'Space',
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 }
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2'
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,37 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
minZoom: 0.25,
|
||||
maxZoom: 4,
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 }
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2'
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
} satisfies FlowConfig;
|
||||
@@ -0,0 +1,38 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
panOnScroll: true,
|
||||
initialViewport: { x: 1.23, y: 9.87, zoom: 1.234 },
|
||||
autoPanOnConnect: false,
|
||||
autoPanOnNodeDrag: false,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 }
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2'
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
} satisfies FlowConfig;
|
||||
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
|
||||
|
||||
/** @type {import('./$types').LayoutServerLoad} */
|
||||
export function load({ route }) {
|
||||
if (route.id === '/') {
|
||||
throw redirect(307, '/overview');
|
||||
}
|
||||
if (route.id === '/') {
|
||||
throw redirect(307, '/examples/overview');
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Header } from '../components/Header';
|
||||
import { Header } from '$components/Header';
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
@@ -0,0 +1 @@
|
||||
<div>this redirects to /overview</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { SvelteFlowProvider } from '@xyflow/svelte';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
|
||||
export let data: { flowConfig: FlowConfig };
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<Flow flowConfig={data.flowConfig} />
|
||||
</SvelteFlowProvider>
|
||||
@@ -0,0 +1,19 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
const flowConfigs = import.meta.glob<FlowConfig>('/src/generic-tests/**/*.ts', {
|
||||
eager: true,
|
||||
import: 'default'
|
||||
});
|
||||
|
||||
/** @type {import('./$types').PageLoad} */
|
||||
export function load({ params }) {
|
||||
const flowConfig = flowConfigs[`/src/generic-tests/${params.topic}/${params.example}.ts`];
|
||||
|
||||
if (!flowConfig) {
|
||||
throw error(404, 'Not found');
|
||||
}
|
||||
|
||||
return {
|
||||
flowConfig
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import { SvelteFlow } from '@xyflow/svelte';
|
||||
|
||||
import '@xyflow/svelte/dist/style.css';
|
||||
|
||||
export let flowConfig: FlowConfig;
|
||||
|
||||
// Create writables here so it is easier to create test cases
|
||||
const nodes = writable(flowConfig.flowProps.nodes);
|
||||
const edges = writable(flowConfig.flowProps.edges);
|
||||
|
||||
const props = { ...flowConfig.flowProps, nodes, edges };
|
||||
</script>
|
||||
|
||||
<SvelteFlow {...props} />
|
||||
Reference in New Issue
Block a user