Required Libraries:
- @baklavajs/core@next
- @baklavajs/plugin-renderer-vue@next
- vue-slider-component
<template> | |
<div id="app" style="width: 100vw; height: 100vh;"> | |
<baklava-editor :plugin="viewPlugin"></baklava-editor> | |
</div> | |
</template> | |
<script lang="ts"> | |
import { Component, Vue } from 'vue-property-decorator'; | |
import { Editor, NodeBuilder } from "@baklavajs/core"; | |
import { ViewPlugin } from "@baklavajs/plugin-renderer-vue"; | |
import SliderOption from "./SliderOption.vue"; | |
@Component | |
export default class App extends Vue { | |
editor = new Editor(); | |
viewPlugin = new ViewPlugin(); | |
created() { | |
this.editor.use(this.viewPlugin); | |
this.viewPlugin.registerOption("SliderOption", SliderOption); | |
const sliderNodeType = new NodeBuilder("SliderNode") | |
.addOption("Slider", "SliderOption", () => [3, 6], undefined, { min: 0, max: 10 }) | |
.addOutputInterface("Lower") | |
.addOutputInterface("Upper") | |
.onCalculate((n) => { | |
n.getInterface("Lower").value = n.getOptionValue("Slider")[0]; | |
n.getInterface("Upper").value = n.getOptionValue("Slider")[1]; | |
}) | |
.build(); | |
this.editor.registerNodeType("SliderNode", sliderNodeType); | |
} | |
} | |
</script> |
import Vue from 'vue' | |
import App from './App.vue' | |
import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue"; | |
import "@baklavajs/plugin-renderer-vue/dist/styles.css"; | |
Vue.use(BaklavaVuePlugin); | |
Vue.config.productionTip = false | |
new Vue({ | |
render: h => h(App), | |
}).$mount('#app') |
<template> | |
<div> | |
<vue-slider | |
:value="value" | |
@input="$emit('input', $event)" | |
:min="min" | |
:max="max" | |
:enable-cross="false" | |
:height="18" | |
></vue-slider> | |
</div> | |
</template> | |
<script lang="ts"> | |
import { Component, Vue, Prop } from "vue-property-decorator"; | |
import VueSlider from 'vue-slider-component'; | |
import 'vue-slider-component/theme/default.css'; | |
import { INodeOption } from '@baklavajs/core/dist/types'; | |
@Component({ | |
components: { VueSlider } | |
}) | |
export default class SliderOption extends Vue { | |
@Prop() | |
option!: INodeOption; | |
@Prop() | |
value!: number; | |
get min() { | |
return this.option.min || 0; | |
} | |
get max() { | |
return this.option.max || 1; | |
} | |
} | |
</script> |