lloydgw/lead
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🙃

Browse Source
This commit is contained in:
Lloyd
2025-09-11 18:47:45 +10:00
parent 38bd4239fe
commit 30578a15d5
11 changed files with 440 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/lib/components/grid/cell.svelte
View File

@@ -3,32 +3,31 @@
import clsx from 'clsx';
import { getErrDesc, getErrTitle, getEvalLiteral, isErr } from './utils';
import * as HoverCard from '$lib/components/ui/hover-card/index.js';
import type { CellT } from './messages';
import { Position, type Grid } from './grid.svelte.ts';
let {
cla = '',
width = '80px',
height = '30px',
cell = $bindable(undefined),
pos,
onmousedown = () => {},
startediting = () => {},
stopediting = () => {},
active = false,
editing = false,
externalediting = false
grid
}: {
cla?: string;
width?: string;
height?: string;
cell?: CellT;
grid: Grid;
pos: Position;
onmousedown?: (e: MouseEvent) => void;
startediting?: () => void;
stopediting?: () => void;
active?: boolean;
editing?: boolean;
externalediting?: boolean;
} = $props();
let cell = $derived(grid.getCell(pos));
let active = $derived(grid.isActive(pos));
let primaryactive = $derived(grid.isPrimaryActive(pos));
let editing = $derived(grid.isEditing(pos));
let externalediting = $derived(grid.isExternalEditing(pos));
let width = $derived(grid.getColWidth(pos.col));
let height = $derived(grid.getRowHeight(pos.row));
let showPreview = $derived(getPreview() !== '');
// focus the first focusable descendant (the inner <input>)
function autofocusWithin(node: HTMLElement) {
queueMicrotask(() => {
@@ -47,22 +46,21 @@
el?.blur(); // triggers on:blur below
} else if (e.key == 'Escape') {
e.preventDefault();
stopediting();
grid.stopEditing(pos);
grid.resetCellTemp(pos);
}
}
function getPreview() {
return !isErr(cell?.temp_eval) ? getEvalLiteral(cell?.temp_eval) : '';
}
let showPreview = $derived(getPreview() !== '');
</script>
{#if editing}
<div class="relative inline-block">
{#if showPreview}
<h3
class="bubble pointer-events-none absolute -top-[6px] -left-1 z-[500] -translate-y-full text-sm font-semibold tracking-tight text-foreground select-none"
class="bubble pointer-events-none absolute top-1/2 left-[2px] z-[500] -translate-y-[calc(50%+2.5em)] text-sm font-semibold tracking-tight text-foreground select-none"
role="tooltip"
>
{getPreview()}
@@ -74,16 +72,16 @@
style="width: {width}; height: {height}"
class="relative rounded-none p-1 !transition-none delay-0 duration-0
focus:z-20 focus:shadow-[0_0_0_1px_var(--color-primary)] focus:outline-none"
bind:value={
() => cell?.temp_raw ?? '',
(v) => (cell = { eval: cell?.eval, raw: cell?.raw ?? '', temp_raw: v })
}
onblur={stopediting}
bind:value={() => cell?.temp_raw ?? '', (v) => grid.setCellTemp(pos, v)}
onblur={() => {
grid.stopEditing(cell?.pos);
grid.setCell(cell?.pos);
}}
/>
</div>
</div>
{:else if cell && isErr(cell.eval)}
<HoverCard.Root openDelay={500} closeDelay={500}>
<HoverCard.Root openDelay={500} closeDelay={100}>
<HoverCard.Trigger>
{@render InnerCell()}
</HoverCard.Trigger>
@@ -100,15 +98,19 @@
{#snippet InnerCell()}
<div
ondblclick={startediting}
ondblclick={() => grid.startEditing(pos)}
{onmousedown}
data-row={pos.row}
data-col={pos.col}
style:width
style:height
class={clsx('placeholder bg-background p-1', { active }, cla)}
class={clsx('placeholder bg-background p-1', { primaryactive, active }, cla)}
>
{#if cell && (cell.raw !== '' || getEvalLiteral(cell.eval) !== '')}
<span class={clsx('pointer-events-none select-none', { err: isErr(cell.eval) })}>
{#if cell.eval && !externalediting}
{#if externalediting}
{cell.temp_raw}
{:else if cell.eval}
{getEvalLiteral(cell.eval)}
{:else}
{cell.raw}
@@ -126,12 +128,20 @@
text-overflow: clip;
}
.active {
z-index: 20;
.primaryactive {
z-index: 30;
border: 1px solid var(--color-primary);
outline: 1px solid var(--color-primary);
}
.active {
z-index: 20;
background-color: color-mix(in oklab, var(--color-primary) 50%, var(--color-background) 90%);
/* border: 1px solid var(--color-primary); */
/* outline: 1px solid var(--color-primary); */
}
.active:has(.err),
.placeholder:has(.err) {
position: relative; /* needed for absolute positioning */

126
frontend/src/lib/components/grid/grid.svelte
View File

@@ -1,13 +1,14 @@
<script lang="ts">
import { Omega } from '@lucide/svelte';
import { EllipsisVertical, Omega } from '@lucide/svelte';
import * as Alert from '$lib/components/ui/alert/index.js';
import Cell from '$lib/components/grid/cell.svelte';
import { onMount } from 'svelte';
import CellHeader from './cell-header.svelte';
import { colToStr, refToStr } from './utils';
import clsx from 'clsx';
import { Input } from '../ui/input';
import type { LeadMsg } from './messages';
import { Grid, Position } from './grid.svelte.ts';
import { onDestroy, onMount } from 'svelte';
let {
socket,
@@ -31,14 +32,16 @@
grid.handle_msg(res);
};
const grid = new Grid(socket);
let rows = 10;
let cols = 10;
const grid = $state(new Grid(socket));
let rows = 100;
let cols = 50;
function handleCellInteraction(i: number, j: number, e: MouseEvent) {
let dragging = $state(false);
function handleCellMouseDown(i: number, j: number, e: MouseEvent) {
let pos = new Position(i, j);
if (grid.isEditing(pos)) {
if (grid.anyIsEditing()) {
// Get the actual input element that's being edited
const el = document.querySelector<HTMLInputElement>('input:focus');
const currentInputValue = el?.value ?? '';
@@ -66,35 +69,80 @@
}
// We are not editing, so this is a normal cell selection OR this is not a formula
grid.setActive(pos);
grid.setActive(pos, pos);
dragging = true;
}
onMount(() => {
// const handler = (e: MouseEvent) => {
// optional: check if click target is outside grid container
// if (!(e.target as HTMLElement).closest('.grid-wrapper')) {
// active_cell = null;
// }
// };
// window.addEventListener('click', handler);
// onDestroy(() => window.removeEventListener('click', handler));
const handler = (e: MouseEvent) => {
// optional: check if click target is outside grid container
if (!(e.target as HTMLElement).closest('.grid-wrapper')) {
grid.stopEditingActive();
}
};
window.addEventListener('click', handler);
onDestroy(() => window.removeEventListener('click', handler));
const handleMouseMove = (e: MouseEvent) => {
if (!dragging) return;
const el = document.elementFromPoint(e.clientX, e.clientY);
if (el && el instanceof HTMLElement && el.dataset.row && el.dataset.col) {
const row = parseInt(el.dataset.row, 10);
const col = parseInt(el.dataset.col, 10);
// expand selection as you drag
console.log(`moved to ${refToStr(row, col)}`);
grid.setActive(grid.primary_active, new Position(row, col));
}
};
const handleMouseUp = () => {
dragging = false; // stop tracking
};
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
onDestroy(() => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
});
});
</script>
<div class="relative mb-5 ml-5 flex items-center gap-[5px]">
<Alert.Root
class={clsx(
'flex h-9 w-fit min-w-[80px] rounded-md border border-input bg-transparent px-2 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
'flex items-center justify-center aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40'
)}
>
{grid.getActiveRangeStr()}
</Alert.Root>
<EllipsisVertical class="text-muted-foreground" size="20px" />
<div
class="relative"
onkeydown={(e: KeyboardEvent) => {
const target = e.currentTarget as HTMLElement;
const input = target.querySelector('input') as HTMLInputElement | null;
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
grid.stopExternalEdit(grid.getActivePos());
grid.setCell(grid.getActivePos());
input?.blur();
} else if (e.key == 'Escape') {
e.preventDefault();
grid.stopEditingActive();
grid.stopExternalEdit(grid.getActivePos());
grid.resetCellTemp(grid.getActivePos());
input?.blur();
}
}}
>
@@ -103,24 +151,22 @@
class="absolute top-1/2 left-2 z-10 -translate-y-1/2 text-muted-foreground"
/>
<Input
onmousedown={() => grid.setExternalEdit(grid.getActivePos())}
onblur={() => grid.setCell(grid.getActivePos())}
disabled={grid.getActivePos() === null}
onmousedown={() => grid.startExternalEdit(grid.getActivePos())}
onblur={() => grid.stopExternalEdit(grid.getActivePos())}
bind:value={
() => grid.getActiveCell()?.temp_raw ?? '',
(v) => {
grid.setCellTemp(grid.getActivePos(), v);
}
}
class="relative w-[200px] pl-9"
class="relative w-fit min-w-[300px] pl-9"
></Input>
</div>
</div>
<div
class={clsx(
' grid-wrapper relative h-full min-h-0 max-w-full min-w-0 overflow-auto overflow-visible',
className
)}
class={clsx(' grid-wrapper relative h-full min-h-0 max-w-full min-w-0 overflow-auto', className)}
>
<div class="sticky top-0 flex w-fit" style="z-index: {rows + 70}">
<div class="sticky top-0 left-0" style="z-index: {rows + 70}">
@@ -141,7 +187,10 @@
setColWidth={(width) => grid.setColWidth(j, width)}
direction="col"
val={colToStr(j)}
active={grid.getActivePos() !== null && grid.getActivePos()?.col === j}
active={grid.primary_active !== null &&
grid.secondary_active !== null &&
j >= Math.min(grid.primary_active.col, grid.secondary_active.col) &&
j <= Math.max(grid.primary_active.col, grid.secondary_active.col)}
/>
{/each}
</div>
@@ -154,25 +203,22 @@
width={grid.getDefaultColWidth()}
setRowHeight={(height) => grid.setRowHeight(i, height)}
val={(i + 1).toString()}
active={grid.getActivePos() !== null && grid.getActivePos()?.row === i}
active={grid.primary_active !== null &&
grid.secondary_active !== null &&
i >= Math.min(grid.primary_active.row, grid.secondary_active.row) &&
i <= Math.max(grid.primary_active.row, grid.secondary_active.row)}
/>
</div>
{#each Array(cols) as _, j}
<Cell
{grid}
pos={new Position(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);
console.log(`down at ${refToStr(i, j)}`);
handleCellMouseDown(i, j, e);
}}
bind:cell={
() => grid.getCell(new Position(i, j)),
(v) => grid.setCellTemp(new Position(i, j), v?.temp_raw)
}
active={grid.isActive(new Position(i, j))}
/>
{/each}
</div>

142
frontend/src/lib/components/grid/grid.svelte.ts
View File

@@ -1,5 +1,6 @@
import { toast } from 'svelte-sonner';
import type { CellRef, CellT, Eval, LeadMsg } from './messages';
import { refToStr } from './utils';
class Position {
public row: number;
@@ -22,6 +23,10 @@ class Position {
return { row: this.row, col: this.col };
}
public str(): string {
return refToStr(this.row, this.col);
}
public equals(other: CellRef | null | undefined): boolean {
return !!other && this.row === other.row && this.col === other.col;
}
@@ -38,7 +43,8 @@ class Grid {
col_widths: Record<number, string> = $state({});
default_row_height: string;
default_col_width: string;
active_cell: Position | null = $state(null);
primary_active: Position | null = $state(null);
secondary_active: Position | null = $state(null);
editing_cell: Position | null = $state(null);
external_editing_cell: Position | null = $state(null);
editing_preview: [Eval, boolean] | null = $state(null); // [Eval, dirty]
@@ -53,8 +59,8 @@ class Grid {
return this.data[pos.key()];
}
public setCell(pos: Position | null) {
if (pos === null) return;
public setCell(pos: Position | null | undefined) {
if (pos === null || pos === undefined) return;
let data = this.data[pos.key()];
if (data === undefined) return;
@@ -83,6 +89,7 @@ class Grid {
this.data[pos.key()] = {
raw: x?.raw ?? '',
temp_raw: raw,
pos: pos,
eval: x?.eval ?? undefined,
temp_eval: x?.temp_eval ?? undefined
};
@@ -90,6 +97,20 @@ class Grid {
this.quickEval(pos, raw);
}
public resetCellTemp(pos: Position | null | undefined) {
if (!pos) return;
let x = this.data[pos.key()];
this.data[pos.key()] = {
raw: x?.raw ?? '',
pos: pos,
temp_raw: x?.raw ?? '',
eval: x?.eval ?? undefined,
temp_eval: undefined
};
}
public getRowHeight(row: number) {
return this.row_heights[row] ?? this.default_row_height;
}
@@ -121,8 +142,10 @@ class Grid {
}
}
public startEditing(pos: Position) {
this.active_cell = pos;
public startEditing(pos: Position | undefined) {
if (!pos) return;
this.setActive(pos, pos);
this.editing_cell = pos;
let cell = this.getCell(pos);
@@ -130,52 +153,132 @@ class Grid {
cell.temp_eval = undefined;
}
public stopEditing(pos: Position) {
public stopEditing(pos: Position | null | undefined) {
if (!pos) return;
this.editing_cell = null;
this.setCell(pos);
// this.setCell(pos);
}
public stopEditingActive() {
if (this.active_cell == null) return;
this.stopEditing(this.active_cell);
if (!this.anyIsActive() || !this.primary_active?.equals(this.secondary_active)) return;
this.stopEditing(this.primary_active);
}
public isEditing(pos: Position): boolean {
if (this.editing_cell == null) return false;
if (this.editing_cell === null) return false;
return this.editing_cell.equals(pos);
}
public anyIsEditing(): boolean {
return this.editing_cell !== null;
}
public isExternalEditing(pos: Position): boolean {
if (this.external_editing_cell == null) return false;
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 setActive(primary: Position | null, secondary: Position | null) {
this.primary_active = primary;
this.secondary_active = secondary;
}
public setExternalEdit(pos: Position | null) {
public setInactive() {
this.primary_active = null;
this.secondary_active = null;
}
public startExternalEdit(pos: Position | null) {
this.external_editing_cell = pos;
}
public stopExternalEdit(pos: Position | null) {
this.external_editing_cell = null;
}
public getActiveCell(): CellT | undefined {
if (this.active_cell === null)
if (this.primary_active === null || this.secondary_active === null) {
return {
raw: '',
temp_raw: '',
pos: new Position(-1, -1),
eval: undefined
};
}
return this.getCell(this.active_cell);
if (!this.primary_active.equals(this.secondary_active)) {
return {
raw: '',
temp_raw: '',
pos: new Position(-1, -1),
eval: undefined
};
}
return this.getCell(this.primary_active);
}
public getActiveRangeStr(): string {
const tl = this.getActiveTopLeft();
const br = this.getActiveBottomRight();
if (tl === null || br === null) return '';
// Single-cell selection
if (tl.equals(br)) return tl.str();
// Range selection
return `${tl.str()}:${br.str()}`;
}
public getActivePos(): Position | null {
return this.active_cell;
if (
this.primary_active === null ||
this.secondary_active === null ||
!this.primary_active.equals(this.secondary_active)
) {
return null;
}
return this.primary_active;
}
public isActive(pos: Position): boolean {
if (this.active_cell == null) return false;
return this.active_cell.equals(pos);
if (this.primary_active === null || this.secondary_active === null) return false;
return (
pos.row >= Math.min(this.primary_active.row, this.secondary_active.row) &&
pos.row <= Math.max(this.primary_active.row, this.secondary_active.row) &&
pos.col >= Math.min(this.primary_active.col, this.secondary_active.col) &&
pos.col <= Math.max(this.primary_active.col, this.secondary_active.col)
);
}
public getActiveTopLeft(): Position | null {
if (this.primary_active === null || this.secondary_active === null) return null;
return new Position(
Math.min(this.primary_active.row, this.secondary_active.row),
Math.min(this.primary_active.col, this.secondary_active.col)
);
}
public getActiveBottomRight(): Position | null {
if (this.primary_active === null || this.secondary_active === null) return null;
return new Position(
Math.max(this.primary_active.row, this.secondary_active.row),
Math.max(this.primary_active.col, this.secondary_active.col)
);
}
public isPrimaryActive(pos: Position): boolean {
if (this.primary_active === null) return false;
return this.primary_active.equals(pos);
}
public anyIsActive(): boolean {
return this.primary_active !== null && this.secondary_active !== null;
}
public quickEval(pos: Position | null, raw: string) {
@@ -214,6 +317,7 @@ class Grid {
this.data[pos.key()] = {
raw: msg.raw ?? '',
eval: msg.eval,
pos: pos,
temp_raw: x?.temp_raw ?? '',
temp_eval: x?.temp_eval ?? undefined
};

3
frontend/src/lib/components/grid/messages.ts
View File

@@ -1,3 +1,5 @@
import type { Position } from "./grid.svelte.ts";
interface LeadMsg {
msg_type: 'set' | 'get' | 'error' | 'bulk' | 'eval';
cell?: CellRef;
@@ -48,6 +50,7 @@ type Eval =
interface CellT {
raw: string;
temp_raw: string;
pos: Position;
temp_eval?: Eval;
eval?: Eval;
}

23
frontend/src/lib/components/ui/alert/alert-description.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="alert-description"
class={cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
className
)}
{...restProps}
>
{@render children?.()}
</div>

20
frontend/src/lib/components/ui/alert/alert-title.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="alert-title"
class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
{...restProps}
>
{@render children?.()}
</div>

44
frontend/src/lib/components/ui/alert/alert.svelte Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts" module>
import { type VariantProps, tv } from "tailwind-variants";
export const alertVariants = tv({
base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
},
},
defaultVariants: {
variant: "default",
},
});
export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
</script>
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
variant = "default",
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
variant?: AlertVariant;
} = $props();
</script>
<div
bind:this={ref}
data-slot="alert"
class={cn(alertVariants({ variant }), className)}
{...restProps}
role="alert"
>
{@render children?.()}
</div>

14
frontend/src/lib/components/ui/alert/index.ts Normal file
View File

@@ -0,0 +1,14 @@
import Root from "./alert.svelte";
import Description from "./alert-description.svelte";
import Title from "./alert-title.svelte";
export { alertVariants, type AlertVariant } from "./alert.svelte";
export {
Root,
Description,
Title,
//
Root as Alert,
Description as AlertDescription,
Title as AlertTitle,
};