From 1ec39b0316ea5a09d067ee9838d68ee31dc190fc Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 13:23:58 -0400
Subject: [PATCH 01/12] setup props

---
 .../src/temp/tera-infinite-canvas.vue         | 92 ++++++++++++-------
 .../src/temp/tera-simulation-workflow.vue     |  6 +-
 2 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
index 2802692222..c1486a2db8 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
@@ -6,21 +6,35 @@
 		<div class="data-layer" ref="dataLayerRef">
 			<slot name="data" />
 		</div>
-		<svg ref="backgroundLayerRef" :width="width" :height="height">
+		<svg class="background-layer" ref="backgroundLayerRef" :width="width" :height="height">
 			<slot name="background" />
 		</svg>
 	</main>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import * as d3 from 'd3';
 
+const props = withDefaults(
+	defineProps<{
+		debugMode?: boolean;
+		scaleExtent?: [number, number];
+		lastTransform?: d3.ZoomTransform;
+	}>(),
+	{
+		debugMode: false,
+		scaleExtent: () => [0.1, 10]
+	}
+);
+
+const emit = defineEmits(['save-transform']);
+
 let x: d3.ScaleLinear<number, number, never>, y: d3.ScaleLinear<number, number, never>;
 let xAxis: d3.Axis<d3.NumberValue>, yAxis: d3.Axis<d3.NumberValue>;
 let gX: d3.Selection<SVGGElement, any, null, any>;
 let gY: d3.Selection<SVGGElement, any, null, any>;
-let currentTransform: d3.ZoomTransform;
+let currentTransform = props.lastTransform;
 
 const width = ref(0);
 const height = ref(0);
@@ -48,30 +62,32 @@ function updateDimensions() {
 	// Update dimensions
 	width.value = canvasRef.value?.clientWidth ?? window.innerWidth;
 	height.value = canvasRef.value?.clientHeight ?? window.innerHeight;
-	console.log(0);
-	// Update debug values
-	x = d3
-		.scaleLinear()
-		.domain([-1, width.value + 1])
-		.range([-1, width.value + 1]);
-	y = d3
-		.scaleLinear()
-		.domain([-1, height.value + 1])
-		.range([-1, height.value + 1]);
-	xAxis = d3
-		.axisBottom(x)
-		.ticks(((width.value + 2) / (height.value + 2)) * 10)
-		.tickSize(height.value)
-		.tickPadding(8 - height.value);
-	yAxis = d3
-		.axisRight(y)
-		.ticks(10)
-		.tickSize(width.value)
-		.tickPadding(8 - width.value);
-
-	if (currentTransform) {
-		gX.call(xAxis.scale(currentTransform.rescaleX(x)));
-		gY.call(yAxis.scale(currentTransform.rescaleY(y)));
+
+	if (props.debugMode) {
+		// Update debug values
+		x = d3
+			.scaleLinear()
+			.domain([-1, width.value + 1])
+			.range([-1, width.value + 1]);
+		y = d3
+			.scaleLinear()
+			.domain([-1, height.value + 1])
+			.range([-1, height.value + 1]);
+		xAxis = d3
+			.axisBottom(x)
+			.ticks(((width.value + 2) / (height.value + 2)) * 10)
+			.tickSize(height.value)
+			.tickPadding(8 - height.value);
+		yAxis = d3
+			.axisRight(y)
+			.ticks(10)
+			.tickSize(width.value)
+			.tickPadding(8 - width.value);
+
+		if (currentTransform) {
+			gX.call(xAxis.scale(currentTransform.rescaleX(x)));
+			gY.call(yAxis.scale(currentTransform.rescaleY(y)));
+		}
 	}
 }
 
@@ -82,7 +98,7 @@ onMounted(() => {
 
 	const zoom = d3
 		.zoom()
-		.scaleExtent([0.2, 20])
+		.scaleExtent(props.scaleExtent)
 		.on('zoom', (e) => handleZoom(e, container));
 
 	svg.call(zoom as any).on('dblclick.zoom', null);
@@ -92,8 +108,14 @@ onMounted(() => {
 	updateDimensions();
 	window.addEventListener('resize', () => updateDimensions());
 
-	gX = svg.append('g').attr('class', 'axis axis--x').call(xAxis);
-	gY = svg.append('g').attr('class', 'axis axis--y').call(yAxis);
+	if (props.debugMode) {
+		gX = svg.append('g').attr('class', 'axis axis--x').call(xAxis);
+		gY = svg.append('g').attr('class', 'axis axis--y').call(yAxis);
+	}
+});
+
+onUnmounted(() => {
+	emit('save-transform', currentTransform);
 });
 </script>
 
@@ -103,15 +125,19 @@ main {
 	height: 100%;
 }
 
-svg {
+.data-layer {
+	position: absolute;
+}
+
+.background-layer {
 	border: 1px solid blue;
 	cursor: grab;
 	width: 100%;
 	height: 100%;
 }
 
-.data-layer {
-	position: absolute;
+.background-layer:deep(.tick line) {
+	opacity: 0.2;
 }
 
 svg:active {
diff --git a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
index ee295f7ffc..e4313709b0 100644
--- a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
@@ -1,5 +1,5 @@
 <template>
-	<infinite-canvas>
+	<infinite-canvas debug-mode @save-transform="saveTransform">
 		<template #foreground></template>
 		<template #data>
 			<div style="font-size: 24px; padding: 10px; background: #9ef">This is a DataLayer DIV</div>
@@ -9,4 +9,8 @@
 
 <script setup lang="ts">
 import InfiniteCanvas from '@/temp/tera-infinite-canvas.vue';
+
+function saveTransform(transform: d3.ZoomTransform) {
+	console.log(transform);
+}
 </script>

From c98ba9fb60dc83c6c005227477227d6f1dd694ae Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 13:54:22 -0400
Subject: [PATCH 02/12] resize improve

---
 .../hmi-client/src/page/project/tera-project.vue      |  8 ++++----
 .../hmi-client/src/temp/tera-infinite-canvas.vue      | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/client/hmi-client/src/page/project/tera-project.vue b/packages/client/hmi-client/src/page/project/tera-project.vue
index 6101f3f3bc..23215c2388 100644
--- a/packages/client/hmi-client/src/page/project/tera-project.vue
+++ b/packages/client/hmi-client/src/page/project/tera-project.vue
@@ -82,12 +82,12 @@
 			/>
 			<tera-project-overview v-else-if="assetType === 'overview'" :project="project" />
 			<!-- Test workflow in project view -->
-			<!-- <tera-simulation-workflow v-else /> -->
-			<section v-else class="no-open-tabs">
+			<tera-simulation-workflow v-else />
+			<!-- <section v-else class="no-open-tabs">
 				<img src="@assets/svg/seed.svg" alt="Seed" />
 				<p>You can open resources from the resource panel.</p>
 				<Button label="Open project overview" @click="openOverview" />
-			</section>
+			</section> -->
 		</section>
 		<tera-slider-panel
 			class="slider"
@@ -247,7 +247,7 @@ import * as ProjectService from '@/services/project';
 import useResourcesStore from '@/stores/resources';
 import { useTabStore } from '@/stores/tabs';
 import SimulationRun from '@/temp/SimulationResult3.vue';
-// import TeraSimulationWorkflow from '@/temp/tera-simulation-workflow.vue';
+import TeraSimulationWorkflow from '@/temp/tera-simulation-workflow.vue';
 import { Tab, Annotation } from '@/types/common';
 import { IProject, ProjectAssetTypes, isProjectAssetTypes } from '@/types/Project';
 import { logger } from '@/utils/logger';
diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
index c1486a2db8..124784665a 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
@@ -32,8 +32,8 @@ const emit = defineEmits(['save-transform']);
 
 let x: d3.ScaleLinear<number, number, never>, y: d3.ScaleLinear<number, number, never>;
 let xAxis: d3.Axis<d3.NumberValue>, yAxis: d3.Axis<d3.NumberValue>;
-let gX: d3.Selection<SVGGElement, any, null, any>;
-let gY: d3.Selection<SVGGElement, any, null, any>;
+let gX: d3.Selection<SVGGElement, any, null, any>, gY: d3.Selection<SVGGElement, any, null, any>;
+
 let currentTransform = props.lastTransform;
 
 const width = ref(0);
@@ -91,6 +91,8 @@ function updateDimensions() {
 	}
 }
 
+const resizeObserver = new ResizeObserver(() => updateDimensions());
+
 onMounted(() => {
 	const svg = d3.select(backgroundLayerRef.value as SVGGElement);
 
@@ -106,7 +108,7 @@ onMounted(() => {
 	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 
 	updateDimensions();
-	window.addEventListener('resize', () => updateDimensions());
+	if (canvasRef.value) resizeObserver.observe(canvasRef.value);
 
 	if (props.debugMode) {
 		gX = svg.append('g').attr('class', 'axis axis--x').call(xAxis);
@@ -130,14 +132,13 @@ main {
 }
 
 .background-layer {
-	border: 1px solid blue;
 	cursor: grab;
 	width: 100%;
 	height: 100%;
 }
 
 .background-layer:deep(.tick line) {
-	opacity: 0.2;
+	color: var(--surface-border);
 }
 
 svg:active {

From bd7f8e6e03ca5ae354c326864c7809883461773f Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 14:32:36 -0400
Subject: [PATCH 03/12] try to init transform

---
 .../hmi-client/src/temp/tera-infinite-canvas.vue      |  3 ++-
 .../hmi-client/src/temp/tera-simulation-workflow.vue  | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
index 124784665a..e773290268 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
@@ -24,7 +24,8 @@ const props = withDefaults(
 	}>(),
 	{
 		debugMode: false,
-		scaleExtent: () => [0.1, 10]
+		scaleExtent: () => [0.1, 10],
+		lastTransform: undefined // d3.zoomIdentity
 	}
 );
 
diff --git a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
index e4313709b0..10e5121579 100644
--- a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
@@ -1,5 +1,5 @@
 <template>
-	<infinite-canvas debug-mode @save-transform="saveTransform">
+	<infinite-canvas debug-mode :last-transform="lastTransform" @save-transform="saveTransform">
 		<template #foreground></template>
 		<template #data>
 			<div style="font-size: 24px; padding: 10px; background: #9ef">This is a DataLayer DIV</div>
@@ -8,8 +8,17 @@
 </template>
 
 <script setup lang="ts">
+import * as d3 from 'd3';
 import InfiniteCanvas from '@/temp/tera-infinite-canvas.vue';
 
+let lastTransform = undefined;
+
+// {
+// 	k: 0.7120250977985356,
+// 	x: 246.1420085893451,
+// 	y: 199.416543275727
+// }
+
 function saveTransform(transform: d3.ZoomTransform) {
 	console.log(transform);
 }

From 9652ba577091e1c9bee47d17e3c1661592014f9e Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 14:56:55 -0400
Subject: [PATCH 04/12] resize works

---
 .../client/hmi-client/src/temp/tera-infinite-canvas.vue     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
index e773290268..ef7af6ecae 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
@@ -25,7 +25,7 @@ const props = withDefaults(
 	{
 		debugMode: false,
 		scaleExtent: () => [0.1, 10],
-		lastTransform: undefined // d3.zoomIdentity
+		lastTransform: undefined
 	}
 );
 
@@ -46,6 +46,8 @@ const backgroundLayerRef = ref<SVGElement>();
 const handleZoom = (evt: any, container: d3.Selection<SVGGElement, any, null, any>) => {
 	container.attr('transform', evt.transform);
 
+	console.log(evt);
+
 	d3.select(dataLayerRef.value as HTMLDivElement)
 		.style(
 			'transform',
@@ -106,6 +108,8 @@ onMounted(() => {
 
 	svg.call(zoom as any).on('dblclick.zoom', null);
 
+	svg.transition().call(zoom.transform as any, currentTransform);
+
 	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 
 	updateDimensions();

From aac31f42c5dcae2560247a7e0b725eb0bd4fad69 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 14:57:51 -0400
Subject: [PATCH 05/12] s

---
 packages/client/hmi-client/src/temp/tera-infinite-canvas.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
index ef7af6ecae..620ecd2d62 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
@@ -46,8 +46,6 @@ const backgroundLayerRef = ref<SVGElement>();
 const handleZoom = (evt: any, container: d3.Selection<SVGGElement, any, null, any>) => {
 	container.attr('transform', evt.transform);
 
-	console.log(evt);
-
 	d3.select(dataLayerRef.value as HTMLDivElement)
 		.style(
 			'transform',
@@ -107,7 +105,6 @@ onMounted(() => {
 		.on('zoom', (e) => handleZoom(e, container));
 
 	svg.call(zoom as any).on('dblclick.zoom', null);
-
 	svg.transition().call(zoom.transform as any, currentTransform);
 
 	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');

From 93bfd00db2e8561ce65c65dafe993d1e842998fc Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 15:01:08 -0400
Subject: [PATCH 06/12] s

---
 packages/client/hmi-client/src/temp/tera-infinite-canvas.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
index 620ecd2d62..100a3a5088 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
@@ -105,7 +105,8 @@ onMounted(() => {
 		.on('zoom', (e) => handleZoom(e, container));
 
 	svg.call(zoom as any).on('dblclick.zoom', null);
-	svg.transition().call(zoom.transform as any, currentTransform);
+	// Resize works when d3.zoomIdentity is thrown in here - for some reason assigning currentTransform to d3.zoomIdentity and putting it here doesnt work
+	svg.transition().call(zoom.transform as any, d3.zoomIdentity);
 
 	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 

From b6579032c5cb524fc4ee974a6a58590958bf2c03 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 16:49:41 -0400
Subject: [PATCH 07/12] transform prop

---
 .../widgets}/tera-infinite-canvas.vue         | 38 ++++++++++++-------
 .../src/temp/tera-simulation-workflow.vue     | 15 +++-----
 2 files changed, 30 insertions(+), 23 deletions(-)
 rename packages/client/hmi-client/src/{temp => components/widgets}/tera-infinite-canvas.vue (77%)

diff --git a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
similarity index 77%
rename from packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
rename to packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
index 100a3a5088..216589ee2c 100644
--- a/packages/client/hmi-client/src/temp/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
@@ -20,7 +20,7 @@ const props = withDefaults(
 	defineProps<{
 		debugMode?: boolean;
 		scaleExtent?: [number, number];
-		lastTransform?: d3.ZoomTransform;
+		lastTransform?: { k: number; x: number; y: number };
 	}>(),
 	{
 		debugMode: false,
@@ -31,11 +31,13 @@ const props = withDefaults(
 
 const emit = defineEmits(['save-transform']);
 
-let x: d3.ScaleLinear<number, number, never>, y: d3.ScaleLinear<number, number, never>;
-let xAxis: d3.Axis<d3.NumberValue>, yAxis: d3.Axis<d3.NumberValue>;
-let gX: d3.Selection<SVGGElement, any, null, any>, gY: d3.Selection<SVGGElement, any, null, any>;
-
-let currentTransform = props.lastTransform;
+let x: d3.ScaleLinear<number, number, never>;
+let y: d3.ScaleLinear<number, number, never>;
+let xAxis: d3.Axis<d3.NumberValue>;
+let yAxis: d3.Axis<d3.NumberValue>;
+let gX: d3.Selection<SVGGElement, any, null, any>;
+let gY: d3.Selection<SVGGElement, any, null, any>;
+let currentTransform: d3.ZoomTransform;
 
 const width = ref(0);
 const height = ref(0);
@@ -95,28 +97,36 @@ function updateDimensions() {
 const resizeObserver = new ResizeObserver(() => updateDimensions());
 
 onMounted(() => {
-	const svg = d3.select(backgroundLayerRef.value as SVGGElement);
-
-	const container = svg.append('g');
+	const svg = d3.select(backgroundLayerRef.value as SVGGElement); // Parent SVG
+	const container = svg.append('g'); // Pan/zoom area
 
+	// Zoom config is applied and event handler
 	const zoom = d3
 		.zoom()
 		.scaleExtent(props.scaleExtent)
 		.on('zoom', (e) => handleZoom(e, container));
-
 	svg.call(zoom as any).on('dblclick.zoom', null);
-	// Resize works when d3.zoomIdentity is thrown in here - for some reason assigning currentTransform to d3.zoomIdentity and putting it here doesnt work
-	svg.transition().call(zoom.transform as any, d3.zoomIdentity);
-
-	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 
+	// Initializes/watches resize of component so SVG layer fills it
 	updateDimensions();
 	if (canvasRef.value) resizeObserver.observe(canvasRef.value);
 
+	// Assign debug grid
 	if (props.debugMode) {
 		gX = svg.append('g').attr('class', 'axis axis--x').call(xAxis);
 		gY = svg.append('g').attr('class', 'axis axis--y').call(yAxis);
 	}
+
+	// Initialize starting position
+	if (props.lastTransform) {
+		zoom.scaleTo(svg as any, props.lastTransform.k);
+		zoom.translateTo(svg as any, props.lastTransform.x, props.lastTransform.y);
+	} else {
+		// Default position - triggers handleZoom which in turn sets currentTransform
+		svg.transition().call(zoom.transform as any, d3.zoomIdentity);
+	}
+
+	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 });
 
 onUnmounted(() => {
diff --git a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
index 10e5121579..d6011900d4 100644
--- a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
@@ -8,16 +8,13 @@
 </template>
 
 <script setup lang="ts">
-import * as d3 from 'd3';
-import InfiniteCanvas from '@/temp/tera-infinite-canvas.vue';
+import InfiniteCanvas from '@/components/widgets/tera-infinite-canvas.vue';
 
-let lastTransform = undefined;
-
-// {
-// 	k: 0.7120250977985356,
-// 	x: 246.1420085893451,
-// 	y: 199.416543275727
-// }
+const lastTransform = {
+	k: 0.5,
+	x: 0,
+	y: 0
+};
 
 function saveTransform(transform: d3.ZoomTransform) {
 	console.log(transform);

From be4ad089d2877029b6613211be9fcc371b6ac3a1 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 16:55:12 -0400
Subject: [PATCH 08/12] hide test

---
 .../client/hmi-client/src/page/project/tera-project.vue   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/hmi-client/src/page/project/tera-project.vue b/packages/client/hmi-client/src/page/project/tera-project.vue
index 23215c2388..6101f3f3bc 100644
--- a/packages/client/hmi-client/src/page/project/tera-project.vue
+++ b/packages/client/hmi-client/src/page/project/tera-project.vue
@@ -82,12 +82,12 @@
 			/>
 			<tera-project-overview v-else-if="assetType === 'overview'" :project="project" />
 			<!-- Test workflow in project view -->
-			<tera-simulation-workflow v-else />
-			<!-- <section v-else class="no-open-tabs">
+			<!-- <tera-simulation-workflow v-else /> -->
+			<section v-else class="no-open-tabs">
 				<img src="@assets/svg/seed.svg" alt="Seed" />
 				<p>You can open resources from the resource panel.</p>
 				<Button label="Open project overview" @click="openOverview" />
-			</section> -->
+			</section>
 		</section>
 		<tera-slider-panel
 			class="slider"
@@ -247,7 +247,7 @@ import * as ProjectService from '@/services/project';
 import useResourcesStore from '@/stores/resources';
 import { useTabStore } from '@/stores/tabs';
 import SimulationRun from '@/temp/SimulationResult3.vue';
-import TeraSimulationWorkflow from '@/temp/tera-simulation-workflow.vue';
+// import TeraSimulationWorkflow from '@/temp/tera-simulation-workflow.vue';
 import { Tab, Annotation } from '@/types/common';
 import { IProject, ProjectAssetTypes, isProjectAssetTypes } from '@/types/Project';
 import { logger } from '@/utils/logger';

From 0f503997b23eb32246092304e52ce1bdd9c1b2b0 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 26 Apr 2023 17:06:58 -0400
Subject: [PATCH 09/12] if

---
 .../src/components/widgets/tera-infinite-canvas.vue         | 6 ++++--
 .../client/hmi-client/src/temp/tera-simulation-workflow.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
index 216589ee2c..4492a5bae2 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
@@ -55,8 +55,10 @@ const handleZoom = (evt: any, container: d3.Selection<SVGGElement, any, null, an
 		)
 		.style('transform-origin', '0 0');
 
-	gX.call(xAxis.scale(evt.transform.rescaleX(x)));
-	gY.call(yAxis.scale(evt.transform.rescaleY(y)));
+	if (props.debugMode) {
+		gX.call(xAxis.scale(evt.transform.rescaleX(x)));
+		gY.call(yAxis.scale(evt.transform.rescaleY(y)));
+	}
 
 	currentTransform = evt.transform;
 };
diff --git a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
index d6011900d4..1bd62bb731 100644
--- a/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/temp/tera-simulation-workflow.vue
@@ -11,7 +11,7 @@
 import InfiniteCanvas from '@/components/widgets/tera-infinite-canvas.vue';
 
 const lastTransform = {
-	k: 0.5,
+	k: 0.75,
 	x: 0,
 	y: 0
 };

From 1a85c45e51a6080fcd3d0bb03bbf88622f4a9f86 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Thu, 27 Apr 2023 10:02:01 -0400
Subject: [PATCH 10/12] absolute

---
 .../hmi-client/src/components/widgets/tera-infinite-canvas.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
index 4492a5bae2..77ef6d2ab8 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
@@ -142,7 +142,7 @@ main {
 	height: 100%;
 }
 
-.data-layer {
+main > * {
 	position: absolute;
 }
 

From a4b59c55ea3dd641ed70e0595ffb386d9112f16b Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Thu, 27 Apr 2023 10:16:34 -0400
Subject: [PATCH 11/12] zoom end

---
 .../widgets/tera-infinite-canvas.vue          | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
index 77ef6d2ab8..8097f2123d 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import * as d3 from 'd3';
 
 const props = withDefaults(
@@ -45,23 +45,24 @@ const canvasRef = ref<HTMLElement>();
 const dataLayerRef = ref<HTMLDivElement>();
 const backgroundLayerRef = ref<SVGElement>();
 
-const handleZoom = (evt: any, container: d3.Selection<SVGGElement, any, null, any>) => {
-	container.attr('transform', evt.transform);
+function handleZoom(e: any, container: d3.Selection<SVGGElement, any, null, any>) {
+	container.attr('transform', e.transform);
 
 	d3.select(dataLayerRef.value as HTMLDivElement)
-		.style(
-			'transform',
-			`translate(${evt.transform.x}px, ${evt.transform.y}px) scale(${evt.transform.k})`
-		)
+		.style('transform', `translate(${e.transform.x}px, ${e.transform.y}px) scale(${e.transform.k})`)
 		.style('transform-origin', '0 0');
 
 	if (props.debugMode) {
-		gX.call(xAxis.scale(evt.transform.rescaleX(x)));
-		gY.call(yAxis.scale(evt.transform.rescaleY(y)));
+		gX.call(xAxis.scale(e.transform.rescaleX(x)));
+		gY.call(yAxis.scale(e.transform.rescaleY(y)));
 	}
 
-	currentTransform = evt.transform;
-};
+	currentTransform = e.transform;
+}
+
+function handleZoomEnd() {
+	emit('save-transform', currentTransform);
+}
 
 function updateDimensions() {
 	// Update dimensions
@@ -106,7 +107,8 @@ onMounted(() => {
 	const zoom = d3
 		.zoom()
 		.scaleExtent(props.scaleExtent)
-		.on('zoom', (e) => handleZoom(e, container));
+		.on('zoom', (e) => handleZoom(e, container))
+		.on('end', handleZoomEnd);
 	svg.call(zoom as any).on('dblclick.zoom', null);
 
 	// Initializes/watches resize of component so SVG layer fills it
@@ -130,10 +132,6 @@ onMounted(() => {
 
 	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 });
-
-onUnmounted(() => {
-	emit('save-transform', currentTransform);
-});
 </script>
 
 <style scoped>

From bfb2cd827331b2a4e9863c685d63dd88b37bd417 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Thu, 27 Apr 2023 12:27:31 -0400
Subject: [PATCH 12/12] stack layers in proper order

---
 .../src/components/widgets/tera-infinite-canvas.vue  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
index 8097f2123d..a957118f16 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
@@ -1,14 +1,14 @@
 <template>
 	<main ref="canvasRef">
-		<div>
-			<slot name="foreground" />
-		</div>
-		<div class="data-layer" ref="dataLayerRef">
-			<slot name="data" />
-		</div>
 		<svg class="background-layer" ref="backgroundLayerRef" :width="width" :height="height">
 			<slot name="background" />
 		</svg>
+		<div class="data-layer" ref="dataLayerRef">
+			<slot name="data" />
+		</div>
+		<div>
+			<slot name="foreground" />
+		</div>
 	</main>
 </template>