@reffy/infinite-canvas 0.0.1

package/esm/util/camera/camera.js

@@ -0,0 +1,75 @@
+import { m3 } from "../webgl/m3";
+export function getClipSpaceMousePosition(e, canvas) {
+    const rect = canvas.getBoundingClientRect();
+    const cssX = e.clientX - rect.left;
+    const cssY = e.clientY - rect.top;
+    const normalizedX = cssX / canvas.clientWidth;
+    const normalizedY = cssY / canvas.clientHeight;
+    const clipX = normalizedX * 2 - 1;
+    const clipY = normalizedY * -2 + 1;
+    return [clipX, clipY];
+}
+export function clipToCSS(clipX, clipY, canvas) {
+    const x = (clipX + 1) * 0.5 * canvas.clientWidth;
+    const y = (1 - clipY) * 0.5 * canvas.clientHeight;
+    return [x, y];
+}
+// Render: clip = P · V · world
+// Picking: world = inverse(P · V) · clip
+export function screenToWorld(clientX, clientY, w, h, canvas, worldMatrix) {
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    // Device pixels relative to canvas
+    const x = (clientX - rect.left) * dpr;
+    const y = (clientY - rect.top) * dpr;
+    const xClip = (x / w) * 2 - 1;
+    const yClip = (y / h) * -2 + 1;
+    // projection matrix transforms pixel space to clip space
+    const proj = m3.projection(w, h);
+    // view-projection matrix
+    const pv = m3.multiply(proj, worldMatrix); // worldMatrix is view matrix and calculates the matrix to map world-space to clip-space
+    // used to unproject and retrieve world coords
+    const invPV = m3.inverse(pv);
+    const [wx, wy] = m3.transformPoint(invPV, [xClip, yClip]);
+    return [wx, wy];
+}
+export function getWorldCoords(x, y, canvas) {
+    const { gl, canvas: innerCanvas } = canvas;
+    return screenToWorld(x, y, gl.canvas.width, gl.canvas.height, innerCanvas, canvas.worldMatrix);
+}
+/**
+ * Transforms a point from world space to camera (view) space.
+ * @param worldX X coordinate in world space
+ * @param worldY Y coordinate in world space
+ * @param cameraMatrix The camera/view matrix (usually canvas.worldMatrix)
+ * @returns [cameraX, cameraY]
+ */
+export function worldToCamera(worldX, worldY, cameraMatrix) {
+    // The camera matrix maps camera space to world space, so invert it
+    const invCamera = m3.inverse(cameraMatrix);
+    return m3.transformPoint(invCamera, [worldX, worldY]);
+}
+export function applyMatrixToPoint(matrix, x, y) {
+    const px = x ?? 0;
+    const py = y ?? 0;
+    return [
+        matrix[0] * px + matrix[3] * py + matrix[6],
+        matrix[1] * px + matrix[4] * py + matrix[7],
+    ];
+}
+export function getScaleXFromMatrix(matrix) {
+    return Math.hypot(matrix[0], matrix[1]);
+}
+export function getScaleYFromMatrix(matrix) {
+    return Math.hypot(matrix[3], matrix[4]);
+}
+export function getScalesFromMatrix(matrix) {
+    return [getScaleXFromMatrix(matrix), getScaleYFromMatrix(matrix)];
+}
+function isPositive(num) {
+    return num / Math.abs(num);
+}
+export function isScalePositive(matrix) {
+    return [isPositive(matrix[0]), isPositive(matrix[4])];
+}
+//# sourceMappingURL=camera.js.map

package/esm/util/camera/camera.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera.js","sourceRoot":"src/","sources":["util/camera/camera.ts"],"names":[],"mappings":"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"}

package/esm/util/camera/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./camera";
+//# sourceMappingURL=index.d.ts.map

package/esm/util/camera/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"src/","sources":["util/camera/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/esm/util/camera/index.js

@@ -0,0 +1,2 @@
+export * from "./camera";
+//# sourceMappingURL=index.js.map

package/esm/util/camera/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["util/camera/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/esm/util/checks.d.ts

@@ -0,0 +1,11 @@
+export declare function arraysEqual(a: any, b: any): boolean;
+export declare const isNumber: (a: any) => a is number;
+export declare const isObject: (a: any) => a is object;
+export declare const isBoolean: (arg: any) => arg is boolean;
+export declare const isFunction: (val: any) => val is Function;
+export declare const isUndefined: (val: any) => val is undefined;
+export declare const isNil: (val: any) => val is null | undefined;
+export declare const sameSign: (a: number, b: number) => boolean;
+export declare const normalizeSign: (v: number, EPS: number) => number;
+export declare const willFlip: (current: number, factor: number, EPS: number) => boolean;
+//# sourceMappingURL=checks.d.ts.map

package/esm/util/checks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checks.d.ts","sourceRoot":"src/","sources":["util/checks.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,WAe/B;AAED,eAAO,MAAM,QAAQ,GAAI,MAAC,KAAG,CAAC,IAAI,MAA+B,CAAC;AAClE,eAAO,MAAM,QAAQ,GAAI,MAAC,KAAG,CAAC,IAAI,MAA6B,CAAC;AAChE,eAAO,MAAM,SAAS,GAAI,QAAG,KAAG,GAAG,IAAI,OAAwB,CAAC;AAChE,eAAO,MAAM,UAAU,GAAI,QAAG,KAAG,GAAG,IAAI,QAAqC,CAAC;AAC9E,eAAO,MAAM,WAAW,GAAI,QAAG,KAAG,GAAG,IAAI,SAA8B,CAAC;AACxE,eAAO,MAAM,KAAK,GAAI,QAAG,KAAG,GAAG,IAAI,IAAI,GAAG,SAAwB,CAAC;AAEnE,eAAO,MAAM,QAAQ,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,YAAkC,CAAC;AAEhF,eAAO,MAAM,aAAa,GAAI,GAAG,MAAM,EAAE,KAAK,MAAM,WAGnD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,SAAS,MAAM,EAAE,QAAQ,MAAM,EAAE,KAAK,MAAM,YAGpE,CAAC"}

package/esm/util/checks.js

@@ -0,0 +1,36 @@
+export function arraysEqual(a, b) {
+    if (a == undefined || b == undefined)
+        return false;
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (a.length !== b.length)
+        return false;
+    // If you don't care about the order of the elements inside
+    // the array, you should sort both arrays here.
+    // Please note that calling sort on an array will modify that array.
+    // you might want to clone your array first.
+    for (var i = 0; i < a.length; ++i) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+export const isNumber = (a) => typeof a === "number";
+export const isObject = (a) => a instanceof Object;
+export const isBoolean = (arg) => arg === !!arg;
+export const isFunction = (val) => typeof val === "function";
+export const isUndefined = (val) => val === undefined;
+export const isNil = (val) => val == null;
+export const sameSign = (a, b) => Math.sign(a) === Math.sign(b);
+export const normalizeSign = (v, EPS) => {
+    if (Math.abs(v) < EPS)
+        return 0;
+    return Math.sign(v);
+};
+export const willFlip = (current, factor, EPS) => {
+    const next = current * factor;
+    return normalizeSign(current, EPS) !== normalizeSign(next, EPS);
+};
+//# sourceMappingURL=checks.js.map

package/esm/util/checks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checks.js","sourceRoot":"src/","sources":["util/checks.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC;IAC9B,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS;QAAE,OAAO,KAAK,CAAC;IACnD,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACzB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,KAAK,CAAC;IACzC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAExC,2DAA2D;IAC3D,+CAA+C;IAC/C,oEAAoE;IACpE,4CAA4C;IAE5C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;QAClC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAAE,OAAO,KAAK,CAAC;IAClC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC,EAAe,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC;AAClE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,YAAY,MAAM,CAAC;AAChE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,EAAkB,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC;AAChE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAG,EAAmB,EAAE,CAAC,OAAO,GAAG,KAAK,UAAU,CAAC;AAC9E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAG,EAAoB,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC;AACxE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,EAA2B,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC;AAEnE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAEhF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,CAAS,EAAE,GAAW,EAAE,EAAE;IACtD,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG;QAAE,OAAO,CAAC,CAAC;IAChC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,OAAe,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACvE,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9B,OAAO,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,KAAK,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AAClE,CAAC,CAAC"}

package/esm/util/clipboard.d.ts

@@ -0,0 +1,7 @@
+import { Img } from "../shapes";
+import { Canvas } from "Canvas";
+import { CanvasHistory } from "history";
+export declare const probablySupportsClipboardWriteText: () => boolean;
+export declare function copy(selected: Img[], clipboardEvent?: ClipboardEvent): Promise<void>;
+export declare function paste(clientX: number, clientY: number, canvas: Canvas, history: CanvasHistory, isWorldCoord?: boolean): Promise<void>;
+//# sourceMappingURL=clipboard.d.ts.map

package/esm/util/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"src/","sources":["util/clipboard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAkBxC,eAAO,MAAM,kCAAkC,eAE9C,CAAC;AAIF,wBAAsB,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,cAAc,CAAC,EAAE,cAAc,iBAsC1E;AA2CD,wBAAsB,KAAK,CACzB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,aAAa,EACtB,YAAY,GAAE,OAAc,iBAqF7B"}

package/esm/util/clipboard.js

@@ -0,0 +1,146 @@
+import { convertToPNG, getWorldCoords } from ".";
+import { makeMultiAddChildCommand } from "../manager/SceneCommand";
+const acceptedPasteMimeType = ["image/", "text/plain"];
+export const probablySupportsClipboardWriteText = () => {
+    return "clipboard" in navigator && "writeText" in navigator.clipboard;
+};
+// the original copying method involved writing to clipboard API which can take a long time when writing multiple images
+// opted for in canvas only copying, which is faster
+export async function copy(selected, clipboardEvent) {
+    const dataStored = {
+        type: "infinite_canvas",
+        elements: selected.map((img) => ({
+            src: img.src,
+            x: img.x,
+            y: img.y,
+            sx: img.sx,
+            sy: img.sy,
+        })),
+    };
+    const json = JSON.stringify(dataStored);
+    const clipboardItem = new ClipboardItem({
+        "text/plain": new Blob([json], { type: "text/plain" }),
+    });
+    if (probablySupportsClipboardWriteText()) {
+        try {
+            await navigator.clipboard.write([clipboardItem]);
+            return;
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    try {
+        if (clipboardEvent) {
+            clipboardEvent.clipboardData?.setData("text/plain", json);
+            return;
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+    if (!copyTextViaExecCommand(json)) {
+        throw new Error("Error copying to clipboard.");
+    }
+}
+function copyTextViaExecCommand(text) {
+    // execCommand doesn't allow copying empty strings, so if we're
+    // clearing clipboard using this API, we must copy at least an empty char
+    if (!text) {
+        text = " ";
+    }
+    const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+    const textarea = document.createElement("textarea");
+    textarea.style.border = "0";
+    textarea.style.padding = "0";
+    textarea.style.margin = "0";
+    textarea.style.position = "absolute";
+    textarea.style[isRTL ? "right" : "left"] = "-9999px";
+    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    textarea.style.top = `${yPosition}px`;
+    textarea.style.fontSize = "12pt";
+    textarea.setAttribute("readonly", "");
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    let success = false;
+    try {
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+        success = document.execCommand("copy");
+    }
+    catch (error) {
+        console.error(error);
+    }
+    textarea.remove();
+    return success;
+}
+export async function paste(clientX, clientY, canvas, history, isWorldCoord = true) {
+    // check if there is anything from your clipboard to paste from
+    const items = await navigator.clipboard.read();
+    const types = items[0].types;
+    const [wx, wy] = isWorldCoord
+        ? [clientX, clientY]
+        : getWorldCoords(clientX, clientY, canvas);
+    for (const type of types) {
+        const allowed = acceptedPasteMimeType.find((allowed) => allowed.endsWith("/") ? type.startsWith(allowed) : type === allowed);
+        if (!allowed)
+            continue;
+        const blob = await items[0].getType(type);
+        try {
+            if (type === "text/plain") {
+                const data = JSON.parse(await blob.text());
+                if (data.elements.length === 0)
+                    return;
+                let minX = Infinity, minY = Infinity;
+                for (const el of data.elements) {
+                    if (el.x < minX)
+                        minX = el.x;
+                    if (el.y < minY)
+                        minY = el.y;
+                }
+                const images = await Promise.all(data.elements.map((element) => canvas.addImageToCanvas(element.src, wx + element.x - minX, wy + element.y - minY, element.sx, element.sy)));
+                history.push(makeMultiAddChildCommand(canvas, images));
+                return;
+            }
+        }
+        catch (err) {
+            console.error("Failed to parse clipboard data", err);
+            continue;
+        }
+        let base64;
+        if (type.startsWith("image/svg")) {
+            try {
+                const svgText = await blob.text();
+                base64 = await convertToPNG(`data:image/svg+xml;base64,${btoa(svgText)}`);
+            }
+            catch (err) {
+                console.error("SVG conversion failed", err);
+                continue;
+            }
+        }
+        else {
+            try {
+                base64 = await new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onloadend = () => resolve(reader.result);
+                    reader.onerror = reject;
+                    reader.readAsDataURL(blob);
+                });
+            }
+            catch (err) {
+                console.error("Image read failed", err);
+                continue;
+            }
+        }
+        try {
+            const img = await canvas.addImageToCanvas(base64, wx, wy);
+            history.push(makeMultiAddChildCommand(canvas, [img]));
+            return;
+        }
+        catch (err) {
+            console.error("Failed to add image to canvas", err);
+            continue;
+        }
+    }
+}
+//# sourceMappingURL=clipboard.js.map

package/esm/util/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","sourceRoot":"src/","sources":["util/clipboard.ts"],"names":[],"mappings":"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"}

package/esm/util/color.d.ts

@@ -0,0 +1,4 @@
+export declare const BASE_BLUE: [number, number, number, number];
+export declare const LIGHT_BLUE: [number, number, number, number];
+export declare const MARQUEE_BLUE: [number, number, number, number];
+//# sourceMappingURL=color.d.ts.map

package/esm/util/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"src/","sources":["util/color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAwB,CAAC;AAChF,eAAO,MAAM,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAEvD,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAEzD,CAAC"}

package/esm/util/color.js

@@ -0,0 +1,8 @@
+export const BASE_BLUE = [0.33, 0.6, 0.95, 1];
+export const LIGHT_BLUE = [
+    0.33, 0.6, 0.95, 0.6,
+];
+export const MARQUEE_BLUE = [
+    0.33, 0.6, 0.95, 0.4,
+];
+//# sourceMappingURL=color.js.map

package/esm/util/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"src/","sources":["util/color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAqC,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,UAAU,GAAqC;IAC1D,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;CACrB,CAAC;AACF,MAAM,CAAC,MAAM,YAAY,GAAqC;IAC5D,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;CACrB,CAAC"}

package/esm/util/customEventType.d.ts

@@ -0,0 +1,35 @@
+export declare const ContextMenuEvent: {
+    readonly Open: "opencontextmenu";
+    readonly Close: "closecontextmenu";
+};
+export declare const CanvasEvent: {
+    readonly Dirty: "dirty";
+    readonly Save: "save";
+    readonly SelectionChanged: "selectionchanged";
+    readonly Render: "render";
+    readonly Resize: "resize";
+    readonly Zoom: "zoom";
+    readonly ModeChange: "modechange";
+    readonly HistoryChange: "historychange";
+    readonly PointerDown: "pointerdown";
+    readonly PointerUp: "pointerup";
+    readonly PointerMove: "pointermove";
+    readonly ImageAdded: "imageadded";
+    readonly ImageRemoved: "imageremoved";
+    readonly Change: "statechange";
+};
+export declare const CustomClipboardEvent: {
+    readonly Copy: "copy";
+    readonly Cut: "cut";
+    readonly Paste: "paste";
+};
+export declare const LoaderEvent: {
+    readonly start: "startloading";
+    readonly done: "completeloading";
+};
+export declare const SaveEvent: {
+    readonly Save: "save";
+    readonly SaveCompleted: "savecompleted";
+    readonly SaveFailed: "savefailed";
+};
+//# sourceMappingURL=customEventType.d.ts.map

package/esm/util/customEventType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customEventType.d.ts","sourceRoot":"src/","sources":["util/customEventType.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC;AAEX,eAAO,MAAM,SAAS;;;;CAIZ,CAAC"}

package/esm/util/customEventType.js

@@ -0,0 +1,35 @@
+export const ContextMenuEvent = {
+    Open: "opencontextmenu",
+    Close: "closecontextmenu",
+};
+export const CanvasEvent = {
+    Dirty: "dirty",
+    Save: "save",
+    SelectionChanged: "selectionchanged",
+    Render: "render",
+    Resize: "resize",
+    Zoom: "zoom",
+    ModeChange: "modechange",
+    HistoryChange: "historychange",
+    PointerDown: "pointerdown",
+    PointerUp: "pointerup",
+    PointerMove: "pointermove",
+    ImageAdded: "imageadded",
+    ImageRemoved: "imageremoved",
+    Change: "statechange",
+};
+export const CustomClipboardEvent = {
+    Copy: "copy",
+    Cut: "cut",
+    Paste: "paste",
+};
+export const LoaderEvent = {
+    start: "startloading",
+    done: "completeloading",
+};
+export const SaveEvent = {
+    Save: "save",
+    SaveCompleted: "savecompleted",
+    SaveFailed: "savefailed",
+};
+//# sourceMappingURL=customEventType.js.map

package/esm/util/customEventType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customEventType.js","sourceRoot":"src/","sources":["util/customEventType.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,kBAAkB;CACjB,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,gBAAgB,EAAE,kBAAkB;IACpC,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,YAAY;IACxB,aAAa,EAAE,eAAe;IAC9B,WAAW,EAAE,aAAa;IAC1B,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;IAC1B,UAAU,EAAE,YAAY;IACxB,YAAY,EAAE,cAAc;IAC5B,MAAM,EAAE,aAAa;CACb,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,iBAAiB;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,UAAU,EAAE,YAAY;CAChB,CAAC"}

package/esm/util/files.d.ts

@@ -0,0 +1,19 @@
+import { SerializedCanvas } from "../serializer";
+import { Img } from "../shapes";
+export declare function previewImage(file: File): Promise<string | ArrayBuffer>;
+export declare function hashStringToId(str: string): Promise<string>;
+/**
+ * Extract mimetype from base64 string
+ */
+export declare function getMimeType(data: string): string;
+export declare function addImages(files: FileList, addToCanvas: (src: string) => Promise<Img>): Promise<any[]>;
+export declare function downloadJSON(filename: string, data: SerializedCanvas): void;
+export declare function readJSONFile<T = unknown>(file: File): Promise<T>;
+export declare function convertToPNG(src: string, quality?: number): Promise<string>;
+export declare function mergeMultiImg(imgs: Img[]): Promise<string>;
+export declare function mergeImagesToCanvas(images: Img[]): Promise<{
+    mergedCanvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+}>;
+//# sourceMappingURL=files.d.ts.map

package/esm/util/files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.d.ts","sourceRoot":"src/","sources":["util/files.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAEhC,wBAAsB,YAAY,CAAC,IAAI,EAAE,IAAI,iCAU5C;AAiBD,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAMjE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,UAGvC;AAED,wBAAsB,SAAS,CAC7B,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,kBAmB3C;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,QAWpE;AAED,wBAAsB,YAAY,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAGtE;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,SAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAgBxE;AAED,wBAAsB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CA4ChE;AAED,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,GAAG,EAAE,GACZ,OAAO,CAAC;IAAE,YAAY,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAgD7E"}

package/esm/util/files.js

@@ -0,0 +1,182 @@
+export async function previewImage(file) {
+    return new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+            resolve(e.target.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+const PERMISSIBLE_IMAGE_TYPES = [
+    "image/webp",
+    "image/png",
+    "image/jpeg",
+    "image/jpg",
+    "image/svg+xml",
+    "image/avif",
+    "image/gif", // will be rendered as a still image
+    "image/apng", // will be rendered as a still image
+];
+function isPermissibleImageType(fileType) {
+    return PERMISSIBLE_IMAGE_TYPES.includes(fileType);
+}
+export async function hashStringToId(str) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(str);
+    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+/**
+ * Extract mimetype from base64 string
+ */
+export function getMimeType(data) {
+    const match = /^data:([^;]+);base64,/.exec(data);
+    return match ? match[1] : undefined;
+}
+export async function addImages(files, addToCanvas) {
+    const images = [];
+    if (files.length > 0) {
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            if (isPermissibleImageType(file.type)) {
+                try {
+                    const src = await previewImage(file);
+                    if (typeof src === "string") {
+                        images.push(await addToCanvas(src));
+                    }
+                    else
+                        console.error("Image not added");
+                }
+                catch {
+                    console.error("Failed to copy image.");
+                }
+            }
+        }
+    }
+    return images;
+}
+export function downloadJSON(filename, data) {
+    const text = JSON.stringify(data, null, 2);
+    const blob = new Blob([text], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+}
+export async function readJSONFile(file) {
+    const text = await file.text();
+    return JSON.parse(text);
+}
+export function convertToPNG(src, quality = 1.0) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0);
+            const pngDataUrl = canvas.toDataURL("image/png", quality);
+            resolve(pngDataUrl);
+        };
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+export async function mergeMultiImg(imgs) {
+    const startX = getSmallestImgX(imgs);
+    const startY = getSmallestImgY(imgs);
+    const endX = getEndX(imgs);
+    const endY = getEndY(imgs);
+    const canvas = document.createElement("canvas");
+    canvas.width = endX - startX;
+    canvas.height = endY - startY;
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // consider transformation as well
+    const promises = imgs.map(async (img) => {
+        return new Promise(async (resolve, reject) => {
+            try {
+                const innerImg = new Image();
+                innerImg.onload = () => {
+                    ctx.drawImage(innerImg, 0, 0, img.width, img.height, img.x - startX, img.y - startY, img.width * img.sx, img.height * img.sy);
+                    resolve();
+                };
+                innerImg.onerror = reject;
+                innerImg.src = img.src;
+            }
+            catch (err) {
+                console.error(err);
+                reject(err);
+            }
+        });
+    });
+    await Promise.all(promises);
+    const data = canvas.toDataURL("image/png");
+    return data;
+}
+export async function mergeImagesToCanvas(images) {
+    if (images.length === 0) {
+        throw new Error("No images to merge.");
+    }
+    // Compute bounding box for all images
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const img of images) {
+        minX = Math.min(minX, img.x);
+        minY = Math.min(minY, img.y);
+        maxX = Math.max(maxX, img.x + img.width);
+        maxY = Math.max(maxY, img.y + img.height);
+    }
+    const width = Math.ceil(maxX - minX);
+    const height = Math.ceil(maxY - minY);
+    // Create offscreen canvas
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        throw new Error("Could not get 2D context");
+    // Draw each image at its relative position
+    await Promise.all(images.map((img) => {
+        return new Promise((resolve, reject) => {
+            const imageEl = new window.Image();
+            imageEl.onload = () => {
+                ctx.drawImage(imageEl, img.x - minX, img.y - minY, img.width, img.height);
+                resolve();
+            };
+            imageEl.onerror = reject;
+            imageEl.src = img.src;
+        });
+    }));
+    return { mergedCanvas: canvas, width, height };
+}
+function getSmallestImgX(imgs) {
+    return [...imgs].sort((a, b) => {
+        return a.x - b.x;
+    })[0].x;
+}
+function getSmallestImgY(imgs) {
+    return [...imgs].sort((a, b) => {
+        return a.y - b.y;
+    })[0].y;
+}
+function getEndX(imgs) {
+    const endImg = [...imgs].sort((a, b) => {
+        return b.x + b.width * b.sx - (a.x + a.width * a.sx);
+    })[0];
+    return endImg.x + endImg.width * endImg.sx;
+}
+function getEndY(imgs) {
+    const endImg = [...imgs].sort((a, b) => {
+        return b.y + b.height * b.sy - (a.y + a.height * a.sy);
+    })[0];
+    return endImg.y + endImg.height * endImg.sy;
+}
+//# sourceMappingURL=files.js.map