From 180d9fa942f3a94dec490cc2adfdcd7c3106f8d9 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 11 Jun 2021 21:56:33 -0400
Subject: [PATCH] Fix panel location not resetting on cancel

---
 app/src/modules/insights/components/panel.vue | 45 ++++++++++++++-----
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/app/src/modules/insights/components/panel.vue b/app/src/modules/insights/components/panel.vue
index 7d3dcdb5c7..4b19828fd5 100644
--- a/app/src/modules/insights/components/panel.vue
+++ b/app/src/modules/insights/components/panel.vue
@@ -98,21 +98,41 @@ export default defineComponent({
 			height: undefined,
 		});
 
+		const { onPointerDown, onPointerUp, onPointerMove, dragging } = useDragDrop();
+
 		const positioning = computed(() => {
+			if (dragging.value) {
+				return {
+					x: editedPosition.position_x ?? props.panel.position_x,
+					y: editedPosition.position_y ?? props.panel.position_y,
+					width: editedPosition.width ?? props.panel.width,
+					height: editedPosition.height ?? props.panel.height,
+				};
+			}
+
 			return {
-				x: editedPosition.position_x ?? props.panel.position_x,
-				y: editedPosition.position_y ?? props.panel.position_y,
-				width: editedPosition.width ?? props.panel.width,
-				height: editedPosition.height ?? props.panel.height,
+				x: props.panel.position_x,
+				y: props.panel.position_y,
+				width: props.panel.width,
+				height: props.panel.height,
 			};
 		});
 
 		const positionStyling = computed(() => {
+			if (dragging.value) {
+				return {
+					'--pos-x': editedPosition.position_x ?? props.panel.position_x,
+					'--pos-y': editedPosition.position_y ?? props.panel.position_y,
+					'--width': editedPosition.width ?? props.panel.width,
+					'--height': editedPosition.height ?? props.panel.height,
+				};
+			}
+
 			return {
-				'--pos-x': editedPosition.position_x ?? props.panel.position_x,
-				'--pos-y': editedPosition.position_y ?? props.panel.position_y,
-				'--width': editedPosition.width ?? props.panel.width,
-				'--height': editedPosition.height ?? props.panel.height,
+				'--pos-x': props.panel.position_x,
+				'--pos-y': props.panel.position_y,
+				'--width': props.panel.width,
+				'--height': props.panel.height,
 			};
 		});
 
@@ -120,8 +140,6 @@ export default defineComponent({
 			'--v-icon-color': props.panel.color,
 		}));
 
-		const { onPointerDown, onPointerUp, onPointerMove, dragging } = useDragDrop();
-
 		return {
 			positioning,
 			positionStyling,
@@ -227,11 +245,16 @@ export default defineComponent({
 
 			function onPointerUp() {
 				if (props.editMode === false) return;
+				emit('update', editedPosition);
+
 				dragging.value = false;
 				window.removeEventListener('pointerup', onPointerUp);
 				window.removeEventListener('pointermove', onPointerMove);
 
-				emit('update', editedPosition);
+				editedPosition.position_x = undefined;
+				editedPosition.position_y = undefined;
+				editedPosition.width = undefined;
+				editedPosition.height = undefined;
 			}
 		}
 	},