@plait/mind 0.24.1 → 0.26.0

package/fesm2020/plait-mind.mjs

@@ -1,7 +1,7 @@
 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, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, CLIP_BOARD_IMAGE_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, 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';
@@ -3002,6 +3002,7 @@ class NodeImageDrawer {
         this.g = createG();
         const foreignRectangle = getImageForeignRectangle(this.board, element);
         this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+        this.foreignObject.style.padding = `6px`;
         this.g.append(this.foreignObject);
         const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType;
         if (!componentType) {
@@ -3357,14 +3358,14 @@ const withNodeDnd = (board) => {
             }
         }
         if (activeElements.length) {
-            // prevent text from being selected
-            event.preventDefault();
             correspondingElements = getOverallAbstracts(board, activeElements);
         }
         mousedown(event);
     };
     board.mousemove = (event) => {
         if (!board.options.readonly && activeElements?.length && startPoint) {
+            // prevent text from being selected
+            event.preventDefault();
             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 < DRAG_MOVE_BUFFER) {
@@ -3540,6 +3541,20 @@ const setClipboardData = (data, elements) => {
     data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
     data?.setData(`text/plain`, text);
 };
+const setClipboardDataByImage = (data, image) => {
+    const stringObj = JSON.stringify(image);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    data?.setData(`application/${CLIP_BOARD_IMAGE_FORMAT_KEY}`, encoded);
+};
+const getImageItemFromClipboard = (data) => {
+    const encoded = data?.getData(`application/${CLIP_BOARD_IMAGE_FORMAT_KEY}`);
+    let imageItem = null;
+    if (encoded) {
+        const decoded = decodeURIComponent(window.atob(encoded));
+        imageItem = JSON.parse(decoded);
+    }
+    return imageItem;
+};
 const getDataFromClipboard = (data) => {
     const encoded = data?.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
     let nodesData = [];
@@ -3623,8 +3638,6 @@ const withAbstract = (board) => {
             return abstractHandlePosition;
         });
         if (activeAbstractElement) {
-            // prevent text from being selected
-            event.preventDefault();
             if (newBoard?.onAbstractResize) {
                 newBoard.onAbstractResize(AbstractResizeState.start);
             }
@@ -3639,6 +3652,8 @@ const withAbstract = (board) => {
         const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
         touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
         if (abstractHandlePosition && activeAbstractElement) {
+            // prevent text from being selected
+            event.preventDefault();
             const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
             const element = abstractComponent.element;
             const nodeLayout = MindQueries.getCorrectLayoutByElement(board, activeAbstractElement);
@@ -3996,7 +4011,7 @@ const withNodeHoverDetect = (board) => {
 };
 
 const withNodeImage = (board) => {
-    const { keydown, mousedown, globalMouseup, insertFragment } = board;
+    const { keydown, mousedown, globalMouseup, setFragment, insertFragment, deleteFragment } = board;
     board.mousedown = (event) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
@@ -4045,6 +4060,21 @@ const withNodeImage = (board) => {
         }
         globalMouseup(event);
     };
+    board.setFragment = (data) => {
+        const selectedImageElement = getSelectedImageElement(board);
+        if (selectedImageElement) {
+            setClipboardDataByImage(data, selectedImageElement.data.image);
+            return;
+        }
+        setFragment(data);
+    };
+    board.deleteFragment = (data) => {
+        const selectedImageElement = getSelectedImageElement(board);
+        if (selectedImageElement) {
+            MindTransforms.removeImage(board, selectedImageElement);
+        }
+        deleteFragment(data);
+    };
     board.insertFragment = (data, targetPoint) => {
         const selectedElements = getSelectedElements(board);
         const isSelectedImage = !!getSelectedImageElement(board);
@@ -4058,6 +4088,11 @@ const withNodeImage = (board) => {
                 return;
             }
         }
+        const imageItem = getImageItemFromClipboard(data);
+        if (imageItem && (isSingleSelection || isSelectedImage)) {
+            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
+            MindTransforms.setImage(board, selectedElement, imageItem);
+        }
         insertFragment(data, targetPoint);
     };
     return board;
@@ -4071,8 +4106,6 @@ const withNodeResize = (board) => {
     board.mousedown = (event) => {
         if (targetElement) {
             startPoint = [event.x, event.y];
-            // prevent text from being selected
-            event.preventDefault();
             return;
         }
         mousedown(event);
@@ -4083,6 +4116,8 @@ const withNodeResize = (board) => {
             return;
         }
         if (startPoint && targetElement && !isMindNodeResizing(board)) {
+            // prevent text from being selected
+            event.preventDefault();
             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) {
@@ -4097,6 +4132,8 @@ const withNodeResize = (board) => {
             }
         }
         if (isMindNodeResizing(board) && startPoint && targetElementRef) {
+            // prevent text from being selected
+            event.preventDefault();
             throttleRAF(() => {
                 if (!startPoint) {
                     return;
@@ -4278,12 +4315,14 @@ const withMind = (baseBoard) => {
     };
     board.deleteFragment = (data) => {
         const selectedElements = getSelectedElements(board);
-        const deletableElements = getFirstLevelElement(selectedElements).reverse();
-        const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-        MindTransforms.setAbstractsByRefs(board, abstractRefs);
-        const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
-        MindTransforms.setRightNodeCountByRefs(board, refs);
-        MindTransforms.removeElements(board, selectedElements);
+        if (selectedElements.length) {
+            const deletableElements = getFirstLevelElement(selectedElements).reverse();
+            const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+            MindTransforms.setAbstractsByRefs(board, abstractRefs);
+            const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
+            MindTransforms.setRightNodeCountByRefs(board, refs);
+            MindTransforms.removeElements(board, selectedElements);
+        }
         deleteFragment(data);
     };
     return withNodeResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));