@reffy/infinite-canvas 0.0.10 → 0.0.12

package/esm/Component.js

@@ -4,18 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _InfiniteCanvasElement_canvas, _InfiniteCanvasElement_eventHub, _InfiniteCanvasElement_resizeObserver, _InfiniteCanvasElement_history, _InfiniteCanvasElement_fileStorage, _InfiniteCanvasElement_canvasStorage, _InfiniteCanvasElement_saveFrequency, _InfiniteCanvasElement_timeoutId, _InfiniteCanvasElement_intervalId, _InfiniteCanvasElement_rootDiv, _InfiniteCanvasElement_onChange, _InfiniteCanvasElement_singleImageMenuOptions, _InfiniteCanvasElement_multiImageMenuOptions, _InfiniteCanvasElement_canvasImageMenuOptions;
 import { CanvasHistory } from "./history";
 import { Canvas } from "./Canvas";
 import { LitElement, css } from "lit";
@@ -28,7 +16,6 @@ import { addContextMenu, clearContextMenu, createBasicImageMenuOptions, createCa
 import { DefaultIndexedDbStorage, DefaultLocalStorage, } from "./storage";
 import EventEmitter from "eventemitter3";
 import { hideLoader, showLoader } from "./loader";
-import Stats from "stats.js";
 let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
     constructor() {
         super(...arguments);
@@ -36,20 +23,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
         this.name = "Reffy";
         /** There are two acceptable options: fullscreen (default) and windowed. Fullscreen mode will ignore the width and height you inputed. */
         this.displayMode = "fullscreen";
-        _InfiniteCanvasElement_canvas.set(this, void 0);
-        _InfiniteCanvasElement_eventHub.set(this, void 0);
-        _InfiniteCanvasElement_resizeObserver.set(this, void 0);
-        _InfiniteCanvasElement_history.set(this, void 0);
-        _InfiniteCanvasElement_fileStorage.set(this, void 0);
-        _InfiniteCanvasElement_canvasStorage.set(this, void 0);
-        _InfiniteCanvasElement_saveFrequency.set(this, 300000);
-        _InfiniteCanvasElement_timeoutId.set(this, void 0);
-        _InfiniteCanvasElement_intervalId.set(this, void 0);
-        _InfiniteCanvasElement_rootDiv.set(this, void 0);
-        _InfiniteCanvasElement_onChange.set(this, void 0);
-        _InfiniteCanvasElement_singleImageMenuOptions.set(this, void 0);
-        _InfiniteCanvasElement_multiImageMenuOptions.set(this, void 0);
-        _InfiniteCanvasElement_canvasImageMenuOptions.set(this, void 0);
+        this.#saveFrequency = 300000;
         // Global helper
         this.handleGlobalPointerDown = (e) => {
             if (!this.contains(e.target) &&
@@ -58,29 +32,179 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
             }
         };
     }
+    static { this.properties = {
+        name: { type: String, reflect: true },
+        width: { type: String, reflect: true },
+        height: { type: String, reflect: true },
+        displayMode: { type: String, reflect: true },
+    }; }
+    static { this.styles = css `
+    :host {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .context-menu {
+      position: absolute;
+      background: white;
+      min-width: 180px;
+      background: var(--menu-bg, #fff);
+      border-radius: 6px;
+      border: 1px solid var(--menu-border, #9f9f9fff);
+      box-sizing: border-box;
+      padding: 6px 0;
+      display: flex;
+      gap: 2px;
+      flex-direction: column;
+      font-family: system-ui, sans-serif;
+      animation: fadeInMenu 0.13s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: scroll;
+    }
+
+    @keyframes fadeInMenu {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .context-menu button {
+      all: unset;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 8px 18px;
+      font-size: 15px;
+      color: var(--menu-fg, #222);
+      background: none;
+      cursor: pointer;
+      transition:
+        background 0.1s,
+        color 0.1s;
+      user-select: none;
+      outline: none;
+    }
+
+    .context-menu button:hover,
+    .context-menu button:focus-visible {
+      background: var(--menu-hover, #c7d5eaff);
+      color: var(--menu-accent, #155290ff);
+    }
+
+    .context-menu button:active {
+      background: var(--menu-active, #e3eaf3);
+    }
+
+    .context-menu button[disabled] {
+      color: #aaa;
+      cursor: not-allowed;
+      background: none;
+    }
+
+    .context-menu-divider {
+      height: 1px;
+      background: var(--menu-divider, #c7d5eaff);
+      margin: 6px 12px;
+      border: none;
+    }
+
+    canvas {
+      width: 100%;
+      height: 100%;
+      outline: none;
+      padding: 0;
+      margin: 0;
+      touch-action: none;
+      display: block;
+    }
+
+    .canvas-loader {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.7);
+      z-index: 1000;
+      pointer-events: all;
+    }
+
+    .canvas-loader-spinner {
+      width: 48px;
+      height: 48px;
+      border: 6px solid #e0e0e0;
+      border-top: 6px solid #1976d2;
+      border-radius: 50%;
+      animation: canvas-loader-spin 1s linear infinite;
+      margin-bottom: 16px;
+    }
+
+    @keyframes canvas-loader-spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .canvas-loader-message {
+      font-size: 1.1rem;
+      color: #333;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 8px 16px;
+      border-radius: 4px;
+      margin-top: 8px;
+      text-align: center;
+      max-width: 80%;
+      word-break: break-word;
+    }
+  `; }
+    #canvas;
+    #eventHub;
+    #resizeObserver;
+    #history;
+    #fileStorage;
+    #canvasStorage;
+    #saveFrequency;
+    #timeoutId;
+    #intervalId;
+    #onViewportResize;
+    #rootDiv;
+    #onChange;
+    #singleImageMenuOptions;
+    #multiImageMenuOptions;
+    #canvasImageMenuOptions;
     get singleImageMenuOptions() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_singleImageMenuOptions, "f");
+        return this.#singleImageMenuOptions;
     }
     get multiImageMenuOptions() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_multiImageMenuOptions, "f");
+        return this.#multiImageMenuOptions;
     }
     get canvasImageMenuOptions() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_canvasImageMenuOptions, "f");
+        return this.#canvasImageMenuOptions;
     }
     get canvas() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f");
+        return this.#canvas;
     }
     get onCanvasChange() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_onChange, "f");
+        return this.#onChange;
     }
     set onCanvasChange(fn) {
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_onChange, fn, "f");
+        this.#onChange = fn;
     }
     get eventHub() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f");
+        return this.#eventHub;
     }
     get rootDiv() {
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_rootDiv, "f");
+        return this.#rootDiv;
     }
     // Lifecycle
     connectedCallback() {
@@ -90,9 +214,10 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
     }
     disconnectedCallback() {
         document.removeEventListener("pointerdown", this.handleGlobalPointerDown, true);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_resizeObserver, "f")?.disconnect();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_resizeObserver, undefined, "f");
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").destroy();
+        window.removeEventListener("resize", this.#onViewportResize);
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = undefined;
+        this.#canvas.destroy();
         super.disconnectedCallback();
     }
     firstUpdated(_changedProperties) {
@@ -110,7 +235,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
             changed.has("displayMode");
         if (!sizeChanged)
             return;
-        const container = __classPrivateFieldGet(this, _InfiniteCanvasElement_rootDiv, "f");
+        const container = this.#rootDiv;
         const canvasEl = this.renderRoot.querySelector("canvas");
         if (container && canvasEl) {
             this.resizeCanvas(container, canvasEl);
@@ -118,12 +243,12 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
     }
     async initCanvas() {
         await this.warmUpStorage();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_history, new CanvasHistory(), "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_eventHub, new EventEmitter(), "f");
+        this.#history = new CanvasHistory();
+        this.#eventHub = new EventEmitter();
         const div = document.createElement("div");
         div.style.overflow = "hidden";
         this.renderRoot.appendChild(div);
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_rootDiv, div, "f");
+        this.#rootDiv = div;
         const canvas = document.createElement("canvas");
         // persistent state set up
         this.assignFileStorage = this.assignFileStorage.bind(this);
@@ -148,7 +273,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
             div.appendChild(canvas);
         }
         this.registerSignal();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_canvas, new Canvas(canvas, __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f"), __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f"), this.debounceSaveToCanvasStorage, this.saveImageFileMetadata, this.getContainerSize), "f");
+        this.#canvas = new Canvas(canvas, this.#history, this.#eventHub, this.debounceSaveToCanvasStorage, this.saveImageFileMetadata, this.getContainerSize);
         try {
             await this.restoreStateFromCanvasStorage();
         }
@@ -157,21 +282,15 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
         }
         // resize canvas to start
         this.resizeCanvas(div, canvas);
+        this.#onViewportResize = () => this.resizeCanvas(div, canvas);
+        window.addEventListener("resize", this.#onViewportResize);
         const basicImageMenuOptions = createBasicImageMenuOptions.bind(this)();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_singleImageMenuOptions, createSingleImageMenuOptions.bind(this)(basicImageMenuOptions.options), "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasImageMenuOptions, createCanvasImageMenuOptions.bind(this)(), "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_multiImageMenuOptions, createMultiImageMenuOptions.bind(this)(basicImageMenuOptions.options), "f");
+        this.#singleImageMenuOptions = createSingleImageMenuOptions.bind(this)(basicImageMenuOptions.options);
+        this.#canvasImageMenuOptions = createCanvasImageMenuOptions.bind(this)();
+        this.#multiImageMenuOptions = createMultiImageMenuOptions.bind(this)(basicImageMenuOptions.options);
         this.dispatchEvent(new Event("load"));
-        const stats = new Stats();
-        stats.showPanel(0);
-        if (!this.renderRoot.contains(stats.dom)) {
-            this.renderRoot.appendChild(stats.dom);
-        }
-        const animate = () => {
-            if (stats) {
-                stats.update();
-            }
-            __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").render();
+        const animate = async () => {
+            this.#canvas.render();
             requestAnimationFrame(animate);
         };
         animate();
@@ -200,6 +319,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
         // set the canvas to be as big as possible so there will never be a flickering resize problem
         let w = window.screen.width;
         let h = window.screen.height;
+        const rect = container.getBoundingClientRect();
         const targetWidthPx = Math.round(w * dpr);
         const targetHeightPx = Math.round(h * dpr);
         if (canvas.width !== targetWidthPx || canvas.height !== targetHeightPx) {
@@ -209,7 +329,6 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
         canvas.style.width = `${w}px`;
         canvas.style.height = `${h}px`;
         // sets up camera dimensions
-        const rect = container.getBoundingClientRect();
         this.canvas.camera.viewportX = rect.x;
         this.canvas.camera.viewportY = rect.y;
         this.canvas.camera.state.setHeight(rect.height);
@@ -217,25 +336,25 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
     }
     // Register signal
     registerSignal() {
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(LoaderEvent.start, showLoader.bind(this), "spinner");
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(LoaderEvent.done, hideLoader.bind(this));
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(ContextMenuEvent.Open, this.addContextMenu);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(ContextMenuEvent.Close, this.clearContextMenu);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(CanvasEvent.Change, () => {
-            if (__classPrivateFieldGet(this, _InfiniteCanvasElement_onChange, "f"))
-                __classPrivateFieldGet(this, _InfiniteCanvasElement_onChange, "f").call(this);
+        this.#eventHub.on(LoaderEvent.start, showLoader.bind(this), "spinner");
+        this.#eventHub.on(LoaderEvent.done, hideLoader.bind(this));
+        this.#eventHub.on(ContextMenuEvent.Open, this.addContextMenu);
+        this.#eventHub.on(ContextMenuEvent.Close, this.clearContextMenu);
+        this.#eventHub.on(CanvasEvent.Change, () => {
+            if (this.#onChange)
+                this.#onChange();
         });
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(SaveEvent.Save, this.saveToCanvasStorage);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(SaveEvent.SaveCompleted, () => { });
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(SaveEvent.SaveFailed, () => console.error("Failed to Save!"));
+        this.#eventHub.on(SaveEvent.Save, this.saveToCanvasStorage);
+        this.#eventHub.on(SaveEvent.SaveCompleted, () => { });
+        this.#eventHub.on(SaveEvent.SaveFailed, () => console.error("Failed to Save!"));
     }
     // need to check if this is good practice
     async warmUpStorage() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, new DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new DefaultIndexedDbStorage();
         }
         try {
-            await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").readAll();
+            await this.#fileStorage.readAll();
         }
         catch (err) {
             console.error("Storage warm-up failed", err);
@@ -245,9 +364,9 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
      * @returns An array containing the width and height of the container
      */
     getContainerSize() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_rootDiv, "f"))
+        if (!this.#rootDiv)
             return;
-        const rect = __classPrivateFieldGet(this, _InfiniteCanvasElement_rootDiv, "f").getBoundingClientRect();
+        const rect = this.#rootDiv.getBoundingClientRect();
         return [rect.width, rect.height];
     }
     // Storage & Persistence
@@ -255,17 +374,17 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
      * @param storage Canvas storage stores the positions of all the renderables
      * @param saveFrequency How often should auto save execute
      */
-    assignCanvasStorage(storage, saveFrequency = __classPrivateFieldGet(this, _InfiniteCanvasElement_saveFrequency, "f")) {
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasStorage, storage, "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_saveFrequency, saveFrequency, "f");
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_intervalId, "f") && clearInterval(__classPrivateFieldGet(this, _InfiniteCanvasElement_intervalId, "f"));
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_intervalId, setInterval(this.saveToCanvasStorage, __classPrivateFieldGet(this, _InfiniteCanvasElement_saveFrequency, "f")), "f");
+    assignCanvasStorage(storage, saveFrequency = this.#saveFrequency) {
+        this.#canvasStorage = storage;
+        this.#saveFrequency = saveFrequency;
+        this.#intervalId && clearInterval(this.#intervalId);
+        this.#intervalId = setInterval(this.saveToCanvasStorage, this.#saveFrequency);
     }
     /**
      * @param storage File storage captures the information about the image data that has previously been added. Made more efficient by using SHA of the image data for storage.
      */
     assignFileStorage(storage) {
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, storage, "f");
+        this.#fileStorage = storage;
     }
     /**
      * Duplicate images will not be written to the database
@@ -273,13 +392,13 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
      * @returns The unique ID that the image has been logged with. This is a hashed version of the image data URL
      */
     async saveImageFileMetadata(dataURL) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, new DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new DefaultIndexedDbStorage();
         }
         try {
             const id = await hashStringToId(dataURL);
-            if (!(await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").checkIfImageStored(id))) {
-                return await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").write(dataURL);
+            if (!(await this.#fileStorage.checkIfImageStored(id))) {
+                return await this.#fileStorage.write(dataURL);
             }
             else {
                 return id;
@@ -294,11 +413,11 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
      * @returns
      */
     async getImageFileMetadata(fileId) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, new DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new DefaultIndexedDbStorage();
         }
         try {
-            return await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").read(fileId);
+            return await this.#fileStorage.read(fileId);
         }
         catch (err) {
             console.error(err);
@@ -308,11 +427,11 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
      * @returns All file metadata saved in connected storage
      */
     async getAllImageFileMetdata() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, new DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new DefaultIndexedDbStorage();
         }
         try {
-            return await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").readAll();
+            return await this.#fileStorage.readAll();
         }
         catch (err) {
             console.error(err);
@@ -322,134 +441,134 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
      * Schedule the auto save to the canvas storage based on timer
      */
     debounceSaveToCanvasStorage(timeout = 1000) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasStorage, new DefaultLocalStorage(this.name), "f");
+        if (!this.#canvasStorage) {
+            this.#canvasStorage = new DefaultLocalStorage(this.name);
         }
-        clearTimeout(__classPrivateFieldGet(this, _InfiniteCanvasElement_timeoutId, "f"));
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_timeoutId, setTimeout(this.saveToCanvasStorage, timeout), "f");
+        clearTimeout(this.#timeoutId);
+        this.#timeoutId = setTimeout(this.saveToCanvasStorage, timeout);
     }
     async saveToCanvasStorage() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasStorage, new DefaultLocalStorage(this.name), "f");
+        if (!this.#canvasStorage) {
+            this.#canvasStorage = new DefaultLocalStorage(this.name);
         }
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f")
-            .write(serializeCanvas(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f")))
-            .then(() => __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(SaveEvent.SaveCompleted))
-            .catch(() => __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(SaveEvent.SaveFailed));
+        this.#canvasStorage
+            .write(serializeCanvas(this.#canvas))
+            .then(() => this.#eventHub.emit(SaveEvent.SaveCompleted))
+            .catch(() => this.#eventHub.emit(SaveEvent.SaveFailed));
     }
     async restoreStateFromCanvasStorage() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasStorage, new DefaultLocalStorage(this.name), "f");
+        if (!this.#canvasStorage) {
+            this.#canvasStorage = new DefaultLocalStorage(this.name);
         }
-        const dataAsString = await __classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f").read();
+        const dataAsString = await this.#canvasStorage.read();
         const data = JSON.parse(dataAsString);
         if (data) {
-            await deserializeCanvas(data, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), this.getImageFileMetadata);
+            await deserializeCanvas(data, this.#canvas, this.getImageFileMetadata);
         }
     }
     // Canvas API
     togglePointerMode() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").changeMode();
+        this.#canvas.changeMode();
     }
     toggleGrid() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").toggleGrid();
+        this.#canvas.toggleGrid();
     }
     zoomIn() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").updateZoomByFixedAmount(-1);
+        this.#canvas.updateZoomByFixedAmount(-1);
     }
     zoomOut() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").updateZoomByFixedAmount();
+        this.#canvas.updateZoomByFixedAmount();
     }
     async addImages(fileList) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        const rect = __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").getBoundingClientRect();
+        const rect = this.#rootDiv.getBoundingClientRect();
         const clientX = rect.left + rect.width / 2;
         const clientY = rect.top + rect.height / 2;
-        const [wx, wy] = getWorldCoords(clientX, clientY, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"));
-        const newImages = await innerAddImages(fileList, (src) => __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").addImageToCanvas(src, wx, wy, 1, 1, true));
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f").push(makeMultiAddChildCommand(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), newImages));
+        const [wx, wy] = getWorldCoords(clientX, clientY, this.#canvas);
+        const newImages = await innerAddImages(fileList, (src) => this.#canvas.addImageToCanvas(src, wx, wy, 1, 1, true));
+        this.#history.push(makeMultiAddChildCommand(this.#canvas, newImages));
     }
     async removeImage(id) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        const child = __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").getChild(id);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").removeChild(child);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f").push(makeRemoveChildCommand(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), child));
+        const child = this.#canvas.getChild(id);
+        this.#canvas.removeChild(child);
+        this.#history.push(makeRemoveChildCommand(this.#canvas, child));
     }
     /**
      * @param url Currently only accept base64 url and the image is automatically added to screen center
      */
     async addImageFromUrl(url) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        const rect = __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").getBoundingClientRect();
+        const rect = this.#rootDiv.getBoundingClientRect();
         const clientX = rect.left + rect.width / 2;
         const clientY = rect.top + rect.height / 2;
-        const [wx, wy] = getWorldCoords(clientX, clientY, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"));
-        const img = await __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").addImageToCanvas(url, wx, wy, 1, 1, true);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f").push(makeMultiAddChildCommand(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), [img]));
+        const [wx, wy] = getWorldCoords(clientX, clientY, this.#canvas);
+        const img = await this.#canvas.addImageToCanvas(url, wx, wy, 1, 1, true);
+        this.#history.push(makeMultiAddChildCommand(this.#canvas, [img]));
     }
     async copyImage() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        await copy(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").getSelected());
+        await copy(this.#canvas.getSelected());
     }
     async pasteImage(e) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        await paste(e.clientX, e.clientY, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f"), false);
+        await paste(e.clientX, e.clientY, this.#canvas, this.#history, false);
     }
     flipVertical() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").selectionManager.flip("vertical");
+        this.#canvas.selectionManager.flip("vertical");
     }
     flipHorizontal() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").selectionManager.flip("horizontal");
+        this.#canvas.selectionManager.flip("horizontal");
     }
     align(direction) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").selectionManager.alignSelection(direction);
+        this.#canvas.selectionManager.alignSelection(direction);
     }
     normalizeSelection(type, mode) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").selectionManager.normalize(type, mode);
+        this.#canvas.selectionManager.normalize(type, mode);
     }
     sendShapeToNewZOrder(toFront) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").setShapeZOrder(toFront);
+        this.#canvas.setShapeZOrder(toFront);
     }
     deleteSelectedImages() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").selectionManager.deleteSelected(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"));
+        this.#canvas.selectionManager.deleteSelected(this.#canvas);
     }
     async exportCanvas(filename = "infinite-canvas.json") {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(LoaderEvent.start, "spinner");
+        this.#eventHub.emit(LoaderEvent.start, "spinner");
         const files = await this.getAllImageFileMetdata();
-        const data = serializeCanvas(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), files);
+        const data = serializeCanvas(this.#canvas, files);
         downloadJSON(filename, data);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(LoaderEvent.done);
+        this.#eventHub.emit(LoaderEvent.done);
     }
     async importCanvas(fileList) {
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(LoaderEvent.start, "spinner");
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        this.#eventHub.emit(LoaderEvent.start, "spinner");
+        if (!this.#canvas)
             return;
         if (!fileList || fileList.length !== 1)
             return;
@@ -459,181 +578,32 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends LitElement {
                 !file.name.toLowerCase().endsWith(".json")))
             return;
         const data = await readJSONFile(file);
-        await deserializeCanvas(data, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), this.getImageFileMetadata, this.saveImageFileMetadata);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(SaveEvent.Save);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(LoaderEvent.done);
+        await deserializeCanvas(data, this.#canvas, this.getImageFileMetadata, this.saveImageFileMetadata);
+        this.#eventHub.emit(SaveEvent.Save);
+        this.#eventHub.emit(LoaderEvent.done);
     }
     clearCanvas() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").clearChildren();
+        this.#canvas.clearChildren();
     }
     /**
      * A non-reactive method that captures the number of images added to the canvas
      */
     getTotalNumberOfChildren() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").totalNumberOfChildren;
+        return this.#canvas.totalNumberOfChildren;
     }
     /**
      * A non-reactive method that captures the number of images that are in camera
      */
     getNumberOfChildrenRendered() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        return __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").numberOfChildrenRendered;
+        return this.#canvas.numberOfChildrenRendered;
     }
 };
-_InfiniteCanvasElement_canvas = new WeakMap();
-_InfiniteCanvasElement_eventHub = new WeakMap();
-_InfiniteCanvasElement_resizeObserver = new WeakMap();
-_InfiniteCanvasElement_history = new WeakMap();
-_InfiniteCanvasElement_fileStorage = new WeakMap();
-_InfiniteCanvasElement_canvasStorage = new WeakMap();
-_InfiniteCanvasElement_saveFrequency = new WeakMap();
-_InfiniteCanvasElement_timeoutId = new WeakMap();
-_InfiniteCanvasElement_intervalId = new WeakMap();
-_InfiniteCanvasElement_rootDiv = new WeakMap();
-_InfiniteCanvasElement_onChange = new WeakMap();
-_InfiniteCanvasElement_singleImageMenuOptions = new WeakMap();
-_InfiniteCanvasElement_multiImageMenuOptions = new WeakMap();
-_InfiniteCanvasElement_canvasImageMenuOptions = new WeakMap();
-InfiniteCanvasElement.properties = {
-    name: { type: String, reflect: true },
-    width: { type: String, reflect: true },
-    height: { type: String, reflect: true },
-    displayMode: { type: String, reflect: true },
-};
-InfiniteCanvasElement.styles = css `
-    :host {
-      position: relative;
-      overflow: hidden;
-    }
-
-    .context-menu {
-      position: absolute;
-      background: white;
-      min-width: 180px;
-      background: var(--menu-bg, #fff);
-      border-radius: 6px;
-      border: 1px solid var(--menu-border, #9f9f9fff);
-      box-sizing: border-box;
-      padding: 6px 0;
-      display: flex;
-      gap: 2px;
-      flex-direction: column;
-      font-family: system-ui, sans-serif;
-      animation: fadeInMenu 0.13s cubic-bezier(0.4, 0, 0.2, 1);
-      overflow: scroll;
-    }
-
-    @keyframes fadeInMenu {
-      from {
-        opacity: 0;
-        transform: translateY(8px);
-      }
-      to {
-        opacity: 1;
-        transform: none;
-      }
-    }
-
-    .context-menu button {
-      all: unset;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      width: 100%;
-      padding: 8px 18px;
-      font-size: 15px;
-      color: var(--menu-fg, #222);
-      background: none;
-      cursor: pointer;
-      transition:
-        background 0.1s,
-        color 0.1s;
-      user-select: none;
-      outline: none;
-    }
-
-    .context-menu button:hover,
-    .context-menu button:focus-visible {
-      background: var(--menu-hover, #c7d5eaff);
-      color: var(--menu-accent, #155290ff);
-    }
-
-    .context-menu button:active {
-      background: var(--menu-active, #e3eaf3);
-    }
-
-    .context-menu button[disabled] {
-      color: #aaa;
-      cursor: not-allowed;
-      background: none;
-    }
-
-    .context-menu-divider {
-      height: 1px;
-      background: var(--menu-divider, #c7d5eaff);
-      margin: 6px 12px;
-      border: none;
-    }
-
-    canvas {
-      width: 100%;
-      height: 100%;
-      outline: none;
-      padding: 0;
-      margin: 0;
-      touch-action: none;
-      display: block;
-    }
-
-    .canvas-loader {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: rgba(255, 255, 255, 0.7);
-      z-index: 1000;
-      pointer-events: all;
-    }
-
-    .canvas-loader-spinner {
-      width: 48px;
-      height: 48px;
-      border: 6px solid #e0e0e0;
-      border-top: 6px solid #1976d2;
-      border-radius: 50%;
-      animation: canvas-loader-spin 1s linear infinite;
-      margin-bottom: 16px;
-    }
-
-    @keyframes canvas-loader-spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    .canvas-loader-message {
-      font-size: 1.1rem;
-      color: #333;
-      background: rgba(255, 255, 255, 0.9);
-      padding: 8px 16px;
-      border-radius: 4px;
-      margin-top: 8px;
-      text-align: center;
-      max-width: 80%;
-      word-break: break-word;
-    }
-  `;
 InfiniteCanvasElement = __decorate([
     customElement("infinite-canvas")
 ], InfiniteCanvasElement);