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

package/fesm2020/plait-mind.mjs

@@ -1902,10 +1902,14 @@ 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 + (count - 1) * 4, height: element.height };
+    return {
+        width: fontSize * count + count * 2 * options.emojiPadding + (count - 1) * options.spaceBetweenEmojis,
+        height: element.height
+    };
 }
 function getEmojiFontSize(element) {
     if (PlaitMind.isMind(element)) {
@@ -1950,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;
     },
@@ -1961,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;
@@ -1984,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');
@@ -2000,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);
@@ -2011,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 };
 }
@@ -2112,9 +2116,8 @@ class EmojisDrawer {
             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 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');
@@ -2756,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;
@@ -2898,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) {
@@ -2908,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();
@@ -3011,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);
         };
     }
@@ -3053,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) {
@@ -3076,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);
@@ -3132,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) {
@@ -3253,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);
@@ -3515,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;
@@ -3623,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) => {
@@ -3790,7 +3796,7 @@ const withMind = (board) => {
         deleteSelectedELements(board, selectedElements);
         deleteFragment(data);
     };
-    return withEmoji(withAbstract(withDnd(board)));
+    return withExtendMind(withAbstract(withDnd(board)));
 };
 
 class MindEmojiBaseComponent {
@@ -3832,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