fix(height): resolved the height, textHeight, width issue when zoom i…

…s not 100%

.changeset/popular-toes-tan.md

@@ -0,0 +1,7 @@
+---
+'@plait/common': patch
+'@plait/draw': patch
+'@plait/mind': patch
+---
+
+correct height, textHeight, width when zoom is not 100% for operations: resize, remove image, add image and so on

packages/common/src/text/text-manage.ts

@@ -170,7 +170,7 @@ export class TextManage {
         return exitCallback;
     }
 
-    getSize = (element?: Element) => {
+    getSize = (element?: Element, maxWidth?: number) => {
         const computedStyle = window.getComputedStyle(this.foreignObject.children[0]);
         const fontFamily = computedStyle.fontFamily;
         const fontSize = parseFloat(computedStyle.fontSize);
@@ -181,7 +181,7 @@ export class TextManage {
                 fontSize: fontSize,
                 fontFamily
             },
-            this.options.getMaxWidth!()
+            maxWidth || this.options.getMaxWidth!()
         );
     };
 

packages/draw/src/table.component.ts

@@ -116,10 +116,9 @@ export class TableComponent<T extends PlaitTable> extends CommonElementFlavour<T
         const texts = this.getDrawShapeTexts(this.element.cells);
         this.textGenerator = new TextGenerator(this.board, this.element, texts, {
             onChange: (value: PlaitTable, data: TextManageChangeData, text: PlaitDrawShapeText) => {
-                const height = data.height / this.board.viewport.zoom;
                 const path = PlaitBoard.findPath(this.board, value);
                 if (data.newText) {
-                    DrawTransforms.setTableText(this.board, path, text.key, data.newText, height);
+                    DrawTransforms.setTableText(this.board, path, text.key, data.newText, data.height);
                 }
                 data.operations && memorizeLatestText(value, data.operations);
             },

packages/draw/src/transforms/geometry.ts

@@ -29,8 +29,7 @@ export const insertText = (board: PlaitBoard, point: Point, text: string | Eleme
 export const resizeGeometry = (board: PlaitBoard, points: [Point, Point], textHeight: number, path: Path) => {
     const normalizePoints = normalizeShapePoints(points);
     const element = PlaitNode.get(board, path);
-    const newHeight = textHeight / board.viewport.zoom;
-    const newProperties = { points: normalizePoints, textHeight: newHeight };
+    const newProperties = { points: normalizePoints, textHeight };
     if (PlaitDrawElement.isText(element) && element.autoSize) {
         (newProperties as Partial<PlaitText>).autoSize = false;
     }

packages/mind/src/plugins/with-node-resize.ts

@@ -51,16 +51,15 @@ export const withNodeResize = (board: PlaitBoard) => {
             };
         },
         onResize: (resizeRef: ResizeRef<MindElement, null>, resizeState: ResizeState) => {
-            const zoom = board.viewport.zoom;
             let resizedWidth = targetElementRef!.currentWidth + Point.getOffsetX(resizeState.startPoint, resizeState.endPoint);
             if (resizedWidth <= targetElementRef!.minWidth) {
                 resizedWidth = targetElementRef!.minWidth;
             }
             const newTarget = PlaitNode.get<MindElement>(board, targetElementRef!.path);
             if (newTarget && NodeSpace.getNodeTopicMinWidth(board as PlaitMindBoard, newTarget) !== resizedWidth) {
                 targetElementRef!.textManage.updateRectangleWidth(resizedWidth);
-                const { height } = targetElementRef!.textManage.getSize();
-                MindTransforms.setNodeManualWidth(board as PlaitMindBoard, newTarget, resizedWidth * zoom, height);
+                const { height } = targetElementRef!.textManage.getSize(undefined, resizedWidth);
+                MindTransforms.setNodeManualWidth(board as PlaitMindBoard, newTarget, resizedWidth, height);
             }
         },
         afterResize: (resizeRef: ResizeRef<MindElement, null>) => {

packages/mind/src/transforms/image.ts

@@ -13,27 +13,23 @@ export const removeImage = (board: PlaitBoard, element: MindElement<ImageData>)
     } as MindElement;
     delete newElement.data.image;
     const path = PlaitBoard.findPath(board, element);
-
     const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board as PlaitMindBoard, element, 0);
     const newHeight = getNewNodeHeight(board as PlaitMindBoard, element, newDynamicWidth);
     if (newHeight) {
-        newElement.height = newHeight / board.viewport.zoom;
+        newElement.height = newHeight;
     }
-
     Transforms.setNode(board, newElement, path);
 };
 
 export const setImage = (board: PlaitBoard, element: MindElement, imageItem: CommonImageItem) => {
     const newElement = {
         data: { ...element.data, image: imageItem }
     };
-
     const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board as PlaitMindBoard, element, imageItem.width);
     const newHeight = getNewNodeHeight(board as PlaitMindBoard, element, newDynamicWidth);
     if (newHeight) {
-        (newElement as MindElement).height = newHeight / board.viewport.zoom;
+        (newElement as MindElement).height = newHeight;
     }
-
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };

packages/mind/src/utils/node/dynamic-width.ts

@@ -8,17 +8,9 @@ import { getFirstTextManage } from '@plait/common';
  */
 export const getNewNodeHeight = (board: PlaitBoard, element: MindElement, newNodeDynamicWidth: number) => {
     const textManage = getFirstTextManage(element);
-    const { height } = textManage.getSize();
-    textManage.updateRectangleWidth(newNodeDynamicWidth);
-    const { height: newHeight } = textManage.getSize();
-
-    if (height !== newHeight) {
-        return newHeight;
-    }
-
-    if (Math.abs(newHeight / board.viewport.zoom - element.height) > 2) {
-        return newHeight;
+    const { height } = textManage.getSize(undefined, newNodeDynamicWidth);
+    if (Math.abs(height - element.height) > 2) {
+        return height;
     }
-
     return undefined;
 };