98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
var VueTreeItem = Vue.extend({
|
|
template:
|
|
'<li class="outliner_node" v-bind:class="{ parent_li: node.children && node.children.length > 0}" v-bind:id="node.uuid">' +
|
|
`<div v-on:contextmenu.prevent.stop="node.showContextMenu($event)"
|
|
class="outliner_object" v-on:dblclick.stop.self="renameOutliner()"
|
|
v-on:click="node.select($event, true)" v-on:touchstart="node.select($event)" :title="node.title"
|
|
v-bind:class="{ cube: node.type === 'cube', group: node.type === 'group', selected: node.selected }"
|
|
v-bind:style="{'padding-left': getIndentation(node) + 'px'}"
|
|
>` +
|
|
//Opener
|
|
|
|
'<i v-if="node.children && node.children.length > 0 && (!Animator.open || node.children.some(o => o instanceof Group || o instanceof Locator))" v-on:click.stop="toggle(node)" class="icon-open-state fa" :class=\'{"fa-angle-right": !node.isOpen, "fa-angle-down": node.isOpen}\'></i>' +
|
|
'<i v-else class="outliner_opener_placeholder"></i>' +
|
|
//Main
|
|
'<i :class="node.icon + (settings.outliner_colors.value ? \' ec_\'+node.color : \'\')" v-on:dblclick.stop="if (node.children && node.children.length) {node.isOpen = !node.isOpen;}"></i>' +
|
|
'<input type="text" class="cube_name tab_target" v-model="node.name" disabled>' +
|
|
'<a v-for="btn in node.buttons" class="ml5" href="javascript:" :title="btn.title" v-on:click.stop="btnClick(btn, node)" v-bind:class="{advanced_option: btn.advanced_option && (btn.id !== \'locked\' || !node.isIconEnabled(btn))}">' +
|
|
'<i v-if="node.isIconEnabled(btn) === true" :class="btn.icon"></i>' +
|
|
'<i v-else-if="node.isIconEnabled(btn) === \'alt\'" :class="btn.icon_alt"></i>' +
|
|
'<i v-else :class="[btn.icon_off, \'icon_off\']"></i>' +
|
|
'</a>' +
|
|
'</div>' +
|
|
//Other Entries
|
|
'<ul v-show="node.isOpen">' +
|
|
'<vue-tree-item v-for="item in node.children" :node="item" v-key="item.uuid"></vue-tree-item>' +
|
|
`<div class="outliner_line_guide" v-if="node == Group.selected" v-bind:style="{left: getIndentation(node) + 'px'}"></div>` +
|
|
'</ul>' +
|
|
'</li>',
|
|
props: {
|
|
node: {
|
|
type: Object
|
|
}
|
|
},
|
|
methods: {
|
|
nodeClass: function (node) {
|
|
if (node.isOpen) {
|
|
return node.openedIcon || node.icon;
|
|
} else {
|
|
return node.closedIcon || node.icon;
|
|
}
|
|
},
|
|
toggle: function (node) {
|
|
if (node.hasOwnProperty('isOpen')) {
|
|
node.isOpen = !node.isOpen;
|
|
} else {
|
|
Vue.set(node, 'isOpen', true);
|
|
}
|
|
},
|
|
btnClick: function (btn, node) {
|
|
if (typeof btn.click === 'function') {
|
|
btn.click(node);
|
|
}
|
|
},
|
|
getIndentation(node) {
|
|
return node.getDepth ? (limitNumber(node.getDepth(), 0, (Interface.Panels.outliner.width-124) / 16) * 16) : 0;
|
|
}
|
|
},
|
|
watch: {
|
|
'node.isOpen': function (val) {
|
|
if (!this.node.hasOwnProperty('_loading')) {
|
|
Vue.set(this.node, '_loading', false);
|
|
}
|
|
if (val) {
|
|
if (typeof this.node.onOpened === 'function') {
|
|
this.node.onOpened(this.node);
|
|
}
|
|
} else {
|
|
if (typeof this.node.onClosed === 'function') {
|
|
this.node.onClosed(this.node);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
Vue.component('vue-tree-item', VueTreeItem);
|
|
|
|
var VueTree = Vue.extend({
|
|
template: `
|
|
<div class="vue-tree">
|
|
<ul>
|
|
<tree-item :node.sync="root"></tree-item>
|
|
</ul>
|
|
</div>`,
|
|
props: {
|
|
root: {
|
|
type: Object
|
|
}
|
|
},
|
|
components: {
|
|
'tree-item': VueTreeItem
|
|
}
|
|
});
|
|
Vue.component('vue-tree', VueTree);
|
|
|
|
})();
|