@plait/common 0.62.0-next.0 → 0.62.0-next.10

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, createG, setStrokeLinecap, drawRectangle, SELECTION_RECTANGLE_CLASS_NAME, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, isSelectionMoving, getSelectedElements, distanceBetweenPointAndPoint, Point, Direction, hotkeys, createDebugGenerator, createForeignObject, ACTIVE_STROKE_WIDTH, updateForeignObject, Transforms, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, getRectangleByGroup, ElementFlavour, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement, updateForeignObjectWidth, IS_TEXT_EDITABLE } from '@plait/core';
+import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, createG, setStrokeLinecap, drawRectangle, SELECTION_RECTANGLE_CLASS_NAME, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, isSelectionMoving, getSelectedElements, distanceBetweenPointAndPoint, Point, Direction, hotkeys, createDebugGenerator, createForeignObject, ACTIVE_STROKE_WIDTH, updateForeignObject, Transforms, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, getRectangleByGroup, ElementFlavour, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement, debounce, updateForeignObjectWidth, IS_TEXT_EDITABLE } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import { Node, Operation, Transforms as Transforms$1, Range, Editor } from 'slate';
 import { fromEvent, timer } from 'rxjs';
@@ -12,6 +12,7 @@ const TRANSPARENT = 'transparent';
 const ROTATE_HANDLE_DISTANCE_TO_ELEMENT = 20;
 const ROTATE_HANDLE_SIZE = 18;
 const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
+const DEFAULT_FILL = 'none';
 
 var MediaKeys;
 (function (MediaKeys) {
@@ -1226,6 +1227,63 @@ const removeRotating = (board) => {
     setDragging(board, false);
 };
 
+const getElementArea = (board, element) => {
+    const rectangle = board.getRectangle(element);
+    if (rectangle) {
+        return rectangle.width * rectangle.height;
+    }
+    return 0;
+};
+const sortElementsByArea = (board, elements, direction = 'asc') => {
+    return elements.sort((a, b) => {
+        const areaA = getElementArea(board, a);
+        const areaB = getElementArea(board, b);
+        return direction === 'asc' ? areaA - areaB : areaB - areaA;
+    });
+};
+const isFilled = (fill) => {
+    return fill && fill !== DEFAULT_FILL && fill !== TRANSPARENT;
+};
+
+function animate(tween, duration, ease, callback) {
+    const start = getTimestamp();
+    let stopAnimation = false;
+    function tick(now) {
+        if (stopAnimation) {
+            return;
+        }
+        const elapsed = now - start;
+        const t = Math.min(elapsed / duration, 1);
+        tween(ease(t));
+        if (t < 1) {
+            requestAnimationFrame(tick);
+        }
+        else if (callback) {
+            callback();
+        }
+    }
+    requestAnimationFrame(tick);
+    return {
+        stop: () => (stopAnimation = true),
+        start: () => {
+            stopAnimation = false;
+            requestAnimationFrame(tick);
+        }
+    };
+}
+function getTimestamp() {
+    if (window.performance && window.performance.now) {
+        return window.performance.now();
+    }
+    else {
+        return Date.now();
+    }
+}
+function linear(t) {
+    return t;
+}
+
+const FOREIGN_OBJECT_IMAGE_CLASS_NAME = 'foreign-object-image';
 class ImageGenerator extends Generator {
     static { this.key = 'image-generator'; }
     constructor(board, options) {
@@ -1242,6 +1300,7 @@ class ImageGenerator extends Generator {
         const g = createG();
         const foreignRectangle = this.options.getRectangle(element);
         this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+        this.foreignObject.classList.add(FOREIGN_OBJECT_IMAGE_CLASS_NAME);
         g.append(this.foreignObject);
         const props = {
             board: this.board,
@@ -1886,29 +1945,12 @@ const updateSiblingElementGroupId = (board, removeGroups) => {
 };
 
 class ImageBaseComponent {
-    constructor() {
-        this.initialized = false;
-    }
-    set imageItem(value) {
-        this._imageItem = value;
-        if (this.initialized) {
-            this.afterImageItemChange(this._imageItem, value);
-        }
-    }
-    get imageItem() {
-        return this._imageItem;
-    }
     set isFocus(value) {
         this._isFocus = value;
     }
     get isFocus() {
         return this._isFocus;
     }
-    initialize() {
-        this.initialized = true;
-    }
-    destroy() {
-    }
 }
 
 function measureElement(element, options, containerMaxWidth = 10000) {
@@ -1975,6 +2017,15 @@ class TextManage {
         this.board = board;
         this.options = options;
         this.isEditing = false;
+        // add debounce to avoid trigger more times(from onChange and onComposition) onChange when user is typing chinese
+        // be going to attract board children are overwritten when fired more times onChange(eg: board is embed in editor)
+        this.textChange = debounce((data) => {
+            if (!data) {
+                return;
+            }
+            this.options.onChange && this.options.onChange({ ...data });
+            MERGING.set(this.board, true);
+        }, 0);
         this.getSize = (element) => {
             const computedStyle = window.getComputedStyle(this.foreignObject.children[0]);
             const fontFamily = computedStyle.fontFamily;
@@ -2005,8 +2056,7 @@ class TextManage {
             onChange: (data) => {
                 if (data.operations.some(op => !Operation.isSelectionOperation(op))) {
                     const { width, height } = this.getSize();
-                    this.options.onChange && this.options.onChange({ ...data, width, height });
-                    MERGING.set(this.board, true);
+                    this.textChange({ ...data, width, height });
                 }
             },
             afterInit: (editor) => {
@@ -2016,8 +2066,7 @@ class TextManage {
                 const fakeRoot = buildCompositionData(this.editor, event.data);
                 if (fakeRoot) {
                     const sizeData = this.getSize(fakeRoot.children[0]);
-                    this.options.onChange && this.options.onChange(sizeData);
-                    MERGING.set(this.board, true);
+                    this.textChange(sizeData);
                 }
             }
         };
@@ -2039,7 +2088,7 @@ class TextManage {
         };
         this.textComponentRef.update(props);
     }
-    edit(callback) {
+    edit(callback, exitEdit) {
         this.isEditing = true;
         IS_TEXT_EDITABLE.set(this.board, true);
         const props = {
@@ -2063,7 +2112,7 @@ class TextManage {
             if (event.isComposing) {
                 return;
             }
-            if (event.key === 'Escape' || (event.key === 'Enter' && !event.shiftKey) || event.key === 'Tab') {
+            if (event.key === 'Escape' || event.key === 'Tab' || (exitEdit ? exitEdit(event) : false)) {
                 event.preventDefault();
                 event.stopPropagation();
                 exitCallback();
@@ -2135,5 +2184,5 @@ const withImage = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, AlignTransform, Alignment, BASE, BoardCreationMode, CommonElementFlavour, DEFAULT_FONT_FAMILY, DEFAULT_ROUTE_MARGIN, ELEMENT_TO_TEXT_MANAGES, Generator, GroupComponent, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PlaitCommonElementRef, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, TRANSPARENT, TextManage, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildCompositionData, buildImage, buildText, calculatePolylineLength, canResize, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, findFirstTextEditor, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getEditingTextEditor, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getLineHeightByFontSize, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextEditorsByElement, getTextManages, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, measureElement, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withGroup, withImage, withResize, withText };
+export { AStar, ActiveGenerator, AlignTransform, Alignment, BASE, BoardCreationMode, CommonElementFlavour, DEFAULT_FILL, DEFAULT_FONT_FAMILY, DEFAULT_ROUTE_MARGIN, ELEMENT_TO_TEXT_MANAGES, FOREIGN_OBJECT_IMAGE_CLASS_NAME, Generator, GroupComponent, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PlaitCommonElementRef, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, TRANSPARENT, TextManage, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, animate, buildCompositionData, buildImage, buildText, calculatePolylineLength, canResize, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, findFirstTextEditor, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getEditingTextEditor, getElementArea, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getLineHeightByFontSize, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextEditorsByElement, getTextManages, getTimestamp, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isFilled, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, linear, measureElement, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, sortElementsByArea, withGroup, withImage, withResize, withText };
 //# sourceMappingURL=plait-common.mjs.map