@netless/forge-whiteboard 1.3.0 → 1.3.1

package/dist/model/renderable/ImageModel.d.ts

@@ -5,12 +5,15 @@ import { LiveCursor } from '../../LiveCursor';
 export declare class ImageModel extends ElementModel {
     item: paper.Raster | null;
     private imageSets;
+    private imageElement;
+    private imageLoadVersion;
     protected clearLocalPointsWhenYPointsChange: boolean;
     protected shouldUseLocalPoints: boolean;
     protected localPointsPick: number;
     private get src();
     constructor(root: Y.Map<any>, scope: paper.PaperScope, imageSets: HTMLDivElement, liveCursor: LiveCursor, isPerformanceMode: () => boolean);
     protected subDispose(): void;
+    private bindImageLoad;
     protected createPaperItem(): void;
     protected onVectorUpdate(): void;
     vectorKeys(): string[];

package/dist/model/renderable/ImageModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageModel.d.ts","sourceRoot":"","sources":["../../../src/model/renderable/ImageModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,qBAAa,UAAW,SAAQ,YAAY;IAEnC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,SAAS,CAAiB;IAClC,SAAS,CAAC,iCAAiC,UAAQ;IACnD,SAAS,CAAC,oBAAoB,UAAQ;IACtC,SAAS,CAAC,eAAe,SAAK;IAE9B,OAAO,KAAK,GAAG,GAEd;gBAEkB,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO;IASjJ,SAAS,CAAC,UAAU;IAOpB,SAAS,CAAC,eAAe,IAAI,IAAI;IAiBjC,SAAS,CAAC,cAAc,IAAI,IAAI;IAOzB,UAAU,IAAI,MAAM,EAAE;IAI7B,SAAS,CAAC,SAAS,IAAI;QAAE,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE;IAO/D,SAAS,CAAC,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAS/B,YAAY,IAAI,YAAY;IAQnC,SAAS,CAAC,cAAc,IAAI,GAAG;IAI/B,SAAS,CAAC,eAAe,IAAI,IAAI;CAGlC"}
+{"version":3,"file":"ImageModel.d.ts","sourceRoot":"","sources":["../../../src/model/renderable/ImageModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,qBAAa,UAAW,SAAQ,YAAY;IAEnC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAQ;IAExC,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,gBAAgB,CAAK;IAC7B,SAAS,CAAC,iCAAiC,UAAQ;IACnD,SAAS,CAAC,oBAAoB,UAAQ;IACtC,SAAS,CAAC,eAAe,SAAK;IAE9B,OAAO,KAAK,GAAG,GAEd;gBAEkB,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO;IASjJ,SAAS,CAAC,UAAU;IAiBpB,OAAO,CAAC,aAAa;IAarB,SAAS,CAAC,eAAe,IAAI,IAAI;IAoBjC,SAAS,CAAC,cAAc,IAAI,IAAI;IAOzB,UAAU,IAAI,MAAM,EAAE;IAI7B,SAAS,CAAC,SAAS,IAAI;QAAE,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE;IAO/D,SAAS,CAAC,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAW/B,YAAY,IAAI,YAAY;IAQnC,SAAS,CAAC,cAAc,IAAI,GAAG;IAI/B,SAAS,CAAC,eAAe,IAAI,IAAI;CAGlC"}

package/dist/whiteboard.esm.js

@@ -28041,6 +28041,8 @@ var ImageModel = class extends ElementModel {
     super(root, scope, liveCursor, isPerformanceMode);
     _defineProperty16(this, "item", null);
     _defineProperty16(this, "imageSets", void 0);
+    _defineProperty16(this, "imageElement", null);
+    _defineProperty16(this, "imageLoadVersion", 0);
     _defineProperty16(this, "clearLocalPointsWhenYPointsChange", true);
     _defineProperty16(this, "shouldUseLocalPoints", true);
     _defineProperty16(this, "localPointsPick", 4);
@@ -28051,22 +28053,44 @@ var ImageModel = class extends ElementModel {
     this.root.set(ElementModel.KEYS.shadow, "");
   }
   subDispose() {
+    this.imageLoadVersion++;
+    if (this.imageElement) {
+      this.imageElement.onload = null;
+      this.imageElement.onerror = null;
+      this.imageElement.remove();
+      this.imageElement = null;
+      return;
+    }
     const img = this.imageSets.querySelector(`[id='${this.uuid}']`);
     if (img) {
+      img.onload = null;
+      img.onerror = null;
       img.remove();
     }
   }
+  bindImageLoad(img) {
+    const loadVersion = ++this.imageLoadVersion;
+    img.onload = () => {
+      if (this.imageLoadVersion !== loadVersion || !this.item) {
+        return;
+      }
+    };
+    img.onerror = null;
+  }
   createPaperItem() {
     if (this.item) {
       return;
     }
-    if (!this.imageSets.querySelector(`[id='${this.uuid}']`)) {
-      const img = document.createElement("img");
+    let img = this.imageSets.querySelector(`[id='${this.uuid}']`);
+    if (!img) {
+      img = document.createElement("img");
       img.crossOrigin = "anonymous";
-      img.src = this.src;
       img.id = this.uuid;
       this.imageSets.appendChild(img);
     }
+    this.imageElement = img;
+    this.bindImageLoad(img);
+    img.src = this.src;
     this.item = new this.scope.Raster(this.uuid);
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     this.item.matrix = matrix;
@@ -28089,8 +28113,10 @@ var ImageModel = class extends ElementModel {
   }
   onStyleKeyUpdate(key) {
     if (key === "src") {
-      const imgElement = this.imageSets.querySelector(`[id='${this.uuid}']`);
+      const imgElement = this.imageElement ?? this.imageSets.querySelector(`[id='${this.uuid}']`);
       if (imgElement) {
+        this.imageElement = imgElement;
+        this.bindImageLoad(imgElement);
         imgElement.src = this.src;
       }
     }