From 221dd2fc6e7c6192e972047f808b77e40904a5c3 Mon Sep 17 00:00:00 2001
From: David Arnold <dgx.arnold@gmail.com>
Date: Sat, 6 Sep 2025 13:07:37 +0200
Subject: [PATCH] refactor: move compensation menu so it can be relocated added
 elsewhere

This is useful, e.g. for plugins, to call into the compensation menu. Concrete example: a probing plugin.
---
 src/components/misc/CompensationMenu.vue   | 101 +++++++++++++++++++++
 src/components/misc/index.ts               |   2 +
 src/components/panels/CNCMovementPanel.vue |  60 +-----------
 src/components/panels/MovementPanel.vue    |  53 +----------
 4 files changed, 107 insertions(+), 109 deletions(-)
 create mode 100644 src/components/misc/CompensationMenu.vue

diff --git a/src/components/misc/CompensationMenu.vue b/src/components/misc/CompensationMenu.vue
new file mode 100644
index 000000000..12afff0c0
--- /dev/null
+++ b/src/components/misc/CompensationMenu.vue
@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <v-menu offset-y left :disabled="uiFrozen">
+            <template #activator="{ on }">
+                <v-btn v-show="visibleAxes.length" color="primary" block class="mx-0 move-btn" v-on="on" :disabled="uiFrozen">
+                    {{ $t("panel.movement.compensation") }}
+                    <v-icon>mdi-menu-down</v-icon>
+                </v-btn>
+            </template>
+
+            <v-card>
+                <v-list>
+                    <div v-show="isCompensationEnabled">
+                        <v-list-item>
+                            <v-spacer />
+                            {{ $t("panel.movement.compensationInUse", [compensationType]) }}
+                            <v-spacer />
+                        </v-list-item>
+
+                        <v-divider />
+                    </div>
+
+                    <v-list-item @click="sendCode('G32')">
+                        <v-icon class="mr-1">mdi-format-vertical-align-center</v-icon>
+                        {{ $t(isDelta ? "panel.movement.runDelta" : "panel.movement.runBed") }}
+                    </v-list-item>
+                    <v-list-item :disabled="!isCompensationEnabled" @click="sendCode('M561')">
+                        <v-icon class="mr-1">mdi-border-none</v-icon>
+                        {{ $t("panel.movement.disableBedCompensation") }}
+                    </v-list-item>
+
+                    <v-divider />
+
+                    <v-list-item @click="sendCode('G29')">
+                        <v-icon class="mr-1">mdi-grid</v-icon>
+                        {{ $t("panel.movement.runMesh") }}
+                    </v-list-item>
+                    <v-list-item @click="showMeshEditDialog = true">
+                        <v-icon class="mr-1">mdi-pencil</v-icon>
+                        {{ $t("panel.movement.editMesh") }}
+                    </v-list-item>
+                    <v-list-item @click="sendCode('G29 S1')">
+                        <v-icon class="mr-1">mdi-content-save</v-icon>
+                        {{ $t("panel.movement.loadMesh") }}
+                    </v-list-item>
+                    <v-list-item :disabled="!isCompensationEnabled" @click="sendCode('G29 S2')">
+                        <v-icon class="mr-1">mdi-grid-off</v-icon>
+                        {{ $t("panel.movement.disableMeshCompensation") }}
+                    </v-list-item>
+                </v-list>
+            </v-card>
+        </v-menu>
+        <mesh-edit-dialog :shown.sync="showMeshEditDialog" />
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Axis, KinematicsName, MoveCompensationType } from "@duet3d/objectmodel";
+import store from "@/store";
+
+interface CompensationMenuData {
+  showMeshEditDialog: boolean;
+}
+
+export default Vue.extend({
+  data(): CompensationMenuData {
+    return {
+      showMeshEditDialog: false,
+    };
+  },
+  computed: {
+    uiFrozen(): boolean {
+      return store.getters["uiFrozen"];
+    },
+    isCompensationEnabled(): boolean {
+      return store.state.machine.model.move.compensation.type !== MoveCompensationType.none;
+    },
+    compensationType(): MoveCompensationType {
+      return store.state.machine.model.move.compensation.type;
+    },
+    visibleAxes(): Axis[] {
+      return store.state.machine.model.move.axes.filter((axis: Axis) => axis.visible);
+    },
+    isDelta(): boolean {
+      return [KinematicsName.delta, KinematicsName.rotaryDelta].includes(store.state.machine.model.move.kinematics.name);
+    },
+  },
+  methods: {
+    async sendCode(code: string): Promise<void> {
+      await store.dispatch("machine/sendCode", code);
+    },
+  },
+  watch: {
+    isConnected() {
+      // Hide dialogs when the connection is interrupted
+      this.showMeshEditDialog = false;
+    },
+  },
+});
+</script>
diff --git a/src/components/misc/index.ts b/src/components/misc/index.ts
index 2f7fee71c..29f7043cb 100644
--- a/src/components/misc/index.ts
+++ b/src/components/misc/index.ts
@@ -7,6 +7,7 @@ import NotificationDisplay from "./NotificationDisplay.vue";
 import PanelLink from "./PanelLink.vue";
 import StatusLabel from "./StatusLabel.vue";
 import ThumbnailImg from "./ThumbnailImg.vue";
+import CompensationMenu from "./CompensationMenu.vue";
 
 Vue.component("directory-breadcrumbs", DirectoryBreadcrumbs);
 Vue.component("job-progress", JobProgress);
@@ -15,3 +16,4 @@ Vue.component("notification-display", NotificationDisplay);
 Vue.component("panel-link", PanelLink);
 Vue.component("status-label", StatusLabel);
 Vue.component("thumbnail-img", ThumbnailImg);
+Vue.component("compensation-menu", CompensationMenu);
\ No newline at end of file
diff --git a/src/components/panels/CNCMovementPanel.vue b/src/components/panels/CNCMovementPanel.vue
index 2a3a318d3..bc363b1ec 100644
--- a/src/components/panels/CNCMovementPanel.vue
+++ b/src/components/panels/CNCMovementPanel.vue
@@ -29,57 +29,7 @@
 					</code-btn>
 				</v-col>
 				<v-col cols="6" order="2" md="8" order-md="2">
-					<v-menu offset-y left :disabled="uiFrozen">
-						<template #activator="{ on }">
-							<v-btn v-show="visibleAxes.length" color="primary" block class="mx-0 move-btn"
-								   :disabled="uiFrozen" v-on="on">
-								{{ $t("panel.movement.compensation") }}
-								<v-icon>mdi-menu-down</v-icon>
-							</v-btn>
-						</template>
-
-						<v-card>
-							<v-list>
-								<div v-show="isCompensationEnabled">
-									<v-list-item>
-										<v-spacer />
-										{{ $t("panel.movement.compensationInUse", [compensationType]) }}
-										<v-spacer />
-									</v-list-item>
-
-									<v-divider />
-								</div>
-
-								<v-list-item @click="sendCode('G32')">
-									<v-icon class="mr-1">mdi-format-vertical-align-center</v-icon>
-									{{ $t(isDelta ? "panel.movement.runDelta" : "panel.movement.runBed") }}
-								</v-list-item>
-								<v-list-item :disabled="!isCompensationEnabled" @click="sendCode('M561')">
-									<v-icon class="mr-1">mdi-border-none</v-icon>
-									{{ $t("panel.movement.disableBedCompensation") }}
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-item @click="sendCode('G29')">
-									<v-icon class="mr-1">mdi-grid</v-icon>
-									{{ $t("panel.movement.runMesh") }}
-								</v-list-item>
-								<v-list-item @click="showMeshEditDialog = true">
-									<v-icon class="mr-1">mdi-pencil</v-icon>
-									{{ $t("panel.movement.editMesh") }}
-								</v-list-item>
-								<v-list-item @click="sendCode('G29 S1')">
-									<v-icon class="mr-1">mdi-content-save</v-icon>
-									{{ $t("panel.movement.loadMesh") }}
-								</v-list-item>
-								<v-list-item :disabled="!isCompensationEnabled" @click="sendCode('G29 S2')">
-									<v-icon class="mr-1">mdi-grid-off</v-icon>
-									{{ $t("panel.movement.disableMeshCompensation") }}
-								</v-list-item>
-							</v-list>
-						</v-card>
-					</v-menu>
+					<compensation-menu />
 				</v-col>
 				<v-col cols="12" order="3" md="2" order-md="3">
 					<v-btn @click="setWorkplaceZero" block class="move-btn">
@@ -162,7 +112,6 @@
 			{{ $t("panel.movement.noAxes") }}
 		</v-alert>
 
-		<mesh-edit-dialog :shown.sync="showMeshEditDialog" />
 		<input-dialog :shown.sync="moveStepDialog.shown" :title="$t('dialog.changeMoveStep.title')"
 					  :prompt="$t('dialog.changeMoveStep.prompt')" :preset="moveStepDialog.preset" is-numeric-value
 					  @confirmed="moveStepDialogConfirmed" />
@@ -170,7 +119,7 @@
 </template>
 
 <script lang="ts">
-import { Axis, AxisLetter, KinematicsName, MoveCompensationType } from "@duet3d/objectmodel";
+import { Axis, AxisLetter } from "@duet3d/objectmodel";
 import Vue from "vue";
 
 import store from "@/store";
@@ -180,17 +129,13 @@ export default Vue.extend({
 		uiFrozen(): boolean { return store.getters["uiFrozen"]; },
 		moveSteps(): (axisLetter: AxisLetter) => Array<number> { return ((axisLetter: AxisLetter) => store.getters["machine/settings/moveSteps"](axisLetter)); },
 		numMoveSteps(): number { return store.getters["machine/settings/numMoveSteps"]; },
-		isCompensationEnabled(): boolean { return store.state.machine.model.move.compensation.type !== MoveCompensationType.none; },
-		compensationType(): MoveCompensationType { return store.state.machine.model.move.compensation.type; },
 		visibleAxes(): Array<Axis> { return store.state.machine.model.move.axes.filter(axis => axis.visible); },
-		isDelta(): boolean { return [KinematicsName.linearDelta, KinematicsName.rotaryDelta].includes(store.state.machine.model.move.kinematics.name); },
 		unhomedAxes(): Array<Axis> { return store.state.machine.model.move.axes.filter(axis => axis.visible && !axis.homed); },
 		workCoordinates(): Array<number> { return [...Array(9).keys()].map(i => i + 1); },
 		workplaceNumber(): number { return store.state.machine.model.move.workplaceNumber; }
 	},
 	data() {
 		return {
-			showMeshEditDialog: false,
 			moveStepDialog: {
 				shown: false,
 				axis: AxisLetter.X,
@@ -258,7 +203,6 @@ export default Vue.extend({
 	watch: {
 		isConnected() {
 			// Hide dialogs when the connection is interrupted
-			this.showMeshEditDialog = false;
 			this.moveStepDialog.shown = false;
 		},
 		workplaceNumber(to: number) {
diff --git a/src/components/panels/MovementPanel.vue b/src/components/panels/MovementPanel.vue
index a965bd2f9..f581db759 100644
--- a/src/components/panels/MovementPanel.vue
+++ b/src/components/panels/MovementPanel.vue
@@ -21,52 +21,8 @@
 
 			<v-spacer />
 
-			<v-menu offset-y left>
-				<template #activator="{ on }">
-					<v-btn v-show="visibleAxes.length" color="primary" small class="mx-0" :elevation="1" v-on="on">
-						{{ $t("panel.movement.compensation") }}
-						<v-icon>mdi-menu-down</v-icon>
-					</v-btn>
-				</template>
+			<compensation-menu />
 
-				<v-card>
-					<v-list>
-						<template v-show="isCompensationEnabled">
-							<v-list-item>
-								<v-spacer />
-								{{ $t("panel.movement.compensationInUse", [$t(`panel.movement.compensationType.${compensationType}`)]) }}
-								<v-spacer />
-							</v-list-item>
-
-							<v-divider />
-						</template>
-
-						<v-list-item :disabled="!canHome" @click="sendCode('G32')">
-							<v-icon class="mr-1">mdi-format-vertical-align-center</v-icon>
-							{{ isDelta ? $t("panel.movement.runDelta") : $t("panel.movement.runBed") }}
-						</v-list-item>
-
-						<v-divider />
-
-						<v-list-item :disabled="!canHome" @click="sendCode('G29')">
-							<v-icon class="mr-1">mdi-grid</v-icon>
-							{{ $t("panel.movement.runMesh") }}
-						</v-list-item>
-						<v-list-item :disabled="uiFrozen" @click="showMeshEditDialog = true">
-							<v-icon class="mr-1">mdi-pencil</v-icon>
-							{{ $t("panel.movement.editMesh") }}
-						</v-list-item>
-						<v-list-item :disabled="uiFrozen" @click="sendCode('G29 S1')">
-							<v-icon class="mr-1">mdi-content-save</v-icon>
-							{{ $t("panel.movement.loadMesh") }}
-						</v-list-item>
-						<v-list-item :disabled="!isCompensationEnabled" @click="sendCode('G29 S2')">
-							<v-icon class="mr-1">mdi-grid-off</v-icon>
-							{{ $t("panel.movement.disableMeshCompensation") }}
-						</v-list-item>
-					</v-list>
-				</v-card>
-			</v-menu>
 		</v-card-title>
 
 		<v-card-text v-show="visibleAxes.length !== 0">
@@ -129,7 +85,6 @@
 			</v-row>
 		</v-card-text>
 
-		<mesh-edit-dialog :shown.sync="showMeshEditDialog"></mesh-edit-dialog>
 		<input-dialog :shown.sync="moveStepDialog.shown" :title="$t('dialog.changeMoveStep.title')"
 					  :prompt="$t('dialog.changeMoveStep.prompt')" :preset="moveStepDialog.preset" is-numeric-value
 					  @confirmed="moveStepDialogConfirmed"></input-dialog>
@@ -148,7 +103,7 @@
 </template>
 
 <script lang="ts">
-import { Axis, AxisLetter, KinematicsName, MachineStatus, MoveCompensationType } from "@duet3d/objectmodel";
+import { Axis, AxisLetter, MachineStatus, KinematicsName } from "@duet3d/objectmodel";
 import Vue from "vue";
 
 import store from "@/store";
@@ -159,8 +114,6 @@ export default Vue.extend({
 		uiFrozen(): boolean { return store.getters["uiFrozen"]; },
 		moveSteps(): (axisLetter: AxisLetter) => Array<number> { return ((axisLetter: AxisLetter) => store.getters["machine/settings/moveSteps"](axisLetter)); },
 		numMoveSteps(): number { return store.getters["machine/settings/numMoveSteps"]; },
-		isCompensationEnabled(): boolean { return store.state.machine.model.move.compensation.type !== MoveCompensationType.none; },
-		compensationType(): MoveCompensationType { return store.state.machine.model.move.compensation.type; },
 		visibleAxes(): Array<Axis> { return store.state.machine.model.move.axes.filter(axis => axis.visible); },
 		isDelta(): boolean { return [KinematicsName.linearDelta, KinematicsName.rotaryDelta].includes(store.state.machine.model.move.kinematics.name); },
 		canHome(): boolean {
@@ -173,7 +126,6 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			showMeshEditDialog: false,
 			moveStepDialog: {
 				shown: false,
 				axis: AxisLetter.X,
@@ -220,7 +172,6 @@ export default Vue.extend({
 	watch: {
 		isConnected() {
 			// Hide dialogs when the connection is interrupted
-			this.showMeshEditDialog = false;
 			this.moveStepDialog.shown = false;
 		}
 	}