refactor: port TableCell.svelte and TextBox.svelte to runes mode

mgreminger · Dec 23, 2024 · aaa2537 · aaa2537
1 parent 4000968
commit aaa2537
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 61 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -3,7 +3,7 @@
   import { type Cell, cellFactory } from "./cells/Cells";
   import { BaseCell } from "./cells/BaseCell";
   import MathCell from "./cells/MathCell.svelte";
-  import TableCell from "./cells/TableCell";
+  import TableCell from "./cells/TableCell.svelte";
   import DataTableCell, { type InterpolationFunction } from "./cells/DataTableCell";
   import PlotCell from "./cells/PlotCell";
   import PiecewiseCell from "./cells/PiecewiseCell.svelte";

diff --git a/src/Cell.svelte b/src/Cell.svelte
@@ -17,7 +17,7 @@
 
   import MathCell from "./cells/MathCell.svelte";
   import PlotCell from "./cells/PlotCell";
-  import TableCell from "./cells/TableCell";
+  import TableCell from "./cells/TableCell.svelte";
   import DataTableCell from "./cells/DataTableCell";
   import DocumentationCell from "./cells/DocumentationCell.svelte";
   import PiecewiseCell from "./cells/PiecewiseCell.svelte";
@@ -281,8 +281,8 @@
       />
     {:else if cell instanceof TableCell}
       <TableCellElement
-        on:insertMathCellAfter={insertMathCellAfter}
-        on:insertInsertCellAfter={insertInsertCellAfter}
+        {insertMathCellAfter}
+        {insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         tableCell={cell}

diff --git a/src/TableCell.svelte b/src/TableCell.svelte
@@ -6,9 +6,9 @@
     nonMathCellChanged,
   } from "./stores";
 
-  import { onMount, tick, createEventDispatcher } from "svelte";
+  import { onMount, tick } from "svelte";
 
-  import type TableCell from "./cells/TableCell";
+  import type TableCell from "./cells/TableCell.svelte";
   import type { MathField as MathFieldClass } from "./cells/MathField.svelte";
 
   import MathField from "./MathField.svelte";
@@ -29,11 +29,26 @@
 
   import { deltaToMarkdown } from "quill-delta-to-markdown";
 
-  export let index: number;
-  export let tableCell: TableCell;
+  interface Props {
+    index: number;
+    tableCell: TableCell;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+  }
+
+  let {
+    index,
+    tableCell,
+    insertMathCellAfter,
+    insertInsertCellAfter
+  }: Props = $props();
+
+  let numColumns = $derived(tableCell.parameterFields.length);
+  let numRows = $derived(tableCell.rowLabels.length);
+  let hideUnselected = $derived(tableCell.hideUnselected);
+  let hideToolbar = $derived($activeCell !== index);
 
   let containerDiv: HTMLDivElement;
-  let hideToolbar = true;
 
   export function getMarkdown() {
     const row = tableCell.selectedRow;
@@ -74,11 +89,6 @@
     return result;
   }
 
-  const dispatch = createEventDispatcher<{
-    insertMathCellAfter: {index: number};
-    insertInsertCellAfter: {index: number};
-  }>();
-
   onMount(() => {
     if (tableCell.rowJsons.length > 0) {
       (tableCell.richTextInstance as any).setContents(tableCell.rowJsons[tableCell.selectedRow]);
@@ -99,7 +109,6 @@
     }
   }
 
-
   function handleSelectedRowChange() {
     $mathCellChanged = true;
     tableCell.parseTableStatements();
@@ -187,16 +196,11 @@
     $cells[index] = $cells[index];
   }
 
-  $: if ($activeCell === index) {
+  $effect( () => {
+   if ($activeCell === index) {
       focus();
     }
-
-  $: numColumns = tableCell.parameterFields.length;
-  $: numRows = tableCell.rowLabels.length;
-  $: hideUnselected = tableCell.hideUnselected;
-
-  $: hideToolbar = $activeCell !== index;
-  
+  });
 </script>
 
 
@@ -285,8 +289,8 @@
          tableCell.rowJsons[tableCell.selectedRow] = e.detail.json;
          $nonMathCellChanged = true;
       }}
-      shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-      modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+      shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+      modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
     />
   </div>
 {/if}
@@ -306,8 +310,8 @@
         <MathField
           editable={true}
           update={(e) => parseLatex(e.latex, j, mathField)}
-          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+          modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -333,8 +337,8 @@
         <MathField
           editable={true}
           update={(e) => parseLatex(e.latex, j)}
-          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+          modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -368,15 +372,15 @@
                 name={`selected_row_${index}`}
                 bind:group={tableCell.selectedRow}
                 value={i}
-                on:change={handleSelectedRowChange}
+                onchange={handleSelectedRowChange}
               >
               <TextBox
-                on:enter={() => handleEnter(i)}
-                on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-                on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+                enter={() => handleEnter(i)}
+                shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+                modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
                 id={`row-label-${index}-${i}`}
                 bind:textContent={tableCell.rowLabels[i].label} 
-                on:input={() => $nonMathCellChanged=true}
+                oninput={() => $nonMathCellChanged=true}
               >
               </TextBox>
             </div>
@@ -395,8 +399,8 @@
               editable={true}
               update={(e) => parseLatex(e.latex, j, mathField)}
               enter={() => handleEnter(i)}
-              shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-              modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+              shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+              modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
               mathField={mathField}
               parsingError={mathField.parsingError}
               bind:this={mathField.element}

diff --git a/src/TextBox.svelte b/src/TextBox.svelte
@@ -1,25 +1,34 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import type { FormEventHandler } from "svelte/elements";
   import { modifierKey} from "./stores";
 
-  export let id: string;
-  export let textContent: string;
+  interface Props {
+    id: string;
+    textContent: string;
+    enter: () => void;
+    shiftEnter: () => void;
+    modifierEnter: () => void;
+    oninput: FormEventHandler<HTMLDivElement>;
+  }
 
-  const dispatch = createEventDispatcher<{
-    enter: null;
-    shiftEnter: null;
-    modifierEnter: null;
-  }>();
+ let {
+  id,
+  textContent=$bindable(),
+  enter,
+  shiftEnter,
+  modifierEnter,
+  oninput
+ }: Props = $props();
 
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key == 'Enter') {
       e.preventDefault();
       if(e.shiftKey) {
-        dispatch('shiftEnter');
+        shiftEnter();
       } else if(e[$modifierKey]) {
-        dispatch('modifierEnter');
+        modifierEnter();
       } else {
-        dispatch('enter');
+        enter();
       }
     }
   }
@@ -47,9 +56,9 @@
   tabindex="0"
   class="editable"
   contenteditable="true"
-  on:keydown={handleKeyDown}
+  onkeydown={handleKeyDown}
   id={id}
   bind:textContent
-  on:input
+  {oninput}
 >
 </div>
diff --git a/src/cells/Cells.ts b/src/cells/Cells.ts
@@ -2,7 +2,7 @@ import type { BaseCell, DatabaseCell } from "./BaseCell";
 import type { Config } from "../sheet/Sheet";
 import MathCell from "./MathCell.svelte";
 import PlotCell from "./PlotCell";
-import TableCell from "./TableCell";
+import TableCell from "./TableCell.svelte";
 import DataTableCell from "./DataTableCell";
 import DocumentationCell from "./DocumentationCell.svelte";
 import PiecewiseCell from "./PiecewiseCell.svelte";

diff --git a/src/cells/TableCell.ts → src/cells/TableCell.svelte.ts b/src/cells/TableCell.ts → src/cells/TableCell.svelte.ts
@@ -4,7 +4,7 @@ import type { Statement } from "../parser/types";
 import QuickLRU from "quick-lru";
 
 class TableRowLabelField {
-  label: string;
+  label: string = $state();;
   id: number;
   static nextId = 0;
 
@@ -15,23 +15,23 @@ class TableRowLabelField {
 }
 
 export default class TableCell extends BaseCell {
-  rowLabels: TableRowLabelField[];
+  rowLabels: TableRowLabelField[] = $state();
   nextRowLabelId: number;
-  parameterFields: MathField[];
+  parameterFields: MathField[] = $state();
   combinedFields: MathField[];
   nextParameterId: number;
-  parameterUnitFields: MathField[];
-  rhsFields: MathField[][];
-  selectedRow: number;
-  hideUnselected: boolean;
-  rowJsons: string[];
+  parameterUnitFields: MathField[] = $state();
+  rhsFields: MathField[][] = $state();
+  selectedRow: number = $state();
+  hideUnselected: boolean = $state();
+  rowJsons: string[] = $state();
   richTextInstance: HTMLElement | null;
   tableStatements: Statement[];
   cache: QuickLRU<string, Statement>;
 
   constructor (arg?: DatabaseTableCell) {
+    super("table", arg?.id);
     if (arg === undefined) {
-      super("table");
       this.rowLabels = [new TableRowLabelField("Option 1"), new TableRowLabelField("Option 2")];
       this.nextRowLabelId = 3;
       this.parameterFields = [new MathField('Var1', 'parameter'), new MathField('Var2', 'parameter')];
@@ -47,7 +47,6 @@ export default class TableCell extends BaseCell {
       this.tableStatements = [];
       this.cache = new QuickLRU<string, Statement>({maxSize: 100});
     } else {
-      super("table", arg.id);
       this.rowLabels = arg.rowLabels.map((label) => new TableRowLabelField(label));
       this.nextRowLabelId = arg.nextRowLabelId;
       this.parameterFields = arg.parameterLatexs.map((latex) => new MathField(latex, 'parameter'));

diff --git a/src/stores.ts b/src/stores.ts
@@ -5,7 +5,7 @@ import type { Cell } from './cells/Cells';
 import { BaseCell, type CellTypes } from './cells/BaseCell';
 import MathCell from './cells/MathCell.svelte';
 import DocumentationCell from './cells/DocumentationCell.svelte';
-import TableCell from './cells/TableCell';
+import TableCell from './cells/TableCell.svelte';
 import DataTableCell from './cells/DataTableCell';
 import type {MathField} from './cells/MathField.svelte';
 import PiecewiseCell from './cells/PiecewiseCell.svelte';