@vvfx/sdk 0.2.7 → 0.2.9

package/dist/gesture-handler/gizmo/text-gizmo.js

@@ -0,0 +1,1033 @@
+import { Graphics, Sprite } from '../../wireframe';
+import { SDK } from '../../sdk';
+import { Gizmo } from './gizmo';
+import { assertExist, spec } from '../../shared';
+import { Box2, getAngleByVectors, getVector2Angle, Line2, RAD2DEG, roundNumber, Vector2, Vector3, DEG2RAD, getAbsMaxIndex, isEqual, Euler, Quaternion, Matrix4 } from '../../math';
+import { FrameLayoutMode } from '../../types';
+import { SDKItemType } from '../../sdk-item/types';
+import { isEffectsItem, isFrameItem, isGroupItem } from '../../sdk-item';
+import { calculateAutoLayoutIndicatorLine, calculateAutoLayoutPositionByMouse, calculateInsertPositionFromLayout, adjustOtherElementsLayoutInfo, updateItemLayoutInfo, } from '../../utils/layout-utils';
+const textareaDefaultCssClass = `
+  word-break: break-all;
+  position: absolute;
+  border: none;
+  margin: 0;
+  padding: 0;
+  outline: none !important;
+  overflow: hidden;
+  resize: none;
+  display: none;
+  background: transparent;
+  opacity: .8;
+  color: transparent;
+  caret-color: #000000;
+  field-sizing: content;
+  -webkit-text-fill-color: transparent;
+  text-fill-color: transparent;
+`;
+function applyCSSClass(element, className, cssText) {
+    // 处理嵌套写法，将 & 替换为类名
+    const processedCSS = cssText.replace(/&/g, `.${className}`);
+    // 创建样式元素
+    const style = document.createElement('style');
+    style.textContent = `
+    .${className} {
+      ${processedCSS}
+    }
+  `;
+    // 添加到文档头
+    document.head.appendChild(style);
+    // 给元素添加类名
+    element.classList.add(className);
+    // 返回清理函数（可选）
+    return () => {
+        element.classList.remove(className);
+        document.head.removeChild(style);
+    };
+}
+export class TextGizmo extends Gizmo {
+    type = 'text';
+    _eventEmitter;
+    /**
+     * @description 用于绘制选中态
+     */
+    textAreaElement;
+    /**
+     * @description 用于绘制选中包围盒
+     */
+    graphics = new Graphics();
+    /**
+     * @description 数据刷新工具
+     */
+    _pageDataUtils;
+    /**
+     * @description 绘制结果
+     */
+    result;
+    /**
+     * @description 交互参数
+     */
+    interactionParam;
+    /**
+     * @description 吸附交互器
+     */
+    _adsorptionGizmo;
+    /**
+     * @description 鼠标交互样式结果
+     */
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    /**
+     * @description 退出编辑态时忽视交互
+     */
+    ignoreInteraction = false;
+    /**
+     * @description 缩放方向
+     */
+    scaleParam;
+    rotationSprite = new Sprite();
+    cursorPoint = new Vector2();
+    _selectorGizmo;
+    /**
+     * @description 画板包围盒信息
+     */
+    frameBoxes = new Map();
+    /**
+     * @description
+     */
+    toAddedFrameId;
+    /**
+     * @description 需要处理子元素分离的组信息
+     * key: groupId, value: 需要分离的子元素信息
+     */
+    groupsNeedProcess = new Map();
+    /**
+     * @description 自动布局插入指示器
+     */
+    autoLayoutIndicator = null;
+    /**
+     * @description 是否在自动布局拖拽中
+     */
+    isAutoLayoutDragging = false;
+    /**
+     * @description 被拖拽元素的原始行列位置（用于自动布局时调整其他元素）
+     */
+    autoLayoutDragOriginalPosition = null;
+    /**
+     * @description 待应用的布局位置（用于延迟执行行列修改）
+     */
+    pendingLayoutPosition = null;
+    /**
+     * @description 自动布局指示器 Graphics
+     */
+    autoLayoutGraphics = new Graphics();
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.textGizmoEnbaled;
+    }
+    set interactive(bool) {
+        SDK.config.gestureHandlerConfig.textGizmoEnbaled = bool;
+    }
+    constructor(pageDataUtils, adsorptionGizmo, selectorGizmo, eventEmitter, parent) {
+        super();
+        this._pageDataUtils = pageDataUtils;
+        this._adsorptionGizmo = adsorptionGizmo;
+        this._selectorGizmo = selectorGizmo;
+        this._eventEmitter = eventEmitter;
+        this.textAreaElement = document.createElement('textarea');
+        this.textAreaElement.style.display = 'none';
+        parent?.appendChild(this.textAreaElement);
+        applyCSSClass(this.textAreaElement, 'text-gizmo-custom-style', textareaDefaultCssClass);
+        this.result = {
+            type: 'empty'
+        };
+        this.interactionParam = {
+            active: false,
+            type: 'none',
+            anchor: new Vector2(),
+            lastPoint: new Vector2(),
+            startPoint: new Vector2(),
+            lastWorldPosition: new Vector3(),
+        };
+    }
+    preparationAction(event) {
+        if (!this.interactive) {
+            console.warn('Text gizmo is not opened, use #SDK.openTextGizmo() open this feature.');
+            return undefined;
+        }
+        if (this.result.type === 'empty') {
+            return undefined;
+        }
+        const mouse = new Vector2(event.offsetX, event.offsetY);
+        const clineMouse = new Vector2(event.clientX, event.clientY);
+        this.refreshInteractionParam(mouse, clineMouse);
+        const viewportPoint = mouse.subtract(this._pageDataUtils.getViewportLeftTopPosition());
+        this.initInteractionPlane(viewportPoint);
+        this.cursorPoint.set(event.offsetX, event.offsetY);
+        this.refreshCursorResult();
+        if (this.interactionParam.type === 'none') {
+            return undefined;
+        }
+        else {
+            const type = this.interactionParam.type === 'translation' ? this._selectorGizmo.preparationAction(event, 'text') : this.type;
+            this.interactionParam.active = type === 'text';
+            return this.interactionParam.active ? type : undefined;
+        }
+    }
+    preAction(event, isDoubleClick) {
+        if (event.buttons !== 1) {
+            return this.type;
+        }
+        const { offsetX, offsetY } = event;
+        const mouse = new Vector2(offsetX, offsetY);
+        this.refreshFrameBoxes();
+        if (isDoubleClick) {
+            if (this.result.type !== 'empty' && !this.result.box.containsPoint(mouse)) {
+                if (this.interactionParam.type === 'none') {
+                    this.result = { type: 'empty' };
+                    this._pageDataUtils.clearSelectedItems(true);
+                    return undefined;
+                }
+            }
+            else {
+                this._pageDataUtils.saveUndoRedoOldData();
+                this.interactionParam.type = 'edit';
+                this.interactionParam.textareaType = 'focus';
+            }
+        }
+        else {
+            if (this.result.type !== 'empty' && !this.result.box.containsPoint(mouse)) {
+                if (this.interactionParam.type === 'edit') {
+                    this.interactionParam.type = 'none';
+                    this.ignoreInteraction = true;
+                }
+                else if (this.interactionParam.type === 'none') {
+                    this.result = { type: 'empty' };
+                    return undefined;
+                }
+            }
+            else {
+                this._pageDataUtils.saveUndoRedoOldData();
+                const viewportPoint = mouse.subtract(this._pageDataUtils.getViewportLeftTopPosition());
+                this.initInteractionPlane(viewportPoint);
+                this.interactionParam.lastWorldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewportPoint) ?? new Vector3();
+                this.refreshCursorResult();
+            }
+        }
+        return this.type;
+    }
+    action(event) {
+        if (!this.interactive) {
+            console.warn('Text gizmo is not opened, use #SDK.setTextConfig() open this feature.');
+            return;
+        }
+        // 更新鼠标位置（用于自动布局计算）
+        this.cursorPoint.set(event.offsetX, event.offsetY);
+        if (this.interactionParam.type === 'edit' || this.result.type === 'empty' || this.ignoreInteraction) {
+            return;
+        }
+        if (!this.interactionParam.active) {
+            this.interactionParam.active = true;
+            this.interactionParam.type = 'translation';
+            this.interactionParam.lastPoint = new Vector2(event.clientX, event.clientY);
+            this.interactionParam.startPoint = new Vector2(event.offsetX, event.offsetY);
+            const viewportPoint = new Vector2(event.offsetX, event.offsetY).subtract(this._pageDataUtils.getViewportLeftTopPosition());
+            this.initInteractionPlane(viewportPoint);
+            this.interactionParam.lastWorldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewportPoint) ?? new Vector3();
+            this.refreshFrameBoxes();
+        }
+        const { clientX, clientY, offsetX, offsetY } = event;
+        const currentClientPoint = new Vector2(clientX, clientY);
+        const { type, lastPoint, startPoint, anchor } = this.interactionParam;
+        const shift = new Vector2().subtractVectors(currentClientPoint, lastPoint);
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        switch (type) {
+            // 旋转交互
+            case 'rotation': {
+                const rotation = new Vector3();
+                const vecStart = new Vector2().subtractVectors(startPoint, anchor);
+                const vecCurrent = new Vector2().subtractVectors(startPoint.add(shift), anchor);
+                const angle = roundNumber(getAngleByVectors(vecStart, vecCurrent) * RAD2DEG, 3);
+                rotation.z = angle;
+                selectedItems.forEach(item => {
+                    this._pageDataUtils.rotateItem(item.id, rotation);
+                });
+                this.interactionParam.lastPoint.copyFrom(currentClientPoint);
+                break;
+            }
+            case 'translation': {
+                // 平移
+                const move = shift.clone();
+                if (this._adsorptionGizmo.interactive) {
+                    const pageData = this._pageDataUtils.getPageData();
+                    assertExist(pageData);
+                    const targetBoxes = pageData.items.map(item => {
+                        if (!selectedItems.find(si => si.id === item.id)
+                            && selectedItems.filter(selectedItem => item.parentId && item.parentId === selectedItem.id).length === 0
+                            && this._pageDataUtils.getItemEditEnable(item.id)
+                            && !selectedItems.find(si => si.parentId === item.id)) {
+                            return this._pageDataUtils.getViewBoxById(item.id);
+                        }
+                        else {
+                            return new Box2();
+                        }
+                    }).filter(box => !box.isEmpty());
+                    const preAbsorptionDistance = new Vector2(this._adsorptionGizmo.absorptionResult.x ?? 0, this._adsorptionGizmo.absorptionResult.y ?? 0);
+                    this._adsorptionGizmo.boxTranslationAdsorption(move, this.result.box, targetBoxes);
+                    const absorptionDistance = new Vector2(this._adsorptionGizmo.absorptionResult.x ?? 0, this._adsorptionGizmo.absorptionResult.y ?? 0);
+                    move.add(preAbsorptionDistance).subtract(absorptionDistance);
+                }
+                const worldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(startPoint.add(move).clone().subtract(this._pageDataUtils.getViewportLeftTopPosition()));
+                if (worldPosition) {
+                    const translation = worldPosition.clone().subtract(this.interactionParam.lastWorldPosition);
+                    selectedItems.forEach(item => {
+                        translation.x = roundNumber(translation.x, 5);
+                        translation.y = roundNumber(translation.y, 5);
+                        translation.z = roundNumber(translation.z, 5);
+                        this._pageDataUtils.moveItem(item.id, translation);
+                        this.refreshItemFrameRelationShip(item, new Vector2(offsetX, offsetY));
+                    });
+                    this.interactionParam.lastWorldPosition.copyFrom(worldPosition);
+                    this.interactionParam.lastPoint.copyFrom(currentClientPoint);
+                    // 检查是否是自动布局画板的子元素
+                    selectedItems.forEach(item => {
+                        this.updateAutoLayoutIndicator(item);
+                    });
+                }
+                break;
+            }
+            case 'scale': {
+                if (shift.length()) {
+                    // 缩放
+                    const resultViewPoint = this.cursorPoint.add(shift).clone().subtract(this._pageDataUtils.getViewportLeftTopPosition());
+                    if (!startPoint || !this.scaleParam || !shift.length()) {
+                        return;
+                    }
+                    const farthestCorner = this.scaleParam.farthestCorner;
+                    const isValidScale = (startPoint.x - farthestCorner.x) * (this.cursorPoint.x - farthestCorner.x) > 0 && (startPoint.y - farthestCorner.y) * (this.cursorPoint.y - farthestCorner.y) > 0;
+                    if (!isValidScale) {
+                        resultViewPoint.x = farthestCorner.x + (startPoint.x - farthestCorner.x) / Math.abs(startPoint.x - farthestCorner.x) * 4;
+                        resultViewPoint.y = farthestCorner.y + (startPoint.y - farthestCorner.y) / Math.abs(startPoint.y - farthestCorner.y) * 4;
+                    }
+                    const worldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(resultViewPoint);
+                    if (worldPosition) {
+                        const selectedItem = this._pageDataUtils.getSelectedItems()[0] ?? undefined;
+                        const itemTransform = this._pageDataUtils.getItemTransformById(selectedItem?.id ?? '');
+                        const rotationMatrix = new Matrix4().extractRotation(itemTransform.matrix).invert();
+                        const { corner, center, shift: cornerShift, lastScalar } = this.scaleParam;
+                        const startScale = new Vector3().subtractVectors(corner, center).applyMatrix(rotationMatrix);
+                        const currentStartScale = startScale.clone().multiply(lastScalar);
+                        const currentScale = worldPosition.clone().subtract(cornerShift).subtract(center).applyMatrix(rotationMatrix);
+                        const scalar = new Vector3(1, 1, 1);
+                        const targetIndex = getAbsMaxIndex([
+                            isEqual(startScale.x, 0) ? 1 : Math.abs(currentScale.x / startScale.x),
+                            isEqual(startScale.y, 0) ? 1 : Math.abs(currentScale.y / startScale.y),
+                        ]);
+                        const currentLockScalar = currentScale.toArray()[targetIndex];
+                        const targetScalar = currentStartScale.toArray()[targetIndex];
+                        if (isEqual(lastScalar.x, lastScalar.y) && isEqual(lastScalar.z, lastScalar.x)) {
+                            const resultScalar = isEqual(targetScalar, 0) ? 1 : Math.abs(currentLockScalar / targetScalar);
+                            scalar.set(resultScalar, resultScalar, resultScalar);
+                        }
+                        else {
+                            if (targetIndex === 0) {
+                                scalar.x = isEqual(targetScalar, 0) ? 1 : Math.abs(currentLockScalar / targetScalar);
+                                const resultScalarY = startScale.y * currentLockScalar / startScale.x;
+                                scalar.y = isEqual(currentStartScale.y, 0) ? 1 : resultScalarY / currentStartScale.y;
+                                const resultScalarZ = startScale.z * currentLockScalar / startScale.x;
+                                scalar.z = isEqual(currentStartScale.z, 0) ? 1 : resultScalarZ / currentStartScale.z;
+                            }
+                            else if (targetIndex === 1) {
+                                scalar.y = isEqual(targetScalar, 0) ? 1 : Math.abs(currentLockScalar / targetScalar);
+                                const resultScalarX = startScale.x * currentLockScalar / startScale.y;
+                                scalar.x = isEqual(currentStartScale.x, 0) ? 1 : resultScalarX / currentStartScale.x;
+                                const resultScalarZ = startScale.z * currentLockScalar / startScale.y;
+                                scalar.z = isEqual(currentStartScale.z, 0) ? 1 : resultScalarZ / currentStartScale.z;
+                            }
+                            else {
+                                scalar.z = isEqual(targetScalar, 0) ? 1 : Math.abs(currentLockScalar / targetScalar);
+                                const resultScalarX = startScale.x * currentLockScalar / startScale.z;
+                                scalar.x = isEqual(currentStartScale.x, 0) ? 1 : resultScalarX / currentStartScale.x;
+                                const resultScalarY = startScale.y * currentLockScalar / startScale.z;
+                                scalar.y = isEqual(currentStartScale.y, 0) ? 1 : resultScalarY / currentStartScale.y;
+                            }
+                        }
+                        const resultScalar = scalar.clone().subtract(new Vector3(1, 1, 0)).divide(2).add(new Vector3(1, 1, 0.5));
+                        const originCorner = center.clone().add(new Vector3().subtractVectors(corner, center).multiply(new Vector3(lastScalar.x, lastScalar.y, 1)));
+                        this.scaleParam.lastScalar.multiply(resultScalar);
+                        const currentCorner = center.clone().add(new Vector3().subtractVectors(corner, center).multiply(new Vector3(this.scaleParam.lastScalar.x, this.scaleParam.lastScalar.y, 1)));
+                        const translation = new Vector3().subtractVectors(currentCorner, originCorner);
+                        translation.x = roundNumber(translation.x, 5);
+                        translation.y = roundNumber(translation.y, 5);
+                        translation.z = roundNumber(translation.z, 5);
+                        this.scaleParam.center.add(translation);
+                        this.scaleParam.corner.add(translation);
+                        selectedItems.forEach(item => {
+                            this._pageDataUtils.scaleTextItem(item.id, resultScalar.x);
+                            this._pageDataUtils.moveItem(item.id, translation);
+                        });
+                        this.interactionParam.lastWorldPosition.copyFrom(worldPosition);
+                    }
+                }
+                break;
+            }
+            case 'width-scale': {
+                const lastPoint = startPoint.clone();
+                const currentPoint = startPoint.clone().add(shift);
+                if (shift.length()) {
+                    const interactionLine = new Vector2().subtractVectors(lastPoint, anchor);
+                    const currentline = new Vector2().subtractVectors(currentPoint, anchor);
+                    const dotLength = Math.max(currentline.dot(interactionLine) / interactionLine.length(), 1);
+                    const originLength = interactionLine.length();
+                    const scalar = (dotLength / originLength - 1) / 2 + 1;
+                    const resultPoint = anchor.clone().add(interactionLine.clone().normalize().scale(originLength * scalar));
+                    const moveShift = new Vector2().subtractVectors(resultPoint, lastPoint);
+                    startPoint.add(moveShift);
+                    const worldTranslation = this._pageDataUtils.interactionUtils.getWorldSizeByViewSize(moveShift);
+                    worldTranslation.x = roundNumber(worldTranslation.x, 5);
+                    worldTranslation.y = roundNumber(worldTranslation.y, 5);
+                    worldTranslation.z = roundNumber(worldTranslation.z, 5);
+                    selectedItems.forEach(item => {
+                        this._pageDataUtils.moveItem(item.id, worldTranslation);
+                    });
+                    selectedItems.forEach(item => {
+                        this._pageDataUtils.scaleTextItemWidth(item.id, scalar);
+                    });
+                }
+                break;
+            }
+        }
+        this.interactionParam.lastPoint.copyFrom(currentClientPoint);
+        this.refreshCursorResult();
+    }
+    endAction(event) {
+        this.ignoreInteraction = false;
+        const mouse = new Vector2(event.offsetX, event.offsetY);
+        const clineMouse = new Vector2(event.clientX, event.clientY);
+        // 执行自动布局重排序（如果在自动布局拖拽中）
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        const draggedItem = selectedItems.length === 1 ? selectedItems[0] : undefined;
+        this.executeAutoLayoutReorder(draggedItem);
+        // 存入 undo redo 栈
+        this._pageDataUtils.pushUndoRedoData();
+        this.toAddedFrameId = undefined;
+        this._adsorptionGizmo.clearAbsorptionResult();
+        this.refreshInteractionParam(mouse, clineMouse);
+        this.refreshCursorResult();
+        return this.type;
+    }
+    interruption() {
+        this.interactionParam.type = 'none';
+        this._adsorptionGizmo.clearAbsorptionResult();
+        // 清空自动布局相关状态（交互被打断时不执行行列修改）
+        if (this.isAutoLayoutDragging) {
+            this.autoLayoutIndicator = null;
+            this.isAutoLayoutDragging = false;
+            this.autoLayoutDragOriginalPosition = null;
+            this.pendingLayoutPosition = null;
+        }
+        return this.type;
+    }
+    actionKey(keyCode) { }
+    endActionKey(keyCode) { }
+    cancelPreparation() { }
+    refreshResults() {
+        if (!this.interactive) {
+            return;
+        }
+        const selectedIds = this._pageDataUtils.getPageData()?.activeData?.selectedItems;
+        const viewItem = this._pageDataUtils.getSDKItem(selectedIds?.[0] ?? '');
+        if (selectedIds?.length !== 1 || viewItem?.type !== SDKItemType.TEXT) {
+            this.result = {
+                type: 'empty'
+            };
+            return;
+        }
+        const viewBox = this._pageDataUtils.getViewBoxById(selectedIds[0]);
+        if (!viewBox.isEmpty()) {
+            const widthScaleCorners = [new Line2(viewBox.corners[0], viewBox.corners[1]).at(0.5), new Line2(viewBox.corners[2], viewBox.corners[3]).at(0.5)];
+            const rotationLine = new Line2(viewBox.getCenter(), new Line2(viewBox.corners[0], viewBox.corners[3]).at(0.5));
+            const rotationCorner = rotationLine.at((rotationLine.length() + 22) / rotationLine.length());
+            this.result = {
+                type: 'valid',
+                box: viewBox.clone(),
+                widthScaleCorners,
+                rotationCorner,
+                rotation: -viewItem.property.rotation[2] * DEG2RAD,
+            };
+        }
+        else {
+            this.result = {
+                type: 'empty'
+            };
+        }
+    }
+    refreshInteractionParam(mouse, mouseClient) {
+        if (this.result.type === 'empty') {
+            this.interactionParam.active = false;
+            this.interactionParam.type = 'none';
+            this.interactionParam.lastPoint = new Vector2();
+            this.interactionParam.startPoint = new Vector2();
+            this.interactionParam.lastWorldPosition = new Vector3();
+            return;
+        }
+        if (this.interactionParam.type === 'edit') {
+            return;
+        }
+        const { rotateInteractMode, scaleInteractionDistance, rotationCornerInteractionDistance, rotationTopCenterInteractionDistance, } = SDK.config.gestureHandlerConfig.textGizmoConfig;
+        const anchor = this.result.box.getCenter();
+        for (const widthScaleCorner of this.result.widthScaleCorners) {
+            const box = new Box2().setFromCenterAndSize(widthScaleCorner, new Vector2(6, 18));
+            if (box.containsPoint(mouse)) {
+                this.interactionParam.active = true;
+                this.interactionParam.type = 'width-scale';
+                this.interactionParam.anchor = anchor;
+                this.interactionParam.lastPoint = mouse.clone();
+                this.interactionParam.startPoint = widthScaleCorner.clone();
+                this.interactionParam.lastWorldPosition = new Vector3();
+                return;
+            }
+        }
+        const scaleCornerIndex = this.result.box.corners.findIndex(c => c.distanceTo(mouse) < scaleInteractionDistance);
+        if (scaleCornerIndex >= 0) {
+            const scaleCorner = this.result.box.corners[scaleCornerIndex];
+            const scaleAnchor = this.result.box.corners[(scaleCornerIndex + 2) % 4];
+            this.interactionParam.active = true;
+            this.interactionParam.type = 'scale';
+            this.interactionParam.anchor = scaleAnchor.clone();
+            this.interactionParam.lastPoint = mouseClient.clone();
+            this.interactionParam.startPoint = scaleCorner.clone();
+            return;
+        }
+        if (this.result.box.containsPoint(mouse, false)) {
+            this.interactionParam.active = true;
+            this.interactionParam.type = 'translation';
+            this.interactionParam.lastPoint = mouseClient.clone();
+            this.interactionParam.startPoint = mouse.clone();
+            this.interactionParam.lastWorldPosition = new Vector3();
+            return;
+        }
+        switch (rotateInteractMode) {
+            case 'top-center': {
+                if (mouse.distanceTo(this.result.rotationCorner) < rotationTopCenterInteractionDistance) {
+                    this.interactionParam.active = true;
+                    this.interactionParam.type = 'rotation';
+                    this.interactionParam.anchor = anchor;
+                    this.interactionParam.lastPoint = mouseClient.clone();
+                    this.interactionParam.startPoint = this.result.rotationCorner.clone();
+                    this.interactionParam.lastWorldPosition = new Vector3();
+                    return;
+                }
+                break;
+            }
+            case 'corner': {
+                const rotationCorner = this.result.box.corners.find(c => c.distanceTo(mouse) < rotationCornerInteractionDistance);
+                if (rotationCorner) {
+                    this.interactionParam.active = true;
+                    this.interactionParam.type = 'rotation';
+                    this.interactionParam.anchor = anchor;
+                    this.interactionParam.lastPoint = mouseClient.clone();
+                    this.interactionParam.startPoint = rotationCorner.clone();
+                    this.interactionParam.lastWorldPosition = new Vector3();
+                    return;
+                }
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        this.interactionParam.active = false;
+        this.interactionParam.type = 'none';
+        this.interactionParam.lastPoint = new Vector2();
+        this.interactionParam.startPoint = new Vector2();
+        this.interactionParam.lastWorldPosition = new Vector3();
+        return;
+    }
+    refreshCursorResult() {
+        const angle = (getVector2Angle(new Vector2().subtractVectors(this.interactionParam.startPoint, this.interactionParam.anchor)) + Math.PI / 4) * RAD2DEG;
+        switch (this.interactionParam.type) {
+            case 'edit':
+            case 'none':
+            case 'translation': {
+                this.cursorResult = {
+                    type: 'normal',
+                    angle: 0
+                };
+                break;
+            }
+            case 'scale':
+            case 'width-scale': {
+                this.cursorResult = {
+                    type: 'scale',
+                    angle,
+                };
+                break;
+            }
+            case 'rotation': {
+                this.cursorResult = {
+                    type: 'rotation',
+                    angle,
+                };
+                break;
+            }
+        }
+    }
+    getRenderObjects() {
+        const result = [];
+        if (!this.interactive || this.result.type === 'empty') {
+            return [];
+        }
+        this.graphics.clear();
+        const { box, widthScaleCorners, rotationCorner, rotation, } = this.result;
+        const { boxLineWidth, boxLineColor, wireframeAlpha, wireframeColor, wireframeWidth, rotateInteractMode, rotationCornerWidth, scaleCornerStrokeWidth, scaleCornerStrokeColor, rotationCornerRadius, rotationCornerFillColor, rotationCornerStrokeWidth, rotationCornerStrokeColor, } = SDK.config.gestureHandlerConfig.textGizmoConfig;
+        this.graphics.lineStyle(boxLineWidth, boxLineColor);
+        this.graphics.drawBox(box);
+        if (this.interactionParam.type !== 'edit') {
+            if (box.getSize().y > 25) {
+                widthScaleCorners.forEach(corner => {
+                    const widthScaleBox = new Box2().setFromCenterAndSize(corner, new Vector2(8, 15));
+                    this.graphics.beginFill(0xFFFFFF);
+                    this.graphics.fillBox(widthScaleBox);
+                    this.graphics.endFill();
+                    this.graphics.lineStyle(scaleCornerStrokeWidth, scaleCornerStrokeColor);
+                    this.graphics.drawBox(widthScaleBox);
+                });
+            }
+            switch (rotateInteractMode) {
+                case 'top-center': {
+                    this.rotationSprite.width = rotationCornerWidth;
+                    this.rotationSprite.height = rotationCornerWidth;
+                    this.rotationSprite.anchor.set(0.5, 0.5);
+                    this.rotationSprite.x = rotationCorner.x;
+                    this.rotationSprite.y = rotationCorner.y;
+                    this.rotationSprite.rotation = rotation;
+                    result.push(this.rotationSprite);
+                    break;
+                }
+                case 'corner': {
+                    box.corners.forEach(corner => {
+                        this.graphics.lineStyle(rotationCornerStrokeWidth, rotationCornerStrokeColor);
+                        this.graphics.beginFill(rotationCornerFillColor);
+                        this.graphics.drawCircle(corner.x, corner.y, rotationCornerRadius);
+                        this.graphics.endFill();
+                    });
+                    break;
+                }
+            }
+            if (this.toAddedFrameId) {
+                const frameBox = this.frameBoxes.get(this.toAddedFrameId);
+                if (frameBox) {
+                    this.graphics.lineStyle(wireframeWidth, wireframeColor, wireframeAlpha);
+                    this.graphics.drawBox(frameBox);
+                }
+            }
+        }
+        else if (this.interactionParam.type === 'edit' && this.textAreaElement.style.display === 'none') {
+            const selectedItems = this._pageDataUtils.getSelectedItems();
+            const viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+            const selectedItem = selectedItems[0];
+            const property = selectedItem?.property;
+            const originBox = box.clone().rotate(property.rotation[2] * DEG2RAD);
+            const leftTop = originBox.min.clone();
+            const size = originBox.getSize();
+            this.textAreaElement.value = property.text ?? '';
+            this.textAreaElement.style.textAlign = this.getTextAlign(property.textAlign);
+            this.textAreaElement.style.fontFamily = property.fontFamily;
+            this.textAreaElement.style.fontSize = `${property.fontSize * viewportParam.scale}px`;
+            this.textAreaElement.style.fontWeight = property.fontWeight;
+            this.textAreaElement.style.display = 'block';
+            this.textAreaElement.style.wordBreak = 'break-all';
+            this.textAreaElement.style.whiteSpace = 'pre-wrap';
+            this.textAreaElement.style.overflowWrap = 'break-word';
+            this.textAreaElement.style.left = `${leftTop.x}px`;
+            this.textAreaElement.style.top = `${leftTop.y}px`;
+            this.textAreaElement.style.width = `${size.x}px`;
+            this.textAreaElement.style.height = `${size.y}px`;
+            this.textAreaElement.style.lineHeight = `${property.lineHeight * viewportParam.scale}px`;
+            this.textAreaElement.style.letterSpacing = `${property.letterSpacing}px`;
+            this.textAreaElement.style.transformOrigin = 'center center';
+            this.textAreaElement.style.paintOrder = 'stroke fill';
+            if (property.rotation[2] !== undefined) {
+                this.textAreaElement.style.transform = `
+          rotateZ(${-property.rotation[2]}deg)
+        `;
+            }
+            this.textAreaElement.addEventListener('input', this.handleInput);
+            this.textAreaElement.addEventListener('blur', this.handleBlur);
+            window.setTimeout(() => {
+                if (this.interactionParam.textareaType === 'focus') {
+                    this.textAreaElement.focus();
+                }
+                else {
+                    this.textAreaElement.select();
+                }
+            }, 50);
+        }
+        else if (this.interactionParam.type === 'edit' && this.textAreaElement.style.display === 'block') {
+            const selectedItem = this._pageDataUtils.getSelectedItems()[0];
+            const viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+            const property = selectedItem.property;
+            const originBox = box.clone().rotate(property.rotation[2] * DEG2RAD);
+            const leftTop = originBox.min.clone();
+            const size = originBox.getSize();
+            this.textAreaElement.style.left = `${leftTop.x}px`;
+            this.textAreaElement.style.top = `${leftTop.y}px`;
+            this.textAreaElement.style.width = `${size.x}px`;
+            this.textAreaElement.style.height = `${size.y}px`;
+            this.textAreaElement.style.fontFamily = property.fontFamily;
+            this.textAreaElement.style.textAlign = this.getTextAlign(property.textAlign);
+            switch (SDK.config.mode) {
+                case 'editor': {
+                    this.textAreaElement.style.fontSize = `${property.fontSize * viewportParam.scale}px`;
+                    this.textAreaElement.style.lineHeight = `${property.lineHeight * viewportParam.scale}px`;
+                    this.textAreaElement.style.transform = `rotateZ(${-property.rotation[2]}deg)`;
+                    break;
+                }
+                case 'template': {
+                    // debug code
+                    const playerItem = this._pageDataUtils.getPlayerItemById(selectedItem.id);
+                    const worldScale = new Vector3(1, 1, 1);
+                    playerItem?.transform.getMatrix().decompose(new Vector3(), new Quaternion(), worldScale);
+                    const testScale = playerItem.transform.scale;
+                    const { size: [originWidth, originHeight], isPublishScene } = this._pageDataUtils.getTextOriginSize(selectedItem.id);
+                    const shift = isPublishScene ? 2 : 0;
+                    const pixelHeight = this._pageDataUtils.interactionUtils.getPixelSizeByWorldSize(new Vector3(0, originHeight, 0)).y;
+                    const resultFontSize = property.fontSize / (property.lineHeight / pixelHeight) - shift * viewportParam.scale;
+                    const scalar = new Vector2(testScale.x / originWidth, testScale.y / originHeight);
+                    this.textAreaElement.style.left = `${leftTop.x + (scalar.x - 1) * size.x / scalar.x / 2}px`;
+                    this.textAreaElement.style.top = `${leftTop.y + (scalar.y - 1) * size.y / scalar.y / 2}px`;
+                    this.textAreaElement.style.width = `${size.x / scalar.x}px`;
+                    this.textAreaElement.style.height = `${size.y / scalar.y}px`;
+                    this.textAreaElement.style.transform = `scale(${scalar.x}, ${scalar.y}) rotateZ(${-property.rotation[2]}deg)`;
+                    this.textAreaElement.style.fontSize = `${resultFontSize}px`;
+                    this.textAreaElement.style.lineHeight = `${pixelHeight}px`;
+                    break;
+                }
+            }
+        }
+        // 绘制自动布局指示线
+        this.renderAutoLayoutIndicator();
+        if (this.isAutoLayoutDragging && this.autoLayoutIndicator) {
+            result.push(this.autoLayoutGraphics);
+        }
+        result.push(this.graphics);
+        return result;
+    }
+    /**
+     * @description 绘制自动布局指示线
+     */
+    renderAutoLayoutIndicator() {
+        this.autoLayoutGraphics.clear();
+        if (!this.isAutoLayoutDragging || !this.autoLayoutIndicator) {
+            return;
+        }
+        const config = SDK.config.gestureHandlerConfig.autoLayoutIndicatorConfig;
+        const lineWidth = config?.lineWidth ?? 2;
+        const lineColor = config?.lineColor ?? 0x3b82f6;
+        // 绘制蓝色主指示线
+        this.autoLayoutGraphics.lineStyle(lineWidth, lineColor, 1);
+        this.autoLayoutGraphics.drawLine(this.autoLayoutIndicator.line);
+        // 绘制端点装饰（小圆点）
+        const start = this.autoLayoutIndicator.line.start;
+        const end = this.autoLayoutIndicator.line.end;
+        this.autoLayoutGraphics.beginFill(lineColor);
+        this.autoLayoutGraphics.drawCircle(start.x, start.y, 3);
+        this.autoLayoutGraphics.drawCircle(end.x, end.y, 3);
+        this.autoLayoutGraphics.endFill();
+    }
+    handleInput = async (e) => {
+        const textElm = e.target;
+        const selectedItem = this._pageDataUtils.getSelectedItems()[0];
+        const itemId = selectedItem.id;
+        const property = selectedItem.property;
+        await this._pageDataUtils.setItemProperty({
+            itemId,
+            type: SDKItemType.TEXT,
+            propertyName: 'text',
+            propertyValue: textElm.value
+        });
+        this._eventEmitter.emit('textInput', { itemId, text: textElm.value, fontFamily: property.fontFamily });
+    };
+    handleBlur = () => {
+        this.interactionParam.type = 'scale';
+        this.textAreaElement.style.display = 'none';
+        this.textAreaElement.removeEventListener('input', this.handleInput);
+        this.textAreaElement.removeEventListener('blur', this.handleBlur);
+    };
+    initInteractionPlane(viewportPoint) {
+        switch (this.interactionParam.type) {
+            case 'scale': {
+                if (this.result.type === 'empty') {
+                    return;
+                }
+                const selectedItem = this._pageDataUtils.getSelectedItems().length == 1 ? this._pageDataUtils.getSelectedItems()[0] : undefined;
+                let anchor, itemPosition, itemRotation;
+                if (selectedItem) {
+                    const itemTransform = this._pageDataUtils.getItemTransformById(selectedItem.id);
+                    anchor = new Vector3().copyFrom(this._pageDataUtils.getPlayerItemById(selectedItem.id).transform.anchor).applyMatrix(itemTransform.matrix);
+                    itemPosition = new Vector3().setFromMatrixPosition(itemTransform.matrix);
+                    itemRotation = new Euler().setFromQuaternion(new Quaternion().setFromRotationMatrix(itemTransform.matrix));
+                }
+                this._pageDataUtils.interactionUtils.initInteractionPlane(itemPosition, itemRotation);
+                const scaleCorner = this.interactionParam.startPoint;
+                const { box } = this.result;
+                const farthestCorner = box.corners[0].clone();
+                let length = farthestCorner.distanceTo(scaleCorner);
+                box.corners.forEach(corner => {
+                    if (corner.distanceTo(scaleCorner) > length) {
+                        farthestCorner.copyFrom(corner);
+                        length = corner.distanceTo(scaleCorner);
+                    }
+                });
+                this.scaleParam = {
+                    shift: new Vector3(),
+                    center: new Vector3(),
+                    corner: new Vector3(),
+                    lastScalar: new Vector3(1, 1, 1),
+                    farthestCorner
+                };
+                this.scaleParam.center = (anchor ?? itemPosition);
+                const point = this._pageDataUtils.getViewportLeftTopPosition();
+                if (scaleCorner) {
+                    const viewportScaleCorner = scaleCorner.clone().subtract(point);
+                    this.scaleParam.corner = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewportScaleCorner) ?? new Vector3();
+                }
+                this.scaleParam.shift = (this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewportPoint) ?? new Vector3()).subtract(this.scaleParam.corner);
+                break;
+            }
+            case 'width-scale':
+            case 'translation':
+            case 'rotation': {
+                this._pageDataUtils.interactionUtils.initInteractionPlane();
+                break;
+            }
+        }
+    }
+    /**
+     * @description 更新自动布局指示器
+     * 基于鼠标位置实时更新被拖拽元素的 layoutInfos（row 和 column）
+     * 注意：移动过程中只更新被拖拽元素的布局信息，其他元素保持不动
+     * 等到交互结束时再执行整体排布
+     */
+    updateAutoLayoutIndicator(item) {
+        const parentId = item.parentId;
+        if (!parentId) {
+            this.autoLayoutIndicator = null;
+            this.isAutoLayoutDragging = false;
+            return;
+        }
+        const parent = this._pageDataUtils.getSDKItem(parentId);
+        if (!isFrameItem(parent) || parent.layoutMode !== FrameLayoutMode.AUTO) {
+            this.autoLayoutIndicator = null;
+            this.isAutoLayoutDragging = false;
+            return;
+        }
+        this.isAutoLayoutDragging = true;
+        // 记录被拖拽元素的原始行列位置（如果还没记录）
+        if (this.autoLayoutDragOriginalPosition === null) {
+            const originalLayoutInfo = parent.property.layoutInfos?.[item.id];
+            this.autoLayoutDragOriginalPosition = {
+                row: originalLayoutInfo?.row ?? 0,
+                column: originalLayoutInfo?.column ?? 0,
+            };
+        }
+        // 获取画板中所有子元素（包含被拖拽的元素，用于计算正确的 insertIndex）
+        const allChildren = parent.children
+            .map(id => this._pageDataUtils.getSDKItem(id))
+            .filter((child) => child !== undefined);
+        // 计算基于位置的布局信息（row 和 column）
+        const layoutPosition = calculateAutoLayoutPositionByMouse(this.cursorPoint, allChildren, (id) => this._pageDataUtils.getViewBoxById(id), (child) => {
+            const parentItem = this._pageDataUtils.getSDKItem(child.parentId ?? '');
+            return isFrameItem(parentItem) ? parentItem.property.layoutInfos?.[child.id] : undefined;
+        }, item.id);
+        if (layoutPosition) {
+            // 获取被拖拽元素的原始行号（用于计算指示器）
+            const originalLayoutInfo = parent.property.layoutInfos?.[item.id];
+            const originalRow = originalLayoutInfo?.row ?? 0;
+            // 保存目标行列位置（延迟到 endAction 中执行实际修改）
+            this.pendingLayoutPosition = { ...layoutPosition };
+            // 计算指示器显示（基于鼠标位置直接计算）
+            const insertPosition = calculateInsertPositionFromLayout(this.cursorPoint, allChildren, item.id, parent, originalRow, (id) => this._pageDataUtils.getViewBoxById(id), () => {
+                const selectedItems = this._pageDataUtils.getSelectedItems();
+                const box = new Box2();
+                selectedItems.forEach(selectedItem => {
+                    const targeBox = this._pageDataUtils.getViewBoxById(selectedItem.id);
+                    box.union(targeBox);
+                });
+                return box;
+            });
+            if (insertPosition.siblingId) {
+                const indicatorLine = calculateAutoLayoutIndicatorLine(insertPosition, (id) => this._pageDataUtils.getViewBoxById(id));
+                this.autoLayoutIndicator = {
+                    frameId: parent.id,
+                    insertIndex: insertPosition.index,
+                    insertDirection: insertPosition.direction,
+                    targetSiblingId: insertPosition.siblingId,
+                    line: indicatorLine,
+                    targetRow: layoutPosition.row,
+                    targetColumn: layoutPosition.column,
+                };
+            }
+            else {
+                // 没有找到参考元素，显示在末尾
+                this.autoLayoutIndicator = {
+                    frameId: parent.id,
+                    insertIndex: allChildren.length - 1,
+                    insertDirection: 'after',
+                    targetSiblingId: undefined,
+                    line: new Line2(), // 空线
+                    targetRow: layoutPosition.row,
+                    targetColumn: layoutPosition.column,
+                };
+            }
+        }
+        else {
+            this.autoLayoutIndicator = null;
+        }
+    }
+    /**
+     * @description 执行自动布局重排序
+     * 基于更新后的 layoutInfos 重新排布所有元素
+     * @param draggedItem 被拖拽的元素
+     */
+    executeAutoLayoutReorder(draggedItem) {
+        if (!this.isAutoLayoutDragging) {
+            return;
+        }
+        // 获取拖拽的画板ID
+        const frameId = this.autoLayoutIndicator?.frameId;
+        if (!frameId) {
+            this.autoLayoutIndicator = null;
+            this.isAutoLayoutDragging = false;
+            this.autoLayoutDragOriginalPosition = null;
+            this.pendingLayoutPosition = null;
+            return;
+        }
+        const frameItem = this._pageDataUtils.getSDKItem(frameId);
+        if (!isFrameItem(frameItem)) {
+            this.autoLayoutIndicator = null;
+            this.isAutoLayoutDragging = false;
+            this.autoLayoutDragOriginalPosition = null;
+            this.pendingLayoutPosition = null;
+            return;
+        }
+        // 执行行列修改（延迟执行）
+        if (draggedItem && this.autoLayoutDragOriginalPosition && this.pendingLayoutPosition) {
+            // 调整其他元素的行列信息
+            adjustOtherElementsLayoutInfo(frameItem, draggedItem.id, this.autoLayoutDragOriginalPosition.row, this.autoLayoutDragOriginalPosition.column, this.pendingLayoutPosition.row, this.pendingLayoutPosition.column, (id) => this._pageDataUtils.getSDKItem(id));
+            // 更新被拖拽元素的 layoutInfo
+            updateItemLayoutInfo(draggedItem, frameItem, this.pendingLayoutPosition);
+        }
+        // 基于更新后的 layoutInfos 重新排布所有元素
+        this._pageDataUtils.applyFrameAutoLayout(frameId);
+        // 清理状态
+        this.autoLayoutIndicator = null;
+        this.isAutoLayoutDragging = false;
+        this.autoLayoutDragOriginalPosition = null;
+        this.pendingLayoutPosition = null;
+    }
+    getTextAlign(textAlign) {
+        switch (textAlign) {
+            case spec.TextAlignment.middle: return 'center';
+            case spec.TextAlignment.right: return 'right';
+            default: return 'left';
+        }
+    }
+    refreshFrameBoxes() {
+        this.frameBoxes.clear();
+        const frameItems = this._pageDataUtils.getPageData()?.items.filter(item => isFrameItem(item));
+        frameItems?.forEach(item => {
+            const viewBox = this._pageDataUtils.getViewBoxById(item.id);
+            this.frameBoxes.set(item.id, viewBox);
+        });
+    }
+    refreshItemFrameRelationShip(item, mouse) {
+        // 特效元素与画板元素不可移出画板
+        if (isFrameItem(item) || isEffectsItem(item)) {
+            return undefined;
+        }
+        const frameItems = this._pageDataUtils.getPageData()?.items.filter(item => isFrameItem(item)) ?? [];
+        const currentFrame = frameItems.find(frameItem => frameItem.children.includes(item.id));
+        const isFrameChild = !!currentFrame;
+        let targetFrameId = undefined;
+        this.frameBoxes.forEach((box, id) => {
+            if (box.containsPoint(mouse) && !targetFrameId) {
+                targetFrameId = id;
+            }
+        });
+        this.toAddedFrameId = targetFrameId;
+        // 若指向画布元素为undefined，且当前元素为画布子元素，则移出画布
+        if (!targetFrameId && isFrameChild) {
+            const toAddedItemIds = [item.id];
+            // 当元素为GroupItem时，需要将子元素移出画布，同时保持其父子级关系
+            if (isGroupItem(item)) {
+                const { children } = item.property;
+                toAddedItemIds.push(...children);
+            }
+            this._pageDataUtils.moveItemsOutOfFrame(toAddedItemIds);
+            if (item.parentId !== currentFrame.id && item.parentId) {
+                this._pageDataUtils.deleteItemParent(item.id, item.parentId);
+            }
+        }
+        // 当元素当前所处画布不为targetFrame，则将元素移入targetFrame
+        if (targetFrameId && (currentFrame?.id !== targetFrameId)) {
+            const toAddedItemIds = [item.id];
+            // 当元素为GroupItem时，需要将子元素移入画布，同时保持其父子级关系
+            if (isGroupItem(item)) {
+                const { children } = item.property;
+                toAddedItemIds.push(...children);
+                // 空组直接移入画板（保持原有流程）
+                if (children.length === 0) {
+                    this._pageDataUtils.deleteItem(item.id);
+                }
+                else {
+                    const frameBox = this.frameBoxes.get(targetFrameId);
+                    if (!frameBox) {
+                        return undefined;
+                    }
+                    const childrenInFrame = []; // 在画板内的子元素
+                    const childrenOutOfFrame = []; // 在画板外的子元素
+                    // 遍历所有子元素，使用相交检测判断位置
+                    children.forEach(childId => {
+                        const childBox = this._pageDataUtils.getViewBoxById(childId);
+                        if (childBox && frameBox.intersectsBox(childBox)) {
+                            childrenInFrame.push(childId);
+                        }
+                        else {
+                            childrenOutOfFrame.push(childId);
+                        }
+                    });
+                    // 关键判断：没有任何子元素在画板内 → 组不进入画板
+                    if (childrenInFrame.length === 0) {
+                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                        console.log(`Group ${item.id} has no children in frame ${targetFrameId}, skipping frame entry.`);
+                        return undefined;
+                    }
+                    // 部分子元素在画板外 → 延迟处理（记录到 groupsNeedProcess）
+                    if (childrenOutOfFrame.length > 0) {
+                        console.log(`Group ${item.id}: ${childrenOutOfFrame.length} children out of frame, will process at drag end.`);
+                        this.groupsNeedProcess.set(item.id, {
+                            groupId: item.id,
+                            frameId: targetFrameId,
+                            childrenOutOfFrame: childrenOutOfFrame
+                        });
+                    }
+                    else {
+                        // 所有子元素都在画板内 → 清除之前的记录
+                        this.groupsNeedProcess.delete(item.id);
+                    }
+                }
+            }
+            else if (item.parentId) {
+                const parentItem = this._pageDataUtils.getSDKItem(item.parentId);
+                if (parentItem && isGroupItem(parentItem)) {
+                    this._pageDataUtils.deleteItemParent(item.id, item.parentId);
+                }
+            }
+            this._pageDataUtils.moveItemsToFrame(toAddedItemIds, targetFrameId);
+        }
+        return targetFrameId;
+    }
+}