ibsp-fg-page 4.0.2

package/src/models/useHistoryStackModel.ts

@@ -0,0 +1,949 @@
+import { reactive, ref } from 'vue';
+import { isPlainObject } from 'lodash-es';
+
+import { Stack } from './useStack';
+import { DesignComponent } from './useComponentModel';
+
+
+export const ActionType = {
+  /** 添加组件 */
+  AddComponent: 'AddComponent',
+  /** 更新组件属性 */
+  UpdateComponent: 'UpdateComponent',
+  /** 移除布局 */
+  RemoveLayout: 'RemoveLayout',
+  /** 删除组件 */
+  DeleteComponent: 'DeleteComponent',
+  /** 复制组件 */
+  CopyComponent: 'CopyComponent',
+  /** 移动组件位置 */
+  MoveComponent: 'MoveComponent',
+  /** 改变组件大小 */
+  ResizeComponent: 'ResizeComponent',
+  /** 合并分组 */
+  MergeGroup: 'MergeGroup',
+  /** 解除分组 */
+  UnMergeGroup: 'UnMergeGroup',
+  /** 对齐 */
+  AliginComponent: 'AliginComponent',
+  /** 分布 */
+  LayoutComponent: 'LayoutComponent',
+  /** 层级排序 */
+  SortComponent: 'SortComponent',
+  /** 更新画布属性 */
+  UpdateCanvas: 'UpdateCanvas',
+  /** 初始化画布 */
+  InitCanvas: 'InitCanvas',
+
+  /** 交互的操作 */
+  AddEvent: 'AddEvent',
+  DeleteEvent: 'DeleteEvent',
+  AddWhere: 'AddWhere',
+  DeleteWhere: 'DeleteWhere',
+  AddAction: 'AddAction',
+  DeleteAction: 'DeleteAction',
+  AddTarget: 'AddTarget',
+  DeleteTarget: 'DeleteTarget',
+  InteractiveMerge: 'InteractiveMerge'
+
+}
+
+export const actions = [
+  {
+    label: '初始化',
+    action: 'InitCanvas',
+    icon: 'iconfont icon-play-circle',
+  },
+  {
+    label: '添加组件',
+    action: 'AddComponent',
+    icon: 'iconfont icon-plus-square-fill',
+  },
+  {
+    label: '更新组件属性',
+    action: 'UpdateComponent',
+    icon: 'iconfont icon-edit-square'
+  },
+  {
+    label: '移除布局',
+    action: 'RemoveLayout',
+    icon: 'iconfont icon-minus-square-fill',
+  },
+  {
+    label: '删除组件',
+    action: 'DeleteComponent',
+    icon: 'iconfont icon-minus-square-fill',
+  },
+  {
+    label: '复制组件',
+    action: 'CopyComponent',
+    icon: { type: 'svg', value: '复制' }
+  },
+  {
+    label: '移动组件',
+    action: 'MoveComponent',
+    icon: 'iconfont icon-drag'
+  },
+  {
+    label: '改变组件尺寸',
+    action: 'ResizeComponent',
+    icon: 'iconfont icon-group'
+  },
+  {
+    label: '合并分组',
+    action: 'MergeGroup',
+    icon: { type: 'svg', value: '组合' }
+  },
+  {
+    label: '解除分组',
+    action: 'UnMergeGroup',
+    icon: { type: 'svg', value: '取消组合' }
+  },
+  {
+    label: '对齐',
+    action: 'AliginComponent',
+    icon: 'iconfont icon-align-center'
+  },
+  {
+    label: '分布',
+    action: 'LayoutComponent',
+    icon: 'iconfont icon-pic-center'
+  },
+  {
+    label: '层级排序',
+    action: 'SortComponent',
+    icon: { type: 'svg', value: '图层' }
+  },
+  {
+    label: '更新画布属性',
+    action: 'UpdateCanvas',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '新增事件',
+    action: 'AddEvent',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '删除事件',
+    action: 'DeleteEvent',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '新增条件',
+    action: 'AddWhere',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '删除条件',
+    action: 'DeleteWhere',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '新增操作',
+    action: 'AddAction',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '删除操作',
+    action: 'DeleteAction',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '新增目标',
+    action: 'AddTarget',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '删除目标',
+    action: 'DeleteTarget',
+    icon: 'iconfont icon-edit-fill'
+  },
+  {
+    label: '交互合并',
+    action: 'InteractiveMerge',
+    icon: 'iconfont icon-edit-fill'
+  }
+
+]
+
+// TODO, 以下类型待完善
+type interactiveOperationParams = Partial<{
+  interactive: IBSP.IComponent.DesignComponent['interactionDataList'],
+  event:any,
+  where:any,
+  action:any,
+  target: any,
+  value:any,
+  index: number;
+  component:IBSP.IComponent.DesignComponent
+}>
+
+const interactiveOperationFunctions = {
+  event: {
+    add: ({ interactive, value, index }:interactiveOperationParams)=>{
+      interactive.splice(index, 0, value);
+    },
+    delete: ({ interactive, index }:interactiveOperationParams)=>{
+      interactive.splice(index, 1);
+    },
+  },
+  where: {
+    add: ({ event, value, index }: interactiveOperationParams)=>{
+      event.whereActions.splice(index, 0, value);
+    },
+    delete: (item: interactiveOperationParams)=>{
+      const index = item.event.whereActions.findIndex((where:any) => where.id === item.value.id);
+      item.index = index;
+      item.event.whereActions.splice(index, 1);
+    },
+  },
+  action: {
+    add: ({ where, value, index }: interactiveOperationParams)=>{
+      console.log('add', where, value, index);
+
+      where.list.splice(index, 0, value);
+    },
+    delete: ({ where, index }: interactiveOperationParams)=>{
+      console.log('delete', where, index);
+
+      where.list.splice(index, 1);
+    },
+  },
+  target: {
+    add: ({ action, index, value }: interactiveOperationParams)=>{
+      action.targetComponents.splice(index, 0, value);
+    },
+    delete: ({ action, index }: interactiveOperationParams)=>{
+      action.targetComponents.splice(index, 1);
+    },
+  },
+  merge: ({ component, interactive }: interactiveOperationParams)=>{
+    if (component) {
+      component.interactionDataList = interactive
+    }
+  },
+}
+
+
+type ComponentModel = {
+  [key: string]: any
+}
+
+export type UpdateChangeModel = {
+  prop: string;
+  value: any;
+  oldValue: any;
+  event?:Function;
+}
+
+export type HistoryComponent = {
+  id?: string;
+  index?: number;
+  component?: ComponentModel;
+}
+
+export type HistoryChange = {
+  components?: HistoryComponent[]
+  children?: {
+    id: string,
+    updateValue: UpdateChangeModel[]
+  }[]
+} & Partial<UpdateChangeModel> & HistoryComponent;
+
+export interface HistoryModel {
+  actionType: string;
+  label: string;
+  changes?: HistoryChange | HistoryChange[]
+}
+
+export type InteractiveOperationTypes = keyof typeof interactiveOperationFunctions
+
+const setPropsValueHandle = (props: string = '', target: any, value: any) => {
+  if (isPlainObject(value) && !Array.isArray(value)) {
+    let propValue = props?.split('.').reduce((curr: any, prev) => {
+      return curr[prev] as any;
+    }, target)
+    if (Array.isArray(value)) {
+      propValue.splice(0, propValue.length, ...value)
+    } else {
+      Object.assign(propValue, value);
+    }
+  } else {
+    props?.split('.').reduce((curr: any, prev, index: number, arr: string[]) => {
+      if (index >= arr.length - 1) {
+        curr[prev] = value;
+      }
+      return curr[prev] as any;
+    }, target)
+  }
+}
+
+const addComponentHandle = (item: HistoryChange, page: IBSP.IPage.Page) => {
+  let componentConfig = page.getConfigComponent({
+    component: item.component,
+    source: {
+      ...item.component?.source
+    }
+
+  });
+  new DesignComponent(componentConfig, {
+    component: item.component,
+    page: page,
+    addCallbackFn: (component: any, store: any) => {
+      const index = (item.index ?? '') !== '' ? item.index : store.componentStore.componentData.length - 1;
+      store.componentStore.componentData.splice(index, 0, component)
+    },
+    isPageInit: true
+  } as any);
+}
+
+
+class HistoryStack {
+
+  stack = new Stack<HistoryModel>();
+
+  actionType = ActionType;
+
+  constructor() {
+    this.stack.push({
+      label: '初始化',
+      actionType: 'InitCanvas',
+    })
+  }
+
+  push(stack: HistoryModel): HistoryStack {
+    this.stack.push(stack);
+    return this;
+  }
+
+  clear() {
+    this.stack.clear();
+    this.stack.push({
+      label: '初始化',
+      actionType: 'InitCanvas',
+    })
+  }
+
+
+  recovery(index: number, page: IBSP.IPage.Page) {
+    const opName = index < this.stack.index.value ? 'redo' : 'undo';
+    let stacks = this.stack.get(index);
+    if (opName === 'redo') {
+      stacks = stacks.reverse();
+    }
+    stacks.forEach(stack => {
+      if (stack.changes) {
+        const actionType = (stack.actionType) as keyof typeof ActionType;
+        if (this[`_${opName}${actionType}`] && typeof this[`_${opName}${actionType}`] === 'function') {
+          this[`_${opName}${actionType}`](stack, page);
+        }
+      }
+    })
+  }
+
+  redo(page: IBSP.IPage.Page) {
+    const index = this.stack.index.value - 1;
+    if (index >= 0) {
+      this.recovery(index, page);
+    }
+  }
+
+  undo(page: IBSP.IPage.Page) {
+    const index = this.stack.index.value + 1;
+    if (index < this.stack.list.length) {
+      this.recovery(index, page);
+    }
+  }
+
+  private _changeArray(stack: HistoryModel, page: IBSP.IPage.Page, callback: (changes:HistoryChange[]) => void) {
+    if (stack && stack.changes) {
+      let changes: HistoryChange[] = [];
+      if (Array.isArray(stack.changes)) {
+        changes = stack.changes;
+      } else {
+        changes = [stack.changes];
+      }
+      callback(changes);
+    }
+  }
+
+  private _redoInitCanvas(stack: HistoryModel, page: IBSP.IPage.Page) {
+
+  }
+
+  private _undoInitCanvas(stack: HistoryModel, page: IBSP.IPage.Page) {
+
+  }
+
+  private _redoAddComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(
+        itemChange => {
+          addComponentHandle(itemChange, page);
+        }
+      )
+    })
+  }
+
+  private _undoAddComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(
+        itemChange => {
+          (page.store as IbspStore).componentStore.componentData.forEach((item: IBSP.IComponent.DesignComponent, index) => {
+            if (item.id === itemChange.id) {
+              (page.store as IbspStore).componentStore.componentData.splice(index, 1);
+            }
+          })
+        }
+      )
+    })
+  }
+
+  private _redoUpdateComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        if (itemChange.id) {
+          let component = (page.store as IbspStore).componentStore.componentData.find((item: IBSP.IComponent.DesignComponent) => item.id === itemChange.id) as unknown as IBSP.IComponent.DesignComponent;
+          setPropsValueHandle(itemChange.prop, component, itemChange.value);
+          itemChange?.event?.()
+        }
+      })
+    })
+  }
+
+  private _undoUpdateComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        if (itemChange.id) {
+          let component = (page.store as IbspStore).componentStore.componentData.find((item: IBSP.IComponent.DesignComponent) => item.id === itemChange.id) as unknown as IBSP.IComponent.DesignComponent;
+          setPropsValueHandle(itemChange.prop, component, itemChange.oldValue);
+          itemChange?.event?.()
+        }
+      })
+    })
+  }
+
+  private _redoDeleteComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(
+        itemChange => {
+          (page.store as IbspStore).componentStore.componentData.forEach((item: IBSP.IComponent.DesignComponent, index) => {
+            if (item.id === itemChange.id) {
+              (page.store as IbspStore).componentStore.componentData.splice(index, 1);
+            }
+          })
+        }
+      )
+    })
+  }
+
+  private _undoDeleteComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(
+        itemChange => {
+          addComponentHandle(itemChange, page);
+        }
+      )
+    })
+  }
+
+  private _redoRemoveLayout(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        (page.store as IbspStore).componentStore.componentData.forEach((item: IBSP.IComponent.DesignComponent, index) => {
+          if (item.id === itemChange.id) {
+            (page.store as IbspStore).componentStore.componentData.splice(index, 1);
+          }
+        })
+        if (itemChange.children) {
+          itemChange.children.forEach(child => {
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.value);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _undoRemoveLayout(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        addComponentHandle(itemChange, page);
+        if (itemChange.children) {
+          itemChange.children.forEach(child => {
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.oldValue);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _redoCopyComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        addComponentHandle(itemChange, page)
+      })
+    })
+  }
+
+  private _undoCopyComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        (page.store as IbspStore).componentStore.componentData.forEach((item: IBSP.IComponent.DesignComponent, index) => {
+          if (item.id === itemChange.id) {
+            (page.store as IbspStore).componentStore.componentData.splice(index, 1);
+          }
+        })
+      })
+    })
+  }
+
+  private _redoMoveComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        let component = (page.store as IbspStore).componentStore.componentData.find((item: IBSP.IComponent.DesignComponent) => item.id === itemChange.id) as unknown as IBSP.IComponent.DesignComponent;
+        setPropsValueHandle(itemChange.prop, component, itemChange.value);
+      })
+    })
+  }
+
+  private _undoMoveComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        let component = (page.store as IbspStore).componentStore.componentData.find((item: IBSP.IComponent.DesignComponent) => item.id === itemChange.id) as unknown as IBSP.IComponent.DesignComponent;
+        setPropsValueHandle(itemChange.prop, component, itemChange.oldValue);
+      })
+    })
+  }
+
+  private _redoMergeGroup(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        addComponentHandle(itemChange, page);
+        if (itemChange.children) {
+          itemChange.children.forEach(child => {
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.value);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _undoMergeGroup(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        (page.store as IbspStore).componentStore.componentData.forEach((item: IBSP.IComponent.DesignComponent, index) => {
+          if (item.id === itemChange.id) {
+            (page.store as IbspStore).componentStore.componentData.splice(index, 1);
+          }
+        })
+        if (itemChange.children) {
+          itemChange.children.forEach(child => {
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.oldValue);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _redoUnMergeGroup(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        if (itemChange.components) {
+          itemChange.components.forEach(itemComponent => {
+            (page.store as IbspStore).componentStore.componentData.forEach((item: IBSP.IComponent.DesignComponent, index) => {
+              if (item.id === itemComponent.id) {
+                (page.store as IbspStore).componentStore.componentData.splice(index, 1);
+              }
+            })
+          })
+        }
+        if (itemChange.children) {
+          itemChange.children.forEach(child => {
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.value);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _undoUnMergeGroup(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[] = []) => {
+      changes.forEach(itemChange => {
+        if (itemChange.components) {
+          itemChange.components.forEach(itemComponent => {
+            addComponentHandle(itemComponent, page);
+          })
+        }
+        if (itemChange.children) {
+          itemChange.children.forEach(child => {
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.oldValue);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _redoResizeComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        if (item.component) {
+          const id = item.id;
+          let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === id) as unknown as IBSP.IComponent.DesignComponent;
+          if (component) {
+            setPropsValueHandle(item.prop, component, item.value);
+          }
+        }
+        if (item.children) {
+          item.children.forEach(child=>{
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.value);
+                }
+              )
+            }
+          })
+        }
+
+      })
+    })
+
+
+  }
+
+  private _undoResizeComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        if (item.component) {
+          const id = item.id;
+          let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === id) as unknown as IBSP.IComponent.DesignComponent;
+          if (component) {
+            setPropsValueHandle(item.prop, component, item.oldValue);
+          }
+        }
+        if (item.children) {
+          item.children.forEach(child=>{
+            let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === child.id) as unknown as IBSP.IComponent.DesignComponent;
+            if (component) {
+              child.updateValue.forEach(
+                updateItem => {
+                  setPropsValueHandle(updateItem.prop, component, updateItem.oldValue);
+                }
+              )
+            }
+          })
+        }
+      })
+    })
+  }
+
+  private _redoAliginComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const id = item.id;
+        let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === id) as unknown as IBSP.IComponent.DesignComponent;
+        if (component) {
+          setPropsValueHandle(item.prop, component, item.value);
+        }
+      })
+    })
+  }
+
+  private _undoAliginComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const id = item.id;
+        let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === id) as unknown as IBSP.IComponent.DesignComponent;
+        if (component) {
+          setPropsValueHandle(item.prop, component, item.oldValue);
+        }
+      })
+    })
+
+  }
+
+  private _redoLayoutComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const id = item.id;
+        let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === id) as unknown as IBSP.IComponent.DesignComponent;
+        if (component) {
+          setPropsValueHandle(item.prop, component, item.value);
+        }
+      })
+    })
+
+  }
+
+  private _undoLayoutComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const id = item.id;
+        let component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === id) as unknown as IBSP.IComponent.DesignComponent;
+        if (component) {
+          setPropsValueHandle(item.prop, component, item.oldValue);
+        }
+      })
+    })
+
+  }
+
+  private _redoSortComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const oldIndex = item.oldValue
+        const index = item.value
+
+        const tempComponent = (page.store as IbspStore).componentStore.componentData[oldIndex];
+        (page.store as IbspStore).componentStore.componentData[oldIndex] = (page.store as IbspStore).componentStore.componentData[index];
+        (page.store as IbspStore).componentStore.componentData[index] = tempComponent;
+
+
+      })
+    })
+
+  }
+
+  private _undoSortComponent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const oldIndex = item.oldValue
+        const index = item.value
+        const tempComponent = (page.store as IbspStore).componentStore.componentData[oldIndex];
+        (page.store as IbspStore).componentStore.componentData[oldIndex] = (page.store as IbspStore).componentStore.componentData[index];
+        (page.store as IbspStore).componentStore.componentData[index] = tempComponent;
+      })
+    })
+  }
+
+  private _redoUpdateCanvas(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        setPropsValueHandle(item.prop, page, item.value);
+
+      })
+    })
+  }
+
+  private _undoUpdateCanvas(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        setPropsValueHandle(item.prop, page, item.oldValue);
+      })
+    })
+  }
+
+
+  private _redoAddEvent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.event.add(item.value)
+      })
+    })
+  }
+
+  private _undoAddEvent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.event.delete(item.value)
+      })
+    })
+  }
+
+  private _redoAddAction(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.action.add(item.value)
+      })
+    })
+  }
+
+  private _undoAddAction(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.action.delete(item.value)
+      })
+    })
+  }
+
+  private _redoAddWhere(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.where.add(item.value)
+      })
+    })
+  }
+
+  private _undoAddWhere(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.where.delete(item.value)
+      })
+    })
+  }
+
+  private _redoAddTarget(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.target.add(item.value)
+      })
+    })
+  }
+
+  private _undoAddTarget(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.target.delete(item.value)
+      })
+    })
+  }
+
+
+  private _redoDeleteEvent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.event.delete(item.value)
+      })
+    })
+  }
+
+  private _undoDeleteEvent(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.event.add(item.value)
+      })
+    })
+  }
+
+  private _redoDeleteWhere(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.where.delete(item.value)
+      })
+    })
+  }
+
+  private _undoDeleteWhere(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.where.add(item.value)
+      })
+    })
+  }
+
+  private _redoDeleteAction(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.action.delete(item.value)
+      })
+    })
+  }
+
+  private _undoDeleteAction(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.action.add(item.value)
+      })
+    })
+  }
+
+  private _redoDeleteTarget(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.target.delete(item.value)
+      })
+    })
+  }
+
+  private _undoDeleteTarget(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        interactiveOperationFunctions.target.add(item.value)
+      })
+    })
+  }
+
+  private _redoInteractiveMerge(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === item.component) as unknown as IBSP.IComponent.DesignComponent;
+        interactiveOperationFunctions.merge({
+          component,
+          interactive: item.value
+        })
+      })
+    })
+  }
+
+  private _undoInteractiveMerge(stack: HistoryModel, page: IBSP.IPage.Page) {
+    this._changeArray(stack, page, (changes: HistoryChange[]) => {
+      changes.forEach(item=>{
+        const component = (page.store as IbspStore).componentStore.componentData.find((itemC: any) => itemC.id === item.component) as unknown as IBSP.IComponent.DesignComponent;
+        interactiveOperationFunctions.merge({
+          component,
+          interactive: item.oldValue
+        })
+      })
+    })
+  }
+
+
+}
+
+export const historyStackModel = new HistoryStack();
+
+export const useHistoryStack = () => historyStackModel;
+
+/**
+ * 初始化一个新的历史栈
+ */
+export const initHistoryStack = () => {
+  return new HistoryStack();
+}
+
+