任意组件组合

更新

代码优化

组件名称序号自增

代码优化

更新

更新

组合添加撤销回退优化

移除ElementsAddedCommand

移除ElementsRemovedCommand

移除ElementsUpdatedCommand

移除GroupRemovedCommand

修复bug

Author: huanghaiyang

src/components/ui/left/LeftProps.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { useStageStore } from '@/stores/stage';
+import { useStageStore } from "@/stores/stage";
 
 const stageStore = useStageStore();
 </script>

src/components/ui/right/props/AlignProps.vue

@@ -17,25 +17,25 @@ const stageStore = useStageStore();
         <el-icon :class="['iconfont', 'icon-verbise-align-left', { disabled: !stageStore.alignEnable }]" @click="stageStore.setElementsAlignLeft"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="水平居中">
-        <el-icon :class="['iconfont', 'icon-verbise-align-horizontal-center', { disabled:!stageStore.alignEnable }]" @click="stageStore.setElementsAlignCenter"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-align-horizontal-center', { disabled: !stageStore.alignEnable }]" @click="stageStore.setElementsAlignCenter"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="右对齐">
-        <el-icon :class="['iconfont', 'icon-verbise-align-right', { disabled:!stageStore.alignEnable }]" @click="stageStore.setElementsAlignRight"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-align-right', { disabled: !stageStore.alignEnable }]" @click="stageStore.setElementsAlignRight"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="顶部对齐">
-        <el-icon :class="['iconfont', 'icon-verbise-align-top', { disabled:!stageStore.alignEnable }]" @click="stageStore.setElementsAlignTop"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-align-top', { disabled: !stageStore.alignEnable }]" @click="stageStore.setElementsAlignTop"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="垂直居中">
-        <el-icon :class="['iconfont', 'icon-verbise-align-vertical-center', { disabled:!stageStore.alignEnable }]" @click="stageStore.setElementsAlignMiddle"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-align-vertical-center', { disabled: !stageStore.alignEnable }]" @click="stageStore.setElementsAlignMiddle"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="底部对齐">
-        <el-icon :class="['iconfont', 'icon-verbise-align-bottom', { disabled:!stageStore.alignEnable }]" @click="stageStore.setElementsAlignBottom"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-align-bottom', { disabled: !stageStore.alignEnable }]" @click="stageStore.setElementsAlignBottom"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="水平平均">
-        <el-icon :class="['iconfont', 'icon-verbise-average-h', { disabled:!stageStore.averageEnable }]" @click="stageStore.setElementsAverageHorizontal"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-average-h', { disabled: !stageStore.averageEnable }]" @click="stageStore.setElementsAverageHorizontal"></el-icon>
       </el-tooltip>
       <el-tooltip :effect="'dark'" content="垂直平均">
-        <el-icon :class="['iconfont', 'icon-verbise-average-v', { disabled:!stageStore.averageEnable }]" @click="stageStore.setElementsAverageVertical"></el-icon>
+        <el-icon :class="['iconfont', 'icon-verbise-average-v', { disabled: !stageStore.averageEnable }]" @click="stageStore.setElementsAverageVertical"></el-icon>
       </el-tooltip>
     </div>
   </div>

src/components/ui/right/props/CornerProps.vue

@@ -98,4 +98,4 @@ function getLabel(index: number): string {
       </div>
     </div>
   </div>
-</template>
+</template>

src/modules/command/DetachedElementsRemovedCommand.ts

@@ -0,0 +1,17 @@
+import ElementsBaseCommand from "@/modules/command/ElementsBaseCommand";
+import { IElementCommandPayload } from "@/types/ICommand";
+import CommandHelper from "@/modules/command/helpers/CommandHelper";
+
+export default class ElementsChangedCommand extends ElementsBaseCommand<IElementCommandPayload> {
+  async undo(): Promise<void> {
+    if (!this.payload.uDataList) return;
+    CommandHelper.restoreDataList(this.payload.uDataList, false, this.store);
+    CommandHelper.refreshStoreAfterLayerChanged(this.store);
+  }
+
+  async redo(): Promise<void> {
+    if (!this.payload.rDataList) return;
+    CommandHelper.restoreDataList(this.payload.rDataList, true, this.store);
+    CommandHelper.refreshStoreAfterLayerChanged(this.store);
+  }
+}