@netless/forge-whiteboard 1.3.0-beta.1 → 1.3.1

package/changelog.md

@@ -76,7 +76,9 @@
 ### 1.2.0
 
 - 修复 Apple Pencil 手掌误触导致笔迹中断的问题
-- 优化曲线笔迹质量
-- 缩放感知的 perfect-freehand 参数，跟踪 zoom 变化
-- WhiteboardTool 基类增加拖拽事件节流
+- 优化曲线笔迹质量与缩放场景下的书写一致性，减少缩放后笔迹表现失真
+- WhiteboardTool 基类增加拖拽事件节流，降低高频拖拽带来的卡顿
+- 插入图片时自动按当前视口居中并按比例适配展示
+- 点文本初始化流程优化，避免首次创建时 points 重复设置
+- 图片渲染与截图流程增加跨域处理和错误兜底，提升导出稳定性
 - FPS 指标改为每 60 秒上报，增加 P90 百分位

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;
       }
     }