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

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';
@@ -854,7 +854,7 @@ const getStrokeByMindElement = (board, element) => {
     ancestors.unshift(element);
     const ancestor = ancestors.find(value => value.strokeColor);
     if (ancestor && ancestor.strokeColor) {
-        return ancestor.branchColor;
+        return ancestor.strokeColor;
     }
     const root = ancestors[ancestors.length - 1];
     const branch = ancestors[ancestors.length - 2];
@@ -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;
         }
     }
@@ -1904,14 +1905,14 @@ function drawLogicLink(board, node, parent, isHorizontal) {
 function getEmojisRectangle(element) {
     const count = element.data.emojis.length;
     const fontSize = getEmojiFontSize(element);
-    return { width: fontSize * count, height: fontSize * 1.5 };
+    return { width: fontSize * count + (count - 1) * 4, height: element.height };
 }
 function getEmojiFontSize(element) {
     if (PlaitMind.isMind(element)) {
-        return 18;
+        return 18 + 2;
     }
     else {
-        return 14;
+        return 14 + 2;
     }
 }
 
@@ -2080,8 +2081,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 +2108,16 @@ 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);
             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 +2547,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();
     }
@@ -3237,9 +3235,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();
                 });
@@ -3556,6 +3554,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);
@@ -3802,17 +3801,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
             }] } });
 
 /*