@vvfx/sdk 0.2.7 → 0.2.9

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

@@ -0,0 +1,1199 @@
+import { Graphics, Text, Sprite } from '../../wireframe';
+import { SDK } from '../../sdk';
+import { spec, assertExist } from '../../shared';
+import { Matrix4, Box2, DEG2RAD, getAbsMaxIndex, getAngleByVectors, getVector2Angle, isEqual, Line2, RAD2DEG, roundNumber, Vector2, Vector3, Euler, Circle } from '../../math';
+import { Quaternion } from '../../math/quaternion';
+import { Gizmo } from './gizmo';
+import { SDKItemType } from '../../sdk-item/types';
+import { isCardItem, isEffectsItem, isFrameItem, isGroupItem } from '../../sdk-item';
+import { FrameLayoutMode } from '../../types';
+import { processText } from '../utils';
+import { calculateAutoLayoutIndicatorLine, calculateAutoLayoutPositionByMouse, calculateInsertPositionFromLayout, adjustOtherElementsLayoutInfo, updateItemLayoutInfo, } from '../../utils/layout-utils';
+const nameTextStyle = {
+    fontSize: 14,
+    fill: 0x666666,
+    align: 'left',
+};
+const sizeTextStyle = {
+    fontSize: 14,
+    fill: 0x666666,
+    align: 'right',
+};
+export class TransformGizmo extends Gizmo {
+    type = 'transform';
+    /**
+    * 变换框绘制结果
+    */
+    wireframe;
+    /**
+     * 鼠标状态绘制结果
+     */
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    /**
+     * 视图起始交互坐标[用于绘制指针]
+     */
+    cursorPoint = new Vector2();
+    /**
+     * 页面绘制 [通过页面绘制计算交互变换值，确保交互状态下移除页面也可以继续执行交互]
+     */
+    lastPoint = new Vector2();
+    /**
+     * @description 交互起点，用于判断是否可以触发选中交互
+     */
+    startPoint = new Vector2();
+    /**
+     * 单次旋转交互中z轴旋转角度[辅助计算鼠标位置]
+     */
+    rotationAngle = 0;
+    /**
+     * 是否处于激活状态
+     */
+    active = false;
+    /**
+     * 吸附对齐功能开关
+     */
+    enableAdsorption = true;
+    /**
+     * @description 缩放方向
+     */
+    scaleParam;
+    // 三维交互部分
+    /**
+     * 交互类型
+     */
+    activeType = 'null';
+    /**
+     * 上一帧鼠标射线碰撞位置
+     */
+    lastWorldPosition = new Vector3();
+    /**
+     * 是否忽视所有交互
+     */
+    _ignoreInteraction = false;
+    /**
+     * @description 初次点击鼠标位置 - 用于触发双击时，子元素选中
+     */
+    firstClickPoint = new Vector2();
+    /**
+     * @description 画板包围盒信息
+     */
+    frameBoxes = new Map();
+    /**
+     * @description
+     */
+    toAddedFrameId;
+    /**
+     * @description 自动布局插入指示器
+     */
+    autoLayoutIndicator = null;
+    /**
+     * @description 是否在自动布局拖拽中
+     */
+    isAutoLayoutDragging = false;
+    /**
+     * @description 被拖拽元素的原始行列位置（用于自动布局时调整其他元素）
+     */
+    autoLayoutDragOriginalPosition = null;
+    /**
+     * @description 待应用的布局位置（用于延迟执行行列修改）
+     */
+    pendingLayoutPosition = null;
+    /**
+     * @description 自动布局指示器 Graphics
+     */
+    autoLayoutGraphics = new Graphics();
+    /**
+     * @description 需要处理子元素分离的组信息
+     * key: groupId, value: 需要分离的子元素信息
+     */
+    groupsNeedProcess = new Map();
+    _pageDataUtils;
+    adsorptionGizmo;
+    selectorGizmo;
+    /**
+     * @description 选中控制器待触发
+     */
+    onSelectorGizmoTrigger = false;
+    /**
+     * @description Graphics to render transform gizmo result.
+     */
+    graphics = new Graphics();
+    /**
+     * @description 是否为锁定比例缩放
+     */
+    _isLockScale = true;
+    isShiftDown = false;
+    nameText = new Text('', nameTextStyle);
+    sizeText = new Text('', sizeTextStyle);
+    imageSprite;
+    groupSprite;
+    textSprite;
+    videoSprite;
+    frameSprite;
+    /**
+     * @description 卡片类型图标缓存（cardType → Sprite）
+     */
+    cardSprites = new Map();
+    effectsSprite;
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.transformGizmoEnabled;
+    }
+    set interactive(bool) {
+        SDK.config.gestureHandlerConfig.transformGizmoEnabled = bool;
+        this.ignoreInteraction = bool;
+    }
+    get isLockScale() {
+        return this._isLockScale;
+    }
+    set isLockScale(state) {
+        if (state === this.isLockScale) {
+            return;
+        }
+        this._isLockScale = state;
+    }
+    get infoType() {
+        const selectedItem = this._pageDataUtils.getSelectedItems();
+        return selectedItem.length === 1 ? selectedItem[0].type : spec.ItemType.base;
+    }
+    constructor(utils, adsorptionGizmo, selectorGizmo) {
+        super();
+        this._pageDataUtils = utils;
+        this.selectorGizmo = selectorGizmo;
+        this.adsorptionGizmo = adsorptionGizmo;
+        this.wireframe = {
+            edges: [],
+            anchor: new Vector2(),
+            scaleCorners: [],
+            rotationCorners: [],
+            interactive: true,
+            cornerEnable: true,
+            directionEnable: true,
+            rotationEnabled: true,
+            scaleEnabled: true,
+            box: new Box2(),
+            totalBox: new Box2(),
+            childrenBoxes: [],
+            activeType: 'null',
+            interactiveDirection: new Vector2(),
+            scaleCorner: new Vector2(),
+            scaleEdgeCorners: [],
+        };
+        this.imageSprite = Sprite.from(SDK.config.gestureHandlerConfig.transformGizmoConfig.pictureLogoUrl);
+        this.imageSprite.width = 15;
+        this.imageSprite.height = 15;
+        this.groupSprite = Sprite.from(SDK.config.gestureHandlerConfig.transformGizmoConfig.groupLogoUrl);
+        this.groupSprite.width = 15;
+        this.groupSprite.height = 15;
+        this.textSprite = Sprite.from(SDK.config.gestureHandlerConfig.transformGizmoConfig.textLogoUrl);
+        this.textSprite.width = 15;
+        this.textSprite.height = 15;
+        this.videoSprite = Sprite.from(SDK.config.gestureHandlerConfig.transformGizmoConfig.videoLogoUrl);
+        this.videoSprite.width = 15;
+        this.videoSprite.height = 15;
+        this.frameSprite = Sprite.from(SDK.config.gestureHandlerConfig.transformGizmoConfig.frameLogoUrl);
+        this.frameSprite.width = 15;
+        this.frameSprite.height = 15;
+        this.effectsSprite = Sprite.from(SDK.config.gestureHandlerConfig.transformGizmoConfig.effectsLogoUrl);
+        this.effectsSprite.width = 15;
+        this.effectsSprite.height = 15;
+    }
+    /**
+     * @description 根据卡片类型获取对应的图标 Sprite，带缓存
+     * @param cardType 卡片类型标识
+     * @returns 对应的 Sprite 实例
+     */
+    getCardSprite(cardType) {
+        const cached = this.cardSprites.get(cardType);
+        if (cached) {
+            return cached;
+        }
+        const cardTypeConfig = SDK.config.itemConfig.cardConfig.cardTypes.find(t => t.type === cardType);
+        const iconUrl = cardTypeConfig?.iconUrl ?? SDK.config.gestureHandlerConfig.transformGizmoConfig.pictureLogoUrl;
+        const sprite = Sprite.from(iconUrl);
+        sprite.width = 15;
+        sprite.height = 15;
+        this.cardSprites.set(cardType, sprite);
+        return sprite;
+    }
+    get ignoreInteraction() {
+        return this._ignoreInteraction;
+    }
+    set ignoreInteraction(state) {
+        if (state === this._ignoreInteraction) {
+            return;
+        }
+        this._ignoreInteraction = state;
+        this.wireframe.cornerEnable = state;
+    }
+    actionKey(keyCode) {
+        this.isShiftDown = keyCode.shiftKey;
+    }
+    endActionKey(keyCode) {
+        this.isShiftDown = keyCode.shiftKey;
+    }
+    getRenderObjects() {
+        const result = [];
+        if (!this.interactive) {
+            return result;
+        }
+        this.refreshRenderObject();
+        result.push(this.graphics);
+        if (this.infoType !== spec.ItemType.base && SDK.config.gestureHandlerConfig.transformGizmoConfig.infoShowEnabled) {
+            result.push(this.nameText);
+            result.push(this.sizeText);
+            // result.push(this.nameText, this.sizeText)
+            switch (this.infoType) {
+                case SDKItemType.SPRITE:
+                    result.push(this.imageSprite);
+                    break;
+                case SDKItemType.CARD: {
+                    const cardViewItem = this._pageDataUtils.getSelectedItems()[0];
+                    result.push(this.getCardSprite(cardViewItem.cardType));
+                    break;
+                }
+                case SDKItemType.GROUP:
+                    result.push(this.groupSprite);
+                    break;
+                case SDKItemType.TEXT:
+                    if (!SDK.config.gestureHandlerConfig.textGizmoEnbaled) {
+                        result.push(this.textSprite);
+                    }
+                    break;
+                case SDKItemType.VIDEO:
+                    result.push(this.videoSprite);
+                    break;
+                case SDKItemType.GENERATOR: {
+                    const viewItem = this._pageDataUtils.getSelectedItems()[0];
+                    if (viewItem.type === SDKItemType.GENERATOR && viewItem.generatorType === 'image') {
+                        result.push(this.imageSprite);
+                    }
+                    else if (viewItem.type === SDKItemType.GENERATOR && viewItem.generatorType === 'video') {
+                        result.push(this.videoSprite);
+                    }
+                    break;
+                }
+                case SDKItemType.EFFECTS: {
+                    result.push(this.effectsSprite);
+                    break;
+                }
+                case SDKItemType.FRAME: {
+                    result.push(this.frameSprite);
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+        // 绘制自动布局指示线
+        this.renderAutoLayoutIndicator();
+        if (this.isAutoLayoutDragging && this.autoLayoutIndicator) {
+            result.push(this.autoLayoutGraphics);
+        }
+        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();
+    }
+    cancelPreparation() {
+        this.active = false;
+        this.wireframe.activeType = 'null';
+    }
+    /**
+     * 行动准备事件 - 获取鼠标交互状态
+     * @param event 鼠标事件
+     */
+    preparationAction(event) {
+        if (!this.interactive) {
+            console.warn('Transform gizmo is not opened, use #SDK.openTransformGizmo() open this feature.');
+            return undefined;
+        }
+        const point = new Vector2(event.offsetX, event.offsetY);
+        const wireframe = this.wireframe;
+        this.refreshTransformType(point);
+        const { interactiveDirection } = wireframe;
+        this.refreshCursorResult(this.activeType, getVector2Angle(interactiveDirection));
+        if (this.activeType === 'translation') {
+            this.onSelectorGizmoTrigger = this.selectorGizmo.preparationAction(event, 'transform') === 'selector';
+        }
+        this.active = this.activeType !== 'null';
+        if (this.active) {
+            return this.type;
+        }
+        else {
+            return undefined;
+        }
+    }
+    /**
+     * 行动前置事件 - 交互预备事件
+     * @param event 鼠标事件
+     */
+    preAction(event, isDoubleClick = false) {
+        // 存储修改前的值
+        this._pageDataUtils.saveUndoRedoOldData();
+        this.active = event.buttons === 1;
+        this.startPoint = new Vector2(event.clientX, event.clientY);
+        this.lastPoint = new Vector2(event.clientX, event.clientY);
+        this.cursorPoint = new Vector2(event.offsetX, event.offsetY);
+        // 清空之前的状态记录，防止残留数据
+        this.groupsNeedProcess.clear();
+        this.refreshFrameBoxes();
+        // 非左键时不触发交互态
+        if (event.buttons !== 1) {
+            return undefined;
+        }
+        if (isDoubleClick) {
+            return this.selectorGizmo.preAction(event, isDoubleClick, new Vector2(event.offsetX, event.offsetY));
+        }
+        this.active = true;
+        if (this.wireframe.activeType === 'null') {
+            this.wireframe.activeType = 'translation';
+        }
+        const viewportPoint = this.cursorPoint.clone().subtract(this._pageDataUtils.getViewportLeftTopPosition());
+        this.initInteractionPlane(viewportPoint);
+        this.lastWorldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewportPoint) ?? new Vector3();
+        this.activeType = isDoubleClick ? 'null' : this.activeType;
+        return this.type;
+    }
+    /**
+     * 行动事件 - 变换交互
+     * @param event 鼠标事件
+     */
+    action(event) {
+        if (!this.interactive) {
+            console.warn('Transform gizmo is not opened, use #SDK.openTransformGizmo() open this feature.');
+            return undefined;
+        }
+        if (!this.active) {
+            this.active = true;
+            this.refreshWireframeBySelectedItems();
+            this.wireframe.activeType = 'translation';
+            this.lastPoint.set(event.clientX, event.clientY);
+            this.cursorPoint.set(event.offsetX, event.offsetY);
+            const viewportPoint = this.cursorPoint.clone().subtract(this._pageDataUtils.getViewportLeftTopPosition());
+            this.initInteractionPlane(viewportPoint);
+            this.lastWorldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewportPoint) ?? new Vector3();
+            // 清空之前的状态记录，防止残留数据
+            this.groupsNeedProcess.clear();
+            this.refreshFrameBoxes();
+        }
+        const currentPoint = new Vector2(event.clientX, event.clientY);
+        const shift = new Vector2().subtractVectors(currentPoint, this.lastPoint);
+        if (!this.wireframe.interactive || shift.length() <= 0) {
+            return;
+        }
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        // wireframe.refreshActiveType(shift, event.altKey, event.shiftKey);
+        const { anchor, activeType, interactiveDirection, scaleCorner } = this.wireframe;
+        const pageData = this._pageDataUtils.getPageData();
+        assertExist(pageData);
+        let cursorRotation = 0;
+        switch (activeType) {
+            // 旋转交互
+            case 'rotation': {
+                const center = anchor.clone();
+                const rotation = new Vector3();
+                const vecStart = new Vector2().subtractVectors(this.cursorPoint, center);
+                const vecCurrent = new Vector2().subtractVectors(this.cursorPoint.add(shift), center);
+                const angle = roundNumber(getAngleByVectors(vecStart, vecCurrent) * RAD2DEG, 3);
+                rotation.z = angle;
+                this.rotationAngle += angle;
+                cursorRotation = getVector2Angle(interactiveDirection) + this.rotationAngle * DEG2RAD;
+                selectedItems.forEach(item => {
+                    this._pageDataUtils.rotateItem(item.id, rotation);
+                });
+                break;
+            }
+            case 'translation': {
+                // 平移
+                const move = shift.clone();
+                if (this.enableAdsorption) {
+                    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.wireframe.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(this.cursorPoint.add(move).clone().subtract(this._pageDataUtils.getViewportLeftTopPosition()));
+                if (worldPosition) {
+                    const translation = worldPosition.clone().subtract(this.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, this.cursorPoint.clone());
+                    });
+                    this.lastWorldPosition.copyFrom(worldPosition);
+                }
+                break;
+            }
+            case 'scale': {
+                // 缩放
+                const resultViewPoint = this.cursorPoint.add(shift).clone().subtract(this._pageDataUtils.getViewportLeftTopPosition());
+                if (!scaleCorner || !this.scaleParam) {
+                    return;
+                }
+                const selectedItem = selectedItems[0] ?? undefined;
+                // html卡片内容在非自动缩放的情况下，拖动的时候内容自适应，因此与智能画板一样，需要默认是自由缩放（即自由改大小）
+                const isSingleAutoFitContentCardItem = selectedItems.length === 1 && selectedItem && isCardItem(selectedItem) && !selectedItem.isAutoScale;
+                const isShiftLockScale = selectedItem && selectedItems.length === 1 && (isFrameItem(selectedItem) || isSingleAutoFitContentCardItem) ? !this.isShiftDown : this.isShiftDown;
+                const farthestCorner = this.scaleParam.farthestCorner;
+                const isValidScale = (scaleCorner.x - farthestCorner.x) * (this.cursorPoint.x - farthestCorner.x) > 0 && (scaleCorner.y - farthestCorner.y) * (this.cursorPoint.y - farthestCorner.y) > 0;
+                if (!isValidScale && this.isLockScale && !this.isShiftDown) {
+                    resultViewPoint.x = farthestCorner.x + (scaleCorner.x - farthestCorner.x) / Math.abs(scaleCorner.x - farthestCorner.x) * 4;
+                    resultViewPoint.y = farthestCorner.y + (scaleCorner.y - farthestCorner.y) / Math.abs(scaleCorner.y - farthestCorner.y) * 4;
+                }
+                const worldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(resultViewPoint);
+                if (worldPosition) {
+                    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);
+                    if (!this.isLockScale || isShiftLockScale) {
+                        scalar.x = isEqual(currentStartScale.x, 0) ? 1 : currentScale.x / currentStartScale.x;
+                        scalar.y = isEqual(currentStartScale.y, 0) ? 1 : currentScale.y / currentStartScale.y;
+                        scalar.z = isEqual(currentStartScale.z, 0) ? 1 : currentScale.z / currentStartScale.z;
+                    }
+                    else {
+                        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;
+                            }
+                        }
+                    }
+                    // 计算 resultScalar 和位移补偿
+                    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);
+                    // 判断是否为 FrameItem，如果是则走尺寸调整逻辑
+                    if (selectedItem && isFrameItem(selectedItem)) {
+                        const currentWidth = selectedItem.pixelWidth;
+                        const currentHeight = selectedItem.pixelHeight;
+                        const newWidth = currentWidth * resultScalar.x;
+                        const newHeight = currentHeight * resultScalar.y;
+                        this._pageDataUtils.resizeFrameItem(selectedItem.id, [newWidth, newHeight], translation);
+                    }
+                    else if (isSingleAutoFitContentCardItem && selectedItem && isCardItem(selectedItem)) {
+                        const currentWidth = selectedItem.pixelWidth;
+                        const currentHeight = selectedItem.pixelHeight;
+                        const newWidth = currentWidth * resultScalar.x;
+                        const newHeight = currentHeight * resultScalar.y;
+                        this._pageDataUtils.resizeCardItem(selectedItem.id, [newWidth, newHeight], translation);
+                        void this._pageDataUtils.setItemProperty({
+                            itemId: selectedItem.id,
+                            type: SDKItemType.CARD,
+                            property: {
+                                width: newWidth,
+                                height: newHeight,
+                            },
+                        });
+                    }
+                    else {
+                        // 普通元素的缩放逻辑
+                        selectedItems.forEach(item => {
+                            this._pageDataUtils.scaleItem(item.id, resultScalar);
+                            this._pageDataUtils.moveItem(item.id, translation);
+                        });
+                    }
+                    this.lastWorldPosition.copyFrom(worldPosition);
+                }
+                cursorRotation = getVector2Angle(interactiveDirection);
+                break;
+            }
+        }
+        // 检查是否是自动布局画板的子元素
+        selectedItems.forEach(item => {
+            this.updateAutoLayoutIndicator(item);
+        });
+        this.refreshCursorResult(activeType, cursorRotation);
+        this.lastPoint.copyFrom(currentPoint);
+    }
+    /**
+     * 行动结束时间 - 交互结束
+     * @param event 鼠标事件
+     */
+    endAction(event) {
+        // 执行自动布局重排序（如果在自动布局拖拽中）
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        const draggedItem = selectedItems.length === 1 ? selectedItems[0] : undefined;
+        this.executeAutoLayoutReorder(draggedItem);
+        // 推入 undo / redo 栈
+        this._pageDataUtils.pushUndoRedoData();
+        this.active = false;
+        const { clientX, clientY, offsetX, offsetY } = event;
+        const currentPoint = new Vector2(clientX, clientY);
+        if (currentPoint.distanceTo(this.startPoint) < 4 && this.onSelectorGizmoTrigger) {
+            const selectedIds = this.selectorGizmo.hitTest(new Vector2(offsetX, offsetY));
+            if (!this.isShiftDown) {
+                this._pageDataUtils.clearSelectedItems(selectedIds.length === 0);
+            }
+            this.selectorGizmo.addSelectedItem(selectedIds[0]);
+        }
+        else {
+            const shift = new Vector2().subtractVectors(currentPoint, this.lastPoint);
+            this.cursorPoint.add(shift);
+            const wireframe = this.wireframe;
+            if (wireframe.activeType === 'scale') {
+                this.refreshFrameChildren();
+            }
+            // 根据当前鼠标位置重新计算结果
+            this.refreshTransformType(this.cursorPoint);
+            const { activeType, interactiveDirection } = wireframe;
+            this.refreshCursorResult(activeType, getVector2Angle(interactiveDirection));
+            this.adsorptionGizmo.clearAbsorptionResult();
+        }
+        // 处理需要断开父子关系的组
+        this.processGroupsNeedProcess();
+        this.toAddedFrameId = undefined;
+        this.frameBoxes.clear();
+        this.onSelectorGizmoTrigger = false;
+        this.rotationAngle = 0;
+        this.lastPoint = new Vector2();
+        this.startPoint = new Vector2();
+        this.cursorPoint = new Vector2();
+        return undefined;
+    }
+    /**
+     * 交互中断事件 - 清空交互状态以及鼠标状态, 重新进行交互Gizmo选中
+     * @returns undefined
+     */
+    interruption() {
+        this.active = false;
+        this.cursorResult.type = 'normal';
+        this.adsorptionGizmo.clearAbsorptionResult();
+        // 清空需要处理的组记录（交互被打断时不执行断开操作）
+        if (this.groupsNeedProcess.size > 0) {
+            console.log('Clearing groupsNeedProcess due to interruption.');
+            this.groupsNeedProcess.clear();
+        }
+        // 清空自动布局相关状态（交互被打断时不执行行列修改）
+        if (this.isAutoLayoutDragging) {
+            this.autoLayoutIndicator = null;
+            this.isAutoLayoutDragging = false;
+            this.autoLayoutDragOriginalPosition = null;
+            this.pendingLayoutPosition = null;
+        }
+        return undefined;
+    }
+    /**
+     * 刷新指针结果
+     * @param activeType 交互类型
+     * @param point 指针位置
+     * @param dir 指针方向
+     */
+    refreshCursorResult(activeType, angle = 0) {
+        switch (activeType) {
+            case 'scale': {
+                this.cursorResult = {
+                    type: 'scale',
+                    angle: (angle + Math.PI / 4) * RAD2DEG,
+                };
+                break;
+            }
+            case 'rotation': {
+                this.cursorResult = {
+                    type: 'rotation',
+                    angle: (angle + Math.PI / 4) * RAD2DEG,
+                };
+                break;
+            }
+            case 'translation':
+            case 'null': {
+                this.cursorResult = {
+                    type: 'normal',
+                    angle: 0,
+                };
+                break;
+            }
+        }
+    }
+    /**
+     * 根据选中元素刷新交互框
+     */
+    refreshResults() {
+        const lastActiveType = this.wireframe.activeType;
+        this.refreshWireframeBySelectedItems();
+        if (lastActiveType !== this.wireframe.activeType) {
+            this.refreshCursorResult(this.wireframe.activeType);
+        }
+    }
+    initInteractionPlane(viewportPoint) {
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        switch (this.wireframe.activeType) {
+            case 'scale': {
+                const selectedItem = selectedItems.length == 1 ? selectedItems[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, box } = this.wireframe;
+                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 (['scale'].includes(this.wireframe.activeType) && this.wireframe.scaleCorner) {
+                    const viewportScaleCorner = this.wireframe.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 'translation':
+            case 'rotation': {
+                this._pageDataUtils.interactionUtils.initInteractionPlane();
+                break;
+            }
+        }
+    }
+    refreshRenderObject() {
+        this.graphics.clear();
+        this.nameText.text = '';
+        this.sizeText.text = '';
+        const { wireframeAlpha, wireframeColor, wireframeWidth, cornerFillColor, cornerLineWidth, cornerLineColor, cornerLineAlpha, infoShowEnabled, sizeTextColor, nameTextColor } = SDK.config.gestureHandlerConfig.transformGizmoConfig;
+        if (!this.wireframe.box.isEmpty()) {
+            // line draw
+            this.graphics.lineStyle(wireframeWidth, wireframeColor, wireframeAlpha);
+            this.wireframe.edges.forEach(edge => {
+                this.graphics.drawLine(edge);
+            });
+            const drawNonOrthogonalBox = (box) => {
+                box.corners.forEach((corner, index) => {
+                    const line = new Line2(corner, box.corners[(index + 1) % 4]);
+                    this.graphics.drawLine(line);
+                });
+            };
+            // children draw
+            this.wireframe.childrenBoxes.forEach(box => {
+                drawNonOrthogonalBox(box);
+            });
+            // corner draw
+            if (this.wireframe.cornerEnable) {
+                this.graphics.beginFill(cornerFillColor);
+                this.graphics.lineStyle(cornerLineWidth, cornerLineColor, cornerLineAlpha);
+                this.wireframe.scaleCorners.forEach(corner => {
+                    this.graphics.drawCircle(corner.center.x, corner.center.y, corner.radius);
+                });
+                this.graphics.endFill();
+            }
+            // info draw
+            if (this.infoType !== spec.ItemType.base && infoShowEnabled) {
+                const selectedItems = this._pageDataUtils.getSelectedItems();
+                const viewItem = selectedItems[0];
+                const name = selectedItems.length === 1 ? viewItem.name : '';
+                const { rotation } = viewItem.property;
+                const { pixelWidth, pixelHeight } = viewItem;
+                const size = [pixelWidth, pixelHeight];
+                const activeSprite = this.infoType === SDKItemType.GROUP ? this.groupSprite
+                    : this.infoType === SDKItemType.SPRITE ? this.imageSprite
+                        : this.infoType === SDKItemType.CARD ? this.getCardSprite(viewItem.cardType)
+                            : this.infoType === SDKItemType.TEXT ? this.textSprite
+                                : this.infoType === SDKItemType.VIDEO ? this.videoSprite
+                                    : this.infoType === SDKItemType.GENERATOR && viewItem.generatorType === 'image' ? this.imageSprite
+                                        : this.infoType === SDKItemType.GENERATOR && viewItem.generatorType === 'video' ? this.videoSprite
+                                            : this.infoType === SDKItemType.EFFECTS ? this.effectsSprite
+                                                : this.infoType === SDKItemType.FRAME ? this.frameSprite
+                                                    : this.imageSprite;
+                const corner = this.wireframe.box.corners[3];
+                const resultRotation = rotation[2] * DEG2RAD;
+                activeSprite.anchor.set(0, 1);
+                activeSprite.x = corner.x;
+                activeSprite.y = corner.y - 5;
+                activeSprite.rotation = -resultRotation;
+                const { x: viewBoxWidth } = this.wireframe.box.getSize();
+                const namePosition = corner.clone().add(new Vector2(20, 0)).rotateAround(corner, -resultRotation);
+                const startSizePoint = this.wireframe.box.corners[0].clone().subtract(new Vector2(0, 20));
+                const resultSizePoint = startSizePoint.rotateAround(this.wireframe.box.corners[0].clone(), -resultRotation);
+                this.sizeText.text = size.map(s => roundNumber(s, 0)).join(' * ');
+                this.sizeText.style.fill = sizeTextColor;
+                this.sizeText.anchor.set(1, 0);
+                this.sizeText.x = resultSizePoint.x;
+                this.sizeText.y = resultSizePoint.y;
+                this.sizeText.rotation = -resultRotation;
+                const { width: sizeTextWidth } = this.sizeText.getBounds();
+                if (viewBoxWidth < sizeTextWidth * 2) {
+                    this.sizeText.text = '';
+                }
+                const nameText = ` ${name}`;
+                const rotationShift = new Vector2(0, 4).rotateAround(new Vector2(), resultRotation);
+                this.nameText.text = nameText;
+                this.nameText.style.fill = nameTextColor;
+                this.nameText.anchor.set(0, 1);
+                this.nameText.x = namePosition.x + rotationShift.x;
+                this.nameText.y = namePosition.y - rotationShift.y;
+                this.nameText.rotation = -resultRotation;
+                const { width: nameTextWidth } = this.nameText.getBounds();
+                if ((20 + nameTextWidth + sizeTextWidth) > viewBoxWidth) {
+                    if (viewBoxWidth < sizeTextWidth * 2) {
+                        this.sizeText.text = '';
+                        this.nameText.text = processText(nameText, nameTextStyle, viewBoxWidth - 20, 1);
+                    }
+                    else {
+                        const nameTextWidth = viewBoxWidth - 20 - sizeTextWidth - 5;
+                        this.nameText.text = processText(nameText, nameTextStyle, nameTextWidth, 1);
+                    }
+                }
+            }
+            // to added frame wireframe
+            if (this.toAddedFrameId) {
+                const targetFrameBox = this.frameBoxes.get(this.toAddedFrameId);
+                if (targetFrameBox) {
+                    this.graphics.lineStyle(wireframeWidth, wireframeColor, wireframeAlpha);
+                    this.graphics.drawBox(targetFrameBox);
+                }
+            }
+        }
+    }
+    refreshTransformType(point) {
+        // 位于交互范围内
+        this.activeType = 'null';
+        let continueCheck = true;
+        this.wireframe.interactiveDirection = new Vector2();
+        this.wireframe.scaleCorner = undefined;
+        this.wireframe.scaleEdgeCorners = undefined;
+        if (!this.wireframe.interactive) {
+            return;
+        }
+        if (continueCheck && this.wireframe.totalBox.containsPoint(point)) {
+            if (this.wireframe.scaleEnabled) {
+                // 判断角缩放交互
+                for (let i = 0, len = this.wireframe.scaleCorners.length; i < len; i++) {
+                    const state = this.wireframe.scaleCorners[i].containsPoint(point);
+                    if (state) {
+                        continueCheck = false;
+                        this.activeType = 'scale';
+                        this.wireframe.activeType = 'scale';
+                        this.wireframe.scaleCorner = this.wireframe.scaleCorners[i].center.clone();
+                        this.wireframe.interactiveDirection.copyFrom(this.wireframe.scaleCorners[i].center).subtract(this.wireframe.box.getCenter());
+                        break;
+                    }
+                }
+            }
+            // 判断平移交互
+            if (continueCheck && this.wireframe.box.containsPoint(point, false)) {
+                continueCheck = false;
+                this.activeType = 'translation';
+                this.wireframe.activeType = 'translation';
+            }
+            // 判断角旋转交互
+            if (this.wireframe.rotationEnabled) {
+                for (let i = 0, len = this.wireframe.scaleCorners.length; i < len; i++) {
+                    const state = this.wireframe.rotationCorners[i].containsPoint(point);
+                    if (state && continueCheck) {
+                        continueCheck = false;
+                        this.activeType = 'rotation';
+                        this.wireframe.activeType = 'rotation';
+                        this.wireframe.interactiveDirection.copyFrom(this.wireframe.rotationCorners[i].center).subtract(this.wireframe.box.getCenter());
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    refreshWireframeBySelectedItems() {
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        const isTemplateMode = SDK.config.mode === 'template';
+        const selectedItem = selectedItems.length === 1 ? selectedItems[0] : undefined;
+        const isSingleCardItem = isCardItem(selectedItem);
+        const isGeneratorItem = selectedItem?.type === SDKItemType.GENERATOR;
+        const isAutoLayoutFrame = selectedItem?.type === SDKItemType.FRAME && selectedItem?.layoutMode === FrameLayoutMode.AUTO;
+        const canScale = selectedItems.length === 1 && selectedItem?.type !== SDKItemType.GROUP && !isAutoLayoutFrame && !isGeneratorItem;
+        const box = new Box2();
+        this.wireframe.edges = [];
+        this.wireframe.scaleCorners = [];
+        this.wireframe.childrenBoxes = [];
+        this.wireframe.rotationCorners = [];
+        this.wireframe.rotationEnabled = isTemplateMode;
+        this.wireframe.scaleEnabled = canScale || isTemplateMode;
+        this.wireframe.cornerEnable = canScale || isTemplateMode;
+        if (selectedItems.length > 1) {
+            selectedItems.forEach(item => {
+                if (this._pageDataUtils.getItemShow(item.id)) {
+                    const itemViewBox = this._pageDataUtils.getViewBoxById(item.id);
+                    box.union(itemViewBox);
+                    this.wireframe.childrenBoxes.push(new Box2().copyFrom(itemViewBox).expandByScalar(1));
+                }
+            });
+            this.wireframe.anchor = box.getCenter();
+            this.wireframe.interactive = true;
+        }
+        else if (selectedItems.length === 1) {
+            const item = selectedItems[0];
+            if ((item.type !== SDKItemType.TEXT) && this._pageDataUtils.getItemShow(item.id)) {
+                const itemViewBox = this._pageDataUtils.getViewBoxById(item.id);
+                box.copyFrom(itemViewBox);
+                this.wireframe.anchor = this._pageDataUtils.getItemViewAnchor(item.id) ?? box.getCenter();
+                this.wireframe.interactive = this._pageDataUtils.getItemEditEnable(item.id);
+            }
+        }
+        const isBoxEmpty = box.isEmpty();
+        const boxExpandScalar = isBoxEmpty ? 0 : 1;
+        const totalBoxExpandScalar = isBoxEmpty ? 0 : 16;
+        this.wireframe.activeType = !selectedItems.length ? 'null' : this.wireframe.activeType;
+        this.wireframe.box.copyFrom(box).expandByScalar(boxExpandScalar);
+        this.wireframe.totalBox.copyFrom(box).expandByScalar(totalBoxExpandScalar);
+        // 根据box获取边缘线
+        const corners = this.wireframe.box.corners;
+        if (!isSingleCardItem) {
+            corners.forEach((corner, i) => {
+                this.wireframe.edges.push(new Line2(new Vector2().copyFrom(corner), new Vector2().copyFrom(corners[(i + 1) % 4])));
+            });
+        }
+        const { scaleCircleSize, rotationCircleSize, } = SDK.config.gestureHandlerConfig.transformGizmoConfig;
+        // 成组暂不支持缩放
+        if (selectedItems.length === 1) {
+            this.wireframe.box.corners.forEach(corner => {
+                // 缩放Circle
+                this.wireframe.scaleCorners.push(new Circle(corner, scaleCircleSize));
+                // 旋转Circle
+                const dir = new Vector2().subtractVectors(corner, this.wireframe.box.getCenter());
+                const center = new Vector2().copyFrom(this.wireframe.box.getCenter()).add(new Vector2().copyFrom(dir).normalize().multiply(dir.length() + rotationCircleSize - scaleCircleSize));
+                this.wireframe.rotationCorners.push(new Circle(center, rotationCircleSize));
+            });
+        }
+    }
+    setAdsorptionEnabled(state) {
+        this.enableAdsorption = state;
+    }
+    /**
+     * @description 处理需要断开父子关系的组
+     * 在拖拽结束时调用，将画板外的子元素从组中移除，并移出画板
+     */
+    processGroupsNeedProcess() {
+        if (this.groupsNeedProcess.size === 0) {
+            return;
+        }
+        this.groupsNeedProcess.forEach(({ groupId, frameId, childrenOutOfFrame }) => {
+            const groupItem = this._pageDataUtils.getSDKItem(groupId);
+            if (!groupItem || !isGroupItem(groupItem)) {
+                return;
+            }
+            // 1. 从组中移除画板外的子元素
+            groupItem.property.children = groupItem.property.children.filter(childId => !childrenOutOfFrame.includes(childId));
+            // 2. 清除子元素的 parentId
+            childrenOutOfFrame.forEach(childId => {
+                const childItem = this._pageDataUtils.getSDKItem(childId);
+                if (childItem) {
+                    childItem.parentId = undefined;
+                }
+            });
+            // 3. 将不在画板内的子元素移出画板（移回主合成）
+            if (childrenOutOfFrame.length > 0 && frameId) {
+                console.log(`Moving ${childrenOutOfFrame.length} children out of frame ${frameId}`);
+                this._pageDataUtils.moveItemsOutOfFrame(childrenOutOfFrame);
+            }
+        });
+        this.groupsNeedProcess.clear();
+    }
+    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;
+    }
+    // ====== 自动布局拖拽重排序功能 ======
+    /**
+     * @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;
+    }
+    refreshFrameChildren() {
+        const selectedItems = this._pageDataUtils.getSelectedItems();
+        if (selectedItems.length === 1) {
+            this._pageDataUtils.refreshFrameChildren(selectedItems[0].id);
+        }
+    }
+}