refactor: port Cell.svelte to runes mode

mgreminger · Dec 19, 2024 · f4bbf69 · f4bbf69
1 parent 3c55926
commit f4bbf69
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 71 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -518,16 +518,16 @@
     $prefersReducedMotion = event.matches;
   }
 
-  function handleInsertMathCell(event: ComponentEvents<CellList>['insertMathCell']) {
+  function handleInsertMathCell(event: {detail: {index: number}}) {
     addCell('math', event.detail.index+1);
   }
 
-  function handleInsertInsertCell(event: ComponentEvents<CellList>['insertInsertCells']) {
+  function handleInsertInsertCell(event: {detail: {index: number}}) {
     $inCellInsertMode = true;
     addCell('insert', event.detail.index+1);
   }
 
-  function handleCellModal(event: ComponentEvents<CellList>['modal']) {
+  function handleCellModal(event: {detail: {modalInfo: ModalInfo}}) {
     modalInfo = event.detail.modalInfo;
   }
 
@@ -2700,11 +2700,11 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
       <CellList
         insertSheet={loadInsertSheetModal}
-        on:updateNumberFormat={loadCellNumberFormatModal}
-        on:generateCode={loadGenerateCodeModal}
-        on:insertMathCellAfter={handleInsertMathCell}
-        on:insertInsertCellAfter={handleInsertInsertCell}
-        on:modal={handleCellModal}
+        updateNumberFormat={loadCellNumberFormatModal}
+        generateCode={loadGenerateCodeModal}
+        insertMathCellAfter={handleInsertMathCell}
+        insertInsertCellAfter={handleInsertInsertCell}
+        modal={handleCellModal}
         bind:this={cellList}
       />
 

diff --git a/src/Cell.svelte b/src/Cell.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import { cells, results, system_results, activeCell, 
            mathCellChanged, handleClickInCell, deleteCell } from "./stores";
-  import type { Cell } from './cells/Cells';
+  import type { ModalInfo } from "./types";
+  import type { MathCellConfig } from "./sheet/Sheet";
   import MathCellElement from "./MathCell.svelte";
   import DocumentationCellElement from "./DocumentationCell.svelte";
   import PlotCellElement from "./PlotCell.svelte";
@@ -31,18 +32,47 @@
   import Draggable from "carbon-icons-svelte/lib/Draggable.svelte";
   import IconButton from "./IconButton.svelte";
 
-  export let index: number;
+  interface Props {
+    index: number;
+    updateNumberFormat: (arg: {detail: {mathCell: MathCell, setNumberConfig: (input: MathCellConfig) => void}}) => void;
+    generateCode: (arg: {detail: {index: number}}) => void;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+    modal: (arg: {detail: {modalInfo: ModalInfo}}) => void;
+    insertSheet: (arg: {detail: {index: number}}) => void;
+    startDrag: (arg: {detail: {clientY: number, index: number}}) => void;
+  }
+
+  let {
+    index,
+    updateNumberFormat,
+    generateCode,
+    insertMathCellAfter,
+    insertInsertCellAfter,
+    modal,
+    startDrag,
+    insertSheet
+  }: Props = $props();
+
+  let cell = $derived($cells[index]);
+  let selected = $derived($activeCell === index);
 
-  let selected = false;
   let contentDiv: HTMLDivElement;
-  let cell: Cell;
+  let dragHandleElement: HTMLSpanElement;
 
   let cellElement: MathCellElement | DocumentationCellElement | PlotCellElement | 
                    TableCellElement | PiecewiseCellElement | 
                    SystemCellElement | DeletedCellElement | InsertCellElement |
                    FluidCellElement | DataTableCellElement;
 
-  const dispatch = createEventDispatcher();
+  $effect( () => {
+    if (!selected) {
+      if (contentDiv && contentDiv.contains(document.activeElement) &&
+        document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    } 
+  });
 
   export async function getMarkdown(): Promise<string> {
     if (cellElement) {
@@ -55,7 +85,14 @@
   onMount(() => {
     if(cell instanceof DeletedCell && cell.height > 0) {
       contentDiv.setAttribute("style", `height: ${cell.height}px;`);
-    } 
+    }
+
+    dragHandleElement.addEventListener("touchstart", dispatchStartDrag, {passive: false});
+  });
+
+  onDestroy(() => {
+    //@ts-ignore:2769
+    dragHandleElement.removeEventListener("touchstart", dispatchStartDrag, {passive: false});
   });
 
   function moveUp(index) {
@@ -86,7 +123,7 @@
     }
   }
 
-  function startDrag(event) {
+  function dispatchStartDrag(event) {
     event.currentTarget.focus();
     event.preventDefault();
 
@@ -97,23 +134,7 @@
       clientY = event.clientY;
     }
 
-
-    dispatch('startDrag', {
-      clientY: clientY,
-      index: index
-    });
-  }
-
-  $: cell = $cells[index];
-
-  $: if ($activeCell === index) {
-    selected = true;
-  } else {
-    selected = false;
-    if (contentDiv && contentDiv.contains(document.activeElement) &&
-        document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
+    startDrag( { detail: {clientY: clientY, index: index}} );
   }
 
 </script>
@@ -192,7 +213,7 @@
   <div class="controls left">
     <span class="up button-container">
       <IconButton        
-        id="{`up-${index}`}"
+        id={`up-${index}`}
         click={()=>moveUp(index)}
         title="Move Cell Up"
       >
@@ -202,8 +223,8 @@
     <span
       role="none"
       class="handle button-container"
-      on:mousedown={startDrag}
-      on:touchstart|nonpassive={startDrag}
+      bind:this={dragHandleElement}
+      onmousedown={dispatchStartDrag}
     >
       <IconButton
         title="Drag to Move Cell"
@@ -213,7 +234,7 @@
     </span>
     <span class="down button-container">
       <IconButton        
-        id="{`down-${index}`}"
+        id={`down-${index}`}
         click={()=>moveDown(index)}
         title="Move Cell Down"
       >
@@ -224,79 +245,77 @@
 
   <!-- The static element action to select is cell is made available through the keyboard shortcuts
        of Ctrl+ArrowUp and Ctrl+ArrowDown -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div
     class="content" class:selected
     id={`cell-${index}`}
-    on:click|capture={() => handleClickInCell(index)}
-    on:focusin={() => handleClickInCell(index)}
+    onclickcapture={() => handleClickInCell(index)}
+    onfocusin={() => handleClickInCell(index)}
     bind:this={contentDiv}
   >
     {#if cell instanceof MathCell}
       <MathCellElement
-        on:updateNumberFormat
-        on:generateCode
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:updateNumberFormat={updateNumberFormat}
+        on:generateCode={generateCode}
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         mathCell={cell}
       />
     {:else if cell instanceof DocumentationCell}
       <DocumentationCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         documentationCell={cell}
       />
     {:else if cell instanceof PlotCell}
       <PlotCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         plotCell={cell}
       />
     {:else if cell instanceof TableCell}
       <TableCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         tableCell={cell}
       />
     {:else if cell instanceof DataTableCell}
       <DataTableCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
-        on:modal
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
+        on:modal={modal}
         bind:this={cellElement}
         index={index}
         dataTableCell={cell}
       />
     {:else if cell instanceof PiecewiseCell}
       <PiecewiseCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         piecewiseCell={cell}
       />
     {:else if cell instanceof SystemCell}
       <SystemCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         systemCell={cell}
       />
     {:else if cell instanceof FluidCell}
       <FluidCellElement
-        on:insertMathCellAfter
-        on:insertInsertCellAfter
+        on:insertMathCellAfter={insertMathCellAfter}
+        on:insertInsertCellAfter={insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         fluidCell={cell}
@@ -309,7 +328,7 @@
       />
     {:else if cell instanceof InsertCell}
       <InsertCellElement
-        on:insertSheet
+        on:insertSheet={insertSheet}
         bind:this={cellElement}
         index={index}
         insertCell={cell}
@@ -319,7 +338,7 @@
 
   <div class="controls right">
     <IconButton
-      id="{`delete-${index}`}"
+      id={`delete-${index}`}
       click={()=>deleteCell(index)}
       title="Delete Cell"
     >

diff --git a/src/CellList.svelte b/src/CellList.svelte
@@ -1,13 +1,28 @@
 <script lang="ts">
+  import type { ModalInfo } from "./types";
+  import MathCell from "./cells/MathCell";
+  import type { MathCellConfig } from "./sheet/Sheet";
   import { cells, results, system_results, activeCell, mathCellChanged } from "./stores";
   import Cell from "./Cell.svelte";
   import ButtonBar from "./ButtonBar.svelte";
 
   interface Props {
+    updateNumberFormat: (arg: {detail: {mathCell: MathCell, setNumberConfig: (input: MathCellConfig) => void}}) => void;
     insertSheet: (arg: {detail: {index: number}}) => void;
+    generateCode: (arg: {detail: {index: number}}) => void;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+    modal: (arg: {detail: {modalInfo: ModalInfo}}) => void;
   }
 
-  let { insertSheet }: Props = $props(); 
+  let { 
+    updateNumberFormat,
+    insertSheet,
+    generateCode,
+    insertMathCellAfter,
+    insertInsertCellAfter,
+    modal
+  }: Props = $props(); 
 
   let cellElements: Cell[] = [];
   let dragging = $state(false);
@@ -212,13 +227,13 @@
       >
         <Cell
           index={i}
-          on:startDrag={startDrag}
-          on:insertSheet={insertSheet}
-          on:updateNumberFormat
-          on:generateCode
-          on:insertMathCellAfter
-          on:insertInsertCellAfter
-          on:modal
+          startDrag={startDrag}
+          {insertSheet}
+          {updateNumberFormat}
+          {generateCode}
+          {insertMathCellAfter}
+          {insertInsertCellAfter}
+          {modal}
           bind:this={cellElements[i]}
         />
       </div>