@plait/mind 0.27.0-next.3 → 0.27.0-next.4

package/fesm2022/plait-mind.mjs

@@ -386,8 +386,7 @@ const isHitEmojis = (board, element, point) => {
 function getTopicRectangleByNode(board, node) {
     let nodeRectangle = getRectangleByNode(node);
     const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
-    // add buffer width to avoid unexpected text breaks in different scene
-    result.width = result.width + 4;
+    result.width = result.width;
     return result;
 }
 function getTopicRectangleByElement(board, nodeRectangle, element) {
@@ -1078,7 +1077,7 @@ const normalizeWidthAndHeight = (board, element, width, height) => {
     const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
     const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
     const newHeight = height / board.viewport.zoom;
-    return { width: newWidth, height: newHeight };
+    return { width: Math.ceil(newWidth), height: newHeight };
 };
 const setTopic = (board, element, topic, width, height) => {
     const newElement = {
@@ -1197,11 +1196,8 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
 const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
     const textManage = PlaitElement.getComponent(element).textManage;
     const { height } = textManage.getSize();
-    textManage.updateWidth(newNodeDynamicWidth);
+    textManage.updateRectangleWidth(newNodeDynamicWidth);
     const { height: newHeight } = textManage.getSize();
-    if (!element.manualWidth) {
-        textManage.updateWidth(0);
-    }
     if (height !== newHeight) {
         return newHeight;
     }
@@ -3050,9 +3046,6 @@ class NodeImageDrawer {
     }
 }
 
-// 1. When the text at the end has an italic attribute, the text is partially covered
-// 2. There will be some differences in the width measured by different browsers
-const WIDTH_BUFFER = 4;
 class MindNodeComponent extends PlaitPluginElementComponent {
     constructor(viewContainerRef, cdr) {
         super(cdr);
@@ -3088,7 +3081,12 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             },
             textPlugins: plugins,
             getMaxWidth: () => {
-                return NodeTopicThreshold.defaultTextMaxWidth;
+                if (this.element.manualWidth) {
+                    return NodeSpace.getNodeDynamicWidth(this.board, this.element);
+                }
+                else {
+                    return Math.max(NodeSpace.getNodeDynamicWidth(this.board, this.element), NodeTopicThreshold.defaultTextMaxWidth);
+                }
             }
         });
     }
@@ -3204,36 +3202,17 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     drawTopic() {
         this.textManage.draw(this.element.data.topic);
         this.g.append(this.textManage.g);
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
     }
     updateTopic() {
         this.textManage.updateText(this.element.data.topic);
         this.textManage.updateRectangle();
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
     }
     editTopic() {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
-        // update text max-width when image width greater than topic default max width to cover node topic default max width style
-        const defaultMaxWidth = TOPIC_DEFAULT_MAX_WORD_COUNT * (PlaitMind.isMind(this.element) ? ROOT_TOPIC_FONT_SIZE : TOPIC_FONT_SIZE);
-        let hasMaxWidth = false;
-        if (!this.element.manualWidth && MindElement.hasImage(this.element) && this.element.data.image.width > defaultMaxWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-            hasMaxWidth = true;
-        }
         this.textManage.edit((origin) => {
             if (origin === ExitOrigin.default) {
                 this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
             }
-            if (hasMaxWidth) {
-                this.textManage.updateWidth(0);
-            }
         });
     }
     ngOnDestroy() {
@@ -4131,7 +4110,7 @@ const withNodeResize = (board) => {
                 }
                 const newTarget = PlaitNode.get(board, targetElementRef.path);
                 if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
-                    targetElementRef.textManage.updateWidth(resizedWidth);
+                    targetElementRef.textManage.updateRectangleWidth(resizedWidth);
                     const { height } = targetElementRef.textManage.getSize();
                     MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth * zoom, height);
                 }
@@ -4345,7 +4324,7 @@ class MindEmojiBaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    handleClick() {
+    handlePointerDown() {
         const currentOptions = this.board.getPluginOptions(PlaitPluginKey.withSelection);
         this.board.setPluginOptions(PlaitPluginKey.withSelection, {
             isDisabledSelect: true
@@ -4362,7 +4341,7 @@ class MindEmojiBaseComponent {
         this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "mousedown": "handleClick()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "pointerdown": "handlePointerDown()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
@@ -4379,9 +4358,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 type: Input
             }], element: [{
                 type: Input
-            }], handleClick: [{
+            }], handlePointerDown: [{
                 type: HostListener,
-                args: ['mousedown']
+                args: ['pointerdown']
             }] } });
 
 class MindImageBaseComponent {