Added Svelte Hero Example

apps/svelte-examples/package.json

@@ -34,12 +34,15 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.0.4",
+    "@threlte/core": "^6.1.0",
     "@types/dagre": "^0.7.48",
+    "@types/three": "^0.155.1",
     "@xyflow/svelte": "0.0.24",
     "@xyflow/system": "^0.0.8",
     "elkjs": "^0.8.2",
     "html-to-image": "^1.11.11",
     "svelte-feather-icons": "^4.0.1",
+    "three": "^0.158.0",
     "xy-tsconfig": "workspace:*"
   }
 }

apps/svelte-examples/src/routes/examples/misc/hero-flow/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';
+
+  import './tailwind.css';
+  import '@xyflow/svelte/dist/style.css';
+
+  import { initialNodes, initialEdges } from './nodes-and-edges';
+  import ColorPickerNode from './ColorPickerNode.svelte';
+  import SliderNode from './SliderNode.svelte';
+  import ThrelteNode from './ThrelteNode.svelte';
+  import SwitcherNode from './SwitcherNode.svelte';
+
+  const nodes = writable<Node[]>(initialNodes);
+  const edges = writable<Edge[]>(initialEdges);
+
+  const nodeTypes = {
+    colorpicker: ColorPickerNode,
+    slider: SliderNode,
+    hero: ThrelteNode,
+    switcher: SwitcherNode
+  };
+</script>
+
+<div class="h-screen">
+  <SvelteFlow {nodes} {nodeTypes} {edges} fitView>
+    <Background />
+  </SvelteFlow>
+</div>

apps/svelte-examples/src/routes/examples/misc/hero-flow/ColorPickerNode.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+
+  let value = $flowState.color;
+  $: {
+    $flowState.color = value;
+  }
+</script>
+
+<NodeWrapper {label}>
+  <div class="flex items-center space-x-2">
+    <input bind:value class="nodrag border-md w-6 h-6" type="color" />
+    <p>{value}</p>
+  </div>
+  <Handle type="source" position={Position.Right} />
+</NodeWrapper>

apps/svelte-examples/src/routes/examples/misc/hero-flow/NodeWrapper.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let label: string;
+</script>
+
+<div
+  class="flex flex-col border border-solid border-gray-200 h-full rounded-2xl bg-white/70 shadow-[0_7px_9px_0_rgba(0,0,0,0.02)]"
+>
+  <div
+    class="text-xs px-3 py-2 border-b border-solid border-gray-200 font-mono font-semibold rounded-t-2xl family-mono text-[#0F172A]"
+  >
+    {label}
+  </div>
+  <div
+    class="relative bg-white p-3 flex rounded-b-2xl family-sans font-light text-xs text-[#757575]"
+  >
+    <slot />
+  </div>
+</div>

apps/svelte-examples/src/routes/examples/misc/hero-flow/SliderNode.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+
+  let value = $flowState.zoom;
+  $: {
+    $flowState.zoom = value;
+  }
+
+  const min = 0;
+  const max = 40;
+</script>
+
+<NodeWrapper {label}>
+  <Handle type="source" position={Position.Right} />
+  <input
+    class="nodrag accent-[#ff4000]"
+    style="direction: rtl;"
+    type="range"
+    {min}
+    {max}
+    bind:value
+  />
+</NodeWrapper>

apps/svelte-examples/src/routes/examples/misc/hero-flow/SwitcherNode.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+
+  const options = ['cube', 'pyramid'];
+
+  let selectedShape = $flowState.shape;
+  $: {
+    $flowState.shape = selectedShape;
+  }
+</script>
+
+<NodeWrapper {label}>
+  <Handle type="source" position={Position.Right} />
+  <div class="flex flex-col nodrag">
+    {#each options as option}
+      <label class="flex">
+        <input
+          bind:group={selectedShape}
+          class="accent-[#ff4000]"
+          type="radio"
+          value={option}
+          checked={selectedShape === option}
+        />
+        <span class="ml-2">{option}</span>
+      </label>
+    {/each}
+  </div>
+</NodeWrapper>

apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteNode.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Canvas } from '@threlte/core';
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+  import NodeWrapper from './NodeWrapper.svelte';
+  import type { NodeData } from './nodes-and-edges';
+  import ThrelteScene from './ThrelteScene.svelte';
+
+  type $$Props = NodeProps;
+  export let data: NodeData;
+  const { label, flowState } = data;
+</script>
+
+<NodeWrapper {label}>
+  <div class="w-full h-[200px]">
+    <Canvas dpr={2}>
+      <ThrelteScene {flowState} />
+    </Canvas>
+    <Handle type="target" position={Position.Left} style="top:20px;" id="color" />
+    <Handle type="target" position={Position.Left} style="top:40px;" id="shape" />
+    <Handle type="target" position={Position.Left} style="top:60px;" id="zoom" />
+  </div>
+</NodeWrapper>

apps/svelte-examples/src/routes/examples/misc/hero-flow/ThrelteScene.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { T, useThrelte, useFrame } from '@threlte/core';
+  import type { FlowState } from './nodes-and-edges';
+  import type { Writable } from 'svelte/store';
+
+  export let flowState: Writable<FlowState>;
+  const { camera } = useThrelte();
+
+  const randomVector: (r: number) => [x: number, y: number, z: number] = (r: number) => [
+    r / 2 - Math.random() * r,
+    r / 2 - Math.random() * r,
+    r / 2 - Math.random() * r
+  ];
+
+  const randomEuler: () => [x: number, y: number, z: number] = () => [
+    Math.random() * Math.PI,
+    Math.random() * Math.PI,
+    Math.random() * Math.PI
+  ];
+
+  const NUMBER_OF_OBJECTS = 150;
+
+  const randomAssets = Array.from({ length: NUMBER_OF_OBJECTS }, (r: number = 10) => ({
+    random: Math.random(),
+    position: randomVector(r),
+    rotation: randomEuler()
+  }));
+
+  $: $camera.position.set(0, 0, +$flowState.zoom);
+
+  let t: number;
+  useFrame(({ clock }) => {
+    t = clock.getElapsedTime();
+  });
+</script>
+
+<T.PerspectiveCamera
+  makeDefault
+  on:create={({ ref }) => {
+    ref.lookAt(0, 0, 0);
+  }}
+/>
+
+<T.AmbientLight intensity={0.5} />
+<T.DirectionalLight intensity={3} position={[0, 0, 100]} />
+
+{#each randomAssets as asset}
+  <T.Mesh
+    position={asset.position}
+    rotation={[
+      asset.rotation[0] + Math.cos((t * asset.random) / 1.5) / 2,
+      asset.rotation[1] + Math.sin(t * asset.random) / 2,
+      asset.rotation[2] + Math.cos((t * asset.random) / 1.5) / 2
+    ]}
+  >
+    {#if $flowState.shape === 'cube'}
+      <T.BoxGeometry args={[1, 1, 1]} />
+    {:else if $flowState.shape === 'pyramid'}
+      <T.TetrahedronGeometry args={[1, 0]} />
+    {/if}
+    <T.MeshLambertMaterial color={$flowState.color} />
+  </T.Mesh>
+{/each}

apps/svelte-examples/src/routes/examples/misc/hero-flow/nodes-and-edges.ts

@@ -0,0 +1,91 @@
+import type { Node, Edge } from '@xyflow/svelte';
+import { writable, type Writable } from 'svelte/store';
+
+export type FlowState = {
+  color: string;
+  zoom: number;
+  shape: string;
+};
+
+const flowState = writable<FlowState>({
+  color: '#ff4000',
+  zoom: 17,
+  shape: 'cube'
+});
+
+export type NodeData = {
+  flowState: Writable<FlowState>;
+  label: string;
+};
+
+export const initialNodes: Node[] = [
+  {
+    id: 'hero',
+    type: 'hero',
+    position: { x: 390, y: 50 },
+    data: {
+      flowState,
+      label: 'output'
+    },
+    class: 'w-[200px] lg:w-[300px]'
+  },
+  {
+    id: 'color',
+    type: 'colorpicker',
+    position: { x: 50, y: 0 },
+    data: {
+      flowState,
+      label: 'shape color'
+    },
+    class: 'w-[150px]'
+  },
+  {
+    id: 'shape',
+    type: 'switcher',
+    position: { x: 0, y: 125 },
+    data: {
+      flowState,
+      label: 'shape type'
+    },
+    class: 'w-[150px]'
+  },
+  {
+    id: 'zoom',
+    type: 'slider',
+    position: { x: 40, y: 280 },
+    data: {
+      flowState,
+      label: 'zoom level'
+    },
+    class: 'w-[150px]'
+  }
+];
+
+const edgeStyle = 'stroke:#D2D2D2; stroke-width:2;';
+
+export const initialEdges: Edge[] = [
+  {
+    id: 'color->hero',
+    source: 'color',
+    target: 'hero',
+    targetHandle: 'color',
+    style: edgeStyle,
+    animated: true
+  },
+  {
+    id: 'shape->hero',
+    source: 'shape',
+    target: 'hero',
+    targetHandle: 'shape',
+    style: edgeStyle,
+    animated: true
+  },
+  {
+    id: 'zoom->hero',
+    source: 'zoom',
+    target: 'hero',
+    targetHandle: 'zoom',
+    style: edgeStyle,
+    animated: true
+  }
+];

apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Needs to be important to override the default styles
+  important: true,
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

apps/svelte-examples/src/routes/examples/misc/hero-flow/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;