@plait/mind 0.2.0-next.5 → 0.2.0-next.8

package/fesm2020/plait-mind.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
 import * as i2 from '@plait/core';
 import { distanceBetweenPointAndRectangle, PlaitElement, PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, ELEMENT_TO_COMPONENT, Transforms, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, drawRoundRectangle, getRectangleByElements, RectangleClient, getSelectedElements, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
-import { AbstractNode, isChildOfAbstract, isIndentedLayout, getAbstractLayout, MindLayoutType, isStandardLayout, isTopLayout, isLeftLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isBottomLayout, isRightLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { AbstractNode, isChildOfAbstract, isIndentedLayout, getAbstractLayout, MindLayoutType, isStandardLayout, isTopLayout, isLeftLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isBottomLayout, isRightLayout, isHorizontalLayout, getNonAbstractChildren, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateForeignObject, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
@@ -1273,6 +1273,7 @@ const drawStraightDropNodeG = (board, targetRect, detectResult, targetComponent,
     }
 };
 const getHorizontalFakeY = (detectResult, targetIndex, parentNode, targetRect, layout, fakeY) => {
+    const childrenLength = getNonAbstractChildren(parentNode).length;
     if (detectResult === 'top') {
         if (targetIndex === 0 && isTopLayout(layout)) {
             fakeY = targetRect.y + targetRect.height;
@@ -1286,13 +1287,13 @@ const getHorizontalFakeY = (detectResult, targetIndex, parentNode, targetRect, l
     }
     if (detectResult === 'bottom') {
         fakeY = targetRect.y + targetRect.height + 30;
-        if (targetIndex < parentNode.origin.children.length - 1) {
+        if (targetIndex < childrenLength - 1) {
             const nextComponent = PlaitElement.getComponent(parentNode.origin.children[targetIndex + 1]);
             const nextRect = getRectangleByNode(nextComponent.node);
             const topY = targetRect.y + targetRect.height;
             fakeY = topY + (nextRect.y - topY) / 5;
         }
-        if (targetIndex === parentNode.origin.children.length - 1) {
+        if (targetIndex === childrenLength - 1) {
             fakeY = targetRect.y + targetRect.height + 30;
         }
     }
@@ -1901,17 +1902,21 @@ function drawLogicLink(board, node, parent, isHorizontal) {
     return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth });
 }
 
-function getEmojisRectangle(element) {
+function getEmojisRectangle(board, element) {
+    const options = board.getMindOptions();
     const count = element.data.emojis.length;
     const fontSize = getEmojiFontSize(element);
-    return { width: fontSize * count, height: fontSize * 1.5 };
+    return {
+        width: fontSize * count + count * 2 * options.emojiPadding + (count - 1) * options.spaceBetweenEmojis,
+        height: element.height
+    };
 }
 function getEmojiFontSize(element) {
     if (PlaitMind.isMind(element)) {
-        return 18;
+        return 18 + 2;
     }
     else {
-        return 14;
+        return 14 + 2;
     }
 }
 
@@ -1949,10 +1954,10 @@ const getVerticalSpaceBetweenNodeAndText = (element) => {
     return nodeAndText;
 };
 const NodeSpace = {
-    getNodeWidth(element) {
+    getNodeWidth(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
         if (MindElement.hasEmojis(element)) {
-            return nodeAndText + getEmojisRectangle(element).width + getHorizontalSpaceEmojiAndText(element) + element.width + nodeAndText;
+            return nodeAndText + getEmojisRectangle(board, element).width + getHorizontalSpaceEmojiAndText(element) + element.width + nodeAndText;
         }
         return nodeAndText + element.width + nodeAndText;
     },
@@ -1960,10 +1965,10 @@ const NodeSpace = {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText + element.height + nodeAndText;
     },
-    getTextHorizontalSpace(element) {
+    getTextHorizontalSpace(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
         if (MindElement.hasEmojis(element)) {
-            return nodeAndText + getEmojisRectangle(element).width + getHorizontalSpaceEmojiAndText(element);
+            return nodeAndText + getEmojisRectangle(board, element).width + getHorizontalSpaceEmojiAndText(element);
         }
         else {
             return nodeAndText;
@@ -1983,8 +1988,8 @@ const NodeSpace = {
     }
 };
 
-function drawMindNodeRichtext(node, viewContainerRef) {
-    const { x, y } = getRichtextRectangleByNode(node);
+function drawMindNodeRichtext(board, node, viewContainerRef) {
+    const { x, y } = getRichtextRectangleByNode(board, node);
     const classList = [];
     if (node.origin.isRoot) {
         classList.push('root-node');
@@ -1999,8 +2004,8 @@ function drawMindNodeRichtext(node, viewContainerRef) {
     // COMPAT: last character can not show in safari browser
     return drawRichtext(x, y, Math.ceil(node.origin.width), Math.ceil(node.origin.height), node.origin.data.topic, viewContainerRef, classList);
 }
-function updateMindNodeTopicSize(node, g, isEditable) {
-    const { x, y, width, height } = getRichtextRectangleByNode(node);
+function updateMindNodeTopicSize(board, node, g, isEditable) {
+    const { x, y, width, height } = getRichtextRectangleByNode(board, node);
     if (isEditable) {
         // add 999， avoid changing lines when paste more text
         updateForeignObject(g, width + 999, height + 999, x, y);
@@ -2010,9 +2015,9 @@ function updateMindNodeTopicSize(node, g, isEditable) {
         updateForeignObject(g, Math.ceil(node.origin.width), Math.ceil(node.origin.height), x, y);
     }
 }
-function getRichtextRectangleByNode(node) {
+function getRichtextRectangleByNode(board, node) {
     let { x, y, width, height } = getRectangleByNode(node);
-    x = x + NodeSpace.getTextHorizontalSpace(node.origin);
+    x = x + NodeSpace.getTextHorizontalSpace(board, node.origin);
     y = y + NodeSpace.getTextVerticalSpace(node.origin);
     return { width, height, x, y };
 }
@@ -2080,8 +2085,8 @@ class EmojiDrawer {
         this.componentRef = this.viewContainerRef.createComponent(componentType);
         this.componentRef.instance.emojiItem = emoji;
         this.componentRef.instance.board = this.board;
-        const fontSize = PlaitMind.isMind(element) ? 18 : 14;
-        this.componentRef.instance.fontSize = fontSize;
+        this.componentRef.instance.element = element;
+        this.componentRef.instance.fontSize = getEmojiFontSize(element);
     }
     get nativeElement() {
         if (this.componentRef) {
@@ -2107,19 +2112,15 @@ class EmojisDrawer {
     drawEmojis(element) {
         this.destroy();
         if (MindElement.hasEmojis(element)) {
-            const node = MindElement.getNode(element);
             this.g = createG();
             this.g.classList.add('emojis');
             let { x, y } = getRectangleByNode(MindElement.getNode(element));
             x = x + NodeSpace.getEmojiHorizontalSpace(element);
-            y = y + NodeSpace.getEmojiVerticalSpace(element);
-            const { width, height } = getEmojisRectangle(element);
-            const fontSize = getEmojiFontSize(element);
-            const foreignObject = createForeignObject(x, y, width, height);
+            const { width, height } = getEmojisRectangle(this.board, element);
+            const foreignObject = createForeignObject(x, y, width, height + NodeSpace.getEmojiVerticalSpace(element) * 2);
             this.g.append(foreignObject);
             const container = document.createElement('div');
             container.classList.add('node-emojis-container');
-            container.classList.add(`emoji-font-size-${fontSize}`);
             foreignObject.append(container);
             this.emojiDrawers = element.data.emojis.map(emojiItem => {
                 const drawer = new EmojiDrawer(this.board, this.viewContainerRef);
@@ -2549,10 +2550,10 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.drawShape();
         this.drawLink();
         this.drawRichtext();
-        this.drawEmojis();
         this.drawActiveG();
         this.updateActiveClass();
         this.drawMaskG();
+        this.drawEmojis();
         this.drawExtend();
         this.drawQuickInsert();
     }
@@ -2758,7 +2759,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
     drawRichtext() {
-        const { richtextG, richtextComponentRef, foreignObject } = drawMindNodeRichtext(this.node, this.viewContainerRef);
+        const { richtextG, richtextComponentRef, foreignObject } = drawMindNodeRichtext(this.board, this.node, this.viewContainerRef);
         this.richtextComponentRef = richtextComponentRef;
         this.richtextG = richtextG;
         this.foreignObject = foreignObject;
@@ -2900,7 +2901,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     }
     updateRichtext() {
         updateRichText(this.node.origin.data.topic, this.richtextComponentRef);
-        updateMindNodeTopicSize(this.node, this.richtextG, this.isEditable);
+        updateMindNodeTopicSize(this.board, this.node, this.richtextG, this.isEditable);
     }
     startEditText(isEnd, isClear) {
         if (!this.richtextComponentRef) {
@@ -2910,7 +2911,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.isEditable = true;
         IS_TEXT_EDITABLE.set(this.board, true);
         this.disabledMaskG();
-        updateMindNodeTopicSize(this.node, this.richtextG, this.isEditable);
+        updateMindNodeTopicSize(this.board, this.node, this.richtextG, this.isEditable);
         if (richtextInstance.plaitReadonly) {
             richtextInstance.plaitReadonly = false;
             this.richtextComponentRef.changeDetectorRef.detectChanges();
@@ -3013,7 +3014,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             richtextInstance.plaitReadonly = true;
             this.richtextComponentRef?.changeDetectorRef.markForCheck();
             this.isEditable = false;
-            updateMindNodeTopicSize(this.node, this.richtextG, this.isEditable);
+            updateMindNodeTopicSize(this.board, this.node, this.richtextG, this.isEditable);
             IS_TEXT_EDITABLE.set(this.board, false);
         };
     }
@@ -3055,7 +3056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
 
-const getLayoutOptions = () => {
+const getLayoutOptions = (board) => {
     function getMainAxle(element, parent) {
         const strokeWidth = element.strokeWidth || STROKE_WIDTH;
         if (element.isRoot) {
@@ -3078,7 +3079,7 @@ const getLayoutOptions = () => {
             return NodeSpace.getNodeHeight(element);
         },
         getWidth(element) {
-            return NodeSpace.getNodeWidth(element);
+            return NodeSpace.getNodeWidth(board, element);
         },
         getHorizontalGap(element, parent) {
             const _layout = (parent && parent.layout) || getRootLayout(element);
@@ -3134,7 +3135,7 @@ class PlaitMindComponent extends MindNodeComponent {
     }
     updateMindLayout(element = this.element) {
         const mindLayoutType = element.layout || getDefaultLayout();
-        this.root = GlobalLayout.layout(element, getLayoutOptions(), mindLayoutType);
+        this.root = GlobalLayout.layout(element, getLayoutOptions(this.board), mindLayoutType);
         this.updateMindNodeLocation(element);
     }
     updateMindNodeLocation(element) {
@@ -3237,9 +3238,9 @@ const withDnd = (board) => {
                 PlaitBoard.getHost(board).appendChild(fakeDragNodeG);
             }
             else {
-                fakeDragNodeG?.childNodes.forEach(node => {
-                    node.remove();
-                });
+                if (fakeDragNodeG) {
+                    fakeDragNodeG.innerHTML = '';
+                }
                 fakeDropNodeG?.childNodes.forEach(node => {
                     node.remove();
                 });
@@ -3255,7 +3256,7 @@ const withDnd = (board) => {
                 x: activeComponent.node.x + offsetX,
                 y: activeComponent.node.y + offsetY
             };
-            const textRectangle = getRichtextRectangleByNode(activeComponent.node);
+            const textRectangle = getRichtextRectangleByNode(board, activeComponent.node);
             const fakeNodeG = drawRectangleNode(board, fakeDraggingNode);
             const richtextG = activeComponent.richtextG?.cloneNode(true);
             updateForeignObject(richtextG, textRectangle.width + BASE * 10, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
@@ -3517,14 +3518,6 @@ const insertClipboardText = (board, parentElement, text, width, height) => {
     return;
 };
 
-const withEmoji = (board) => {
-    const newBoard = board;
-    newBoard.drawEmoji = (emoji, element) => {
-        throw new Error('Not implement drawEmoji method error.');
-    };
-    return newBoard;
-};
-
 const withAbstract = (board) => {
     const newBoard = board;
     const { mousedown, mousemove, mouseup } = board;
@@ -3556,6 +3549,7 @@ const withAbstract = (board) => {
         const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
         touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
         if (abstractHandlePosition && activeAbstractElement) {
+            event.preventDefault();
             const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
             const element = abstractComponent.element;
             const nodeLayout = MindQueries.getCorrectLayoutByElement(activeAbstractElement);
@@ -3624,6 +3618,17 @@ const withAbstract = (board) => {
     return board;
 };
 
+const withExtendMind = (board) => {
+    const newBoard = board;
+    newBoard.drawEmoji = (emoji, element) => {
+        throw new Error('Not implement drawEmoji method error.');
+    };
+    newBoard.getMindOptions = () => {
+        return { spaceBetweenEmojis: 4, emojiPadding: 0 };
+    };
+    return newBoard;
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3791,7 +3796,7 @@ const withMind = (board) => {
         deleteSelectedELements(board, selectedElements);
         deleteFragment(data);
     };
-    return withEmoji(withAbstract(withDnd(board)));
+    return withExtendMind(withAbstract(withDnd(board)));
 };
 
 class MindEmojiBaseComponent {
@@ -3802,17 +3807,27 @@ class MindEmojiBaseComponent {
         this.elementRef = elementRef;
         this.fontSize = 14;
     }
+    ngOnInit() {
+        this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
+    }
 }
 MindEmojiBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board" }, ngImport: i0 });
+MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { classAttribute: "mind-node-emoji" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
-            type: Directive
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'mind-node-emoji'
+                    }
+                }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fontSize: [{
                 type: Input
             }], emojiItem: [{
                 type: Input
             }], board: [{
                 type: Input
+            }], element: [{
+                type: Input
             }] } });
 
 /*
@@ -3823,5 +3838,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, COLORS, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MAX_RADIUS, MINDMAP_KEY, MindElement, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindNodeShape, MindQueries, MindTransforms, NODE_FILL, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_NODE_FILL, ROOT_NODE_STROKE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getChildrenCount, getCorrespondingAbstract, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getNodeShapeByElement, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getStrokeByMindElement, handleAbstractIncluded, handleTouchedAbstract, hitMindElement, insertAbstractNode, insertMindElement, insertSiblingElementHandleAbstract, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, moveAbstractPosition, readjustmentDropTarget, separateChildren, setAbstract, setAbstractByElements, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withEmoji, withMind };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, COLORS, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MAX_RADIUS, MINDMAP_KEY, MindElement, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindNodeShape, MindQueries, MindTransforms, NODE_FILL, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_NODE_FILL, ROOT_NODE_STROKE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getChildrenCount, getCorrespondingAbstract, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getNodeShapeByElement, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getStrokeByMindElement, handleAbstractIncluded, handleTouchedAbstract, hitMindElement, insertAbstractNode, insertMindElement, insertSiblingElementHandleAbstract, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, moveAbstractPosition, readjustmentDropTarget, separateChildren, setAbstract, setAbstractByElements, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withExtendMind, withMind };
 //# sourceMappingURL=plait-mind.mjs.map