Added demo folder.

Author: m0ksem

README.md

@@ -20,10 +20,12 @@ Experimental
 ## Setup
 
 ### Development setup
+
+- Start demo
 ```bash
 yarn
 
-yarn dev
+yarn server
 ```
 
 ### Build for production

index.html demo/index.html

@@ -1,9 +1,5 @@
-<script setup lang="ts">
-import NodesCanvas from './components/demo/shader-generator/ShaderGeneratorDemo.vue'
-</script>
-
 <template>
-  <NodesCanvas />
+  <router-view />
 </template>
 
 <style lang="scss">

src/App.vue demo/src/App.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import AppSidebar from './AppSidebar.vue'
+</script>
+
+<template>
+  <div class="app-layout">
+    <AppSidebar>
+      <slot name="sidebar"/>
+    </AppSidebar>
+
+    <div class="app-page">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.app-layout {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+}
+
+.app-page {
+  flex: 1;
+  width: 100%;
+}
+</style>

demo/src/components/AppLayout.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="nodes-demo-header">
     <div class="nodes-demo-header__top">
+      <h1>Vue nodes demo</h1>
+
       <slot />
     </div>
     <div class="nodes-demo-header__bottom">

src/components/demo/DemoHeader.vue demo/src/components/AppSidebar.vue

@@ -0,0 +1,12 @@
+import { Plugin } from 'vue'
+import DemoButtonVue from './node/DemoButton.vue'
+import DemoInputVue from './node/DemoInput.vue'
+import DemoNodeVue from './node/DemoNode.vue'
+
+export const demoComponents: Plugin = {
+  install(app) {
+    app.component('DemoButton', DemoButtonVue)
+    app.component('DemoInput', DemoInputVue)
+    app.component('DemoNode', DemoNodeVue)
+  }
+}

demo/src/components/index.ts

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { PropType } from "vue";
-import DemoNode from "../../../DemoNode.vue";
-import DemoButton from "../../../DemoButton.vue";
-import DemoInput from "../../../DemoInput.vue";
-import { ShaderGeneratorNode } from "../../types";
+import { ShaderGeneratorNode } from "../types";
 
 const props = defineProps({
   node: { type: Object as PropType<ShaderGeneratorNode>, required: true },

src/components/demo/DemoButton.vue demo/src/components/node/DemoButton.vue

@@ -1,3 +1,3 @@
 export * from './nodes'
 export * from './types'
-export * from './defineNode'
+export * from './defineNode'

src/components/demo/DemoInput.vue demo/src/components/node/DemoInput.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { PropType } from "vue";
-import DemoNode from "../../../DemoNode.vue";
-import DemoButton from "../../../DemoButton.vue";
-import DemoInput from "../../../DemoInput.vue";
-import { ShaderGeneratorNode } from "../../types";
+import { ShaderGeneratorNode } from "../types";
 
 const props = defineProps({
   node: { type: Object as PropType<ShaderGeneratorNode>, required: true },

src/components/demo/DemoNode.vue demo/src/components/node/DemoNode.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { computed, PropType, toRef } from 'vue';
-import DemoNode from "../../../DemoNode.vue";
-import DemoButton from "../../../DemoButton.vue";
-import DemoInput from "../../../DemoInput.vue";
 import { ShaderGeneratorNode, Node, Connection, GenerateFnResult } from '../types';
 import { Shader2D, VueGLSLReadyEvent } from '@m0ksem/vue-glsl'
-import { useConnections } from '../../../../../hooks/useConnections';
+import { useConnections } from 'vue-nodes';
 
 const props = defineProps({
   node: { type: Object as PropType<ShaderGeneratorNode>, required: true },

src/components/demo/shader-generator/nodes/defineNode.ts demo/src/demo/shader/nodes/defineNode.ts

@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { computed, PropType, toRef } from "vue";
-import DemoNode from "../../../DemoNode.vue";
-import DemoButton from "../../../DemoButton.vue";
-import DemoInput from "../../../DemoInput.vue";
-import { Connection, ShaderGeneratorNode } from "../../types";
+import { Connection, ShaderGeneratorNode } from "../types";
 import { GenerateFnResult, ShaderNode } from "../types";
-import { useConnections } from "../../../../../hooks/useConnections";
+import { useConnections } from '../../../../../../src';
 
 const props = defineProps({
   node: { type: Object as PropType<ShaderNode>, required: true },

src/components/demo/shader-generator/nodes/fragment-shader/FragmentShader.vue demo/src/demo/shader/nodes/fragment-shader/FragmentShader.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
-import DemoNode from '../../../DemoNode.vue'
-import DemoButton from '../../../DemoButton.vue';
-import DemoInput from '../../../DemoInput.vue'
-import { ShaderGeneratorNode, Node } from '../../types';
+import { ShaderGeneratorNode } from '../types';
 
 const props = defineProps({
   node: { type: Object as PropType<ShaderGeneratorNode>, required: true },

src/components/demo/shader-generator/nodes/fragment-shader/index.ts demo/src/demo/shader/nodes/fragment-shader/index.ts

@@ -1,4 +1,4 @@
-import { Node } from '../types'
+import { Node } from 'vue-nodes'
 
 export type GenerateFnResultUniform = { 
   type: string, 
@@ -24,4 +24,4 @@ export type ShaderNode<V = {}> = Node & {
   value: V
 }
 
-export * from '../types'
+export * from 'vue-nodes'

src/components/demo/shader-generator/nodes/index.ts demo/src/demo/shader/nodes/index.ts

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
-import DemoNode from '../../../DemoNode.vue'
-import DemoButton from '../../../DemoButton.vue';
-import DemoInput from '../../../DemoInput.vue'
-import { ShaderGeneratorNode, Node } from '../../types';
+import { ShaderGeneratorNode, Node } from '../types';
 
 const props = defineProps({
   node: { type: Object as PropType<ShaderGeneratorNode>, required: true },

src/components/demo/shader-generator/nodes/math/Math.vue demo/src/demo/shader/nodes/math/Math.vue

@@ -0,0 +1,39 @@
+import { createSourceNode, createTimeNode, createFragmentShaderNode, createVec4Node, createOutputNode, createMathNode } from './nodes'
+import type { ShaderNode } from './nodes'
+import type { Connection } from 'vue-nodes'
+
+export const itemsPreset: ShaderNode[] = [
+  createTimeNode({ x: -300, y: 0 }),
+  (() => {
+    const math = createMathNode({ x: 0, y: 0 })
+    math.fn = 'sin'
+    return math
+  })(),
+  (() => {
+    const math = createMathNode({ x: 0, y: 100 })
+    math.fn = 'cos'
+    return math
+  })(),
+  (() => {
+    const vec4 = createVec4Node({ x: 300, y: 0 })
+    vec4.z = 1;
+    vec4.w = 1;
+    return vec4
+  })(),
+  createFragmentShaderNode({ x: -300, y: -200 }),
+  createSourceNode({ x: 100, y: -300 }), 
+  createOutputNode({ x: 500, y: 300 })
+]
+
+export const connectionsPreset: Connection<ShaderNode>[] = [
+  { start: { node: itemsPreset[0], point: 'out' }, end: { node: itemsPreset[1], point: 'in' }},
+  { start: { node: itemsPreset[0], point: 'out' }, end: { node: itemsPreset[2], point: 'in' }},
+  // Vec4
+  { start: { node: itemsPreset[1], point: 'out' }, end: { node: itemsPreset[3], point: 'x' }},
+  { start: { node: itemsPreset[2], point: 'out' }, end: { node: itemsPreset[3], point: 'y' }},
+
+  { start: { node: itemsPreset[3], point: 'out' }, end: { node: itemsPreset[4], point: 'in' }},
+  { start: { node: itemsPreset[4], point: 'out' }, end: { node: itemsPreset[5], point: 'in' }},
+
+  { start: { node: itemsPreset[5], point: 'out' }, end: { node: itemsPreset[6], point: 'in' }},
+]

src/components/demo/shader-generator/nodes/math/index.ts demo/src/demo/shader/nodes/math/index.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import { router } from './router'
+import { demoComponents } from './components'
+import App from './App.vue'
+
+createApp(App)
+  .use(router)
+  .use(demoComponents)
+  .mount('#app')

src/components/demo/shader-generator/nodes/nodes.ts demo/src/demo/shader/nodes/nodes.ts

@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Calculator from './routes/Calculator.vue'
+import Index from './routes/Index.vue'
+import Shader from './routes/Shader.vue'
+
+
+export const router = createRouter({
+  history: createWebHistory('/vue-nodes'),
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: Index
+    },
+    {
+      path: '/shader-demo',
+      name: 'ShaderDemo',
+      component: Shader
+    },
+    {
+      path: '/calculator',
+      name: 'CalculatorDemo',
+      component: Calculator
+    },
+  ]
+})