@plait/core 0.35.0 → 0.37.0

package/fesm2022/plait-core.mjs

@@ -281,8 +281,15 @@ const MAC_META = 224;
 
 var ResizeCursorClass;
 (function (ResizeCursorClass) {
-    ResizeCursorClass["ew-resize"] = "ew-resize";
+    ResizeCursorClass["ew"] = "ew-resize";
+    ResizeCursorClass["ns"] = "ns-resize";
+    ResizeCursorClass["nesw"] = "nesw-resize";
+    ResizeCursorClass["nwse"] = "nwse-resize";
 })(ResizeCursorClass || (ResizeCursorClass = {}));
+var CursorClass;
+(function (CursorClass) {
+    CursorClass["crosshair"] = "crosshair";
+})(CursorClass || (CursorClass = {}));
 
 const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
 const ACTIVE_STROKE_WIDTH = 1;
@@ -290,6 +297,7 @@ const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
 
 const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
 const HOST_CLASS_NAME = 'plait-board-container';
+const ACTIVE_MOVING_CLASS_NAME = 'active-with-moving';
 const SCROLL_BAR_WIDTH = 20;
 const MAX_RADIUS = 16;
 const POINTER_BUTTON = {
@@ -870,6 +878,9 @@ function normalizePoint(point) {
         }
         : point;
 }
+const RgbaToHEX = (Rgb, opacity) => {
+    return Rgb + Math.floor(opacity * 255).toString(16);
+};
 
 /**
  * Check whether to merge an operation into the previous operation.
@@ -1565,7 +1576,7 @@ function convertImageToBase64(url) {
  * @param clonedNode clone node
  */
 function cloneCSSStyle(nativeNode, clonedNode) {
-    const targetStyle = clonedNode.style;
+    const targetStyle = clonedNode?.style;
     if (!targetStyle) {
         return;
     }
@@ -1582,48 +1593,41 @@ function cloneCSSStyle(nativeNode, clonedNode) {
     }
 }
 /**
- * clone svg element
- * @param board board
- * @param options parameter configuration
- * @returns clone svg element
+ * batch clone target styles
+ * @param sourceNode
+ * @param cloneNode
+ * @param inlineStyleClassNames
  */
-async function cloneSvg(board, options) {
-    const elementHostBox = getRectangleByElements(board, board.children, true);
-    const { width, height, x, y } = elementHostBox;
-    const { padding = 4, inlineStyleClassNames } = options;
-    const sourceSvg = PlaitBoard.getHost(board);
-    const cloneSvgElement = sourceSvg.cloneNode(true);
-    cloneSvgElement.style.width = `${width}px`;
-    cloneSvgElement.style.height = `${height}px`;
-    cloneSvgElement.style.backgroundColor = '';
-    cloneSvgElement.setAttribute('width', `${width}`);
-    cloneSvgElement.setAttribute('height', `${height}`);
-    cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
+function batchCloneCSSStyle(sourceNode, cloneNode, inlineStyleClassNames) {
     if (inlineStyleClassNames) {
         const classNames = inlineStyleClassNames + `,.${IMAGE_CONTAINER}`;
-        const sourceNodes = Array.from(sourceSvg.querySelectorAll(classNames));
-        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(classNames));
+        const sourceNodes = Array.from(sourceNode.querySelectorAll(classNames));
+        const cloneNodes = Array.from(cloneNode.querySelectorAll(classNames));
         sourceNodes.forEach((node, index) => {
-            const cloneNode = cloneNodes[index];
             const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
-            const cloneChildElements = Array.from(cloneNode.querySelectorAll('*')).filter(isElementNode);
+            const cloneChildElements = Array.from(cloneNodes[index].querySelectorAll('*')).filter(isElementNode);
             sourceNodes.push(...childElements);
             cloneNodes.push(...cloneChildElements);
         });
         // processing styles
         sourceNodes.map((node, index) => {
-            const cloneNode = cloneNodes[index];
-            cloneCSSStyle(node, cloneNode);
+            cloneCSSStyle(node, cloneNodes[index]);
         });
     }
-    // 使用 Promise.all 等待所有异步操作完成
-    const sourceImageNodes = Array.from(sourceSvg.querySelectorAll(`.${IMAGE_CONTAINER}`));
-    const cloneImageNodes = Array.from(cloneSvgElement.querySelectorAll(`.${IMAGE_CONTAINER}`));
+}
+/**
+ * convert images in target nodes in batches
+ * @param sourceNode
+ * @param cloneNode
+ */
+async function batchConvertImage(sourceNode, cloneNode) {
+    const sourceImageNodes = Array.from(sourceNode.querySelectorAll(`.${IMAGE_CONTAINER}`));
+    const cloneImageNodes = Array.from(cloneNode.querySelectorAll(`.${IMAGE_CONTAINER}`));
     await Promise.all(sourceImageNodes.map((_, index) => {
         return new Promise(resolve => {
-            const cloneNode = cloneImageNodes[index];
+            const cloneImageNode = cloneImageNodes[index];
             // processing image
-            const image = cloneNode.querySelector('img');
+            const image = cloneImageNode.querySelector('img');
             const url = image?.getAttribute('src');
             if (!url) {
                 return resolve(true);
@@ -1634,6 +1638,33 @@ async function cloneSvg(board, options) {
             });
         });
     }));
+}
+/**
+ * clone svg element
+ * @param board board
+ * @param options parameter configuration
+ * @returns clone svg element
+ */
+function cloneSvg(board, elements, rectangle, options) {
+    const { width, height, x, y } = rectangle;
+    const { padding = 4, inlineStyleClassNames } = options;
+    const sourceSvg = PlaitBoard.getHost(board);
+    const selectedGElements = elements.map(value => PlaitElement.getComponent(value).g);
+    const cloneSvgElement = sourceSvg.cloneNode();
+    const newHostElement = PlaitBoard.getElementHost(board).cloneNode();
+    cloneSvgElement.style.width = `${width}px`;
+    cloneSvgElement.style.height = `${height}px`;
+    cloneSvgElement.style.backgroundColor = '';
+    cloneSvgElement.setAttribute('width', `${width}`);
+    cloneSvgElement.setAttribute('height', `${height}`);
+    cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
+    selectedGElements.forEach((child, i) => {
+        const cloneChild = child.cloneNode(true);
+        batchCloneCSSStyle(child, cloneChild, inlineStyleClassNames);
+        batchConvertImage(child, cloneChild);
+        newHostElement.appendChild(cloneChild);
+    });
+    cloneSvgElement.appendChild(newHostElement);
     return cloneSvgElement;
 }
 /**
@@ -1646,12 +1677,13 @@ async function toImage(board, options) {
     if (!board) {
         return undefined;
     }
-    const elementHostBox = getRectangleByElements(board, board.children, true);
+    const elements = options?.elements || findElements(board, { match: () => true, recursion: () => true });
+    const targetRectangle = getRectangleByElements(board, elements, false);
     const { ratio = 2, fillStyle = 'transparent' } = options;
-    const { width, height } = elementHostBox;
+    const { width, height } = targetRectangle;
     const ratioWidth = width * ratio;
     const ratioHeight = height * ratio;
-    const cloneSvgElement = await cloneSvg(board, options);
+    const cloneSvgElement = await cloneSvg(board, elements, targetRectangle, options);
     const { canvas, ctx } = createCanvas(ratioWidth, ratioHeight, fillStyle);
     const svgStr = new XMLSerializer().serializeToString(cloneSvgElement);
     const imgSrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
@@ -1751,6 +1783,7 @@ const handleTouchTarget = (board) => {
         const host = createG();
         host.appendChild(touchRef.target);
         touchRef.host = host;
+        host.classList.add('touch-target');
         PlaitBoard.getElementActiveHost(board).append(host);
     }
 };
@@ -2564,7 +2597,7 @@ function withSelection(board) {
                     fill: SELECTION_FILL_COLOR,
                     fillStyle: 'solid'
                 });
-                PlaitBoard.getHost(board).append(selectionMovingG);
+                PlaitBoard.getElementActiveHost(board).append(selectionMovingG);
             }
         }
         globalPointerMove(event);
@@ -2682,7 +2715,7 @@ function createSelectionRectangleG(board) {
             fillStyle: 'solid'
         });
         selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
-        PlaitBoard.getHost(board).append(selectionRectangleG);
+        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
         return selectionRectangleG;
     }
     return null;
@@ -3413,7 +3446,7 @@ function withMoving(board) {
         const host = BOARD_TO_HOST.get(board);
         const point = transformPoint(board, toPoint(event.x, event.y, host));
         let movableElements = board.children.filter(item => board.isMovable(item));
-        if (movableElements.length && !isPreventTouchMove(board)) {
+        if (!PlaitBoard.isReadonly(board) && movableElements.length && !isPreventTouchMove(board) && isMainPointer(event)) {
             startPoint = point;
             const selectedMovableElements = getSelectedElements(board).filter(item => movableElements.includes(item));
             const hitElement = getHitElementByPoint(board, point);
@@ -3442,8 +3475,8 @@ function withMoving(board) {
             const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
             offsetX = endPoint[0] - startPoint[0];
             offsetY = endPoint[1] - startPoint[1];
-            const tolerance = 5;
-            if (Math.abs(offsetX) > tolerance || Math.abs(offsetY) > tolerance || getMovingElements(board).length > 0) {
+            const distance = distanceBetweenPointAndPoint(...endPoint, ...startPoint);
+            if (distance > PRESS_AND_MOVE_BUFFER || getMovingElements(board).length > 0) {
                 throttleRAF(() => {
                     if (!activeElementsRectangle) {
                         return;
@@ -3458,6 +3491,7 @@ function withMoving(board) {
                     offsetX -= ref.deltaX;
                     offsetY -= ref.deltaY;
                     alignG = ref.g;
+                    alignG.classList.add(ACTIVE_MOVING_CLASS_NAME);
                     PlaitBoard.getElementActiveHost(board).append(alignG);
                     handleTouchTarget(board);
                     const currentElements = activeElements.map(activeElement => {
@@ -4395,5 +4429,5 @@ function createModModifierKeys() {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downScale, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementByPoint, getHitElementsBySelection, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTemporaryRef, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, temporaryDisableSelection, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downScale, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementByPoint, getHitElementsBySelection, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTemporaryRef, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, temporaryDisableSelection, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map