Fix #1338 Viewport zoom and offset not consistent

Add Panel event hooks

js/interface/panels.js

@@ -17,6 +17,7 @@ class Panel {
 
 		this.onResize = data.onResize;
 		this.onFold = data.onFold;
+		this.events = {};
 		this.toolbars = data.toolbars || {};
 
 		if (!Interface.data.panels[this.id]) Interface.data.panels[this.id] = {};
@@ -225,7 +226,7 @@ class Panel {
 					}
 					updateTargetHighlight();
 					this.update(true);
-
+					this.dispatchEvent('drag', {event: e2, target_before, target_panel, target_slot});
 				}
 				let stop = e2 => {
 					convertTouchEvent(e2);
@@ -325,6 +326,7 @@ class Panel {
 			resizeWindow();
 		}
 		this.update();
+		this.dispatchEvent('fold', {});
 		return this;
 	}
 	setupFloatHandles() {
@@ -405,11 +407,14 @@ class Panel {
 		if (slot == undefined) {
 			slot = ref_panel.position_data.slot;
 		}
-		this.node.classList.remove('floating');
 		if (slot !== this.slot) {
 			this.previous_slot = this.slot;
 		}
 
+		this.dispatchEvent('move_to', {slot, ref_panel, before, previous_slot: this.previous_slot});
+
+		this.node.classList.remove('floating');
+
 		if (slot == 'left_bar' || slot == 'right_bar') {
 			let change_panel_order = !!ref_panel;
 			if (!ref_panel && Interface.data[slot].includes(this.id)) {
@@ -473,6 +478,7 @@ class Panel {
 				this.onResize()
 			}
 			updateInterface()
+			this.dispatchEvent('moved_to', {slot, ref_panel, before, previous_slot: this.previous_slot});
 		}
 		return this;
 	}
@@ -526,9 +532,32 @@ class Panel {
 		} else {
 			$(this.node).hide()
 		}
+		this.dispatchEvent('update', {show});
 		localStorage.setItem('interface_data', JSON.stringify(Interface.data))
 		return this;
 	}
+	//Events
+	dispatchEvent(event_name, data) {
+		var list = this.events[event_name]
+		if (!list) return;
+		for (var i = 0; i < list.length; i++) {
+			if (typeof list[i] === 'function') {
+				list[i](data)
+			}
+		}
+	}
+	on(event_name, cb) {
+		if (!this.events[event_name]) {
+			this.events[event_name] = []
+		}
+		this.events[event_name].safePush(cb)
+	}
+	removeListener(event_name, cb) {
+		if (this.events[event_name]) {
+			this.events[event_name].remove(cb);
+		}
+	}
+	//Delete
 	delete() {
 		delete Panels[this.id];
 		this.node.remove()

js/io/project.js

@@ -27,6 +27,10 @@ class ModelProject {
 		this.display_uv = settings.show_only_selected_uv.value ? 'selected_faces' :'selected_elements';
 		this.exploded_view = false;
 		this.previews = {};
+		this.uv_viewport = {
+			zoom: 1,
+			offset: [0, 0]
+		};
 		this.EditSession = null;
 
 		this.backgrounds = {
@@ -198,6 +202,8 @@ class ModelProject {
 			}
 		})
 
+		UVEditor.loadViewportOffset();
+
 		if (this.EditSession) {
 			Interface.Panels.chat.inside_vue.chat_history = this.EditSession.chat_history;
 			this.EditSession.catchUp();
@@ -241,6 +247,8 @@ class ModelProject {
 			}
 		})
 
+		UVEditor.saveViewportOffset();
+
 		this.undo.closeAmendEditMenu();
 		Preview.all.forEach(preview => {
 			if (preview.movingBackground) preview.stopMovingBackground();

js/modes.js

@@ -138,7 +138,7 @@ BARS.defineActions(function() {
 
 			Panels.uv.handle.firstChild.textContent = tl('mode.paint');
 			Panels.uv.position_data = Interface.data.panels.paint;
-			Panels.uv.moveTo(Panels.uv.slot);
+			if (Panels.uv.slot !== Interface.data.panels.uv.slot) Panels.uv.moveTo(Panels.uv.slot);
 			UVEditor.vue.setMode('paint');
 			three_grid.visible = false;
 		},
@@ -149,7 +149,7 @@ BARS.defineActions(function() {
 			})
 			Panels.uv.handle.firstChild.textContent = tl('panel.uv');
 			Panels.uv.position_data = Interface.data.panels.uv;
-			Panels.uv.moveTo(Panels.uv.slot);
+			if (Panels.uv.slot !== Interface.data.panels.paint.slot) Panels.uv.moveTo(Panels.uv.slot);
 			UVEditor.vue.setMode('uv');
 			three_grid.visible = true;
 		},

js/texturing/color.js

@@ -75,9 +75,7 @@ Interface.definePanels(() => {
 			Interface.Panels.color.vue.width = 0;
 			Vue.nextTick(() => {
 				let disp_before = this.vue.$refs.square_picker.style.display;
-				console.log(disp_before)
 				this.vue.$refs.square_picker.style.display = 'none';
-				console.log(this.height, this.vue.$el.clientHeight, this.handle.clientHeight)
 				let max = Math.min(460, (this.height - this.vue.$el.clientHeight - this.handle.clientHeight) * (this.vue.picker_type == 'box' ? 1.265 : 1));
 				Interface.Panels.color.vue.width = Math.clamp(this.width, 100, max);
 				this.vue.$refs.square_picker.style.display = disp_before;

js/texturing/uv.js

@@ -381,6 +381,7 @@ const UVEditor = {
 	//Set
 	setZoom(zoom) {
 		this.vue.zoom = zoom;
+		Project.uv_viewport.zoom = this.zoom;
 		return this;
 	},
 	setGrid(value) {
@@ -594,6 +595,19 @@ const UVEditor = {
 	getResolution(axis, texture) {
 		return axis ? Project.texture_height : Project.texture_width;
 	},
+	saveViewportOffset() {
+		let uv_viewport = this.vue.$refs.viewport;
+		let uv_margin = this.vue.getFrameMargin();
+		Project.uv_viewport.offset[0] = uv_viewport.scrollLeft - uv_margin[0];
+		Project.uv_viewport.offset[1] = uv_viewport.scrollTop - uv_margin[1];
+	},
+	loadViewportOffset() {
+		let uv_viewport = this.vue.$refs.viewport;
+		let uv_margin = this.vue.getFrameMargin();
+		uv_viewport.scrollLeft = Project.uv_viewport.offset[0] + uv_margin[0];
+		uv_viewport.scrollTop = Project.uv_viewport.offset[1] + uv_margin[1];
+		UVEditor.setZoom(Project.uv_viewport.zoom);
+	},
 
 	//Events
 	selectAll() {
@@ -1761,7 +1775,7 @@ Interface.definePanels(function() {
 					deep: true,
 					handler() {
 						let min_zoom = Math.min(1, this.inner_width/this.inner_height);
-						if (this.zoom < min_zoom) this.zoom = 1;
+						if (this.zoom < min_zoom) UVEditor.setZoom(1);
 					}
 				},
 				mode() {
@@ -1809,6 +1823,7 @@ Interface.definePanels(function() {
 					this.centered_view = true;
 				},
 				setMode(mode) {
+					this.mouse_coords.x = this.mouse_coords.y = -1;
 					this.mode = mode;
 				},
 				updateTexture() {
@@ -1866,6 +1881,7 @@ Interface.definePanels(function() {
 						let old_zoom = this.zoom;
 
 						this.zoom = number;
+						Project.uv_viewport.zoom = this.zoom;
 						
 						let updateScroll = () => {
 							let {viewport} = this.$refs;
@@ -2814,6 +2830,12 @@ Interface.definePanels(function() {
 			`
 		}
 	})
+	UVEditor.panel.on('move_to', (data) => {
+		UVEditor.saveViewportOffset();
+	})
+	UVEditor.panel.on('moved_to', (data) => {
+		UVEditor.loadViewportOffset();
+	})
 
 	Toolbars.uv_editor.toPlace()