@plait/mind 0.34.0 → 0.36.0

package/fesm2022/plait-mind.mjs

@@ -2780,11 +2780,11 @@ class NodeActiveGenerator extends Generator {
         return activeG;
     }
     updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
+        const abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element, activeHandlePosition, resizingLocation);
         if (this.abstractOutlineG) {
-            this.abstractOutlineG.remove();
+            this.abstractOutlineG.replaceWith(abstractOutlineG);
+            this.abstractOutlineG = abstractOutlineG;
         }
-        this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element, activeHandlePosition, resizingLocation);
-        this.g.append(this.abstractOutlineG);
     }
 }
 
@@ -2962,7 +2962,10 @@ class MindNodeComponent extends CommonPluginElement {
         this.nodeShapeGenerator.processDrawing(this.element, this.g, { node: this.node });
         this.drawLink();
         this.drawTopic();
-        this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            selected: this.selected,
+            isEditing: this.textManage.isEditing
+        });
         this.drawEmojis();
         this.drawExtend();
         this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
@@ -2976,7 +2979,7 @@ class MindNodeComponent extends CommonPluginElement {
         this.node = newNode;
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
-            this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected, isEditing: this.textManage.isEditing });
             this.nodeShapeGenerator.processDrawing(this.element, this.g, { node: this.node });
             // this.nodeShapeGenerator.
             this.drawLink();
@@ -2997,7 +3000,10 @@ class MindNodeComponent extends CommonPluginElement {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameParent = value.parent === previous.parent;
             if (!hasSameSelected) {
-                this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                    selected: this.selected,
+                    isEditing: this.textManage.isEditing
+                });
             }
             if (!hasSameParent) {
                 this.drawLink();
@@ -3052,10 +3058,10 @@ class MindNodeComponent extends CommonPluginElement {
         this.textManage.updateRectangle();
     }
     editTopic() {
-        this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected, isEditing: true });
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected, isEditing: true });
         this.textManage.edit((origin) => {
             if (origin === ExitOrigin.default) {
-                this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected, isEditing: false });
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected, isEditing: false });
             }
         });
     }
@@ -3064,6 +3070,7 @@ class MindNodeComponent extends CommonPluginElement {
         this.textManage.destroy();
         this.nodeEmojisGenerator.destroy();
         this.imageGenerator.destroy();
+        this.activeGenerator.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
@@ -3315,15 +3322,15 @@ const withNodeDnd = (board) => {
 
 const withAbstract = (board) => {
     const newBoard = board;
-    const { mousedown, mousemove, mouseup } = board;
+    const { pointerDown, pointerMove, pointerUp } = board;
     let activeAbstractElement;
     let abstractHandlePosition;
     let touchedAbstract;
     let startPoint;
     let newProperty;
-    board.mousedown = (event) => {
-        if (!isMainPointer(event)) {
-            mousedown(event);
+    board.pointerDown = (event) => {
+        if (!isMainPointer(event) || PlaitBoard.isReadonly(board)) {
+            pointerDown(event);
             return;
         }
         const activeAbstractElements = getSelectedElements(board).filter(element => AbstractNode.isAbstract(element));
@@ -3340,9 +3347,9 @@ const withAbstract = (board) => {
             startPoint = point;
             return;
         }
-        mousedown(event);
+        pointerDown(event);
     };
-    board.mousemove = (event) => {
+    board.pointerMove = (event) => {
         getSelectedElements(board);
         const host = BOARD_TO_HOST.get(board);
         const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
@@ -3394,9 +3401,9 @@ const withAbstract = (board) => {
             }
             abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
         }
-        mousemove(event);
+        pointerMove(event);
     };
-    board.mouseup = (event) => {
+    board.pointerUp = (event) => {
         startPoint = undefined;
         abstractHandlePosition = undefined;
         if (activeAbstractElement) {
@@ -3413,7 +3420,7 @@ const withAbstract = (board) => {
             }
             activeAbstractElement = undefined;
         }
-        mouseup(event);
+        pointerUp(event);
     };
     return board;
 };
@@ -3436,7 +3443,7 @@ const withCreateMind = (board) => {
     newBoard.mousedown = (event) => {
         const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
         let movingPoint = PlaitBoard.getMovingPointInBoard(board);
-        if (movingPoint && isDrawingMode(board) && isMindPointer) {
+        if (!PlaitBoard.isReadonly(board) && movingPoint && isDrawingMode(board) && isMindPointer) {
             movingPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
             const emptyMind = createEmptyMind(newBoard, movingPoint);
             Transforms.insertNode(board, emptyMind, [board.children.length]);
@@ -3752,10 +3759,14 @@ const withNodeResize = (board) => {
     let targetElementRef = null;
     let startPoint = null;
     board.pointerDown = (event) => {
+        if (PlaitBoard.isReadonly(board)) {
+            pointerDown(event);
+            return;
+        }
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const newTargetElement = getSelectedTarget(board, point);
         if (newTargetElement) {
-            PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
+            PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew']);
             targetElement = newTargetElement;
             startPoint = [event.x, event.y];
             preventTouchMove(board, event, true);
@@ -3813,10 +3824,10 @@ const withNodeResize = (board) => {
                 const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
                 const newTargetElement = getSelectedTarget(board, point);
                 if (newTargetElement) {
-                    PlaitBoard.getBoardContainer(board).classList.add(`mind-${ResizeCursorClass['ew-resize']}`);
+                    PlaitBoard.getBoardContainer(board).classList.add(`mind-${ResizeCursorClass['ew']}`);
                 }
                 else {
-                    PlaitBoard.getBoardContainer(board).classList.remove(`mind-${ResizeCursorClass['ew-resize']}`);
+                    PlaitBoard.getBoardContainer(board).classList.remove(`mind-${ResizeCursorClass['ew']}`);
                 }
             }
         }
@@ -3847,7 +3858,7 @@ const addResizing = (board, element) => {
 };
 const removeResizing = (board, element) => {
     PlaitBoard.getBoardContainer(board).classList.remove('mind-node-resizing');
-    PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew-resize']);
+    PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew']);
     const component = PlaitElement.getComponent(element);
     if (component && component.g) {
         component.g.classList.remove('resizing');