@plait/common 0.52.0 → 0.54.0

package/fesm2022/plait-common.mjs

@@ -1,9 +1,9 @@
-import { setAngleForG, RectangleClient, drawCircle, PlaitBoard, createG, drawRectangle, createForeignObject, updateForeignObject, ResizeCursorClass, setDragging, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitElement, PlaitContextService, rotate, getSelectedElements, Transforms, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, createG, drawRectangle, createForeignObject, updateForeignObject, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitElement, PlaitContextService, createDebugGenerator, getSelectedElements, Transforms, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, ACTIVE_STROKE_WIDTH, getRectangleByGroup, PlaitPluginElementComponent, isSelectionMoving, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, GroupTransforms, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import { PlaitMarkEditor, MarkTypes, AlignEditor } from '@plait/text';
 import { Node, Transforms as Transforms$1, Editor } from 'slate';
 import * as i0 from '@angular/core';
-import { Directive, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Directive, Input } from '@angular/core';
 
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
@@ -54,8 +54,17 @@ class Generator {
                 }
                 this.g = g;
                 const rect = this.board.getRectangle(element);
-                if (rect && element.angle) {
-                    setAngleForG(g, RectangleClient.getCenterPoint(rect), element.angle);
+                if (rect) {
+                    let angle;
+                    if (PlaitGroupElement.isGroup(element)) {
+                        angle = getSelectionAngle(getElementsInGroup(this.board, element, true));
+                    }
+                    else {
+                        angle = element.angle;
+                    }
+                    if (angle) {
+                        setAngleForG(g, RectangleClient.getCenterPoint(rect), angle);
+                    }
                 }
             }
             else {
@@ -178,12 +187,16 @@ class ImageGenerator extends Generator {
     updateImage(nodeG, previous, current) {
         if (previous !== current && this.componentRef) {
             this.componentRef.instance.imageItem = this.options.getImageItem(current);
+            this.componentRef.instance.element = current;
             this.componentRef.instance.getRectangle = () => {
                 return this.options.getRectangle(current);
             };
         }
         const currentForeignObject = this.options.getRectangle(current);
         updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
+        if (currentForeignObject && current.angle) {
+            setAngleForG(this.g, RectangleClient.getCenterPoint(currentForeignObject), current.angle);
+        }
         // solve image lose on move node
         if (this.foreignObject.children.length === 0) {
             this.foreignObject.append(this.componentRef.instance.nativeElement);
@@ -228,6 +241,14 @@ const getResizeCursorClassByIndex = (index) => {
             return null;
     }
 };
+const getRotatedResizeCursorClassByAngle = (cursor, angle) => {
+    const index = RESIZE_CURSORS.indexOf(cursor);
+    if (index >= 0) {
+        const temp = Math.round(angle / (Math.PI / 4));
+        cursor = RESIZE_CURSORS[(index + temp) % RESIZE_CURSORS.length];
+    }
+    return cursor;
+};
 const getRectangleResizeHandleRefs = (rectangle, diameter) => {
     const corners = RectangleClient.getCornerPoints(rectangle);
     const refs = corners.map((corner, index) => {
@@ -302,6 +323,16 @@ const isEdgeHandle = (board, handle) => {
 const isCornerHandle = (board, handle) => {
     return !isEdgeHandle(board, handle);
 };
+// 处理元素先旋转后resize导致的位置偏移
+const resetPointsAfterResize = (originRectangle, currentRectangle, originSelectionCenterPoint, currentSelectionCenterPoint, angle) => {
+    const correctSelectionCenterPoint = rotatePoints([currentSelectionCenterPoint], originSelectionCenterPoint, angle)[0];
+    const rotatedElementCenterPoint = rotatePoints([RectangleClient.getCenterPoint(currentRectangle)], originSelectionCenterPoint, angle)[0];
+    const currentPoints = RectangleClient.getPoints(currentRectangle);
+    const originRectangleCenterPoint = RectangleClient.getCenterPoint(originRectangle);
+    const correctElementCenterPoint = rotatePoints([rotatedElementCenterPoint], correctSelectionCenterPoint, -angle)[0];
+    const rotatedPoints = rotatePoints(currentPoints, originRectangleCenterPoint, angle);
+    return rotatePoints(rotatedPoints, correctElementCenterPoint, -angle);
+};
 
 function getUnitVectorByPointAndPoint(point1, point2) {
     const deltaX = point2[0] - point1[0];
@@ -335,6 +366,16 @@ function rotateVectorAnti90(vector) {
     const rotatedY = -x;
     return [rotatedX, rotatedY];
 }
+function rotateVector(vector, angle) {
+    if (!angle) {
+        return vector;
+    }
+    const x = vector[0];
+    const y = vector[1];
+    const rotatedX = x * Math.cos(angle) - y * Math.sin(angle);
+    const rotatedY = x * Math.sin(angle) + y * Math.cos(angle);
+    return [rotatedX, rotatedY];
+}
 
 function isPointOnSegment(point, startPoint, endPoint) {
     const distanceToStart = distanceBetweenPointAndPoint(point[0], point[1], startPoint[0], startPoint[1]);
@@ -885,7 +926,8 @@ class PointGraph {
     }
 }
 
-const generateElbowLineRoute = (options) => {
+const debugGenerator = createDebugGenerator('debug:plait:elbow-line-routing');
+const generateElbowLineRoute = (options, board) => {
     const { nextSourcePoint, nextTargetPoint } = options;
     const points = getGraphPoints(options);
     const graph = createGraph(points);
@@ -903,15 +945,18 @@ const generateElbowLineRoute = (options) => {
     const isHitY = RectangleClient.isHitY(options.sourceOuterRectangle, options.targetOuterRectangle);
     const centerX = isHitX ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, true);
     const centerY = isHitY ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, false);
-    route = routeAdjust(route, { centerX, centerY, sourceRectangle: options.sourceRectangle, targetRectangle: options.targetRectangle });
+    route = routeAdjust(route, { centerX, centerY, sourceRectangle: options.sourceRectangle, targetRectangle: options.targetRectangle }, board);
     return route;
 };
-const routeAdjust = (path, options) => {
+const routeAdjust = (path, options, board) => {
     const { sourceRectangle, targetRectangle, centerX, centerY } = options;
+    if (board) {
+        debugGenerator.clear();
+    }
     if (centerX !== undefined) {
         const optionsX = getAdjustOptions(path, centerX, true);
         const resultX = optionsX.pointOfHit &&
-            adjust(path, { parallelPaths: optionsX.parallelPaths, pointOfHit: optionsX.pointOfHit, sourceRectangle, targetRectangle });
+            adjust(path, { parallelPaths: optionsX.parallelPaths, pointOfHit: optionsX.pointOfHit, sourceRectangle, targetRectangle }, board);
         if (resultX) {
             path = resultX;
         }
@@ -919,14 +964,14 @@ const routeAdjust = (path, options) => {
     if (centerY !== undefined) {
         const optionsY = getAdjustOptions(path, centerY, false);
         const resultY = optionsY.pointOfHit &&
-            adjust(path, { parallelPaths: optionsY.parallelPaths, pointOfHit: optionsY.pointOfHit, sourceRectangle, targetRectangle });
+            adjust(path, { parallelPaths: optionsY.parallelPaths, pointOfHit: optionsY.pointOfHit, sourceRectangle, targetRectangle }, board);
         if (resultY) {
             path = resultY;
         }
     }
     return path;
 };
-const adjust = (route, options) => {
+const adjust = (route, options, board) => {
     const { parallelPaths, pointOfHit, sourceRectangle, targetRectangle } = options;
     let result = null;
     parallelPaths.forEach(parallelPath => {
@@ -935,7 +980,10 @@ const adjust = (route, options) => {
         // directly use getCornerPoints will bring the precision issue (eg: 263.6923375175286 - 57.130859375)
         const tempRect = RectangleClient.getRectangleByPoints(tempRectPoints);
         if (!RectangleClient.isHit(tempRect, sourceRectangle) && !RectangleClient.isHit(tempRect, targetRectangle)) {
-            const tempCorners = RectangleClient.getCornerPoints(tempRect);
+            const tempCorners = RectangleClient.getCornerPointsByPoints(tempRectPoints);
+            if (board) {
+                debugGenerator.drawRectangle(board, tempRect);
+            }
             const indexRangeInPath = [];
             const indexRangeInCorner = [];
             route.forEach((point, index) => {
@@ -950,7 +998,11 @@ const adjust = (route, options) => {
             const removeLength = Math.abs(indexRangeInPath[0] - indexRangeInPath[indexRangeInPath.length - 1]) + 1;
             newPath.splice(indexRangeInPath[0] + 1, removeLength - 2, missCorner);
             const turnCount = simplifyOrthogonalPoints([...route]).length - 1;
-            const newTurnCount = simplifyOrthogonalPoints([...newPath]).length - 1;
+            const simplifyPoints = simplifyOrthogonalPoints([...newPath]);
+            // if (board) {
+            //     debugGenerator.drawLine(board, simplifyPoints);
+            // }
+            const newTurnCount = simplifyPoints.length - 1;
             if (newTurnCount <= turnCount) {
                 result = newPath;
             }
@@ -1136,12 +1188,6 @@ const getMemorizedLatest = (memorizedKey) => {
     return map.get(memorizedKey);
 };
 
-const rotatePoints = (points, centerPoint, angle) => {
-    return points.map(point => {
-        return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle);
-    });
-};
-
 const setProperty = (board, properties, options) => {
     const selectedElements = getSelectedElements(board);
     selectedElements.forEach(element => {
@@ -1221,19 +1267,27 @@ const alignRight = (board) => {
     setOffset(board, getOffset);
 };
 function setOffset(board, getOffset) {
-    let elements = getSelectedElements(board);
-    elements = elements.filter(element => board.children.includes(element));
+    const elements = getHighestSelectedElements(board);
     const outerRectangle = getRectangleByElements(board, elements, false);
     elements.forEach(element => {
-        if (!element.points)
+        if (!element.points && !PlaitGroupElement.isGroup(element))
             return;
-        const path = PlaitBoard.findPath(board, element);
         const rectangle = board.getRectangle(element);
         const offset = getOffset(outerRectangle, rectangle);
-        const newPoints = element.points.map(p => [p[0] + offset[0], p[1] + offset[1]]);
-        Transforms.setNode(board, {
-            points: newPoints
-        }, path);
+        let updateElements = [];
+        if (PlaitGroupElement.isGroup(element)) {
+            updateElements = getElementsInGroup(board, element, true, false);
+        }
+        else if (element.points) {
+            updateElements = [element];
+        }
+        updateElements.forEach(item => {
+            const newPoints = item.points.map(p => [p[0] + offset[0], p[1] + offset[1]]);
+            const path = PlaitBoard.findPath(board, item);
+            Transforms.setNode(board, {
+                points: newPoints
+            }, path);
+        });
         MERGING.set(board, true);
     });
     MERGING.set(board, false);
@@ -1247,11 +1301,11 @@ const distributeVertical = (board) => {
 const distribute = (board, isHorizontal) => {
     const axis = isHorizontal ? 'x' : 'y';
     const side = isHorizontal ? 'width' : 'height';
-    const selectedElements = getSelectedElements(board).filter(element => board.children.includes(element));
-    const refs = selectedElements.map(element => {
+    const highestSelectedElements = getHighestSelectedElements(board);
+    const refs = highestSelectedElements.map(element => {
         return { element, rectangle: board.getRectangle(element) };
     });
-    const outerRectangle = getRectangleByElements(board, selectedElements, false);
+    const outerRectangle = getRectangleByElements(board, highestSelectedElements, false);
     const minRectangleRef = refs.sort((a, b) => a.rectangle[axis] - b.rectangle[axis])[0];
     const maxRectangleRef = refs.sort((a, b) => b.rectangle[axis] + b.rectangle[side] - (a.rectangle[axis] + a.rectangle[side]))[0];
     const minIndex = refs.findIndex(ref => ref === minRectangleRef);
@@ -1470,6 +1524,25 @@ const withResize = (board, options) => {
     return board;
 };
 
+class GroupGenerator extends Generator {
+    canDraw(element) {
+        return true;
+    }
+    draw(element, partialSelected) {
+        const options = {
+            stroke: '',
+            strokeWidth: ACTIVE_STROKE_WIDTH,
+            strokeLineDash: [5]
+        };
+        let rectangle = { x: 0, y: 0, width: 0, height: 0 };
+        if (partialSelected) {
+            options.stroke = '#999';
+            rectangle = getRectangleByGroup(this.board, element, true);
+        }
+        return drawRectangle(this.board, rectangle, options);
+    }
+}
+
 class CommonPluginElement extends PlaitPluginElementComponent {
     constructor() {
         super(...arguments);
@@ -1492,6 +1565,235 @@ class CommonPluginElement extends PlaitPluginElementComponent {
     }
 }
 
+class GroupComponent extends CommonPluginElement {
+    constructor(viewContainerRef, cdr) {
+        super(cdr);
+        this.viewContainerRef = viewContainerRef;
+        this.cdr = cdr;
+    }
+    initializeGenerator() {
+        this.activeGenerator = new ActiveGenerator(this.board, {
+            getRectangle: (element) => {
+                return getRectangleByGroup(this.board, element);
+            },
+            getStrokeWidth: () => 0,
+            getStrokeOpacity: () => 0,
+            hasResizeHandle: () => {
+                return !isSelectionMoving(this.board);
+            }
+        });
+        this.groupGenerator = new GroupGenerator(this.board);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.initializeGenerator();
+    }
+    onContextChanged(value, previous) {
+        const elementsInGroup = getElementsInGroup(this.board, value.element, false, true);
+        const isPartialSelectGroup = elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
+            !elementsInGroup.every(item => isSelectedElementOrGroup(this.board, item));
+        this.groupGenerator.processDrawing(value.element, this.g, isPartialSelectGroup);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GroupComponent, isStandalone: true, selector: "plait-group", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-group',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
+
+function withGroup(board) {
+    let groupRectangleG;
+    let removeGroups;
+    const { drawElement, pointerMove, globalPointerUp, insertFragment, getDeletedFragment, deleteFragment, getRelatedFragment, getRectangle, keyDown } = board;
+    board.drawElement = (context) => {
+        if (PlaitGroupElement.isGroup(context.element)) {
+            return GroupComponent;
+        }
+        return drawElement(context);
+    };
+    board.pointerMove = (event) => {
+        groupRectangleG?.remove();
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        let selection = { anchor: point, focus: point };
+        if (board.selection && !Selection.isCollapsed(board.selection)) {
+            selection = board.selection;
+        }
+        const hitElements = getHitElementsBySelection(board, selection);
+        if (hitElements.length) {
+            groupRectangleG = createGroupRectangleG(board, hitElements);
+            groupRectangleG && PlaitBoard.getElementActiveHost(board).append(groupRectangleG);
+        }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        groupRectangleG?.remove();
+        groupRectangleG = null;
+        globalPointerUp(event);
+    };
+    board.getRelatedFragment = (elements, originData) => {
+        const groups = getSelectedGroups(board, originData);
+        return getRelatedFragment([...elements, ...groups], originData);
+    };
+    board.insertFragment = (data, clipboardData, targetPoint) => {
+        const elements = [];
+        if (clipboardData?.elements?.length) {
+            const groups = getHighestSelectedGroups(board, clipboardData?.elements);
+            const selectedIsolatedElements = getSelectedIsolatedElements(board, clipboardData?.elements);
+            selectedIsolatedElements.forEach(item => {
+                elements.push(!item.groupId ? item : updateGroupId(item, undefined));
+            });
+            if (groups.length) {
+                groups.forEach(item => {
+                    const newGroup = { ...updateGroupId(item, undefined), id: idCreator() };
+                    elements.push(newGroup);
+                    elements.push(...updateElementsGroupId(item, clipboardData.elements, newGroup.id));
+                });
+            }
+            clipboardData.elements = elements;
+        }
+        insertFragment(data, clipboardData, targetPoint);
+        const groupElements = elements?.filter(value => PlaitGroupElement.isGroup(value));
+        groupElements.forEach(element => {
+            Transforms.insertNode(board, element, [board.children.length]);
+        });
+    };
+    board.getDeletedFragment = (data) => {
+        removeGroups = getRemoveGroups(board);
+        if (removeGroups && removeGroups.length) {
+            data.push(...removeGroups);
+        }
+        return getDeletedFragment(data);
+    };
+    board.deleteFragment = (elements) => {
+        if (removeGroups?.length) {
+            updateSiblingElementGroupId(board, removeGroups);
+        }
+        deleteFragment(elements);
+        removeGroups = null;
+    };
+    board.getRectangle = (element) => {
+        if (PlaitGroupElement.isGroup(element)) {
+            return getRectangleByGroup(board, element, true);
+        }
+        return getRectangle(element);
+    };
+    board.keyDown = (event) => {
+        if (!PlaitBoard.isReadonly(board)) {
+            if (isKeyHotkey('mod+g', event)) {
+                event.preventDefault();
+                GroupTransforms.addGroup(board);
+                return;
+            }
+            if (isKeyHotkey('mod+shift+g', event)) {
+                event.preventDefault();
+                GroupTransforms.removeGroup(board);
+                return;
+            }
+        }
+        keyDown(event);
+    };
+    return board;
+}
+const updateGroupId = (element, groupId) => {
+    return {
+        ...element,
+        groupId: groupId
+    };
+};
+const updateElementsGroupId = (group, clipboardDataElements, newGroupId) => {
+    const elements = [];
+    const elementsInGroup = clipboardDataElements.filter(item => item.groupId === group.id);
+    if (elementsInGroup.length) {
+        elementsInGroup.forEach(item => {
+            if (PlaitGroupElement.isGroup(item)) {
+                const newGroup = { ...updateGroupId(item, newGroupId), id: idCreator() };
+                elements.push(newGroup);
+                elements.push(...updateElementsGroupId(item, clipboardDataElements, newGroup.id));
+            }
+            else {
+                elements.push(updateGroupId(item, newGroupId));
+            }
+        });
+    }
+    return elements;
+};
+const getRemoveGroups = (board) => {
+    const selectedElements = getSelectedElements(board);
+    const selectedGroups = board.getRelatedFragment([], selectedElements);
+    const removeGroups = [...selectedGroups];
+    const highestSelectedGroups = getHighestSelectedGroups(board);
+    const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
+    const removeNodes = [...highestSelectedGroups, ...selectedIsolatedElements];
+    removeNodes.forEach(item => {
+        const hitElementGroups = getGroupByElement(board, item, true);
+        if (hitElementGroups.length) {
+            const elementsInGroup = getElementsInGroup(board, hitElementGroups[0], false, true);
+            const siblingElements = elementsInGroup.filter(element => ![...removeNodes, ...removeGroups].map(item => item.id).includes(element.id));
+            if (siblingElements.length === 1 || siblingElements.length === 0) {
+                if (!removeGroups.includes(hitElementGroups[0])) {
+                    removeGroups.push(hitElementGroups[0]);
+                }
+                if (siblingElements.length === 1) {
+                    if (hitElementGroups.length > 1) {
+                        const aboveGroup = findAboveGroupWithAnotherElement(board, hitElementGroups.slice(1, hitElementGroups.length), [
+                            ...removeNodes,
+                            ...removeGroups
+                        ]);
+                        let index = hitElementGroups.length;
+                        if (aboveGroup) {
+                            index = hitElementGroups.findIndex(item => item.id === aboveGroup.id);
+                        }
+                        [...hitElementGroups.slice(1, index)].forEach(item => {
+                            if (!removeGroups.includes(item)) {
+                                removeGroups.push(item);
+                            }
+                        });
+                    }
+                }
+            }
+        }
+    });
+    return removeGroups;
+};
+const findAboveGroupWithAnotherElement = (board, groups, excludeNodes) => {
+    let group = null;
+    for (let i = 0; i < groups.length; i++) {
+        const elementsInGroup = getElementsInGroup(board, groups[i], false, true);
+        const siblingElements = elementsInGroup.filter(element => !excludeNodes.map(item => item.id).includes(element.id));
+        if (siblingElements.length > 0) {
+            group = groups[i];
+            break;
+        }
+    }
+    return group;
+};
+const updateSiblingElementGroupId = (board, removeGroups) => {
+    const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
+    const highestSelectedGroups = getHighestSelectedGroups(board);
+    const isolatedElementsInGroup = selectedIsolatedElements.filter(item => item.groupId);
+    [...highestSelectedGroups, ...isolatedElementsInGroup].forEach(item => {
+        const hitElementGroups = getGroupByElement(board, item, true);
+        if (hitElementGroups.length) {
+            const elementsInGroup = getElementsInGroup(board, hitElementGroups[0], false, true);
+            const siblingElements = elementsInGroup.filter(element => element.id !== item.id);
+            if (siblingElements.length === 1) {
+                const removeGroupIds = removeGroups.map(item => item.id);
+                if (hitElementGroups.some(group => removeGroupIds.includes(group.id))) {
+                    const group = hitElementGroups.find(group => !removeGroupIds.includes(group.id));
+                    const path = PlaitBoard.findPath(board, siblingElements[0]);
+                    Transforms.setNode(board, { groupId: group?.id || undefined }, path);
+                }
+            }
+        }
+    });
+};
+
 class ImageBaseComponent {
     set imageItem(value) {
         this.afterImageItemChange(this._imageItem, value);
@@ -1549,7 +1851,7 @@ class ImageBaseComponent {
     drawFocus() {
         if (this.initialized) {
             const activeG = PlaitBoard.getElementActiveHost(this.board);
-            this.activeGenerator.processDrawing({}, activeG, { selected: this._isFocus });
+            this.activeGenerator.processDrawing(this.element, activeG, { selected: this._isFocus });
         }
     }
     ngOnDestroy() {
@@ -1589,5 +1891,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, AlignTransform, 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, ResizeHandle, TRANSPARENT, TextTransforms, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextManages, getTextMarksByElement, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotatePoints, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withResize };
+export { AStar, ActiveGenerator, AlignTransform, 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, ResizeHandle, TRANSPARENT, TextTransforms, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextManages, getTextMarksByElement, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withGroup, withResize };
 //# sourceMappingURL=plait-common.mjs.map