light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/operate-provider/undo-redo/OperateType.ts

@@ -0,0 +1,183 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+/**
+ * 操作类型枚举
+ */
+import {ConfigureObjectFragments} from "light-chaser-util/lib/ObjectUtil.ts";
+import {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+
+export enum OperateType {
+    /**
+     * 拖拽
+     */
+    DRAG,
+    /**
+     * 缩放
+     */
+    RESIZE,
+    /**
+     * 添加组件
+     */
+    ADD,
+    /**
+     * 删除组件
+     */
+    DEL,
+    /**
+     * 更新组件样式
+     */
+    UPD_STYLE,
+    /**
+     * 隐藏组件
+     */
+    HIDE,
+    /**
+     * 组件排序
+     */
+    ORDER,
+    /**
+     * 组件锁定
+     */
+    LOCK,
+    /**
+     * 更新图层分组
+     */
+    UPDATE_LAYER,
+    /**
+     * 旋转
+     */
+    ROTATE,
+}
+
+/**
+ * 记录操作对应的数据类型
+ */
+type RecordDataType = IDragOperateData
+    | IResizeOperateData
+    | IUpdStyleOperateData
+    | IAddOperateData[]
+    | IDelOperateData[]
+    | IHideOperateData[]
+    | IOrderOperateData[]
+    | ILockOperateData[]
+    | IUpdLayerOperateData[]
+    | IUpdLayerOperateData
+    | IRotateOperateData[]
+    | IGraphicalTransform[]
+    ;
+
+/**
+ * 使用HistoriesRecordType，因为一次操作可能会涉及到多个不同维度的更新。比如：删除图层时，如果存在分组，还需要更新分组的子图层id
+ * 此场景同时要删除图层和更新图层。视为两个动作
+ */
+export interface IHistoryRecords {
+    actions: IHistoryRecord[];
+}
+
+/**
+ * 历史记录类型
+ */
+export interface IHistoryRecord {
+    type: OperateType;
+    prev: RecordDataType | null;
+    next: RecordDataType | null;
+}
+
+
+/**
+ * 拖拽数据类型
+ */
+export interface IDragOperateData {
+    ids: string[];
+    x: number;
+    y: number;
+}
+
+/**
+ * 拖拽数据类型
+ */
+export interface IRotateOperateData {
+    id: string;
+    rotate: number;
+    x: number;
+    y: number;
+}
+
+export interface IGraphicalTransform {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+}
+
+export interface IHideOperateData {
+    id: string;
+    hide: boolean;
+}
+
+export interface ILockOperateData {
+    id: string;
+    lock: boolean;
+}
+
+export interface IOrderOperateData {
+    id: string;
+    order: number;
+}
+
+
+/**
+ * 缩放数据类型
+ */
+export interface IResizeOperateData {
+    ids: string[];
+    width: number;
+    height: number;
+    direction: [number, number];
+}
+
+/**
+ * 添加数据类型
+ */
+export interface IAddOperateData {
+    id?: string;
+    layerConfig?: ILayerItem;
+    elemConfig?: Record<string, any>;
+    layerHeader?: string;
+    layerTail?: string;
+}
+
+/**
+ * 删除数据类型
+ */
+export interface IDelOperateData {
+    id?: string;
+    layerConfig?: ILayerItem;
+    elemConfig?: Record<string, any>;
+    layerHeader?: string;
+    layerTail?: string;
+}
+
+/**
+ * 样式数据类型
+ */
+export interface IUpdStyleOperateData {
+    id: string;
+    data: ConfigureObjectFragments;
+}
+
+export interface IUpdLayerOperateData extends ILayerItem {
+    layerHeader?: string;
+    layerTail?: string;
+}

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/AbstractRollback.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {IHistoryRecord} from "../OperateType";
+
+/**
+ * 撤销回滚抽象接口定义
+ */
+export default abstract class AbstractRollback {
+    /**
+     * 撤销
+     */
+    public abstract undo(record: IHistoryRecord): void;
+
+    /**
+     * 重做
+     */
+    public abstract redo(record: IHistoryRecord): void;
+}

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/AddRollbackImpl.ts

@@ -0,0 +1,89 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import eventOperateStore from "../../EventOperateStore";
+import {IAddOperateData, IHistoryRecord} from "../OperateType";
+import rightStore from "../../../right/RightStore";
+import {cloneDeep} from "lodash";
+import componentDataGvParser from "../../../left/global-variable/parse/ComponentDataGvParser.ts";
+
+
+export class AddRollbackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {layerManager} = window.LC_ENV.currentManager;
+        const {next} = record!;
+        //执行正向操作添加元素
+        const {addItem} = layerManager;
+        const compIds: string[] = [];
+        (next as IAddOperateData[]).forEach((item) => {
+            if ('id' in item) {
+                compIds.push(item.id!);
+                addItem(cloneDeep(item.layerConfig!));
+                if ('elemConfig' in item)
+                    layerManager.elemConfigs![item.id!] = cloneDeep(item.elemConfig!);
+            }
+            if ('layerHeader' in item)
+                layerManager.layerHeader = item.layerHeader;
+            if ('layerTail' in item)
+                layerManager.layerTail = item.layerTail;
+        });
+        //添加时重新计算全局变量和组件配置的绑定关系
+        if (compIds.length > 0) {
+            const tempTimer = setTimeout(() => {
+                componentDataGvParser.bindConfigToGvById(compIds);
+                clearTimeout(tempTimer);
+            }, 10);
+        }
+
+    }
+
+    undo(record: IHistoryRecord): void {
+        if (!record)
+            return;
+        const {layerManager} = window.LC_ENV.currentManager;
+        const {setTargetIds, focusDesignerCanvas} = eventOperateStore;
+        const {prev, next} = record!;
+        //执行反向操作删除元素
+        const {delItem} = layerManager;
+        const delIds: string[] = [];
+        next && (next! as IAddOperateData[]).forEach((item) => delIds.push(item.id!));
+        delItem(delIds);
+        prev && (prev as IAddOperateData[]).forEach((item) => {
+            if ('layerHeader' in item!)
+                layerManager.layerHeader = item.layerHeader;
+            if ('layerTail' in item!)
+                layerManager.layerTail = item.layerTail;
+        });
+
+
+        //清空框选状态,避免空框选
+        setTargetIds([]);
+        //如果右侧属性面板展示的设置项对应的组件，正是当前被删除的组件，则卸载属性面板
+        const {setContentVisible, activeConfig, activeElem} = rightStore;
+        if (delIds.includes(activeElem.id!)) {
+            setContentVisible(false);
+            activeConfig(null, "");
+        }
+        //删除元素后重新聚焦画布
+        focusDesignerCanvas();
+        const tempTimer = setTimeout(() => {
+            //删除元素，解绑全局变量
+            componentDataGvParser.unbindFromGv(delIds);
+            clearTimeout(tempTimer);
+        }, 10);
+    }
+
+}
+
+const addRollbackImpl = new AddRollbackImpl();
+export default addRollbackImpl;

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/DelRollbackImpl.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import eventOperateStore from "../../EventOperateStore";
+import {IDelOperateData, IHistoryRecord} from "../OperateType";
+import {cloneDeep} from "lodash";
+import componentDataGvParser from "../../../left/global-variable/parse/ComponentDataGvParser.ts";
+
+export class DelRollbackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {layerManager} = window.LC_ENV.currentManager;
+        const {prev, next} = record!;
+        const layerData: IDelOperateData[] = [];
+        (prev as IDelOperateData[]).forEach((item) => {
+            if ('id' in item)
+                layerData.push(item);
+        });
+
+        //执行正向操作删除元素
+        const {delItem} = layerManager;
+        const delIds: string[] = [];
+        layerData.forEach((item) => delIds.push(item.id!));
+        delItem(delIds);
+        //恢复下一个状态的头尾指针指向
+        next && (next as IDelOperateData[]).forEach((item) => {
+            if ('layerHeader' in item)
+                layerManager.layerHeader = item.layerHeader;
+            if ('layerTail' in item)
+                layerManager.layerTail = item.layerTail;
+        });
+
+        const {setTargetIds, focusDesignerCanvas} = eventOperateStore;
+        //清空框选状态,避免空框选
+        setTargetIds([]);
+        //删除元素后重新聚焦画布
+        focusDesignerCanvas();
+        const tempTimer = setTimeout(() => {
+            //删除元素，解绑全局变量
+            componentDataGvParser.unbindFromGv(delIds);
+            clearTimeout(tempTimer);
+        }, 10);
+    }
+
+    undo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {layerManager} = window.LC_ENV.currentManager;
+        const {setTargetIds} = eventOperateStore;
+        const {prev} = record!;
+        //区分开图层数据和指针数据
+        const layerData: IDelOperateData[] = [];
+        const pointerData: IDelOperateData[] = [];
+        (prev as IDelOperateData[]).forEach((item) => {
+            if ('id' in item)
+                layerData.push(item);
+            else
+                pointerData.push(item);
+        });
+
+        //执行反向操作添加元素
+        const {addItem, elemConfigs} = layerManager;
+        const targetIds: string[] = [];
+        layerData.forEach((item) => {
+            addItem(cloneDeep(item.layerConfig!));
+            elemConfigs![item.id!] = item.elemConfig;
+            targetIds.push(item.id!);
+        });
+
+        //恢复上一个状态的头尾指针指向
+        pointerData.forEach((item) => {
+            if ('layerHeader' in item)
+                layerManager.layerHeader = item.layerHeader;
+            if ('layerTail' in item)
+                layerManager.layerTail = item.layerTail;
+        });
+
+        //选中目标元素，React18推出了新的批处理和并发执行机制，导致之前17版本中部分逻辑代码的执行顺序发生了变化，因此这里需要将反向执行操作放到下一个事件循环中执行
+        Promise.resolve().then(() => setTargetIds(targetIds));
+
+        const tempTimer = setTimeout(() => {
+            //添加元素,重新计算组件配置和全局变量的绑定关系,由于此时controller对象还没创建完毕，因此将这个操作放到下一次事件循环中。
+            componentDataGvParser.bindConfigToGvById(targetIds);
+            clearTimeout(tempTimer);
+        }, 10);
+    }
+
+}
+
+const delRollbackImpl = new DelRollbackImpl();
+export default delRollbackImpl;

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/DragRollbackImpl.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import eventOperateStore from "../../EventOperateStore";
+import {IGraphicalTransform, IHistoryRecord} from "../OperateType";
+import DomUtil from "../../../../util/DomUtil.ts";
+
+export class DragRollbackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {setTargetIds} = eventOperateStore;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager;
+        const {next} = record!;
+        const nextRecordData = next! as IGraphicalTransform[];
+        //选中目标元素
+        setTargetIds([]);
+        //执行反向操作,React18推出了新的批处理和并发执行机制，导致之前17版本中部分逻辑代码的执行顺序发生了变化，因此这里需要将反向执行操作放到下一个事件循环中执行
+        updateLayer(nextRecordData, false);
+        nextRecordData.forEach((item) => {
+            const {id, x, y, rotate} = item;
+            DomUtil.updateDomStyle(document.getElementById(id!)!, {transform: `translate(${x}px, ${y}px) rotate(${rotate}deg)`})
+        })
+        Promise.resolve().then(() => {
+            setTargetIds(nextRecordData.map((item) => item.id));
+        })
+    }
+
+    undo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {setTargetIds} = eventOperateStore;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager;
+        const {prev} = record!;
+        const prevRecordData = prev! as IGraphicalTransform[];
+        //选中目标元素
+        setTargetIds([]);
+        //执行反向操作,React18推出了新的批处理和并发执行机制，导致之前17版本中部分逻辑代码的执行顺序发生了变化，因此这里需要将反向执行操作放到下一个事件循环中执行
+        updateLayer(prevRecordData, false);
+        prevRecordData.forEach((item) => {
+            const {id, x, y, rotate} = item;
+            DomUtil.updateDomStyle(document.getElementById(id!)!, {transform: `translate(${x}px, ${y}px) rotate(${rotate}deg)`})
+        })
+        Promise.resolve().then(() => {
+            setTargetIds(prevRecordData.map((item) => item.id));
+        })
+    }
+
+}
+
+const dragRollbackImpl = new DragRollbackImpl();
+export default dragRollbackImpl;

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/HideRollbackImpl.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import {IHideOperateData, IHistoryRecord} from "../OperateType";
+import layerListStore from "../../../left/layer-list/LayerListStore";
+import designerLeftStore from "../../../left/DesignerLeftStore";
+import {BaseLayer} from "../../../left/layer-list/item/BaseLayer.tsx";
+
+/**
+ * hide, lock, order的撤销与回滚操作实现
+ */
+export class HideRollbackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {next} = record;
+        const {updateLayer, controllers} = window.LC_ENV.currentManager.layerManager
+        if (next)
+            updateLayer(next as IHideOperateData[]);
+        const {layerInstances} = layerListStore;
+        const {menu} = designerLeftStore;
+        (next as IHideOperateData[])?.forEach((item) => {
+            const {id, hide} = item;
+            const controller = controllers[id];
+            if (controller)
+                controller.setVisible(!hide);
+            if (menu === 'layer-list')
+                (layerInstances[id] as BaseLayer).changeHide(hide);
+        })
+    }
+
+    undo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {prev} = record;
+        const {updateLayer, controllers} = window.LC_ENV.currentManager.layerManager
+        if (prev)
+            updateLayer(prev as IHideOperateData[]);
+        const {layerInstances} = layerListStore;
+        const {menu} = designerLeftStore;
+        (prev as IHideOperateData[])?.forEach((item) => {
+            const {id, hide} = item;
+            const controller = controllers[id];
+            if (controller)
+                controller.setVisible(!hide);
+            if (menu === 'layer-list')
+                (layerInstances[id] as BaseLayer).changeHide(hide);
+        })
+    }
+
+}
+
+const hideRollbackImpl = new HideRollbackImpl();
+export default hideRollbackImpl;

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/LockRollbackImpl.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import {IHistoryRecord, ILockOperateData} from "../OperateType";
+import {Component} from "react";
+import layerListStore from "../../../left/layer-list/LayerListStore";
+import designerLeftStore from "../../../left/DesignerLeftStore";
+
+/**
+ * hide, lock, order的撤销与回滚操作实现
+ */
+export class LockRollbackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        const {next} = record;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager
+        if (next)
+            updateLayer(next as ILockOperateData[]);
+        const {layerInstances} = layerListStore;
+        const {menu} = designerLeftStore;
+        if (menu === 'layer-list') {
+            //图层列表若显示，则需要更新图层列表的组件状态
+            (next as ILockOperateData[])?.forEach((item) => {
+                const {id, lock} = item;
+                (layerInstances[id] as Component).setState({lock});
+            })
+        }
+    }
+
+    undo(record: IHistoryRecord): void {
+        const {prev} = record;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager
+        if (prev)
+            updateLayer(prev as ILockOperateData[]);
+        const {layerInstances} = layerListStore;
+        const {menu} = designerLeftStore;
+        if (menu === 'layer-list') {
+            //图层列表若显示，则需要更新图层列表的组件状态
+            (prev as ILockOperateData[])?.forEach((item) => {
+                const {id, lock} = item;
+                (layerInstances[id] as Component).setState({lock});
+            })
+        }
+    }
+
+}
+
+const lockRollbackImpl = new LockRollbackImpl();
+export default lockRollbackImpl;

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/OrderRollbackImpl.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import {IHistoryRecord, IOrderOperateData} from "../OperateType";
+
+/**
+ * hide, lock, order的撤销与回滚操作实现
+ */
+export class OrderRollBackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        const {next} = record;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager
+        if (next) updateLayer(next as IOrderOperateData[]);
+    }
+
+    undo(record: IHistoryRecord): void {
+        const {prev} = record;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager
+        if (prev) updateLayer(prev as IOrderOperateData[]);
+    }
+
+}
+
+const orderRollBackImpl = new OrderRollBackImpl();
+export default orderRollBackImpl;

package/light-chaser-app/src/designer/operate-provider/undo-redo/core/ResizeRollbackImpl.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import AbstractRollback from "./AbstractRollback";
+import eventOperateStore from "../../EventOperateStore";
+import {IGraphicalTransform, IHistoryRecord} from "../OperateType";
+import DomUtil from "../../../../util/DomUtil.ts";
+
+export class ResizeRollbackImpl extends AbstractRollback {
+    redo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {setTargetIds} = eventOperateStore;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager;
+        const {next} = record!;
+        const nextResizeData = next! as IGraphicalTransform[];
+        //选中目标元素
+        setTargetIds([]);
+        //执行反向操作，React18推出了新的批处理和并发执行机制，导致之前17版本中部分逻辑代码的执行顺序发生了变化，因此这里需要将反向执行操作放到下一个事件循环中执行
+        updateLayer(nextResizeData, true);
+        nextResizeData.forEach((item) => {
+            const {id, x, y, width, height, rotate} = item;
+            DomUtil.updateDomStyle(document.getElementById(id!)!, {transform: `translate(${x}px, ${y}px) rotate(${rotate}deg)`, width: `${width}px`, height: `${height}px`})
+        })
+        Promise.resolve().then(() => {
+            setTargetIds(nextResizeData.map((item) => item.id));
+        })
+    }
+
+    undo(record: IHistoryRecord): void {
+        if (!record) return;
+        const {setTargetIds} = eventOperateStore;
+        const {updateLayer} = window.LC_ENV.currentManager.layerManager;
+        const {prev} = record!;
+        const prevResizeData = prev! as IGraphicalTransform[];
+        //选中目标元素
+        setTargetIds([]);
+        //执行反向操作,React18推出了新的批处理和并发执行机制，导致之前17版本中部分逻辑代码的执行顺序发生了变化，因此这里需要将反向执行操作放到下一个事件循环中执行
+        updateLayer(prevResizeData, true);
+        prevResizeData.forEach((item) => {
+            const {id, x, y, width, height, rotate} = item;
+            DomUtil.updateDomStyle(document.getElementById(id!)!, {transform: `translate(${x}px, ${y}px) rotate(${rotate}deg)`, width: `${width}px`, height: `${height}px`})
+        })
+        Promise.resolve().then(() => {
+            setTargetIds(prevResizeData.map((item) => item.id));
+        });
+    }
+
+}
+
+const resizeRollbackImpl = new ResizeRollbackImpl();
+export default resizeRollbackImpl;