@kp-ui/lowcode 1.0.25 → 1.0.26

package/src/components/form-designer/designer.js

@@ -1,9 +1,9 @@
-import { deepClone as r, getDefaultFormConfig as F, generateId as g, overwriteObj as u } from "../../utils/util.js";
-import { containers as w, basicFields as y, advancedFields as b, customFields as L } from "./widget-panel/widgetsConfig.js";
-import { VARIANT_FORM_VERSION as N } from "../../utils/config.js";
-import D from "../../utils/event-bus.js";
-function S(T) {
-  const m = r(F());
+import { deepClone, getDefaultFormConfig, generateId, overwriteObj } from "../../utils/util.js";
+import { containers, basicFields, advancedFields, customFields } from "./widget-panel/widgetsConfig.js";
+import { VARIANT_FORM_VERSION } from "../../utils/config.js";
+import eventBus from "../../utils/event-bus.js";
+function createDesigner(vueInstance) {
+  const defaultFormConfig = deepClone(getDefaultFormConfig());
   return {
     widgetList: [],
     formConfig: { cssCode: "" },
@@ -11,7 +11,7 @@ function S(T) {
     selectedWidget: null,
     selectedWidgetName: null,
     //选中组件名称（唯一）
-    vueInstance: T,
+    vueInstance,
     formWidget: null,
     //表单设计容器
     cssClassList: [],
@@ -22,532 +22,819 @@ function S(T) {
       maxStep: 20,
       steps: []
     },
-    initDesigner(e) {
-      this.widgetList = [], this.formConfig = r(m), console.info(
-        `%cVer${N} %chttps://www.yuque.com/visualdev/vform3`,
+    initDesigner(resetFormJson) {
+      this.widgetList = [];
+      this.formConfig = deepClone(defaultFormConfig);
+      console.info(
+        `%cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/visualdev/vform3`,
         "color:#999;font-size: 12px",
         "color:#333"
-      ), e || this.initHistoryData();
+      );
+      if (!resetFormJson) {
+        this.initHistoryData();
+      }
     },
-    clearDesigner(e) {
-      const t = this.widgetList.length === 0;
-      this.widgetList = [], this.selectedId = null, this.selectedWidgetName = null, this.selectedWidget = {}, u(this.formConfig, m), e || (t ? this.saveCurrentHistoryStep() : this.emitHistoryChange());
+    clearDesigner(skipHistoryChange) {
+      const emptyWidgetListFlag = this.widgetList.length === 0;
+      this.widgetList = [];
+      this.selectedId = null;
+      this.selectedWidgetName = null;
+      this.selectedWidget = {};
+      overwriteObj(this.formConfig, defaultFormConfig);
+      if (!!skipHistoryChange) ;
+      else if (!emptyWidgetListFlag) {
+        this.emitHistoryChange();
+      } else {
+        this.saveCurrentHistoryStep();
+      }
     },
-    loadPresetCssCode(e) {
-      this.formConfig.cssCode === "" && e && (this.formConfig.cssCode = e);
+    loadPresetCssCode(preCssCode) {
+      if (this.formConfig.cssCode === "" && !!preCssCode) {
+        this.formConfig.cssCode = preCssCode;
+      }
     },
     getLayoutType() {
       return this.formConfig.layoutType || "PC";
     },
-    changeLayoutType(e) {
-      this.formConfig.layoutType = e;
+    changeLayoutType(newType) {
+      this.formConfig.layoutType = newType;
     },
     getImportTemplate() {
       return {
         widgetList: [],
         //formConfig: deepClone(this.formConfig)
-        formConfig: r(m)
+        formConfig: deepClone(defaultFormConfig)
       };
     },
-    loadFormJson(e) {
-      let t = !1;
-      return e && e.widgetList && (this.widgetList = e.widgetList, t = !0), e && e.formConfig && (u(
-        this.formConfig,
-        e.formConfig
-      ), t = !0), t && this.emitEvent("form-json-imported", []), t;
+    loadFormJson(formJson) {
+      let modifiedFlag = false;
+      if (!!formJson && !!formJson.widgetList) {
+        this.widgetList = formJson.widgetList;
+        modifiedFlag = true;
+      }
+      if (!!formJson && !!formJson.formConfig) {
+        overwriteObj(
+          this.formConfig,
+          formJson.formConfig
+        );
+        modifiedFlag = true;
+      }
+      if (modifiedFlag) {
+        this.emitEvent("form-json-imported", []);
+      }
+      return modifiedFlag;
     },
-    setSelected(e) {
-      if (!e) {
+    setSelected(selected) {
+      if (!selected) {
         this.clearSelected();
         return;
       }
-      this.selectedWidget = e, e.id && (this.selectedId = e.id, this.selectedWidgetName = e.options.name);
+      this.selectedWidget = selected;
+      if (!!selected.id) {
+        this.selectedId = selected.id;
+        this.selectedWidgetName = selected.options.name;
+      }
     },
-    updateSelectedWidgetNameAndLabel(e, t, s) {
-      this.selectedWidgetName = t, s && Object.keys(e.options).indexOf("label") > -1 && (e.options.label = s);
+    updateSelectedWidgetNameAndLabel(selectedWidget, newName, newLabel) {
+      this.selectedWidgetName = newName;
+      if (!!newLabel && Object.keys(selectedWidget.options).indexOf("label") > -1) {
+        selectedWidget.options.label = newLabel;
+      }
     },
     clearSelected() {
-      this.selectedId = null, this.selectedWidgetName = null, this.selectedWidget = {};
-    },
-    checkWidgetMove(e) {
-      if (e.draggedContext && e.draggedContext.element) {
-        const t = e.draggedContext.element.category, s = e.draggedContext.element.type + "";
-        if (e.to && (e.to.className === "sub-form-table" && t === "container" || e.to.className === "grid-sub-form" && s !== "grid" || e.to.className === "vf-dialog-drop-zone" && (s === "vf-dialog" || s === "vf-drawer") || e.to.className === "vf-drawer-drop-zone" && (s === "vf-dialog" || s === "vf-drawer") || e.to.className !== "form-widget-canvas" && (s === "vf-dialog" || s === "vf-drawer")))
-          return !1;
+      this.selectedId = null;
+      this.selectedWidgetName = null;
+      this.selectedWidget = {};
+    },
+    checkWidgetMove(evt) {
+      if (!!evt.draggedContext && !!evt.draggedContext.element) {
+        const wgCategory = evt.draggedContext.element.category;
+        const wgType = evt.draggedContext.element.type + "";
+        if (!!evt.to) {
+          if (evt.to.className === "sub-form-table" && wgCategory === "container") {
+            return false;
+          }
+          if (evt.to.className === "grid-sub-form" && wgType !== "grid") {
+            return false;
+          }
+          if (evt.to.className === "vf-dialog-drop-zone" && (wgType === "vf-dialog" || wgType === "vf-drawer")) {
+            return false;
+          }
+          if (evt.to.className === "vf-drawer-drop-zone" && (wgType === "vf-dialog" || wgType === "vf-drawer")) {
+            return false;
+          }
+          if (evt.to.className !== "form-widget-canvas" && (wgType === "vf-dialog" || wgType === "vf-drawer")) {
+            return false;
+          }
+        }
       }
-      return !0;
-    },
-    checkFieldMove(e) {
-      if (e.draggedContext && e.draggedContext.element) {
-        e.draggedContext.element.category;
-        const t = e.draggedContext.element.type + "";
-        if (e.to && ((e.to.className === "sub-form-table" || e.to.className === "grid-sub-form") && t === "slot" || e.to.className === "grid-sub-form" && t !== "grid"))
-          return !1;
+      return true;
+    },
+    checkFieldMove(evt) {
+      if (!!evt.draggedContext && !!evt.draggedContext.element) {
+        evt.draggedContext.element.category;
+        const wgType = evt.draggedContext.element.type + "";
+        if (!!evt.to) {
+          if ((evt.to.className === "sub-form-table" || evt.to.className === "grid-sub-form") && wgType === "slot") {
+            return false;
+          }
+          if (evt.to.className === "grid-sub-form" && wgType !== "grid") {
+            return false;
+          }
+        }
       }
-      return !0;
+      return true;
     },
     /**
      * 追加表格新行
      * @param widget
      */
-    appendTableRow(e) {
-      const t = e.rows.length, s = r(e.rows[e.rows.length - 1]);
-      s.id = "table-row-" + g(), s.merged = !1, s.cols.forEach((i) => {
-        i.id = "table-cell-" + g(), i.options.name = i.id, i.merged = !1, i.options.colspan = 1, i.options.rowspan = 1, i.widgetList.length = 0;
-      }), e.rows.splice(t, 0, s), this.emitHistoryChange();
+    appendTableRow(widget) {
+      const rowIdx = widget.rows.length;
+      const newRow = deepClone(widget.rows[widget.rows.length - 1]);
+      newRow.id = "table-row-" + generateId();
+      newRow.merged = false;
+      newRow.cols.forEach((col) => {
+        col.id = "table-cell-" + generateId();
+        col.options.name = col.id;
+        col.merged = false;
+        col.options.colspan = 1;
+        col.options.rowspan = 1;
+        col.widgetList.length = 0;
+      });
+      widget.rows.splice(rowIdx, 0, newRow);
+      this.emitHistoryChange();
     },
     /**
      * 追加表格新列
      * @param widget
      */
-    appendTableCol(e) {
-      const t = e.rows[0].cols.length;
-      e.rows.forEach((s) => {
-        const i = r(this.getContainerByType("table-cell"));
-        i.id = "table-cell-" + g(), i.options.name = i.id, i.merged = !1, i.options.colspan = 1, i.options.rowspan = 1, i.widgetList.length = 0, s.cols.splice(t, 0, i);
-      }), this.emitHistoryChange();
-    },
-    insertTableRow(e, t, s, i, l) {
-      let o = l ? t : t + 1;
-      if (!l) {
-        let p = o, h = !1;
-        for (; p < e.rows.length; )
-          if (e.rows[p].cols[i].merged)
-            p++;
-          else {
-            o = p, h = !0;
+    appendTableCol(widget) {
+      const colIdx = widget.rows[0].cols.length;
+      widget.rows.forEach((row) => {
+        const newCol = deepClone(this.getContainerByType("table-cell"));
+        newCol.id = "table-cell-" + generateId();
+        newCol.options.name = newCol.id;
+        newCol.merged = false;
+        newCol.options.colspan = 1;
+        newCol.options.rowspan = 1;
+        newCol.widgetList.length = 0;
+        row.cols.splice(colIdx, 0, newCol);
+      });
+      this.emitHistoryChange();
+    },
+    insertTableRow(widget, insertPos, cloneRowIdx, curCol, aboveFlag) {
+      let newRowIdx = !!aboveFlag ? insertPos : insertPos + 1;
+      if (!aboveFlag) {
+        let tmpRowIdx = newRowIdx;
+        let rowFoundFlag = false;
+        while (tmpRowIdx < widget.rows.length) {
+          if (!widget.rows[tmpRowIdx].cols[curCol].merged) {
+            newRowIdx = tmpRowIdx;
+            rowFoundFlag = true;
             break;
+          } else {
+            tmpRowIdx++;
           }
-        h || (o = e.rows.length);
-      }
-      const n = r(e.rows[s]);
-      n.id = "table-row-" + g(), n.merged = !1, n.cols.forEach((p) => {
-        p.id = "table-cell-" + g(), p.options.name = p.id, p.merged = !1, p.options.colspan = 1, p.options.rowspan = 1, p.widgetList.length = 0;
-      }), e.rows.splice(o, 0, n);
-      let a = 0;
-      for (; o < e.rows.length - 1 && a < e.rows[0].cols.length; ) {
-        const p = e.rows[o + 1].cols[a];
-        if (p.merged) {
-          const f = e.rows;
-          let d = {}, C = null;
-          for (let c = o; c >= 0; c--)
-            if (!f[c].cols[a].merged && f[c].cols[a].options.rowspan > 1) {
-              C = c, d = f[c].cols[a];
+        }
+        if (!rowFoundFlag) {
+          newRowIdx = widget.rows.length;
+        }
+      }
+      const newRow = deepClone(widget.rows[cloneRowIdx]);
+      newRow.id = "table-row-" + generateId();
+      newRow.merged = false;
+      newRow.cols.forEach((col) => {
+        col.id = "table-cell-" + generateId();
+        col.options.name = col.id;
+        col.merged = false;
+        col.options.colspan = 1;
+        col.options.rowspan = 1;
+        col.widgetList.length = 0;
+      });
+      widget.rows.splice(newRowIdx, 0, newRow);
+      let colNo = 0;
+      while (newRowIdx < widget.rows.length - 1 && colNo < widget.rows[0].cols.length) {
+        const cellOfNextRow = widget.rows[newRowIdx + 1].cols[colNo];
+        const rowMerged = cellOfNextRow.merged;
+        if (!!rowMerged) {
+          const rowArray = widget.rows;
+          let unMergedCell = {};
+          let startRowIndex = null;
+          for (let i = newRowIdx; i >= 0; i--) {
+            if (!rowArray[i].cols[colNo].merged && rowArray[i].cols[colNo].options.rowspan > 1) {
+              startRowIndex = i;
+              unMergedCell = rowArray[i].cols[colNo];
               break;
             }
-          if (d.options) {
-            const c = d.options.rowspan + 1;
+          }
+          if (!!unMergedCell.options) {
+            const newRowspan = unMergedCell.options.rowspan + 1;
             this.setPropsOfMergedRows(
-              e.rows,
-              C,
-              a,
-              d.options.colspan,
-              c
-            ), a += d.options.colspan;
-          } else
-            a += 1;
-        } else
-          a += p.options.colspan || 1;
+              widget.rows,
+              startRowIndex,
+              colNo,
+              unMergedCell.options.colspan,
+              newRowspan
+            );
+            colNo += unMergedCell.options.colspan;
+          } else {
+            colNo += 1;
+          }
+        } else {
+          colNo += cellOfNextRow.options.colspan || 1;
+        }
       }
       this.emitHistoryChange();
     },
-    insertTableCol(e, t, s, i) {
-      let l = i ? t : t + 1;
-      if (!i) {
-        let n = l, a = !1;
-        for (; n < e.rows[s].cols.length; ) {
-          if (e.rows[s].cols[n].merged)
-            n++;
-          else {
-            l = n, a = !0;
+    insertTableCol(widget, insertPos, curRow, leftFlag) {
+      let newColIdx = !!leftFlag ? insertPos : insertPos + 1;
+      if (!leftFlag) {
+        let tmpColIdx = newColIdx;
+        let colFoundFlag = false;
+        while (tmpColIdx < widget.rows[curRow].cols.length) {
+          if (!widget.rows[curRow].cols[tmpColIdx].merged) {
+            newColIdx = tmpColIdx;
+            colFoundFlag = true;
             break;
+          } else {
+            tmpColIdx++;
+          }
+          if (!colFoundFlag) {
+            newColIdx = widget.rows[curRow].cols.length;
           }
-          a || (l = e.rows[s].cols.length);
         }
       }
-      e.rows.forEach((n) => {
-        const a = r(this.getContainerByType("table-cell"));
-        a.id = "table-cell-" + g(), a.options.name = a.id, a.merged = !1, a.options.colspan = 1, a.options.rowspan = 1, a.widgetList.length = 0, n.cols.splice(l, 0, a);
+      widget.rows.forEach((row) => {
+        const newCol = deepClone(this.getContainerByType("table-cell"));
+        newCol.id = "table-cell-" + generateId();
+        newCol.options.name = newCol.id;
+        newCol.merged = false;
+        newCol.options.colspan = 1;
+        newCol.options.rowspan = 1;
+        newCol.widgetList.length = 0;
+        row.cols.splice(newColIdx, 0, newCol);
       });
-      let o = 0;
-      for (; l < e.rows[0].cols.length - 1 && o < e.rows.length; ) {
-        const n = e.rows[o].cols[l + 1];
-        if (n.merged) {
-          const p = e.rows[o].cols;
-          let h = {}, f = null;
-          for (let d = l; d >= 0; d--)
-            if (!p[d].merged && p[d].options.colspan > 1) {
-              f = d, h = p[d];
+      let rowNo = 0;
+      while (newColIdx < widget.rows[0].cols.length - 1 && rowNo < widget.rows.length) {
+        const cellOfNextCol = widget.rows[rowNo].cols[newColIdx + 1];
+        const colMerged = cellOfNextCol.merged;
+        if (!!colMerged) {
+          const colArray = widget.rows[rowNo].cols;
+          let unMergedCell = {};
+          let startColIndex = null;
+          for (let i = newColIdx; i >= 0; i--) {
+            if (!colArray[i].merged && colArray[i].options.colspan > 1) {
+              startColIndex = i;
+              unMergedCell = colArray[i];
               break;
             }
-          if (h.options) {
-            const d = h.options.colspan + 1;
+          }
+          if (!!unMergedCell.options) {
+            const newColspan = unMergedCell.options.colspan + 1;
             this.setPropsOfMergedCols(
-              e.rows,
-              o,
-              f,
-              d,
-              h.options.rowspan
-            ), o += h.options.rowspan;
-          } else
-            o += 1;
-        } else
-          o += n.options.rowspan || 1;
+              widget.rows,
+              rowNo,
+              startColIndex,
+              newColspan,
+              unMergedCell.options.rowspan
+            );
+            rowNo += unMergedCell.options.rowspan;
+          } else {
+            rowNo += 1;
+          }
+        } else {
+          rowNo += cellOfNextCol.options.rowspan || 1;
+        }
       }
       this.emitHistoryChange();
     },
-    setPropsOfMergedCols(e, t, s, i, l) {
-      for (let o = t; o < t + l; o++)
-        for (let n = s; n < s + i; n++) {
-          if (o === t && n === s) {
-            e[o].cols[n].options.colspan = i;
+    setPropsOfMergedCols(rowArray, startRowIndex, startColIndex, newColspan, rowspan) {
+      for (let i = startRowIndex; i < startRowIndex + rowspan; i++) {
+        for (let j = startColIndex; j < startColIndex + newColspan; j++) {
+          if (i === startRowIndex && j === startColIndex) {
+            rowArray[i].cols[j].options.colspan = newColspan;
             continue;
           }
-          e[o].cols[n].merged = !0, e[o].cols[n].options.colspan = i, e[o].cols[n].widgetList = [];
+          rowArray[i].cols[j].merged = true;
+          rowArray[i].cols[j].options.colspan = newColspan;
+          rowArray[i].cols[j].widgetList = [];
         }
+      }
     },
-    setPropsOfMergedRows(e, t, s, i, l) {
-      for (let o = t; o < t + l; o++)
-        for (let n = s; n < s + i; n++) {
-          if (o === t && n === s) {
-            e[o].cols[n].options.rowspan = l;
+    setPropsOfMergedRows(rowArray, startRowIndex, startColIndex, colspan, newRowspan) {
+      for (let i = startRowIndex; i < startRowIndex + newRowspan; i++) {
+        for (let j = startColIndex; j < startColIndex + colspan; j++) {
+          if (i === startRowIndex && j === startColIndex) {
+            rowArray[i].cols[j].options.rowspan = newRowspan;
             continue;
           }
-          e[o].cols[n].merged = !0, e[o].cols[n].options.rowspan = l, e[o].cols[n].widgetList = [];
+          rowArray[i].cols[j].merged = true;
+          rowArray[i].cols[j].options.rowspan = newRowspan;
+          rowArray[i].cols[j].widgetList = [];
         }
+      }
+    },
+    setPropsOfSplitCol(rowArray, startRowIndex, startColIndex, colspan, rowspan) {
+      for (let i = startRowIndex; i < startRowIndex + rowspan; i++) {
+        for (let j = startColIndex; j < startColIndex + colspan; j++) {
+          rowArray[i].cols[j].merged = false;
+          rowArray[i].cols[j].options.rowspan = 1;
+          rowArray[i].cols[j].options.colspan = 1;
+        }
+      }
+    },
+    setPropsOfSplitRow(rowArray, startRowIndex, startColIndex, colspan, rowspan) {
+      for (let i = startRowIndex; i < startRowIndex + rowspan; i++) {
+        for (let j = startColIndex; j < startColIndex + colspan; j++) {
+          rowArray[i].cols[j].merged = false;
+          rowArray[i].cols[j].options.rowspan = 1;
+          rowArray[i].cols[j].options.colspan = 1;
+        }
+      }
     },
-    setPropsOfSplitCol(e, t, s, i, l) {
-      for (let o = t; o < t + l; o++)
-        for (let n = s; n < s + i; n++)
-          e[o].cols[n].merged = !1, e[o].cols[n].options.rowspan = 1, e[o].cols[n].options.colspan = 1;
-    },
-    setPropsOfSplitRow(e, t, s, i, l) {
-      for (let o = t; o < t + l; o++)
-        for (let n = s; n < s + i; n++)
-          e[o].cols[n].merged = !1, e[o].cols[n].options.rowspan = 1, e[o].cols[n].options.colspan = 1;
-    },
-    mergeTableCol(e, t, s, i, l, o) {
-      const n = l ? i : i + t[i].options.colspan;
-      let a = l ? i - 1 : i;
-      if (l) {
-        let h = a;
-        for (; h >= 0; )
-          if (e[s].cols[h].merged)
-            h--;
-          else {
-            a = h;
+    mergeTableCol(rowArray, colArray, curRow, curCol, leftFlag, cellWidget) {
+      const mergedColIdx = !!leftFlag ? curCol : curCol + colArray[curCol].options.colspan;
+      let remainedColIdx = !!leftFlag ? curCol - 1 : curCol;
+      if (!!leftFlag) {
+        let tmpColIdx = remainedColIdx;
+        while (tmpColIdx >= 0) {
+          if (!rowArray[curRow].cols[tmpColIdx].merged) {
+            remainedColIdx = tmpColIdx;
             break;
+          } else {
+            tmpColIdx--;
           }
+        }
+      }
+      if (!!colArray[mergedColIdx].widgetList && colArray[mergedColIdx].widgetList.length > 0) {
+        if (!colArray[remainedColIdx].widgetList || colArray[remainedColIdx].widgetList.length === 0) {
+          colArray[remainedColIdx].widgetList = deepClone(colArray[mergedColIdx].widgetList);
+        }
       }
-      t[n].widgetList && t[n].widgetList.length > 0 && (!t[a].widgetList || t[a].widgetList.length === 0) && (t[a].widgetList = r(t[n].widgetList));
-      const p = t[n].options.colspan * 1 + t[a].options.colspan * 1;
+      const newColspan = colArray[mergedColIdx].options.colspan * 1 + colArray[remainedColIdx].options.colspan * 1;
       this.setPropsOfMergedCols(
-        e,
-        s,
-        a,
-        p,
-        o.options.rowspan
-      ), this.emitHistoryChange();
-    },
-    mergeTableWholeRow(e, t, s, i) {
-      const l = e[s].cols[0].options.rowspan;
-      let o = !1;
-      for (let a = 1; a < e[s].cols.length; a++)
-        if (e[s].cols[a].options.rowspan !== l) {
-          o = !0;
+        rowArray,
+        curRow,
+        remainedColIdx,
+        newColspan,
+        cellWidget.options.rowspan
+      );
+      this.emitHistoryChange();
+    },
+    mergeTableWholeRow(rowArray, colArray, rowIndex, colIndex) {
+      const startRowspan = rowArray[rowIndex].cols[0].options.rowspan;
+      let unmatchedFlag = false;
+      for (let i = 1; i < rowArray[rowIndex].cols.length; i++) {
+        if (rowArray[rowIndex].cols[i].options.rowspan !== startRowspan) {
+          unmatchedFlag = true;
           break;
         }
-      if (o) {
+      }
+      if (unmatchedFlag) {
         this.vueInstance.$message.info(
           this.vueInstance.i18nt("designer.hint.rowspanNotConsistentForMergeEntireRow")
         );
         return;
       }
-      const n = t.filter((a) => !a.merged && !!a.widgetList && a.widgetList.length > 0);
-      n && n.length > 0 && n[0].id !== t[0].id && (!t[0].widgetList || t[0].widgetList.length <= 0) && (t[0].widgetList = r(n[0].widgetList)), this.setPropsOfMergedCols(
-        e,
-        s,
+      const widgetListCols = colArray.filter((colItem) => {
+        return !colItem.merged && !!colItem.widgetList && colItem.widgetList.length > 0;
+      });
+      if (!!widgetListCols && widgetListCols.length > 0) {
+        if (widgetListCols[0].id !== colArray[0].id && (!colArray[0].widgetList || colArray[0].widgetList.length <= 0)) {
+          colArray[0].widgetList = deepClone(widgetListCols[0].widgetList);
+        }
+      }
+      this.setPropsOfMergedCols(
+        rowArray,
+        rowIndex,
         0,
-        t.length,
-        t[i].options.rowspan
-      ), this.emitHistoryChange();
-    },
-    mergeTableRow(e, t, s, i, l) {
-      const o = i ? t : t + l.options.rowspan;
-      let n = i ? t - 1 : t;
-      if (i) {
-        let p = n;
-        for (; p >= 0; )
-          if (e[p].cols[s].merged)
-            p--;
-          else {
-            n = p;
+        colArray.length,
+        colArray[colIndex].options.rowspan
+      );
+      this.emitHistoryChange();
+    },
+    mergeTableRow(rowArray, curRow, curCol, aboveFlag, cellWidget) {
+      const mergedRowIdx = !!aboveFlag ? curRow : curRow + cellWidget.options.rowspan;
+      let remainedRowIdx = !!aboveFlag ? curRow - 1 : curRow;
+      if (!!aboveFlag) {
+        let tmpRowIdx = remainedRowIdx;
+        while (tmpRowIdx >= 0) {
+          if (!rowArray[tmpRowIdx].cols[curCol].merged) {
+            remainedRowIdx = tmpRowIdx;
             break;
+          } else {
+            tmpRowIdx--;
           }
+        }
+      }
+      if (!!rowArray[mergedRowIdx].cols[curCol].widgetList && rowArray[mergedRowIdx].cols[curCol].widgetList.length > 0) {
+        if (!rowArray[remainedRowIdx].cols[curCol].widgetList || rowArray[remainedRowIdx].cols[curCol].widgetList.length === 0) {
+          rowArray[remainedRowIdx].cols[curCol].widgetList = deepClone(
+            rowArray[mergedRowIdx].cols[curCol].widgetList
+          );
+        }
       }
-      e[o].cols[s].widgetList && e[o].cols[s].widgetList.length > 0 && (!e[n].cols[s].widgetList || e[n].cols[s].widgetList.length === 0) && (e[n].cols[s].widgetList = r(
-        e[o].cols[s].widgetList
-      ));
-      const a = e[o].cols[s].options.rowspan * 1 + e[n].cols[s].options.rowspan * 1;
+      const newRowspan = rowArray[mergedRowIdx].cols[curCol].options.rowspan * 1 + rowArray[remainedRowIdx].cols[curCol].options.rowspan * 1;
       this.setPropsOfMergedRows(
-        e,
-        n,
-        s,
-        l.options.colspan,
-        a
-      ), this.emitHistoryChange();
-    },
-    mergeTableWholeCol(e, t, s, i) {
-      const l = e[0].cols[i].options.colspan;
-      let o = !1;
-      for (let p = 1; p < e.length; p++)
-        if (e[p].cols[i].options.colspan !== l) {
-          o = !0;
+        rowArray,
+        remainedRowIdx,
+        curCol,
+        cellWidget.options.colspan,
+        newRowspan
+      );
+      this.emitHistoryChange();
+    },
+    mergeTableWholeCol(rowArray, colArray, rowIndex, colIndex) {
+      const startColspan = rowArray[0].cols[colIndex].options.colspan;
+      let unmatchedFlag = false;
+      for (let i = 1; i < rowArray.length; i++) {
+        if (rowArray[i].cols[colIndex].options.colspan !== startColspan) {
+          unmatchedFlag = true;
           break;
         }
-      if (o) {
+      }
+      if (unmatchedFlag) {
         this.vueInstance.$message.info(
           this.vueInstance.i18nt("designer.hint.colspanNotConsistentForMergeEntireColumn")
         );
         return;
       }
-      const n = [];
-      e.forEach((p) => {
-        const h = p.cols[i];
-        !h.merged && h.widgetList && h.widgetList.length > 0 && n.push(h);
+      const widgetListCols = [];
+      rowArray.forEach((rowItem) => {
+        const tempCell = rowItem.cols[colIndex];
+        if (!tempCell.merged && !!tempCell.widgetList && tempCell.widgetList.length > 0) {
+          widgetListCols.push(tempCell);
+        }
       });
-      const a = e[0].cols[i];
-      n && n.length > 0 && n[0].id !== a.id && (!a.widgetList || a.widgetList.length <= 0) && (a.widgetList = r(n[0].widgetList)), this.setPropsOfMergedRows(
-        e,
+      const firstCellOfCol = rowArray[0].cols[colIndex];
+      if (!!widgetListCols && widgetListCols.length > 0) {
+        if (widgetListCols[0].id !== firstCellOfCol.id && (!firstCellOfCol.widgetList || firstCellOfCol.widgetList.length <= 0)) {
+          firstCellOfCol.widgetList = deepClone(widgetListCols[0].widgetList);
+        }
+      }
+      this.setPropsOfMergedRows(
+        rowArray,
         0,
-        i,
-        a.options.colspan,
-        e.length
-      ), this.emitHistoryChange();
-    },
-    undoMergeTableCol(e, t, s, i, l) {
-      this.setPropsOfSplitCol(e, t, s, i, l), this.emitHistoryChange();
-    },
-    undoMergeTableRow(e, t, s, i, l) {
-      this.setPropsOfSplitRow(e, t, s, i, l), this.emitHistoryChange();
-    },
-    deleteTableWholeCol(e, t) {
-      let s = !0;
-      if (e.forEach((o) => {
-        o.cols[0].options.colspan !== e[0].cols.length && (s = !1);
-      }), s) {
+        colIndex,
+        firstCellOfCol.options.colspan,
+        rowArray.length
+      );
+      this.emitHistoryChange();
+    },
+    undoMergeTableCol(rowArray, rowIndex, colIndex, colspan, rowspan) {
+      this.setPropsOfSplitCol(rowArray, rowIndex, colIndex, colspan, rowspan);
+      this.emitHistoryChange();
+    },
+    undoMergeTableRow(rowArray, rowIndex, colIndex, colspan, rowspan) {
+      this.setPropsOfSplitRow(rowArray, rowIndex, colIndex, colspan, rowspan);
+      this.emitHistoryChange();
+    },
+    deleteTableWholeCol(rowArray, colIndex) {
+      let onlyOneColFlag = true;
+      rowArray.forEach((ri) => {
+        if (ri.cols[0].options.colspan !== rowArray[0].cols.length) {
+          onlyOneColFlag = false;
+        }
+      });
+      if (onlyOneColFlag) {
         this.vueInstance.$message.info(
           this.vueInstance.i18nt("designer.hint.lastColCannotBeDeleted")
         );
         return;
       }
-      const i = e[0].cols[t].options.colspan;
-      let l = !1;
-      for (let o = 1; o < e.length; o++)
-        if (e[o].cols[t].options.colspan !== i) {
-          l = !0;
+      const startColspan = rowArray[0].cols[colIndex].options.colspan;
+      let unmatchedFlag = false;
+      for (let i = 1; i < rowArray.length; i++) {
+        if (rowArray[i].cols[colIndex].options.colspan !== startColspan) {
+          unmatchedFlag = true;
           break;
         }
-      if (l) {
+      }
+      if (unmatchedFlag) {
         this.vueInstance.$message.info(
           this.vueInstance.i18nt("designer.hint.colspanNotConsistentForDeleteEntireColumn")
         );
         return;
       }
-      e.forEach((o) => {
-        o.cols.splice(t, i);
-      }), this.emitHistoryChange();
+      rowArray.forEach((rItem) => {
+        rItem.cols.splice(colIndex, startColspan);
+      });
+      this.emitHistoryChange();
     },
-    deleteTableWholeRow(e, t) {
-      let s = !0;
-      if (e[0].cols.forEach((o) => {
-        o.options.rowspan !== e.length && (s = !1);
-      }), s) {
+    deleteTableWholeRow(rowArray, rowIndex) {
+      let onlyOneRowFlag = true;
+      rowArray[0].cols.forEach((ci) => {
+        if (ci.options.rowspan !== rowArray.length) {
+          onlyOneRowFlag = false;
+        }
+      });
+      if (onlyOneRowFlag) {
         this.vueInstance.$message.info(
           this.vueInstance.i18nt("designer.hint.lastRowCannotBeDeleted")
         );
         return;
       }
-      const i = e[t].cols[0].options.rowspan;
-      let l = !1;
-      for (let o = 1; o < e[t].cols.length; o++)
-        if (e[t].cols[o].options.rowspan !== i) {
-          l = !0;
+      const startRowspan = rowArray[rowIndex].cols[0].options.rowspan;
+      let unmatchedFlag = false;
+      for (let i = 1; i < rowArray[rowIndex].cols.length; i++) {
+        if (rowArray[rowIndex].cols[i].options.rowspan !== startRowspan) {
+          unmatchedFlag = true;
           break;
         }
-      if (l) {
+      }
+      if (unmatchedFlag) {
         this.vueInstance.$message.info(
           this.vueInstance.i18nt("designer.hint.rowspanNotConsistentForDeleteEntireRow")
         );
         return;
       }
-      e.splice(t, i), this.emitHistoryChange();
-    },
-    getContainerByType(e) {
-      const t = [...w, ...y, ...b, ...L];
-      let s = null;
-      return t.forEach((i) => {
-        i.category && i.type && i.type === e && (s = i);
-      }), s;
-    },
-    getFieldWidgetByType(e) {
-      const t = [...w, ...y, ...b, ...L];
-      let s = null;
-      return t.forEach((i) => {
-        !i.category && i.type && i.type === e && (s = i);
-      }), s;
-    },
-    hasConfig(e, t) {
-      let s = null;
-      return e.category ? s = this.getContainerByType(e.type) : s = this.getFieldWidgetByType(e.type), !s || !s.options ? !1 : Object.keys(s.options).indexOf(t) > -1;
-    },
-    upgradeWidgetConfig(e) {
-      let t = null;
-      e.category ? t = this.getContainerByType(e.type) : t = this.getFieldWidgetByType(e.type), !(!t || !t.options) && Object.keys(t.options).forEach((s) => {
-        e.hasOwnProperty(s) || (e.options[s] = r(t.options[s]));
+      rowArray.splice(rowIndex, startRowspan);
+      this.emitHistoryChange();
+    },
+    getContainerByType(typeName) {
+      const allWidgets = [...containers, ...basicFields, ...advancedFields, ...customFields];
+      let foundCon = null;
+      allWidgets.forEach((con) => {
+        if (!!con.category && !!con.type && con.type === typeName) {
+          foundCon = con;
+        }
+      });
+      return foundCon;
+    },
+    getFieldWidgetByType(typeName) {
+      const allWidgets = [...containers, ...basicFields, ...advancedFields, ...customFields];
+      let foundWidget = null;
+      allWidgets.forEach((widget) => {
+        if (!!!widget.category && !!widget.type && widget.type === typeName) {
+          foundWidget = widget;
+        }
+      });
+      return foundWidget;
+    },
+    hasConfig(widget, configName) {
+      let originalWidget = null;
+      if (!!widget.category) {
+        originalWidget = this.getContainerByType(widget.type);
+      } else {
+        originalWidget = this.getFieldWidgetByType(widget.type);
+      }
+      if (!originalWidget || !originalWidget.options) {
+        return false;
+      }
+      return Object.keys(originalWidget.options).indexOf(configName) > -1;
+    },
+    upgradeWidgetConfig(oldWidget) {
+      let newWidget = null;
+      if (!!oldWidget.category) {
+        newWidget = this.getContainerByType(oldWidget.type);
+      } else {
+        newWidget = this.getFieldWidgetByType(oldWidget.type);
+      }
+      if (!newWidget || !newWidget.options) {
+        return;
+      }
+      Object.keys(newWidget.options).forEach((ck) => {
+        if (!oldWidget.hasOwnProperty(ck)) {
+          oldWidget.options[ck] = deepClone(newWidget.options[ck]);
+        }
       });
     },
-    upgradeFormConfig(e) {
-      Object.keys(this.formConfig).forEach((t) => {
-        e.hasOwnProperty(t) || (e[t] = r(this.formConfig[t]));
+    upgradeFormConfig(oldFormConfig) {
+      Object.keys(this.formConfig).forEach((fc) => {
+        if (!oldFormConfig.hasOwnProperty(fc)) {
+          oldFormConfig[fc] = deepClone(this.formConfig[fc]);
+        }
       });
     },
-    cloneGridCol(e, t) {
-      const s = r(this.getContainerByType("grid-col"));
-      s.options.span = e.options.span;
-      const i = g();
-      s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t.cols.push(s);
-    },
-    cloneContainer(e) {
-      if (e.type === "grid") {
-        const t = r(this.getContainerByType("grid"));
-        return t.id = t.type + g(), t.options.name = t.id, e.cols.forEach((s) => {
-          const i = r(this.getContainerByType("grid-col")), l = g();
-          i.id = "grid-col-" + l, i.options.name = "gridCol" + l, i.options.span = s.options.span, t.cols.push(i);
-        }), t;
-      } else if (e.type === "table") {
-        const t = r(this.getContainerByType("table"));
-        return t.id = t.type + g(), t.options.name = t.id, e.rows.forEach((s) => {
-          const i = r(s);
-          i.id = "table-row-" + g(), i.cols.forEach((l) => {
-            l.id = "table-cell-" + g(), l.options.name = l.id, l.widgetList = [];
-          }), t.rows.push(i);
-        }), t;
-      } else
+    cloneGridCol(widget, parentWidget) {
+      const newGridCol = deepClone(this.getContainerByType("grid-col"));
+      newGridCol.options.span = widget.options.span;
+      const tmpId = generateId();
+      newGridCol.id = "grid-col-" + tmpId;
+      newGridCol.options.name = "gridCol" + tmpId;
+      parentWidget.cols.push(newGridCol);
+    },
+    cloneContainer(containWidget) {
+      if (containWidget.type === "grid") {
+        const newGrid = deepClone(this.getContainerByType("grid"));
+        newGrid.id = newGrid.type + generateId();
+        newGrid.options.name = newGrid.id;
+        containWidget.cols.forEach((gridCol) => {
+          const newGridCol = deepClone(this.getContainerByType("grid-col"));
+          const tmpId = generateId();
+          newGridCol.id = "grid-col-" + tmpId;
+          newGridCol.options.name = "gridCol" + tmpId;
+          newGridCol.options.span = gridCol.options.span;
+          newGrid.cols.push(newGridCol);
+        });
+        return newGrid;
+      } else if (containWidget.type === "table") {
+        const newTable = deepClone(this.getContainerByType("table"));
+        newTable.id = newTable.type + generateId();
+        newTable.options.name = newTable.id;
+        containWidget.rows.forEach((tRow) => {
+          const newRow = deepClone(tRow);
+          newRow.id = "table-row-" + generateId();
+          newRow.cols.forEach((col) => {
+            col.id = "table-cell-" + generateId();
+            col.options.name = col.id;
+            col.widgetList = [];
+          });
+          newTable.rows.push(newRow);
+        });
+        return newTable;
+      } else {
         return null;
+      }
     },
-    moveUpWidget(e, t) {
-      if (e) {
-        if (t === 0) {
+    moveUpWidget(parentList, indexOfParentList) {
+      if (!!parentList) {
+        if (indexOfParentList === 0) {
           this.vueInstance.$message(this.vueInstance.i18nt("designer.hint.moveUpFirstChildHint"));
           return;
         }
-        const s = e[t];
-        e.splice(t, 1), e.splice(t - 1, 0, s);
+        const tempWidget = parentList[indexOfParentList];
+        parentList.splice(indexOfParentList, 1);
+        parentList.splice(indexOfParentList - 1, 0, tempWidget);
       }
     },
-    moveDownWidget(e, t) {
-      if (e) {
-        if (t === e.length - 1) {
+    moveDownWidget(parentList, indexOfParentList) {
+      if (!!parentList) {
+        if (indexOfParentList === parentList.length - 1) {
           this.vueInstance.$message(this.vueInstance.i18nt("designer.hint.moveDownLastChildHint"));
           return;
         }
-        const s = e[t];
-        e.splice(t, 1), e.splice(t + 1, 0, s);
-      }
-    },
-    copyNewFieldWidget(e) {
-      const t = r(e), s = g();
-      return t.id = t.type.replace(/-/g, "") + s, t.options.name = t.id, t.options.label = t.options.label || t.type.toLowerCase(), delete t.displayName, t;
-    },
-    copyNewContainerWidget(e) {
-      const t = r(e);
-      if (t.id = t.type.replace(/-/g, "") + g(), t.options.name = t.id, t.type === "grid") {
-        let s = r(this.getContainerByType("grid-col")), i = g();
-        s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t.cols.push(s), s = r(s), i = g(), s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t.cols.push(s);
-      } else if (t.type === "table") {
-        const s = { cols: [] };
-        s.id = "table-row-" + g(), s.merged = !1;
-        const i = r(this.getContainerByType("table-cell"));
-        i.id = "table-cell-" + g(), i.options.name = i.id, i.merged = !1, i.options.colspan = 1, i.options.rowspan = 1, s.cols.push(i), t.rows.push(s);
-      } else if (t.type === "tab") {
-        const s = r(this.getContainerByType("tab-pane"));
-        s.id = "tab-pane-" + g(), s.options.name = "tab1", s.options.label = "tab 1", t.tabs.push(s);
-      }
-      return delete t.displayName, t;
-    },
-    addContainerByDbClick(e) {
-      const t = this.copyNewContainerWidget(e);
-      this.widgetList.push(t), this.setSelected(t);
-    },
-    addFieldByDbClick(e) {
-      const t = this.copyNewFieldWidget(e);
-      if (this.selectedWidget && this.selectedWidget.type === "tab") {
-        let s = this.selectedWidget.tabs[0];
-        this.selectedWidget.tabs.forEach((i) => {
-          i.options.active && (s = i);
-        }), s && s.widgetList.push(t);
-      } else this.selectedWidget && this.selectedWidget.widgetList ? this.selectedWidget.widgetList.push(t) : this.widgetList.push(t);
-      this.setSelected(t), this.emitHistoryChange();
-    },
-    deleteColOfGrid(e, t) {
-      e && e.cols && e.cols.splice(t, 1);
-    },
-    addNewColOfGrid(e) {
-      const t = e.cols, s = r(this.getContainerByType("grid-col")), i = g();
-      if (s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t && t.length > 0) {
-        let l = 0;
-        t.forEach((o) => {
-          l += o.options.span;
-        }), l >= 24 ? (console.log("列栅格之和超出24"), e.cols.push(s)) : (s.options.span = 24 - l > 12 ? 12 : 24 - l, e.cols.push(s));
-      } else
-        e.cols = [s];
-    },
-    addTabPaneOfTabs(e) {
-      const t = e.tabs, s = r(this.getContainerByType("tab-pane"));
-      s.id = "tab-pane-" + g(), s.options.name = s.id, s.options.label = "tab " + (t.length + 1), t.push(s);
-    },
-    deleteTabPaneOfTabs(e, t) {
-      e.tabs.splice(t, 1);
-    },
-    emitEvent(e, t) {
-      D.$emit(e, t);
-    },
-    handleEvent(e, t) {
-      D.$on(e, (s) => t(s));
-    },
-    setCssClassList(e) {
-      this.cssClassList = e;
+        const tempWidget = parentList[indexOfParentList];
+        parentList.splice(indexOfParentList, 1);
+        parentList.splice(indexOfParentList + 1, 0, tempWidget);
+      }
+    },
+    copyNewFieldWidget(origin) {
+      const newWidget = deepClone(origin);
+      const tempId = generateId();
+      newWidget.id = newWidget.type.replace(/-/g, "") + tempId;
+      newWidget.options.name = newWidget.id;
+      newWidget.options.label = newWidget.options.label || newWidget.type.toLowerCase();
+      delete newWidget.displayName;
+      return newWidget;
+    },
+    copyNewContainerWidget(origin) {
+      const newCon = deepClone(origin);
+      newCon.id = newCon.type.replace(/-/g, "") + generateId();
+      newCon.options.name = newCon.id;
+      if (newCon.type === "grid") {
+        let newCol = deepClone(this.getContainerByType("grid-col"));
+        let tmpId = generateId();
+        newCol.id = "grid-col-" + tmpId;
+        newCol.options.name = "gridCol" + tmpId;
+        newCon.cols.push(newCol);
+        newCol = deepClone(newCol);
+        tmpId = generateId();
+        newCol.id = "grid-col-" + tmpId;
+        newCol.options.name = "gridCol" + tmpId;
+        newCon.cols.push(newCol);
+      } else if (newCon.type === "table") {
+        const newRow = { cols: [] };
+        newRow.id = "table-row-" + generateId();
+        newRow.merged = false;
+        const newCell = deepClone(this.getContainerByType("table-cell"));
+        newCell.id = "table-cell-" + generateId();
+        newCell.options.name = newCell.id;
+        newCell.merged = false;
+        newCell.options.colspan = 1;
+        newCell.options.rowspan = 1;
+        newRow.cols.push(newCell);
+        newCon.rows.push(newRow);
+      } else if (newCon.type === "tab") {
+        const newTabPane = deepClone(this.getContainerByType("tab-pane"));
+        newTabPane.id = "tab-pane-" + generateId();
+        newTabPane.options.name = "tab1";
+        newTabPane.options.label = "tab 1";
+        newCon.tabs.push(newTabPane);
+      }
+      delete newCon.displayName;
+      return newCon;
+    },
+    addContainerByDbClick(container) {
+      const newCon = this.copyNewContainerWidget(container);
+      this.widgetList.push(newCon);
+      this.setSelected(newCon);
+    },
+    addFieldByDbClick(widget) {
+      const newWidget = this.copyNewFieldWidget(widget);
+      if (!!this.selectedWidget && this.selectedWidget.type === "tab") {
+        let activeTab = this.selectedWidget.tabs[0];
+        this.selectedWidget.tabs.forEach((tabPane) => {
+          if (!!tabPane.options.active) {
+            activeTab = tabPane;
+          }
+        });
+        !!activeTab && activeTab.widgetList.push(newWidget);
+      } else if (!!this.selectedWidget && !!this.selectedWidget.widgetList) {
+        this.selectedWidget.widgetList.push(newWidget);
+      } else {
+        this.widgetList.push(newWidget);
+      }
+      this.setSelected(newWidget);
+      this.emitHistoryChange();
+    },
+    deleteColOfGrid(gridWidget, colIdx) {
+      if (!!gridWidget && !!gridWidget.cols) {
+        gridWidget.cols.splice(colIdx, 1);
+      }
+    },
+    addNewColOfGrid(gridWidget) {
+      const cols = gridWidget.cols;
+      const newGridCol = deepClone(this.getContainerByType("grid-col"));
+      const tmpId = generateId();
+      newGridCol.id = "grid-col-" + tmpId;
+      newGridCol.options.name = "gridCol" + tmpId;
+      if (!!cols && cols.length > 0) {
+        let spanSum = 0;
+        cols.forEach((col) => {
+          spanSum += col.options.span;
+        });
+        if (spanSum >= 24) {
+          console.log("列栅格之和超出24");
+          gridWidget.cols.push(newGridCol);
+        } else {
+          newGridCol.options.span = 24 - spanSum > 12 ? 12 : 24 - spanSum;
+          gridWidget.cols.push(newGridCol);
+        }
+      } else {
+        gridWidget.cols = [newGridCol];
+      }
+    },
+    addTabPaneOfTabs(tabsWidget) {
+      const tabPanes = tabsWidget.tabs;
+      const newTabPane = deepClone(this.getContainerByType("tab-pane"));
+      newTabPane.id = "tab-pane-" + generateId();
+      newTabPane.options.name = newTabPane.id;
+      newTabPane.options.label = "tab " + (tabPanes.length + 1);
+      tabPanes.push(newTabPane);
+    },
+    deleteTabPaneOfTabs(tabsWidget, tpIdx) {
+      tabsWidget.tabs.splice(tpIdx, 1);
+    },
+    emitEvent(evtName, evtData) {
+      eventBus.$emit(evtName, evtData);
+    },
+    handleEvent(evtName, callback) {
+      eventBus.$on(evtName, (data) => callback(data));
+    },
+    setCssClassList(cssClassList) {
+      this.cssClassList = cssClassList;
     },
     getCssClassList() {
       return this.cssClassList;
     },
-    registerFormWidget(e) {
-      this.formWidget = e;
+    registerFormWidget(formWidget) {
+      this.formWidget = formWidget;
     },
     initHistoryData() {
-      this.loadFormContentFromStorage(), this.historyData.index++, this.historyData.steps[this.historyData.index] = {
-        widgetList: r(this.widgetList),
-        formConfig: r(this.formConfig)
+      this.loadFormContentFromStorage();
+      this.historyData.index++;
+      this.historyData.steps[this.historyData.index] = {
+        widgetList: deepClone(this.widgetList),
+        formConfig: deepClone(this.formConfig)
       };
     },
     emitHistoryChange() {
-      this.historyData.index === this.historyData.maxStep - 1 ? this.historyData.steps.shift() : this.historyData.index++, this.historyData.steps[this.historyData.index] = {
-        widgetList: r(this.widgetList),
-        formConfig: r(this.formConfig)
-      }, this.saveFormContentToStorage(), this.historyData.index < this.historyData.steps.length - 1 && (this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1));
+      if (this.historyData.index === this.historyData.maxStep - 1) {
+        this.historyData.steps.shift();
+      } else {
+        this.historyData.index++;
+      }
+      this.historyData.steps[this.historyData.index] = {
+        widgetList: deepClone(this.widgetList),
+        formConfig: deepClone(this.formConfig)
+      };
+      this.saveFormContentToStorage();
+      if (this.historyData.index < this.historyData.steps.length - 1) {
+        this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1);
+      }
     },
     saveCurrentHistoryStep() {
-      this.historyData.steps[this.historyData.index] = r({
+      this.historyData.steps[this.historyData.index] = deepClone({
         widgetList: this.widgetList,
         formConfig: this.formConfig
-      }), this.saveFormContentToStorage();
+      });
+      this.saveFormContentToStorage();
     },
     undoHistoryStep() {
-      this.historyData.index !== 0 && this.historyData.index--, this.widgetList = r(this.historyData.steps[this.historyData.index].widgetList), this.formConfig = r(this.historyData.steps[this.historyData.index].formConfig);
+      if (this.historyData.index !== 0) {
+        this.historyData.index--;
+      }
+      this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList);
+      this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig);
     },
     redoHistoryStep() {
-      this.historyData.index !== this.historyData.steps.length - 1 && this.historyData.index++, this.widgetList = r(this.historyData.steps[this.historyData.index].widgetList), this.formConfig = r(this.historyData.steps[this.historyData.index].formConfig);
+      if (this.historyData.index !== this.historyData.steps.length - 1) {
+        this.historyData.index++;
+      }
+      this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList);
+      this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig);
     },
     undoEnabled() {
       return this.historyData.index > 0 && this.historyData.steps.length > 0;
@@ -556,12 +843,13 @@ function S(T) {
       return this.historyData.index < this.historyData.steps.length - 1;
     },
     saveFormContentToStorage() {
-      window.localStorage.setItem("widget__list__backup", JSON.stringify(this.widgetList)), window.localStorage.setItem("form__config__backup", JSON.stringify(this.formConfig));
+      window.localStorage.setItem("widget__list__backup", JSON.stringify(this.widgetList));
+      window.localStorage.setItem("form__config__backup", JSON.stringify(this.formConfig));
     },
     loadFormContentFromStorage() {
     }
   };
 }
 export {
-  S as createDesigner
+  createDesigner
 };