From 70c2ebe86ad952d8e3c3c22292fdf07b36e835f4 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Sat, 29 May 2021 18:07:13 -0400
Subject: [PATCH] Panel plot display

---
 app/src/modules/insights/components/panel.vue | 46 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/app/src/modules/insights/components/panel.vue b/app/src/modules/insights/components/panel.vue
index 67d367e492..4aa571da4d 100644
--- a/app/src/modules/insights/components/panel.vue
+++ b/app/src/modules/insights/components/panel.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="panel"
-		:style="positioning"
+		:style="positionStyling"
 		:class="{
 			editing: editMode,
 			dragging,
@@ -15,7 +15,7 @@
 	>
 		<div class="header" v-if="panel.show_header">
 			<v-icon class="icon" :style="iconColor" :name="panel.icon" />
-			<v-text-overflow class="name" :text="panel.name || ''" />
+			<v-text-overflow class="name selectable" :text="panel.name || ''" />
 			<div class="spacer" />
 			<v-icon class="note" v-if="panel.note" name="info" v-tooltip="panel.note" />
 		</div>
@@ -31,6 +31,10 @@
 			<v-icon class="delete-icon" name="clear" v-tooltip="$t('delete')" @click.stop="$emit('delete')" />
 		</div>
 
+		<div class="resize-details">
+			({{positioning.x - 1}}:{{positioning.y - 1}}) {{positioning.width}}×{{positioning.height}}
+		</div>
+
 		<div class="resize-handlers" v-if="editMode">
 			<div class="top" @pointerdown.stop="onPointerDown('resize-top', $event)" />
 			<div class="right" @pointerdown.stop="onPointerDown('resize-right', $event)" />
@@ -86,6 +90,15 @@ export default defineComponent({
 		});
 
 		const positioning = computed(() => {
+			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,
+			};
+		});
+
+		const positionStyling = computed(() => {
 			return {
 				'--pos-x': editedPosition.position_x ?? props.panel.position_x,
 				'--pos-y': editedPosition.position_y ?? props.panel.position_y,
@@ -102,11 +115,13 @@ export default defineComponent({
 
 		return {
 			positioning,
+			positionStyling,
 			iconColor,
 			onPointerDown,
 			onPointerUp,
 			onPointerMove,
 			dragging,
+			editedPosition,
 		};
 
 		function useDragDrop() {
@@ -247,8 +262,14 @@ export default defineComponent({
 .panel.editing.dragging {
 	border-color: var(--primary);
 	box-shadow: 0 0 0 1px var(--primary);
+	z-index: 3 !important;
 }
 
+.panel.editing.dragging .resize-details {
+	opacity: 1;
+}
+
+
 .panel-content {
 	position: relative;
 	width: 100%;
@@ -312,6 +333,27 @@ export default defineComponent({
 	border-top-right-radius: var(--border-radius-outline);
 }
 
+.resize-details {
+	transition: opacity var(--fast) var(--transition),
+							color var(--fast) var(--transition);
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	right: 0;
+	padding: 17px 14px;
+	color: var(--foreground-subdued);
+	font-weight: 500;
+	font-size: 15px;
+	font-family: var(--family-monospace);
+	font-style: normal;
+	line-height: 1;
+	text-align: right;
+	background-color: var(--background-page);
+	border-top-right-radius: var(--border-radius-outline);
+	pointer-events: none;
+	opacity: 0;
+}
+
 .resize-handlers div {
 	position: absolute;
 	z-index: 2;