fix(mind): depreciate the width and height on mind element to resolve the issue of the text can not show completely (#1077)

* fix(mind): fix topic text can not show completely in different machines

* chore: add changeset

* fix(mind): set correct font size on getElementSize

Author: pubuzhixing8

.changeset/cool-guests-attend.md

@@ -0,0 +1,10 @@
+---
+'@plait/common': minor
+'@plait/mind': minor
+---
+
+fix topic text can not show completely in different machines 
+
+1. add getElementSize to remeasure the width and height for text element and cache to `ELEMENT_TO_SIZE_MAP`.
+2. apply getElementSize to get the width and height for mind node topic text.
+3. handling the effect of mind node functions, such as editing topic, resizing mind node width and so on.

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

@@ -15,8 +15,9 @@ import {
 import { fromEvent, timer } from 'rxjs';
 import { Editor, Element, NodeEntry, Range, Text, Node, Transforms, Operation } from 'slate';
 import { PlaitTextBoard, TextPlugin } from './with-text';
-import { measureElement } from './text-measure';
+import { clearElementSizeCache, measureElement, updateElementSizeCache } from './text-measure';
 import { TextChangeData, TextComponentRef, TextProps } from './with-text';
+import { ParagraphElement } from './types';
 
 export interface TextManageChangeData {
     newText?: Element;
@@ -75,11 +76,13 @@ export class TextManage {
             },
             onComposition: (event: CompositionEvent) => {
                 if (event.type === 'compositionend') {
+                    clearElementSizeCache(this.board, this.editor.children[0] as ParagraphElement);
                     return;
                 }
                 const fakeRoot = buildCompositionData(this.editor, event.data);
                 if (fakeRoot) {
                     const sizeData = this.getSize(fakeRoot.children[0]);
+                    updateElementSizeCache(this.board, this.editor.children[0] as ParagraphElement, sizeData);
                     // invoking onChange asap to avoid blinking on typing chinese
                     this.options.onChange && this.options.onChange({ ...sizeData });
                     MERGING.set(this.board, true);

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

@@ -1,10 +1,12 @@
 import { Node } from 'slate';
-import { CustomText, ParagraphElement } from './types';
+import { CustomText, ElementSize, ParagraphElement } from './types';
 import { getLineHeightByFontSize } from '../utils/text';
 import { PlaitBoard } from '@plait/core';
 
 const BOARD_TO_CANVAS_MAP = new WeakMap<PlaitBoard, HTMLCanvasElement>();
 
+const ELEMENT_TO_SIZE_MAP = new WeakMap<ParagraphElement, ElementSize>();
+
 const getCanvasForBoard = (board: PlaitBoard | null): HTMLCanvasElement => {
     if (board) {
         if (!BOARD_TO_CANVAS_MAP.get(board)) {
@@ -17,6 +19,32 @@ const getCanvasForBoard = (board: PlaitBoard | null): HTMLCanvasElement => {
     return document.createElement('canvas');
 };
 
+export const getElementSize = (
+    board: PlaitBoard | null,
+    element: ParagraphElement,
+    options: {
+        fontSize: number;
+        fontFamily: string;
+    },
+    containerMaxWidth: number = 10000
+) => {
+    let size = ELEMENT_TO_SIZE_MAP.get(element);
+    if (size) {
+        return size;
+    }
+    size = measureElement(board, element, options, containerMaxWidth);
+    ELEMENT_TO_SIZE_MAP.set(element, size);
+    return size;
+};
+
+export const updateElementSizeCache = (board: PlaitBoard | null, element: ParagraphElement, size: ElementSize) => {
+    ELEMENT_TO_SIZE_MAP.set(element, size);
+};
+
+export const clearElementSizeCache = (board: PlaitBoard | null, element: ParagraphElement) => {
+    ELEMENT_TO_SIZE_MAP.delete(element);
+};
+
 export function measureElement(
     board: PlaitBoard | null,
     element: ParagraphElement,

packages/common/src/text/types.ts

@@ -1,4 +1,9 @@
-import { BaseElement, Editor } from 'slate';
+import { BaseElement } from 'slate';
+
+export type ElementSize =  {
+    width: number;
+    height: number;
+}
 
 export enum Alignment {
     left = 'left',

packages/mind/src/mind-node.component.ts

@@ -88,11 +88,7 @@ export class MindNodeComponent
                 }
             },
             getMaxWidth: () => {
-                if (this.element.manualWidth) {
-                    return NodeSpace.getNodeDynamicWidth(this.board, this.element);
-                } else {
-                    return Math.max(NodeSpace.getNodeDynamicWidth(this.board, this.element), NodeTopicThreshold.defaultTextMaxWidth);
-                }
+                return NodeSpace.getTopicMaxDynamicWidth(this.board, this.element);
             },
             textPlugins: plugins || []
         });

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

@@ -44,7 +44,7 @@ export const withNodeResize = (board: PlaitBoard) => {
         beforeResize: (resizeRef: ResizeRef<MindElement, null>) => {
             targetElementRef = {
                 minWidth: NodeSpace.getNodeResizableMinWidth(board as PlaitMindBoard, resizeRef.element),
-                currentWidth: NodeSpace.getNodeDynamicWidth(board as PlaitMindBoard, resizeRef.element),
+                currentWidth: NodeSpace.getTopicDynamicWidth(board as PlaitMindBoard, resizeRef.element),
                 path: PlaitBoard.findPath(board, resizeRef.element),
                 textManage: getFirstTextManage(resizeRef.element)
             };

packages/mind/src/transforms/node.ts

@@ -3,18 +3,12 @@ import { MindElement, PlaitMind } from '../interfaces/element';
 import { PlaitBoard, PlaitHistoryBoard, PlaitNode, Transforms, removeSelectedElement } from '@plait/core';
 import { AbstractRef, getRelativeStartEndByAbstractRef, insertElementHandleAbstract } from '../utils/abstract/common';
 import { RightNodeCountRef, insertElementHandleRightNodeCount, isInRightBranchOfStandardLayout } from '../utils/node/right-node-count';
-import { NodeSpace } from '../utils/space/node-space';
+import { normalizeWidthAndHeight } from '../utils/space/node-space';
 import { PlaitMindBoard } from '../plugins/with-mind.board';
 import { findNewChildNodePath, findNewSiblingNodePath, insertMindElement } from '../utils';
 import { setAbstractsByRefs } from './abstract-node';
 import { AbstractNode } from '@plait/layouts';
 
-const normalizeWidthAndHeight = (board: PlaitMindBoard, element: MindElement, width: number, height: number) => {
-    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element);
-    const newWidth = width < minWidth ? minWidth : width;
-    return { width: Math.ceil(newWidth), height };
-};
-
 export const setTopic = (board: PlaitMindBoard, element: MindElement, topic: Element, width: number, height: number) => {
     const newElement = {
         data: { ...element.data, topic },
@@ -48,7 +42,7 @@ export const setTopicSize = (board: PlaitMindBoard, element: MindElement, width:
 
 export const insertNodes = (board: PlaitBoard, elements: MindElement[], path: Path) => {
     const pathRef = board.pathRef(path);
-    elements.forEach(element => {
+    elements.forEach((element) => {
         if (pathRef.current) {
             Transforms.insertNode(board, element, pathRef.current);
         }
@@ -59,7 +53,7 @@ export const insertNodes = (board: PlaitBoard, elements: MindElement[], path: Pa
 export const insertAbstractNodes = (board: PlaitBoard, validAbstractRefs: AbstractRef[], elements: MindElement[], path: Path) => {
     const parent = PlaitNode.get(board, Path.parent(path));
     const abstractPath = [...Path.parent(path), parent.children?.length!];
-    const abstracts = validAbstractRefs.map(refs => {
+    const abstracts = validAbstractRefs.map((refs) => {
         const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
         return {
             ...refs.abstract,
@@ -72,7 +66,7 @@ export const insertAbstractNodes = (board: PlaitBoard, validAbstractRefs: Abstra
 };
 
 export const setRightNodeCountByRefs = (board: PlaitBoard, refs: RightNodeCountRef[]) => {
-    refs.forEach(ref => {
+    refs.forEach((ref) => {
         Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
     });
 };

packages/mind/src/utils/position/topic.spec.ts

@@ -7,6 +7,8 @@ import { getTopicRectangleByNode } from './topic';
 import { getRectangleByNode } from './node';
 import { NodeSpace } from '../space/node-space';
 import { PlaitMindBoard } from '../../plugins/with-mind.board';
+import { DEFAULT_FONT_FAMILY, getElementSize } from '@plait/common';
+import { DEFAULT_FONT_SIZE } from '@plait/text-plugins';
 
 describe('utils position topic', () => {
     let board: PlaitMindBoard;
@@ -36,7 +38,12 @@ describe('utils position topic', () => {
         const rectangle1 = getTopicRectangleByNode(board, mindNode);
         expect(rectangle1.x).toEqual(x);
         expect(rectangle1.y).toEqual(y);
-        expect(Math.ceil(rectangle1.width)).toEqual(Math.ceil(mindNode.origin.width));
-        expect(rectangle1.height).toEqual(mindNode.origin.height);
+        expect(rectangle1.width).not.toEqual(mindNode.origin.width);
+        const topicSize = getElementSize(null, mindNode.origin.data.topic, {
+            fontSize: DEFAULT_FONT_SIZE,
+            fontFamily: DEFAULT_FONT_FAMILY
+        });
+        expect(rectangle1.width).toEqual(topicSize.width);
+        expect(rectangle1.height).toEqual(topicSize.height);
     });
 });

packages/mind/src/utils/position/topic.ts

@@ -8,14 +8,13 @@ import { RectangleClient } from '@plait/core';
 export function getTopicRectangleByNode(board: PlaitMindBoard, node: MindNode) {
     let nodeRectangle = getRectangleByNode(node);
     const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
-    result.width = result.width;
     return result;
 }
 
 export function getTopicRectangleByElement(board: PlaitMindBoard, nodeRectangle: RectangleClient, element: MindElement) {
     const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
     const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
-    const width = NodeSpace.getNodeDynamicWidth(board, element);
-    const height = Math.ceil(element.height);
+    const width = NodeSpace.getTopicDynamicWidth(board, element);
+    const height = NodeSpace.getTopicHeight(board, element);
     return { height, width, x, y };
 }

packages/mind/src/utils/space/node-space.ts

@@ -8,8 +8,9 @@ import { getEmojisWidthHeight } from './emoji';
 import { Element } from 'slate';
 import { getStrokeWidthByElement } from '../node-style/shape';
 import { getDefaultMindElementFontSize } from '../mind';
-import { DEFAULT_FONT_SIZE, MarkTypes, PlaitMarkEditor } from '@plait/text-plugins';
-import { getFirstTextEditor } from '@plait/common';
+import { DEFAULT_FONT_SIZE, getFirstTextMarks, MarkTypes, PlaitMarkEditor } from '@plait/text-plugins';
+import { DEFAULT_FONT_FAMILY, getElementSize, getFirstTextEditor } from '@plait/common';
+import { NodeTopicThreshold } from '../../constants/node-topic-style';
 
 const NodeDefaultSpace = {
     horizontal: {
@@ -61,24 +62,55 @@ export const NodeSpace = {
                 NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                NodeSpace.getNodeDynamicWidth(board, element) +
+                NodeSpace.getTopicDynamicWidth(board, element) +
                 nodeAndText
             );
         }
-        return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
+        return nodeAndText + NodeSpace.getTopicDynamicWidth(board, element) + nodeAndText;
     },
     getNodeHeight(board: PlaitMindBoard, element: MindElement) {
+        const topicSize = getElementSize(
+            board,
+            element.data.topic,
+            { fontSize: DEFAULT_FONT_SIZE, fontFamily: DEFAULT_FONT_FAMILY },
+            NodeSpace.getTopicMaxDynamicWidth(board, element)
+        );
+        const normalizedSize = normalizeWidthAndHeight(board, element, topicSize.width, topicSize.height);
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasImage(element)) {
-            return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
+            return NodeSpace.getTextTopSpace(board, element) + normalizedSize.height + nodeAndText;
         }
-        return nodeAndText + element.height + nodeAndText;
+        return nodeAndText + normalizedSize.height + nodeAndText;
     },
-    getNodeDynamicWidth(board: PlaitMindBoard, element: MindElement) {
-        const width = element.manualWidth || element.width;
+    getTopicDynamicWidth(board: PlaitMindBoard, element: MindElement) {
+        const topicSize = getElementSize(
+            board,
+            element.data.topic,
+            { fontSize: getDefaultMindElementFontSize(board, element), fontFamily: DEFAULT_FONT_FAMILY },
+            NodeSpace.getTopicMaxDynamicWidth(board, element)
+        );
+        const normalizedSize = normalizeWidthAndHeight(board, element, topicSize.width, topicSize.width);
+        const width = element.manualWidth || normalizedSize.width;
         const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
         return Math.max(width, imageWidth);
     },
+    getTopicHeight(board: PlaitMindBoard, element: MindElement) {
+        const topicSize = getElementSize(
+            board,
+            element.data.topic,
+            { fontSize: DEFAULT_FONT_SIZE, fontFamily: DEFAULT_FONT_FAMILY },
+            NodeSpace.getTopicMaxDynamicWidth(board, element)
+        );
+        const normalizedSize = normalizeWidthAndHeight(board, element, topicSize.width, topicSize.height);
+        return normalizedSize.height;
+    },
+    getTopicMaxDynamicWidth(board: PlaitMindBoard, element: MindElement) {
+        return Math.max(
+            NodeTopicThreshold.defaultTextMaxWidth,
+            element.manualWidth || 0,
+            MindElement.hasImage(element) ? element.data.image?.width : 0
+        );
+    },
     /**
      * use it when upload image first or resize image
      */
@@ -96,9 +128,8 @@ export const NodeSpace = {
     },
     getNodeTopicMinWidth(board: PlaitMindBoard, element: MindElement) {
         const defaultFontSize = getDefaultMindElementFontSize(board, element);
-        const editor = getFirstTextEditor(element);
-        const marks = PlaitMarkEditor.getMarks(editor);
-        const fontSize = (marks[MarkTypes.fontSize] as number) || defaultFontSize;
+        const firstText = getFirstTextMarks(element.data.topic);
+        const fontSize = (firstText[MarkTypes.fontSize] ? Number(firstText[MarkTypes.fontSize]) : null) || defaultFontSize;
         return fontSize;
     },
     getTextLeftSpace(board: PlaitMindBoard, element: MindElement) {
@@ -141,3 +172,9 @@ export const getFontSizeBySlateElement = (text: string | Element) => {
     const fontSize = (marks[MarkTypes.fontSize] as number) || defaultFontSize;
     return fontSize;
 };
+
+export const normalizeWidthAndHeight = (board: PlaitMindBoard, element: MindElement, width: number, height: number) => {
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element);
+    const newWidth = width < minWidth ? minWidth : width;
+    return { width: newWidth, height };
+};