@plait/mind 0.24.0 → 0.25.0

package/fesm2020/plait-mind.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, CLIP_BOARD_IMAGE_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
@@ -1119,6 +1119,9 @@ const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
     if (height !== newHeight) {
         return newHeight;
     }
+    if (Math.abs(newHeight / board.viewport.zoom - element.height) > 2) {
+        return newHeight;
+    }
     return undefined;
 };
 
@@ -2999,6 +3002,7 @@ class NodeImageDrawer {
         this.g = createG();
         const foreignRectangle = getImageForeignRectangle(this.board, element);
         this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+        this.foreignObject.style.padding = `6px`;
         this.g.append(this.foreignObject);
         const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType;
         if (!componentType) {
@@ -3064,8 +3068,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
             const rect = getTopicRectangleByNode(this.board, this.node);
             return rect;
-        }, (point) => {
-            return isHitMindElement(this.board, point, this.element);
         }, (textManageRef) => {
             const width = textManageRef.width;
             const height = textManageRef.height;
@@ -3204,10 +3206,21 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     }
     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() {
@@ -3528,6 +3541,20 @@ const setClipboardData = (data, elements) => {
     data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
     data?.setData(`text/plain`, text);
 };
+const setClipboardDataByImage = (data, image) => {
+    const stringObj = JSON.stringify(image);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    data?.setData(`application/${CLIP_BOARD_IMAGE_FORMAT_KEY}`, encoded);
+};
+const getImageItemFromClipboard = (data) => {
+    const encoded = data?.getData(`application/${CLIP_BOARD_IMAGE_FORMAT_KEY}`);
+    let imageItem = null;
+    if (encoded) {
+        const decoded = decodeURIComponent(window.atob(encoded));
+        imageItem = JSON.parse(decoded);
+    }
+    return imageItem;
+};
 const getDataFromClipboard = (data) => {
     const encoded = data?.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
     let nodesData = [];
@@ -3984,7 +4011,7 @@ const withNodeHoverDetect = (board) => {
 };
 
 const withNodeImage = (board) => {
-    const { keydown, mousedown, globalMouseup, insertFragment } = board;
+    const { keydown, mousedown, globalMouseup, setFragment, insertFragment, deleteFragment } = board;
     board.mousedown = (event) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
@@ -4033,6 +4060,21 @@ const withNodeImage = (board) => {
         }
         globalMouseup(event);
     };
+    board.setFragment = (data) => {
+        const selectedImageElement = getSelectedImageElement(board);
+        if (selectedImageElement) {
+            setClipboardDataByImage(data, selectedImageElement.data.image);
+            return;
+        }
+        setFragment(data);
+    };
+    board.deleteFragment = (data) => {
+        const selectedImageElement = getSelectedImageElement(board);
+        if (selectedImageElement) {
+            MindTransforms.removeImage(board, selectedImageElement);
+        }
+        deleteFragment(data);
+    };
     board.insertFragment = (data, targetPoint) => {
         const selectedElements = getSelectedElements(board);
         const isSelectedImage = !!getSelectedImageElement(board);
@@ -4046,6 +4088,11 @@ const withNodeImage = (board) => {
                 return;
             }
         }
+        const imageItem = getImageItemFromClipboard(data);
+        if (imageItem && (isSingleSelection || isSelectedImage)) {
+            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
+            MindTransforms.setImage(board, selectedElement, imageItem);
+        }
         insertFragment(data, targetPoint);
     };
     return board;
@@ -4266,12 +4313,14 @@ const withMind = (baseBoard) => {
     };
     board.deleteFragment = (data) => {
         const selectedElements = getSelectedElements(board);
-        const deletableElements = getFirstLevelElement(selectedElements).reverse();
-        const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-        MindTransforms.setAbstractsByRefs(board, abstractRefs);
-        const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
-        MindTransforms.setRightNodeCountByRefs(board, refs);
-        MindTransforms.removeElements(board, selectedElements);
+        if (selectedElements.length) {
+            const deletableElements = getFirstLevelElement(selectedElements).reverse();
+            const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+            MindTransforms.setAbstractsByRefs(board, abstractRefs);
+            const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
+            MindTransforms.setRightNodeCountByRefs(board, refs);
+            MindTransforms.removeElements(board, selectedElements);
+        }
         deleteFragment(data);
     };
     return withNodeResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));