@reffy/infinite-canvas 0.0.10 → 0.0.12

package/lib/Component.js

@@ -5,21 +5,9 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-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;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteCanvasElement = void 0;
 const history_1 = require("./history");
@@ -34,7 +22,6 @@ const contextMenu_1 = require("./contextMenu");
 const storage_1 = require("./storage");
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
 const loader_1 = require("./loader");
-const stats_js_1 = __importDefault(require("stats.js"));
 let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement {
     constructor() {
         super(...arguments);
@@ -42,20 +29,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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) &&
@@ -64,29 +38,179 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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 = (0, lit_1.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() {
@@ -96,9 +220,10 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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) {
@@ -116,7 +241,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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);
@@ -124,12 +249,12 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
     }
     async initCanvas() {
         await this.warmUpStorage();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_history, new history_1.CanvasHistory(), "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_eventHub, new eventemitter3_1.default(), "f");
+        this.#history = new history_1.CanvasHistory();
+        this.#eventHub = new eventemitter3_1.default();
         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);
@@ -154,7 +279,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
             div.appendChild(canvas);
         }
         this.registerSignal();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_canvas, new Canvas_1.Canvas(canvas, __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f"), __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f"), this.debounceSaveToCanvasStorage, this.saveImageFileMetadata, this.getContainerSize), "f");
+        this.#canvas = new Canvas_1.Canvas(canvas, this.#history, this.#eventHub, this.debounceSaveToCanvasStorage, this.saveImageFileMetadata, this.getContainerSize);
         try {
             await this.restoreStateFromCanvasStorage();
         }
@@ -163,21 +288,15 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
         }
         // resize canvas to start
         this.resizeCanvas(div, canvas);
+        this.#onViewportResize = () => this.resizeCanvas(div, canvas);
+        window.addEventListener("resize", this.#onViewportResize);
         const basicImageMenuOptions = contextMenu_1.createBasicImageMenuOptions.bind(this)();
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_singleImageMenuOptions, contextMenu_1.createSingleImageMenuOptions.bind(this)(basicImageMenuOptions.options), "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasImageMenuOptions, contextMenu_1.createCanvasImageMenuOptions.bind(this)(), "f");
-        __classPrivateFieldSet(this, _InfiniteCanvasElement_multiImageMenuOptions, contextMenu_1.createMultiImageMenuOptions.bind(this)(basicImageMenuOptions.options), "f");
+        this.#singleImageMenuOptions = contextMenu_1.createSingleImageMenuOptions.bind(this)(basicImageMenuOptions.options);
+        this.#canvasImageMenuOptions = contextMenu_1.createCanvasImageMenuOptions.bind(this)();
+        this.#multiImageMenuOptions = contextMenu_1.createMultiImageMenuOptions.bind(this)(basicImageMenuOptions.options);
         this.dispatchEvent(new Event("load"));
-        const stats = new stats_js_1.default();
-        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();
@@ -206,6 +325,7 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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) {
@@ -215,7 +335,6 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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);
@@ -223,25 +342,25 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
     }
     // Register signal
     registerSignal() {
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.LoaderEvent.start, loader_1.showLoader.bind(this), "spinner");
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.LoaderEvent.done, loader_1.hideLoader.bind(this));
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.ContextMenuEvent.Open, this.addContextMenu);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.ContextMenuEvent.Close, this.clearContextMenu);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.CanvasEvent.Change, () => {
-            if (__classPrivateFieldGet(this, _InfiniteCanvasElement_onChange, "f"))
-                __classPrivateFieldGet(this, _InfiniteCanvasElement_onChange, "f").call(this);
+        this.#eventHub.on(util_1.LoaderEvent.start, loader_1.showLoader.bind(this), "spinner");
+        this.#eventHub.on(util_1.LoaderEvent.done, loader_1.hideLoader.bind(this));
+        this.#eventHub.on(util_1.ContextMenuEvent.Open, this.addContextMenu);
+        this.#eventHub.on(util_1.ContextMenuEvent.Close, this.clearContextMenu);
+        this.#eventHub.on(util_1.CanvasEvent.Change, () => {
+            if (this.#onChange)
+                this.#onChange();
         });
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.SaveEvent.Save, this.saveToCanvasStorage);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.SaveEvent.SaveCompleted, () => { });
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").on(util_1.SaveEvent.SaveFailed, () => console.error("Failed to Save!"));
+        this.#eventHub.on(util_1.SaveEvent.Save, this.saveToCanvasStorage);
+        this.#eventHub.on(util_1.SaveEvent.SaveCompleted, () => { });
+        this.#eventHub.on(util_1.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 storage_1.DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new storage_1.DefaultIndexedDbStorage();
         }
         try {
-            await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").readAll();
+            await this.#fileStorage.readAll();
         }
         catch (err) {
             console.error("Storage warm-up failed", err);
@@ -251,9 +370,9 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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
@@ -261,17 +380,17 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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
@@ -279,13 +398,13 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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 storage_1.DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new storage_1.DefaultIndexedDbStorage();
         }
         try {
             const id = await (0, files_1.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;
@@ -300,11 +419,11 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
      * @returns
      */
     async getImageFileMetadata(fileId) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, new storage_1.DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new storage_1.DefaultIndexedDbStorage();
         }
         try {
-            return await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").read(fileId);
+            return await this.#fileStorage.read(fileId);
         }
         catch (err) {
             console.error(err);
@@ -314,11 +433,11 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
      * @returns All file metadata saved in connected storage
      */
     async getAllImageFileMetdata() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_fileStorage, new storage_1.DefaultIndexedDbStorage(), "f");
+        if (!this.#fileStorage) {
+            this.#fileStorage = new storage_1.DefaultIndexedDbStorage();
         }
         try {
-            return await __classPrivateFieldGet(this, _InfiniteCanvasElement_fileStorage, "f").readAll();
+            return await this.#fileStorage.readAll();
         }
         catch (err) {
             console.error(err);
@@ -328,134 +447,134 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.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 storage_1.DefaultLocalStorage(this.name), "f");
+        if (!this.#canvasStorage) {
+            this.#canvasStorage = new storage_1.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 storage_1.DefaultLocalStorage(this.name), "f");
+        if (!this.#canvasStorage) {
+            this.#canvasStorage = new storage_1.DefaultLocalStorage(this.name);
         }
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f")
-            .write((0, serializer_1.serializeCanvas)(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f")))
-            .then(() => __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(util_1.SaveEvent.SaveCompleted))
-            .catch(() => __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(util_1.SaveEvent.SaveFailed));
+        this.#canvasStorage
+            .write((0, serializer_1.serializeCanvas)(this.#canvas))
+            .then(() => this.#eventHub.emit(util_1.SaveEvent.SaveCompleted))
+            .catch(() => this.#eventHub.emit(util_1.SaveEvent.SaveFailed));
     }
     async restoreStateFromCanvasStorage() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvasStorage, "f")) {
-            __classPrivateFieldSet(this, _InfiniteCanvasElement_canvasStorage, new storage_1.DefaultLocalStorage(this.name), "f");
+        if (!this.#canvasStorage) {
+            this.#canvasStorage = new storage_1.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 (0, serializer_1.deserializeCanvas)(data, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), this.getImageFileMetadata);
+            await (0, serializer_1.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] = (0, util_1.getWorldCoords)(clientX, clientY, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"));
-        const newImages = await (0, util_1.addImages)(fileList, (src) => __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").addImageToCanvas(src, wx, wy, 1, 1, true));
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f").push((0, manager_1.makeMultiAddChildCommand)(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), newImages));
+        const [wx, wy] = (0, util_1.getWorldCoords)(clientX, clientY, this.#canvas);
+        const newImages = await (0, util_1.addImages)(fileList, (src) => this.#canvas.addImageToCanvas(src, wx, wy, 1, 1, true));
+        this.#history.push((0, manager_1.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((0, manager_1.makeRemoveChildCommand)(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), child));
+        const child = this.#canvas.getChild(id);
+        this.#canvas.removeChild(child);
+        this.#history.push((0, manager_1.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] = (0, util_1.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((0, manager_1.makeMultiAddChildCommand)(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), [img]));
+        const [wx, wy] = (0, util_1.getWorldCoords)(clientX, clientY, this.#canvas);
+        const img = await this.#canvas.addImageToCanvas(url, wx, wy, 1, 1, true);
+        this.#history.push((0, manager_1.makeMultiAddChildCommand)(this.#canvas, [img]));
     }
     async copyImage() {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        await (0, util_1.copy)(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f").getSelected());
+        await (0, util_1.copy)(this.#canvas.getSelected());
     }
     async pasteImage(e) {
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        if (!this.#canvas)
             return;
-        await (0, util_1.paste)(e.clientX, e.clientY, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), __classPrivateFieldGet(this, _InfiniteCanvasElement_history, "f"), false);
+        await (0, util_1.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(util_1.LoaderEvent.start, "spinner");
+        this.#eventHub.emit(util_1.LoaderEvent.start, "spinner");
         const files = await this.getAllImageFileMetdata();
-        const data = (0, serializer_1.serializeCanvas)(__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), files);
+        const data = (0, serializer_1.serializeCanvas)(this.#canvas, files);
         (0, files_1.downloadJSON)(filename, data);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(util_1.LoaderEvent.done);
+        this.#eventHub.emit(util_1.LoaderEvent.done);
     }
     async importCanvas(fileList) {
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(util_1.LoaderEvent.start, "spinner");
-        if (!__classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"))
+        this.#eventHub.emit(util_1.LoaderEvent.start, "spinner");
+        if (!this.#canvas)
             return;
         if (!fileList || fileList.length !== 1)
             return;
@@ -465,182 +584,33 @@ let InfiniteCanvasElement = class InfiniteCanvasElement extends lit_1.LitElement
                 !file.name.toLowerCase().endsWith(".json")))
             return;
         const data = await (0, files_1.readJSONFile)(file);
-        await (0, serializer_1.deserializeCanvas)(data, __classPrivateFieldGet(this, _InfiniteCanvasElement_canvas, "f"), this.getImageFileMetadata, this.saveImageFileMetadata);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(util_1.SaveEvent.Save);
-        __classPrivateFieldGet(this, _InfiniteCanvasElement_eventHub, "f").emit(util_1.LoaderEvent.done);
+        await (0, serializer_1.deserializeCanvas)(data, this.#canvas, this.getImageFileMetadata, this.saveImageFileMetadata);
+        this.#eventHub.emit(util_1.SaveEvent.Save);
+        this.#eventHub.emit(util_1.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;
     }
 };
 exports.InfiniteCanvasElement = InfiniteCanvasElement;
-_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 = (0, lit_1.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;
-    }
-  `;
 exports.InfiniteCanvasElement = InfiniteCanvasElement = __decorate([
     (0, decorators_js_1.customElement)("infinite-canvas")
 ], InfiniteCanvasElement);