@plait/common 0.32.0 → 0.34.0

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, getSelectedElements, PlaitElement, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, distanceBetweenPointAndPoint, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, Direction, Point, hotkeys, PlaitContextService, downScale, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, Direction, distanceBetweenPointAndPoint, Point, hotkeys, PlaitElement, PlaitContextService, downScale, getSelectedElements, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { Directive, Input } from '@angular/core';
@@ -42,11 +42,11 @@ class Generator {
         this.board = board;
         this.options = options;
     }
-    draw(element, parentG, data) {
+    processDrawing(element, parentG, data) {
         if (this.canDraw && this.canDraw(element, data)) {
-            const g = this.baseDraw(element, data);
+            const g = this.draw(element, data);
             if (g) {
-                if (this.g) {
+                if (this.g && parentG.contains(this.g)) {
                     this.g.replaceWith(g);
                 }
                 else {
@@ -94,7 +94,7 @@ class ActiveGenerator extends Generator {
             return false;
         }
     }
-    baseDraw(element, data) {
+    draw(element, data) {
         const activeG = createG();
         const rectangle = this.options.getRectangle(element);
         const delta = this.options.getStrokeWidth();
@@ -131,7 +131,7 @@ class ImageGenerator extends Generator {
     canDraw(element, data) {
         return !!this.options.getImageItem(element);
     }
-    baseDraw(element, viewContainerRef) {
+    draw(element, viewContainerRef) {
         const g = createG();
         const foreignRectangle = this.options.getRectangle(element);
         this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
@@ -173,54 +173,6 @@ class ImageGenerator extends Generator {
     }
 }
 
-const setProperty = (board, options, callback) => {
-    const selectedElements = getSelectedElements(board);
-    selectedElements.forEach(element => {
-        const path = PlaitBoard.findPath(board, element);
-        if (callback) {
-            const component = PlaitElement.getComponent(element);
-            callback(component, path);
-        }
-        else {
-            Transforms.setNode(board, options, path);
-        }
-    });
-};
-
-const setStrokeStyle = (board, strokeStyle) => {
-    setProperty(board, { strokeStyle });
-};
-const setFillColor = (board, fill) => {
-    setProperty(board, { fill });
-};
-const setStrokeColor = (board, strokeColor) => {
-    setProperty(board, { strokeColor });
-};
-const setStrokeWidth = (board, strokeWidth) => {
-    setProperty(board, { strokeWidth });
-};
-const PropertyTransforms = {
-    setFillColor,
-    setStrokeStyle,
-    setProperty,
-    setStrokeWidth,
-    setStrokeColor
-};
-
-const normalizeShapePoints = (points, shift = false) => {
-    let start = points[0];
-    let end = points[1];
-    if (shift) {
-        const width = Math.abs(start[0] - end[0]);
-        const height = Math.abs(start[1] - end[1]);
-        const edge = Math.max(height, width);
-        end = [start[0] + (end[0] > start[0] ? edge : -edge), start[1] + (end[1] > start[1] ? edge : -edge)];
-    }
-    const leftTopPoint = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
-    let rightBottomPoint = [Math.max(start[0], end[0]), Math.max(start[1], end[1])];
-    return [leftTopPoint, rightBottomPoint];
-};
-
 const getResizeHandleByIndex = (index) => {
     switch (index) {
         case 0:
@@ -312,107 +264,6 @@ const removeResizing = (board, key) => {
     IS_RESIZING.delete(board);
 };
 
-const generalCanResize = (board, event) => {
-    return (PlaitBoard.isReadonly(board) ||
-        PlaitBoard.hasBeenTextEditing(board) ||
-        !PlaitBoard.isPointer(board, PlaitPointerType.hand) ||
-        !isMainPointer(event));
-};
-const withResize = (board, options) => {
-    const { pointerDown, pointerMove, globalPointerUp } = board;
-    let resizeDetectResult = null;
-    let resizeRef = null;
-    let startPoint = null;
-    let hoveDetectResult = null;
-    board.pointerDown = (event) => {
-        if (!options.canResize() || !generalCanResize(board, event)) {
-            pointerDown(event);
-            return;
-        }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        resizeDetectResult = options.detect(point);
-        if (resizeDetectResult) {
-            if (resizeDetectResult.cursorClass) {
-                PlaitBoard.getBoardContainer(board).classList.add(`${resizeDetectResult.cursorClass}`);
-            }
-            startPoint = [event.x, event.y];
-            resizeRef = {
-                path: PlaitBoard.findPath(board, resizeDetectResult.element),
-                element: resizeDetectResult.element,
-                handle: resizeDetectResult.handle
-            };
-            preventTouchMove(board, event, true);
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        if (!options.canResize() || !generalCanResize(board, event)) {
-            pointerMove(event);
-            return;
-        }
-        if (startPoint && resizeDetectResult && !isResizing(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) {
-                addResizing(board, resizeRef, options.key);
-            }
-        }
-        if (isResizing(board) && startPoint) {
-            // prevent text from being selected
-            event.preventDefault();
-            const endTransformPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            throttleRAF(() => {
-                const endPoint = [event.x, event.y];
-                if (startPoint && resizeRef) {
-                    handleTouchTarget(board);
-                    const offsetX = endPoint[0] - startPoint[0];
-                    const offsetY = endPoint[1] - startPoint[1];
-                    options.onResize(resizeRef, { offsetX, offsetY, endTransformPoint });
-                    MERGING.set(board, true);
-                }
-            });
-            return;
-        }
-        else {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const resizeDetectResult = options.detect(point);
-            if (resizeDetectResult) {
-                if (hoveDetectResult && resizeDetectResult.cursorClass !== hoveDetectResult.cursorClass) {
-                    PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
-                }
-                hoveDetectResult = resizeDetectResult;
-                if (hoveDetectResult.cursorClass) {
-                    PlaitBoard.getBoardContainer(board).classList.add(`${hoveDetectResult.cursorClass}`);
-                }
-            }
-            else {
-                if (hoveDetectResult) {
-                    if (hoveDetectResult.cursorClass) {
-                        PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
-                    }
-                    hoveDetectResult = null;
-                }
-            }
-        }
-        pointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        globalPointerUp(event);
-        if (isResizing(board) || resizeDetectResult) {
-            options.endResize && options.endResize(resizeRef);
-            removeResizing(board, options.key);
-            startPoint = null;
-            resizeDetectResult = null;
-            resizeRef = null;
-            MERGING.set(board, false);
-            preventTouchMove(board, event, false);
-        }
-    };
-    return board;
-};
-
 const handleDirectionFactors = {
     [Direction.left]: { x: -1, y: 0 },
     [Direction.right]: { x: 1, y: 0 },
@@ -1156,6 +1007,164 @@ const getNextPoint = (point, outerRectangle, direction) => {
     }
 };
 
+const map = new Map();
+const memorizeLatest = (memorizedKey, propertyKey, propertyValue) => {
+    let obj = map.has(memorizedKey) ? map.get(memorizedKey) : {};
+    obj[propertyKey] = propertyValue;
+    map.set(memorizedKey, obj);
+};
+const getMemorizedLatest = (memorizedKey) => {
+    return map.get(memorizedKey);
+};
+
+const setProperty = (board, properties, options) => {
+    const selectedElements = getSelectedElements(board);
+    selectedElements.forEach(element => {
+        const path = PlaitBoard.findPath(board, element);
+        const memorizeKey = options?.getMemorizeKey ? options?.getMemorizeKey(element) : '';
+        for (let key in properties) {
+            memorizeKey && memorizeLatest(memorizeKey, key, properties[key]);
+        }
+        if (options?.callback) {
+            options.callback(element, path);
+        }
+        else {
+            Transforms.setNode(board, properties, path);
+        }
+    });
+};
+const setStrokeStyle = (board, strokeStyle) => {
+    setProperty(board, { strokeStyle });
+};
+const setFillColor = (board, fill) => {
+    setProperty(board, { fill });
+};
+const setStrokeColor = (board, strokeColor) => {
+    setProperty(board, { strokeColor });
+};
+const setStrokeWidth = (board, strokeWidth) => {
+    setProperty(board, { strokeWidth });
+};
+const PropertyTransforms = {
+    setFillColor,
+    setStrokeStyle,
+    setProperty,
+    setStrokeWidth,
+    setStrokeColor
+};
+
+const normalizeShapePoints = (points, shift = false) => {
+    let start = points[0];
+    let end = points[1];
+    if (shift) {
+        const width = Math.abs(start[0] - end[0]);
+        const height = Math.abs(start[1] - end[1]);
+        const edge = Math.max(height, width);
+        end = [start[0] + (end[0] > start[0] ? edge : -edge), start[1] + (end[1] > start[1] ? edge : -edge)];
+    }
+    const leftTopPoint = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
+    let rightBottomPoint = [Math.max(start[0], end[0]), Math.max(start[1], end[1])];
+    return [leftTopPoint, rightBottomPoint];
+};
+
+const generalCanResize = (board, event) => {
+    return (!PlaitBoard.isReadonly(board) && !PlaitBoard.hasBeenTextEditing(board) && PlaitBoard.isPointer(board, PlaitPointerType.selection));
+};
+const withResize = (board, options) => {
+    const { pointerDown, pointerMove, globalPointerUp } = board;
+    let resizeDetectResult = null;
+    let resizeRef = null;
+    let startPoint = null;
+    let hoveDetectResult = null;
+    board.pointerDown = (event) => {
+        if (!options.canResize() || !generalCanResize(board, event) || !isMainPointer(event)) {
+            pointerDown(event);
+            return;
+        }
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        resizeDetectResult = options.detect(point);
+        if (resizeDetectResult) {
+            if (resizeDetectResult.cursorClass) {
+                PlaitBoard.getBoardContainer(board).classList.add(`${resizeDetectResult.cursorClass}`);
+            }
+            startPoint = [event.x, event.y];
+            resizeRef = {
+                path: PlaitBoard.findPath(board, resizeDetectResult.element),
+                element: resizeDetectResult.element,
+                handle: resizeDetectResult.handle
+            };
+            preventTouchMove(board, event, true);
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        if (!options.canResize() || !generalCanResize(board, event)) {
+            pointerMove(event);
+            return;
+        }
+        if (startPoint && resizeDetectResult && !isResizing(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) {
+                addResizing(board, resizeRef, options.key);
+            }
+        }
+        if (isResizing(board) && startPoint) {
+            // prevent text from being selected
+            event.preventDefault();
+            const endTransformPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            throttleRAF(() => {
+                const endPoint = [event.x, event.y];
+                if (startPoint && resizeRef) {
+                    handleTouchTarget(board);
+                    const offsetX = endPoint[0] - startPoint[0];
+                    const offsetY = endPoint[1] - startPoint[1];
+                    options.onResize(resizeRef, { offsetX, offsetY, endTransformPoint });
+                    MERGING.set(board, true);
+                }
+            });
+            return;
+        }
+        else {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const resizeDetectResult = options.detect(point);
+            if (resizeDetectResult) {
+                if (hoveDetectResult && resizeDetectResult.cursorClass !== hoveDetectResult.cursorClass) {
+                    PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
+                }
+                hoveDetectResult = resizeDetectResult;
+                if (hoveDetectResult.cursorClass) {
+                    PlaitBoard.getBoardContainer(board).classList.add(`${hoveDetectResult.cursorClass}`);
+                }
+            }
+            else {
+                if (hoveDetectResult) {
+                    if (hoveDetectResult.cursorClass) {
+                        PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
+                    }
+                    hoveDetectResult = null;
+                }
+            }
+        }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        globalPointerUp(event);
+        if (isResizing(board) || resizeDetectResult) {
+            options.endResize && options.endResize(resizeRef);
+            removeResizing(board, options.key);
+            startPoint = null;
+            resizeDetectResult = null;
+            resizeRef = null;
+            MERGING.set(board, false);
+            preventTouchMove(board, event, false);
+        }
+    };
+    return board;
+};
+
 class CommonPluginElement extends PlaitPluginElementComponent {
     constructor() {
         super(...arguments);
@@ -1226,7 +1235,7 @@ class ImageBaseComponent {
     drawFocus() {
         if (this.initialized) {
             const activeG = PlaitBoard.getElementActiveHost(this.board);
-            this.activeGenerator.draw({}, activeG, { selected: this._isFocus });
+            this.activeGenerator.processDrawing({}, activeG, { selected: this._isFocus });
         }
     }
     ngOnDestroy() {
@@ -1266,5 +1275,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, BASE, BoardCreationMode, CommonPluginElement, DEFAULT_ROUTE_MARGIN, Generator, IS_RESIZING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ResizeCursorClass, ResizeHandle, TRANSPARENT, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, getExtendPoint, getFactorByPoints, getGraphPoints, getNextPoint, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, selectImage, setCreationMode, withResize };
+export { AStar, ActiveGenerator, BASE, BoardCreationMode, CommonPluginElement, DEFAULT_ROUTE_MARGIN, Generator, IS_RESIZING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ResizeCursorClass, ResizeHandle, TRANSPARENT, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, getExtendPoint, getFactorByPoints, getGraphPoints, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, withResize };
 //# sourceMappingURL=plait-common.mjs.map