From ca94d18a30a2832b586ffd72cba9e2c2b91f8a68 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 20 Mar 2023 18:12:08 +0100
Subject: [PATCH] feat(svelte): add color selector bg example

---
 .../example-components/Header/Header.svelte   |   1 +
 .../container/SvelteFlow/SvelteFlow.svelte    |   2 +-
 .../svelte/src/routes/customnode/+page.svelte | 119 ++++++++++++++++++
 .../customnode/CustomNode/Custom.svelte       |  21 ++++
 .../src/routes/customnode/CustomNode/index.ts |   1 +
 5 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/src/routes/customnode/+page.svelte
 create mode 100644 packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
 create mode 100644 packages/svelte/src/routes/customnode/CustomNode/index.ts

diff --git a/packages/svelte/src/example-components/Header/Header.svelte b/packages/svelte/src/example-components/Header/Header.svelte
index 901aa1ed..0894fc07 100644
--- a/packages/svelte/src/example-components/Header/Header.svelte
+++ b/packages/svelte/src/example-components/Header/Header.svelte
@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation';
 
   const routes = [
+    'customnode',
     'drag-n-drop',
     'overview',
     'stress',
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index acb8b2c7..e1cc77a9 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -95,7 +95,7 @@
 
 <div
   bind:this={domNode}
-  style={style}
+  {style}
   class={cc(['svelte-flow', className])}
   data-testid="svelte-flow__wrapper"
   on:dragover
diff --git a/packages/svelte/src/routes/customnode/+page.svelte b/packages/svelte/src/routes/customnode/+page.svelte
new file mode 100644
index 00000000..5224a809
--- /dev/null
+++ b/packages/svelte/src/routes/customnode/+page.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+    import type { ChangeEventHandler } from 'svelte/elements';
+    import { writable } from 'svelte/store';
+  import SvelteFlow, {
+    SvelteFlowProvider,
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    createNodes,
+    createEdges,
+    type NodeTypes,
+    Position
+  } from '../../lib/index';
+  import { CustomNode } from './CustomNode';
+
+  const nodeTypes: NodeTypes = {
+    colorNode: CustomNode
+  };
+
+  const bgColor = writable('#1A192B')
+  
+  const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    nodes.update((nds) =>
+      nds.map((node) => {
+        if (node.id !== '2') {
+          return node;
+        }
+
+        const color = (event.target as HTMLInputElement)?.value;
+
+        bgColor.set(color);
+
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            color,
+          },
+        };
+      })
+    );
+    }
+
+  const nodes = createNodes([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'An input node' },
+    position: { x: 0, y: 50 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'colorNode',
+    data: { onChange: onChange, color: $bgColor },
+    style: 'border: 1px solid #777; padding: 10px',
+    position: { x: 250, y: 50 },
+  },
+  {
+    id: '3',
+    type: 'output',
+    data: { label: 'Output A' },
+    position: { x: 650, y: 25 },
+    targetPosition: Position.Left,
+  },
+  {
+    id: '4',
+    type: 'output',
+    data: { label: 'Output B' },
+    position: { x: 650, y: 120 },
+    targetPosition: Position.Left,
+  },
+  ]);
+
+  const edges = createEdges([
+    {
+      id: 'e1-2',
+      source: '1',
+      target: '2',
+      animated: true,
+    },
+    {
+      id: 'e2a-3',
+      source: '2',
+      sourceHandle: 'a',
+      target: '3',
+      animated: true,
+    },
+    {
+      id: 'e2b-4',
+      source: '2',
+      sourceHandle: 'b',
+      target: '4',
+      animated: true,
+    },
+  ], { animated: true });
+</script>
+
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
+  <SvelteFlow
+    {nodeTypes}
+    style="--bgcolor: {$bgColor}"
+    fitView
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+</SvelteFlowProvider>
+
+<style>
+  :global(.svelte-flow) {
+    background: var(--bgcolor);
+  }
+</style>
diff --git a/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte b/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
new file mode 100644
index 00000000..84cfccb9
--- /dev/null
+++ b/packages/svelte/src/routes/customnode/CustomNode/Custom.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Position } from '@reactflow/system';
+  import { Handle } from '../../../lib/index';
+
+  export let data: { color: string, onChange: () => void } = { color: '#111', onChange: () => {} };
+  export let xPos: number = 0;
+  export let yPos: number = 0;
+</script>
+
+<Handle type="target" position={Position.Left} />
+<div>
+  Custom Color Picker Node: <strong>{data.color}</strong>
+</div>
+<input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
+<Handle
+  type="source"
+  position={Position.Right}
+  id="a"
+  style="top: 10px;"
+/>
+<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;"  />
diff --git a/packages/svelte/src/routes/customnode/CustomNode/index.ts b/packages/svelte/src/routes/customnode/CustomNode/index.ts
new file mode 100644
index 00000000..c22c77aa
--- /dev/null
+++ b/packages/svelte/src/routes/customnode/CustomNode/index.ts
@@ -0,0 +1 @@
+export { default as CustomNode } from './Custom.svelte';