@plait/mind 0.27.0-next.5 → 0.27.0-next.7

package/fesm2022/plait-mind.mjs

@@ -1,11 +1,11 @@
 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, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, setStrokeLinecap, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, setStrokeLinecap, createText, PlaitPointerType, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, AbstractNode, isStandardLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, 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';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
+import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, CommonPluginElement, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -1179,7 +1179,7 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
  * 2. new height is effected by zoom
  */
 const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
-    const textManage = PlaitElement.getComponent(element).textManage;
+    const textManage = MindElement.getTextManage(element);
     const { height } = textManage.getSize();
     textManage.updateRectangleWidth(newNodeDynamicWidth);
     const { height: newHeight } = textManage.getSize();
@@ -1873,7 +1873,7 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
     };
     const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
     const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
-    const richtextG = activeComponent.textManage.g.cloneNode(true);
+    const richtextG = MindElement.getTextManage(element).g.cloneNode(true);
     updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
     dragFakeNodeG?.append(fakeNodeG);
     dragFakeNodeG?.append(richtextG);
@@ -2436,7 +2436,14 @@ const MindElement = {
     getTextEditor(element) {
         const component = PlaitElement.getComponent(element);
         if (component) {
-            return component.textManage.componentRef.instance.editor;
+            return MindElement.getTextManage(element).componentRef.instance.editor;
+        }
+        throw new Error('can not get correctly component in get text editor');
+    },
+    getTextManage(element) {
+        const component = PlaitElement.getComponent(element);
+        if (component) {
+            return component.textManage;
         }
         throw new Error('can not get correctly component in get text editor');
     }
@@ -3030,7 +3037,10 @@ class NodeImageDrawer {
     }
 }
 
-class MindNodeComponent extends PlaitPluginElementComponent {
+class MindNodeComponent extends CommonPluginElement {
+    get textManage() {
+        return this.getTextManages()[0];
+    }
     constructor(viewContainerRef, cdr) {
         super(cdr);
         this.viewContainerRef = viewContainerRef;
@@ -3048,7 +3058,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.collapseDrawer = new CollapseDrawer(this.board);
         this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
         const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
-        this.textManage = new TextManage(this.board, this.viewContainerRef, {
+        const textManage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 const rect = getTopicRectangleByNode(this.board, this.node);
                 return rect;
@@ -3073,6 +3083,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
                 }
             }
         });
+        this.initializeTextManages([textManage]);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3907,6 +3918,7 @@ const withNodeResize = (board) => {
             PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
             targetElement = newTargetElement;
             startPoint = [event.x, event.y];
+            preventTouchMove(board, event, true);
             return;
         }
         pointerDown(event);
@@ -3919,7 +3931,6 @@ const withNodeResize = (board) => {
         if (startPoint && targetElement && !isMindNodeResizing(board)) {
             // prevent text from being selected
             event.preventDefault();
-            preventTouchMove(board, true);
             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) {
@@ -3928,7 +3939,7 @@ const withNodeResize = (board) => {
                     minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
                     currentWidth: NodeSpace.getNodeDynamicWidth(board, targetElement),
                     path: PlaitBoard.findPath(board, targetElement),
-                    textManage: PlaitElement.getComponent(targetElement).textManage
+                    textManage: MindElement.getTextManage(targetElement)
                 };
                 MERGING.set(board, true);
             }
@@ -3936,7 +3947,7 @@ const withNodeResize = (board) => {
         if (isMindNodeResizing(board) && startPoint && targetElementRef) {
             // prevent text from being selected
             event.preventDefault();
-            preventTouchMove(board, true);
+            preventTouchMove(board, event, true);
             throttleRAF(() => {
                 if (!startPoint) {
                     return;
@@ -3980,7 +3991,7 @@ const withNodeResize = (board) => {
             targetElement = null;
             startPoint = null;
             MERGING.set(board, false);
-            preventTouchMove(board, false);
+            preventTouchMove(board, event, false);
         }
     };
     return board;
@@ -4387,12 +4398,12 @@ class MindImageBaseComponent {
             getStrokeWidth: () => {
                 return 1;
             },
+            getStrokeOpacity: () => {
+                return 1;
+            },
             getRectangle: (element) => {
                 return getImageForeignRectangle(this.board, this.element);
             },
-            getStrokeWidthByElement: () => {
-                return 0;
-            },
             hasResizeHandle: () => true
         });
         this.initialized = true;