More slots

newcat · Jul 24, 2023 · 9305d59 · 9305d59
1 parent c96951e
commit 9305d59
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 82 deletions.
diff --git a/packages/renderer-vue/playground/App.vue b/packages/renderer-vue/playground/App.vue
@@ -2,7 +2,8 @@
     <div id="app">
         <EditorComponent :view-model="baklavaView">
             <template #node="nodeProps">
-                <CustomNodeRenderer :key="nodeProps.node.id" v-bind="nodeProps" />
+                <CommentNode v-if="nodeProps.node.type === 'CommentNode'" v-bind="nodeProps" />
+                <NodeComponent v-else v-bind="nodeProps" />
             </template>
         </EditorComponent>
         <button @click="calculate">Calculate</button>
@@ -18,12 +19,10 @@
 
 <script setup lang="ts">
 import { NodeInstanceOf } from "@baklavajs/core";
-import { EditorComponent, SelectInterface, useBaklava, Commands } from "../src";
+import { EditorComponent, Components, SelectInterface, useBaklava, Commands } from "../src";
 import { DependencyEngine, applyResult } from "@baklavajs/engine";
 import { BaklavaInterfaceTypes } from "@baklavajs/interface-types";
 
-import CustomNodeRenderer from "./CustomNodeRenderer";
-
 import TestNode from "./TestNode";
 import OutputNode from "./OutputNode";
 import BuilderTestNode from "./BuilderTestNode";
@@ -38,6 +37,8 @@ import UpdateTestNode from "./UpdateTestNode";
 
 import { stringType, numberType, booleanType } from "./interfaceTypes";
 
+const NodeComponent = Components.Node;
+
 const token = Symbol("token");
 const baklavaView = useBaklava();
 const editor = baklavaView.editor;

diff --git a/packages/renderer-vue/playground/CustomNodeRenderer.ts b/packages/renderer-vue/playground/CustomNodeRenderer.ts
diff --git a/packages/renderer-vue/playground/shims-vue.d.ts b/packages/renderer-vue/playground/shims-vue.d.ts
diff --git a/packages/renderer-vue/playground/tsconfig.json b/packages/renderer-vue/playground/tsconfig.json
@@ -6,5 +6,5 @@
         "types": ["resize-observer-browser", "vite/client"],
         "jsx": "preserve"
     },
-    "include": ["./**/*.ts", "./**/*.vue"]
+    "include": ["./**/*.ts", "./**/*.vue", "../src/**/*.ts", "../src/**/*.vue"]
 }
diff --git a/packages/renderer-vue/src/editor/Editor.vue b/packages/renderer-vue/src/editor/Editor.vue
@@ -42,14 +42,9 @@
 
         <div class="node-container" :style="nodeContainerStyle">
             <transition-group name="fade">
-                <template v-for="node in nodes">
+                <template v-for="node in nodes" :key="node.id + counter.toString()">
                     <slot name="node" :node="node" :selected="selectedNodes.includes(node)" @select="selectNode(node)">
-                        <node
-                            :key="node.id + counter.toString()"
-                            :node="node"
-                            :selected="selectedNodes.includes(node)"
-                            @select="selectNode(node)"
-                        />
+                        <Node :node="node" :selected="selectedNodes.includes(node)" @select="selectNode(node)" />
                     </slot>
                 </template>
             </transition-group>
@@ -72,6 +67,7 @@ import { AbstractNode } from "@baklavajs/core";
 import { IBaklavaViewModel } from "../viewModel";
 import { usePanZoom } from "./panZoom";
 import { useTemporaryConnection } from "./temporaryConnection";
+import { providePlugin } from "../utility";
 
 import Background from "./Background.vue";
 import Node from "../node/Node.vue";
@@ -82,8 +78,6 @@ import Minimap from "../components/Minimap.vue";
 import NodePalette from "../nodepalette/NodePalette.vue";
 import Toolbar from "../toolbar/Toolbar.vue";
 
-import { providePlugin } from "../utility";
-
 const props = defineProps<{ viewModel: IBaklavaViewModel }>();
 
 const token = Symbol("EditorToken");

diff --git a/packages/renderer-vue/src/node/Node.vue b/packages/renderer-vue/src/node/Node.vue
@@ -8,46 +8,58 @@
         :data-node-type="node.type"
         @pointerdown="select"
     >
-        <div class="__title" @pointerdown.self.stop="startDrag">
-            <template v-if="!renaming">
-                <div class="__title-label">
-                    {{ node.title }}
-                </div>
-                <div class="__menu">
-                    <vertical-dots class="--clickable" @click="openContextMenu" />
-                    <context-menu
-                        v-model="showContextMenu"
-                        :x="0"
-                        :y="0"
-                        :items="contextMenuItems"
-                        @click="onContextMenuClick"
-                    />
-                </div>
-            </template>
-            <input
-                v-else
-                ref="renameInputEl"
-                v-model="tempName"
-                type="text"
-                class="baklava-input"
-                placeholder="Node Name"
-                @blur="doneRenaming"
-                @keydown.enter="doneRenaming"
-                @keydown.delete.stop
-            />
-        </div>
-
-        <div class="__content" @keydown.delete.stop>
-            <!-- Outputs -->
-            <div class="__outputs">
-                <NodeInterface v-for="output in displayedOutputs" :key="output.id" :node="node" :intf="output" />
+        <slot name="title">
+            <div class="__title" @pointerdown.self.stop="startDrag">
+                <template v-if="!renaming">
+                    <div class="__title-label">
+                        {{ node.title }}
+                    </div>
+                    <div class="__menu">
+                        <vertical-dots class="--clickable" @click="openContextMenu" />
+                        <context-menu
+                            v-model="showContextMenu"
+                            :x="0"
+                            :y="0"
+                            :items="contextMenuItems"
+                            @click="onContextMenuClick"
+                        />
+                    </div>
+                </template>
+                <input
+                    v-else
+                    ref="renameInputEl"
+                    v-model="tempName"
+                    type="text"
+                    class="baklava-input"
+                    placeholder="Node Name"
+                    @blur="doneRenaming"
+                    @keydown.enter="doneRenaming"
+                    @keydown.delete.stop
+                />
             </div>
+        </slot>
+
+        <slot name="content">
+            <div class="__content" @keydown.delete.stop>
+                <!-- Outputs -->
+                <div class="__outputs">
+                    <template v-for="output in displayedOutputs" :key="output.id">
+                        <slot name="nodeInterface" type="output" :node="node" :intf="output">
+                            <NodeInterface :node="node" :intf="output" />
+                        </slot>
+                    </template>
+                </div>
 
-            <!-- Inputs -->
-            <div class="__inputs">
-                <NodeInterface v-for="input in displayedInputs" :key="input.id" :node="node" :intf="input" />
+                <!-- Inputs -->
+                <div class="__inputs">
+                    <template v-for="input in displayedInputs" :key="input.id">
+                        <slot name="nodeInterface" type="input" :node="node" :intf="input">
+                            <NodeInterface :node="node" :intf="input" />
+                        </slot>
+                    </template>
+                </div>
             </div>
-        </div>
+        </slot>
     </div>
 </template>
 

diff --git a/packages/renderer-vue/src/shims-vue.d.ts b/packages/renderer-vue/src/shims-vue.d.ts