feat: initialize infinite canvas (#1026)

Co-authored-by: mwdchang <mwdchang@gmail.com>

packages/client/hmi-client/package.json

@@ -44,7 +44,8 @@
 		"vue": "3.2.47",
 		"vue-feather": "2",
 		"vue-router": "4.1.6",
-		"vue3-ace-editor": "2.2.2"
+		"vue3-ace-editor": "2.2.2",
+		"vue3-draggable-resizable": "1.6.5"
 	},
 	"devDependencies": {
 		"@pinia/testing": "0.0.16",

packages/client/hmi-client/src/components/models/tera-forecast-launcher.vue

@@ -123,7 +123,7 @@ const launch = async () => {
 		});
 		storage.setItem(key, JSON.stringify(modelItem));
 	}
-	emit('launch-forecast');
+	emit('launch-forecast', run.id);
 };
 
 const close = () => {

packages/client/hmi-client/src/page/project/tera-project.vue

@@ -81,6 +81,8 @@
 				is-editable
 			/>
 			<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">
 				<img src="@assets/svg/seed.svg" alt="Seed" />
 				<p>You can open resources from the resource panel.</p>
@@ -245,6 +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 { Tab, Annotation } from '@/types/common';
 import { IProject, ProjectAssetTypes, isProjectAssetTypes } from '@/types/Project';
 import { logger } from '@/utils/logger';
@@ -566,6 +569,7 @@ section {
 	flex-direction: column;
 	flex: 1;
 	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 .no-open-tabs {

packages/client/hmi-client/src/router/index.ts

@@ -11,6 +11,7 @@ import TA2Playground from '@/temp/TA2Playground.vue';
 import ResponsivePlayground from '@/temp/ResponsivePlayground.vue';
 import TheiaView from '@/temp/theia.vue';
 import WorkflowPlayground from '@/temp/workflow-playground/WorkflowPlayground.vue';
+import SimulationWorkflow from '@/temp/tera-simulation-workflow.vue';
 import { RouteName } from './routes';
 
 export enum RoutePath {
@@ -47,6 +48,7 @@ const routes = [
 	{ path: RoutePath.ResponsivePlaygroundPath, component: ResponsivePlayground },
 	{ path: RoutePath.ModelEditor, component: ModelEditorView },
 	{ path: RoutePath.ModelRunner, component: ModelRunnerView },
+	{ path: '/simulation-workflow', component: SimulationWorkflow },
 	{ path: '/workflow-playground', component: WorkflowPlayground }
 ];
 

packages/client/hmi-client/src/temp/tera-infinite-canvas.vue

@@ -0,0 +1,120 @@
+<template>
+	<main ref="canvasRef">
+		<div>
+			<slot name="foreground" />
+		</div>
+		<div class="data-layer" ref="dataLayerRef">
+			<slot name="data" />
+		</div>
+		<svg ref="backgroundLayerRef" :width="width" :height="height">
+			<slot name="background" />
+		</svg>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as d3 from 'd3';
+
+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;
+
+const width = ref(0);
+const height = ref(0);
+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);
+
+	d3.select(dataLayerRef.value as HTMLDivElement)
+		.style(
+			'transform',
+			`translate(${evt.transform.x}px, ${evt.transform.y}px) scale(${evt.transform.k})`
+		)
+		.style('transform-origin', '0 0');
+
+	gX.call(xAxis.scale(evt.transform.rescaleX(x)));
+	gY.call(yAxis.scale(evt.transform.rescaleY(y)));
+
+	currentTransform = evt.transform;
+};
+
+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)));
+	}
+}
+
+onMounted(() => {
+	const svg = d3.select(backgroundLayerRef.value as SVGGElement);
+
+	const container = svg.append('g');
+
+	const zoom = d3
+		.zoom()
+		.scaleExtent([0.2, 20])
+		.on('zoom', (e) => handleZoom(e, container));
+
+	svg.call(zoom as any).on('dblclick.zoom', null);
+
+	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
+
+	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);
+});
+</script>
+
+<style scoped>
+main {
+	width: 100%;
+	height: 100%;
+}
+
+svg {
+	border: 1px solid blue;
+	cursor: grab;
+	width: 100%;
+	height: 100%;
+}
+
+.data-layer {
+	position: absolute;
+}
+
+svg:active {
+	cursor: grabbing;
+}
+</style>

packages/client/hmi-client/src/temp/tera-simulation-workflow.vue

@@ -0,0 +1,12 @@
+<template>
+	<infinite-canvas>
+		<template #foreground></template>
+		<template #data>
+			<div style="font-size: 24px; padding: 10px; background: #9ef">This is a DataLayer DIV</div>
+		</template>
+	</infinite-canvas>
+</template>
+
+<script setup lang="ts">
+import InfiniteCanvas from '@/temp/tera-infinite-canvas.vue';
+</script>

yarn.lock

@@ -7111,6 +7111,7 @@ cors@latest:
     vue-router: 4.1.6
     vue-tsc: 1.2.0
     vue3-ace-editor: 2.2.2
+    vue3-draggable-resizable: 1.6.5
   languageName: unknown
   linkType: soft
 
@@ -12374,6 +12375,13 @@ send@latest:
   languageName: node
   linkType: hard
 
+"vue3-draggable-resizable@npm:1.6.5":
+  version: 1.6.5
+  resolution: "vue3-draggable-resizable@npm:1.6.5"
+  checksum: 041ad4518605e35b9e91c32a6e91d53f73ee95117d7944025bb90f6957b3a11d103c42ada0a3dbada6a7b96b635bea06b273177205d47330fdbd45723de1a8bf
+  languageName: node
+  linkType: hard
+
 "vue@npm:3.2.47, vue@npm:^3.2.22":
   version: 3.2.47
   resolution: "vue@npm:3.2.47"