🙃
This commit is contained in:
@@ -1,14 +1,331 @@
|
||||
<script lang="ts">
|
||||
const ws = new WebSocket("ws://127.0.0.1:7050");
|
||||
ws.onmessage = (e) => console.log("->", e.data);
|
||||
let input: string = "";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
// --- Configuration ---
|
||||
const numRows = 1000; // Increased to show performance
|
||||
const numCols = 100; // Increased to show performance
|
||||
const rowHeight = 30; // px
|
||||
const colWidth = 150; // px
|
||||
const rowNumberWidth = 50; // px
|
||||
const colHeaderHeight = 30; // px
|
||||
|
||||
// --- State ---
|
||||
let gridData: string[][];
|
||||
let columnLabels: string[] = [];
|
||||
let activeCell: [number, number] | null = null;
|
||||
let viewportElement: HTMLElement;
|
||||
let viewportWidth = 0;
|
||||
let viewportHeight = 0;
|
||||
let scrollTop = 0;
|
||||
let scrollLeft = 0;
|
||||
|
||||
// --- Helper Functions ---
|
||||
/**
|
||||
* Generates Excel-style column labels (A, B, ..., Z, AA, AB, ...).
|
||||
*/
|
||||
function generateColumnLabels(count: number): string[] {
|
||||
const labels = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
let label = "";
|
||||
let temp = i;
|
||||
while (temp >= 0) {
|
||||
label = String.fromCharCode((temp % 26) + 65) + label;
|
||||
temp = Math.floor(temp / 26) - 1;
|
||||
}
|
||||
labels.push(label);
|
||||
}
|
||||
return labels;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
columnLabels = generateColumnLabels(numCols);
|
||||
gridData = Array(numRows)
|
||||
.fill(null)
|
||||
.map(() => Array(numCols).fill(""));
|
||||
});
|
||||
|
||||
// --- Event Handlers ---
|
||||
function handleGridBlur(e: FocusEvent) {
|
||||
if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
|
||||
activeCell = null;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Reactive Calculations for Virtualization ---
|
||||
// $: is a Svelte feature that re-runs code when its dependencies change.
|
||||
|
||||
// Calculate which rows/cols are visible based on scroll position
|
||||
$: startRow = Math.max(0, Math.floor(scrollTop / rowHeight));
|
||||
$: endRow = Math.min(
|
||||
numRows,
|
||||
startRow + Math.ceil(viewportHeight / rowHeight) + 1,
|
||||
);
|
||||
$: startCol = Math.max(0, Math.floor(scrollLeft / colWidth));
|
||||
$: endCol = Math.min(
|
||||
numCols,
|
||||
startCol + Math.ceil(viewportWidth / colWidth) + 1,
|
||||
);
|
||||
|
||||
// Create arrays of only the visible items to render
|
||||
$: visibleRows = Array(endRow - startRow)
|
||||
.fill(0)
|
||||
.map((_, i) => startRow + i);
|
||||
$: visibleCols = Array(endCol - startCol)
|
||||
.fill(0)
|
||||
.map((_, i) => startCol + i);
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Lead</h1>
|
||||
<button onclick={() => ws.send(input)}>Send msg</button>
|
||||
<input bind:value={input} />
|
||||
</main>
|
||||
<div
|
||||
class="w-full h-[85vh] p-4 bg-background text-foreground rounded-lg border flex flex-col"
|
||||
>
|
||||
<div
|
||||
class="relative grid-container"
|
||||
on:focusout={handleGridBlur}
|
||||
style="
|
||||
--row-height: {rowHeight}px;
|
||||
--col-width: {colWidth}px;
|
||||
--row-number-width: {rowNumberWidth}px;
|
||||
--col-header-height: {colHeaderHeight}px;
|
||||
"
|
||||
>
|
||||
<!-- The scrollable viewport -->
|
||||
<div
|
||||
class="viewport"
|
||||
bind:this={viewportElement}
|
||||
bind:clientWidth={viewportWidth}
|
||||
bind:clientHeight={viewportHeight}
|
||||
on:scroll={(e) => {
|
||||
scrollTop = e.currentTarget.scrollTop;
|
||||
scrollLeft = e.currentTarget.scrollLeft;
|
||||
}}
|
||||
>
|
||||
<!-- Sizer div: creates the full scrollable area -->
|
||||
<div
|
||||
class="total-sizer"
|
||||
style:width="{numCols * colWidth}px"
|
||||
style:height="{numRows * rowHeight}px"
|
||||
/>
|
||||
|
||||
{#if gridData}
|
||||
<!-- Render Window: contains only the visible cells -->
|
||||
<div
|
||||
class="render-window"
|
||||
style:transform="translate({scrollLeft}px, {scrollTop}px)"
|
||||
>
|
||||
<!-- Top-left corner -->
|
||||
<div
|
||||
class="top-left-corner"
|
||||
class:active-header-corner={activeCell !== null}
|
||||
/>
|
||||
|
||||
<!-- Visible Column Headers -->
|
||||
<div
|
||||
class="col-headers-container"
|
||||
style:transform="translateX(-{scrollLeft % colWidth}px)"
|
||||
>
|
||||
{#each visibleCols as j (j)}
|
||||
<div
|
||||
class="header-cell"
|
||||
style:left="{j * colWidth}px"
|
||||
class:active-header={activeCell !== null && activeCell[1] === j}
|
||||
>
|
||||
{columnLabels[j]}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Visible Row Headers -->
|
||||
<div
|
||||
class="row-headers-container"
|
||||
style:transform="translateY(-{scrollTop % rowHeight}px)"
|
||||
>
|
||||
{#each visibleRows as i (i)}
|
||||
<div
|
||||
class="row-number-cell"
|
||||
style:top="{i * rowHeight}px"
|
||||
class:active-header={activeCell !== null && activeCell[0] === i}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Visible Grid Cells -->
|
||||
<div
|
||||
class="cells-container"
|
||||
style:transform="translate(-{scrollLeft % colWidth}px, -{scrollTop %
|
||||
rowHeight}px)"
|
||||
>
|
||||
{#each visibleRows as i (i)}
|
||||
{#each visibleCols as j (j)}
|
||||
<div
|
||||
class="grid-cell"
|
||||
style:top="{i * rowHeight}px"
|
||||
style:left="{j * colWidth}px"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
bind:value={gridData[i][j]}
|
||||
class="cell-input"
|
||||
on:focus={() => (activeCell = [i, j])}
|
||||
/>
|
||||
<!-- Active cell indicator with fill handle -->
|
||||
{#if activeCell && activeCell[0] === i && activeCell[1] === j}
|
||||
<div class="active-cell-indicator">
|
||||
<div class="fill-handle" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.grid-container {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif;
|
||||
border: 1px solid hsl(var(--border));
|
||||
}
|
||||
.viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.total-sizer {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
.render-window {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none; /* Pass clicks through to elements below */
|
||||
}
|
||||
|
||||
.top-left-corner,
|
||||
.col-headers-container,
|
||||
.row-headers-container,
|
||||
.cells-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.top-left-corner {
|
||||
width: var(--row-number-width);
|
||||
height: var(--col-header-height);
|
||||
background-color: hsl(var(--muted));
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
z-index: 4;
|
||||
}
|
||||
.active-header-corner {
|
||||
background-color: hsl(var(--accent));
|
||||
}
|
||||
|
||||
.col-headers-container {
|
||||
top: 0;
|
||||
left: var(--row-number-width);
|
||||
height: var(--col-header-height);
|
||||
z-index: 3;
|
||||
}
|
||||
.row-headers-container {
|
||||
top: var(--col-header-height);
|
||||
left: 0;
|
||||
width: var(--row-number-width);
|
||||
z-index: 2;
|
||||
}
|
||||
.cells-container {
|
||||
top: var(--col-header-height);
|
||||
left: var(--row-number-width);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-cell,
|
||||
.row-number-cell {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: hsl(var(--muted));
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
user-select: none;
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
transition: background-color 100ms;
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
height: var(--col-header-height);
|
||||
width: var(--col-width);
|
||||
}
|
||||
.row-number-cell {
|
||||
width: var(--row-number-width);
|
||||
height: var(--row-height);
|
||||
}
|
||||
|
||||
.active-header {
|
||||
background-color: hsl(var(--accent) / 0.8);
|
||||
color: hsl(var(--accent-foreground));
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
position: absolute;
|
||||
width: var(--col-width);
|
||||
height: var(--row-height);
|
||||
border-right: 1px solid hsl(var(--border) / 0.7);
|
||||
border-bottom: 1px solid hsl(var(--border) / 0.7);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cell-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0.5rem;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.cell-input:focus {
|
||||
box-shadow: none; /* Removes shadcn default focus ring */
|
||||
}
|
||||
|
||||
.active-cell-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid hsl(var(--primary));
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
.fill-handle {
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: hsl(var(--primary));
|
||||
cursor: crosshair;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,79 +1,121 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--radius: 0.65rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.645 0.246 16.439);
|
||||
--primary-foreground: oklch(0.969 0.015 12.422);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.645 0.246 16.439);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.645 0.246 16.439);
|
||||
--sidebar-primary-foreground: oklch(0.969 0.015 12.422);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.645 0.246 16.439);
|
||||
--primary-foreground: oklch(0.969 0.015 12.422);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.645 0.246 16.439);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.645 0.246 16.439);
|
||||
--sidebar-primary-foreground: oklch(0.969 0.015 12.422);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { mount } from 'svelte'
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
import { mount } from "svelte";
|
||||
import "./app.css";
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById('app')!,
|
||||
})
|
||||
target: document.getElementById("app")!,
|
||||
});
|
||||
|
||||
export default app
|
||||
export default app;
|
||||
|
||||
Reference in New Issue
Block a user