Add toggles

css/general.css

@@ -343,7 +343,7 @@
 		margin-top: 4px;
 	}
 
-	.tool.sel {
+	.tool.enabled {
 		border-bottom: 3px solid var(--color-accent);
 	}
 

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');
 		}
 	})
 })

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 = $(`<div class="tool ${this.id}"></div>`).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') {

js/interface/menu.js

@@ -629,6 +629,7 @@ const MenuBar = {
 				'flip_z'
 			]},
 			'delete',
+			'lock_motion_trail',
 			'_',
 			'select_effect_animator',
 			'_',

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;
 	}

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',

js/outliner/tree.vue.js

@@ -13,7 +13,7 @@
 				'<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 && node.color) ? \' ec_\'+node.color : \'\')" v-on:dblclick.stop="if (node.children && node.children.length) {node.isOpen = !node.isOpen;}"></i>' +
+				'<i :class="node.icon + ((settings.outliner_colors.value && node.color >= 0) ? \' 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>' +
 
 

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', {

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', {

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();
 		}
 	})
 })