refactor: port Cell and InsertCell to runes mode

This should fix the insert sheet regression
mgreminger · Dec 15, 2024 · f60eaac · f60eaac
1 parent 3267a32
commit f60eaac
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 60 deletions.
diff --git a/src/Cell.svelte b/src/Cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount } from "svelte";
   import { cells, results, system_results, activeCell, 
            mathCellChanged, handleClickInCell, deleteCell } from "./stores";
   import type { Cell } from './cells/Cells';
@@ -31,19 +31,22 @@
   import Draggable from "carbon-icons-svelte/lib/Draggable.svelte";
   import IconButton from "./IconButton.svelte";
 
-  export let index: number;
+  interface Props {
+    index: number;
+    startDrag: (arg: {clientY: number, index: number}) => void;
+    insertSheet: (arg: {index: number}) => void;
+  }
 
-  let selected = false;
-  let contentDiv: HTMLDivElement;
-  let cell: Cell;
+  let { index, startDrag, insertSheet } = $props();
 
+  let cell = $derived($cells[index]);
+  let selected = $derived($activeCell === index);
+  let contentDiv: HTMLDivElement;
   let cellElement: MathCellElement | DocumentationCellElement | PlotCellElement | 
                    TableCellElement | PiecewiseCellElement | 
                    SystemCellElement | DeletedCellElement | InsertCellElement |
                    FluidCellElement | DataTableCellElement;
 
-  const dispatch = createEventDispatcher();
-
   export async function getMarkdown(): Promise<string> {
     if (cellElement) {
       return await cellElement.getMarkdown?.() ?? "";
@@ -86,7 +89,7 @@
     }
   }
 
-  function startDrag(event) {
+  function dispatchStartDrag(event) {
     event.currentTarget.focus();
     event.preventDefault();
 
@@ -98,23 +101,20 @@
     }
 
 
-    dispatch('startDrag', {
+    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();
+  $effect(() => {
+    if (!selected) {
+      if (contentDiv && contentDiv.contains(document.activeElement) &&
+          document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     }
-  }
+  });
 
 </script>
 
@@ -192,7 +192,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 +202,8 @@
     <span
       role="none"
       class="handle button-container"
-      on:mousedown={startDrag}
-      on:touchstart|nonpassive={startDrag}
+      on:mousedown={dispatchStartDrag}
+      on:touchstart|nonpassive={dispatchStartDrag}
     >
       <IconButton
         title="Drag to Move Cell"
@@ -213,7 +213,7 @@
     </span>
     <span class="down button-container">
       <IconButton        
-        id="{`down-${index}`}"
+        id={`down-${index}`}
         click={()=>moveDown(index)}
         title="Move Cell Down"
       >
@@ -224,9 +224,8 @@
 
   <!-- 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 -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="content" class:selected
     id={`cell-${index}`}
@@ -309,7 +308,7 @@
       />
     {:else if cell instanceof InsertCell}
       <InsertCellElement
-        on:insertSheet
+        {insertSheet}
         bind:this={cellElement}
         index={index}
         insertCell={cell}
@@ -319,7 +318,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
@@ -212,8 +212,8 @@
       >
         <Cell
           index={i}
-          on:startDrag={startDrag}
-          on:insertSheet 
+          startDrag={startDrag}
+          {insertSheet} 
           on:updateNumberFormat
           on:generateCode
           on:insertMathCellAfter

diff --git a/src/InsertCell.svelte b/src/InsertCell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import type InsertCell from "./cells/InsertCell";
   import { cells, activeCell, results, system_results, mathCellChanged, 
            inCellInsertMode, addCell, onMobile, modifierKey } from "./stores";
@@ -16,26 +16,27 @@
   import RainDrop from "carbon-icons-svelte/lib/RainDrop.svelte";
   import DataTable from "carbon-icons-svelte/lib/DataTable.svelte";
 
-  export let index: number;
-  export let insertCell: InsertCell;
+  interface Props {
+    index: number;
+    insertCell: InsertCell;
+    insertSheet: (arg: {index: number}) => void;
+  }
+
+  let { index, insertCell, insertSheet }: Props = $props();
 
   const timeout = 30000;
   const delta = 50;
-  let currentTime = timeout;
+  let currentTime = $state(timeout);
   let intervalId = null;
   let buttonArray: HTMLElement[] = [];
 
-  const dispatch = createEventDispatcher();
-
   export function getMarkdown() {
     return "";
   }
 
-  function insertSheet() {
+  function dispatchInsertSheet() {
     deleteMyself();
-    dispatch('insertSheet', {
-      index: index
-    });
+    insertSheet( {index: index} );
   }
 
   onMount(() => {
@@ -177,9 +178,9 @@
 
       <button 
         id={"insert-popup-button-1"}
-        on:click={() => insertNewCell('math')}
+        onclick={() => insertNewCell('math')}
         bind:this={buttonArray[0]}
-        on:keydown={(e) => handleKeyboard(e, 0)}
+        onkeydown={(e) => handleKeyboard(e, 0)}
       >
         <div class="button-text" class:mobile={$onMobile}>
           {#if !$onMobile}
@@ -192,9 +193,9 @@
 
       <button 
         id={"insert-popup-button-2"}
-        on:click={() => insertNewCell('documentation')}
+        onclick={() => insertNewCell('documentation')}
         bind:this={buttonArray[1]}
-        on:keydown={(e) => handleKeyboard(e, 1)}
+        onkeydown={(e) => handleKeyboard(e, 1)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -209,9 +210,9 @@
 
       <button 
         id={"insert-popup-button-3"}
-        on:click={() => insertNewCell('plot')}
+        onclick={() => insertNewCell('plot')}
         bind:this={buttonArray[2]}
-        on:keydown={(e) => handleKeyboard(e, 2)}
+        onkeydown={(e) => handleKeyboard(e, 2)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -224,9 +225,9 @@
 
       <button 
         id={"insert-popup-button-4"}
-        on:click={() => insertNewCell('table')}
+        onclick={() => insertNewCell('table')}
         bind:this={buttonArray[3]}
-        on:keydown={(e) => handleKeyboard(e, 3)}
+        onkeydown={(e) => handleKeyboard(e, 3)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -239,9 +240,9 @@
 
       <button 
         id={"insert-popup-button-5"}
-        on:click={() => insertNewCell('dataTable')}
+        onclick={() => insertNewCell('dataTable')}
         bind:this={buttonArray[4]}
-        on:keydown={(e) => handleKeyboard(e, 4)}
+        onkeydown={(e) => handleKeyboard(e, 4)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -254,9 +255,9 @@
 
       <button 
         id={"insert-popup-button-6"}
-        on:click={() => insertNewCell('piecewise')}
+        onclick={() => insertNewCell('piecewise')}
         bind:this={buttonArray[5]}
-        on:keydown={(e) => handleKeyboard(e, 5)}
+        onkeydown={(e) => handleKeyboard(e, 5)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -271,9 +272,9 @@
 
       <button 
         id={"insert-popup-button-7"}
-        on:click={() => insertNewCell('system')}
+        onclick={() => insertNewCell('system')}
         bind:this={buttonArray[6]}
-        on:keydown={(e) => handleKeyboard(e, 6)}
+        onkeydown={(e) => handleKeyboard(e, 6)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -286,9 +287,9 @@
 
       <button 
         id={"insert-popup-button-8"}
-        on:click={() => insertNewCell('fluid')}
+        onclick={() => insertNewCell('fluid')}
         bind:this={buttonArray[7]}
-        on:keydown={(e) => handleKeyboard(e, 7)}
+        onkeydown={(e) => handleKeyboard(e, 7)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -301,9 +302,9 @@
 
       <button 
         id={"insert-popup-button-9"}
-        on:click={insertSheet}
+        onclick={dispatchInsertSheet}
         bind:this={buttonArray[8]}
-        on:keydown={(e) => handleKeyboard(e, 8)}
+        onkeydown={(e) => handleKeyboard(e, 8)}
       >
         <div class="button-text">
           {#if !$onMobile}
@@ -316,9 +317,9 @@
 
       <button 
         id={"insert-popup-button-esc"}
-        on:click={deleteMyself}
+        onclick={deleteMyself}
         bind:this={buttonArray[9]}
-        on:keydown={(e) => handleKeyboard(e, 9)}
+        onkeydown={(e) => handleKeyboard(e, 9)}
       >
         <div class="button-text">
           {#if !$onMobile}