@syncfusion/ej2-vue-diagrams
Version:
Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.
60 lines (59 loc) • 1.54 kB
JavaScript
import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
export var NodesDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-nodes';
}
}
});
export var NodesPlugin = {
name: 'e-nodes',
install: function (Vue) {
Vue.component(NodesPlugin.name, NodesDirective);
}
};
/**
* `e-node` directive represent a nodes of the vue diagram.
* It must be contained in a Diagram component(`ejs-diagram`).
* ```html
* <ejs-diagram>
* <e-nodes>
* <e-node></e-node>
* </e-nodes>
* </ejs-diagram>
* ```
*/
export var NodeDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-node';
}
}
});
export var NodePlugin = {
name: 'e-node',
install: function (Vue) {
Vue.component(NodePlugin.name, NodeDirective);
}
};