@reffy/infinite-canvas 0.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2025] [Vincent Sit]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# Reffy Infinite Canvas
+
+A TypeScript Web Component (`<infinite-canvas>`) that provides an infinite, GPU-accelerated canvas for placing and manipulating reference images. Built with Lit + WebGL, the canvas enables selection, context menu, history (undo/redo), and a default persistent storage (IndexedDB + LocalStorage).
+
+- Web Component: `<infinite-canvas>` renders a full-screen canvas and starts a render loop.
+- Engine: WebGL-backed renderer with Grid, Img, Rect shapes and z-ordering.
+- Interaction: Selection, flip, align, normalize, pointer/key/context menu managers.
+- Persistence: Auto-save and manual import/export to JSON; deduplicated image storage via hashing.
+- History: Composite commands push for undo/redo across interactions.
+
+## A word from the developer
+
+Before you carry on to read the rest of the documentation, I would like to first state that this project was heavily influenced by the following open-sourced projects:
+
+- [Excalidraw](https://excalidraw.com/)
+- [An infinite canvas tutorial](https://infinitecanvas.cc/)
+
+They are both incredible resources and have sped up my own learning and I highly recommend browsing through their materials. I am still learning as I go and working on this project.
+
+Additionally, I referenced [PureRef](https://www.pureref.com/) for a lot of the available functions. In fact, as the project continued development, it became clear that I wanted to create a version of PureRef, but for the web.
+
+Happy learning!
+
+## Aim of the project
+
+While working on a separate, but related project, I was making a lot of progress leveraging Excalidraw and enjoying the fact that I did not have to think or write my own implementation. However, Excalidraw, despite how fantastic it is, came coupled with a predetermined setup (toolbars and such) and a lot of functions that a pure image reference board would not need.
+
+Thus, I made the challenging decision to try to write my own. Reffy Infinite Canvas aims to expose the APIs, enabling developers to customise their own canvas toolbars.
+
+While not everything is customisable, it does offer more options than Excalidraw, achieving part of the initial goal.
+
+## Installation
+
+```powershell
+npm i reffy-infinite-canvas
+```
+
+## API
+
+To utilise the API, create the canvas and set up some way for the canvas to be discoverable through JS/TS.
+
+```js
+const el = document.querySelector('#canvas') as InfiniteCanvasElement;
+
+InfiniteCanvasAPI.forElement(el).then(api => {
+    // example: toggling the grid mode for the canvas
+    const modeButton = document.getElementById('mode-button') as HTMLButtonElement;
+    modeButton.onclick  = api.toggleMode.bind(api);
+};
+```
+
+## Image transformation
+
+Available image transformations:
+
+- Flip
+- Normalize (by first selected and average)
+- Align
+- Scale
+- Move
+
+## Persistent storage
+
+While there is a default set up for users to pick up and go, you can use the API to connect up a different source to write and read from.
+
+Take a look at the code snippet below for an example set up.
+
+```typescript
+// sample code
+const el = document.querySelector('#canvas') as InfiniteCanvasElement;
+
+InfiniteCanvasAPI.forElement(el).then(api => {
+
+    const canvasStorage: CanvasStorage = { /** Add your custom canvas storage in here */ };
+
+    const fileStorage: FileStorage = { /** Add your custom local storage for file here */ };
+
+    el.assignCanvasStorage(canvasStorage);
+    el.assignFileStorage(fileStorage);
+};
+```
+
+The design for image storage is styled after Excalidraw. This means breaking the canvas data into two parts.
+
+- `FileStorage` is how we store the image data. In case of multiple copies of the same image, the storage is made more efficient by relying on hashing the image data as the file id, by which the canvas data uses to get the image data.
+- `CanvasStorage` is the layout of the canvas. This means camera position, keeping track of the images placed onto the canvas, their positions, and their transformation.
+
+The canvas is reconstructed each time you load the canvas.
+
+When setting up the canvasStorage, you can add the custom canvas storage and add a frequency, measured in ms. The default is 300000 ms (or, 5 minutes).
+
+### TODO:
+
+- Add method to allow custom setting of how frequent auto save should be

package/esm/API.d.ts

@@ -0,0 +1,21 @@
+import { CanvasStorage } from "./storage";
+import { InfiniteCanvasElement } from "./Component";
+export declare class InfiniteCanvasAPI {
+    private el;
+    constructor(el: InfiniteCanvasElement);
+    static forElement(selectorOrElement: string | InfiniteCanvasElement): Promise<InfiniteCanvasAPI>;
+    /**
+     * Without assigning storage, the canvas will not save any data
+     * @param storage
+     * @param saveFrequency How often auto save occurs in ms
+     */
+    assignCanvasStorage(storage: CanvasStorage, saveFrequency?: number): this;
+    zoomIn(): Promise<void>;
+    zoomOut(): Promise<void>;
+    toggleMode(): Promise<void>;
+    addImageFromLocal(fileList: FileList): Promise<void>;
+    exportCanvas(filename?: string): Promise<void>;
+    importCanvas(fileList: FileList): Promise<void>;
+    clearCanvas(): Promise<void>;
+}
+//# sourceMappingURL=API.d.ts.map

package/esm/API.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"API.d.ts","sourceRoot":"src/","sources":["API.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEpD,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,EAAE,CAAwB;gBAEtB,EAAE,EAAE,qBAAqB;WAcxB,UAAU,CACrB,iBAAiB,EAAE,MAAM,GAAG,qBAAqB,GAChD,OAAO,CAAC,iBAAiB,CAAC;IAmB7B;;;;OAIG;IACH,mBAAmB,CAAC,OAAO,EAAE,aAAa,EAAE,aAAa,GAAE,MAAa;IAKlE,MAAM;IAKN,OAAO;IAIP,UAAU;IAIV,iBAAiB,CAAC,QAAQ,EAAE,QAAQ;IAepC,YAAY,CAAC,QAAQ,CAAC,EAAE,MAAM;IAI9B,YAAY,CAAC,QAAQ,EAAE,QAAQ;IAK/B,WAAW;CAGlB"}

package/esm/API.js

@@ -0,0 +1,74 @@
+export class InfiniteCanvasAPI {
+    constructor(el) {
+        if (!el)
+            throw new Error("InfiniteCanvasElement is required");
+        this.el = el;
+        this.assignCanvasStorage = this.assignCanvasStorage.bind(this);
+        this.zoomIn = this.zoomIn.bind(this);
+        this.zoomOut = this.zoomOut.bind(this);
+        this.toggleMode = this.toggleMode.bind(this);
+        this.addImageFromLocal = this.addImageFromLocal.bind(this);
+        this.exportCanvas = this.exportCanvas.bind(this);
+        this.importCanvas = this.importCanvas.bind(this);
+        this.clearCanvas = this.clearCanvas.bind(this);
+    }
+    static async forElement(selectorOrElement) {
+        let el;
+        if (typeof selectorOrElement === "string") {
+            await customElements.whenDefined("infinite-canvas");
+            el = document.querySelector(selectorOrElement);
+        }
+        else {
+            el = selectorOrElement;
+        }
+        if (!el)
+            throw new Error("infinite-canvas element not found");
+        if (!el.canvas) {
+            await new Promise((res) => el.addEventListener("load", () => res(), { once: true }));
+        }
+        return new InfiniteCanvasAPI(el);
+    }
+    /**
+     * Without assigning storage, the canvas will not save any data
+     * @param storage
+     * @param saveFrequency How often auto save occurs in ms
+     */
+    assignCanvasStorage(storage, saveFrequency = 3000) {
+        this.el.assignCanvasStorage(storage, saveFrequency);
+        return this;
+    }
+    async zoomIn() {
+        console.log("zooming");
+        this.el.zoomIn();
+    }
+    async zoomOut() {
+        this.el.zoomOut();
+    }
+    async toggleMode() {
+        this.el.togglePointerMode();
+    }
+    async addImageFromLocal(fileList) {
+        // Validate all files are images before proceeding
+        if (!fileList || fileList.length === 0)
+            return;
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList[i];
+            if (!file || !file.type || !file.type.startsWith("image/")) {
+                throw new Error("Only specific image files are supported. Please select image files only.");
+            }
+        }
+        await this.el.addImages(fileList);
+    }
+    async exportCanvas(filename) {
+        this.el.exportCanvas(filename);
+    }
+    async importCanvas(fileList) {
+        if (!fileList || fileList.length !== 1)
+            return;
+        await this.el.importCanvas(fileList);
+    }
+    async clearCanvas() {
+        this.el.clearCanvas();
+    }
+}
+//# sourceMappingURL=API.js.map

package/esm/API.js.map

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

package/esm/Canvas.d.ts

@@ -0,0 +1,69 @@
+import { Img, Renderable, Grid } from "./shapes";
+import { SelectionManager, PointerEventManager, ContextMenuManager } from "./manager";
+import { Camera } from "./camera";
+import { CanvasHistory } from "./history";
+import { SerializedCanvas } from "./serializer";
+import EventEmitter from "eventemitter3";
+import { ImageFileMetadata } from "./storage";
+export declare class Canvas extends Renderable {
+    #private;
+    writeToStorage: () => void;
+    saveImgFileToStorage: (data: string) => Promise<string | number | null>;
+    getContainerDimension: () => number[];
+    getWorldsCoordsFromCanvas: (x: number, y: number) => number[];
+    private orderDirty;
+    private renderList;
+    markOrderDirty(): void;
+    get gl(): WebGLRenderingContext;
+    get grid(): Grid;
+    get history(): CanvasHistory;
+    get eventHub(): EventEmitter<string | symbol, any>;
+    get pointerEventManager(): PointerEventManager;
+    get selectionManager(): SelectionManager;
+    get contextMenuManager(): ContextMenuManager;
+    get canvas(): HTMLCanvasElement;
+    get camera(): Camera;
+    get isGlobalClick(): boolean;
+    set isGlobalClick(val: boolean);
+    get basicShapeProgram(): WebGLProgram;
+    constructor(canvas: HTMLCanvasElement, history: CanvasHistory, eventHub: EventEmitter, writeToStorage: () => void, saveImgFileToStorage: (data: string) => Promise<string | number | null>, getContainerDimension: () => number[]);
+    engine(): this;
+    get totalNumberOfChildren(): number;
+    get numberOfChildrenRendered(): number;
+    appendChild<T extends Renderable>(child: T): T;
+    removeChild(child: Renderable): void;
+    getChild(id: number): Renderable;
+    updateWorldMatrix(): void;
+    render(): void;
+    destroy(): void;
+    getDOM(): HTMLCanvasElement;
+    assignEventListener(type: string, fn: (() => void) | ((e: any) => void), options?: boolean | AddEventListenerOptions): void;
+    hitTest(x: number, y: number): boolean;
+    addImageToCanvas(src: string, x: number, y: number, sx?: number, sy?: number, center?: boolean): Promise<Img>;
+    exportState(): SerializedCanvas;
+    importState(data: SerializedCanvas, getFile: (fileId: string | number) => Promise<ImageFileMetadata>): Promise<Canvas>;
+    clearChildren(): void;
+    toggleGrid(): void;
+    getSelected(): Img[];
+    setShapeZOrder(toFront?: boolean): void;
+    changeMode(): void;
+    updateZoomByFixedAmount(direction?: 1 | -1): void;
+    getBoundingClientRect(): DOMRect;
+    private static webglStats;
+    private wrapWebGLContext;
+    static getWebGLStats(): {
+        buffersLeaked: number;
+        programsLeaked: number;
+        texturesLeaked: number;
+        shadersLeaked: number;
+        buffersCreated: number;
+        buffersDeleted: number;
+        programsCreated: number;
+        programsDeleted: number;
+        texturesCreated: number;
+        texturesDeleted: number;
+        shadersCreated: number;
+        shadersDeleted: number;
+    };
+}
+//# sourceMappingURL=Canvas.d.ts.map

package/esm/Canvas.d.ts.map

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