From 3d6817302673febda812e352926da56d1436380a Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Mon, 10 Jun 2024 18:27:02 -0400
Subject: [PATCH] Model diagram wheel disable (#3761)

---
 .../graph-scaffolder/src/core/renderer.ts     | 23 +++---
 .../graph-scaffolder/src/types/index.ts       |  1 +
 .../css/theme/extensions/_selectbutton.scss   | 18 +++--
 .../model-diagrams/tera-model-diagram.vue     | 70 +++++++++++--------
 .../petrinet/petrinet-renderer.ts             |  2 +-
 .../src/model-representation/service.ts       |  2 +
 6 files changed, 71 insertions(+), 45 deletions(-)

diff --git a/packages/client/graph-scaffolder/src/core/renderer.ts b/packages/client/graph-scaffolder/src/core/renderer.ts
index 56ff604437..99728697fe 100644
--- a/packages/client/graph-scaffolder/src/core/renderer.ts
+++ b/packages/client/graph-scaffolder/src/core/renderer.ts
@@ -346,6 +346,7 @@ export abstract class Renderer<V, E> extends EventEmitter {
 					.style('pointer-events', 'none');
 			}
 		};
+
 		const zoomEnd = () => {
 			if (!this.graph || !chart) return;
 			this.zoomTransformObject = d3.zoomTransform(chart.node() as Element);
@@ -354,16 +355,20 @@ export abstract class Renderer<V, E> extends EventEmitter {
 
 		const minZoom = 0.05;
 		const maxZoom = Math.max(2, Math.floor((this.graph.width as number) / this.chartSize.width));
+		const zoomRange = this.options.zoomRange || [minZoom, maxZoom];
+
+		this.zoom = d3
+			.zoom()
+			.filter((event: MouseEvent) => {
+				if (renderer.options?.zoomModifier) {
+					return !(event.type === 'wheel') || event?.[renderer.options.zoomModifier];
+				}
+				return true;
+			})
+			.scaleExtent(zoomRange)
+			.on('zoom', zoomed)
+			.on('end', zoomEnd);
 
-		if (this.options.zoomRange) {
-			this.zoom = d3
-				.zoom()
-				.scaleExtent(this.options.zoomRange)
-				.on('zoom', zoomed)
-				.on('end', zoomEnd);
-		} else {
-			this.zoom = d3.zoom().scaleExtent([minZoom, maxZoom]).on('zoom', zoomed).on('end', zoomEnd);
-		}
 		svg.call(this.zoom as any).on('dblclick.zoom', null);
 
 		if (this.options.useStableZoomPan && this.zoomTransformObject) {
diff --git a/packages/client/graph-scaffolder/src/types/index.ts b/packages/client/graph-scaffolder/src/types/index.ts
index ccc7d8e670..f3e7bf63e4 100644
--- a/packages/client/graph-scaffolder/src/types/index.ts
+++ b/packages/client/graph-scaffolder/src/types/index.ts
@@ -64,6 +64,7 @@ export interface Options {
 
 	useZoom?: boolean;
 	zoomRange?: [number, number];
+	zoomModifier?: string;
 	useStableLayout?: boolean;
 
 	// Attempt to use the same set of zoom parameters across layout changes
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_selectbutton.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_selectbutton.scss
index 0241b5c644..1da774d810 100644
--- a/packages/client/hmi-client/src/assets/css/theme/extensions/_selectbutton.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/extensions/_selectbutton.scss
@@ -6,25 +6,25 @@
     border-radius: 6px;
     border: 1px solid var(--surface-border);
     background-color: var(--tab-backgroundcolor-unselected);
-    height: 40px; 
+    height: 40px;
 
     .p-button {
         padding: 12px;
-        border-radius: $borderRadius; 
+        border-radius: $borderRadius;
         background-color: var(--tab-backgroundcolor-unselected);
         border: none;
          &:hover {
                 background: $toggleButtonHoverBg;
             }
         &:focus {
-            background: $toggleButtonActiveBg;  
+            background: $toggleButtonActiveBg;
             &.p-highlight {
                 background: $toggleButtonBg;
-            } 
+            }
         }
         &.p-highlight {
             background: $toggleButtonBg;
-            border-radius: $borderRadius; 
+            border-radius: $borderRadius;
         }
     }
 }
@@ -42,6 +42,10 @@
     height:24px;
     border-radius: $borderRadius;
 
+		.p-button-label {
+			font-size: var(--font-caption);
+		}
+
     .p-button {
         padding: 8px;
         border-radius: $smallBorderRadius;
@@ -54,6 +58,6 @@
 .p-selectbutton.p-button-xsm {
     @extend .p-button-sm;
     .p-button-label {
-        font-size: var(--font-caption);
+        font-size: var(--font-tiny);
     }
-}
\ No newline at end of file
+}
diff --git a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue b/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
index 7eff5bc1fd..4d5ba7410a 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
@@ -4,12 +4,7 @@
 		:show-tooltip="!isEmpty(hoveredTransitionId)"
 	>
 		<main>
-			<TeraResizablePanel
-				v-if="!isPreview"
-				class="diagram-container"
-				:class="{ unlocked: !isLocked }"
-				:style="isLocked && { pointerEvents: 'none' }"
-			>
+			<TeraResizablePanel v-if="!isPreview" class="diagram-container">
 				<section class="graph-element">
 					<Toolbar>
 						<template #start>
@@ -17,22 +12,15 @@
 								<Button
 									@click="resetZoom"
 									label="Reset zoom"
-									class="p-button-sm p-button-outlined"
-									style="background-color: var(--gray-50)"
-									onmouseover="this.style.backgroundColor='--gray-100';"
-									onmouseout="this.style.backgroundColor='(--gray-50)';"
-									severity="secondary"
-								/>
-								<Button
-									@click="isLocked = !isLocked"
-									:icon="isLocked ? 'pi pi-lock' : 'pi pi-unlock'"
-									:label="isLocked ? 'Unlock to adjust' : 'Lock to freeze'"
-									class="p-button-sm p-button-outlined"
-									style="background-color: var(--gray-50)"
-									onmouseover="this.style.backgroundColor='--gray-100';"
-									onmouseout="this.style.backgroundColor='(--gray-50)';"
+									size="small"
 									severity="secondary"
+									outlined
 								/>
+								<span class="how-to-zoom">
+									<kbd>Ctrl</kbd>
+									+
+									<kbd>scroll</kbd>&nbsp;to zoom</span
+								>
 							</span>
 						</template>
 						<template #center> </template>
@@ -40,6 +28,7 @@
 							<span>
 								<SelectButton
 									v-if="model && isStratified"
+									class="p-button-sm"
 									:model-value="stratifiedView"
 									@change="
 										if ($event.value) {
@@ -146,7 +135,6 @@ const props = defineProps<{
 
 const emit = defineEmits(['update-configuration']);
 
-const isLocked = ref(true);
 const isCollapsed = ref(true);
 const graphElement = ref<HTMLDivElement | null>(null);
 const graphLegendLabels = ref<string[]>([]);
@@ -236,7 +224,7 @@ async function renderGraph() {
 
 	// Render graph
 	const graphData =
-		isCollapsed.value === true && isStratified.value
+		isCollapsed.value && isStratified.value
 			? convertToIGraph(templatesSummary)
 			: convertToIGraph(rawTemplates);
 
@@ -283,9 +271,7 @@ main {
 	display: flex;
 	flex-direction: column;
 }
-.unlocked {
-	border: 1px solid var(--primary-color);
-}
+
 .preview {
 	/* Having both min and max heights prevents height from resizing itself while being dragged on templating canvas
 	This resizes on template canvas but not when its in a workflow node?? (tera-model-node)
@@ -334,6 +320,11 @@ main {
 .graph-element {
 	background-color: var(--surface-secondary);
 	height: 100%;
+	cursor: grab;
+
+	&:active {
+		cursor: grabbing;
+	}
 }
 
 :deep(.graph-element .p-button) {
@@ -343,24 +334,47 @@ main {
 	}
 }
 
+.how-to-zoom {
+	display: flex;
+	align-items: center;
+	font-size: var(--font-caption);
+	background-color: var(--surface-transparent);
+	backdrop-filter: blur(4px);
+	padding: 0 var(--gap-small);
+	border-radius: var(--border-radius);
+	pointer-events: none;
+	user-select: none;
+}
+
+kbd {
+	background-color: var(--surface-section);
+	border: 1px solid var(--surface-border);
+	border-radius: var(--border-radius);
+	padding: 2px var(--gap-xsmall);
+	font-size: var(--font-tiny);
+	font-weight: var(--font-weight-semibold);
+}
+
 .legend {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	display: flex;
-	margin: 1rem;
+	margin: var(--gap-small);
+	margin-bottom: var(--gap);
+	gap: var(--gap);
+	pointer-events: none;
 }
 .legend-item {
 	display: flex;
 	align-items: center;
-	margin: 0 1rem;
+	gap: var(--gap-xsmall);
 }
 .legend-circle {
 	display: inline-block;
 	height: 1rem;
 	width: 1rem;
 	border-radius: 50%;
-	margin-right: 0.5rem;
 }
 
 .legend-anchor {
diff --git a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts
index c44a39694f..f6745f2662 100644
--- a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts
+++ b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-renderer.ts
@@ -226,7 +226,7 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
 		selection.selectAll('path').style('stroke-width', 2);
 	}
 
-	toggoleNodeSelectionByLabel(label: string) {
+	toggleNodeSelectionByLabel(label: string) {
 		const selection = this.chart?.selectAll('.node-ui').filter((d: any) => d.label === label);
 		if (selection && selection.size() === 1) {
 			this.toggleNodeSelection(selection as D3SelectionINode<NodeData>);
diff --git a/packages/client/hmi-client/src/model-representation/service.ts b/packages/client/hmi-client/src/model-representation/service.ts
index e5a479ff02..72442d62b2 100644
--- a/packages/client/hmi-client/src/model-representation/service.ts
+++ b/packages/client/hmi-client/src/model-representation/service.ts
@@ -139,6 +139,7 @@ export const getModelRenderer = (
 			el: graphElement,
 			useAStarRouting: false,
 			useStableZoomPan: true,
+			zoomModifier: 'ctrlKey',
 			runLayout: runDagreLayout,
 			dims,
 			nestedMap,
@@ -150,6 +151,7 @@ export const getModelRenderer = (
 		el: graphElement,
 		useAStarRouting: false,
 		useStableZoomPan: true,
+		zoomModifier: 'ctrlKey',
 		runLayout: runDagreLayout,
 		dragSelector: 'no-drag'
 	});