@chalabi/svelte-sheets 2.0.2 → 2.0.4

package/Readme.md

@@ -2,7 +2,7 @@
 
 Ultra fast excel sheets in the browser. Hugely inspired by JExcel, built on XLSX shoulders.
 
-=> Find a live example [Here](https://ticruz38.github.io/svelte-sheets/)
+=> Find a live example [Here](https://chalabi2.github.io/svelte-sheets/)
 
 ### Motivation
 

package/dist/Sheet.svelte

@@ -84,8 +84,8 @@ let extendRaf = null;
 // implement virtual list
 export let startY = 0;
 export let startX = 0;
-export let endY = 0;
-export let endX = 0;
+export let endY = 50; // Initial render batch
+export let endX = 20; // Initial render batch
 // virtual list state
 let height_map = [];
 let width_map = [];
@@ -180,45 +180,58 @@ export function onInputChange(value, row, column) {
 }
 function refresh(data, viewport_height, viewport_width) {
     return __awaiter(this, void 0, void 0, function* () {
+        if (!viewport)
+            return;
         const { scrollTop, scrollLeft } = viewport;
         yield tick(); // wait until the DOM is up to date
+        const defaultHeight = 24;
+        const defaultWidth = config.defaultColWidth || 50;
+        // Safety limits to prevent infinite loops
+        const maxRowsToRender = Math.max(data.length, Math.ceil((viewport_height + bottom_buffer * 2) / defaultHeight) + 10, 100);
+        const maxColsToRender = Math.max(columns.length, Math.ceil((viewport_width + right_buffer * 2) / defaultWidth) + 10, 50);
         let content_height = top - scrollTop - bottom_buffer;
         let content_width = left - scrollLeft - left_buffer;
         // vertical
         let y = startY;
-        while (content_height < viewport_height) {
+        while (content_height < viewport_height && y < maxRowsToRender) {
             let row = rowElements[y - startY];
             if (!row) {
                 endY = y + 1;
                 yield tick(); // render the newly visible row
                 row = rowElements[y - startY];
+                // If still no row after tick, break to prevent infinite loop
+                if (!row)
+                    break;
             }
             const row_height = (height_map[y] = getRowHeight(y));
             content_height += row_height;
             y += 1;
         }
-        endY = y;
+        endY = Math.max(y, 1);
         let remaining = data.length - endY;
-        average_height = (top + content_height) / endY;
-        bottom = remaining * average_height;
+        average_height = endY > 0 ? (top + content_height) / endY : defaultHeight;
+        bottom = remaining * (average_height || defaultHeight);
         height_map.length = data.length;
         // horizontal
         let x = startX;
-        while (content_width < viewport_width) {
+        while (content_width < viewport_width && x < maxColsToRender) {
             let col = colElements[x - startX];
             if (!col) {
                 endX = x + 1;
                 yield tick(); // render the newly visible col
                 col = colElements[x - startX];
+                // If still no col after tick, break to prevent infinite loop
+                if (!col)
+                    break;
             }
             const col_width = (width_map[x] = getColumnsWidth(x));
             content_width += col_width;
             x += 1;
         }
-        endX = x;
+        endX = Math.max(x, 1);
         let remains = columns.length - endX;
-        average_width = (left + content_width) / endX;
-        right = remains * average_width;
+        average_width = endX > 0 ? (left + content_width) / endX : defaultWidth;
+        right = remains * (average_width || defaultWidth);
         width_map.length = columns.length;
     });
 }
@@ -227,8 +240,11 @@ function refresh(data, viewport_height, viewport_width) {
 let scrollLeft;
 let scrollTop;
 $: (function scrollX() {
-    if (!scrollLeft || !colElements)
+    if (scrollLeft === undefined || !colElements)
         return;
+    // Ensure we have valid dimensions to work with
+    const totalCols = Math.max(columns.length, endX, 1);
+    const defaultWidth = config.defaultColWidth || 50;
     // if (!scrollLeft) ;
     // horizontal scrolling
     for (let v = 0; v < colElements.length; v += 1) {
@@ -236,8 +252,8 @@ $: (function scrollX() {
     }
     let c = 0;
     let x = 0;
-    while (true) {
-        const col_width = width_map[c] || average_width;
+    while (c < totalCols) {
+        const col_width = width_map[c] || average_width || defaultWidth;
         if (x + col_width > scrollLeft - left_buffer) {
             startX = c;
             left = x;
@@ -246,31 +262,40 @@ $: (function scrollX() {
         x += col_width;
         c += 1;
     }
-    while (true) {
-        x += width_map[c] || average_width;
+    // Safety: ensure we found a valid startX
+    if (c >= totalCols) {
+        startX = Math.max(0, totalCols - 1);
+        left = x;
+    }
+    while (c < totalCols + Math.ceil((viewport_width + right_buffer) / defaultWidth)) {
+        const w = width_map[c] || average_width || defaultWidth;
+        x += w;
         c += 1;
         if (x > scrollLeft + viewport_width + right_buffer)
             break;
     }
-    endX = c;
+    endX = Math.max(c, 1);
     const remaining = endX > columns.length
-        ? (viewport_width + right_buffer) / 24
+        ? (viewport_width + right_buffer) / defaultWidth
         : columns.length - endX;
-    average_width = x / endX;
+    average_width = endX > 0 ? x / endX : defaultWidth;
     // while (c < columns.length) width_map[c++] = average_width;
-    right = remaining * average_width;
+    right = remaining * (average_width || defaultWidth);
 })();
 $: (function scrollY() {
-    if (!scrollTop || !rowElements)
+    if (scrollTop === undefined || !rowElements)
         return;
+    // Ensure we have valid dimensions to work with
+    const totalRows = Math.max(data.length, endY, 1);
+    const defaultHeight = 24;
     // vertical scrolling
     for (let v = 0; v < rowElements.length; v += 1) {
         height_map[startY + v] = getRowHeight(startY + v);
     }
     let r = 0;
     let y = 0;
-    while (true) {
-        const row_height = height_map[r] || average_height;
+    while (r < totalRows) {
+        const row_height = height_map[r] || average_height || defaultHeight;
         if (y + row_height > scrollTop - top_buffer) {
             startY = r;
             top = y;
@@ -279,19 +304,25 @@ $: (function scrollY() {
         y += row_height;
         r += 1;
     }
-    while (true) {
-        y += height_map[r] || average_height;
+    // Safety: ensure we found a valid startY
+    if (r >= totalRows) {
+        startY = Math.max(0, totalRows - 1);
+        top = y;
+    }
+    while (r < totalRows + Math.ceil((viewport_height + bottom_buffer) / defaultHeight)) {
+        const h = height_map[r] || average_height || defaultHeight;
+        y += h;
         r += 1;
         if (y > scrollTop + viewport_height + bottom_buffer)
             break;
     }
-    endY = r;
+    endY = Math.max(r, 1);
     const remaining = endY > data.length
-        ? (viewport_height + bottom_buffer) / 24
+        ? (viewport_height + bottom_buffer) / defaultHeight
         : data.length - endY;
-    average_height = y / endY;
+    average_height = endY > 0 ? y / endY : defaultHeight;
     // while (r < data.length) height_map[r++] = average_height;
-    bottom = remaining * average_height;
+    bottom = remaining * (average_height || defaultHeight);
 })();
 function handle_scroll(e) {
     scrollTop = viewport.scrollTop;
@@ -315,6 +346,53 @@ onMount(() => {
         // document.addEventListener("touchmove", jexcel.touchEndControls);
         document === null || document === void 0 ? void 0 : document.addEventListener("keydown", onKeyDown);
         document === null || document === void 0 ? void 0 : document.addEventListener("keyup", onKeyUp);
+        // Initialize hotkeys in browser only
+        hotkeys("ctrl+z, command+z", function (e) {
+            if (isReadOnly)
+                return;
+            e.preventDefault();
+            cmdz = true;
+            if (historyIndex == 0)
+                return;
+            historyIndex -= 1;
+            const res = JSON.parse(history[historyIndex]);
+            data = res.data;
+            columns = res.columns;
+            rows = res.rows;
+            style = res.style;
+            setTimeout((_) => (cmdz = false), 10);
+        });
+        hotkeys("ctrl+shift+z, command+shift+z", function (e) {
+            if (isReadOnly)
+                return;
+            console.log("redo");
+            e.preventDefault();
+            cmdz = true;
+            if (history.length - 1 == historyIndex)
+                return;
+            historyIndex = historyIndex + 1;
+            const res = JSON.parse(history[historyIndex]);
+            data = res.data;
+            columns = res.columns;
+            rows = res.rows;
+            style = res.style;
+            setTimeout((_) => (cmdz = false), 10);
+        });
+        hotkeys("ctrl+c, command+c, ctrl+x, command+x", function (e, handler) {
+            var _a;
+            if (isReadOnly && ((_a = handler === null || handler === void 0 ? void 0 : handler.key) === null || _a === void 0 ? void 0 : _a.includes("x")))
+                return;
+            e.preventDefault();
+            clipboard = JSON.stringify(selected);
+        });
+        hotkeys("ctrl+v, command+v", function (e) {
+            if (isReadOnly)
+                return;
+            e.preventDefault();
+            if (!clipboard)
+                return;
+            data = pasteSelection(data, JSON.parse(clipboard), selected);
+        });
     }
 });
 function onMouseDown(e) {
@@ -521,52 +599,6 @@ function onKeyUp(e) {
     // on keyup just reinitialize everything
     keypressed[e.keyCode] = false;
 }
-hotkeys("ctrl+z, command+z", function (e) {
-    if (isReadOnly)
-        return;
-    e.preventDefault();
-    cmdz = true;
-    if (historyIndex == 0)
-        return;
-    historyIndex -= 1;
-    const res = JSON.parse(history[historyIndex]);
-    data = res.data;
-    columns = res.columns;
-    rows = res.rows;
-    style = res.style;
-    setTimeout((_) => (cmdz = false), 10);
-});
-hotkeys("ctrl+shift+z, command+shift+z", function (e) {
-    if (isReadOnly)
-        return;
-    console.log("redo");
-    e.preventDefault();
-    cmdz = true;
-    if (history.length - 1 == historyIndex)
-        return;
-    historyIndex = historyIndex + 1;
-    const res = JSON.parse(history[historyIndex]);
-    data = res.data;
-    columns = res.columns;
-    rows = res.rows;
-    style = res.style;
-    setTimeout((_) => (cmdz = false), 10);
-});
-hotkeys("ctrl+c, command+c, ctrl+x, command+x", function (e, handler) {
-    var _a;
-    if (isReadOnly && ((_a = handler === null || handler === void 0 ? void 0 : handler.key) === null || _a === void 0 ? void 0 : _a.includes("x")))
-        return;
-    e.preventDefault();
-    clipboard = JSON.stringify(selected);
-});
-hotkeys("ctrl+v, command+v", function (e) {
-    if (isReadOnly)
-        return;
-    e.preventDefault();
-    if (!clipboard)
-        return;
-    data = pasteSelection(data, JSON.parse(clipboard), selected);
-});
 function onKeyDown(e) {
     keypressed[e.keyCode] = true;
     if (!!edition) {
@@ -634,6 +666,9 @@ $: (() => {
             }
             data = d;
         }
+        else if (!columns.length) {
+            columns = Array.from({ length: data[0].length }, () => ({}));
+        }
     }
     // Adjust minimal dimensions
     var j = 0;
@@ -669,8 +704,8 @@ let rowLine;
 let square;
 let squareX;
 let squareY;
-let topLeft;
-let bottomRight;
+let topLeft = { c: 0, r: 0 };
+let bottomRight = { c: 0, r: 0 };
 $: if (mounted) {
     if (extendRaf)
         cancelAnimationFrame(extendRaf);
@@ -864,7 +899,7 @@ function historyPush(data, rows, columns, style) {
           {/each}
         </tr>
       </thead>
-      <tbody class="draggable" bind:this={viewport} on:scroll={handle_scroll}>
+      <tbody class="draggable" on:scroll={handle_scroll}>
         {#each visibleY as r}
           <tr
             class="virtual-row"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chalabi/svelte-sheets",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Run your excel sheet in the browser!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",