Rebuild the "toolpath message" dialog in Svelte.

src/js/control-view.js

@@ -39,14 +39,6 @@ module.exports = {
       jog_adjust: parseInt(cookie.get('jog-adjust', 2)),
       deleteGCode: false,
       tab: 'auto',
-      toolpath_msg: {
-        x: false,
-        y: false,
-        z: false,
-        a: false,
-        b: false,
-        c: false
-      },
       ask_home: true,
       showGcodeMessage: false
     }
@@ -425,8 +417,8 @@ module.exports = {
       SvelteComponents.showDialog("MoveToZero", { axes });
     },
 
-    show_toolpath_msg: function (axis) {
-      this.toolpath_msg[axis] = true;
+    showToolpathMessageDialog: function (axis) {
+      SvelteComponents.showDialog("ToolpathMessage", { msg: this[axis].toolmsg });
     },
 
     set_position: function (axis, position) {

src/pug/templates/control-view.pug

@@ -107,20 +107,10 @@ script#control-view-template(type="text/x-template")
                 td.state
                   .fa(:class=`'fa-' + ${axis}.icon`)
                   | {{#{axis}.state}}
-                td.tstate(:class=`${axis}.tklass`, :title=`${axis}.toolmsg`, @click=`show_toolpath_msg('${axis}')`)
+                td.tstate(:class=`${axis}.tklass`, :title=`${axis}.toolmsg`, @click=`showToolpathMessageDialog('${axis}')`)
                   .fa(:class=`'fa-' + ${axis}.ticon`)
                   | {{#{axis}.tstate}}
-                  
-                message(:show.sync=`toolpath_msg['${axis}']`)
-                    h3(slot="header") Tool path info {{'#{axis}' | upper}} axis
-                
-                    div(slot="body")
-                      p {{#{axis}.toolmsg}}
-                
-                    div(slot="footer")
-                      button.pure-button(@click=`toolpath_msg['${axis}'] = false`)
-                        | OK
-                
+
                 th.actions
                   button.pure-button(:disabled="!can_set_axis",
                     title=`Set {{'${axis}' | upper}} axis position.`,

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

@@ -9,6 +9,7 @@
   import SetAxisPositionDialog from "./SetAxisPositionDialog.svelte";
   import MoveToZeroDialog from "./MoveToZeroDialog.svelte";
   import ShutdownDialog from "./ShutdownDialog.svelte";
+  import ToolpathMessageDialog from "./ToolpathMessageDialog.svelte";
 
   const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
   type HomeMachineDialogPropsType = {
@@ -62,6 +63,12 @@
     open: boolean;
   };
 
+  const ToolpathMessageDialogProps = writable<ToolpathMessageDialogPropsType>();
+  type ToolpathMessageDialogPropsType = {
+    open: boolean;
+    msg: string;
+  };
+
   export function showDialog(
     dialog: "HomeMachine",
     props: Omit<HomeMachineDialogPropsType, "open">
@@ -107,6 +114,11 @@
     props: Omit<ShutdownDialogPropsType, "open">
   );
 
+  export function showDialog(
+    dialog: "ToolpathMessage",
+    props: Omit<ToolpathMessageDialogPropsType, "open">
+  );
+
   export function showDialog(dialog: string, props: any) {
     switch (dialog) {
       case "HomeMachine":
@@ -145,6 +157,10 @@
         ShutdownDialogProps.set({ ...props, open: true });
         break;
 
+      case "ToolpathMessage":
+        ToolpathMessageDialogProps.set({ ...props, open: true });
+        break;
+
       default:
         throw new Error(`Unknown dialog '${dialog}'`);
     }
@@ -220,3 +236,4 @@
 <SetAxisPositionDialog {...$SetAxisPositionDialogProps} />
 <MoveToZeroDialog {...$MoveToZeroDialogProps} />
 <ShutdownDialog {...$ShutdownDialogProps} />
+<ToolpathMessageDialog {...$ToolpathMessageDialogProps} />

src/svelte-components/src/dialogs/ToolpathMessageDialog.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
+  import Button, { Label } from "@smui/button";
+
+  export let open: boolean;
+  export let msg: string;
+</script>
+
+<Dialog
+  bind:open
+  scrimClickAction=""
+  aria-labelledby="toolpath-message-dialog-title"
+  aria-describedby="toolpath-message-dialog-content"
+>
+  <Title id="toolpath-message-dialog-title">{msg || ""}</Title>
+
+  <Actions>
+    <Button defaultAction use={[InitialFocus]}>
+      <Label>OK</Label>
+    </Button>
+  </Actions>
+</Dialog>