Merge pull request #375 from starker-xp/feat-reverse-node

feat(node): Inverts the order of inputs/outputs in nodes.
newcat · Feb 8, 2024 · ea2b21b · ea2b21b
2 parents d413d9a + 2c85eae
commit ea2b21b
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 2 deletions.
diff --git a/docs/nodes/nodes.md b/docs/nodes/nodes.md
@@ -60,6 +60,59 @@ export default defineNode({
 });
 ```
 
+There are also other properties that allow you to customize your nodes :
+
+| name                 | data type | default               |
+| -------------------- | --------- | --------------------- |
+| position.x           | number    | 0                     |
+| position.y           | number    | 0                     |
+| width                | number    | settings.defaultWidth |
+| disablePointerEvents | boolean   | false                 |
+| twoColumn            | boolean   | false                 |
+| reverseY             | boolean?  | undefined             |
+
+```ts
+import { AbstractNode, CalculateFunction, NodeInterface } from "@baklavajs/core";
+import { TextareaInputInterface } from "../src/nodeinterfaces/textareainput/TextareaInputInterface";
+import { ButtonInterface } from "../src";
+import { InputAnswerInterface } from "./interface/InputAnswerInterface";
+
+export default class AnswerNode extends AbstractNode {
+    public type = "answer";
+
+    public inputs: Record<string, NodeInterface<any>> = {
+        input: new NodeInterface("Content", ""),
+        description: new TextareaInputInterface("", "").setPort(false),
+    };
+    public outputs: Record<string, NodeInterface<any>> = {};
+
+    private counter = 0;
+    public constructor() {
+        super();
+        this.initializeIo();
+        this.width = 400;
+        this.title = "Answer";
+        this.reverseY = true;
+    }
+
+    public addChoice(value?: string) {
+        const name = "answer" + ++this.counter;
+        this.addOutput(
+            name,
+            new InputAnswerInterface(name, value, () => {
+                this.removeOutput(name);
+            }),
+        );
+    }
+
+    public onPlaced() {
+        this.addInput("addAnswer", new ButtonInterface("Add " + this.title, () => this.addChoice()));
+    }
+
+    calculate?: CalculateFunction<any, any> | undefined;
+}
+```
+
 ## Class-based approach
 
 For nodes that have dynamic inputs and outputs, it is also possible to use a class-based approach similar to BaklavaJS v1.

diff --git a/docs/visual-editor/setup.md b/docs/visual-editor/setup.md
@@ -84,6 +84,7 @@ Settings can be changed by accessing the `settings` property of the view model r
 | nodes.maxWidth                     | number            | 320     |
 | nodes.minWidth                     | boolean           | 150     |
 | nodes.resizable                    | boolean           | false   |
+| nodes.reverseY                     | boolean           | false   |
 | contextMenu.enabled                | boolean           | true    |
 | contextMenu.additionalItems        | ContextMenuItem[] | []      |
 

diff --git a/packages/renderer-vue/playground/App.vue b/packages/renderer-vue/playground/App.vue
@@ -54,6 +54,7 @@ baklavaView.settings.enableMinimap = true;
 baklavaView.settings.sidebar.resizable = false;
 baklavaView.settings.displayValueOnHover = true;
 baklavaView.settings.nodes.resizable = true;
+baklavaView.settings.nodes.reverseY = false;
 baklavaView.settings.contextMenu.additionalItems = [
     { isDivider: true },
     { label: "Copy", command: Commands.COPY_COMMAND },

diff --git a/packages/renderer-vue/src/node/Node.vue b/packages/renderer-vue/src/node/Node.vue
@@ -41,7 +41,7 @@
         </slot>
 
         <slot name="content">
-            <div class="__content" @keydown.delete.stop>
+            <div class="__content" @keydown.delete.stop :class="classesContent">
                 <!-- Outputs -->
                 <div class="__outputs">
                     <template v-for="output in displayedOutputs" :key="output.id">
@@ -72,7 +72,6 @@ import { useGraph, useViewModel } from "../utility";
 import { ContextMenu } from "../contextmenu";
 import VerticalDots from "../icons/VerticalDots.vue";
 import NodeInterface from "./NodeInterface.vue";
-
 const props = withDefaults(
     defineProps<{
         node: AbstractNode;
@@ -116,6 +115,10 @@ const classes = computed(() => ({
     "--two-column": !!props.node.twoColumn,
 }));
 
+const classesContent = computed(() => ({
+    "--reverse-y": props.node.reverseY ?? viewModel.value.settings.nodes.reverseY,
+}));
+
 const styles = computed(() => ({
     "top": `${props.node.position?.y ?? 0}px`,
     "left": `${props.node.position?.x ?? 0}px`,

diff --git a/packages/renderer-vue/src/overrides.d.ts b/packages/renderer-vue/src/overrides.d.ts
@@ -16,6 +16,7 @@ declare module "@baklavajs/core/dist/node" {
         width: number;
         disablePointerEvents: boolean;
         twoColumn: boolean;
+        reverseY?: boolean;
     }
 }
 

diff --git a/packages/renderer-vue/src/settings.ts b/packages/renderer-vue/src/settings.ts
@@ -60,6 +60,8 @@ export interface IViewSettings {
         defaultWidth: number;
         /** Whether users should be able to resize nodes */
         resizable: boolean;
+        /** Inverts the order of inputs/outputs in nodes. */
+        reverseY: boolean;
     };
     contextMenu: {
         /** Whether the context menu should be enabled */
@@ -93,6 +95,7 @@ export const DEFAULT_SETTINGS: () => IViewSettings = () => ({
         maxWidth: 320,
         minWidth: 150,
         resizable: false,
+        reverseY: false,
     },
     contextMenu: {
         enabled: true,

diff --git a/packages/themes/src/classic/components/node.scss b/packages/themes/src/classic/components/node.scss
@@ -62,6 +62,11 @@
     & > .__content {
         padding: 0.75em;
 
+        &.--reverse-y {
+            display: flex;
+            flex-direction: column-reverse;
+        }
+
         & > div > div {
             margin: 0.5em 0;
         }