@plait/mind 0.54.0 → 0.55.0

package/fesm2022/plait-mind.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgZone, Directive, Input, HostListener } from '@angular/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, removeSelectedElement, PlaitHistoryBoard, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitChildrenElementComponent, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, ResizeCursorClass, Point, addClipboardContext, PlaitPluginKey } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, removeSelectedElement, PlaitHistoryBoard, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, ResizeCursorClass, Point, addClipboardContext, PlaitPluginKey } from '@plait/core';
 import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { TEXT_DEFAULT_HEIGHT, buildText, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, getTextSize, TextManage, ExitOrigin } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
@@ -8,7 +8,6 @@ import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRef
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
-import { NgIf } from '@angular/common';
 
 const ELEMENT_TO_NODE = new WeakMap();
 
@@ -1113,16 +1112,14 @@ const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
 
 const IS_DRAGGING = new WeakMap();
 const addActiveOnDragOrigin = (activeElement) => {
-    const activeComponent = PlaitElement.getComponent(activeElement);
-    activeComponent.g.classList.add('dragging-node');
+    PlaitElement.getElementG(activeElement).classList.add('dragging-node');
     !activeElement.isCollapsed &&
         activeElement.children.forEach(child => {
             addActiveOnDragOrigin(child);
         });
 };
 const removeActiveOnDragOrigin = (activeElement) => {
-    const activeComponent = PlaitElement.getComponent(activeElement);
-    activeComponent.g.classList.remove('dragging-node');
+    PlaitElement.getElementG(activeElement).classList.remove('dragging-node');
     !activeElement.isCollapsed &&
         activeElement.children.forEach(child => {
             removeActiveOnDragOrigin(child);
@@ -2931,9 +2928,8 @@ class MindNodeComponent extends CommonPluginElement {
     get textManage() {
         return this.getTextManages()[0];
     }
-    constructor(viewContainerRef, cdr) {
+    constructor(cdr) {
         super(cdr);
-        this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
         this.shapeG = null;
         this.destroy$ = new Subject();
@@ -2989,8 +2985,7 @@ class MindNodeComponent extends CommonPluginElement {
         this.node = MindElement.getNode(this.element);
         this.index = NODE_TO_INDEX.get(this.element) || 0;
         this.roughSVG = PlaitBoard.getRoughSVG(this.board);
-        this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
-        this.nodeShapeGenerator.processDrawing(this.element, this.g, { node: this.node });
+        this.nodeShapeGenerator.processDrawing(this.element, this.getElementG(), { node: this.node });
         this.drawLink();
         this.drawTopic();
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
@@ -2999,9 +2994,9 @@ class MindNodeComponent extends CommonPluginElement {
         });
         this.drawEmojis();
         this.drawExtend();
-        this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
+        this.imageGenerator.processDrawing(this.element, this.getElementG(), this.viewContainerRef);
         if (PlaitMind.isMind(this.context.parent)) {
-            this.g.classList.add('branch');
+            this.getElementG().classList.add('branch');
         }
     }
     onContextChanged(value, previous) {
@@ -3014,15 +3009,15 @@ class MindNodeComponent extends CommonPluginElement {
                 selected: this.selected,
                 isEditing: this.textManage.isEditing
             });
-            this.nodeShapeGenerator.processDrawing(this.element, this.g, { node: this.node });
+            this.nodeShapeGenerator.processDrawing(this.element, this.getElementG(), { node: this.node });
             this.drawLink();
             this.drawEmojis();
             this.drawExtend();
             if (!MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
-                this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
+                this.imageGenerator.processDrawing(this.element, this.getElementG(), this.viewContainerRef);
             }
             if (MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
-                this.imageGenerator.updateImage(this.g, previous.element, value.element);
+                this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
             }
             if (MindElement.hasImage(previous.element) && !MindElement.hasImage(this.element)) {
                 this.imageGenerator.destroy();
@@ -3046,7 +3041,7 @@ class MindNodeComponent extends CommonPluginElement {
     drawEmojis() {
         const g = this.nodeEmojisGenerator.drawEmojis(this.element);
         if (g) {
-            this.g.append(g);
+            this.getElementG().append(g);
         }
     }
     drawLink() {
@@ -3065,26 +3060,26 @@ class MindNodeComponent extends CommonPluginElement {
         else {
             this.linkG = drawLink(this.board, parentNode, this.node, isHorizontalLayout(layout));
         }
-        this.g.append(this.linkG);
+        this.getElementG().append(this.linkG);
     }
     drawExtend() {
         if (!this.extendG) {
             this.extendG = createG();
             this.extendG.classList.add('extend');
-            this.g.append(this.extendG);
+            this.getElementG().append(this.extendG);
         }
         if (this.element.isCollapsed) {
-            this.g.classList.add('collapsed');
+            this.getElementG().classList.add('collapsed');
         }
         else {
-            this.g.classList.remove('collapsed');
+            this.getElementG().classList.remove('collapsed');
         }
         this.nodePlusGenerator.processDrawing(this.element, this.extendG);
         this.collapseGenerator.processDrawing(this.element, this.extendG);
     }
     drawTopic() {
         this.textManage.draw(this.element.data.topic);
-        this.g.append(this.textManage.g);
+        this.getElementG().append(this.textManage.g);
     }
     updateTopic() {
         this.textManage.updateText(this.element.data.topic);
@@ -3116,41 +3111,24 @@ class MindNodeComponent extends CommonPluginElement {
             ELEMENT_TO_NODE.delete(this.element);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MindNodeComponent, isStandalone: true, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
-        <plait-children
-            *ngIf="!element.isCollapsed"
-            [board]="board"
-            [parent]="element"
-            [effect]="effect"
-            [parentG]="parentG"
-        ></plait-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MindNodeComponent, isStandalone: true, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MindNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind-node',
-                    template: `
-        <plait-children
-            *ngIf="!element.isCollapsed"
-            [board]="board"
-            [parent]="element"
-            [effect]="effect"
-            [parentG]="parentG"
-        ></plait-children>
-    `,
+                    template: ``,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
-                    imports: [NgIf, PlaitChildrenElementComponent]
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class PlaitMindComponent extends MindNodeComponent {
     ngOnInit() {
         this.updateMindLayout();
         super.ngOnInit();
-        this.g.classList.add('root');
+        this.getElementG().classList.add('root');
     }
     beforeContextChange(value) {
         if (value.element !== this.element && this.initialized) {
@@ -3173,20 +3151,16 @@ class PlaitMindComponent extends MindNodeComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PlaitMindComponent, isStandalone: true, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
-        <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
-    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PlaitMindComponent, isStandalone: true, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitMindComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind',
-                    template: `
-        <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
-    `,
+                    template: ``,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [PlaitChildrenElementComponent, MindNodeComponent]
+                    imports: [MindNodeComponent]
                 }]
         }] });
 
@@ -3485,6 +3459,7 @@ const withCreateMind = (board) => {
             clearSelectedElement(board);
             addSelectedElement(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+            return;
         }
         pointerDown(event);
     };
@@ -3656,14 +3631,10 @@ const pointerLeaveHandle = (board, event, nodeExtendHoveredRef) => {
     }
 };
 const addHovered = (element) => {
-    const component = PlaitElement.getComponent(element);
-    component.g.classList.add('hovered');
+    PlaitElement.getElementG(element).classList.add('hovered');
 };
 const removeHovered = (element) => {
-    const component = PlaitElement.getComponent(element);
-    if (component && component.g) {
-        component.g.classList.remove('hovered');
-    }
+    PlaitElement.getElementG(element)?.classList?.remove('hovered');
 };
 
 const withNodeHoverHitTest = (board) => {
@@ -3671,6 +3642,10 @@ const withNodeHoverHitTest = (board) => {
     let nodeExtendHoveredRef = null;
     board.pointerMove = (event) => {
         throttleRAF(board, 'with-mind-node-hover-hit-test', () => {
+            // element has been deleted
+            if (nodeExtendHoveredRef && !PlaitElement.hasMounted(nodeExtendHoveredRef.element)) {
+                nodeExtendHoveredRef = null;
+            }
             nodeExtendHoveredRef = pointerMoveHandle(board, event, nodeExtendHoveredRef);
         });
         pointerMove(event);
@@ -3684,7 +3659,7 @@ const withNodeHoverHitTest = (board) => {
 };
 
 const withNodeImage = (board) => {
-    const { keyDown, pointerUp, globalPointerUp, setFragment, insertFragment, deleteFragment } = board;
+    const { keyDown, pointerUp, globalPointerUp, buildFragment, insertFragment, deleteFragment } = board;
     board.pointerUp = (event) => {
         const elementOfFocusedImage = getElementOfFocusedImage(board);
         if (elementOfFocusedImage &&
@@ -3735,12 +3710,12 @@ const withNodeImage = (board) => {
         }
         globalPointerUp(event);
     };
-    board.setFragment = (data, clipboardContext, rectangle, type) => {
+    board.buildFragment = (clipboardContext, rectangle, type) => {
         const selectedImageElement = getElementOfFocusedImage(board);
         if (selectedImageElement) {
             clipboardContext = createClipboardContext(WritableClipboardType.medias, [selectedImageElement.data.image], '');
         }
-        setFragment(data, clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, type);
     };
     board.deleteFragment = (elements) => {
         const selectedImageElement = getElementOfFocusedImage(board);
@@ -3749,7 +3724,7 @@ const withNodeImage = (board) => {
         }
         deleteFragment(elements);
     };
-    board.insertFragment = (data, clipboardData, targetPoint) => {
+    board.insertFragment = (clipboardData, targetPoint) => {
         const selectedElements = getSelectedElements(board);
         const isSelectedImage = !!getElementOfFocusedImage(board);
         const isSingleSelection = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
@@ -3771,7 +3746,7 @@ const withNodeImage = (board) => {
                 return;
             }
         }
-        insertFragment(data, clipboardData, targetPoint);
+        insertFragment(clipboardData, targetPoint);
     };
     return board;
 };
@@ -3978,7 +3953,7 @@ const insertClipboardText = (board, targetParent, text) => {
 const withMindFragment = (baseBoard) => {
     const board = baseBoard;
     let firstLevelElements;
-    const { getDeletedFragment, insertFragment, setFragment, deleteFragment } = board;
+    const { getDeletedFragment, insertFragment, buildFragment, deleteFragment } = board;
     board.getDeletedFragment = (data) => {
         const targetMindElements = getSelectedMindElements(board);
         if (targetMindElements.length) {
@@ -4002,7 +3977,7 @@ const withMindFragment = (baseBoard) => {
             firstLevelElements = null;
         }
     };
-    board.setFragment = (data, clipboardContext, rectangle, type) => {
+    board.buildFragment = (clipboardContext, rectangle, type) => {
         const targetMindElements = getSelectedMindElements(board);
         const firstLevelElements = getFirstLevelElement(targetMindElements);
         if (firstLevelElements.length) {
@@ -4015,13 +3990,13 @@ const withMindFragment = (baseBoard) => {
                 clipboardContext = addClipboardContext(clipboardContext, {
                     text,
                     type: WritableClipboardType.elements,
-                    data: elements
+                    elements
                 });
             }
         }
-        setFragment(data, clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, type);
     };
-    board.insertFragment = (data, clipboardData, targetPoint) => {
+    board.insertFragment = (clipboardData, targetPoint) => {
         if (clipboardData?.elements?.length) {
             const mindElements = clipboardData.elements?.filter(value => MindElement.isMindElement(board, value));
             if (mindElements && mindElements.length > 0) {
@@ -4035,7 +4010,7 @@ const withMindFragment = (baseBoard) => {
                 return;
             }
         }
-        insertFragment(data, clipboardData, targetPoint);
+        insertFragment(clipboardData, targetPoint);
     };
     return board;
 };
@@ -4072,7 +4047,7 @@ const getNextSelectedElement = (board, firstLevelElements) => {
 
 const withMind = (baseBoard) => {
     const board = baseBoard;
-    const { drawElement, dblClick, isRectangleHit, isHit, getRectangle, isMovable, isRecursion, isAlign, isImageBindingAllowed, canAddToGroup } = board;
+    const { drawElement, dblClick, isRectangleHit, isHit, getRectangle, isMovable, isRecursion, isAlign, isImageBindingAllowed, canAddToGroup, canSetZIndex, isExpanded } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -4102,6 +4077,12 @@ const withMind = (baseBoard) => {
         }
         return canAddToGroup(element);
     };
+    board.canSetZIndex = (element) => {
+        if (MindElement.isMindElement(board, element) && !element.isRoot) {
+            return false;
+        }
+        return canSetZIndex(element);
+    };
     board.isRecursion = element => {
         if (MindElement.isMindElement(board, element) && element.isCollapsed) {
             return false;
@@ -4142,6 +4123,12 @@ const withMind = (baseBoard) => {
         }
         return isAlign(element);
     };
+    board.isExpanded = (element) => {
+        if (MindElement.isMindElement(board, element) && !PlaitMind.isMind(element)) {
+            return !element.isCollapsed;
+        }
+        return isExpanded(element);
+    };
     board.dblClick = (event) => {
         if (PlaitBoard.isReadonly(board)) {
             dblClick(event);