cellbound/src/Table.svelte at master · jstrieb/cellbound · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<style>
  .container {
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    flex-grow: 1;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  th {
    border: 1px solid var(--fg-color);
    background: lightgrey;
    padding: 0.25rem;
  }

  td {
    border: 1px solid var(--fg-color);
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
  }
</style>

<script>
  import TableCell from "./Cell.svelte";
  import { ParseError } from "./lib/parsers.js";
  import { formula } from "./formula.js";
  import { debounce } from "./lib/helpers.js";

  let { rows, sheet, solution } = $props();

  $effect(() => {
    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      for (let j = 0; j < row.length; j++) {
        const cell = row[j];
        $effect(() => {
          try {
            if (cell.reference) {
              cell.formula =
                rows[cell.reference.row ?? i][cell.reference.col ?? j].formula;
            }
            const parsed = formula.parse(cell.formula);
            const computed = parsed?.compute
              ? parsed.compute(rows, i, j)
              : parsed;
            if (computed?.subscribe) {
              let count = 0;
              const resetCount = debounce(() => (count = 0), 10);
              cell.value.rederive([computed], ([x], set) => {
                // Prevent infinite loop from self-reference
                if (count++ < 10) {
                  resetCount();
                  return set(x);
                }
              });
            } else {
              cell.value.rederive([], (_, set) => set(computed));
            }
            cell.error = undefined;
          } catch (e) {
            if (!(e instanceof ParseError)) {
              cell.error = e;
              console.error(e);
            } else {
              cell.error = "Error: not a valid number or a formula";
            }
            cell.value.rederive([], (_, set) => set(undefined));
          }
          // Hack to force unsubscribing and cleaning up
          return () => cell.value.rederive([], () => {});
        });
      }
    }
  });
</script>

<div class="container">
  <table>
    <thead>
      <tr
        ><td colspan="999999">
          {#if sheet == 0}
            Desired output
          {:else if sheet == 1}
            Your input
          {/if}
        </td></tr
      >
      <tr>
        <th></th>
        {#each rows[0] as _, i}
          <th>C{i}</th>
        {/each}
      </tr>
    </thead>
    <tbody>
      {#each rows as row, i}
        <tr>
          <th>R{i}</th>
          {#each row as col, j}
            <TableCell
              cell={rows[i][j]}
              value={rows[i][j].value}
              solution={solution[i][j].value}
              input={sheet == 1}
            />
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>