From 7e1cc3a856018b634926c1855cc7f7874ad0c47b Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Sat, 23 Jan 2021 12:22:05 +0100 Subject: [PATCH] Add toggles --- css/general.css | 2 +- js/animations/animation.js | 11 +++--- js/interface/actions.js | 71 +++++++++++++++++++++++++++++++------- js/interface/menu.js | 1 + js/outliner/cube.js | 1 + js/outliner/outliner.js | 23 ++++-------- js/outliner/tree.vue.js | 2 +- js/preview/preview.js | 43 +++++++++-------------- js/texturing/painter.js | 30 ++++++---------- js/texturing/uv.js | 11 +++--- 10 files changed, 107 insertions(+), 88 deletions(-) diff --git a/css/general.css b/css/general.css index 58c62e9..0e68b15 100644 --- a/css/general.css +++ b/css/general.css @@ -343,7 +343,7 @@ margin-top: 4px; } - .tool.sel { + .tool.enabled { border-bottom: 3px solid var(--color-accent); } diff --git a/js/animations/animation.js b/js/animations/animation.js index 2f5a69b..83a8ab5 100644 --- a/js/animations/animation.js +++ b/js/animations/animation.js @@ -1819,18 +1819,17 @@ BARS.defineActions(function() { }) // Motion Trail - new Action('lock_motion_trail', { + new Toggle('lock_motion_trail', { icon: 'lock_open', category: 'animation', condition: () => Animator.open && Group.selected, - click() { - if (Animator.motion_trail_lock) { + onChange(value) { + if (value && Group.selected) { + Animator.motion_trail_lock = Group.selected.uuid; + } else { Animator.motion_trail_lock = false; Animator.showMotionTrail(); - } else if (Group.selected) { - Animator.motion_trail_lock = Group.selected.uuid; } - this.setIcon(Animator.motion_trail_lock ? 'lock' : 'lock_open'); } }) }) diff --git a/js/interface/actions.js b/js/interface/actions.js index 3233016..e7f8bbb 100644 --- a/js/interface/actions.js +++ b/js/interface/actions.js @@ -187,14 +187,15 @@ class Action extends BarItem { this.icon = data.icon if (data.linked_setting) { - this.description = tl('settings.'+data.linked_setting+'.desc') - this.linked_setting = data.linked_setting + if (!data.name) this.name = tl(`settings.${data.linked_setting}`); + if (!data.description) this.description = tl(`settings.${data.linked_setting}.desc`); + this.linked_setting = data.linked_setting; } if (data.condition) this.condition = data.condition this.children = data.children; //Node - this.click = data.click + if (!this.click) this.click = data.click this.icon_node = Blockbench.getIconNode(this.icon, this.color) this.icon_states = data.icon_states; this.node = $(`
`).get(0) @@ -205,10 +206,6 @@ class Action extends BarItem { this.addLabel(data.label) this.updateKeybindingLabel() $(this.node).click(function(e) {scope.trigger(e)}) - - if (data.linked_setting) { - this.toggleLinkedSetting(false) - } } trigger(event) { var scope = this; @@ -311,8 +308,14 @@ class Tool extends Action { } select() { if (this === Toolbox.selected) return; - if (Toolbox.selected && Toolbox.selected.onUnselect && typeof Toolbox.selected.onUnselect == 'function') { - Toolbox.selected.onUnselect() + if (Toolbox.selected) { + Toolbox.selected.nodes.forEach(node => { + node.classList.remove('enabled') + }) + Toolbox.selected.menu_node.classList.remove('enabled') + if (typeof Toolbox.selected.onUnselect == 'function') { + Toolbox.selected.onUnselect() + } } Toolbox.selected = this; delete Toolbox.original; @@ -335,9 +338,11 @@ class Tool extends Action { this.onSelect() } $('#preview').css('cursor', (this.cursor ? this.cursor : 'default')) - $('.tool.sel').removeClass('sel') - $('.tool.'+this.id).addClass('sel') - TickUpdates.selection = true; + this.nodes.forEach(node => { + node.classList.add('enabled') + }) + this.menu_node.classList.add('enabled') + TickUpdates.selection = true; return this; } trigger(event) { @@ -358,6 +363,48 @@ class Tool extends Action { return false; } } +class Toggle extends Action { + constructor(id, data) { + super(id, data); + this.type = 'toggle'; + this.value = data.default || false; + if (this.linked_setting && settings[this.linked_setting]) { + this.value = settings[this.linked_setting].value; + } + this.onChange = data.onChange; + + this.menu_icon_node = Blockbench.getIconNode('check_box_outline_blank'); + $(this.menu_node).find('.icon').replaceWith(this.menu_icon_node); + + this.updateEnabledState(); + } + click() { + this.value = !this.value; + if (this.linked_setting && settings[this.linked_setting]) { + let setting = settings[this.linked_setting]; + setting.value = this.value; + if (setting.onChange) setting.onChange(setting.value); + } + if (this.onChange) this.onChange(this.value); + + this.updateEnabledState(); + } + setIcon(icon) { + if (icon) { + this.icon = icon; + this.icon_node = Blockbench.getIconNode(this.icon); + this.nodes.forEach(n => { + $(n).find('.icon').replaceWith($(this.icon_node).clone()); + }) + } + } + updateEnabledState() { + this.nodes.forEach(node => { + node.classList.toggle('enabled', this.value); + }) + this.menu_icon_node.innerText = this.value ? 'check_box' : 'check_box_outline_blank'; + } +} class Widget extends BarItem { constructor(id, data) { if (typeof id == 'object') { diff --git a/js/interface/menu.js b/js/interface/menu.js index fd2b1cc..36eecf6 100644 --- a/js/interface/menu.js +++ b/js/interface/menu.js @@ -629,6 +629,7 @@ const MenuBar = { 'flip_z' ]}, 'delete', + 'lock_motion_trail', '_', 'select_effect_animator', '_', diff --git a/js/outliner/cube.js b/js/outliner/cube.js index 95703c0..48e9782 100644 --- a/js/outliner/cube.js +++ b/js/outliner/cube.js @@ -47,6 +47,7 @@ class Face { } reset() { this.uv = [0, 0, 0, 0]; + this.rotation = 0; this.texture = false; return this; } diff --git a/js/outliner/outliner.js b/js/outliner/outliner.js index d209608..d6c4be7 100644 --- a/js/outliner/outliner.js +++ b/js/outliner/outliner.js @@ -906,17 +906,12 @@ function toggleCubeProperty(key) { BARS.defineActions(function() { - new Action('outliner_toggle', { - icon: 'view_stream', + new Toggle('outliner_toggle', { + icon: 'dns', category: 'edit', keybind: new Keybind({key: 115}), - click: function () { - - Outliner.vue._data.show_advanced_toggles = !Outliner.vue._data.show_advanced_toggles; - BarItems.outliner_toggle.setIcon(Outliner.vue._data.show_advanced_toggles - ? 'dns' - : 'view_stream' - ) + onChange: function (value) { + Outliner.vue._data.show_advanced_toggles = value; } }) new BarText('cube_counter', { @@ -989,14 +984,10 @@ BARS.defineActions(function() { Undo.finishEdit('unlock_everything') } }) - new Action('element_colors', { - icon: 'check_box', + new Toggle('element_colors', { category: 'edit', - linked_setting: 'outliner_colors', - click: function () { - BarItems.element_colors.toggleLinkedSetting() - updateSelection() - } + icon: 'palette', + linked_setting: 'outliner_colors' }) new Action('select_window', { icon: 'filter_list', diff --git a/js/outliner/tree.vue.js b/js/outliner/tree.vue.js index a79be5d..e85e9d8 100644 --- a/js/outliner/tree.vue.js +++ b/js/outliner/tree.vue.js @@ -13,7 +13,7 @@ '' + '' + //Main - '' + + '' + '' + diff --git a/js/preview/preview.js b/js/preview/preview.js index 3473775..0c95c6e 100644 --- a/js/preview/preview.js +++ b/js/preview/preview.js @@ -1862,12 +1862,13 @@ function buildGrid() { } BARS.defineActions(function() { - new Action('toggle_wireframe', { - icon: 'check_box_outline_blank', + new Toggle('toggle_wireframe', { + icon: 'border_clear', category: 'view', keybind: new Keybind({key: 90}), condition: () => Toolbox && Toolbox.selected && Toolbox.selected.allowWireframe, - click: function () { + default: false, + onChange: function (state) { Prop.wireframe = !Prop.wireframe Canvas.updateAllFaces() if (Modes.id === 'animate') { @@ -1877,42 +1878,30 @@ BARS.defineActions(function() { this.setIcon(Prop.wireframe ? 'check_box' : 'check_box_outline_blank') } }) - new Action('preview_checkerboard', { - name: tl('settings.preview_checkerboard'), - description: tl('settings.preview_checkerboard.desc'), + new Toggle('preview_checkerboard', { + icon: 'fas.fa-chess-board', category: 'view', linked_setting: 'preview_checkerboard', - keybind: new Keybind({key: 84}), - click: function () { - this.toggleLinkedSetting() - } + keybind: new Keybind({key: 84}) }) - new Action('uv_checkerboard', { - name: tl('settings.uv_checkerboard'), - description: tl('settings.uv_checkerboard.desc'), + new Toggle('uv_checkerboard', { + icon: 'fas.fa-chess-board', category: 'view', - linked_setting: 'uv_checkerboard', - click: function () { - this.toggleLinkedSetting() - } + linked_setting: 'uv_checkerboard' }) - new Action('toggle_shading', { + new Toggle('toggle_shading', { name: tl('settings.shading'), description: tl('settings.shading.desc'), + icon: 'wb_sunny', category: 'view', - linked_setting: 'shading', - click: function () { - this.toggleLinkedSetting() - } + linked_setting: 'shading' }) - new Action('toggle_motion_trails', { + new Toggle('toggle_motion_trails', { name: tl('settings.motion_trails'), description: tl('settings.motion_trails.desc'), + icon: 'gesture', category: 'view', - linked_setting: 'motion_trails', - click: function () { - this.toggleLinkedSetting() - } + linked_setting: 'motion_trails' }) new Action('screenshot_model', { diff --git a/js/texturing/painter.js b/js/texturing/painter.js index 9ce3077..f32b644 100644 --- a/js/texturing/painter.js +++ b/js/texturing/painter.js @@ -946,38 +946,30 @@ BARS.defineActions(function() { color: true, } }) - new Action('mirror_painting', { - label: true, - icon: 'check_box_outline_blank', + new Toggle('mirror_painting', { + //label: true, + icon: 'flip', category: 'paint', condition: () => Modes.paint, - click: function () { - Painter.mirror_painting = !Painter.mirror_painting; - this.setIcon(Painter.mirror_painting ? 'check_box' : 'check_box_outline_blank') + onChange: function (value) { + Painter.mirror_painting = value; } }) - new Action('lock_alpha', { - icon: 'fas.fa-unlock', + new Toggle('lock_alpha', { + icon: 'fas.fa-chess-board', category: 'paint', condition: () => Modes.paint, - click: function () { + onChange: function () { Painter.lock_alpha = !Painter.lock_alpha; - this.setIcon(Painter.lock_alpha ? 'fas.fa-lock' : 'fas.fa-unlock') } }) - new Action('painting_grid', { - name: tl('settings.painting_grid'), - description: tl('settings.painting_grid.desc'), - icon: 'check_box', - icon_states: ['grid_off', 'grid_on'], + new Toggle('painting_grid', { + icon: 'grid_on', category: 'view', condition: () => Modes.paint, keybind: new Keybind({key: 71}), - linked_setting: 'painting_grid', - click: function () { - BarItems.painting_grid.toggleLinkedSetting() - } + linked_setting: 'painting_grid' }) new NumSlider('slider_brush_size', { diff --git a/js/texturing/uv.js b/js/texturing/uv.js index 90e064e..5a4ed40 100644 --- a/js/texturing/uv.js +++ b/js/texturing/uv.js @@ -2241,14 +2241,13 @@ BARS.defineActions(function() { }) - new Action('toggle_uv_overlay', { + new Toggle('toggle_uv_overlay', { condition: () => Project.box_uv, - icon: 'crop_landscape',//'crop_landscape' + icon: 'view_quilt', category: 'uv', - click: function () { - main_uv.showing_overlays = !main_uv.showing_overlays - BarItems.toggle_uv_overlay.setIcon(main_uv.showing_overlays ? 'view_quilt' : 'crop_landscape') - main_uv.displayAllMappingOverlays() + onChange(value) { + main_uv.showing_overlays = value; + main_uv.displayAllMappingOverlays(); } }) })