port Toolbar.svelte to 5

kjk · Jun 26, 2024 · ae1968f · ae1968f
1 parent 5657937
commit ae1968f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/frontend/src/MenuBar.svelte b/frontend/src/MenuBar.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
   // menu based on https://play.tailwindcss.com/0xQBSdXxsK
   import Menu, { fixMenuName } from "./Menu.svelte";

diff --git a/frontend/src/notepad2/Notepad2.svelte b/frontend/src/notepad2/Notepad2.svelte
@@ -170,8 +170,6 @@
   import DialogSelectScheme from "./DialogSelectScheme.svelte";
   import { logNpEvent } from "../events";
 
-  let toolbarFuncs;
-
   /** @type {HTMLElement} */
   let editorElement = null;
   /** @type {EditorView} */
@@ -215,8 +213,8 @@
   }
 
   async function setToolbarEnabledState() {
-    if (toolbarFuncs) {
-      toolbarFuncs.setToolbarEnabledState();
+    if (toolbar) {
+      toolbar.funcs.setToolbarEnabledState();
     }
   }
 
@@ -300,7 +298,7 @@
     let v = editorView;
     let s = v.state.sliceDoc(
       v.state.selection.main.from,
-      v.state.selection.main.to
+      v.state.selection.main.to,
     );
     return s;
   }
@@ -1629,7 +1627,7 @@
       case m.IDM_HELP_FEATURE_REQUEST:
         window.open(
           "https://github.com/kjk/tools.arslexis.io/labels/notepad2",
-          "_blank"
+          "_blank",
         );
         break;
       case m.IDM_HELP_SOURCE_CODE:
@@ -1638,7 +1636,7 @@
       case m.IDM_HELP_DISCUSS:
         window.open(
           "https://github.com/kjk/tools.arslexis.io/discussions/categories/notepad2",
-          "_blank"
+          "_blank",
         );
         break;
       default:
@@ -1879,6 +1877,8 @@
     editorView = null;
     // document.removeEventListener("keydown", onKeyDown);
   });
+
+  let toolbar;
 </script>
 
 <svelte:body on:drop={handleDrop} />
@@ -1956,7 +1956,7 @@
   </div>
 
   <Toolbar
-    bind:funcs={toolbarFuncs}
+    bind:this={toolbar}
     bind:show={settings.showToolbar}
     bind:wordWrap={settings.wordWrap}
     {isMenuEnabled}

diff --git a/frontend/src/notepad2/Toolbar.svelte b/frontend/src/notepad2/Toolbar.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
   import { onMount } from "svelte";
   import { tooltip } from "../actions/tooltip";
@@ -31,13 +33,20 @@
   } from "./menu-notepad2";
   import { len, throwIf } from "../util";
 
-  export let show = false;
-  /** @typw {Function} */
-  export let isMenuEnabled;
-  export let handleMenuCmd;
-  export let wordWrap;
+  /** @type {{
+   show: boolean,
+   isMenuEnabled: (cmdId: string) => boolean,
+   handleMenuCmd: (cmdId: string) => void,
+   wordWrap: boolean,
+  }}*/
+  let {
+    show = $bindable(false),
+    isMenuEnabled,
+    handleMenuCmd,
+    wordWrap = $bindable(),
+  } = $props();
 
-  let isToolbarReady = false;
+  let isToolbarReady = $state(false);
 
   async function setToolbarEnabledState() {
     if (!isToolbarReady) {
@@ -63,17 +72,20 @@
     }
   }
 
-  $: redrawToolbar(wordWrap);
-
   // Notepad2.c. DefaultToolbarButtons
-  let toolbarButtonsOrder = [
+  let defOrder = [
     22, 3, 0, 1, 2, 0, 4, 18, 19, 0, 5, 6, 0, 7, 8, 9, 20, 0, 10, 11, 0, 12, 0,
     24, 0, 15,
   ];
+  let toolbarButtonsOrder = $state(defOrder);
 
   function redrawToolbar(ignore) {
+    // TODO: this is meant to trigger re-display, but probably should use {#key}
     toolbarButtonsOrder = toolbarButtonsOrder;
   }
+  $effect(() => {
+    redrawToolbar(wordWrap);
+  });
 
   // order of icons in toolbar bitmap
   // el[0] is id of the command sent by the icon
@@ -196,8 +208,8 @@
         {@const txt = info[1]}
         {@const dataURL = info[2]}
         {@const disabled = !info[3]}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <img
           src={dataURL}
           alt={txt}
@@ -206,7 +218,7 @@
           height={iconDy}
           class:disabled
           class="{hilightClass(info)} mt-1 px-1 py-1 hover:bg-blue-100"
-          on:click={() => handleMenuCmd(cmdId)}
+          onclick={() => handleMenuCmd(cmdId)}
         />
       {/if}
     {/each}