feat: draggable template card

packages/client/hmi-client/src/assets/css/theme/_fonts.scss

@@ -3,8 +3,7 @@ h2,
 h3,
 h4,
 h5,
-h6,
-h7 {
+h6   {
     font-weight: $fontWeightSemiBold;
 }
 
@@ -22,8 +21,4 @@ h5 {
 
 h6 {
     font-size: $fontBodySmall;
-}
-
-h7 {
-    font-size: $fontCaption;
-}
+} 

packages/client/hmi-client/src/components/model-template/tera-model-template-card.vue

@@ -3,7 +3,7 @@
 		<section class="card">
 			<div class="draggable"><i class="pi pi-pause" /></div>
 			<main>
-				<h7>Template title</h7>
+				<header>Template title</header>
 				<section>Diagram/Equations</section>
 			</main>
 			<Button icon="pi pi-ellipsis-v" rounded text />
@@ -46,10 +46,6 @@ const fakeVariables = ['X', 'Y', 'p'];
 		flex-direction: column;
 		gap: 1rem;
 
-		& > h7 {
-			font-weight: var(--font-weight);
-		}
-
 		& > * {
 			margin: 0 auto;
 		}

packages/client/hmi-client/src/components/model-template/tera-model-template.vue

@@ -1,16 +1,25 @@
 <template>
-	<tera-infinite-canvas>
+	<tera-infinite-canvas
+		@save-transform="saveTransform"
+		@mouseenter="setMouseOverCanvas(true)"
+		@mouseleave="setMouseOverCanvas(false)"
+		@drop="onDrop"
+		@dragover.prevent
+		@dragenter.prevent
+		@focus="() => {}"
+		@blur="() => {}"
+	>
 		<template #foreground>
 			<aside>
 				<section v-if="model?.header?.schema_name">
-					<h7>Model framework</h7>
+					<header>Model framework</header>
 					<h5>{{ model.header.schema_name }}<i class="pi pi-info-circle"></i></h5>
 				</section>
 				<section>
-					<h7>Model templates</h7>
+					<header>Model templates</header>
 					<ul>
 						<li v-for="(_, index) in 5" :key="index">
-							<tera-model-template-card />
+							<tera-model-template-card :card="newCard" draggable="true" />
 						</li>
 					</ul>
 				</section>
@@ -21,19 +30,69 @@
 			</aside>
 		</template>
 		<template #data>
-			<tera-model-template-card />
+			<tera-canvas-item
+				v-for="(card, index) in cards"
+				:key="index"
+				:style="{
+					minWidth: 'fit-content',
+					top: `${card.y}px`,
+					left: `${card.x}px`
+				}"
+				@dragging="(event) => updatePosition(card, event)"
+			>
+				<tera-model-template-card :card="card" />
+			</tera-canvas-item>
 		</template>
 	</tera-infinite-canvas>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+import { cloneDeep } from 'lodash';
 import { Model } from '@/types/Types';
 import TeraInfiniteCanvas from '../widgets/tera-infinite-canvas.vue';
 import TeraModelTemplateCard from './tera-model-template-card.vue';
+import TeraCanvasItem from '../widgets/tera-canvas-item.vue';
 
 defineProps<{
 	model?: Model;
 }>();
+
+interface ModelTemplateCard {
+	// Position on canvas
+	x: number;
+	y: number;
+}
+
+const newCard: ModelTemplateCard = { x: 0, y: 0 };
+let isMouseOverCanvas: boolean = false;
+let canvasTransform = { x: 0, y: 0, k: 1 };
+
+const cards = ref<ModelTemplateCard[]>([{ x: 300, y: 40 }]);
+
+const setMouseOverCanvas = (val: boolean) => {
+	isMouseOverCanvas = val;
+};
+
+function saveTransform(newTransform: { k: number; x: number; y: number }) {
+	canvasTransform = newTransform;
+}
+
+function updateNewCardPosition(event) {
+	newCard.x = (event.offsetX - canvasTransform.x) / canvasTransform.k;
+	newCard.y = (event.offsetY - canvasTransform.y) / canvasTransform.k;
+}
+
+function onDrop(event) {
+	updateNewCardPosition(event);
+	cards.value.push(cloneDeep(newCard));
+}
+
+const updatePosition = (card: ModelTemplateCard, { x, y }) => {
+	if (!isMouseOverCanvas) return;
+	card.x += x / canvasTransform.k;
+	card.y += y / canvasTransform.k;
+};
 </script>
 
 <style scoped>
@@ -60,15 +119,12 @@ h5 {
 	display: flex;
 	align-items: center;
 	gap: 0.25rem;
-}
-
-h5,
-h7 {
 	font-weight: var(--font-weight);
 }
 
-h7 {
+header {
 	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
 }
 
 .pi-info-circle {

packages/client/hmi-client/src/components/operator/tera-operator.vue

@@ -1,9 +1,10 @@
 <template>
 	<main
-		:style="nodeStyle"
 		ref="operator"
 		@mouseenter="interactionStatus = addHover(interactionStatus)"
 		@mouseleave="interactionStatus = removeHover(interactionStatus)"
+		@mousedown="interactionStatus = addDrag(interactionStatus)"
+		@mouseup="interactionStatus = removeDrag(interactionStatus)"
 		@focus="() => {}"
 		@focusout="() => {}"
 	>
@@ -43,8 +44,8 @@
 
 <script setup lang="ts">
 import { Position, WorkflowNode, WorkflowDirection, WorkflowPort } from '@/types/workflow';
-import { addHover, removeHover, addDrag, removeDrag, isDrag } from '@/services/operator-bitmask';
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { addHover, removeHover, addDrag, removeDrag } from '@/services/operator-bitmask';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
 import floatingWindow from '@/utils/floating-window';
 import router from '@/router';
 import { RouteName } from '@/router/routes';
@@ -57,13 +58,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits([
-	'dragging',
 	'port-selected',
 	'port-mouseover',
 	'port-mouseleave',
 	'remove-operator',
 	'remove-edges',
-	'drilldown',
 	'resize'
 ]);
 
@@ -72,44 +71,11 @@ enum PortDirection {
 	Output
 }
 
-const nodeStyle = computed(() => ({
-	minWidth: `${props.node.width}px`,
-	top: `${props.node.y}px`,
-	left: `${props.node.x}px`
-}));
-
 const operator = ref<HTMLElement>();
-
 const interactionStatus = ref(0); // States will be added to it thorugh bitmasking
-let tempX = 0;
-let tempY = 0;
 
 let resizeObserver: ResizeObserver | null = null;
 
-const startDrag = (evt: MouseEvent) => {
-	tempX = evt.x;
-	tempY = evt.y;
-	interactionStatus.value = addDrag(interactionStatus.value);
-};
-
-const drag = (evt: MouseEvent) => {
-	if (!isDrag(interactionStatus.value)) return;
-
-	const dx = evt.x - tempX;
-	const dy = evt.y - tempY;
-
-	emit('dragging', { x: dx, y: dy });
-
-	tempX = evt.x;
-	tempY = evt.y;
-};
-
-const stopDrag = (/* evt: MouseEvent */) => {
-	tempX = 0;
-	tempY = 0;
-	interactionStatus.value = removeDrag(interactionStatus.value);
-};
-
 function bringToFront() {
 	// TODO: bring to front
 	// maybe there can be a z-index variable in the parent component
@@ -143,26 +109,16 @@ function resizeHandler() {
 }
 
 onMounted(() => {
-	if (!operator.value) return;
-
-	operator.value.addEventListener('mousedown', startDrag);
-	resizeObserver = new ResizeObserver(resizeHandler);
-	resizeObserver.observe(operator.value);
-
-	document.addEventListener('mousemove', drag);
-	operator.value.addEventListener('mouseup', stopDrag);
+	if (operator.value) {
+		resizeObserver = new ResizeObserver(resizeHandler);
+		resizeObserver.observe(operator.value);
+	}
 });
 
 onBeforeUnmount(() => {
-	if (operator.value) {
-		operator.value.removeEventListener('mousedown', startDrag);
-		if (resizeObserver) {
-			resizeObserver.disconnect();
-			resizeObserver = null;
-		}
-
-		document.removeEventListener('mousemove', drag);
-		operator.value.removeEventListener('mouseup', stopDrag);
+	if (operator.value && resizeObserver) {
+		resizeObserver.disconnect();
+		resizeObserver = null;
 	}
 });
 </script>
@@ -172,9 +128,6 @@ main {
 	background-color: var(--surface-section);
 	outline: 1px solid var(--surface-border);
 	border-radius: var(--border-radius-medium);
-	position: absolute;
-	width: 15rem;
-	user-select: none;
 	box-shadow: var(--overlayMenuShadow);
 
 	&:hover {
@@ -183,7 +136,7 @@ main {
 	}
 
 	& > .content {
-		margin: 0.5rem;
+		padding: 0.5rem;
 	}
 
 	& > ul,
@@ -197,7 +150,7 @@ main {
 
 	/* Shared styles between tera-operator-inputs and tera-operator-outputs */
 	& > ul {
-		margin: 0.5rem 0;
+		padding: 0.5rem 0;
 		list-style: none;
 		font-size: var(--font-caption);
 		color: var(--text-color-secondary);

packages/client/hmi-client/src/components/widgets/tera-canvas-item.vue

@@ -0,0 +1,67 @@
+<template>
+	<section ref="canvasItem" :style="style">
+		<slot />
+	</section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+defineProps<{
+	style: { minWidth: string; top: string; left: string };
+}>();
+
+const emit = defineEmits(['dragging']);
+
+const canvasItem = ref();
+
+let isDragging = false;
+let tempX = 0;
+let tempY = 0;
+
+const startDrag = (evt: MouseEvent) => {
+	tempX = evt.x;
+	tempY = evt.y;
+	isDragging = true;
+};
+
+const drag = (evt: MouseEvent) => {
+	if (!isDragging) return;
+
+	const dx = evt.x - tempX;
+	const dy = evt.y - tempY;
+
+	emit('dragging', { x: dx, y: dy });
+
+	tempX = evt.x;
+	tempY = evt.y;
+};
+
+const stopDrag = (/* evt: MouseEvent */) => {
+	tempX = 0;
+	tempY = 0;
+	isDragging = false;
+};
+
+onMounted(() => {
+	if (!canvasItem.value) return;
+	canvasItem.value.addEventListener('mousedown', startDrag);
+	document.addEventListener('mousemove', drag);
+	canvasItem.value.addEventListener('mouseup', stopDrag);
+});
+
+onBeforeUnmount(() => {
+	if (canvasItem.value) {
+		canvasItem.value.removeEventListener('mousedown', startDrag);
+		document.removeEventListener('mousemove', drag);
+		canvasItem.value.removeEventListener('mouseup', stopDrag);
+	}
+});
+</script>
+
+<style scoped>
+section {
+	position: absolute;
+	user-select: none;
+}
+</style>

packages/client/hmi-client/src/workflow/ops/document/tera-document-operation-drilldown.vue

@@ -8,7 +8,7 @@
 			<tera-drilldown-preview hide-header>
 				<h5>{{ document?.name }}</h5>
 
-				<h7 class="clamp-text">{{ document?.text }}</h7>
+				<p class="clamp-text">{{ document?.text }}</p>
 				<Accordion multiple :active-index="[0, 1, 2]">
 					<AccordionTab v-if="!isEmpty(clonedState.equations)">
 						<template #header>
@@ -162,6 +162,8 @@ watch(
 
 <style scoped>
 .clamp-text {
+	font-size: var(--font-caption);
+	font-weight: var(--font-weight-semibold);
 	max-height: 2em;
 	color: var(--gray-700);
 	display: -webkit-box;