Rebuilt the "Move to [XY|Z] zero?" dialogs in Svelte.

src/js/control-view.js

@@ -48,8 +48,6 @@ module.exports = {
         c: false
       },
       ask_home: true,
-      ask_zero_xy_msg: false,
-      ask_zero_z_msg: false,
       showGcodeMessage: false
     }
   },
@@ -244,7 +242,6 @@ module.exports = {
     SvelteComponents.registerControllerMethods({
       stop: (...args) => this.stop(...args),
       send: (...args) => this.send(...args),
-      goto_zero: (...args) => this.goto_zero(...args),
       isAxisHomed: (axis) => this[axis].homed,
       unhome: (...args) => this.unhome(...args),
       set_position: (...args) => this.set_position(...args),
@@ -253,18 +250,6 @@ module.exports = {
   },
 
   methods: {
-    goto_zero(zero_x, zero_y, zero_z, zero_a) {
-      const xcmd = zero_x ? "X0" : "";
-      const ycmd = zero_y ? "Y0" : "";
-      const zcmd = zero_z ? "Z0" : "";
-      const acmd = zero_a ? "A0" : "";
-
-      this.ask_zero_xy_msg = false;
-      this.ask_zero_z_msg = false;
-
-      this.send('G90\nG0' + xcmd + ycmd + zcmd + acmd + '\n');
-    },
-
     getJogIncrStyle(value) {
       const weight = `font-weight:${this.jog_incr === value ? 'bold' : 'normal'}`;
       const color = this.jog_incr === value ? "color:#0078e7" : "";

src/pug/templates/control-view.pug

@@ -10,32 +10,6 @@ script#control-view-template(type="text/x-template")
       div(slot="footer")
         label Simulating {{(toolpath_progress || 0) | percent}}
 
-    message(:show.sync=`ask_zero_xy_msg`)
-        h3(slot="header") XY Origin
-
-        div(slot="body")
-          p Move to XY origin?
-
-        div(slot="footer")
-          button.pure-button(@click="goto_zero(1,1,0,0)")
-            | Confirm
-            
-          button.pure-button(@click='ask_zero_xy_msg = false')
-            | Cancel
-    
-    message(:show.sync=`ask_zero_z_msg`)
-        h3(slot="header") Z Origin
-
-        div(slot="body")
-          p Move to Z origin?
-
-        div(slot="footer")
-          button.pure-button(@click="goto_zero(0,0,1,0)")
-            | Confirm
-            
-          button.pure-button(@click='ask_zero_z_msg = false')
-            | Cancel
-
     table(style="table-layout: fixed; width: 100%;")
       tr(style="height: fit-content;")
         td(style="white-space: nowrap; width: 410px;", rowspan="2")
@@ -60,12 +34,12 @@ script#control-view-template(type="text/x-template")
               td(style="height:100px",align="center")
                 button(@click="jog_fn(-1,0,0,0)") X-
               td(style="height:100px",align="center")
-                button(@click="ask_zero_xy_msg = true")
+                button(@click="showMoveToZeroDialog('xy')")
                   .fa.fa-bullseye(style="font-size: 173%")
               td(style="height:100px",align="center")
                 button(@click="jog_fn(1,0,0,0)") X+
               td(style="height:100px",align="center")
-                button(@click='ask_zero_z_msg = true') Z0
+                button(@click="showMoveToZeroDialog('z')") Z0
             tr
               td(style="height:100px",align="center")
                 button(@click="jog_fn(-1,-1,0,0)")

src/svelte-components/src/dialogs/DialogHost.svelte

@@ -7,6 +7,7 @@
   import SetTimeDialog from "./SetTimeDialog.svelte";
   import ManualHomeAxisDialog from "./ManualHomeAxisDialog.svelte";
   import SetAxisPositionDialog from "./SetAxisPositionDialog.svelte";
+  import MoveToZeroDialog from "./MoveToZeroDialog.svelte";
   import ShutdownDialog from "./ShutdownDialog.svelte";
 
   const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
@@ -50,6 +51,12 @@
     axis: string;
   };
 
+  const MoveToZeroDialogProps = writable<MoveToZeroDialogPropsType>();
+  type MoveToZeroDialogPropsType = {
+    open: boolean;
+    axes: "xy" | "z";
+  };
+
   const ShutdownDialogProps = writable<ShutdownDialogPropsType>();
   type ShutdownDialogPropsType = {
     open: boolean;
@@ -90,6 +97,11 @@
     props: Omit<SetAxisPositionDialogPropsType, "open">
   );
 
+  export function showDialog(
+    dialog: "MoveToZero",
+    props: Omit<MoveToZeroDialogPropsType, "open">
+  );
+
   export function showDialog(
     dialog: "Shutdown",
     props: Omit<ShutdownDialogPropsType, "open">
@@ -125,6 +137,10 @@
         SetAxisPositionDialogProps.set({ ...props, open: true });
         break;
 
+      case "MoveToZero":
+        MoveToZeroDialogProps.set({ ...props, open: true });
+        break;
+
       case "Shutdown":
         ShutdownDialogProps.set({ ...props, open: true });
         break;
@@ -195,7 +211,6 @@
   });
 </script>
 
-
 <HomeMachineDialog {...$HomeMachineDialogProps} />
 <ProbeDialog {...$ProbeDialogProps} />
 <ScreenRotationDialog {...$ScreenRotationDialogProps} />
@@ -203,4 +218,5 @@
 <SetTimeDialog {...$SetTimeDialogProps} />
 <ManualHomeAxisDialog {...$ManualHomeAxisDialogProps} />
 <SetAxisPositionDialog {...$SetAxisPositionDialogProps} />
+<MoveToZeroDialog {...$MoveToZeroDialogProps} />
 <ShutdownDialog {...$ShutdownDialogProps} />

src/svelte-components/src/dialogs/MoveToZeroDialog.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import Dialog, { Title, Actions, InitialFocus } from "@smui/dialog";
+    import Button, { Label } from "@smui/button";
+    import { ControllerMethods } from "$lib/RegisterControllerMethods";
+
+    export let open;
+    export let axes: "xy" | "z";
+</script>
+
+<Dialog
+    bind:open
+    scrimClickAction=""
+    aria-labelledby="move-to-zero-dialog-title"
+    aria-describedby="move-to-zero-dialog-content"
+>
+    <Title id="move-to-zero-dialog-title">
+        Move to ${(axes || "").toUpperCase()} origin?
+    </Title>
+
+    <Actions>
+        <Button>
+            <Label>Cancel</Label>
+        </Button>
+
+        <Button
+            defaultAction
+            use={[InitialFocus]}
+            on:click={() => ControllerMethods.gotoZero(axes)}
+        >
+            <Label>Confirm</Label>
+        </Button>
+    </Actions>
+</Dialog>

src/svelte-components/src/dialogs/ProbeDialog.svelte

@@ -104,7 +104,7 @@
       await stepCompleted("Done", userAcknowledged);
 
       if (probeType === "xyz") {
-        ControllerMethods.goto_zero(1, 1, 0, 0);
+        ControllerMethods.gotoZero("xy");
       }
     } catch (err) {
       if (err.message !== "cancelled") {

src/svelte-components/src/lib/RegisterControllerMethods.ts

@@ -1,7 +1,6 @@
-type ControllerMethods = {
+interface RegisterableControllerMethods {
     stop: () => void;
     send: (gcode: string) => void;
-    goto_zero: (x: number, y: number, z: number, a: number) => void;
     dispatch: (event: string, ...args: any[]) => void;
     isAxisHomed: (axis: string) => boolean;
     unhome: (axis: string) => void;
@@ -9,11 +8,37 @@ type ControllerMethods = {
     set_home: (axis: string, value: number) => void;
 }
 
+interface ControllerMethods extends RegisterableControllerMethods {
+    gotoZero: (axes: "xy" | "z") => void;
+}
+
 export let ControllerMethods: ControllerMethods;
 
-export function registerControllerMethods(methods: Partial<ControllerMethods>) {
+export function registerControllerMethods(methods: Partial<RegisterableControllerMethods>) {
     ControllerMethods = {
         ...ControllerMethods,
-        ...methods
+        ...methods,
+        gotoZero
     };
 }
+
+function gotoZero(axes: "xy" | "z") {
+    let axesClause = "";
+    switch (axes.toLowerCase()) {
+        case "xy":
+            axesClause = "X0Y0";
+            break;
+
+        case "z":
+            axesClause = "Z0";
+            break;
+
+        default:
+            throw new Error(`Invalid axes: ${axes}`);
+    }
+
+    ControllerMethods.send(`
+        G90
+        G0 ${axesClause}
+    `);
+}