From a0ac1ad989135de73da09cffe6ed12f7fbe7d891 Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Sun, 7 Feb 2021 22:10:09 +0100 Subject: [PATCH] Add click and move to use outliner toggles Closes #661 --- js/outliner/cube.js | 2 +- js/outliner/group.js | 22 +----- js/outliner/outliner.js | 159 +++++++++++++++++++++------------------- lang/en.json | 2 +- 4 files changed, 86 insertions(+), 99 deletions(-) diff --git a/js/outliner/cube.js b/js/outliner/cube.js index 7507087e..c70e26ba 100644 --- a/js/outliner/cube.js +++ b/js/outliner/cube.js @@ -804,7 +804,7 @@ class Cube extends OutlinerElement { ]); Cube.prototype.buttons = [ Outliner.buttons.autouv, - Outliner.buttons.shading, + Outliner.buttons.shade, Outliner.buttons.export, Outliner.buttons.locked, Outliner.buttons.visibility, diff --git a/js/outliner/group.js b/js/outliner/group.js index bc3eefa7..af2dbc43 100644 --- a/js/outliner/group.js +++ b/js/outliner/group.js @@ -405,26 +405,6 @@ class Group extends OutlinerNode { i++; } } - toggle(key, val) { - if (val === undefined) { - var val = !this[key] - } - var cubes = [] - this.forEachChild(obj => { - cubes.push(obj) - }, OutlinerElement) - Undo.initEdit({outliner: true, elements: cubes}) - this.forEachChild(function(s) { - s[key] = val - s.updateElement() - }) - this[key] = val; - this.updateElement() - if (key === 'visibility') { - Canvas.updateVisibility() - } - Undo.finishEdit('toggle') - } setAutoUV(val) { this.forEachChild(function(s) { s.autouv = val; @@ -441,7 +421,7 @@ class Group extends OutlinerNode { Group.prototype.name_regex = () => Format.bone_rig ? 'a-zA-Z0-9_' : false; Group.prototype.buttons = [ Outliner.buttons.autouv, - Outliner.buttons.shading, + Outliner.buttons.shade, Outliner.buttons.export, Outliner.buttons.locked, Outliner.buttons.visibility, diff --git a/js/outliner/outliner.js b/js/outliner/outliner.js index 7cc50942..fa621fd9 100644 --- a/js/outliner/outliner.js +++ b/js/outliner/outliner.js @@ -9,49 +9,28 @@ const Outliner = { title: tl('switches.visibility'), icon: ' fa fa-eye', icon_off: ' fa fa-eye-slash', - advanced_option: false, - click: function(obj) { - if (obj.locked) return; - obj.toggle('visibility') - } + advanced_option: false }, locked: { id: 'locked', title: tl('switches.lock'), icon: ' fas fa-lock', icon_off: ' fas fa-lock-open', - advanced_option: true, - click: function(obj) { - if (obj.locked && Format.force_lock) return; - obj.toggle('locked') - updateSelection() - } + advanced_option: true }, export: { id: 'export', title: tl('switches.export'), icon: ' fa fa-camera', icon_off: ' far fa-window-close', - advanced_option: true, - click: function(obj) { - if (obj.locked) return; - obj.toggle('export') - } + advanced_option: true }, - shading: { - id: 'shading', - get title() {return Project.box_uv ? tl('switches.mirror') : tl('switches.shading')}, + shade: { + id: 'shade', + get title() {return Project.box_uv ? tl('switches.mirror') : tl('switches.shade')}, get icon() {return Project.box_uv ? 'fa fa-star' : 'fa fa-star'}, get icon_off() {return Project.box_uv ? 'fas fa-star-half-alt' : 'far fa-star'}, - advanced_option: true, - click: function(obj) { - if (obj.locked) return; - obj.toggle('shade') - Canvas.updateUVs() - if (obj instanceof Cube && obj.visibility && !obj.selected) { - Canvas.updateUV(obj); - } - } + advanced_option: true }, autouv: { id: 'autouv', @@ -59,14 +38,7 @@ const Outliner = { icon: ' fa fa-thumbtack', icon_off: ' far fa-times-circle', icon_alt: ' fa fa-magic', - advanced_option: true, - click: function(obj) { - if (obj.locked) return; - var state = obj.autouv+1 - if (state > 2) state = 0 - - obj.toggle('autouv', state) - } + advanced_option: true } } } @@ -296,7 +268,7 @@ class OutlinerNode { return this.export case 'locked': return this.locked - case 'shading': + case 'shade': return this.shade case 'autouv': if (!this.autouv) { @@ -375,18 +347,6 @@ class OutlinerElement extends OutlinerNode { } return edited; } - toggle(key, val) { - if (val === undefined) { - var val = !this[key] - } - this.forSelected((el) => { - el[key] = val - }, 'toggle '+key) - if (key === 'visibility') { - Canvas.updateVisibility() - } - return this; - } duplicate() { var copy = new this.constructor(this); //Numberation @@ -744,27 +704,27 @@ function stopRenameOutliner(save) { } } function toggleCubeProperty(key) { - if (!Cube.selected.length) return; - var state = Cube.selected[0][key] + let affected = Outliner.selected.filter(element => element[key] != undefined); + if (!affected.length) return; + var state = affected[0][key]; if (typeof state === 'number') { - state++; - if (state === 3) { - state = 0 - } + state = (state+1) % 3; } else { state = !state } - Undo.initEdit({elements: Cube.selected}) - Cube.selected.forEach(cube => { - cube[key] = state; + Undo.initEdit({elements: affected}) + affected.forEach(element => { + if (element[key] != undefined) { + element[key] = state; + } }) if (key === 'visibility') { Canvas.updateVisibility() } if (key === 'shade' && Project.box_uv) { - Canvas.updateUVs() + Canvas.updateUVs(); } - Undo.finishEdit('toggle_prop') + Undo.finishEdit('toggle property') } @@ -969,7 +929,7 @@ Interface.definePanels(function() { >` + //Opener - '' + + '' + '' + //Main '' + @@ -981,13 +941,14 @@ Interface.definePanels(function() { class="outliner_toggle" :class="getBtnClasses(btn, node)" :title="btn.title" - v-on:click.stop="btnClick(btn, node)" + :toggle="btn.id" + @click.stop >` + '' + //Other Entries '' + '', props: { @@ -1010,13 +971,6 @@ Interface.definePanels(function() { return node.closedIcon || node.icon; } }, - toggle: function (node) { - if (node.hasOwnProperty('isOpen')) { - node.isOpen = !node.isOpen; - } else { - Vue.set(node, 'isOpen', true); - } - }, getBtnClasses: function (btn, node) { let value = node.isIconEnabled(btn); if (value === true) { @@ -1026,11 +980,6 @@ Interface.definePanels(function() { } else { return [btn.icon_alt]; } - }, - btnClick: function (btn, node) { - if (typeof btn.click === 'function') { - btn.click(node); - } } } }); @@ -1084,9 +1033,67 @@ Interface.definePanels(function() { openMenu(event) { Interface.Panels.outliner.menu.show(event) }, + dragToggle(e1) { + let [original] = eventTargetToNode(e1.target); + let affected = []; + let affected_groups = []; + let key = e1.target.getAttribute('toggle'); + let previous_values = {}; + let value = original[key]; + value = (typeof value == 'number') ? (value+1) % 3 : !value; + + function move(e2) { + convertTouchEvent(e2); + if (e2.target.classList.contains('outliner_toggle') && e2.target.getAttribute('toggle') == key) { + let [node] = eventTargetToNode(e2.target); + if (!affected.includes(node) && (!node.locked || key == 'locked')) { + let new_affected = [node]; + if (node instanceof Group) { + node.forEachChild(node => new_affected.push(node)) + affected_groups.push(node); + } + new_affected.forEach(node => { + affected.push(node); + previous_values[node.uuid] = node[key]; + node[key] = value; + if (key == 'autouv' && node instanceof Cube) Canvas.updateUV(node); + }) + // Update + if (key == 'visibility') Canvas.updateVisibility(); + if (key == 'locked') updateSelection(); + } + } + } + function off(e2) { + if (affected.length) { + affected.forEach(node => { + node[key] = previous_values[node.uuid]; + }) + Undo.initEdit({elements: affected.filter(node => node instanceof OutlinerElement), outliner: affected_groups.length > 0}) + affected.forEach(node => { + node[key] = value; + if (key == 'shade') node.updateElement(); + }) + Undo.finishEdit(`toggle ${key} property`) + } + removeEventListeners(document, 'mousemove touchmove', move); + removeEventListeners(document, 'mouseup touchend', off); + } + addEventListeners(document, 'mousemove touchmove', move, {passive: false}); + addEventListeners(document, 'mouseup touchend', off, {passive: false}); + + move(e1); + + e1.preventDefault() + + }, dragNode(e1) { convertTouchEvent(e1); - let scope = this; + + if (e1.target.classList.contains('outliner_toggle')) { + this.dragToggle(e1); + return false; + } let [item] = eventTargetToNode(e1.target); if (!item || item.locked) { diff --git a/lang/en.json b/lang/en.json index 182fc306..21370f6f 100644 --- a/lang/en.json +++ b/lang/en.json @@ -1194,7 +1194,7 @@ "switches.visibility": "Visibility", "switches.lock": "Lock", "switches.export": "Export", - "switches.shading": "Shade", + "switches.shade": "Shade", "switches.mirror": "Mirror UV", "switches.autouv": "Auto UV",