@plait/mind 0.50.1 → 0.51.0

package/fesm2022/plait-mind.mjs

@@ -1,10 +1,10 @@
 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, 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, 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 { 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';
-import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, PropertyTransforms, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, ResizeHandle, getElementsText } from '@plait/common';
+import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, PropertyTransforms, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } 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';
@@ -991,7 +991,7 @@ function getEmojiForeignRectangle(board, element) {
     };
 }
 const isHitEmojis = (board, element, point) => {
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
+    return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), getEmojiRectangle(board, element));
 };
 
 function getTopicRectangleByNode(board, node) {
@@ -1034,7 +1034,7 @@ const getHitImageResizeHandleDirection = (board, element, point) => {
     const imageRectangle = getImageForeignRectangle(board, element);
     const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
     const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
     });
     return result;
 };
@@ -1861,7 +1861,7 @@ const getHitAbstractHandle = (board, element, point) => {
     abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
     const startHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.start);
     const endHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.end);
-    const pointRec = RectangleClient.toRectangleClient([point, point]);
+    const pointRec = RectangleClient.getRectangleByPoints([point, point]);
     if (RectangleClient.isHit(pointRec, startHandleRec))
         return AbstractHandlePosition.start;
     if (RectangleClient.isHit(pointRec, endHandleRec))
@@ -3472,7 +3472,7 @@ const withMindExtend = (board) => {
 const DefaultHotkey = 'm';
 const withCreateMind = (board) => {
     const newBoard = board;
-    const { keydown, pointerDown, pointerMove, pointerUp } = board;
+    const { keyDown, pointerDown, pointerMove, pointerUp } = board;
     let fakeCreateNodeRef = null;
     let emptyMind = null;
     newBoard.pointerDown = (event) => {
@@ -3495,7 +3495,7 @@ const withCreateMind = (board) => {
         }
         const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
         if (isDndMode(board) && isMindPointer) {
-            throttleRAF(() => {
+            throttleRAF(board, 'with-mind-create', () => {
                 let movingPoint = PlaitBoard.getMovingPointInBoard(board);
                 if (movingPoint) {
                     movingPoint = toViewBoxPoint(newBoard, toHostPoint(board, movingPoint[0], movingPoint[1]));
@@ -3550,9 +3550,9 @@ const withCreateMind = (board) => {
         destroy();
         pointerUp(event);
     };
-    board.keydown = (event) => {
+    board.keyDown = (event) => {
         if (PlaitBoard.isReadonly(board) || getSelectedElements(board).length > 0) {
-            keydown(event);
+            keyDown(event);
             return;
         }
         if (event.key === DefaultHotkey && !PlaitBoard.isPointer(board, MindPointerType.mind)) {
@@ -3561,7 +3561,7 @@ const withCreateMind = (board) => {
             event.preventDefault();
             return;
         }
-        keydown(event);
+        keyDown(event);
     };
     function destroy() {
         if (fakeCreateNodeRef) {
@@ -3575,8 +3575,8 @@ const withCreateMind = (board) => {
 
 const withMindHotkey = (baseBoard) => {
     const board = baseBoard;
-    const { keydown } = board;
-    board.keydown = (event) => {
+    const { keyDown } = board;
+    board.keyDown = (event) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const isSingleMindElement = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
@@ -3610,12 +3610,12 @@ const withMindHotkey = (baseBoard) => {
                 return;
             }
         }
-        keydown(event);
+        keyDown(event);
     };
     return board;
 };
 
-const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
+const pointerMoveHandle = (board, event, nodeExtendHoveredRef) => {
     let target = null;
     const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
     depthFirstRecursion(board, element => {
@@ -3630,29 +3630,29 @@ const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
             target = element;
         }
     }, getIsRecursionFunc(board), true);
-    if (nodeHoveredExtendRef && target && nodeHoveredExtendRef.element === target) {
-        return nodeHoveredExtendRef;
+    if (nodeExtendHoveredRef && target && nodeExtendHoveredRef.element === target) {
+        return nodeExtendHoveredRef;
     }
-    if (nodeHoveredExtendRef) {
-        removeHovered(nodeHoveredExtendRef.element);
+    if (nodeExtendHoveredRef) {
+        removeHovered(nodeExtendHoveredRef.element);
     }
     if (target) {
         addHovered(target);
-        if (nodeHoveredExtendRef) {
-            nodeHoveredExtendRef.element = target;
+        if (nodeExtendHoveredRef) {
+            nodeExtendHoveredRef.element = target;
         }
         else {
-            nodeHoveredExtendRef = { element: target };
+            nodeExtendHoveredRef = { element: target };
         }
     }
     else {
-        nodeHoveredExtendRef = null;
+        nodeExtendHoveredRef = null;
     }
-    return nodeHoveredExtendRef;
+    return nodeExtendHoveredRef;
 };
-const mouseLeaveHandle = (board, event, nodeHoveredExtendRef) => {
-    if (nodeHoveredExtendRef) {
-        removeHovered(nodeHoveredExtendRef.element);
+const pointerLeaveHandle = (board, event, nodeExtendHoveredRef) => {
+    if (nodeExtendHoveredRef) {
+        removeHovered(nodeExtendHoveredRef.element);
     }
 };
 const addHovered = (element) => {
@@ -3666,31 +3666,33 @@ const removeHovered = (element) => {
     }
 };
 
-const withNodeHoverDetect = (board) => {
-    const { mousemove, mouseleave } = board;
-    let nodeHoveredExtendRef = null;
-    board.mousemove = (event) => {
-        nodeHoveredExtendRef = mouseMoveHandle(board, event, nodeHoveredExtendRef);
-        mousemove(event);
+const withNodeHoverHitTest = (board) => {
+    const { pointerMove, pointerLeave } = board;
+    let nodeExtendHoveredRef = null;
+    board.pointerMove = (event) => {
+        throttleRAF(board, 'with-mind-node-hover-hit-test', () => {
+            nodeExtendHoveredRef = pointerMoveHandle(board, event, nodeExtendHoveredRef);
+        });
+        pointerMove(event);
     };
-    board.mouseleave = (event) => {
-        mouseLeaveHandle(board, event, nodeHoveredExtendRef);
-        nodeHoveredExtendRef = null;
-        mouseleave(event);
+    board.pointerLeave = (event) => {
+        pointerLeaveHandle(board, event, nodeExtendHoveredRef);
+        nodeExtendHoveredRef = null;
+        pointerLeave(event);
     };
     return board;
 };
 
 const withNodeImage = (board) => {
-    const { keydown, pointerDown, globalPointerUp, setFragment, insertFragment, deleteFragment } = board;
-    board.pointerDown = (event) => {
+    const { keyDown, pointerUp, globalPointerUp, setFragment, insertFragment, deleteFragment } = board;
+    board.pointerUp = (event) => {
         const elementOfFocusedImage = getElementOfFocusedImage(board);
-        if (!isContextmenu(event) &&
+        if (elementOfFocusedImage &&
+            MindElement.isMindElement(board, elementOfFocusedImage) &&
+            !isContextmenu(event) &&
             (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection))) {
-            if (elementOfFocusedImage && MindElement.isMindElement(board, elementOfFocusedImage)) {
-                removeImageFocus(board, elementOfFocusedImage);
-            }
-            pointerDown(event);
+            removeImageFocus(board, elementOfFocusedImage);
+            pointerUp(event);
             return;
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
@@ -3701,7 +3703,7 @@ const withNodeImage = (board) => {
             isHitImage(board, hitElement, point);
         if (isHitImageResult && elementOfFocusedImage && hitElement === elementOfFocusedImage) {
             temporaryDisableSelection(board);
-            pointerDown(event);
+            pointerUp(event);
             return;
         }
         if (elementOfFocusedImage && MindElement.isMindElement(board, elementOfFocusedImage)) {
@@ -3711,16 +3713,16 @@ const withNodeImage = (board) => {
             temporaryDisableSelection(board);
             addImageFocus(board, hitElement);
         }
-        pointerDown(event);
+        pointerUp(event);
     };
-    board.keydown = (event) => {
+    board.keyDown = (event) => {
         const selectedImageElement = getElementOfFocusedImage(board);
         if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
             addSelectedElement(board, selectedImageElement);
             MindTransforms.removeImage(board, selectedImageElement);
             return;
         }
-        keydown(event);
+        keyDown(event);
     };
     board.globalPointerUp = (event) => {
         if (PlaitBoard.isFocus(board)) {
@@ -3781,7 +3783,7 @@ const withNodeResize = (board) => {
         canResize: () => {
             return !isDragging(board);
         },
-        detect: (point) => {
+        hitTest: (point) => {
             const newTargetElement = getSelectedTarget(board, point);
             if (newTargetElement) {
                 return {
@@ -3802,7 +3804,7 @@ const withNodeResize = (board) => {
         },
         onResize: (resizeRef, resizeState) => {
             const zoom = board.viewport.zoom;
-            let resizedWidth = targetElementRef.currentWidth + resizeState.offsetX / zoom;
+            let resizedWidth = targetElementRef.currentWidth + Point.getOffsetX(resizeState.startPoint, resizeState.endPoint);
             if (resizedWidth <= targetElementRef.minWidth) {
                 resizedWidth = targetElementRef.minWidth;
             }
@@ -3843,7 +3845,7 @@ const withNodeImageResize = (board) => {
         canResize: () => {
             return true;
         },
-        detect: (point) => {
+        hitTest: (point) => {
             const elementOfFocusedImage = getElementOfFocusedImage(board);
             const selectedMindElement = elementOfFocusedImage && MindElement.isMindElement(board, elementOfFocusedImage) ? elementOfFocusedImage : undefined;
             if (selectedMindElement) {
@@ -3859,22 +3861,19 @@ const withNodeImageResize = (board) => {
             return null;
         },
         onResize: (resizeRef, resizeState) => {
-            let offsetX = resizeState.offsetX;
-            let offsetY = resizeState.offsetY;
-            if (resizeRef.handle === ResizeHandle.nw || resizeRef.handle === ResizeHandle.sw) {
-                offsetX = -offsetX;
-            }
+            const offsetX = Point.getOffsetX(resizeState.startPoint, resizeState.endPoint);
             const originWidth = resizeRef.element.data.image.width;
             const originHeight = resizeRef.element.data.image.height;
+            const path = resizeRef.path;
             let width = originWidth + offsetX;
             if (width <= 100) {
                 width = 100;
             }
-            const ratio = originWidth / width;
-            const height = originHeight / ratio;
+            const ratio = originWidth / originHeight;
+            const height = width / ratio;
             const imageItem = { ...resizeRef.element.data.image, width, height };
-            MindTransforms.setImage(board, PlaitNode.get(board, resizeRef.path), imageItem);
-            addElementOfFocusedImage(board, PlaitNode.get(board, resizeRef.path));
+            MindTransforms.setImage(board, PlaitNode.get(board, path), imageItem);
+            addElementOfFocusedImage(board, PlaitNode.get(board, path));
         }
     };
     withResize(board, options);
@@ -4066,7 +4065,7 @@ const getNextSelectedElement = (board, firstLevelElements) => {
 
 const withMind = (baseBoard) => {
     const board = baseBoard;
-    const { drawElement, dblclick, isRectangleHit, isHit, getRectangle, isMovable, isRecursion, isAlign, isImageBindingAllowed } = board;
+    const { drawElement, dblClick, isRectangleHit, isHit, getRectangle, isMovable, isRecursion, isAlign, isImageBindingAllowed } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -4099,7 +4098,7 @@ const withMind = (baseBoard) => {
     board.isRectangleHit = (element, selection) => {
         if (MindElement.isMindElement(board, element)) {
             const client = getRectangleByNode(MindElement.getNode(element));
-            const isHit = RectangleClient.isHit(RectangleClient.toRectangleClient([selection.anchor, selection.focus]), client);
+            const isHit = RectangleClient.isHit(RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]), client);
             return isHit;
         }
         return isRectangleHit(element, selection);
@@ -4107,7 +4106,7 @@ const withMind = (baseBoard) => {
     board.isHit = (element, point) => {
         if (MindElement.isMindElement(board, element)) {
             const client = getRectangleByNode(MindElement.getNode(element));
-            const isHit = RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), client);
+            const isHit = RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), client);
             return isHit;
         }
         return isHit(element, point);
@@ -4130,9 +4129,9 @@ const withMind = (baseBoard) => {
         }
         return isAlign(element);
     };
-    board.dblclick = (event) => {
+    board.dblClick = (event) => {
         if (PlaitBoard.isReadonly(board)) {
-            dblclick(event);
+            dblClick(event);
             return;
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
@@ -4148,9 +4147,9 @@ const withMind = (baseBoard) => {
         if (PlaitBoard.hasBeenTextEditing(board)) {
             return;
         }
-        dblclick(event);
+        dblClick(event);
     };
-    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverDetect(withMindFragment(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))))));
+    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverHitTest(withMindFragment(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))))));
 };
 
 class MindEmojiBaseComponent {