@netless/forge-whiteboard 0.1.19 → 0.1.20

package/changelog.md

@@ -63,4 +63,8 @@
 
 ### 0.1.19
 
-- 新增 whiteboard.updateViewport
+- 新增 whiteboard.updateViewport
+
+### 0.1.20
+
+- 修复 whiteboard.updateViewport 后笔画粗细不一致的问题

package/dist/model/RenderableModel.d.ts

@@ -48,7 +48,6 @@ export declare class RenderableModel extends EventEmitter<WhiteboardModelEvents>
     convertToModel(yMap: Y.Map<any>): ElementModel | null;
     private initElement;
     removeElementItem(uuid: string): void;
-    private addElementToDoc;
     private confirmPermission;
     createImage(src: string): void;
     createCurve(shadow?: boolean): CurveModel | null;

package/dist/model/RenderableModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderableModel.d.ts","sourceRoot":"","sources":["../../src/model/RenderableModel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RenderableModel.d.ts","sourceRoot":"","sources":["../../src/model/RenderableModel.ts"],"names":[],"mappings":"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"}

package/dist/whiteboard.esm.js

@@ -27587,28 +27587,11 @@ var RenderableModel = class extends EventEmitter {
     return model;
   }
   initElement(element) {
-    let shadow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    if (shadow) {
-      element.shadow = "layer";
-    }
-    element.strokeWidth = this.toolbarModel.strokeWidth;
-    element.strokeColor = this.toolbarModel.strokeColor;
-    element.fillColor = this.toolbarModel.fillColor;
-    element.ownerId = this.userManager.selfId;
     element.shadowEmitter = this.shadowEmitter;
   }
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  addElementToDoc(map, type) {
-    this.elements.doc?.transact(() => {
-      const uuid = this.uuid;
-      map.set(ElementModel.KEYS.index, ++this.maxIndex);
-      map.set(ElementModel.KEYS.uuid, uuid);
-      map.set("type", type);
-      this.elements.set(uuid, map);
-    }, elementsUndoOrigin);
-  }
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
@@ -27621,7 +27604,14 @@ var RenderableModel = class extends EventEmitter {
       return;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "image");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "image");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     model.root.set("src", src);
     const initMatrix = new this.scope.Matrix();
@@ -27639,9 +27629,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "curve");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "curve");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
-    this.initElement(curveModel, shadow);
+    this.initElement(curveModel);
     return curveModel;
   }
   createLaserPointer() {
@@ -27649,15 +27652,21 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "laser");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "laser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 8);
+      yMap.set(ElementModel.KEYS.strokeColor, "#F44336");
+      yMap.set(ElementModel.KEYS.fillColor, "#F44336");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
-    model.strokeWidth = 8;
-    model.strokeColor = "#F44336";
-    model.fillColor = "#F44336";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
     return model;
   }
   createEraser() {
@@ -27665,13 +27674,19 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "eraser");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "eraser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 4);
+      yMap.set(ElementModel.KEYS.strokeColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.fillColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const model = new EraserModel(yMap, this.scope, this.liveCursor);
-    model.strokeWidth = 4;
-    model.strokeColor = "#9E9E9E";
-    model.fillColor = "#9E9E9E";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
     return model;
   }
   createTriangle(shadow) {
@@ -27679,9 +27694,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "triangle");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "triangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
-    this.initElement(triangle, shadow);
+    this.initElement(triangle);
     triangle.dashArray = this.toolbarModel.dashArray;
     return triangle;
   }
@@ -27690,9 +27718,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "rectangle");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "rectangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
-    this.initElement(rect, shadow);
+    this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
     return rect;
   }
@@ -27701,9 +27742,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, type);
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", type);
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
-    this.initElement(segmentsModel, shadow);
+    this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
     return segmentsModel;
   }
@@ -27713,7 +27767,15 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "selector");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "selector");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
     return selectorModel;
@@ -27723,9 +27785,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "line");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "line");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
-    this.initElement(straightLineModel, shadow);
+    this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
     return straightLineModel;
   }
@@ -27734,9 +27809,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "arrow");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "arrow");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
-    this.initElement(lineModel, shadow);
+    this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
     return lineModel;
   }
@@ -27745,12 +27833,25 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "point-text");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "point-text");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor);
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
-    this.initElement(pointTextModel, shadow);
+    this.initElement(pointTextModel);
     return pointTextModel;
   }
   clearElement() {
@@ -31444,7 +31545,7 @@ var WhiteboardApplication = class extends AbstractApplication {
           height = minHeight;
           width = height * viewportWidth / viewportHeight;
         }
-        this.camera.updateInherentScale(width / viewportHeight);
+        this.camera.updateInherentScale(width / viewportWidth);
         this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.camera.triggerZoom();