@excalidraw/excalidraw 0.17.1-a38e82f → 0.17.1-b7babe5

package/dist/browser/dev/excalidraw-assets-dev/{en-IOBA4CS2.js → en-BZY7JRTM.js}

@@ -29,7 +29,7 @@ import {
   toolBar,
   userList,
   welcomeScreen
-} from "./chunk-IM4WTX2M.js";
+} from "./chunk-6NMK7JTV.js";
 import "./chunk-F3UQABQJ.js";
 export {
   alerts,
@@ -63,4 +63,4 @@ export {
   userList,
   welcomeScreen
 };
-//# sourceMappingURL=en-IOBA4CS2.js.map
+//# sourceMappingURL=en-BZY7JRTM.js.map

package/dist/browser/dev/excalidraw-assets-dev/{image-VKDAL6BQ.js → image-CVN3YKRW.js}

@@ -4,7 +4,7 @@ import {
   encodePngMetadata,
   encodeSvgMetadata,
   getTEXtChunk
-} from "./chunk-5VWQDKDR.js";
+} from "./chunk-CX3RATXT.js";
 import "./chunk-YRUDZAGT.js";
 import "./chunk-F3UQABQJ.js";
 export {
@@ -14,4 +14,4 @@ export {
   encodeSvgMetadata,
   getTEXtChunk
 };
-//# sourceMappingURL=image-VKDAL6BQ.js.map
+//# sourceMappingURL=image-CVN3YKRW.js.map

package/dist/browser/dev/index.js

@@ -226,6 +226,8 @@ import {
   hasStrokeColor,
   hasStrokeStyle,
   hasStrokeWidth,
+  hashElementsVersion,
+  hashString,
   hitTest,
   isArrowElement,
   isArrowKey,
@@ -319,8 +321,10 @@ import {
   originalContainerCache,
   parseClipboard,
   parseLibraryJSON,
+  preventUnload,
   probablySupportsClipboardBlob,
   probablySupportsClipboardWriteText,
+  promiseTry,
   queryFocusableElements,
   randomId,
   randomInteger,
@@ -342,6 +346,7 @@ import {
   resetOriginalContainerCache,
   resizeImageFile,
   resizeMultipleElements,
+  resolvablePromise,
   restore,
   restoreAppState,
   restoreElements,
@@ -385,14 +390,14 @@ import {
   viewportCoordsToSceneCoords,
   wrapEvent,
   wrapText
-} from "./excalidraw-assets-dev/chunk-5VWQDKDR.js";
+} from "./excalidraw-assets-dev/chunk-CX3RATXT.js";
 import {
   define_import_meta_env_default,
   init_define_import_meta_env
 } from "./excalidraw-assets-dev/chunk-YRUDZAGT.js";
 import {
   en_default
-} from "./excalidraw-assets-dev/chunk-IM4WTX2M.js";
+} from "./excalidraw-assets-dev/chunk-6NMK7JTV.js";
 import {
   percentages_default
 } from "./excalidraw-assets-dev/chunk-YZTYRBEQ.js";
@@ -2580,7 +2585,7 @@ var globImport_locales_json = __glob({
   "./locales/da-DK.json": () => import("./excalidraw-assets-dev/da-DK-6OKJ2GQ6.js"),
   "./locales/de-DE.json": () => import("./excalidraw-assets-dev/de-DE-BD5ICOQ2.js"),
   "./locales/el-GR.json": () => import("./excalidraw-assets-dev/el-GR-JFDBTDHS.js"),
-  "./locales/en.json": () => import("./excalidraw-assets-dev/en-IOBA4CS2.js"),
+  "./locales/en.json": () => import("./excalidraw-assets-dev/en-BZY7JRTM.js"),
   "./locales/es-ES.json": () => import("./excalidraw-assets-dev/es-ES-CBBTGYGR.js"),
   "./locales/eu-ES.json": () => import("./excalidraw-assets-dev/eu-ES-CHAPMSLE.js"),
   "./locales/fa-IR.json": () => import("./excalidraw-assets-dev/fa-IR-LOJOKEJO.js"),
@@ -12147,7 +12152,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./excalidraw-assets-dev/image-VKDAL6BQ.js").then(
+        (blob2) => import("./excalidraw-assets-dev/image-CVN3YKRW.js").then(
           ({ encodePngMetadata }) => encodePngMetadata({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -14840,8 +14845,76 @@ var useLibraryCache = () => {
   };
 };
 
+// emitter.ts
+init_define_import_meta_env();
+var Emitter = class {
+  subscribers = [];
+  /**
+   * Attaches subscriber
+   *
+   * @returns unsubscribe function
+   */
+  on(...handlers) {
+    const _handlers = handlers.flat().filter((item) => typeof item === "function");
+    this.subscribers.push(..._handlers);
+    return () => this.off(_handlers);
+  }
+  once(...handlers) {
+    const _handlers = handlers.flat().filter((item) => typeof item === "function");
+    _handlers.push(() => detach());
+    const detach = this.on(..._handlers);
+    return detach;
+  }
+  off(...handlers) {
+    const _handlers = handlers.flat();
+    this.subscribers = this.subscribers.filter(
+      (handler) => !_handlers.includes(handler)
+    );
+  }
+  trigger(...payload) {
+    for (const handler of this.subscribers) {
+      handler(...payload);
+    }
+    return this;
+  }
+  clear() {
+    this.subscribers = [];
+  }
+};
+
+// queue.ts
+init_define_import_meta_env();
+var Queue = class {
+  jobs = [];
+  running = false;
+  tick() {
+    if (this.running) {
+      return;
+    }
+    const job = this.jobs.shift();
+    if (job) {
+      this.running = true;
+      job.promise.resolve(
+        promiseTry(job.jobFactory, ...job.args).finally(() => {
+          this.running = false;
+          this.tick();
+        })
+      );
+    } else {
+      this.running = false;
+    }
+  }
+  push(jobFactory, ...args) {
+    const promise = resolvablePromise();
+    this.jobs.push({ jobFactory, promise, args });
+    this.tick();
+    return promise;
+  }
+};
+
 // data/library.ts
-var libraryItemsAtom = atom2({ status: "loaded", isInitialized: true, libraryItems: [] });
+var onLibraryUpdateEmitter = new Emitter();
+var libraryItemsAtom = atom2({ status: "loaded", isInitialized: false, libraryItems: [] });
 var cloneLibraryItems = (libraryItems) => cloneJSON(libraryItems);
 var isUniqueItem = (existingLibraryItems, targetLibraryItem) => {
   return !existingLibraryItems.find((libraryItem) => {
@@ -14862,12 +14935,30 @@ var mergeLibraryItems = (localItems, otherItems) => {
   }
   return [...newItems, ...localItems];
 };
+var createLibraryUpdate = (prevLibraryItems, nextLibraryItems) => {
+  const nextItemsMap = arrayToMap(nextLibraryItems);
+  const update = {
+    deletedItems: /* @__PURE__ */ new Map(),
+    addedItems: /* @__PURE__ */ new Map()
+  };
+  for (const item of prevLibraryItems) {
+    if (!nextItemsMap.has(item.id)) {
+      update.deletedItems.set(item.id, item);
+    }
+  }
+  const prevItemsMap = arrayToMap(prevLibraryItems);
+  for (const item of nextLibraryItems) {
+    if (!prevItemsMap.has(item.id)) {
+      update.addedItems.set(item.id, item);
+    }
+  }
+  return update;
+};
 var Library = class {
   /** latest libraryItems */
-  lastLibraryItems = [];
-  /** indicates whether library is initialized with library items (has gone
-   * though at least one update) */
-  isInitialized = false;
+  currLibraryItems = [];
+  /** snapshot of library items since last onLibraryChange call */
+  prevLibraryItems = cloneLibraryItems(this.currLibraryItems);
   app;
   constructor(app) {
     this.app = app;
@@ -14878,21 +14969,25 @@ var Library = class {
   };
   notifyListeners = () => {
     if (this.updateQueue.length > 0) {
-      jotaiStore.set(libraryItemsAtom, {
+      jotaiStore.set(libraryItemsAtom, (s3) => ({
         status: "loading",
-        libraryItems: this.lastLibraryItems,
-        isInitialized: this.isInitialized
-      });
+        libraryItems: this.currLibraryItems,
+        isInitialized: s3.isInitialized
+      }));
     } else {
-      this.isInitialized = true;
       jotaiStore.set(libraryItemsAtom, {
         status: "loaded",
-        libraryItems: this.lastLibraryItems,
-        isInitialized: this.isInitialized
+        libraryItems: this.currLibraryItems,
+        isInitialized: true
       });
       try {
-        this.app.props.onLibraryChange?.(
-          cloneLibraryItems(this.lastLibraryItems)
+        const prevLibraryItems = this.prevLibraryItems;
+        this.prevLibraryItems = cloneLibraryItems(this.currLibraryItems);
+        const nextLibraryItems = cloneLibraryItems(this.currLibraryItems);
+        this.app.props.onLibraryChange?.(nextLibraryItems);
+        onLibraryUpdateEmitter.trigger(
+          createLibraryUpdate(prevLibraryItems, nextLibraryItems),
+          nextLibraryItems
         );
       } catch (error) {
         console.error(error);
@@ -14901,9 +14996,8 @@ var Library = class {
   };
   /** call on excalidraw instance unmount */
   destroy = () => {
-    this.isInitialized = false;
     this.updateQueue = [];
-    this.lastLibraryItems = [];
+    this.currLibraryItems = [];
     jotaiStore.set(libraryItemSvgsCache, /* @__PURE__ */ new Map());
   };
   resetLibrary = () => {
@@ -14915,14 +15009,14 @@ var Library = class {
   getLatestLibrary = () => {
     return new Promise(async (resolve) => {
       try {
-        const libraryItems = await (this.getLastUpdateTask() || this.lastLibraryItems);
+        const libraryItems = await (this.getLastUpdateTask() || this.currLibraryItems);
         if (this.updateQueue.length > 0) {
           resolve(this.getLatestLibrary());
         } else {
           resolve(cloneLibraryItems(libraryItems));
         }
       } catch (error) {
-        return resolve(this.lastLibraryItems);
+        return resolve(this.currLibraryItems);
       }
     });
   };
@@ -14944,7 +15038,7 @@ var Library = class {
     return this.setLibrary(() => {
       return new Promise(async (resolve, reject) => {
         try {
-          const source = await (typeof libraryItems === "function" && !(libraryItems instanceof Blob) ? libraryItems(this.lastLibraryItems) : libraryItems);
+          const source = await (typeof libraryItems === "function" && !(libraryItems instanceof Blob) ? libraryItems(this.currLibraryItems) : libraryItems);
           let nextItems;
           if (source instanceof Blob) {
             nextItems = await loadLibraryFromBlob(source, defaultStatus);
@@ -14960,7 +15054,7 @@ var Library = class {
               this.app.focusContainer();
             }
             if (merge) {
-              resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
+              resolve(mergeLibraryItems(this.currLibraryItems, nextItems));
             } else {
               resolve(nextItems);
             }
@@ -14978,17 +15072,17 @@ var Library = class {
       try {
         await this.getLastUpdateTask();
         if (typeof libraryItems === "function") {
-          libraryItems = libraryItems(this.lastLibraryItems);
+          libraryItems = libraryItems(this.currLibraryItems);
         }
-        this.lastLibraryItems = cloneLibraryItems(await libraryItems);
-        resolve(this.lastLibraryItems);
+        this.currLibraryItems = cloneLibraryItems(await libraryItems);
+        resolve(this.currLibraryItems);
       } catch (error) {
         reject(error);
       }
     }).catch((error) => {
       if (error.name === "AbortError") {
         console.warn("Library update aborted by user");
-        return this.lastLibraryItems;
+        return this.currLibraryItems;
       }
       throw error;
     }).finally(() => {
@@ -15080,15 +15174,86 @@ var parseLibraryTokensFromUrl = () => {
   const idToken = libraryUrl ? new URLSearchParams(window.location.hash.slice(1)).get("token") : null;
   return libraryUrl ? { libraryUrl, idToken } : null;
 };
-var useHandleLibrary = ({
-  excalidrawAPI,
-  getInitialLibraryItems
-}) => {
-  const getInitialLibraryRef = (0, import_react45.useRef)(getInitialLibraryItems);
+var AdapterTransaction = class _AdapterTransaction {
+  static queue = new Queue();
+  static async getLibraryItems(adapter, source, _queue = true) {
+    const task = () => new Promise(async (resolve, reject) => {
+      try {
+        const data = await adapter.load({ source });
+        resolve(restoreLibraryItems(data?.libraryItems || [], "published"));
+      } catch (error) {
+        reject(error);
+      }
+    });
+    if (_queue) {
+      return _AdapterTransaction.queue.push(task);
+    }
+    return task();
+  }
+  static run = async (adapter, fn) => {
+    const transaction = new _AdapterTransaction(adapter);
+    return _AdapterTransaction.queue.push(() => fn(transaction));
+  };
+  // ------------------
+  adapter;
+  constructor(adapter) {
+    this.adapter = adapter;
+  }
+  getLibraryItems(source) {
+    return _AdapterTransaction.getLibraryItems(this.adapter, source, false);
+  }
+};
+var lastSavedLibraryItemsHash = 0;
+var librarySaveCounter = 0;
+var getLibraryItemsHash = (items) => {
+  return hashString(
+    items.map((item) => {
+      return `${item.id}:${hashElementsVersion(item.elements)}`;
+    }).sort().join()
+  );
+};
+var persistLibraryUpdate = async (adapter, update) => {
+  try {
+    librarySaveCounter++;
+    return await AdapterTransaction.run(adapter, async (transaction) => {
+      const nextLibraryItemsMap = arrayToMap(
+        await transaction.getLibraryItems("save")
+      );
+      for (const [id] of update.deletedItems) {
+        nextLibraryItemsMap.delete(id);
+      }
+      const addedItems = [];
+      for (const [id, item] of update.addedItems) {
+        if (nextLibraryItemsMap.has(id)) {
+          nextLibraryItemsMap.set(id, item);
+        } else {
+          addedItems.push(item);
+        }
+      }
+      const nextLibraryItems = addedItems.concat(
+        Array.from(nextLibraryItemsMap.values())
+      );
+      const version = getLibraryItemsHash(nextLibraryItems);
+      if (version !== lastSavedLibraryItemsHash) {
+        await adapter.save({ libraryItems: nextLibraryItems });
+      }
+      lastSavedLibraryItemsHash = version;
+      return nextLibraryItems;
+    });
+  } finally {
+    librarySaveCounter--;
+  }
+};
+var useHandleLibrary = (opts) => {
+  const { excalidrawAPI } = opts;
+  const optsRef = (0, import_react45.useRef)(opts);
+  optsRef.current = opts;
+  const isLibraryLoadedRef = (0, import_react45.useRef)(false);
   (0, import_react45.useEffect)(() => {
     if (!excalidrawAPI) {
       return;
     }
+    isLibraryLoadedRef.current = false;
     const importLibraryFromURL = async ({
       libraryUrl,
       idToken
@@ -15139,20 +15304,145 @@ var useHandleLibrary = ({
         importLibraryFromURL(libraryUrlTokens2);
       }
     };
-    if (getInitialLibraryRef.current) {
-      excalidrawAPI.updateLibrary({
-        libraryItems: getInitialLibraryRef.current()
-      });
-    }
     const libraryUrlTokens = parseLibraryTokensFromUrl();
     if (libraryUrlTokens) {
       importLibraryFromURL(libraryUrlTokens);
     }
+    if ("getInitialLibraryItems" in optsRef.current && optsRef.current.getInitialLibraryItems) {
+      console.warn(
+        "useHandleLibrar `opts.getInitialLibraryItems` is deprecated. Use `opts.adapter` instead."
+      );
+      Promise.resolve(optsRef.current.getInitialLibraryItems()).then((libraryItems) => {
+        excalidrawAPI.updateLibrary({
+          libraryItems,
+          // merge with current library items because we may have already
+          // populated it (e.g. by installing 3rd party library which can
+          // happen before the DB data is loaded)
+          merge: true
+        });
+      }).catch((error) => {
+        console.error(
+          `UseHandeLibrary getInitialLibraryItems failed: ${error?.message}`
+        );
+      });
+    }
+    if ("adapter" in optsRef.current && optsRef.current.adapter) {
+      const adapter = optsRef.current.adapter;
+      const migrationAdapter = optsRef.current.migrationAdapter;
+      const initDataPromise = resolvablePromise();
+      if (migrationAdapter) {
+        initDataPromise.resolve(
+          promiseTry(migrationAdapter.load).then(async (libraryData) => {
+            let restoredData = null;
+            try {
+              if (!libraryData) {
+                return AdapterTransaction.getLibraryItems(adapter, "load");
+              }
+              restoredData = restoreLibraryItems(
+                libraryData.libraryItems || [],
+                "published"
+              );
+              const nextItems = await persistLibraryUpdate(
+                adapter,
+                createLibraryUpdate([], restoredData)
+              );
+              try {
+                await migrationAdapter.clear();
+              } catch (error) {
+                console.error(
+                  `couldn't delete legacy library data: ${error.message}`
+                );
+              }
+              return nextItems;
+            } catch (error) {
+              console.error(
+                `couldn't migrate legacy library data: ${error.message}`
+              );
+              return restoredData;
+            }
+          }).catch((error) => {
+            console.error(`error during library migration: ${error.message}`);
+            return AdapterTransaction.getLibraryItems(adapter, "load");
+          })
+        );
+      } else {
+        initDataPromise.resolve(
+          promiseTry(AdapterTransaction.getLibraryItems, adapter, "load")
+        );
+      }
+      excalidrawAPI.updateLibrary({
+        libraryItems: initDataPromise.then((libraryItems) => {
+          const _libraryItems = libraryItems || [];
+          lastSavedLibraryItemsHash = getLibraryItemsHash(_libraryItems);
+          return _libraryItems;
+        }),
+        // merge with current library items because we may have already
+        // populated it (e.g. by installing 3rd party library which can
+        // happen before the DB data is loaded)
+        merge: true
+      }).finally(() => {
+        isLibraryLoadedRef.current = true;
+      });
+    }
     window.addEventListener("hashchange" /* HASHCHANGE */, onHashChange);
     return () => {
       window.removeEventListener("hashchange" /* HASHCHANGE */, onHashChange);
     };
-  }, [excalidrawAPI]);
+  }, [
+    // important this useEffect only depends on excalidrawAPI so it only reruns
+    // on editor remounts (the excalidrawAPI changes)
+    excalidrawAPI
+  ]);
+  (0, import_react45.useEffect)(
+    () => {
+      const unsubOnLibraryUpdate = onLibraryUpdateEmitter.on(
+        async (update, nextLibraryItems) => {
+          const isLoaded = isLibraryLoadedRef.current;
+          const adapter = "adapter" in optsRef.current && optsRef.current.adapter || null;
+          try {
+            if (adapter) {
+              if (
+                // if nextLibraryItems hash identical to previously saved hash,
+                // exit early, even if actual upstream state ends up being
+                // different (e.g. has more data than we have locally), as it'd
+                // be low-impact scenario.
+                lastSavedLibraryItemsHash !== getLibraryItemsHash(nextLibraryItems)
+              ) {
+                await persistLibraryUpdate(adapter, update);
+              }
+            }
+          } catch (error) {
+            console.error(
+              `couldn't persist library update: ${error.message}`,
+              update
+            );
+            if (isLoaded && optsRef.current.excalidrawAPI) {
+              optsRef.current.excalidrawAPI.updateScene({
+                appState: {
+                  errorMessage: t("errors.saveLibraryError")
+                }
+              });
+            }
+          }
+        }
+      );
+      const onUnload = (event) => {
+        if (librarySaveCounter) {
+          preventUnload(event);
+        }
+      };
+      window.addEventListener("beforeunload" /* BEFORE_UNLOAD */, onUnload);
+      return () => {
+        window.removeEventListener("beforeunload" /* BEFORE_UNLOAD */, onUnload);
+        unsubOnLibraryUpdate();
+        lastSavedLibraryItemsHash = 0;
+        librarySaveCounter = 0;
+      };
+    },
+    [
+      // this effect must not have any deps so it doesn't rerun
+    ]
+  );
 };
 
 // gesture.ts
@@ -26063,43 +26353,6 @@ var SVGLayer = ({ trails }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "SVGLayer", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("svg", { ref: svgRef }) });
 };
 
-// emitter.ts
-init_define_import_meta_env();
-var Emitter = class {
-  subscribers = [];
-  /**
-   * Attaches subscriber
-   *
-   * @returns unsubscribe function
-   */
-  on(...handlers) {
-    const _handlers = handlers.flat().filter((item) => typeof item === "function");
-    this.subscribers.push(..._handlers);
-    return () => this.off(_handlers);
-  }
-  once(...handlers) {
-    const _handlers = handlers.flat().filter((item) => typeof item === "function");
-    _handlers.push(() => detach());
-    const detach = this.on(..._handlers);
-    return detach;
-  }
-  off(...handlers) {
-    const _handlers = handlers.flat();
-    this.subscribers = this.subscribers.filter(
-      (handler) => !_handlers.includes(handler)
-    );
-  }
-  trigger(...payload) {
-    for (const handler of this.subscribers) {
-      handler(...payload);
-    }
-    return this;
-  }
-  clear() {
-    this.subscribers = [];
-  }
-};
-
 // element/ElementCanvasButtons.tsx
 init_define_import_meta_env();
 var import_jsx_runtime122 = __toESM(require_jsx_runtime(), 1);
@@ -34726,9 +34979,12 @@ export {
   exportToSvg2 as exportToSvg,
   getCommonBounds,
   getFreeDrawSvgPath,
+  getLibraryItemsHash,
   getNonDeletedElements,
   getSceneVersion,
   getVisibleSceneBounds,
+  hashElementsVersion,
+  hashString,
   isElementInsideBBox,
   isInvisiblySmallElement,
   isLinearElement,