@chalabi/svelte-sheets 2.0.1 → 2.0.3

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

@@ -74,6 +74,8 @@ let hoverRaf = null;
 let pendingHover = null;
 let lastHover = null;
 let lastDrag = null;
+let selectionRaf = null;
+let extendRaf = null;
 // $: ((_) => {
 //   history = history.slice(0, historyIndex);
 //   history.push(data);
@@ -82,8 +84,8 @@ let lastDrag = 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 = [];
@@ -225,7 +227,7 @@ function refresh(data, viewport_height, viewport_width) {
 let scrollLeft;
 let scrollTop;
 $: (function scrollX() {
-    if (!scrollLeft || !colElements)
+    if (scrollLeft === undefined || !colElements)
         return;
     // if (!scrollLeft) ;
     // horizontal scrolling
@@ -259,7 +261,7 @@ $: (function scrollX() {
     right = remaining * average_width;
 })();
 $: (function scrollY() {
-    if (!scrollTop || !rowElements)
+    if (scrollTop === undefined || !rowElements)
         return;
     // vertical scrolling
     for (let v = 0; v < rowElements.length; v += 1) {
@@ -313,6 +315,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) {
@@ -429,56 +478,96 @@ function onMouseOver(e) {
     });
     return;
 }
-function onKeyUp(e) {
-    // on keyup just reinitialize everything
-    keypressed[e.keyCode] = false;
+function getSelectionRect(start, end) {
+    if (!contents || !viewport)
+        return null;
+    const endC = Math.max(end.c - 1, start.c);
+    const endR = Math.max(end.r - 1, start.r);
+    const tlCell = contents.querySelector(`td[data-x="${start.c}"][data-y="${start.r}"]`);
+    const brCell = contents.querySelector(`td[data-x="${endC}"][data-y="${endR}"]`);
+    if (!tlCell || !brCell)
+        return null;
+    const containerRect = viewport.getBoundingClientRect();
+    const tlRect = tlCell.getBoundingClientRect();
+    const brRect = brCell.getBoundingClientRect();
+    const left = tlRect.left - containerRect.left + viewport.scrollLeft;
+    const top = tlRect.top - containerRect.top + viewport.scrollTop;
+    const right = brRect.right - containerRect.left + viewport.scrollLeft;
+    const bottom = brRect.bottom - containerRect.top + viewport.scrollTop;
+    if (!Number.isFinite(left) ||
+        !Number.isFinite(top) ||
+        !Number.isFinite(right) ||
+        !Number.isFinite(bottom)) {
+        return null;
+    }
+    return { left, top, right, bottom };
 }
-hotkeys("ctrl+z, command+z", function (e) {
-    if (isReadOnly)
-        return;
-    e.preventDefault();
-    cmdz = true;
-    if (historyIndex == 0)
+function updateSelectionOverlays() {
+    if (!mounted)
         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)
+    const tl = (selected && decode(selected[0])) || { c: 0, r: 0 };
+    const br = (selected && decode(selected[1])) || { c: 0, r: 0 };
+    topLeft = {
+        c: br.c < tl.c ? br.c : tl.c,
+        r: br.r < tl.r ? br.r : tl.r,
+    };
+    bottomRight = {
+        c: br.c > tl.c ? br.c + 1 : tl.c + 1,
+        r: br.r > tl.r ? br.r + 1 : tl.r + 1,
+    };
+    const rect = getSelectionRect(topLeft, bottomRight);
+    if (!rect) {
+        tops.style = "display: none";
+        rights.style = "display: none";
+        bottoms.style = "display: none";
+        lefts.style = "display: none";
+        colLine.style = "display: none";
+        rowLine.style = "display: none";
+        square.style = "display: none";
         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)
+    }
+    const { left, top, right, bottom } = rect;
+    tops.style = `display: block; width: ${right - left}px; left: ${left}px; top: ${top}px`;
+    rights.style = `display: block; height: ${bottom - top}px; left: ${right}px; top: ${top}px`;
+    bottoms.style = `display: block; width: ${right - left}px; left: ${left}px; top: ${bottom}px`;
+    lefts.style = `display: block; height: ${bottom - top}px; left: ${left}px; top: ${top}px`;
+    colLine.style = `display: block; width: ${right - left}px; left: ${left}px; top: ${top}px;`;
+    rowLine.style = `display: block; height: ${bottom - top}px; left: ${left}px; top: ${top}px`;
+    square.style = `display: block; left:${right}px; top:${bottom}px`;
+    selectWidth = right - left;
+    selectHeight = bottom - top;
+}
+function updateExtendOverlays() {
+    if (!extension || !extended)
         return;
-    e.preventDefault();
-    if (!clipboard)
+    const tl = (selected && decode(extended[0])) || { c: 0, r: 0 };
+    const br = (selected && decode(extended[1])) || { c: 0, r: 0 };
+    topLeft = {
+        c: br.c < tl.c ? br.c : tl.c,
+        r: br.r < tl.r ? br.r : tl.r,
+    };
+    bottomRight = {
+        c: br.c > tl.c ? br.c + 1 : tl.c + 1,
+        r: br.r > tl.r ? br.r + 1 : tl.r + 1,
+    };
+    const rect = getSelectionRect(topLeft, bottomRight);
+    if (!rect) {
+        topextend.style = "display: none";
+        rightextend.style = "display: none";
+        bottomextend.style = "display: none";
+        leftextend.style = "display: none";
         return;
-    data = pasteSelection(data, JSON.parse(clipboard), selected);
-});
+    }
+    const { left, top, right, bottom } = rect;
+    topextend.style = `display: block; width: ${right - left}px; left: ${left}px; top: ${top}px`;
+    rightextend.style = `display: block; height: ${bottom - top}px; left: ${right}px; top: ${top}px`;
+    bottomextend.style = `display: block; width: ${right - left}px; left: ${left}px; top: ${bottom}px`;
+    leftextend.style = `display: block; height: ${bottom - top}px; left: ${left}px; top: ${top}px`;
+}
+function onKeyUp(e) {
+    // on keyup just reinitialize everything
+    keypressed[e.keyCode] = false;
+}
 function onKeyDown(e) {
     keypressed[e.keyCode] = true;
     if (!!edition) {
@@ -546,6 +635,9 @@ $: (() => {
             }
             data = d;
         }
+        else if (!columns.length) {
+            columns = Array.from({ length: data[0].length }, () => ({}));
+        }
     }
     // Adjust minimal dimensions
     var j = 0;
@@ -581,82 +673,25 @@ let rowLine;
 let square;
 let squareX;
 let squareY;
-let topLeft;
-let bottomRight;
-$: {
-    if (extension && extended) {
-        let tl = (selected && decode(extended[0])) || { c: 0, r: 0 };
-        let br = (selected && decode(extended[1])) || { c: 0, r: 0 };
-        topLeft = {
-            c: br.c < tl.c ? br.c : tl.c,
-            r: br.r < tl.r ? br.r : tl.r,
-        };
-        bottomRight = {
-            c: br.c > tl.c ? br.c + 1 : tl.c + 1,
-            r: br.r > tl.r ? br.r + 1 : tl.r + 1,
-        };
-        let top = 28;
-        let right = 51;
-        let bottom = 28;
-        let left = 51;
-        for (let i = 0; i < topLeft.r; i++) {
-            top = top + getRowHeight(i);
-        }
-        for (let i = 0; i < topLeft.c; i++) {
-            left = left + getColumnsWidth(i);
-        }
-        for (let i = 0; i < bottomRight.r; i++) {
-            bottom = bottom + getRowHeight(i);
-        }
-        for (let i = 0; i < bottomRight.c; i++) {
-            right = right + getColumnsWidth(i);
-        }
-        topextend.style = `width: ${right - left}px; left: ${left}px; top: ${top}px`;
-        rightextend.style = `height: ${bottom - top}px; left: ${right}px; top: ${top}px`;
-        bottomextend.style = `width: ${right - left}px; left: ${left}px; top: ${bottom}px`;
-        leftextend.style = `height: ${bottom - top}px; left: ${left}px; top: ${top}px`;
-    }
+let topLeft = { c: 0, r: 0 };
+let bottomRight = { c: 0, r: 0 };
+$: if (mounted) {
+    if (extendRaf)
+        cancelAnimationFrame(extendRaf);
+    extendRaf = requestAnimationFrame(() => {
+        extendRaf = null;
+        updateExtendOverlays();
+    });
 }
 let selectWidth;
 let selectHeight;
-$: {
-    if (mounted) {
-        let tl = (selected && decode(selected[0])) || { c: 0, r: 0 };
-        let br = (selected && decode(selected[1])) || { c: 0, r: 0 };
-        topLeft = {
-            c: br.c < tl.c ? br.c : tl.c,
-            r: br.r < tl.r ? br.r : tl.r,
-        };
-        bottomRight = {
-            c: br.c > tl.c ? br.c + 1 : tl.c + 1,
-            r: br.r > tl.r ? br.r + 1 : tl.r + 1,
-        };
-        let top = 28;
-        let right = 51;
-        let bottom = 28;
-        let left = 51;
-        for (let i = 0; i < topLeft.r; i++) {
-            top = top + getRowHeight(i);
-        }
-        for (let i = 0; i < topLeft.c; i++) {
-            left = left + getColumnsWidth(i);
-        }
-        for (let i = 0; i < bottomRight.r; i++) {
-            bottom = bottom + getRowHeight(i);
-        }
-        for (let i = 0; i < bottomRight.c; i++) {
-            right = right + getColumnsWidth(i);
-        }
-        tops.style = `width: ${right - left}px; left: ${left}px; top: ${top}px`;
-        rights.style = `height: ${bottom - top}px; left: ${right}px; top: ${top}px`;
-        bottoms.style = `width: ${right - left}px; left: ${left}px; top: ${bottom}px`;
-        lefts.style = `height: ${bottom - top}px; left: ${left}px; top: ${top}px`;
-        colLine.style = `width: ${right - left}px; left: ${left}px; top: 28px;`;
-        rowLine.style = `height: ${bottom - top}px; left: 51px; top: ${top}px`;
-        square.style = `left:${right}px; top:${bottom}px`;
-        selectWidth = right - left;
-        selectHeight = bottom - top;
-    }
+$: if (mounted) {
+    if (selectionRaf)
+        cancelAnimationFrame(selectionRaf);
+    selectionRaf = requestAnimationFrame(() => {
+        selectionRaf = null;
+        updateSelectionOverlays();
+    });
 }
 // history logic
 function historyPush(data, rows, columns, style) {
@@ -723,17 +758,18 @@ function historyPush(data, rows, columns, style) {
         <div class="row-line absolute" bind:this={rowLine} />
         <div
           tabindex={-1}
-        use:draggable
-        on:dragging={(e) => {
-          if (isReadOnly) return;
-          if (lastDrag && lastDrag.x === e.detail.x && lastDrag.y === e.detail.y) {
-            return;
-          }
-          lastDrag = { x: e.detail.x, y: e.detail.y };
-          squareX = e.detail.x;
-          squareY = e.detail.y;
-        }}
+          use:draggable
+          on:dragging={(e) => {
+            if (isReadOnly) return;
+            if (lastDrag && lastDrag.x === e.detail.x && lastDrag.y === e.detail.y) {
+              return;
+            }
+            lastDrag = { x: e.detail.x, y: e.detail.y };
+            squareX = e.detail.x;
+            squareY = e.detail.y;
+          }}
           class="square absolute interactive"
+          class:hidden={isReadOnly || config.disableHover || !config.selectionCopy}
           id="square"
           bind:this={square}
         />
@@ -832,7 +868,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.1",
+  "version": "2.0.3",
   "description": "Run your excel sheet in the browser!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",