@plait/draw 0.75.0 → 0.76.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, setPathStrokeLinecap, getNearestPointBetweenPointAndArc, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, createDebugGenerator, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
-import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, hasResizeHandle, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, setPathStrokeLinecap, getNearestPointBetweenPointAndArc, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, createDebugGenerator, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, toActiveRectangleFromViewBoxRectangle, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
 import { Editor, Node } from 'slate';
@@ -1012,7 +1012,7 @@ const vectorLineCreating = (board, lineShape, points, movingPoint, lineShapeG) =
     const otherPoint = points[points.length - 1];
     temporaryLineElement.points[temporaryLineElement.points.length - 1] = alignPoints(otherPoint, movingPoint);
     lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+    PlaitBoard.getElementTopHost(board).append(lineShapeG);
     return temporaryLineElement;
 };
 const drawVectorLine = (board, element) => {
@@ -1344,7 +1344,7 @@ const debugGenerator$4 = createDebugGenerator(debugKey$4);
 const shapes = [BasicShapes.cloud];
 const isHitDrawElement = (board, element, point, isStrict = true) => {
     const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
+    point = rotateAntiPointsByElement(board, point, element) || point;
     if (PlaitDrawElement.isGeometry(element) && rectangle) {
         if (debugGenerator$4.isDebug() && shapes.includes(element.shape)) {
             debugGenerator$4.clear();
@@ -1405,7 +1405,7 @@ const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
 };
 const isHitElementInside = (board, element, point) => {
     const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
+    point = rotateAntiPointsByElement(board, point, element) || point;
     if (PlaitDrawElement.isGeometry(element) && !PlaitDrawElement.isGeometryByTable(element)) {
         const engine = getEngine(getElementShape(element));
         const isHitInside = engine.isInsidePoint(rectangle, point);
@@ -1473,12 +1473,12 @@ const isDrawElementIncludeText = (element) => {
         return editors.length > 0;
     }
     if (PlaitDrawElement.isElementByTable(element)) {
-        return element.cells.some(cell => isCellIncludeText(cell));
+        return element.cells.some((cell) => isCellIncludeText(cell));
     }
     return true;
 };
 const isDrawElementsIncludeText = (elements) => {
-    return elements.some(item => {
+    return elements.some((item) => {
         return isDrawElementIncludeText(item);
     });
 };
@@ -1511,7 +1511,7 @@ const getSnappingShape = (board, point) => {
     return null;
 };
 const getSnappingRef = (board, hitElement, point) => {
-    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
+    const rotatedPoint = rotateAntiPointsByElement(board, point, hitElement) || point;
     const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
     const edgePoint = getNearestPoint(hitElement, rotatedPoint);
     const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
@@ -1520,14 +1520,14 @@ const getSnappingRef = (board, hitElement, point) => {
 const getHitShape = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
     let hitShape = null;
     traverseDrawShapes(board, (element) => {
-        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(point, element) || point, offset * 2)) {
+        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(board, point, element) || point, offset * 2)) {
             hitShape = element;
         }
     });
     return hitShape;
 };
 const traverseDrawShapes = (board, callback) => {
-    depthFirstRecursion(board, node => {
+    depthFirstRecursion(board, (node) => {
         if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
             callback(node);
         }
@@ -1561,7 +1561,7 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
     }
     if (roughOptions.hasConnector) {
         const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-        connectorPoints.forEach(point => {
+        connectorPoints.forEach((point) => {
             const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH,
@@ -1583,14 +1583,14 @@ const getTextKey = (element, text) => {
 };
 const getGeometryAlign = (board, element) => {
     if (isMultipleTextGeometry(element)) {
-        const drawShapeText = element.texts.find(item => item.id.includes(GeometryCommonTextKeys.content));
+        const drawShapeText = element.texts.find((item) => item.id.includes(GeometryCommonTextKeys.content));
         return drawShapeText?.text.align || Alignment.center;
     }
     if (isSingleTextGeometry(element)) {
         return element.text?.align || Alignment.center;
     }
     if (PlaitDrawElement.isElementByTable(element)) {
-        const firstTextCell = element.cells.find(item => item.text);
+        const firstTextCell = element.cells.find((item) => item.text);
         return firstTextCell?.text?.align || Alignment.center;
     }
     return Alignment.center;
@@ -2155,7 +2155,7 @@ const getHitConnectorPoint = (point, hitElement) => {
     const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
     const shape = getElementShape(hitElement);
     const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-    return connectorPoints.find(connectorPoint => {
+    return connectorPoints.find((connectorPoint) => {
         return distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
     });
 };
@@ -2212,7 +2212,7 @@ const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sou
     const otherPoint = linePoints[0];
     temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
     lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+    PlaitBoard.getElementTopHost(board).append(lineShapeG);
     return temporaryLineElement;
 };
 function drawArrowLineMask(board, element, id) {
@@ -2449,11 +2449,12 @@ const createDefaultFlowchart = (point) => {
     ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: ArrowLineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
     return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
 };
-const getAutoCompletePoints = (element) => {
+const getAutoCompletePoints = (board, element, isToActive = false) => {
     const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
-    let rectangle = RectangleClient.getRectangleByPoints(element.points);
-    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
-    return RectangleClient.getEdgeCenterPoints(rectangle);
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
+    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+    const targetRectangle = isToActive ? activeRectangle : rectangle;
+    return RectangleClient.getEdgeCenterPoints(RectangleClient.inflate(targetRectangle, AutoCompleteMargin));
 };
 const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
     return points.findIndex((point) => {
@@ -2531,12 +2532,6 @@ const editText = (board, element, text) => {
         textManage.edit(() => { });
     }
 };
-const rerenderGeometryActive = (board, element) => {
-    const elementRef = PlaitElement.getElementRef(element);
-    const activeGenerator = elementRef.getGenerator(ActiveGenerator.key);
-    const selected = getSelectedElements(board).includes(element);
-    activeGenerator.processDrawing(element, PlaitBoard.getElementActiveHost(board), { selected });
-};
 const isGeometryIncludeText = (element) => {
     return isSingleTextGeometry(element) || isMultipleTextGeometry(element);
 };
@@ -3392,7 +3387,7 @@ function withDrawResize(board) {
             const resizeSnapRef = getSnapResizingRef(board, resizeRef.element, resizeSnapRefOptions);
             resizeActivePoints = resizeSnapRef.activePoints;
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             if (bulkRotationRef) {
                 const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
                 const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map((p) => {
@@ -3491,23 +3486,25 @@ function withDrawResize(board) {
             const boundingRectangle = needCustomActiveRectangle
                 ? RectangleClient.getRectangleByPoints(resizeActivePoints)
                 : getRectangleByElements(board, elements, false);
-            let corners = RectangleClient.getCornerPoints(boundingRectangle);
+            const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+            let corners = RectangleClient.getCornerPoints(boundingActiveRectangle);
             const angle = getSelectionAngle(elements);
             if (angle) {
-                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
+                const centerPoint = RectangleClient.getCenterPoint(boundingActiveRectangle);
                 corners = rotatePoints(corners, centerPoint, angle);
             }
             corners.forEach((corner) => {
                 const g = drawHandle(board, corner);
                 handleG && handleG.append(g);
             });
-            PlaitBoard.getElementActiveHost(board).append(handleG);
+            PlaitBoard.getActiveHost(board).append(handleG);
         }
     };
     board.drawSelectionRectangle = () => {
         if (needCustomActiveRectangle) {
             const rectangle = RectangleClient.getRectangleByPoints(resizeActivePoints);
-            return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            return drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH
             });
@@ -7094,7 +7091,7 @@ class GeometryShapeGenerator extends Generator {
 class ArrowLineAutoCompleteGenerator extends Generator {
     static { this.key = 'line-auto-complete-generator'; }
     constructor(board) {
-        super(board);
+        super(board, { active: true });
         this.board = board;
         this.hoverElement = null;
     }
@@ -7109,7 +7106,7 @@ class ArrowLineAutoCompleteGenerator extends Generator {
     }
     draw(element, data) {
         this.autoCompleteG = createG();
-        const middlePoints = getAutoCompletePoints(element);
+        const middlePoints = getAutoCompletePoints(this.board, element, true);
         middlePoints.forEach((point, index) => {
             const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, LINE_AUTO_COMPLETE_DIAMETER, {
                 stroke: 'none',
@@ -7152,7 +7149,7 @@ class GeometryComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 const selectedElements = getSelectedElements(this.board);
                 if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
@@ -7185,15 +7182,23 @@ class GeometryComponent extends CommonElementFlavour {
         }
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
         this.getRef().addGenerator(ActiveGenerator.key, this.activeGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementTopHost(this.board), {
             selected: this.selected
         });
         this.textGenerator && this.textGenerator.draw(this.getElementG());
@@ -7201,8 +7206,8 @@ class GeometryComponent extends CommonElementFlavour {
     onContextChanged(value, previous) {
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), { selected: this.selected });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
             this.textGenerator && this.updateText(previous.element, value.element);
@@ -7210,9 +7215,11 @@ class GeometryComponent extends CommonElementFlavour {
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (!hasSameSelected || !hasSameHandleState || value.selected) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                    selected: this.selected
+                });
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -7321,8 +7328,9 @@ function getHitPointIndex(points, movingPoint) {
 }
 
 class LineActiveGenerator extends Generator {
-    constructor() {
-        super(...arguments);
+    constructor(board, options = { active: true }) {
+        super(board, options);
+        this.board = board;
         this.onlySelectedCurrentLine = false;
     }
     canDraw(element, data) {
@@ -7346,16 +7354,18 @@ class LineActiveGenerator extends Generator {
                 updatePoints = points.slice(0, 1).concat(points.slice(-1));
                 elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
             }
-            updatePoints.forEach(point => {
+            const activePoints = updatePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
+            activePoints.forEach((point) => {
                 const updateHandle = drawPrimaryHandle(this.board, point);
                 activeG.appendChild(updateHandle);
             });
             const middlePoints = getMiddlePoints(this.board, element);
+            const activeMiddlePoints = middlePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
             if (!PlaitBoard.hasBeenTextEditing(this.board)) {
-                for (let i = 0; i < middlePoints.length; i++) {
-                    const point = middlePoints[i];
+                for (let i = 0; i < activeMiddlePoints.length; i++) {
+                    const point = activeMiddlePoints[i];
                     if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
-                        const handleIndex = getHitPointIndex(middlePoints, point);
+                        const handleIndex = getHitPointIndex(activeMiddlePoints, point);
                         const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
                         if (isUpdateHandleIndex) {
                             const updateHandle = drawPrimaryHandle(this.board, point);
@@ -7369,8 +7379,9 @@ class LineActiveGenerator extends Generator {
             }
         }
         else {
-            const activeRectangle = this.board.getRectangle(element);
-            if (activeRectangle) {
+            const rectangle = this.board.getRectangle(element);
+            if (rectangle) {
+                const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, rectangle);
                 let opacity = '0.5';
                 if (activeRectangle.height === 0 || activeRectangle.width === 0) {
                     opacity = '0.8';
@@ -7408,13 +7419,20 @@ class ArrowLineComponent extends CommonElementFlavour {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getArrowLinePoints(this.board, this.element);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected,
             linePoints
         });
         super.initialize();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
+        this.getRef().updateActiveSection = () => {
+            const linePoints = getArrowLinePoints(this.board, this.element);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
+        };
         debugGenerator.isDebug() && debugGenerator.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
@@ -7440,7 +7458,7 @@ class ArrowLineComponent extends CommonElementFlavour {
         const linePoints = getArrowLinePoints(this.board, this.element);
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
@@ -7449,8 +7467,8 @@ class ArrowLineComponent extends CommonElementFlavour {
         }
         else {
             const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
-            if (needUpdate) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (needUpdate || value.selected) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected,
                     linePoints
                 });
@@ -7458,7 +7476,7 @@ class ArrowLineComponent extends CommonElementFlavour {
         }
         if (isBoundedElementsChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
@@ -7530,7 +7548,7 @@ class ArrowLineComponent extends CommonElementFlavour {
     }
     updateTextRectangle() {
         const textManages = this.getRef().getTextManages();
-        textManages.forEach(manage => {
+        textManages.forEach((manage) => {
             manage.updateRectangle();
         });
     }
@@ -7548,12 +7566,19 @@ class VectorLineComponent extends CommonElementFlavour {
     initializeGenerator() {
         this.shapeGenerator = new VectorLineShapeGenerator(this.board);
         this.activeGenerator = new LineActiveGenerator(this.board);
+        this.getRef().updateActiveSection = () => {
+            const linePoints = getVectorLinePoints(this.board, this.element);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
+        };
     }
     initialize() {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getVectorLinePoints(this.board, this.element);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected,
             linePoints
         });
@@ -7563,15 +7588,15 @@ class VectorLineComponent extends CommonElementFlavour {
         const linePoints = getVectorLinePoints(this.board, this.element);
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
         }
         else {
-            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
+            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate() || value.selected;
             if (needUpdate) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected,
                     linePoints
                 });
@@ -7707,7 +7732,7 @@ const withGeometryCreateByDrag = (board) => {
                 const points = getDefaultGeometryPoints(pointer, movingPoint);
                 temporaryElement = createDefaultGeometry(board, points, pointer);
                 geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+                PlaitBoard.getElementTopHost(board).append(geometryShapeG);
             }
         }
         pointerMove(event);
@@ -7783,11 +7808,11 @@ const withGeometryCreateByDrawing = (board) => {
                 isCreate: true
             });
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
             temporaryElement = createDefaultGeometry(board, points, pointer);
             geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            PlaitBoard.getElementTopHost(board).append(geometryShapeG);
         }
         pointerMove(event);
     };
@@ -8112,7 +8137,7 @@ const withArrowLineBoundReaction = (board) => {
         const linePointers = Object.keys(ArrowLineShape);
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const isLineResizing = isResizingByCondition(board, resizeRef => {
+        const isLineResizing = isResizingByCondition(board, (resizeRef) => {
             const { element, handle } = resizeRef;
             const isSourceOrTarget = handle === LineResizeHandle.target || handle === LineResizeHandle.source;
             return PlaitDrawElement.isArrowLine(element) && isSourceOrTarget;
@@ -8135,12 +8160,12 @@ const withArrowLineBoundReaction = (board) => {
                 if (hasValidAngle(hitElement)) {
                     setAngleForG(boundShapeG, RectangleClient.getCenterPointByPoints(hitElement.points), hitElement.angle);
                 }
-                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                PlaitBoard.getElementTopHost(board).append(boundShapeG);
             }
         }
         pointerMove(event);
     };
-    board.pointerUp = event => {
+    board.pointerUp = (event) => {
         boundShapeG?.remove();
         boundShapeG = null;
         pointerUp(event);
@@ -8214,7 +8239,7 @@ class ImageComponent extends CommonElementFlavour {
                     height: element.points[1][1] - element.points[0][1]
                 };
             },
-            getImageItem: element => {
+            getImageItem: (element) => {
                 return {
                     url: element.url,
                     width: element.points[1][0] - element.points[0][0],
@@ -8224,12 +8249,18 @@ class ImageComponent extends CommonElementFlavour {
         });
         this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.imageGenerator.setFocus(this.element, this.selected);
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
         this.initializeGenerator();
         this.imageGenerator.processDrawing(this.element, this.getElementG());
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
@@ -8237,7 +8268,7 @@ class ImageComponent extends CommonElementFlavour {
         if (value.element !== previous.element) {
             this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
             this.imageGenerator.setFocus(this.element, this.selected);
-            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
         }
@@ -8245,9 +8276,9 @@ class ImageComponent extends CommonElementFlavour {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.imageGenerator.activeGenerator &&
                 this.imageGenerator.activeGenerator.options.hasResizeHandle() === this.imageGenerator.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
+            if (!hasSameSelected || !hasSameHandleState || value.selected) {
                 this.imageGenerator.setFocus(this.element, this.selected);
-                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -8268,10 +8299,10 @@ const withArrowLineAutoCompleteReaction = (board) => {
         PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(targetElement);
-            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
+            const points = getAutoCompletePoints(board, targetElement, true);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
             const hitPoint = points[hitIndex];
             const ref = PlaitElement.getElementRef(targetElement);
             const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
@@ -8283,10 +8314,12 @@ const withArrowLineAutoCompleteReaction = (board) => {
                     fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
                     fillStyle: 'solid'
                 });
-                PlaitBoard.getElementActiveHost(board).append(reactionG);
+                PlaitBoard.getActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
                 if (hasValidAngle(targetElement)) {
-                    setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)), targetElement.angle);
+                    const rectangle = board.getRectangle(targetElement);
+                    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), targetElement.angle);
                 }
             }
         }
@@ -8305,14 +8338,15 @@ const withArrowLineAutoComplete = (board) => {
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(targetElement);
-            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
+            const points = getAutoCompletePoints(board, targetElement, true);
+            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                autoCompletePoint = hitPoint;
+                const screenPoint = toScreenPointFromActivePoint(board, hitPoint);
+                autoCompletePoint = toViewBoxPoint(board, toHostPoint(board, screenPoint[0], screenPoint[1]));
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, ArrowLineShape.elbow);
             }
@@ -8324,7 +8358,7 @@ const withArrowLineAutoComplete = (board) => {
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (autoCompletePoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
+            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(board, movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getElementShape(sourceElement);
@@ -8342,7 +8376,7 @@ const withArrowLineAutoComplete = (board) => {
         }
         pointerMove(event);
     };
-    board.globalPointerUp = event => {
+    board.globalPointerUp = (event) => {
         if (temporaryElement) {
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
@@ -8418,7 +8452,7 @@ const withDrawRotate = (board) => {
     const canRotate = () => {
         const elements = getSelectedElements(board);
         return (elements.length > 0 &&
-            elements.every(el => (PlaitDrawElement.isDrawElement(el) && !PlaitDrawElement.isArrowLine(el)) ||
+            elements.every((el) => (PlaitDrawElement.isDrawElement(el) && !PlaitDrawElement.isArrowLine(el)) ||
                 PlaitDrawElement.isCustomGeometryElement(board, el)));
     };
     board.pointerDown = (event) => {
@@ -8426,16 +8460,17 @@ const withDrawRotate = (board) => {
             pointerDown(event);
             return;
         }
-        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         const elements = getSelectedElements(board);
-        const boundingRectangle = getRectangleByElements(board, elements, false);
-        const handleRectangle = getRotateHandleRectangle(boundingRectangle);
+        const rectangle = getRectangleByElements(board, elements, false);
+        const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+        const handleRectangle = getRotateHandleRectangle(activeRectangle);
         const angle = getSelectionAngle(elements);
-        const rotatedPoint = angle ? rotatePoints(point, RectangleClient.getCenterPoint(boundingRectangle), -angle) : point;
+        const rotatedPoint = angle ? rotatePoints(activePoint, RectangleClient.getCenterPoint(activeRectangle), -angle) : activePoint;
         if (handleRectangle && RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), handleRectangle)) {
             rotateRef = {
                 elements: [...elements],
-                startPoint: point
+                startPoint: activePoint
             };
         }
         pointerDown(event);
@@ -8445,9 +8480,10 @@ const withDrawRotate = (board) => {
             event.preventDefault();
             const isShift = !!event.shiftKey;
             addRotating(board, rotateRef);
-            const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const selectionRectangle = getRectangleByElements(board, rotateRef.elements, false);
-            const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
+            const endPoint = toActivePoint(board, event.x, event.y);
+            const rectangle = getRectangleByElements(board, rotateRef.elements, false);
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            const selectionCenterPoint = RectangleClient.getCenterPoint(activeRectangle);
             if (!getSelectionAngle(rotateRef.elements) && rotateRef.elements.length > 1) {
                 needCustomActiveRectangle = true;
             }
@@ -8499,32 +8535,35 @@ const withDrawRotate = (board) => {
         if (canRotate() && !isSelectionMoving(board)) {
             if (needCustomActiveRectangle && rotateRef) {
                 const boundingRectangle = getRectangleByElements(board, rotateRef.elements, false);
-                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+                rotateHandleG = drawRotateHandle(board, boundingActiveRectangle);
                 rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
                 if (rotateRef.angle) {
-                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), rotateRef.angle);
+                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingActiveRectangle), rotateRef.angle);
                 }
             }
             else {
                 const elements = getSelectedElements(board);
                 const boundingRectangle = getRectangleByElements(board, elements, false);
-                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+                rotateHandleG = drawRotateHandle(board, boundingActiveRectangle);
                 rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
-                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), getSelectionAngle(elements));
+                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingActiveRectangle), getSelectionAngle(elements));
             }
-            PlaitBoard.getElementActiveHost(board).append(rotateHandleG);
+            PlaitBoard.getActiveHost(board).append(rotateHandleG);
         }
     };
     board.drawSelectionRectangle = () => {
         if (needCustomActiveRectangle && rotateRef) {
             const rectangle = getRectangleByElements(board, rotateRef.elements, false);
-            const rectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            const rectangleG = drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH
             });
             rectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
             if (rotateRef.angle) {
-                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), rotateRef.angle);
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(activeRectangle), rotateRef.angle);
             }
             return rectangleG;
         }
@@ -8538,7 +8577,7 @@ class TableComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 return ACTIVE_STROKE_WIDTH;
             },
@@ -8564,6 +8603,14 @@ class TableComponent extends CommonElementFlavour {
         this.initializeTextManage();
         this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
@@ -8574,13 +8621,13 @@ class TableComponent extends CommonElementFlavour {
         this.tableGenerator.processDrawing(this.element, this.getElementG());
         this.textGenerator.draw(this.getElementG());
         this.rotateVerticalText();
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
     rotateVerticalText() {
         const table = this.board.buildTable(this.element);
-        table.cells.forEach(item => {
+        table.cells.forEach((item) => {
             if (PlaitTableElement.isVerticalText(item)) {
                 const textManage = getTextManageByCell(this.board, item);
                 if (textManage) {
@@ -8594,8 +8641,8 @@ class TableComponent extends CommonElementFlavour {
     }
     getDrawShapeTexts(cells) {
         return cells
-            .filter(item => isCellIncludeText(item))
-            .map(item => {
+            .filter((item) => isCellIncludeText(item))
+            .map((item) => {
             return {
                 id: item.id,
                 text: item.text,
@@ -8643,7 +8690,7 @@ class TableComponent extends CommonElementFlavour {
                 setSelectedCells(value.element, previousSelectedCells);
             }
             this.tableGenerator.processDrawing(value.element, this.getElementG());
-            this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.activeGenerator.processDrawing(value.element, PlaitBoard.getActiveHost(this.board), { selected: this.selected });
             const previousTexts = this.getDrawShapeTexts(previous.element.cells);
             const currentTexts = this.getDrawShapeTexts(value.element.cells);
             this.textGenerator.update(value.element, previousTexts, currentTexts, this.getElementG());
@@ -8653,8 +8700,8 @@ class TableComponent extends CommonElementFlavour {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             const currentSelectedCells = getSelectedCells(value.element);
-            if (!hasSameSelected || !hasSameHandleState || currentSelectedCells?.length) {
-                this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (!hasSameSelected || !hasSameHandleState || currentSelectedCells?.length || value.selected) {
+                this.activeGenerator.processDrawing(value.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -8662,7 +8709,7 @@ class TableComponent extends CommonElementFlavour {
                 clearSelectedCells(value.element);
             }
         }
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
@@ -8728,7 +8775,7 @@ function withTableResize(board) {
                 const resizePoints = [resizeState.startPoint, resizeState.endPoint];
                 const { xZoom, yZoom } = getResizeZoom(resizePoints, originPoint, handlePoint, false, false);
                 const originPoints = resizeRef.options?.cell.points;
-                const targetPoints = originPoints.map(p => {
+                const targetPoints = originPoints.map((p) => {
                     return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
                 });
                 const offsetX = targetPoints[1][0] - originPoints[1][0];
@@ -8755,7 +8802,7 @@ function withTableResize(board) {
                 }, isAspectRatio, isFromCorner);
                 const resizeSnapRef = getSnapResizingRef(board, [resizeRef.element], resizeSnapRefOptions);
                 snapG = resizeSnapRef.snapG;
-                PlaitBoard.getElementActiveHost(board).append(snapG);
+                PlaitBoard.getElementTopHost(board).append(snapG);
                 const points = resizeSnapRef.activePoints;
                 const originPoints = resizeRef.element.points;
                 const originRect = RectangleClient.getRectangleByPoints(originPoints);
@@ -8765,7 +8812,7 @@ function withTableResize(board) {
                 let columns = [...resizeRef.element.columns];
                 let rows = [...resizeRef.element.rows];
                 if (offsetWidth !== 0) {
-                    columns = columns.map(item => {
+                    columns = columns.map((item) => {
                         if (item.width) {
                             return {
                                 ...item,
@@ -8776,7 +8823,7 @@ function withTableResize(board) {
                     });
                 }
                 if (offsetHeight !== 0) {
-                    rows = rows.map(item => {
+                    rows = rows.map((item) => {
                         if (item.height) {
                             return {
                                 ...item,
@@ -8922,7 +8969,7 @@ const withSwimlaneCreateByDrag = (board) => {
             const points = getDefaultSwimlanePoints(pointer, movingPoint);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
-            PlaitBoard.getElementActiveHost(board).append(swimlaneG);
+            PlaitBoard.getElementTopHost(board).append(swimlaneG);
         }
         pointerMove(event);
     };
@@ -8985,11 +9032,11 @@ const withSwimlaneCreateByDrawing = (board) => {
                 isCreate: true
             });
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
-            PlaitBoard.getElementActiveHost(board).append(swimlaneG);
+            PlaitBoard.getElementTopHost(board).append(swimlaneG);
         }
         pointerMove(event);
     };
@@ -9291,5 +9338,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectElementByTable, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
+export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectElementByTable, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map