@plait/mind 0.22.0 → 0.23.1

package/fesm2020/plait-mind.mjs

@@ -691,7 +691,8 @@ const adjustNodeToRoot = (board, node) => {
     delete newElement?.isCollapsed;
     const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, {
         fontSize: ROOT_TOPIC_FONT_SIZE,
-        fontFamily: BRANCH_FONT_FAMILY
+        fontFamily: BRANCH_FONT_FAMILY,
+        width: node.manualWidth ? node.manualWidth : undefined
     });
     newElement.width = Math.max(width, getNodeDefaultFontSize(true));
     newElement.height = height;
@@ -2298,6 +2299,8 @@ const insertAbstractNode = (board, path, start, end) => {
     mindElement.start = start;
     mindElement.end = end;
     Transforms.insertNode(board, mindElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, mindElement);
 };
 
 const setLayout = (board, layout, path) => {
@@ -2407,7 +2410,7 @@ const addEmoji = (board, element, emojiItem) => {
     const newEmojis = [...emojis];
     newEmojis.push(emojiItem);
     const newElement = {
-        data: { topic: element.data.topic, emojis: newEmojis }
+        data: { ...element.data, emojis: newEmojis }
     };
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
@@ -2415,7 +2418,7 @@ const addEmoji = (board, element, emojiItem) => {
 const removeEmoji = (board, element, emojiItem) => {
     const emojis = element.data.emojis.filter(value => value !== emojiItem);
     const newElement = {
-        data: { topic: element.data.topic }
+        data: { ...element.data }
     };
     if (emojis.length > 0) {
         newElement.data.emojis = emojis;
@@ -2439,6 +2442,7 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
 };
 
 const removeImage = (board, element) => {
+    setImageFocus(board, element, false);
     const newElement = {
         data: { ...element.data }
     };
@@ -2949,7 +2953,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
         this.drawShape();
         this.drawLink();
-        this.drawText();
+        this.drawTopic();
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
@@ -2958,18 +2962,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.g.classList.add('branch');
         }
     }
-    editTopic() {
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeResizableWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
-        this.textManage.edit((origin) => {
-            if (origin === ExitOrigin.default) {
-                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
-            }
-        });
-    }
     onContextChanged(value, previous) {
         const newNode = MindElement.getNode(value.element);
         const isEqualNode = RectangleClient.isEqual(this.node, newNode);
@@ -2982,8 +2974,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawEmojis();
             this.drawExtend();
             this.imageDrawer.updateImage(this.g, previous.element, value.element);
-            this.textManage.updateText(this.element.data.topic);
-            this.textManage.updateRectangle();
+            this.updateTopic();
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
@@ -3062,9 +3053,25 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.extendG.remove();
         }
     }
-    drawText() {
+    drawTopic() {
         this.textManage.draw(this.element.data.topic);
         this.g.append(this.textManage.g);
+        if (this.element.manualWidth) {
+            const width = NodeSpace.getNodeResizableWidth(this.board, this.element);
+            this.textManage.updateWidth(width);
+        }
+    }
+    updateTopic() {
+        this.textManage.updateText(this.element.data.topic);
+        this.textManage.updateRectangle();
+    }
+    editTopic() {
+        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
+        this.textManage.edit((origin) => {
+            if (origin === ExitOrigin.default) {
+                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
+            }
+        });
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -3474,7 +3481,10 @@ const insertClipboardData = (board, elements, targetPoint) => {
             if (item.isRoot) {
                 newElement = adjustRootToNode(board, newElement);
                 const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
-                const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
+                const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, {
+                    ...styles,
+                    width: newElement.manualWidth ? newElement.manualWidth : undefined
+                });
                 newElement.width = Math.max(width, getNodeDefaultFontSize());
                 newElement.height = height;
             }
@@ -3531,6 +3541,8 @@ const withAbstract = (board) => {
             return abstractHandlePosition;
         });
         if (activeAbstractElement) {
+            // prevent text from being selected
+            event.preventDefault();
             if (newBoard?.onAbstractResize) {
                 newBoard.onAbstractResize(AbstractResizeState.start);
             }
@@ -3936,7 +3948,6 @@ const withNodeImage = (board) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
             addSelectedElement(board, selectedImageElement);
-            setImageFocus(board, selectedImageElement, false);
             MindTransforms.removeImage(board, selectedImageElement);
             return;
         }
@@ -3963,7 +3974,7 @@ const withNodeResize = (board) => {
     let startPoint = null;
     board.mousedown = (event) => {
         if (targetElement) {
-            startPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            startPoint = [event.x, event.y];
             // prevent text from being selected
             event.preventDefault();
             return;
@@ -3979,7 +3990,6 @@ const withNodeResize = (board) => {
             const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance > PRESS_AND_MOVE_BUFFER) {
-                startPoint = endPoint;
                 addResizing(board, targetElement);
                 targetElementRef = {
                     minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
@@ -3992,17 +4002,21 @@ const withNodeResize = (board) => {
         }
         if (isMindNodeResizing(board) && startPoint && targetElementRef) {
             throttleRAF(() => {
-                const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+                if (!startPoint) {
+                    return;
+                }
+                const endPoint = [event.x, event.y];
                 const offsetX = endPoint[0] - startPoint[0];
-                let resizedWidth = targetElementRef.currentWidth + offsetX;
+                const zoom = board.viewport.zoom;
+                let resizedWidth = targetElementRef.currentWidth + offsetX / zoom;
                 if (resizedWidth < targetElementRef.minWidth) {
                     resizedWidth = targetElementRef.minWidth;
                 }
                 const newTarget = PlaitNode.get(board, targetElementRef.path);
                 if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
                     targetElementRef.textManage.updateWidth(resizedWidth);
-                    const { width, height } = targetElementRef.textManage.getSize();
-                    MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth, height);
+                    const { height } = targetElementRef.textManage.getSize();
+                    MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth * zoom, height);
                 }
             });
             return;