Added min max for math and other changes

newcat · Sep 13, 2019 · a17cacf · a17cacf
1 parent b668ade
commit a17cacf
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 26 deletions.
diff --git a/packages/baklavajs-core/src/node.ts b/packages/baklavajs-core/src/node.ts
@@ -25,12 +25,12 @@ export abstract class Node implements INode {
     public id: string = "node_" + generateId();
     /** A map of all interfaces of the node.
      * | Key = Name of the interface
-     * | Value = [[NodeInterface]] instance
+     * | Value = NodeInterface instance
      */
     public interfaces: Map<string, NodeInterface> = new Map();
     /** A map of all options of the node.
      * | Key = Name of the option
-     * | Value = [[NodeOption]] instance
+     * | Value = NodeOption instance
      */
     public options: Map<string, NodeOption> = new Map();
 
@@ -125,7 +125,7 @@ export abstract class Node implements INode {
         const intf = this.addInterface(true, name, option);
         intf.events.setValue.addListener(this, () => this.events.update.emit({ name, interface: intf }));
         intf.value = defaultValue;
-        Object.entries(additionalProperties || {}).forEach(([k, v]) => { (intf as any)[k] = v; });
+        Object.entries(additionalProperties || {}).forEach(([k, v]) => { intf[k] = v; });
         this.events.addInterface.emit(intf);
         return intf;
     }
@@ -139,7 +139,7 @@ export abstract class Node implements INode {
     protected addOutputInterface(name: string, additionalProperties?: Record<string, any>) {
         if (this.events.beforeAddInterface.emit({ name, isInput: false })) { return; }
         const intf = this.addInterface(false, name);
-        Object.entries(additionalProperties || {}).forEach(([k, v]) => { (intf as any)[k] = v; });
+        Object.entries(additionalProperties || {}).forEach(([k, v]) => { intf[k] = v; });
         this.events.addInterface.emit(intf);
         return intf;
     }
@@ -188,7 +188,7 @@ export abstract class Node implements INode {
                         sidebarComponent?: string, additionalProperties?: Record<string, any>) {
         if (this.events.beforeAddOption.emit({ name, component, defaultValue, sidebarComponent })) { return; }
         const opt = new NodeOption(component, defaultValue, sidebarComponent);
-        Object.entries(additionalProperties || {}).forEach(([k, v]) => { (opt as any)[k] = v; });
+        Object.entries(additionalProperties || {}).forEach(([k, v]) => { opt[k] = v; });
         opt.events.setValue.addListener(this, () => { this.events.update.emit({ name, option: opt }); });
         this.options.set(name, opt);
         this.events.addOption.emit({ name, option: opt });

diff --git a/packages/baklavajs-core/src/nodeInterface.ts b/packages/baklavajs-core/src/nodeInterface.ts
@@ -1,4 +1,3 @@
-import { Node } from "./node";
 import generateId from "./idGenerator";
 import { IInterfaceState } from "../types/state";
 import { BaklavaEvent, PreventableBaklavaEvent, SequentialHook } from "./events";
@@ -11,6 +10,8 @@ export class NodeInterface implements INodeInterface {
     public parent: INode;
     public option?: string;
 
+    [k: string]: any;
+
     public events = {
         setConnectionCount: new BaklavaEvent<number>(),
         beforeSetValue: new PreventableBaklavaEvent<any>(),

diff --git a/packages/baklavajs-core/src/nodeOption.ts b/packages/baklavajs-core/src/nodeOption.ts
@@ -13,6 +13,9 @@ export class NodeOption implements INodeOption {
         setValue: new BaklavaEvent<any>()
     };
 
+    /** Additional Properties */
+    [k: string]: any;
+
     private _value: any;
 
     public constructor(optionComponent: string, value?: any, sidebarComponent?: any) {

diff --git a/packages/baklavajs-core/types/nodeInterface.ts b/packages/baklavajs-core/types/nodeInterface.ts
@@ -4,6 +4,9 @@ import { IInterfaceState } from "./state";
 
 export interface INodeInterface {
 
+    /** Additional Properties */
+    [k: string]: any;
+
     id: string;
     isInput: boolean;
     parent: INode;

diff --git a/packages/baklavajs-core/types/nodeOption.ts b/packages/baklavajs-core/types/nodeOption.ts
@@ -1,6 +1,10 @@
 import { IBaklavaEvent, IPreventableBaklavaEvent } from "./events";
 
 export interface INodeOption {
+
+    /** Additional Properties */
+    [k: string]: any;
+
     optionComponent: string;
     value: any;
     sidebarComponent?: string;

diff --git a/packages/baklavajs-playground/src/MathNode.ts b/packages/baklavajs-playground/src/MathNode.ts
@@ -1,12 +1,9 @@
 import { NodeBuilder } from "../../baklavajs-core/src";
 
 export default new NodeBuilder("MathNode")
-    .addInputInterface("Number 1", "NumberOption", 1)
-    .addInputInterface("Number 2", "NumberOption", 10)
-    .addOption("Operation", "SelectOption", () => ({
-        selected: "Add",
-        items: [ "Add", "Subtract" ]
-    }))
+    .addInputInterface("Number 1", "NumberOption", 1, { displayName: "Number" })
+    .addInputInterface("Number 2", "NumberOption", 10, { displayName: "Number" })
+    .addOption("Operation", "SelectOption", "Add", undefined, { items: [ "Add", "Subtract" ] })
     .addOutputInterface("Output")
     .onCalculate((n) => {
         const n1 = n.getInterface("Number 1").value;

diff --git a/packages/baklavajs-playground/src/TestNode.ts b/packages/baklavajs-playground/src/TestNode.ts
@@ -12,9 +12,10 @@ export default class TestNode extends Node {
         this.addInputInterface("Test", "NumberOption", 5, { type: "number" });
         this.addOutputInterface("Output", { type: "boolean" });
         this.addOption("test", "InputOption");
-        this.addOption("Select", "SelectOption", { selected: "Test1", items: ["Test1", "Test2", "Test3"] });
+        this.addOption("Select", "SelectOption", "Test1", undefined, { items: ["Test1", "Test2", "Test3"] });
         this.addOption("This is a checkbox", "CheckboxOption", true);
-        this.addOption("Number", "NumberOption", 5);
+        this.addOption("Number", "NumberOption", 5, undefined, { min: 0, max: 10 });
+        this.addOption("Slider", "SliderOption", 0.5, undefined, { min: 0, max: 1 });
     }
 
     public registerEditor(editor: Editor) {

diff --git a/packages/baklavajs-plugin-options-vue/src/NumberOption.vue b/packages/baklavajs-plugin-options-vue/src/NumberOption.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dark-num-input">
+    <div class="dark-num-input" :class="{ '--invalid': invalid }">
         <div @click="decrement" class="__button --dec">
             <i-arrow></i-arrow>
         </div>
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import Arrow from "./Arrow.vue";
+import { INodeOption } from "../../baklavajs-core/types";
 
 @Component({
     components: {
@@ -44,7 +45,11 @@ export default class NumberOption extends Vue {
     @Prop({ type: String })
     name!: string;
 
+    @Prop({ type: Object })
+    option!: INodeOption;
+
     editMode = false;
+    invalid = false;
     tempValue = "0";
 
     get v() {
@@ -65,11 +70,17 @@ export default class NumberOption extends Vue {
     }
 
     increment() {
-        this.$emit("input", this.v + 0.1);
+        const newValue = this.v + 0.1;
+        if (this.validate(newValue)) {
+            this.$emit("input", newValue);
+        }
     }
 
     decrement() {
-        this.$emit("input", this.v - 0.1);
+        const newValue = this.v - 0.1;
+        if (this.validate(newValue)) {
+            this.$emit("input", newValue);
+        }
     }
 
     async enterEditMode() {
@@ -80,8 +91,30 @@ export default class NumberOption extends Vue {
     }
 
     leaveEditMode() {
-        this.$emit("input", parseFloat(this.tempValue));
-        this.editMode = false;
+        const v = parseFloat(this.tempValue);
+        if (!this.validate(v)) {
+            this.invalid = true;
+        } else {
+            this.$emit("input", v);
+            this.editMode = false;
+        }
+    }
+
+    @Watch("tempValue")
+    resetInvalid() {
+        this.invalid = false;
+    }
+
+    validate(v: number) {
+        if (Number.isNaN(v)) {
+            return false;
+        } else if (typeof(this.option.min) === "number" && v < this.option.min) {
+            return false;
+        } else if (typeof(this.option.max) === "number" && v > this.option.max) {
+            return false;
+        } else {
+            return true;
+        }
     }
 
 }

diff --git a/packages/baklavajs-plugin-options-vue/src/SelectOption.vue b/packages/baklavajs-plugin-options-vue/src/SelectOption.vue
@@ -27,6 +27,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
 import Arrow from "./Arrow.vue";
+import { INodeOption } from "../../baklavajs-core/types";
 
 // @ts-ignore
 import ClickOutside from "v-click-outside";
@@ -46,19 +47,22 @@ export default class SelectOption extends Vue {
     @Prop({ type: String })
     name!: string;
 
-    @Prop({ type: Object })
+    @Prop({ type: String })
     value!: any;
 
+    @Prop({ type: Object })
+    option!: INodeOption;
+
     get selected() {
-        return this.value ? this.value.selected : "";
+        return this.value || "";
     }
 
     get items() {
-        return this.value ? this.value.items : [];
+        return this.option.items || [];
     }
 
     setSelected(item: string) {
-        this.$emit("input", { selected: item, items: this.items });
+        this.$emit("input", item);
     }
 
 }

diff --git a/packages/baklavajs-plugin-options-vue/src/SliderOption.vue b/packages/baklavajs-plugin-options-vue/src/SliderOption.vue
@@ -0,0 +1,37 @@
+<template>
+<div class="dark-slider">
+    <div class="__slider" style="width: 50%;"></div>
+    <div class="__content">
+        <div class="__label">{{ name }}</div>
+        <div class="__value">{{ (value || 0).toFixed(3) }}</div>
+    </div>
+</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { INodeOption } from "../../baklavajs-core/types";
+
+// @ts-ignore
+import ClickOutside from "v-click-outside";
+
+@Component({
+    directives: {
+        ClickOutside: ClickOutside.directive
+    }
+})
+export default class SliderOption extends Vue {
+
+    open = false;
+
+    @Prop({ type: String })
+    name!: string;
+
+    @Prop({ type: Number })
+    value!: any;
+
+    @Prop({ type: Object })
+    option!: INodeOption;
+
+}
+</script>
diff --git a/packages/baklavajs-plugin-options-vue/src/options.ts b/packages/baklavajs-plugin-options-vue/src/options.ts
@@ -4,6 +4,7 @@ import InputOption from "./InputOption.vue";
 import IntegerOption from "./IntegerOption.vue";
 import NumberOption from "./NumberOption.vue";
 import SelectOption from "./SelectOption.vue";
+import SliderOption from "./SliderOption.vue";
 import TextOption from "./TextOption.vue";
 
 export {
@@ -13,5 +14,6 @@ export {
     IntegerOption,
     NumberOption,
     SelectOption,
+    SliderOption,
     TextOption
 };
diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/node/NodeInterface.vue b/packages/baklavajs-plugin-renderer-vue/src/components/node/NodeInterface.vue
@@ -2,14 +2,15 @@
     <div :id="data.id" :class="classes">
         <div class="__port" @mouseover="startHover" @mouseout="endHover"></div>
         <span v-if="data.connectionCount > 0 || !data.option || !getOptionComponent(data.option)" class="align-middle">
-            {{ name }}
+            {{ displayName }}
         </span>
         <component
             v-else
             :is="getOptionComponent(data.option)"
+            :option="data"
             :value="value"
             @input="data.value = $event"
-            :name="name"
+            :name="displayName"
         ></component>
     </div>
 </template>
@@ -48,6 +49,10 @@ export default class NodeInterfaceView extends Vue {
         };
     }
 
+    get displayName() {
+        return this.data.displayName || this.name;
+    }
+
     beforeMount() {
         this.value = this.data.value;
         this.data.events.setValue.addListener(this, (v) => { this.value = v; });

diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/node/NodeOption.vue b/packages/baklavajs-plugin-renderer-vue/src/components/node/NodeOption.vue
@@ -1,10 +1,11 @@
 <template>
     <component
         :is="component"
-        :name="name"
+        :name="displayName"
         class="node-option"
         :node="node"
         :value="value"
+        :option="option"
         @input="updateValue"
         @openSidebar="$emit('openSidebar')"
     ></component>
@@ -41,6 +42,10 @@ export default class NodeOptionView extends Vue {
         return this.plugin.options[this.componentName];
     }
 
+    get displayName() {
+        return this.option.displayName || this.name;
+    }
+
     beforeMount() {
         this.value = this.option.value;
         this.option.events.setValue.addListener(this, (v) => { this.value = v; });

diff --git a/packages/baklavajs-plugin-renderer-vue/src/styles/dark/dark.scss b/packages/baklavajs-plugin-renderer-vue/src/styles/dark/dark.scss
@@ -9,4 +9,5 @@
 @import "./context-menu.scss";
 @import "./input.scss";
 @import "./select";
+@import "./slider";
 @import "./numinput";
diff --git a/packages/baklavajs-plugin-renderer-vue/src/styles/dark/numinput.scss b/packages/baklavajs-plugin-renderer-vue/src/styles/dark/numinput.scss
@@ -68,4 +68,8 @@
 
     }
 
+    &.--invalid > .__content > input {
+        box-shadow: 0 0 2px 2px red;
+    }
+
 }
diff --git a/packages/baklavajs-plugin-renderer-vue/src/styles/dark/slider.scss b/packages/baklavajs-plugin-renderer-vue/src/styles/dark/slider.scss
@@ -0,0 +1,43 @@
+.dark-slider {
+    background: $color-control-dark-background;
+    color: $color-control-dark-foreground;
+    border-radius: $border-radius-control;
+    position: relative;
+
+    & > .__content {
+        display: flex;
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+
+        & > .__label, & > .__value {
+            flex: 1 1 auto;
+            margin: 0.35em 0;
+            padding: 0 0.5em;
+            text-overflow: ellipsis;
+        }
+
+        & > .__value {
+            text-align: right;
+        }
+
+        & > input {
+            background-color: $color-control-dark-background;
+            color: $color-control-dark-foreground;
+            caret-color: $color-primary;
+            padding: 0.35em;
+            width: 100%;
+        }
+
+    }
+
+    & > .__slider {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        background-color: $color-control-dark-hover;
+        border-radius: $border-radius-control;
+    }
+
+}