🙃
This commit is contained in:
@@ -102,10 +102,10 @@
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.placeholder.blank,
|
||||
.placeholder.col {
|
||||
border-top: none;
|
||||
}
|
||||
/* .placeholder.blank, */
|
||||
/* .placeholder.col { */
|
||||
/* border-top: none; */
|
||||
/* } */
|
||||
|
||||
.active {
|
||||
background-color: color-mix(in oklab, var(--color-primary) 80%, var(--color-background) 80%);
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
startediting = () => {},
|
||||
stopediting = () => {},
|
||||
active = false,
|
||||
editing = false
|
||||
editing = false,
|
||||
externalediting = false
|
||||
}: {
|
||||
cla?: string;
|
||||
width?: string;
|
||||
@@ -24,6 +25,7 @@
|
||||
stopediting?: () => void;
|
||||
active?: boolean;
|
||||
editing?: boolean;
|
||||
externalediting?: boolean;
|
||||
} = $props();
|
||||
|
||||
// focus the first focusable descendant (the inner <input>)
|
||||
@@ -101,7 +103,7 @@
|
||||
>
|
||||
{#if cell && (cell.raw_val !== '' || getEvalLiteral(cell.val) !== '')}
|
||||
<span class={clsx('pointer-events-none select-none', { err: isErr(cell.val) })}>
|
||||
{#if cell.val}
|
||||
{#if cell.val && !externalediting}
|
||||
{getEvalLiteral(cell.val)}
|
||||
{:else}
|
||||
{cell.raw_val}
|
||||
|
||||
0
frontend/src/lib/components/grid/cell.ts
Normal file
0
frontend/src/lib/components/grid/cell.ts
Normal file
@@ -1,21 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import {
|
||||
Infinity,
|
||||
Omega,
|
||||
Parentheses,
|
||||
Pyramid,
|
||||
Radical,
|
||||
Sigma,
|
||||
SquareFunction,
|
||||
Variable
|
||||
} from '@lucide/svelte';
|
||||
import { Omega } from '@lucide/svelte';
|
||||
import Cell from '$lib/components/grid/cell.svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import CellHeader from './cell-header.svelte';
|
||||
import { colToStr, refToStr, type CellT } from './utils';
|
||||
import { colToStr, refToStr } from './utils';
|
||||
import clsx from 'clsx';
|
||||
import { Input } from '../ui/input';
|
||||
import { Grid, Position } from './grid';
|
||||
import type { LeadMsg } from './messages';
|
||||
|
||||
let {
|
||||
socket,
|
||||
@@ -36,186 +28,47 @@
|
||||
return;
|
||||
}
|
||||
|
||||
handle_msg(res);
|
||||
grid.handle_msg(res);
|
||||
};
|
||||
|
||||
function handle_msg(msg: LeadMsg) {
|
||||
switch (msg.msg_type) {
|
||||
case 'error': {
|
||||
toast.error('Error', {
|
||||
description: msg.raw
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'set': {
|
||||
if (msg.cell === undefined) {
|
||||
console.error('Expected cell ref for SET msgponse from server.');
|
||||
return;
|
||||
} else if (msg.eval === undefined) {
|
||||
console.error('Expected cell value for SET msgponse from server.');
|
||||
return;
|
||||
}
|
||||
|
||||
grid_vals[key(msg.cell.row, msg.cell.col)] = {
|
||||
raw_val: msg.raw ?? '',
|
||||
val: msg.eval
|
||||
};
|
||||
|
||||
break;
|
||||
}
|
||||
case 'bulk': {
|
||||
if (msg.bulk_msgs === undefined) {
|
||||
console.error('Expected bulk_msgs field to be defined for BULK message.');
|
||||
return;
|
||||
}
|
||||
|
||||
for (const m of msg.bulk_msgs) handle_msg(m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let rows = 50;
|
||||
let cols = 40;
|
||||
|
||||
let default_row_height = '30px';
|
||||
let default_col_width = '80px';
|
||||
|
||||
// Only store touched cells
|
||||
let grid_vals: Record<string, CellT> = $state({});
|
||||
let row_heights: Record<number, string> = $state({});
|
||||
let col_widths: Record<number, string> = $state({});
|
||||
|
||||
function getRowHeight(row: number) {
|
||||
return row_heights[row] ?? default_row_height;
|
||||
}
|
||||
|
||||
function getColWidth(col: number) {
|
||||
return col_widths[col] ?? default_col_width;
|
||||
}
|
||||
|
||||
function setRowHeight(row: number, height: string) {
|
||||
if (height === default_row_height) {
|
||||
delete row_heights[row];
|
||||
} else {
|
||||
row_heights[row] = height;
|
||||
}
|
||||
}
|
||||
|
||||
function setColWidth(col: number, width: string) {
|
||||
if (width === default_col_width) {
|
||||
delete col_widths[col];
|
||||
} else {
|
||||
col_widths[col] = width;
|
||||
}
|
||||
}
|
||||
|
||||
let active_cell: [number, number] | null = $state(null);
|
||||
let editing_cell: [number, number] | null = $state(null);
|
||||
|
||||
function startEditing(i: number, j: number) {
|
||||
active_cell = [i, j];
|
||||
editing_cell = [i, j];
|
||||
}
|
||||
|
||||
function stopEditing(i: number, j: number) {
|
||||
editing_cell = null;
|
||||
setCell(i, j, getCell(i, j), { do_propagation: true, force_propagation: true });
|
||||
}
|
||||
|
||||
const key = (i: number, j: number) => `${i}:${j}`;
|
||||
|
||||
const getCell = (i: number, j: number) => grid_vals[key(i, j)];
|
||||
const setCell = (row: number, col: number, v: CellT, eval_config: EvalConfig) => {
|
||||
if (v?.raw_val == null || v.raw_val === '') {
|
||||
delete grid_vals[key(row, col)];
|
||||
return;
|
||||
}
|
||||
|
||||
grid_vals[key(row, col)] = {
|
||||
raw_val: v.raw_val,
|
||||
val: v.val
|
||||
};
|
||||
|
||||
let msg: LeadMsg = {
|
||||
msg_type: 'set',
|
||||
cell: { row, col },
|
||||
raw: v.raw_val,
|
||||
eval_config
|
||||
};
|
||||
|
||||
socket.send(JSON.stringify(msg));
|
||||
};
|
||||
let grid = $state(new Grid(socket));
|
||||
|
||||
function handleCellInteraction(i: number, j: number, e: MouseEvent) {
|
||||
if (editing_cell) {
|
||||
// Get the actual input element that's being edited
|
||||
const el = document.querySelector<HTMLInputElement>('input:focus');
|
||||
const currentInputValue = el?.value ?? '';
|
||||
|
||||
// ONLY treat this as a reference insert if it's a formula
|
||||
if (currentInputValue.trim().startsWith('=')) {
|
||||
// Prevent the input from losing focus
|
||||
e.preventDefault();
|
||||
|
||||
// --- This is the same reference-inserting logic as before ---
|
||||
const ref = refToStr(i, j);
|
||||
if (el) {
|
||||
const { selectionStart, selectionEnd } = el;
|
||||
const before = el.value.slice(0, selectionStart ?? 0);
|
||||
const after = el.value.slice(selectionEnd ?? 0);
|
||||
el.value = before + ref + after;
|
||||
const newPos = (selectionStart ?? 0) + ref.length;
|
||||
el.setSelectionRange(newPos, newPos);
|
||||
el.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
el.focus();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
let pos = new Position(i, j);
|
||||
console.log('clicked', pos);
|
||||
//
|
||||
// if (grid.isEditing(pos)) {
|
||||
// // Get the actual input element that's being edited
|
||||
// const el = document.querySelector<HTMLInputElement>('input:focus');
|
||||
// const currentInputValue = el?.value ?? '';
|
||||
//
|
||||
// // ONLY treat this as a reference insert if it's a formula
|
||||
// if (currentInputValue.trim().startsWith('=')) {
|
||||
// // Prevent the input from losing focus
|
||||
// e.preventDefault();
|
||||
//
|
||||
// // --- This is the same reference-inserting logic as before ---
|
||||
// const ref = refToStr(i, j);
|
||||
// if (el) {
|
||||
// const { selectionStart, selectionEnd } = el;
|
||||
// const before = el.value.slice(0, selectionStart ?? 0);
|
||||
// const after = el.value.slice(selectionEnd ?? 0);
|
||||
// el.value = before + ref + after;
|
||||
// const newPos = (selectionStart ?? 0) + ref.length;
|
||||
// el.setSelectionRange(newPos, newPos);
|
||||
// el.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
// el.focus();
|
||||
// }
|
||||
//
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
|
||||
// We are not editing, so this is a normal cell selection OR this is not a formula
|
||||
active_cell = [i, j];
|
||||
}
|
||||
|
||||
function getActiveCell(): CellT {
|
||||
if (active_cell != null && grid_vals[key(active_cell[0], active_cell[1])])
|
||||
return grid_vals[key(active_cell[0], active_cell[1])];
|
||||
else
|
||||
return {
|
||||
raw_val: '',
|
||||
val: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function setActiveCellRaw(raw: string): void {
|
||||
if (active_cell == null) return;
|
||||
|
||||
if (grid_vals[key(active_cell[0], active_cell[1])]) {
|
||||
let cell = grid_vals[key(active_cell[0], active_cell[1])];
|
||||
setCell(
|
||||
active_cell[0],
|
||||
active_cell[1],
|
||||
{
|
||||
raw_val: raw,
|
||||
val: cell.val
|
||||
},
|
||||
{ do_propagation: false, force_propagation: false }
|
||||
);
|
||||
} else {
|
||||
setCell(
|
||||
active_cell[0],
|
||||
active_cell[1],
|
||||
{
|
||||
raw_val: raw,
|
||||
val: undefined
|
||||
},
|
||||
{
|
||||
do_propagation: false,
|
||||
force_propagation: false
|
||||
}
|
||||
);
|
||||
}
|
||||
grid.setActive(pos);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
@@ -231,15 +84,33 @@
|
||||
</script>
|
||||
|
||||
<div class="relative mb-5 ml-5 flex items-center gap-[5px]">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="relative"
|
||||
onkeydown={(e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
||||
e.preventDefault(); // avoid form submit/line break
|
||||
const el = (e.currentTarget as HTMLElement).querySelector(
|
||||
'input'
|
||||
) as HTMLInputElement | null;
|
||||
el?.blur(); // triggers on:blur below
|
||||
} else if (e.key == 'Escape') {
|
||||
e.preventDefault();
|
||||
|
||||
grid.stopEditingActive();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Omega
|
||||
size="20px"
|
||||
class="absolute top-1/2 left-2 -translate-y-1/2 text-muted-foreground"
|
||||
strokeWidth={1}
|
||||
class="absolute top-1/2 left-2 z-10 -translate-y-1/2 text-muted-foreground"
|
||||
/>
|
||||
<Input
|
||||
bind:value={() => getActiveCell().raw_val, (raw) => setActiveCellRaw(raw)}
|
||||
class="relative w-[200px] pl-8"
|
||||
onmousedown={() => grid.setExternalEdit(grid.getActivePos())}
|
||||
onblur={() => grid.setExternalEdit(null)}
|
||||
bind:value={
|
||||
() => grid.getActiveCell().raw_val, (raw) => grid.quickEval(grid.getActivePos(), raw)
|
||||
}
|
||||
class="relative w-[200px] pl-9"
|
||||
></Input>
|
||||
</div>
|
||||
</div>
|
||||
@@ -251,8 +122,8 @@
|
||||
<div class="sticky top-0 left-0" style="z-index: {rows + 70}">
|
||||
<CellHeader
|
||||
resizeable={false}
|
||||
height={default_row_height}
|
||||
width={default_col_width}
|
||||
height={grid.getDefaultRowHeight()}
|
||||
width={grid.getDefaultColWidth()}
|
||||
val=""
|
||||
active={false}
|
||||
direction="blank"
|
||||
@@ -261,12 +132,12 @@
|
||||
|
||||
{#each Array(cols) as _, j}
|
||||
<CellHeader
|
||||
height={default_row_height}
|
||||
width={getColWidth(j)}
|
||||
setColWidth={(width) => setColWidth(j, width)}
|
||||
height={grid.getDefaultRowHeight()}
|
||||
width={grid.getColWidth(j)}
|
||||
setColWidth={(width) => grid.setColWidth(j, width)}
|
||||
direction="col"
|
||||
val={colToStr(j)}
|
||||
active={active_cell !== null && active_cell[1] === j}
|
||||
active={grid.getActivePos() !== null && grid.getActivePos()?.col === j}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -275,28 +146,31 @@
|
||||
<div class="sticky left-0 flex w-fit" style="z-index: {rows - i + 40}">
|
||||
<CellHeader
|
||||
direction="row"
|
||||
width={default_col_width}
|
||||
height={getRowHeight(i)}
|
||||
setRowHeight={(height) => setRowHeight(i, height)}
|
||||
height={grid.getRowHeight(i)}
|
||||
width={grid.getDefaultColWidth()}
|
||||
setRowHeight={(height) => grid.setRowHeight(i, height)}
|
||||
val={(i + 1).toString()}
|
||||
active={active_cell !== null && active_cell[0] === i}
|
||||
active={grid.getActivePos() !== null && grid.getActivePos()?.row === i}
|
||||
/>
|
||||
</div>
|
||||
{#each Array(cols) as _, j}
|
||||
<Cell
|
||||
height={getRowHeight(i)}
|
||||
width={getColWidth(j)}
|
||||
editing={editing_cell?.[0] === i && editing_cell?.[1] === j}
|
||||
startediting={() => startEditing(i, j)}
|
||||
stopediting={() => stopEditing(i, j)}
|
||||
height={grid.getRowHeight(i)}
|
||||
width={grid.getColWidth(j)}
|
||||
editing={grid.isEditing(new Position(i, j))}
|
||||
externalediting={grid.isExternalEditing(new Position(i, j))}
|
||||
startediting={() => grid.startEditing(new Position(i, j))}
|
||||
stopediting={() => grid.stopEditing(new Position(i, j))}
|
||||
onmousedown={(e) => {
|
||||
handleCellInteraction(i, j, e);
|
||||
}}
|
||||
bind:cell={
|
||||
() => getCell(i, j),
|
||||
(v) => setCell(i, j, v, { do_propagation: false, force_propagation: false })
|
||||
() => grid.getCell(new Position(i, j)), (v) => grid.setCell(new Position(i, j), v)
|
||||
}
|
||||
active={active_cell !== null && active_cell[0] === i && active_cell[1] === j}
|
||||
active={(() => {
|
||||
console.log(grid.isActive(new Position(i, j)));
|
||||
return grid.isActive(new Position(i, j));
|
||||
})()}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
208
frontend/src/lib/components/grid/grid.ts
Normal file
208
frontend/src/lib/components/grid/grid.ts
Normal file
@@ -0,0 +1,208 @@
|
||||
import { toast } from 'svelte-sonner';
|
||||
import type { CellRef, CellT, LeadMsg } from './messages';
|
||||
|
||||
class Position {
|
||||
public row: number;
|
||||
public col: number;
|
||||
|
||||
constructor(row: number, col: number) {
|
||||
this.row = row;
|
||||
this.col = col;
|
||||
}
|
||||
|
||||
public key() {
|
||||
return `${this.row}:${this.col}`;
|
||||
}
|
||||
|
||||
public static key(row: number, col: number) {
|
||||
return `${row}:${col}`;
|
||||
}
|
||||
|
||||
public ref(): CellRef {
|
||||
return { row: this.row, col: this.col };
|
||||
}
|
||||
|
||||
public equals(other: CellRef | null | undefined): boolean {
|
||||
return !!other && this.row === other.row && this.col === other.col;
|
||||
}
|
||||
|
||||
public static equals(a: CellRef | null | undefined, b: CellRef | null | undefined): boolean {
|
||||
return !!a && !!b && a.row === b.row && a.col === b.col;
|
||||
}
|
||||
}
|
||||
|
||||
class Grid {
|
||||
data: Record<string, CellT> = {};
|
||||
socket: WebSocket;
|
||||
row_heights: Record<number, string> = {};
|
||||
col_widths: Record<number, string> = {};
|
||||
default_row_height: string;
|
||||
default_col_width: string;
|
||||
active_cell: Position | null = null;
|
||||
editing_cell: Position | null = null;
|
||||
external_editing_cell: Position | null = null;
|
||||
|
||||
constructor(socket: WebSocket, default_col_width = '80px', default_row_height = '30px') {
|
||||
this.socket = socket;
|
||||
this.default_col_width = default_col_width;
|
||||
this.default_row_height = default_row_height;
|
||||
}
|
||||
|
||||
public getCell(pos: Position): CellT {
|
||||
return this.data[pos.key()];
|
||||
}
|
||||
|
||||
public setCell(pos: Position, v: CellT) {
|
||||
if (v?.raw_val == null || v.raw_val === '') {
|
||||
delete this.data[pos.key()];
|
||||
return;
|
||||
}
|
||||
|
||||
this.data[pos.key()] = {
|
||||
raw_val: v.raw_val,
|
||||
val: v.val
|
||||
};
|
||||
|
||||
let msg: LeadMsg = {
|
||||
msg_type: 'set',
|
||||
cell: pos.ref(),
|
||||
raw: v.raw_val
|
||||
};
|
||||
|
||||
this.socket.send(JSON.stringify(msg));
|
||||
}
|
||||
|
||||
public getRowHeight(row: number) {
|
||||
return this.row_heights[row] ?? this.default_row_height;
|
||||
}
|
||||
|
||||
public getColWidth(col: number) {
|
||||
return this.col_widths[col] ?? this.default_col_width;
|
||||
}
|
||||
|
||||
public getDefaultColWidth() {
|
||||
return this.default_col_width;
|
||||
}
|
||||
public getDefaultRowHeight() {
|
||||
return this.default_row_height;
|
||||
}
|
||||
|
||||
public setRowHeight(row: number, height: string) {
|
||||
if (height === this.default_row_height) {
|
||||
delete this.row_heights[row];
|
||||
} else {
|
||||
this.row_heights[row] = height;
|
||||
}
|
||||
}
|
||||
|
||||
public setColWidth(col: number, width: string) {
|
||||
if (width === this.default_col_width) {
|
||||
delete this.col_widths[col];
|
||||
} else {
|
||||
this.col_widths[col] = width;
|
||||
}
|
||||
}
|
||||
|
||||
public startEditing(pos: Position) {
|
||||
this.active_cell = pos;
|
||||
this.editing_cell = pos;
|
||||
}
|
||||
|
||||
public stopEditing(pos: Position) {
|
||||
this.editing_cell = null;
|
||||
this.setCell(pos, this.getCell(pos));
|
||||
}
|
||||
|
||||
public stopEditingActive() {
|
||||
if (this.active_cell == null) return;
|
||||
|
||||
this.stopEditing(this.active_cell);
|
||||
}
|
||||
|
||||
public isEditing(pos: Position): boolean {
|
||||
if (this.editing_cell == null) return false;
|
||||
return this.editing_cell.equals(pos);
|
||||
}
|
||||
|
||||
public isExternalEditing(pos: Position): boolean {
|
||||
if (this.external_editing_cell == null) return false;
|
||||
return this.external_editing_cell.equals(pos);
|
||||
}
|
||||
|
||||
public setActive(pos: Position | null) {
|
||||
this.active_cell = pos;
|
||||
}
|
||||
|
||||
public setExternalEdit(pos: Position | null) {
|
||||
this.external_editing_cell = pos;
|
||||
}
|
||||
|
||||
public getActiveCell(): CellT {
|
||||
if (this.active_cell === null) return {
|
||||
raw_val: '',
|
||||
val: undefined
|
||||
};
|
||||
|
||||
return this.getCell(this.active_cell);
|
||||
}
|
||||
public getActivePos(): Position | null {
|
||||
return this.active_cell;
|
||||
}
|
||||
|
||||
public isActive(pos: Position): boolean {
|
||||
if (this.active_cell == null) return false;
|
||||
return this.active_cell.equals(pos);
|
||||
}
|
||||
|
||||
public quickEval(pos: Position | null, raw: string) {
|
||||
if (pos === null) return;
|
||||
|
||||
let msg: LeadMsg = {
|
||||
msg_type: 'eval',
|
||||
cell: pos.ref(),
|
||||
raw: raw
|
||||
};
|
||||
|
||||
this.socket.send(JSON.stringify(msg));
|
||||
}
|
||||
|
||||
public handle_msg(msg: LeadMsg) {
|
||||
switch (msg.msg_type) {
|
||||
case 'error': {
|
||||
toast.error('Error', {
|
||||
description: msg.raw
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'set': {
|
||||
if (msg.cell === undefined) {
|
||||
console.error('Expected cell ref for SET msgponse from server.');
|
||||
return;
|
||||
} else if (msg.eval === undefined) {
|
||||
console.error('Expected cell value for SET msgponse from server.');
|
||||
return;
|
||||
}
|
||||
|
||||
this.data[Position.key(msg.cell.row, msg.cell.col)] = {
|
||||
raw_val: msg.raw ?? '',
|
||||
val: msg.eval
|
||||
};
|
||||
|
||||
break;
|
||||
}
|
||||
case 'bulk': {
|
||||
if (msg.bulk_msgs === undefined) {
|
||||
console.error('Expected bulk_msgs field to be defined for BULK message.');
|
||||
return;
|
||||
}
|
||||
|
||||
for (const m of msg.bulk_msgs) this.handle_msg(m);
|
||||
}
|
||||
case 'eval': {
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { Grid, Position };
|
||||
@@ -1,5 +1,5 @@
|
||||
interface LeadMsg {
|
||||
msg_type: 'set' | 'get' | 'error' | 'bulk';
|
||||
msg_type: 'set' | 'get' | 'error' | 'bulk' | 'eval';
|
||||
cell?: CellRef;
|
||||
raw?: string;
|
||||
eval?: Eval;
|
||||
@@ -44,3 +44,10 @@ type Eval =
|
||||
| { range: Range }
|
||||
| { err: LeadErr }
|
||||
| 'unset';
|
||||
|
||||
interface CellT {
|
||||
raw_val: string;
|
||||
val?: Eval;
|
||||
}
|
||||
|
||||
export type { Eval, LeadMsg, LeadErr, Literal, CellRef, LiteralValue, CellT };
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
export interface CellT {
|
||||
raw_val: string;
|
||||
val?: Eval;
|
||||
}
|
||||
import type { CellRef, Eval, LiteralValue } from './messages';
|
||||
|
||||
/**
|
||||
* Zero indexed | A1 == {row: 0, col: 0};
|
||||
|
||||
Reference in New Issue
Block a user