@hufe921/canvas-editor 0.9.78 → 0.9.80

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.78";
+const version = "0.9.80";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -177,19 +177,27 @@ function getUUID() {
 }
 function splitText(text) {
   const data2 = [];
-  const symbolMap = new Map();
-  for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
-    symbolMap.set(match.index, match[0]);
-  }
-  let t = 0;
-  while (t < text.length) {
-    const symbol = symbolMap.get(t);
-    if (symbol) {
-      data2.push(symbol);
-      t += symbol.length;
-    } else {
-      data2.push(text[t]);
-      t++;
+  if (Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter();
+    const segments = segmenter.segment(text);
+    for (const { segment } of segments) {
+      data2.push(segment);
+    }
+  } else {
+    const symbolMap = new Map();
+    for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
+      symbolMap.set(match.index, match[0]);
+    }
+    let t = 0;
+    while (t < text.length) {
+      const symbol = symbolMap.get(t);
+      if (symbol) {
+        data2.push(symbol);
+        t += symbol.length;
+      } else {
+        data2.push(text[t]);
+        t++;
+      }
     }
   }
   return data2;
@@ -421,7 +429,6 @@ const EDITOR_ELEMENT_COPY_ATTR = [
   "dateId",
   "dateFormat",
   "groupIds",
-  "rowFlex",
   "rowMargin",
   "textDecoration"
 ];
@@ -460,7 +467,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "imgDisplay",
   "imgFloatPosition",
   "textDecoration",
-  "extension"
+  "extension",
+  "externalId"
 ];
 const TABLE_TD_ZIP_ATTR = [
   "verticalAlign",
@@ -499,7 +507,8 @@ const CONTROL_STYLE_ATTR = [
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
-  ...LIST_CONTEXT_ATTR
+  ...LIST_CONTEXT_ATTR,
+  ...EDITOR_ROW_ATTR
 ];
 const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.TEXT,
@@ -513,7 +522,7 @@ const IMAGE_ELEMENT_TYPE = [
   ElementType.IMAGE,
   ElementType.LATEX
 ];
-const INLINE_ELEMENT_TYPE = [
+const BLOCK_ELEMENT_TYPE = [
   ElementType.BLOCK,
   ElementType.PAGE_BREAK,
   ElementType.SEPARATOR,
@@ -3726,6 +3735,7 @@ var ControlType;
   ControlType2["SELECT"] = "select";
   ControlType2["CHECKBOX"] = "checkbox";
   ControlType2["RADIO"] = "radio";
+  ControlType2["DATE"] = "date";
 })(ControlType || (ControlType = {}));
 var ControlComponent;
 (function(ControlComponent2) {
@@ -4235,11 +4245,11 @@ function zipElementList(payload) {
       if (controlId) {
         const controlDefaultStyle = pickObject(element, CONTROL_STYLE_ATTR);
         const control = __spreadValues(__spreadValues({}, element.control), controlDefaultStyle);
-        const controlElement = {
+        const controlElement = __spreadProps(__spreadValues({}, pickObject(element, EDITOR_ROW_ATTR)), {
           type: ElementType.CONTROL,
           value: "",
           control
-        };
+        });
         const valueList = [];
         while (e < elementList.length) {
           const controlE = elementList[e];
@@ -4277,7 +4287,7 @@ function zipElementList(payload) {
   }
   return zipElementListData;
 }
-function getElementRowFlex(node) {
+function convertTextAlignToRowFlex(node) {
   const textAlign = window.getComputedStyle(node).textAlign;
   switch (textAlign) {
     case "left":
@@ -4296,6 +4306,24 @@ function getElementRowFlex(node) {
       return RowFlex.LEFT;
   }
 }
+function convertRowFlexToTextAlign(rowFlex) {
+  return rowFlex === RowFlex.ALIGNMENT ? "justify" : rowFlex;
+}
+function convertRowFlexToJustifyContent(rowFlex) {
+  switch (rowFlex) {
+    case RowFlex.LEFT:
+      return "flex-start";
+    case RowFlex.CENTER:
+      return "center";
+    case RowFlex.RIGHT:
+      return "flex-end";
+    case RowFlex.ALIGNMENT:
+    case RowFlex.JUSTIFY:
+      return "space-between";
+    default:
+      return "flex-start";
+  }
+}
 function isTextLikeElement(element) {
   return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type);
 }
@@ -4319,9 +4347,10 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
       isBreakWarped = true;
     }
     if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
-      cloneProperty(TABLE_CONTEXT_ATTR, copyElement, targetElement);
+      const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
+      cloneProperty(cloneAttr, copyElement, targetElement);
       (_a = targetElement.valueList) == null ? void 0 : _a.forEach((valueItem) => {
-        cloneProperty(TABLE_CONTEXT_ATTR, copyElement, valueItem);
+        cloneProperty(cloneAttr, copyElement, valueItem);
       });
       continue;
     }
@@ -4337,14 +4366,11 @@ function convertElementToDom(element, options) {
     tagName = "sup";
   } else if (element.type === ElementType.SUBSCRIPT) {
     tagName = "sub";
-  } else if (element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT) {
-    tagName = "p";
   }
   const dom = document.createElement(tagName);
   dom.style.fontFamily = element.font || options.defaultFont;
   if (element.rowFlex) {
-    const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
-    dom.style.textAlign = isAlignment ? "justify" : element.rowFlex;
+    dom.style.textAlign = convertRowFlexToTextAlign(element.rowFlex);
   }
   if (element.color) {
     dom.style.color = element.color;
@@ -4399,10 +4425,40 @@ function splitListElement(elementList) {
   }
   return listElementListMap;
 }
+function groupElementListByRowFlex(elementList) {
+  var _a;
+  const elementListGroupList = [];
+  if (!elementList.length)
+    return elementListGroupList;
+  let currentRowFlex = ((_a = elementList[0]) == null ? void 0 : _a.rowFlex) || null;
+  elementListGroupList.push({
+    rowFlex: currentRowFlex,
+    data: [elementList[0]]
+  });
+  for (let e = 1; e < elementList.length; e++) {
+    const element = elementList[e];
+    const rowFlex = element.rowFlex || null;
+    if (currentRowFlex === rowFlex && !getIsBlockElement(element) && !getIsBlockElement(elementList[e - 1])) {
+      const lastElementListGroup = elementListGroupList[elementListGroupList.length - 1];
+      lastElementListGroup.data.push(element);
+    } else {
+      elementListGroupList.push({
+        rowFlex,
+        data: [element]
+      });
+      currentRowFlex = rowFlex;
+    }
+  }
+  for (let g = 0; g < elementListGroupList.length; g++) {
+    const elementListGroup = elementListGroupList[g];
+    elementListGroup.data = zipElementList(elementListGroup.data);
+  }
+  return elementListGroupList;
+}
 function createDomFromElementList(elementList, options) {
   function buildDom(payload) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const clipboardDom = document.createElement("div");
+    const clipboardDom2 = document.createElement("div");
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
@@ -4452,7 +4508,7 @@ function createDomFromElementList(elementList, options) {
             if ((_d = td.borderTypes) == null ? void 0 : _d.includes(TdBorder.LEFT)) {
               tdDom.style.borderLeft = borderStyle;
             }
-            const childDom = buildDom(zipElementList(td.value));
+            const childDom = createDomFromElementList(td.value, options);
             tdDom.innerHTML = childDom.innerHTML;
             if (td.backgroundColor) {
               tdDom.style.backgroundColor = td.backgroundColor;
@@ -4461,19 +4517,19 @@ function createDomFromElementList(elementList, options) {
           }
           tableDom.append(trDom);
         }
-        clipboardDom.append(tableDom);
+        clipboardDom2.append(tableDom);
       } else if (element.type === ElementType.HYPERLINK) {
         const a = document.createElement("a");
         a.innerText = element.valueList.map((v) => v.value).join("");
         if (element.url) {
           a.href = element.url;
         }
-        clipboardDom.append(a);
+        clipboardDom2.append(a);
       } else if (element.type === ElementType.TITLE) {
         const h = document.createElement(`h${titleOrderNumberMapping[element.level]}`);
-        const childDom = buildDom(zipElementList(element.valueList));
+        const childDom = buildDom(element.valueList);
         h.innerHTML = childDom.innerHTML;
-        clipboardDom.append(h);
+        clipboardDom2.append(h);
       } else if (element.type === ElementType.LIST) {
         const list = document.createElement(listTypeElementMapping[element.listType]);
         if (element.listStyle) {
@@ -4487,7 +4543,7 @@ function createDomFromElementList(elementList, options) {
           li.innerHTML = childDom.innerHTML;
           list.append(li);
         });
-        clipboardDom.append(list);
+        clipboardDom2.append(list);
       } else if (element.type === ElementType.IMAGE) {
         const img = document.createElement("img");
         if (element.value) {
@@ -4495,33 +4551,33 @@ function createDomFromElementList(elementList, options) {
           img.width = element.width;
           img.height = element.height;
         }
-        clipboardDom.append(img);
+        clipboardDom2.append(img);
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement("hr");
-        clipboardDom.append(hr);
+        clipboardDom2.append(hr);
       } else if (element.type === ElementType.CHECKBOX) {
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
         if ((_e = element.checkbox) == null ? void 0 : _e.value) {
           checkbox.setAttribute("checked", "true");
         }
-        clipboardDom.append(checkbox);
+        clipboardDom2.append(checkbox);
       } else if (element.type === ElementType.RADIO) {
         const radio = document.createElement("input");
         radio.type = "radio";
         if ((_f = element.radio) == null ? void 0 : _f.value) {
           radio.setAttribute("checked", "true");
         }
-        clipboardDom.append(radio);
+        clipboardDom2.append(radio);
       } else if (element.type === ElementType.TAB) {
         const tab2 = document.createElement("span");
         tab2.innerHTML = `${NON_BREAKING_SPACE}${NON_BREAKING_SPACE}`;
-        clipboardDom.append(tab2);
+        clipboardDom2.append(tab2);
       } else if (element.type === ElementType.CONTROL) {
         const controlElement = document.createElement("span");
-        const childDom = buildDom(zipElementList(((_g = element.control) == null ? void 0 : _g.value) || []));
+        const childDom = buildDom(((_g = element.control) == null ? void 0 : _g.value) || []);
         controlElement.innerHTML = childDom.innerHTML;
-        clipboardDom.append(controlElement);
+        clipboardDom2.append(controlElement);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text = "";
         if (element.type === ElementType.DATE) {
@@ -4535,23 +4591,44 @@ function createDomFromElementList(elementList, options) {
         if (((_i = payload[e - 1]) == null ? void 0 : _i.type) === ElementType.TITLE) {
           text = text.replace(/^\n/, "");
         }
-        if (dom.tagName === "P") {
-          text = text.replace(/\n$/, "");
-        }
         dom.innerText = text.replace(new RegExp(`${ZERO}`, "g"), "\n");
-        clipboardDom.append(dom);
+        clipboardDom2.append(dom);
+      }
+    }
+    return clipboardDom2;
+  }
+  const clipboardDom = document.createElement("div");
+  const groupElementList = groupElementListByRowFlex(elementList);
+  for (let g = 0; g < groupElementList.length; g++) {
+    const elementGroupRowFlex = groupElementList[g];
+    const isDefaultRowFlex = !elementGroupRowFlex.rowFlex || elementGroupRowFlex.rowFlex === RowFlex.LEFT;
+    const rowFlexDom = document.createElement("div");
+    if (!isDefaultRowFlex) {
+      const firstElement = elementGroupRowFlex.data[0];
+      if (getIsBlockElement(firstElement)) {
+        rowFlexDom.style.display = "flex";
+        rowFlexDom.style.justifyContent = convertRowFlexToJustifyContent(firstElement.rowFlex);
+      } else {
+        rowFlexDom.style.textAlign = convertRowFlexToTextAlign(elementGroupRowFlex.rowFlex);
       }
     }
-    return clipboardDom;
+    rowFlexDom.innerHTML = buildDom(elementGroupRowFlex.data).innerHTML;
+    if (!isDefaultRowFlex) {
+      clipboardDom.append(rowFlexDom);
+    } else {
+      rowFlexDom.childNodes.forEach((child) => {
+        clipboardDom.append(child.cloneNode(true));
+      });
+    }
   }
-  return buildDom(zipElementList(elementList));
+  return clipboardDom;
 }
 function convertTextNodeToElement(textNode) {
   if (!textNode || textNode.nodeType !== 3)
     return null;
   const parentNode = textNode.parentNode;
   const anchorNode = parentNode.nodeName === "FONT" ? parentNode.parentNode : parentNode;
-  const rowFlex = getElementRowFlex(anchorNode);
+  const rowFlex = convertTextAlignToRowFlex(anchorNode);
   const value = textNode.textContent;
   const style = window.getComputedStyle(anchorNode);
   if (!value || anchorNode.nodeName === "STYLE")
@@ -4820,8 +4897,8 @@ function getSlimCloneElementList(elementList) {
     "style"
   ]);
 }
-function getIsInlineElement(element) {
-  return !!(element == null ? void 0 : element.type) && (INLINE_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === ImageDisplay.INLINE);
+function getIsBlockElement(element) {
+  return !!(element == null ? void 0 : element.type) && (BLOCK_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === ImageDisplay.INLINE);
 }
 function setClipboardData(data2) {
   localStorage.setItem(EDITOR_CLIPBOARD, JSON.stringify({
@@ -5204,8 +5281,10 @@ class Cursor {
     const cursorLeft = hitLineStartIndex ? leftTop[0] : rightTop[0];
     agentCursorDom.style.left = `${cursorLeft}px`;
     agentCursorDom.style.top = `${cursorTop + cursorHeight - defaultOffsetHeight}px`;
-    if (!isShow)
+    if (!isShow) {
+      this.recoveryCursor();
       return;
+    }
     const isReadonly = this.draw.isReadonly();
     this.cursorDom.style.width = `${width * scale}px`;
     this.cursorDom.style.backgroundColor = color;
@@ -6008,13 +6087,21 @@ function del(evt, host) {
     if (!cursorPosition)
       return;
     const { index: index2 } = cursorPosition;
-    const isCollapsed = rangeManager.getIsCollapsed();
-    if (!isCollapsed) {
-      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    const positionContext = position.getPositionContext();
+    if (positionContext.isDirectHit && positionContext.isImage) {
+      draw.spliceElementList(elementList, index2, 1);
+      curIndex = index2 - 1;
     } else {
-      draw.spliceElementList(elementList, index2 + 1, 1);
+      const isCollapsed = rangeManager.getIsCollapsed();
+      if (!isCollapsed) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+      } else {
+        if (!elementList[index2 + 1])
+          return;
+        draw.spliceElementList(elementList, index2 + 1, 1);
+      }
+      curIndex = isCollapsed ? index2 : startIndex;
     }
-    curIndex = isCollapsed ? index2 : startIndex;
   }
   if (curIndex === null)
     return;
@@ -6049,7 +6136,10 @@ function enter(evt, host) {
     formatElementContext(elementList, [enterText], startIndex);
     const copyElement = getAnchorElement(elementList, endIndex);
     if (copyElement) {
-      const copyAttr = [...EDITOR_ELEMENT_STYLE_ATTR, ...EDITOR_ROW_ATTR];
+      const copyAttr = [...EDITOR_ROW_ATTR];
+      if (copyElement.controlComponent !== ControlComponent.POSTFIX) {
+        copyAttr.push(...EDITOR_ELEMENT_STYLE_ATTR);
+      }
       copyAttr.forEach((attr) => {
         const value = copyElement[attr];
         if (value !== void 0) {
@@ -6083,7 +6173,7 @@ function enter(evt, host) {
   evt.preventDefault();
 }
 function left(evt, host) {
-  var _a;
+  var _a, _b;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -6100,11 +6190,18 @@ function left(evt, host) {
   const { startIndex, endIndex } = rangeManager.getRange();
   const isCollapsed = rangeManager.getIsCollapsed();
   const elementList = draw.getElementList();
+  const control = draw.getControl();
+  if (draw.getMode() === EditorMode.FORM && control.getActiveControl() && ((_a = elementList[index2]) == null ? void 0 : _a.controlComponent) === ControlComponent.PREFIX) {
+    control.initNextControl({
+      direction: MoveDirection.UP
+    });
+    return;
+  }
   let moveCount = 1;
   if (isMod(evt)) {
     const LETTER_REG = draw.getLetterReg();
     const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition == null ? void 0 : cursorPosition.index) ? endIndex : startIndex;
-    if (LETTER_REG.test((_a = elementList[moveStartIndex]) == null ? void 0 : _a.value)) {
+    if (LETTER_REG.test((_b = elementList[moveStartIndex]) == null ? void 0 : _b.value)) {
       let i = moveStartIndex - 1;
       while (i > 0) {
         const element = elementList[i];
@@ -6214,7 +6311,7 @@ function left(evt, host) {
   evt.preventDefault();
 }
 function right(evt, host) {
-  var _a;
+  var _a, _b;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -6232,11 +6329,18 @@ function right(evt, host) {
   const { startIndex, endIndex } = rangeManager.getRange();
   const isCollapsed = rangeManager.getIsCollapsed();
   let elementList = draw.getElementList();
+  const control = draw.getControl();
+  if (draw.getMode() === EditorMode.FORM && control.getActiveControl() && ((_a = elementList[index2 + 1]) == null ? void 0 : _a.controlComponent) === ControlComponent.POSTFIX) {
+    control.initNextControl({
+      direction: MoveDirection.DOWN
+    });
+    return;
+  }
   let moveCount = 1;
   if (isMod(evt)) {
     const LETTER_REG = draw.getLetterReg();
     const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition == null ? void 0 : cursorPosition.index) ? endIndex : startIndex;
-    if (LETTER_REG.test((_a = elementList[moveStartIndex + 1]) == null ? void 0 : _a.value)) {
+    if (LETTER_REG.test((_b = elementList[moveStartIndex + 1]) == null ? void 0 : _b.value)) {
       let i = moveStartIndex + 2;
       while (i < elementList.length) {
         const element = elementList[i];
@@ -6352,16 +6456,24 @@ function tab(evt, host) {
   const isReadonly = draw.isReadonly();
   if (isReadonly)
     return;
-  const tabElement = {
-    type: ElementType.TAB,
-    value: ""
-  };
-  const rangeManager = draw.getRange();
-  const { startIndex } = rangeManager.getRange();
-  const elementList = draw.getElementList();
-  formatElementContext(elementList, [tabElement], startIndex);
-  draw.insertElementList([tabElement]);
   evt.preventDefault();
+  const control = draw.getControl();
+  const activeControl = control.getActiveControl();
+  if (activeControl && control.getIsRangeWithinControl()) {
+    control.initNextControl({
+      direction: evt.shiftKey ? MoveDirection.UP : MoveDirection.DOWN
+    });
+  } else {
+    const tabElement = {
+      type: ElementType.TAB,
+      value: ""
+    };
+    const rangeManager = draw.getRange();
+    const { startIndex } = rangeManager.getRange();
+    const elementList = draw.getElementList();
+    formatElementContext(elementList, [tabElement], startIndex);
+    draw.insertElementList([tabElement]);
+  }
 }
 function getNextPositionIndex(payload) {
   const { positionList, index: index2, isUp, rowNo, cursorX } = payload;
@@ -7646,7 +7758,7 @@ class Position {
     this.positionContext = payload;
   }
   getPositionByXY(payload) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const { x, y, isTable } = payload;
     let { elementList, positionList } = payload;
     if (!elementList) {
@@ -7808,7 +7920,8 @@ class Position {
     }
     if (!isLastArea) {
       const header = this.draw.getHeader();
-      const headerBottomY = header.getHeaderTop() + header.getHeight();
+      const headerHeight = header.getHeight();
+      const headerBottomY = header.getHeaderTop() + headerHeight;
       const footer = this.draw.getFooter();
       const pageHeight = this.draw.getHeight();
       const footerTopY = pageHeight - (footer.getFooterBottom() + footer.getHeight());
@@ -7833,14 +7946,45 @@ class Position {
           };
         }
       }
+      const margins = this.draw.getMargins();
+      if (y <= margins[1]) {
+        for (let p = 0; p < positionList.length; p++) {
+          const position = positionList[p];
+          if (position.pageNo !== positionNo || position.rowNo !== 0)
+            continue;
+          const { leftTop, rightTop } = position.coordinate;
+          if (x <= margins[3] || x >= leftTop[0] && x <= rightTop[0] || ((_b = positionList[p + 1]) == null ? void 0 : _b.rowNo) !== 0) {
+            return {
+              index: position.index
+            };
+          }
+        }
+      } else {
+        const lastLetter = lastLetterList[lastLetterList.length - 1];
+        if (lastLetter) {
+          const lastRowNo = lastLetter.rowNo;
+          for (let p = 0; p < positionList.length; p++) {
+            const position = positionList[p];
+            if (position.pageNo !== positionNo || position.rowNo !== lastRowNo) {
+              continue;
+            }
+            const { leftTop, rightTop } = position.coordinate;
+            if (x <= margins[3] || x >= leftTop[0] && x <= rightTop[0] || ((_c = positionList[p + 1]) == null ? void 0 : _c.rowNo) !== lastRowNo) {
+              return {
+                index: position.index
+              };
+            }
+          }
+        }
+      }
       return {
-        index: ((_b = lastLetterList[lastLetterList.length - 1]) == null ? void 0 : _b.index) || positionList.length - 1
+        index: ((_d = lastLetterList[lastLetterList.length - 1]) == null ? void 0 : _d.index) || positionList.length - 1
       };
     }
     return {
       hitLineStartIndex,
       index: curPositionIndex,
-      isControl: !!((_c = elementList[curPositionIndex]) == null ? void 0 : _c.controlId)
+      isControl: !!((_e = elementList[curPositionIndex]) == null ? void 0 : _e.controlId)
     };
   }
   getFloatPositionByXY(payload) {
@@ -10719,1740 +10863,2204 @@ class TextControl {
     return startIndex;
   }
 }
-class Control {
-  constructor(draw) {
-    __publicField(this, "controlBorder");
+class DatePicker {
+  constructor(draw, options = {}) {
     __publicField(this, "draw");
-    __publicField(this, "range");
-    __publicField(this, "listener");
-    __publicField(this, "eventBus");
-    __publicField(this, "controlSearch");
     __publicField(this, "options");
-    __publicField(this, "controlOptions");
-    __publicField(this, "activeControl");
-    this.controlBorder = new ControlBorder(draw);
+    __publicField(this, "now");
+    __publicField(this, "dom");
+    __publicField(this, "renderOptions");
+    __publicField(this, "isDatePicker");
+    __publicField(this, "pickDate");
+    __publicField(this, "lang");
     this.draw = draw;
-    this.range = draw.getRange();
-    this.listener = draw.getListener();
-    this.eventBus = draw.getEventBus();
-    this.controlSearch = new ControlSearch(this);
-    this.options = draw.getOptions();
-    this.controlOptions = this.options.control;
-    this.activeControl = null;
-  }
-  setHighlightList(payload) {
-    this.controlSearch.setHighlightList(payload);
-  }
-  computeHighlightList() {
-    const highlightList = this.controlSearch.getHighlightList();
-    if (highlightList.length) {
-      this.controlSearch.computeHighlightList();
-    }
-  }
-  renderHighlightList(ctx, pageNo) {
-    const highlightMatchResult = this.controlSearch.getHighlightMatchResult();
-    if (highlightMatchResult.length) {
-      this.controlSearch.renderHighlightList(ctx, pageNo);
-    }
-  }
-  getDraw() {
-    return this.draw;
+    this.options = options;
+    this.lang = this._getLang();
+    this.now = new Date();
+    this.dom = this._createDom();
+    this.renderOptions = null;
+    this.isDatePicker = true;
+    this.pickDate = null;
+    this._bindEvent();
   }
-  filterAssistElement(elementList) {
-    return elementList.filter((element) => {
-      var _a;
-      if (element.type === ElementType.TABLE) {
-        const trList = element.trList;
-        for (let r = 0; r < trList.length; r++) {
-          const tr = trList[r];
-          for (let d = 0; d < tr.tdList.length; d++) {
-            const td = tr.tdList[d];
-            td.value = this.filterAssistElement(td.value);
-          }
-        }
+  _createDom() {
+    const datePickerContainer = document.createElement("div");
+    datePickerContainer.classList.add(`${EDITOR_PREFIX}-date-container`);
+    datePickerContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP);
+    const dateWrap = document.createElement("div");
+    dateWrap.classList.add(`${EDITOR_PREFIX}-date-wrap`);
+    const datePickerTitle = document.createElement("div");
+    datePickerTitle.classList.add(`${EDITOR_PREFIX}-date-title`);
+    const preYearTitle = document.createElement("span");
+    preYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-year`);
+    preYearTitle.innerText = `<<`;
+    const preMonthTitle = document.createElement("span");
+    preMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-month`);
+    preMonthTitle.innerText = `<`;
+    const nowTitle = document.createElement("span");
+    nowTitle.classList.add(`${EDITOR_PREFIX}-date-title__now`);
+    const nextMonthTitle = document.createElement("span");
+    nextMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-month`);
+    nextMonthTitle.innerText = `>`;
+    const nextYearTitle = document.createElement("span");
+    nextYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-year`);
+    nextYearTitle.innerText = `>>`;
+    datePickerTitle.append(preYearTitle);
+    datePickerTitle.append(preMonthTitle);
+    datePickerTitle.append(nowTitle);
+    datePickerTitle.append(nextMonthTitle);
+    datePickerTitle.append(nextYearTitle);
+    const datePickerWeek = document.createElement("div");
+    datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`);
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
+    const weekList = [sun, mon, tue, wed, thu, fri, sat];
+    weekList.forEach((week) => {
+      const weekDom = document.createElement("span");
+      weekDom.innerText = `${week}`;
+      datePickerWeek.append(weekDom);
+    });
+    const datePickerDay = document.createElement("div");
+    datePickerDay.classList.add(`${EDITOR_PREFIX}-date-day`);
+    dateWrap.append(datePickerTitle);
+    dateWrap.append(datePickerWeek);
+    dateWrap.append(datePickerDay);
+    const timeWrap = document.createElement("ul");
+    timeWrap.classList.add(`${EDITOR_PREFIX}-time-wrap`);
+    let hourTime;
+    let minuteTime;
+    let secondTime;
+    const timeList = [this.lang.hour, this.lang.minute, this.lang.second];
+    timeList.forEach((t, i) => {
+      const li = document.createElement("li");
+      const timeText = document.createElement("span");
+      timeText.innerText = t;
+      li.append(timeText);
+      const ol = document.createElement("ol");
+      const isHour = i === 0;
+      const isMinute = i === 1;
+      const endIndex = isHour ? 24 : 60;
+      for (let i2 = 0; i2 < endIndex; i2++) {
+        const time = document.createElement("li");
+        time.innerText = `${String(i2).padStart(2, "0")}`;
+        time.setAttribute("data-id", `${i2}`);
+        ol.append(time);
       }
-      if (!element.controlId)
-        return true;
-      if ((_a = element.control) == null ? void 0 : _a.minWidth) {
-        if (element.controlComponent === ControlComponent.PREFIX || element.controlComponent === ControlComponent.POSTFIX) {
-          element.value = "";
-          return true;
-        }
+      if (isHour) {
+        hourTime = ol;
+      } else if (isMinute) {
+        minuteTime = ol;
+      } else {
+        secondTime = ol;
       }
-      return element.controlComponent !== ControlComponent.PREFIX && element.controlComponent !== ControlComponent.POSTFIX && element.controlComponent !== ControlComponent.PLACEHOLDER;
+      li.append(ol);
+      timeWrap.append(li);
     });
+    const datePickerMenu = document.createElement("div");
+    datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`);
+    const timeMenu = document.createElement("button");
+    timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`);
+    timeMenu.innerText = this.lang.timeSelect;
+    const nowMenu = document.createElement("button");
+    nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`);
+    nowMenu.innerText = this.lang.now;
+    const submitMenu = document.createElement("button");
+    submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`);
+    submitMenu.innerText = this.lang.confirm;
+    datePickerMenu.append(timeMenu);
+    datePickerMenu.append(nowMenu);
+    datePickerMenu.append(submitMenu);
+    datePickerContainer.append(dateWrap);
+    datePickerContainer.append(timeWrap);
+    datePickerContainer.append(datePickerMenu);
+    this.draw.getContainer().append(datePickerContainer);
+    return {
+      container: datePickerContainer,
+      dateWrap,
+      datePickerWeek,
+      timeWrap,
+      title: {
+        preYear: preYearTitle,
+        preMonth: preMonthTitle,
+        now: nowTitle,
+        nextMonth: nextMonthTitle,
+        nextYear: nextYearTitle
+      },
+      day: datePickerDay,
+      time: {
+        hour: hourTime,
+        minute: minuteTime,
+        second: secondTime
+      },
+      menu: {
+        time: timeMenu,
+        now: nowMenu,
+        submit: submitMenu
+      }
+    };
   }
-  getIsRangeCanCaptureEvent() {
-    if (!this.activeControl)
-      return false;
-    const { startIndex, endIndex } = this.getRange();
-    if (!~startIndex && !~endIndex)
-      return false;
-    const elementList = this.getElementList();
-    const startElement = elementList[startIndex];
-    if (startIndex === endIndex && startElement.controlComponent === ControlComponent.POSTFIX) {
-      return true;
-    }
-    const endElement = elementList[endIndex];
-    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
-      return true;
-    }
-    return false;
-  }
-  getIsRangeInPostfix() {
-    if (!this.activeControl)
-      return false;
-    const { startIndex, endIndex } = this.getRange();
-    if (startIndex !== endIndex)
-      return false;
-    const elementList = this.getElementList();
-    const element = elementList[startIndex];
-    return element.controlComponent === ControlComponent.POSTFIX;
-  }
-  getIsRangeWithinControl() {
-    const { startIndex, endIndex } = this.getRange();
-    if (!~startIndex && !~endIndex)
-      return false;
-    const elementList = this.getElementList();
-    const startElement = elementList[startIndex];
-    const endElement = elementList[endIndex];
-    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
-      return true;
-    }
-    return false;
-  }
-  getIsDisabledControl() {
-    var _a, _b;
-    return !!((_b = (_a = this.activeControl) == null ? void 0 : _a.getElement().control) == null ? void 0 : _b.disabled);
-  }
-  getContainer() {
-    return this.draw.getContainer();
-  }
-  getElementList() {
-    return this.draw.getElementList();
-  }
-  getPosition() {
-    const positionList = this.draw.getPosition().getPositionList();
-    const { endIndex } = this.range.getRange();
-    return positionList[endIndex] || null;
+  _bindEvent() {
+    this.dom.title.preYear.onclick = () => {
+      this._preYear();
+    };
+    this.dom.title.preMonth.onclick = () => {
+      this._preMonth();
+    };
+    this.dom.title.nextMonth.onclick = () => {
+      this._nextMonth();
+    };
+    this.dom.title.nextYear.onclick = () => {
+      this._nextYear();
+    };
+    this.dom.menu.time.onclick = () => {
+      this.isDatePicker = !this.isDatePicker;
+      this._toggleDateTimePicker();
+    };
+    this.dom.menu.now.onclick = () => {
+      this._now();
+      this._submit();
+    };
+    this.dom.menu.submit.onclick = () => {
+      this.dispose();
+      this._submit();
+    };
+    this.dom.time.hour.onclick = (evt) => {
+      if (!this.pickDate)
+        return;
+      const li = evt.target;
+      const id = li.dataset.id;
+      if (!id)
+        return;
+      this.pickDate.setHours(Number(id));
+      this._setTimePick(false);
+    };
+    this.dom.time.minute.onclick = (evt) => {
+      if (!this.pickDate)
+        return;
+      const li = evt.target;
+      const id = li.dataset.id;
+      if (!id)
+        return;
+      this.pickDate.setMinutes(Number(id));
+      this._setTimePick(false);
+    };
+    this.dom.time.second.onclick = (evt) => {
+      if (!this.pickDate)
+        return;
+      const li = evt.target;
+      const id = li.dataset.id;
+      if (!id)
+        return;
+      this.pickDate.setSeconds(Number(id));
+      this._setTimePick(false);
+    };
   }
-  getPreY() {
+  _setPosition() {
+    if (!this.renderOptions)
+      return;
+    const { position: { coordinate: { leftTop: [left2, top] }, lineHeight, pageNo } } = this.renderOptions;
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
-    return this.draw.getPageNo() * (height + pageGap);
+    const currentPageNo = pageNo != null ? pageNo : this.draw.getPageNo();
+    const preY = currentPageNo * (height + pageGap);
+    this.dom.container.style.left = `${left2}px`;
+    this.dom.container.style.top = `${top + preY + lineHeight}px`;
   }
-  getRange() {
-    return this.range.getRange();
+  isInvalidDate(value) {
+    return value.toDateString() === "Invalid Date";
   }
-  shrinkBoundary(context = {}) {
-    this.range.shrinkBoundary(context);
+  _setValue() {
+    var _a;
+    const value = (_a = this.renderOptions) == null ? void 0 : _a.value;
+    if (value) {
+      const setDate = new Date(value);
+      this.now = this.isInvalidDate(setDate) ? new Date() : setDate;
+    } else {
+      this.now = new Date();
+    }
+    this.pickDate = new Date(this.now);
   }
-  getActiveControl() {
-    return this.activeControl;
+  _getLang() {
+    const i18n = this.draw.getI18n();
+    const t = i18n.t.bind(i18n);
+    return {
+      now: t("datePicker.now"),
+      confirm: t("datePicker.confirm"),
+      return: t("datePicker.return"),
+      timeSelect: t("datePicker.timeSelect"),
+      weeks: {
+        sun: t("datePicker.weeks.sun"),
+        mon: t("datePicker.weeks.mon"),
+        tue: t("datePicker.weeks.tue"),
+        wed: t("datePicker.weeks.wed"),
+        thu: t("datePicker.weeks.thu"),
+        fri: t("datePicker.weeks.fri"),
+        sat: t("datePicker.weeks.sat")
+      },
+      year: t("datePicker.year"),
+      month: t("datePicker.month"),
+      hour: t("datePicker.hour"),
+      minute: t("datePicker.minute"),
+      second: t("datePicker.second")
+    };
   }
-  initControl() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
-    const elementList = this.getElementList();
-    const range = this.getRange();
-    const element = elementList[range.startIndex];
-    if (this.activeControl) {
-      if (this.activeControl instanceof SelectControl) {
-        this.activeControl.awake();
-      }
-      const controlElement = this.activeControl.getElement();
-      if (element.controlId === controlElement.controlId)
-        return;
-    }
-    this.destroyControl();
-    const control = element.control;
-    if (control.type === ControlType.TEXT) {
-      this.activeControl = new TextControl(element, this);
-    } else if (control.type === ControlType.SELECT) {
-      const selectControl = new SelectControl(element, this);
-      this.activeControl = selectControl;
-      selectControl.awake();
-    } else if (control.type === ControlType.CHECKBOX) {
-      this.activeControl = new CheckboxControl(element, this);
-    } else if (control.type === ControlType.RADIO) {
-      this.activeControl = new RadioControl(element, this);
-    }
-    nextTick(() => {
-      var _a;
-      const controlChangeListener = this.listener.controlChange;
-      const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
-      if (!controlChangeListener && !isSubscribeControlChange)
-        return;
-      let payload;
-      const value = (_a = this.activeControl) == null ? void 0 : _a.getValue();
-      if (value && value.length) {
-        payload = zipElementList(value)[0].control;
-      } else {
-        payload = pickElementAttr(deepClone(element)).control;
-      }
-      if (controlChangeListener) {
-        controlChangeListener(payload);
-      }
-      if (isSubscribeControlChange) {
-        this.eventBus.emit("controlChange", payload);
-      }
+  _setLangChange() {
+    this.dom.menu.time.innerText = this.lang.timeSelect;
+    this.dom.menu.now.innerText = this.lang.now;
+    this.dom.menu.submit.innerText = this.lang.confirm;
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
+    const weekList = [sun, mon, tue, wed, thu, fri, sat];
+    this.dom.datePickerWeek.childNodes.forEach((child, i) => {
+      const childElement = child;
+      childElement.innerText = weekList[i];
     });
+    const hourTitle = this.dom.time.hour.previousElementSibling;
+    hourTitle.innerText = this.lang.hour;
+    const minuteTitle = this.dom.time.minute.previousElementSibling;
+    minuteTitle.innerText = this.lang.minute;
+    const secondTitle = this.dom.time.second.previousElementSibling;
+    secondTitle.innerText = this.lang.second;
   }
-  destroyControl() {
-    if (this.activeControl) {
-      if (this.activeControl instanceof SelectControl) {
-        this.activeControl.destroy();
-      }
-      this.activeControl = null;
-      nextTick(() => {
-        const controlChangeListener = this.listener.controlChange;
-        const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
-        if (!controlChangeListener && !isSubscribeControlChange)
-          return;
-        if (controlChangeListener) {
-          controlChangeListener(null);
-        }
-        if (isSubscribeControlChange) {
-          this.eventBus.emit("controlChange", null);
-        }
-      });
+  _update() {
+    const localDate = new Date();
+    const localYear = localDate.getFullYear();
+    const localMonth = localDate.getMonth() + 1;
+    const localDay = localDate.getDate();
+    let pickYear = null;
+    let pickMonth = null;
+    let pickDay = null;
+    if (this.pickDate) {
+      pickYear = this.pickDate.getFullYear();
+      pickMonth = this.pickDate.getMonth() + 1;
+      pickDay = this.pickDate.getDate();
     }
-  }
-  repaintControl(options = {}) {
-    const { curIndex, isCompute = true, isSubmitHistory = true } = options;
-    if (curIndex === void 0) {
-      this.range.clearRange();
-      this.draw.render({
-        isCompute,
-        isSubmitHistory,
-        isSetCursor: false
-      });
-    } else {
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({
-        curIndex,
-        isCompute,
-        isSubmitHistory
-      });
+    const year = this.now.getFullYear();
+    const month = this.now.getMonth() + 1;
+    this.dom.title.now.innerText = `${year}${this.lang.year} ${String(month).padStart(2, "0")}${this.lang.month}`;
+    const curDate = new Date(year, month, 0);
+    const curDay = curDate.getDate();
+    let curWeek = new Date(year, month - 1, 1).getDay();
+    if (curWeek === 0) {
+      curWeek = 7;
     }
-  }
-  reAwakeControl() {
-    if (!this.activeControl)
-      return;
-    const elementList = this.getElementList();
-    const range = this.getRange();
-    const element = elementList[range.startIndex];
-    this.activeControl.setElement(element);
-    if (this.activeControl instanceof SelectControl && this.activeControl.getIsPopup()) {
-      this.activeControl.destroy();
-      this.activeControl.awake();
-    }
-  }
-  moveCursor(position) {
-    const { index: index2, trIndex, tdIndex, tdValueIndex } = position;
-    let elementList = this.draw.getOriginalElementList();
-    let element;
-    const newIndex = position.isTable ? tdValueIndex : index2;
-    if (position.isTable) {
-      elementList = elementList[index2].trList[trIndex].tdList[tdIndex].value;
-      element = elementList[tdValueIndex];
-    } else {
-      element = elementList[index2];
-    }
-    if (element.controlComponent === ControlComponent.VALUE) {
-      return {
-        newIndex,
-        newElement: element
+    const preDay = new Date(year, month - 1, 0).getDate();
+    this.dom.day.innerHTML = "";
+    const preStartDay = preDay - curWeek + 1;
+    for (let i = preStartDay; i <= preDay; i++) {
+      const dayDom = document.createElement("div");
+      dayDom.classList.add("disable");
+      dayDom.innerText = `${i}`;
+      dayDom.onclick = () => {
+        const newMonth = month - 2;
+        this.now = new Date(year, newMonth, i);
+        this._setDatePick(year, newMonth, i);
       };
-    } else if (element.controlComponent === ControlComponent.POSTFIX) {
-      let startIndex = newIndex + 1;
-      while (startIndex < elementList.length) {
-        const nextElement = elementList[startIndex];
-        if (nextElement.controlId !== element.controlId) {
-          return {
-            newIndex: startIndex - 1,
-            newElement: elementList[startIndex - 1]
-          };
-        }
-        startIndex++;
-      }
-    } else if (element.controlComponent === ControlComponent.PREFIX) {
-      let startIndex = newIndex + 1;
-      while (startIndex < elementList.length) {
-        const nextElement = elementList[startIndex];
-        if (nextElement.controlId !== element.controlId || nextElement.controlComponent !== ControlComponent.PREFIX) {
-          return {
-            newIndex: startIndex - 1,
-            newElement: elementList[startIndex - 1]
-          };
-        }
-        startIndex++;
-      }
-    } else if (element.controlComponent === ControlComponent.PLACEHOLDER) {
-      let startIndex = newIndex - 1;
-      while (startIndex > 0) {
-        const preElement = elementList[startIndex];
-        if (preElement.controlId !== element.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
-          return {
-            newIndex: startIndex,
-            newElement: elementList[startIndex]
-          };
-        }
-        startIndex--;
-      }
+      this.dom.day.append(dayDom);
     }
-    return {
-      newIndex,
-      newElement: element
-    };
-  }
-  removeControl(startIndex, context = {}) {
-    const elementList = context.elementList || this.getElementList();
-    const startElement = elementList[startIndex];
-    const { deletable = true } = startElement.control;
-    if (!deletable)
-      return null;
-    let leftIndex = -1;
-    let rightIndex = -1;
-    let preIndex = startIndex;
-    while (preIndex > 0) {
-      const preElement = elementList[preIndex];
-      if (preElement.controlId !== startElement.controlId) {
-        leftIndex = preIndex;
-        break;
+    for (let i = 1; i <= curDay; i++) {
+      const dayDom = document.createElement("div");
+      if (localYear === year && localMonth === month && localDay === i) {
+        dayDom.classList.add("active");
       }
-      preIndex--;
-    }
-    let nextIndex = startIndex + 1;
-    while (nextIndex < elementList.length) {
-      const nextElement = elementList[nextIndex];
-      if (nextElement.controlId !== startElement.controlId) {
-        rightIndex = nextIndex - 1;
-        break;
+      if (this.pickDate && pickYear === year && pickMonth === month && pickDay === i) {
+        dayDom.classList.add("select");
       }
-      nextIndex++;
+      dayDom.innerText = `${i}`;
+      dayDom.onclick = (evt) => {
+        const newMonth = month - 1;
+        this.now = new Date(year, newMonth, i);
+        this._setDatePick(year, newMonth, i);
+        evt.stopPropagation();
+      };
+      this.dom.day.append(dayDom);
     }
-    if (nextIndex === elementList.length) {
-      rightIndex = nextIndex - 1;
+    const nextEndDay = 6 * 7 - curWeek - curDay;
+    for (let i = 1; i <= nextEndDay; i++) {
+      const dayDom = document.createElement("div");
+      dayDom.classList.add("disable");
+      dayDom.innerText = `${i}`;
+      dayDom.onclick = () => {
+        this.now = new Date(year, month, i);
+        this._setDatePick(year, month, i);
+      };
+      this.dom.day.append(dayDom);
     }
-    if (!~leftIndex && !~rightIndex)
-      return startIndex;
-    leftIndex = ~leftIndex ? leftIndex : 0;
-    this.draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
-    return leftIndex;
   }
-  removePlaceholder(startIndex, context = {}) {
-    const elementList = context.elementList || this.getElementList();
-    const startElement = elementList[startIndex];
-    const nextElement = elementList[startIndex + 1];
-    if (startElement.controlComponent === ControlComponent.PLACEHOLDER || nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
-      let isHasSubmitHistory = false;
-      let index2 = startIndex;
-      while (index2 < elementList.length) {
-        const curElement = elementList[index2];
-        if (curElement.controlId !== startElement.controlId)
-          break;
-        if (curElement.controlComponent === ControlComponent.PLACEHOLDER) {
-          if (!isHasSubmitHistory) {
-            isHasSubmitHistory = true;
-            this.draw.getHistoryManager().popUndo();
-            this.draw.submitHistory(startIndex);
-          }
-          elementList.splice(index2, 1);
-        } else {
-          index2++;
-        }
-      }
+  _toggleDateTimePicker() {
+    if (this.isDatePicker) {
+      this.dom.dateWrap.classList.add("active");
+      this.dom.timeWrap.classList.remove("active");
+      this.dom.menu.time.innerText = this.lang.timeSelect;
+    } else {
+      this.dom.dateWrap.classList.remove("active");
+      this.dom.timeWrap.classList.add("active");
+      this.dom.menu.time.innerText = this.lang.return;
+      this._setTimePick();
     }
   }
-  addPlaceholder(startIndex, context = {}) {
-    const elementList = context.elementList || this.getElementList();
-    const startElement = elementList[startIndex];
-    const control = startElement.control;
-    if (!control.placeholder)
+  _setDatePick(year, month, day) {
+    var _a, _b, _c;
+    this.now = new Date(year, month, day);
+    (_a = this.pickDate) == null ? void 0 : _a.setFullYear(year);
+    (_b = this.pickDate) == null ? void 0 : _b.setMonth(month);
+    (_c = this.pickDate) == null ? void 0 : _c.setDate(day);
+    this._update();
+  }
+  _setTimePick(isIntoView = true) {
+    var _a, _b, _c;
+    const hour = ((_a = this.pickDate) == null ? void 0 : _a.getHours()) || 0;
+    const minute = ((_b = this.pickDate) == null ? void 0 : _b.getMinutes()) || 0;
+    const second = ((_c = this.pickDate) == null ? void 0 : _c.getSeconds()) || 0;
+    const { hour: hourDom, minute: minuteDom, second: secondDom } = this.dom.time;
+    const timeDomList = [hourDom, minuteDom, secondDom];
+    timeDomList.forEach((timeDom) => {
+      timeDom.querySelectorAll("li").forEach((li) => li.classList.remove("active"));
+    });
+    const pickList = [
+      [hourDom, hour],
+      [minuteDom, minute],
+      [secondDom, second]
+    ];
+    pickList.forEach(([dom, time]) => {
+      const pickDom = dom.querySelector(`[data-id='${time}']`);
+      pickDom.classList.add("active");
+      if (isIntoView) {
+        this._scrollIntoView(dom, pickDom);
+      }
+    });
+  }
+  _scrollIntoView(container, selected) {
+    if (!selected) {
+      container.scrollTop = 0;
       return;
-    const placeholderStrList = splitText(control.placeholder);
-    for (let p = 0; p < placeholderStrList.length; p++) {
-      const value = placeholderStrList[p];
-      const newElement = {
-        value,
-        controlId: startElement.controlId,
-        type: ElementType.CONTROL,
-        control: startElement.control,
-        controlComponent: ControlComponent.PLACEHOLDER,
-        color: this.controlOptions.placeholderColor
-      };
-      formatElementContext(elementList, [newElement], startIndex);
-      this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
     }
-  }
-  setValue(data2) {
-    if (!this.activeControl) {
-      throw new Error("active control is null");
+    const offsetParents = [];
+    let pointer = selected.offsetParent;
+    while (pointer && container !== pointer && container.contains(pointer)) {
+      offsetParents.push(pointer);
+      pointer = pointer.offsetParent;
     }
-    return this.activeControl.setValue(data2);
-  }
-  keydown(evt) {
-    if (!this.activeControl) {
-      throw new Error("active control is null");
+    const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
+    const bottom = top + selected.offsetHeight;
+    const viewRectTop = container.scrollTop;
+    const viewRectBottom = viewRectTop + container.clientHeight;
+    if (top < viewRectTop) {
+      container.scrollTop = top;
+    } else if (bottom > viewRectBottom) {
+      container.scrollTop = bottom - container.clientHeight;
     }
-    return this.activeControl.keydown(evt);
   }
-  cut() {
-    if (!this.activeControl) {
-      throw new Error("active control is null");
-    }
-    return this.activeControl.cut();
+  _preMonth() {
+    this.now.setMonth(this.now.getMonth() - 1);
+    this._update();
   }
-  getValueByConceptId(payload) {
-    const { conceptId } = payload;
-    const result = [];
-    const getValue = (elementList, zone2) => {
-      var _a;
-      let i = 0;
-      while (i < elementList.length) {
-        const element = elementList[i];
-        i++;
-        if (element.type === ElementType.TABLE) {
-          const trList = element.trList;
-          for (let r = 0; r < trList.length; r++) {
-            const tr = trList[r];
-            for (let d = 0; d < tr.tdList.length; d++) {
-              const td = tr.tdList[d];
-              getValue(td.value, zone2);
-            }
-          }
-        }
-        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
-          continue;
-        const { type, code, valueSets } = element.control;
-        let j = i;
-        let textControlValue = "";
-        while (j < elementList.length) {
-          const nextElement = elementList[j];
-          if (nextElement.controlId !== element.controlId)
-            break;
-          if (type === ControlType.TEXT && nextElement.controlComponent === ControlComponent.VALUE) {
-            textControlValue += nextElement.value;
-          }
-          j++;
-        }
-        if (type === ControlType.TEXT) {
-          result.push(__spreadProps(__spreadValues({}, element.control), {
-            zone: zone2,
-            value: textControlValue || null,
-            innerText: textControlValue || null
-          }));
-        } else if (type === ControlType.SELECT || type === ControlType.CHECKBOX || type === ControlType.RADIO) {
-          const innerText = code == null ? void 0 : code.split(",").map((selectCode) => {
-            var _a2;
-            return (_a2 = valueSets == null ? void 0 : valueSets.find((valueSet) => valueSet.code === selectCode)) == null ? void 0 : _a2.value;
-          }).filter(Boolean).join("");
-          result.push(__spreadProps(__spreadValues({}, element.control), {
-            zone: zone2,
-            value: code || null,
-            innerText: innerText || null
-          }));
-        }
-        i = j;
-      }
+  _nextMonth() {
+    this.now.setMonth(this.now.getMonth() + 1);
+    this._update();
+  }
+  _preYear() {
+    this.now.setFullYear(this.now.getFullYear() - 1);
+    this._update();
+  }
+  _nextYear() {
+    this.now.setFullYear(this.now.getFullYear() + 1);
+    this._update();
+  }
+  _now() {
+    this.pickDate = new Date();
+    this.dispose();
+  }
+  _toggleVisible(isVisible) {
+    if (isVisible) {
+      this.dom.container.classList.add("active");
+    } else {
+      this.dom.container.classList.remove("active");
+    }
+  }
+  _submit() {
+    var _a;
+    if (this.options.onSubmit && this.pickDate) {
+      const format = (_a = this.renderOptions) == null ? void 0 : _a.dateFormat;
+      const pickDateString = this.formatDate(this.pickDate, format);
+      this.options.onSubmit(pickDateString);
+    }
+  }
+  formatDate(date, format = "yyyy-MM-dd hh:mm:ss") {
+    let dateString = format;
+    const dateOption = {
+      "y+": date.getFullYear().toString(),
+      "M+": (date.getMonth() + 1).toString(),
+      "d+": date.getDate().toString(),
+      "h+": date.getHours().toString(),
+      "m+": date.getMinutes().toString(),
+      "s+": date.getSeconds().toString()
     };
-    const data2 = [
-      {
-        zone: EditorZone.HEADER,
-        elementList: this.draw.getHeaderElementList()
-      },
-      {
-        zone: EditorZone.MAIN,
-        elementList: this.draw.getOriginalMainElementList()
-      },
-      {
-        zone: EditorZone.FOOTER,
-        elementList: this.draw.getFooterElementList()
+    for (const k in dateOption) {
+      const reg = new RegExp("(" + k + ")").exec(format);
+      const key = k;
+      if (reg) {
+        dateString = dateString.replace(reg[1], reg[1].length === 1 ? dateOption[key] : dateOption[key].padStart(reg[1].length, "0"));
       }
-    ];
-    for (const { zone: zone2, elementList } of data2) {
-      getValue(elementList, zone2);
     }
-    return result;
+    return dateString;
   }
-  setValueByConceptId(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
-    let isExistSet = false;
-    const { conceptId, value } = payload;
-    const setValue = (elementList) => {
-      var _a;
-      let i = 0;
-      while (i < elementList.length) {
-        const element = elementList[i];
-        i++;
-        if (element.type === ElementType.TABLE) {
-          const trList = element.trList;
-          for (let r = 0; r < trList.length; r++) {
-            const tr = trList[r];
-            for (let d = 0; d < tr.tdList.length; d++) {
-              const td = tr.tdList[d];
-              setValue(td.value);
-            }
-          }
-        }
-        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
-          continue;
-        isExistSet = true;
-        const { type } = element.control;
-        let currentEndIndex = i;
-        while (currentEndIndex < elementList.length) {
-          const nextElement = elementList[currentEndIndex];
-          if (nextElement.controlId !== element.controlId)
-            break;
-          currentEndIndex++;
-        }
-        const fakeRange = {
-          startIndex: i - 1,
-          endIndex: currentEndIndex - 2
-        };
-        const controlContext = {
-          range: fakeRange,
-          elementList
-        };
-        const controlRule = {
-          isIgnoreDisabledRule: true
-        };
-        if (type === ControlType.TEXT) {
-          const formatValue = [{ value }];
-          formatElementList(formatValue, {
-            isHandleFirstElement: false,
-            editorOptions: this.options
-          });
-          const text = new TextControl(element, this);
-          if (value) {
-            text.setValue(formatValue, controlContext, controlRule);
-          } else {
-            text.clearValue(controlContext, controlRule);
-          }
-        } else if (type === ControlType.SELECT) {
-          const select = new SelectControl(element, this);
-          if (value) {
-            select.setSelect(value, controlContext, controlRule);
-          } else {
-            select.clearSelect(controlContext, controlRule);
-          }
-        } else if (type === ControlType.CHECKBOX) {
-          const checkbox = new CheckboxControl(element, this);
-          const codes = (value == null ? void 0 : value.split(",")) || [];
-          checkbox.setSelect(codes, controlContext, controlRule);
-        } else if (type === ControlType.RADIO) {
-          const radio = new RadioControl(element, this);
-          const codes = value ? [value] : [];
-          radio.setSelect(codes, controlContext, controlRule);
-        }
-        let newEndIndex = i;
-        while (newEndIndex < elementList.length) {
-          const nextElement = elementList[newEndIndex];
-          if (nextElement.controlId !== element.controlId)
-            break;
-          newEndIndex++;
-        }
-        i = newEndIndex;
+  render(option) {
+    this.renderOptions = option;
+    this.lang = this._getLang();
+    this._setLangChange();
+    this._setValue();
+    this._update();
+    this._setPosition();
+    this.isDatePicker = true;
+    this._toggleDateTimePicker();
+    this._toggleVisible(true);
+  }
+  dispose() {
+    this._toggleVisible(false);
+  }
+  destroy() {
+    this.dom.container.remove();
+  }
+}
+class DateControl {
+  constructor(element, control) {
+    __publicField(this, "draw");
+    __publicField(this, "element");
+    __publicField(this, "control");
+    __publicField(this, "isPopup");
+    __publicField(this, "datePicker");
+    const draw = control.getDraw();
+    this.draw = draw;
+    this.element = element;
+    this.control = control;
+    this.isPopup = false;
+    this.datePicker = null;
+  }
+  setElement(element) {
+    this.element = element;
+  }
+  getElement() {
+    return this.element;
+  }
+  getIsPopup() {
+    return this.isPopup;
+  }
+  getValueRange(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
       }
-    };
-    const data2 = [
-      this.draw.getHeaderElementList(),
-      this.draw.getOriginalMainElementList(),
-      this.draw.getFooterElementList()
-    ];
-    for (const elementList of data2) {
-      setValue(elementList);
+      preIndex--;
     }
-    if (isExistSet) {
-      this.draw.render({
-        isSetCursor: false
-      });
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      nextIndex++;
     }
+    if (preIndex === nextIndex)
+      return null;
+    return [preIndex, nextIndex - 1];
   }
-  setExtensionByConceptId(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
-    const { conceptId, extension } = payload;
-    const setExtension = (elementList) => {
-      var _a;
-      let i = 0;
-      while (i < elementList.length) {
-        const element = elementList[i];
-        i++;
-        if (element.type === ElementType.TABLE) {
-          const trList = element.trList;
-          for (let r = 0; r < trList.length; r++) {
-            const tr = trList[r];
-            for (let d = 0; d < tr.tdList.length; d++) {
-              const td = tr.tdList[d];
-              setExtension(td.value);
-            }
-          }
-        }
-        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
-          continue;
-        element.control.extension = extension;
-        let newEndIndex = i;
-        while (newEndIndex < elementList.length) {
-          const nextElement = elementList[newEndIndex];
-          if (nextElement.controlId !== element.controlId)
-            break;
-          newEndIndex++;
-        }
-        i = newEndIndex;
+  getValue(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const range = this.getValueRange(context);
+    if (!range)
+      return [];
+    const data2 = [];
+    const [startIndex, endIndex] = range;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const element = elementList[i];
+      if (element.controlComponent === ControlComponent.VALUE) {
+        data2.push(element);
       }
-    };
-    const data2 = [
-      this.draw.getHeaderElementList(),
-      this.draw.getOriginalMainElementList(),
-      this.draw.getFooterElementList()
-    ];
-    for (const elementList of data2) {
-      setExtension(elementList);
     }
+    return data2;
   }
-  setPropertiesByConceptId(payload) {
-    var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+  setValue(data2, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
+      return -1;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    this.control.shrinkBoundary(context);
+    const { startIndex, endIndex } = range;
+    const draw = this.control.getDraw();
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      this.control.removePlaceholder(startIndex, context);
+    }
+    const startElement = elementList[startIndex];
+    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, [
+      "control",
+      "controlId",
+      ...CONTROL_STYLE_ATTR
+    ]) : omitObject(startElement, ["type"]);
+    const start = range.startIndex + 1;
+    for (let i = 0; i < data2.length; i++) {
+      const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
+        controlComponent: ControlComponent.VALUE
+      });
+      formatElementContext(elementList, [newElement], startIndex);
+      draw.spliceElementList(elementList, start + i, 0, newElement);
+    }
+    return start + data2.length - 1;
+  }
+  clearSelect(context = {}, options = {}) {
+    const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options;
+    if (!isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
+      return -1;
+    }
+    const range = this.getValueRange(context);
+    if (!range)
+      return -1;
+    const [leftIndex, rightIndex] = range;
+    if (!~leftIndex || !~rightIndex)
+      return -1;
+    const elementList = context.elementList || this.control.getElementList();
+    const draw = this.control.getDraw();
+    draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
+    if (isAddPlaceholder) {
+      this.control.addPlaceholder(leftIndex, context);
+    }
+    return leftIndex;
+  }
+  setSelect(date, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
       return;
-    const { conceptId, properties } = payload;
-    let isExistUpdate = false;
-    const pageComponentData = {
-      header: this.draw.getHeaderElementList(),
-      main: this.draw.getOriginalMainElementList(),
-      footer: this.draw.getFooterElementList()
-    };
-    for (const key in pageComponentData) {
-      const elementList = pageComponentData[key];
-      let i = 0;
-      while (i < elementList.length) {
-        const element = elementList[i];
-        i++;
-        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
-          continue;
-        isExistUpdate = true;
-        element.control = __spreadProps(__spreadValues(__spreadValues({}, element.control), properties), {
-          value: element.control.value
-        });
-        let newEndIndex = i;
-        while (newEndIndex < elementList.length) {
-          const nextElement = elementList[newEndIndex];
-          if (nextElement.controlId !== element.controlId)
-            break;
-          newEndIndex++;
-        }
-        i = newEndIndex;
-      }
     }
-    if (!isExistUpdate)
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    const valueElement = this.getValue(context)[0];
+    const styleElement = valueElement ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR) : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR);
+    const prefixIndex = this.clearSelect(context, {
+      isAddPlaceholder: false
+    });
+    if (!~prefixIndex)
       return;
-    for (const key in pageComponentData) {
-      const pageComponentKey = key;
-      const elementList = zipElementList(pageComponentData[pageComponentKey]);
-      pageComponentData[pageComponentKey] = elementList;
-      formatElementList(elementList, {
-        editorOptions: this.options
+    const propertyElement = omitObject(elementList[prefixIndex], EDITOR_ELEMENT_STYLE_ATTR);
+    const start = prefixIndex + 1;
+    const draw = this.control.getDraw();
+    for (let i = 0; i < date.length; i++) {
+      const newElement = __spreadProps(__spreadValues(__spreadValues({}, styleElement), propertyElement), {
+        type: ElementType.TEXT,
+        value: date[i],
+        controlComponent: ControlComponent.VALUE
       });
+      formatElementContext(elementList, [newElement], prefixIndex);
+      draw.spliceElementList(elementList, start + i, 0, newElement);
+    }
+    if (!context.range) {
+      const newIndex = start + date.length - 1;
+      this.control.repaintControl({
+        curIndex: newIndex
+      });
+      this.destroy();
     }
-    this.draw.setEditorData(pageComponentData);
-    this.draw.render({
-      isSetCursor: false
-    });
   }
-  getList() {
-    const data2 = [
-      this.draw.getHeader().getElementList(),
-      this.draw.getOriginalMainElementList(),
-      this.draw.getFooter().getElementList()
-    ];
-    const controlElementList = [];
-    for (const elementList of data2) {
-      for (let e = 0; e < elementList.length; e++) {
-        const element = elementList[e];
-        if (element.controlId) {
-          controlElementList.push(element);
+  keydown(evt) {
+    if (this.control.getIsDisabledControl()) {
+      return null;
+    }
+    const elementList = this.control.getElementList();
+    const range = this.control.getRange();
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = range;
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    const draw = this.control.getDraw();
+    if (evt.key === KeyMap.Backspace) {
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+        const value = this.getValue();
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex);
+        }
+        return startIndex;
+      } else {
+        if (startElement.controlComponent === ControlComponent.PREFIX || endElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          draw.spliceElementList(elementList, startIndex, 1);
+          const value = this.getValue();
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex - 1);
+          }
+          return startIndex - 1;
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+        const value = this.getValue();
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex);
+        }
+        return startIndex;
+      } else {
+        const endNextElement = elementList[endIndex + 1];
+        if (startElement.controlComponent === ControlComponent.PREFIX && endNextElement.controlComponent === ControlComponent.PLACEHOLDER || endNextElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          draw.spliceElementList(elementList, startIndex + 1, 1);
+          const value = this.getValue();
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex);
+          }
+          return startIndex;
         }
       }
     }
-    return zipElementList(controlElementList);
-  }
-  recordBorderInfo(x, y, width, height) {
-    this.controlBorder.recordBorderInfo(x, y, width, height);
-  }
-  drawBorder(ctx) {
-    this.controlBorder.render(ctx);
-  }
-}
-class CheckboxParticle {
-  constructor(draw) {
-    __publicField(this, "draw");
-    __publicField(this, "options");
-    this.draw = draw;
-    this.options = draw.getOptions();
+    return endIndex;
   }
-  setSelect(element) {
-    const { checkbox } = element;
-    if (checkbox) {
-      checkbox.value = !checkbox.value;
-    } else {
-      element.checkbox = {
-        value: true
-      };
+  cut() {
+    if (this.control.getIsDisabledControl()) {
+      return -1;
     }
-    this.draw.render({
-      isCompute: false,
-      isSetCursor: false
-    });
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = this.control.getRange();
+    if (startIndex === endIndex) {
+      return startIndex;
+    }
+    const draw = this.control.getDraw();
+    const elementList = this.control.getElementList();
+    draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    const value = this.getValue();
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex);
+    }
+    return startIndex;
   }
-  render(ctx, element, x, y) {
-    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
-    const { metrics, checkbox } = element;
-    const left2 = Math.round(x + gap * scale);
-    const top = Math.round(y - metrics.height + lineWidth);
-    const width = metrics.width - gap * 2 * scale;
-    const height = metrics.height;
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(0.5, 0.5);
-    if (checkbox == null ? void 0 : checkbox.value) {
-      ctx.lineWidth = lineWidth;
-      ctx.strokeStyle = fillStyle;
-      ctx.rect(left2, top, width, height);
-      ctx.stroke();
-      ctx.beginPath();
-      ctx.fillStyle = fillStyle;
-      ctx.fillRect(left2, top, width, height);
-      ctx.beginPath();
-      ctx.strokeStyle = strokeStyle;
-      ctx.lineWidth = lineWidth * 2 * scale;
-      ctx.moveTo(left2 + 2 * scale, top + height / 2);
-      ctx.lineTo(left2 + width / 2, top + height - 3 * scale);
-      ctx.lineTo(left2 + width - 2 * scale, top + 3 * scale);
-      ctx.stroke();
+  awake() {
+    var _a, _b;
+    if (this.isPopup || this.control.getIsDisabledControl())
+      return;
+    const position = this.control.getPosition();
+    if (!position)
+      return;
+    const elementList = this.draw.getElementList();
+    const { startIndex } = this.control.getRange();
+    if (((_a = elementList[startIndex + 1]) == null ? void 0 : _a.controlId) !== this.element.controlId) {
+      return;
+    }
+    this.datePicker = new DatePicker(this.draw, {
+      onSubmit: this._setDate.bind(this)
+    });
+    const value = this.getValue().map((el) => el.value).join("") || "";
+    const dateFormat = (_b = this.element.control) == null ? void 0 : _b.dateFormat;
+    this.datePicker.render({
+      value,
+      position,
+      dateFormat
+    });
+    this.isPopup = true;
+  }
+  destroy() {
+    var _a;
+    if (!this.isPopup)
+      return;
+    (_a = this.datePicker) == null ? void 0 : _a.destroy();
+    this.isPopup = false;
+  }
+  _setDate(date) {
+    if (!date) {
+      this.clearSelect();
     } else {
-      ctx.lineWidth = lineWidth;
-      ctx.rect(left2, top, width, height);
-      ctx.stroke();
+      this.setSelect(date);
     }
-    ctx.closePath();
-    ctx.restore();
+    this.destroy();
   }
 }
-class RadioParticle {
+class Control {
   constructor(draw) {
+    __publicField(this, "controlBorder");
     __publicField(this, "draw");
+    __publicField(this, "range");
+    __publicField(this, "listener");
+    __publicField(this, "eventBus");
+    __publicField(this, "controlSearch");
     __publicField(this, "options");
+    __publicField(this, "controlOptions");
+    __publicField(this, "activeControl");
+    this.controlBorder = new ControlBorder(draw);
     this.draw = draw;
+    this.range = draw.getRange();
+    this.listener = draw.getListener();
+    this.eventBus = draw.getEventBus();
+    this.controlSearch = new ControlSearch(this);
     this.options = draw.getOptions();
+    this.controlOptions = this.options.control;
+    this.activeControl = null;
   }
-  setSelect(element) {
-    const { radio } = element;
-    if (radio) {
-      radio.value = !radio.value;
-    } else {
-      element.radio = {
-        value: true
-      };
+  setHighlightList(payload) {
+    this.controlSearch.setHighlightList(payload);
+  }
+  computeHighlightList() {
+    const highlightList = this.controlSearch.getHighlightList();
+    if (highlightList.length) {
+      this.controlSearch.computeHighlightList();
     }
-    this.draw.render({
-      isCompute: false,
-      isSetCursor: false
-    });
   }
-  render(ctx, element, x, y) {
-    const { radio: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
-    const { metrics, radio } = element;
-    const left2 = Math.round(x + gap * scale);
-    const top = Math.round(y - metrics.height + lineWidth);
-    const width = metrics.width - gap * 2 * scale;
-    const height = metrics.height;
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(0.5, 0.5);
-    ctx.strokeStyle = (radio == null ? void 0 : radio.value) ? fillStyle : strokeStyle;
-    ctx.lineWidth = lineWidth;
-    ctx.arc(left2 + width / 2, top + height / 2, width / 2, 0, Math.PI * 2);
-    ctx.stroke();
-    if (radio == null ? void 0 : radio.value) {
-      ctx.beginPath();
-      ctx.fillStyle = fillStyle;
-      ctx.arc(left2 + width / 2, top + height / 2, width / 3, 0, Math.PI * 2);
-      ctx.fill();
+  renderHighlightList(ctx, pageNo) {
+    const highlightMatchResult = this.controlSearch.getHighlightMatchResult();
+    if (highlightMatchResult.length) {
+      this.controlSearch.renderHighlightList(ctx, pageNo);
     }
-    ctx.closePath();
-    ctx.restore();
   }
-}
-const encodedJs$2 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBmOyhmdW5jdGlvbih0KXt0LlRFWFQ9InRleHQiLHQuVEFCTEU9InRhYmxlIix0LkhZUEVSTElOSz0iaHlwZXJsaW5rIix0LkNPTlRST0w9ImNvbnRyb2wifSkoZnx8KGY9e30pKTt2YXIgcDsoZnVuY3Rpb24odCl7dC5WQUxVRT0idmFsdWUifSkocHx8KHA9e30pKTtjb25zdCBoPSJcdTIwMEIiLGc9YApgO2Z1bmN0aW9uIGEodCl7bGV0IGw9IiIsbj0wO2Zvcig7bjx0Lmxlbmd0aDspe2NvbnN0IG89dFtuXTtpZihvLnR5cGU9PT1mLlRBQkxFKXtpZihvLnRyTGlzdClmb3IobGV0IHI9MDtyPG8udHJMaXN0Lmxlbmd0aDtyKyspe2NvbnN0IHM9by50ckxpc3Rbcl07Zm9yKGxldCBlPTA7ZTxzLnRkTGlzdC5sZW5ndGg7ZSsrKXtjb25zdCBpPXMudGRMaXN0W2VdO2wrPWEoaS52YWx1ZSl9fX1lbHNlIGlmKG8udHlwZT09PWYuSFlQRVJMSU5LKXtjb25zdCByPW8uaHlwZXJsaW5rSWQscz1bXTtmb3IoO248dC5sZW5ndGg7KXtjb25zdCBlPXRbbl07aWYociE9PWUuaHlwZXJsaW5rSWQpe24tLTticmVha31kZWxldGUgZS50eXBlLHMucHVzaChlKSxuKyt9bCs9YShzKX1lbHNlIGlmKG8uY29udHJvbElkKXtjb25zdCByPW8uY29udHJvbElkLHM9W107Zm9yKDtuPHQubGVuZ3RoOyl7Y29uc3QgZT10W25dO2lmKHIhPT1lLmNvbnRyb2xJZCl7bi0tO2JyZWFrfWUuY29udHJvbENvbXBvbmVudD09PXAuVkFMVUUmJihkZWxldGUgZS5jb250cm9sSWQscy5wdXNoKGUpKSxuKyt9bCs9YShzKX1lbHNlKCFvLnR5cGV8fG8udHlwZT09PWYuVEVYVCkmJihsKz1vLnZhbHVlKTtuKyt9cmV0dXJuIGx9ZnVuY3Rpb24gZCh0KXtjb25zdCBsPVtdLG49L1swLTldLyxvPS9bQS1aYS16XS8scj0vXHMvO2xldCBzPSExLGU9ITEsaT0iIjtmdW5jdGlvbiB1KCl7aSYmKGwucHVzaChpKSxpPSIiKX1mb3IoY29uc3QgYyBvZiB0KW8udGVzdChjKT8oc3x8dSgpLGkrPWMscz0hMCxlPSExKTpuLnRlc3QoYyk/KGV8fHUoKSxpKz1jLHM9ITEsZT0hMCk6KHUoKSxzPSExLGU9ITEsci50ZXN0KGMpfHxsLnB1c2goYykpO3JldHVybiB1KCksbH1vbm1lc3NhZ2U9dD0+e2NvbnN0IGw9dC5kYXRhLG89YShsKS5yZXBsYWNlKG5ldyBSZWdFeHAoYF4ke2h9YCksIiIpLnJlcGxhY2UobmV3IFJlZ0V4cChoLCJnIiksZykscj1kKG8pO3Bvc3RNZXNzYWdlKHIubGVuZ3RoKX19KSgpO30pKCk7Cg==";
-const blob$2 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$2)], { type: "text/javascript;charset=utf-8" });
-function WorkerWrapper$2() {
-  const objURL = blob$2 && (window.URL || window.webkitURL).createObjectURL(blob$2);
-  try {
-    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs$2, { type: "module" });
-  } finally {
-    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  getDraw() {
+    return this.draw;
   }
-}
-const encodedJs$1 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBhOyhmdW5jdGlvbih0KXt0LlRFWFQ9InRleHQiLHQuSU1BR0U9ImltYWdlIix0LlRBQkxFPSJ0YWJsZSIsdC5IWVBFUkxJTks9Imh5cGVybGluayIsdC5TVVBFUlNDUklQVD0ic3VwZXJzY3JpcHQiLHQuU1VCU0NSSVBUPSJzdWJzY3JpcHQiLHQuU0VQQVJBVE9SPSJzZXBhcmF0b3IiLHQuUEFHRV9CUkVBSz0icGFnZUJyZWFrIix0LkNPTlRST0w9ImNvbnRyb2wiLHQuQ0hFQ0tCT1g9ImNoZWNrYm94Iix0LlJBRElPPSJyYWRpbyIsdC5MQVRFWD0ibGF0ZXgiLHQuVEFCPSJ0YWIiLHQuREFURT0iZGF0ZSIsdC5CTE9DSz0iYmxvY2siLHQuVElUTEU9InRpdGxlIix0LkxJU1Q9Imxpc3QifSkoYXx8KGE9e30pKTt2YXIgYzsoZnVuY3Rpb24odCl7dC5GSVJTVD0iZmlyc3QiLHQuU0VDT05EPSJzZWNvbmQiLHQuVEhJUkQ9InRoaXJkIix0LkZPVVJUSD0iZm91cnRoIix0LkZJRlRIPSJmaWZ0aCIsdC5TSVhUSD0ic2l4dGgifSkoY3x8KGM9e30pKTtjb25zdCBJPXtbYy5GSVJTVF06MSxbYy5TRUNPTkRdOjIsW2MuVEhJUkRdOjMsW2MuRk9VUlRIXTo0LFtjLkZJRlRIXTo1LFtjLlNJWFRIXTo2fSx2PVthLlRFWFQsYS5IWVBFUkxJTkssYS5TVUJTQ1JJUFQsYS5TVVBFUlNDUklQVCxhLkNPTlRST0wsYS5EQVRFXSxoPSJcdTIwMEIiO2Z1bmN0aW9uIFQodCl7cmV0dXJuIXQudHlwZXx8di5pbmNsdWRlcyh0LnR5cGUpfWZ1bmN0aW9uIGYodCl7Y29uc3QgaT1bXTtsZXQgZT0wO2Zvcig7ZTx0Lmxlbmd0aDspe2NvbnN0IHM9dFtlXTtpZihzLnRpdGxlSWQpe2NvbnN0IG89cy50aXRsZUlkLGw9cy5sZXZlbCxuPXt0eXBlOmEuVElUTEUsdmFsdWU6IiIsbGV2ZWw6bCx0aXRsZUlkOm99LHI9W107Zm9yKDtlPHQubGVuZ3RoOyl7Y29uc3QgdT10W2VdO2lmKG8hPT11LnRpdGxlSWQpe2UtLTticmVha31yLnB1c2godSksZSsrfW4udmFsdWU9ci5maWx0ZXIodT0+VCh1KSkubWFwKHU9PnUudmFsdWUpLmpvaW4oIiIpLnJlcGxhY2UobmV3IFJlZ0V4cChoLCJnIiksIiIpLGkucHVzaChuKX1lKyt9aWYoIWkubGVuZ3RoKXJldHVybiBudWxsO2NvbnN0IGc9KHMsbyk9Pntjb25zdCBsPW8uc3ViQ2F0YWxvZ1tvLnN1YkNhdGFsb2cubGVuZ3RoLTFdLG49SVtsPT1udWxsP3ZvaWQgMDpsLmxldmVsXSxyPUlbcy5sZXZlbF07bCYmcj5uP2cocyxsKTpvLnN1YkNhdGFsb2cucHVzaCh7aWQ6cy50aXRsZUlkLG5hbWU6cy52YWx1ZSxsZXZlbDpzLmxldmVsLHN1YkNhdGFsb2c6W119KX0sUj1bXTtmb3IobGV0IHM9MDtzPGkubGVuZ3RoO3MrKyl7Y29uc3Qgbz1pW3NdLGw9UltSLmxlbmd0aC0xXSxuPUlbbD09bnVsbD92b2lkIDA6bC5sZXZlbF0scj1JW28ubGV2ZWxdO2wmJnI+bj9nKG8sbCk6Ui5wdXNoKHtpZDpvLnRpdGxlSWQsbmFtZTpvLnZhbHVlLGxldmVsOm8ubGV2ZWwsc3ViQ2F0YWxvZzpbXX0pfXJldHVybiBSfW9ubWVzc2FnZT10PT57Y29uc3QgaT10LmRhdGEsZT1mKGkpO3Bvc3RNZXNzYWdlKGUpfX0pKCk7fSkoKTsK";
-const blob$1 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$1)], { type: "text/javascript;charset=utf-8" });
-function WorkerWrapper$1() {
-  const objURL = blob$1 && (window.URL || window.webkitURL).createObjectURL(blob$1);
-  try {
-    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs$1, { type: "module" });
-  } finally {
-    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  filterAssistElement(elementList) {
+    return elementList.filter((element) => {
+      var _a;
+      if (element.type === ElementType.TABLE) {
+        const trList = element.trList;
+        for (let r = 0; r < trList.length; r++) {
+          const tr = trList[r];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            td.value = this.filterAssistElement(td.value);
+          }
+        }
+      }
+      if (!element.controlId)
+        return true;
+      if ((_a = element.control) == null ? void 0 : _a.minWidth) {
+        if (element.controlComponent === ControlComponent.PREFIX || element.controlComponent === ControlComponent.POSTFIX) {
+          element.value = "";
+          return true;
+        }
+      }
+      return element.controlComponent !== ControlComponent.PREFIX && element.controlComponent !== ControlComponent.POSTFIX && element.controlComponent !== ControlComponent.PLACEHOLDER;
+    });
   }
-}
-const encodedJs = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBuOyhmdW5jdGlvbihvKXtvLlRBQkxFPSJ0YWJsZSJ9KShufHwobj17fSkpO2Z1bmN0aW9uIGMobyl7Y29uc3QgdD1bXTtmb3IoY29uc3QgcyBvZiBvKXtpZihzLnR5cGU9PT1uLlRBQkxFKXtjb25zdCBlPXMudHJMaXN0O2ZvcihsZXQgcj0wO3I8ZS5sZW5ndGg7cisrKXtjb25zdCBpPWVbcl07Zm9yKGxldCB1PTA7dTxpLnRkTGlzdC5sZW5ndGg7dSsrKXtjb25zdCBkPWkudGRMaXN0W3VdO3QucHVzaCguLi5jKGQudmFsdWUpKX19fWlmKCEhcy5ncm91cElkcylmb3IoY29uc3QgZSBvZiBzLmdyb3VwSWRzKXQuaW5jbHVkZXMoZSl8fHQucHVzaChlKX1yZXR1cm4gdH1vbm1lc3NhZ2U9bz0+e2NvbnN0IHQ9by5kYXRhLHM9Yyh0KTtwb3N0TWVzc2FnZShzKX19KSgpO30pKCk7Cg==";
-const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
-function WorkerWrapper() {
-  const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
-  try {
-    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs, { type: "module" });
-  } finally {
-    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  getIsRangeCanCaptureEvent() {
+    if (!this.activeControl)
+      return false;
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    if (startIndex === endIndex && startElement.controlComponent === ControlComponent.POSTFIX) {
+      return true;
+    }
+    const endElement = elementList[endIndex];
+    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
+      return true;
+    }
+    return false;
   }
-}
-class WorkerManager {
-  constructor(draw) {
-    __publicField(this, "draw");
-    __publicField(this, "wordCountWorker");
-    __publicField(this, "catalogWorker");
-    __publicField(this, "groupWorker");
-    this.draw = draw;
-    this.wordCountWorker = new WorkerWrapper$2();
-    this.catalogWorker = new WorkerWrapper$1();
-    this.groupWorker = new WorkerWrapper();
+  getIsRangeInPostfix() {
+    if (!this.activeControl)
+      return false;
+    const { startIndex, endIndex } = this.getRange();
+    if (startIndex !== endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const element = elementList[startIndex];
+    return element.controlComponent === ControlComponent.POSTFIX;
   }
-  getWordCount() {
-    return new Promise((resolve, reject) => {
-      this.wordCountWorker.onmessage = (evt) => {
-        resolve(evt.data);
-      };
-      this.wordCountWorker.onerror = (evt) => {
-        reject(evt);
-      };
-      const elementList = this.draw.getOriginalMainElementList();
-      this.wordCountWorker.postMessage(elementList);
-    });
+  getIsRangeWithinControl() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
+      return true;
+    }
+    return false;
   }
-  getCatalog() {
-    return new Promise((resolve, reject) => {
-      this.catalogWorker.onmessage = (evt) => {
-        resolve(evt.data);
-      };
-      this.catalogWorker.onerror = (evt) => {
-        reject(evt);
-      };
-      const elementList = this.draw.getOriginalMainElementList();
-      this.catalogWorker.postMessage(elementList);
-    });
+  getIsDisabledControl() {
+    var _a, _b;
+    return !!((_b = (_a = this.activeControl) == null ? void 0 : _a.getElement().control) == null ? void 0 : _b.disabled);
   }
-  getGroupIds() {
-    return new Promise((resolve, reject) => {
-      this.groupWorker.onmessage = (evt) => {
-        resolve(evt.data);
-      };
-      this.groupWorker.onerror = (evt) => {
-        reject(evt);
-      };
-      const elementList = this.draw.getOriginalMainElementList();
-      this.groupWorker.postMessage(elementList);
-    });
+  getContainer() {
+    return this.draw.getContainer();
   }
-}
-class Previewer {
-  constructor(draw) {
-    __publicField(this, "container");
-    __publicField(this, "canvas");
-    __publicField(this, "draw");
-    __publicField(this, "options");
-    __publicField(this, "curElement");
-    __publicField(this, "curElementSrc");
-    __publicField(this, "previewerDrawOption");
-    __publicField(this, "curPosition");
-    __publicField(this, "resizerSelection");
-    __publicField(this, "resizerHandleList");
-    __publicField(this, "resizerImageContainer");
-    __publicField(this, "resizerImage");
-    __publicField(this, "resizerSize");
-    __publicField(this, "width");
-    __publicField(this, "height");
-    __publicField(this, "mousedownX");
-    __publicField(this, "mousedownY");
-    __publicField(this, "curHandleIndex");
-    __publicField(this, "previewerContainer");
-    __publicField(this, "previewerImage");
-    __publicField(this, "_keydown", () => {
-      if (this.resizerSelection.style.display === "block") {
-        this.clearResizer();
-        document.removeEventListener("keydown", this._keydown);
-      }
-    });
-    this.container = draw.getContainer();
-    this.canvas = draw.getPage();
-    this.draw = draw;
-    this.options = draw.getOptions();
-    this.curElement = null;
-    this.curElementSrc = "";
-    this.previewerDrawOption = {};
-    this.curPosition = null;
-    const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage, resizerSize } = this._createResizerDom();
-    this.resizerSelection = resizerSelection;
-    this.resizerHandleList = resizerHandleList;
-    this.resizerImageContainer = resizerImageContainer;
-    this.resizerImage = resizerImage;
-    this.resizerSize = resizerSize;
-    this.width = 0;
-    this.height = 0;
-    this.mousedownX = 0;
-    this.mousedownY = 0;
-    this.curHandleIndex = 0;
-    this.previewerContainer = null;
-    this.previewerImage = null;
+  getElementList() {
+    return this.draw.getElementList();
   }
-  _getElementPosition(element, position = null) {
-    let x = 0;
-    let y = 0;
+  getPosition() {
+    const positionList = this.draw.getPosition().getPositionList();
+    const { endIndex } = this.range.getRange();
+    return positionList[endIndex] || null;
+  }
+  getPreY() {
+    var _a, _b;
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
-    const preY = this.draw.getPageNo() * (height + pageGap);
-    if (element.imgFloatPosition) {
-      x = element.imgFloatPosition.x;
-      y = element.imgFloatPosition.y + preY;
-    } else if (position) {
-      const { coordinate: { leftTop: [left2, top] }, ascent } = position;
-      x = left2;
-      y = top + preY + ascent;
-    }
-    return { x, y };
+    const pageNo = (_b = (_a = this.getPosition()) == null ? void 0 : _a.pageNo) != null ? _b : this.draw.getPageNo();
+    return pageNo * (height + pageGap);
   }
-  _createResizerDom() {
-    const resizerSelection = document.createElement("div");
-    resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`);
-    resizerSelection.style.display = "none";
-    resizerSelection.style.borderColor = this.options.resizerColor;
-    const resizerHandleList = [];
-    for (let i = 0; i < 8; i++) {
-      const handleDom = document.createElement("div");
-      handleDom.style.background = this.options.resizerColor;
-      handleDom.classList.add(`resizer-handle`);
-      handleDom.classList.add(`handle-${i}`);
-      handleDom.setAttribute("data-index", String(i));
-      handleDom.onmousedown = this._mousedown.bind(this);
-      resizerSelection.append(handleDom);
-      resizerHandleList.push(handleDom);
-    }
-    this.container.append(resizerSelection);
-    const resizerSizeView = document.createElement("div");
-    resizerSizeView.classList.add(`${EDITOR_PREFIX}-resizer-size-view`);
-    const resizerSize = document.createElement("span");
-    resizerSizeView.append(resizerSize);
-    resizerSelection.append(resizerSizeView);
-    const resizerImageContainer = document.createElement("div");
-    resizerImageContainer.classList.add(`${EDITOR_PREFIX}-resizer-image`);
-    resizerImageContainer.style.display = "none";
-    const resizerImage = document.createElement("img");
-    resizerImageContainer.append(resizerImage);
-    this.container.append(resizerImageContainer);
-    return {
-      resizerSelection,
-      resizerHandleList,
-      resizerImageContainer,
-      resizerImage,
-      resizerSize
-    };
+  getRange() {
+    return this.range.getRange();
   }
-  _mousedown(evt) {
-    this.canvas = this.draw.getPage();
-    if (!this.curElement)
+  shrinkBoundary(context = {}) {
+    this.range.shrinkBoundary(context);
+  }
+  getActiveControl() {
+    return this.activeControl;
+  }
+  initControl() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
       return;
-    const { scale } = this.options;
-    this.mousedownX = evt.x;
-    this.mousedownY = evt.y;
-    const target = evt.target;
-    this.curHandleIndex = Number(target.dataset.index);
-    const cursor = window.getComputedStyle(target).cursor;
-    document.body.style.cursor = cursor;
-    this.canvas.style.cursor = cursor;
-    this.resizerImage.src = this.curElementSrc;
-    this.resizerImageContainer.style.display = "block";
-    const { x: resizerLeft, y: resizerTop } = this._getElementPosition(this.curElement, this.curPosition);
-    this.resizerImageContainer.style.left = `${resizerLeft}px`;
-    this.resizerImageContainer.style.top = `${resizerTop}px`;
-    this.resizerImage.style.width = `${this.curElement.width * scale}px`;
-    this.resizerImage.style.height = `${this.curElement.height * scale}px`;
-    const mousemoveFn = this._mousemove.bind(this);
-    document.addEventListener("mousemove", mousemoveFn);
-    document.addEventListener("mouseup", () => {
+    const elementList = this.getElementList();
+    const range = this.getRange();
+    const element = elementList[range.startIndex];
+    if (this.activeControl) {
+      if (this.activeControl instanceof SelectControl || this.activeControl instanceof DateControl) {
+        if (element.controlComponent === ControlComponent.POSTFIX) {
+          this.activeControl.destroy();
+        } else {
+          this.activeControl.awake();
+        }
+      }
+      const controlElement = this.activeControl.getElement();
+      if (element.controlId === controlElement.controlId)
+        return;
+    }
+    this.destroyControl();
+    const control = element.control;
+    if (control.type === ControlType.TEXT) {
+      this.activeControl = new TextControl(element, this);
+    } else if (control.type === ControlType.SELECT) {
+      const selectControl = new SelectControl(element, this);
+      this.activeControl = selectControl;
+      selectControl.awake();
+    } else if (control.type === ControlType.CHECKBOX) {
+      this.activeControl = new CheckboxControl(element, this);
+    } else if (control.type === ControlType.RADIO) {
+      this.activeControl = new RadioControl(element, this);
+    } else if (control.type === ControlType.DATE) {
+      const dateControl = new DateControl(element, this);
+      this.activeControl = dateControl;
+      dateControl.awake();
+    }
+    nextTick(() => {
       var _a;
-      if (this.curElement) {
-        this.curElement.width = this.width;
-        this.curElement.height = this.height;
-        this.draw.render({
-          isSetCursor: true,
-          curIndex: (_a = this.curPosition) == null ? void 0 : _a.index
-        });
+      const controlChangeListener = this.listener.controlChange;
+      const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
+      if (!controlChangeListener && !isSubscribeControlChange)
+        return;
+      let payload;
+      const value = (_a = this.activeControl) == null ? void 0 : _a.getValue();
+      if (value && value.length) {
+        payload = zipElementList(value)[0].control;
+      } else {
+        payload = pickElementAttr(deepClone(element)).control;
+      }
+      if (controlChangeListener) {
+        controlChangeListener(payload);
+      }
+      if (isSubscribeControlChange) {
+        this.eventBus.emit("controlChange", payload);
       }
-      this.resizerImageContainer.style.display = "none";
-      document.removeEventListener("mousemove", mousemoveFn);
-      document.body.style.cursor = "";
-      this.canvas.style.cursor = "text";
-    }, {
-      once: true
     });
-    evt.preventDefault();
   }
-  _mousemove(evt) {
-    if (!this.curElement)
-      return;
-    const { scale } = this.options;
-    let dx = 0;
-    let dy = 0;
-    switch (this.curHandleIndex) {
-      case 0:
-        {
-          const offsetX = this.mousedownX - evt.x;
-          const offsetY = this.mousedownY - evt.y;
-          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
-          dy = this.curElement.height * dx / this.curElement.width;
-        }
-        break;
-      case 1:
-        dy = this.mousedownY - evt.y;
-        break;
-      case 2:
-        {
-          const offsetX = evt.x - this.mousedownX;
-          const offsetY = this.mousedownY - evt.y;
-          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
-          dy = this.curElement.height * dx / this.curElement.width;
-        }
-        break;
-      case 4:
-        {
-          const offsetX = evt.x - this.mousedownX;
-          const offsetY = evt.y - this.mousedownY;
-          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
-          dy = this.curElement.height * dx / this.curElement.width;
+  destroyControl() {
+    if (this.activeControl) {
+      if (this.activeControl instanceof SelectControl || this.activeControl instanceof DateControl) {
+        this.activeControl.destroy();
+      }
+      this.activeControl = null;
+      nextTick(() => {
+        const controlChangeListener = this.listener.controlChange;
+        const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
+        if (!controlChangeListener && !isSubscribeControlChange)
+          return;
+        if (controlChangeListener) {
+          controlChangeListener(null);
         }
-        break;
-      case 3:
-        dx = evt.x - this.mousedownX;
-        break;
-      case 5:
-        dy = evt.y - this.mousedownY;
-        break;
-      case 6:
-        {
-          const offsetX = this.mousedownX - evt.x;
-          const offsetY = evt.y - this.mousedownY;
-          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
-          dy = this.curElement.height * dx / this.curElement.width;
+        if (isSubscribeControlChange) {
+          this.eventBus.emit("controlChange", null);
         }
-        break;
-      case 7:
-        dx = this.mousedownX - evt.x;
-        break;
+      });
     }
-    const dw = this.curElement.width + dx / scale;
-    const dh = this.curElement.height + dy / scale;
-    if (dw <= 0 || dh <= 0)
-      return;
-    this.width = dw;
-    this.height = dh;
-    const elementWidth = dw * scale;
-    const elementHeight = dh * scale;
-    this.resizerImage.style.width = `${elementWidth}px`;
-    this.resizerImage.style.height = `${elementHeight}px`;
-    this._updateResizerRect(elementWidth, elementHeight);
-    this._updateResizerSizeView(elementWidth, elementHeight);
-    evt.preventDefault();
   }
-  _drawPreviewer() {
-    const previewerContainer = document.createElement("div");
-    previewerContainer.classList.add(`${EDITOR_PREFIX}-image-previewer`);
-    const closeBtn = document.createElement("i");
-    closeBtn.classList.add("image-close");
-    closeBtn.onclick = () => {
-      this._clearPreviewer();
-    };
-    previewerContainer.append(closeBtn);
-    const imgContainer = document.createElement("div");
-    imgContainer.classList.add(`${EDITOR_PREFIX}-image-container`);
-    const img = document.createElement("img");
-    img.src = this.curElementSrc;
-    img.draggable = false;
-    imgContainer.append(img);
-    this.previewerImage = img;
-    previewerContainer.append(imgContainer);
-    let x = 0;
-    let y = 0;
-    let scaleSize = 1;
-    let rotateSize = 0;
-    const menuContainer = document.createElement("div");
-    menuContainer.classList.add(`${EDITOR_PREFIX}-image-menu`);
-    const zoomIn = document.createElement("i");
-    zoomIn.classList.add("zoom-in");
-    zoomIn.onclick = () => {
-      scaleSize += 0.1;
-      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
-    };
-    menuContainer.append(zoomIn);
-    const zoomOut = document.createElement("i");
-    zoomOut.onclick = () => {
-      if (scaleSize - 0.1 <= 0.1)
-        return;
-      scaleSize -= 0.1;
-      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
-    };
-    zoomOut.classList.add("zoom-out");
-    menuContainer.append(zoomOut);
-    const rotate = document.createElement("i");
-    rotate.classList.add("rotate");
-    rotate.onclick = () => {
-      rotateSize += 1;
-      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
-    };
-    menuContainer.append(rotate);
-    const originalSize = document.createElement("i");
-    originalSize.classList.add("original-size");
-    originalSize.onclick = () => {
-      x = 0;
-      y = 0;
-      scaleSize = 1;
-      rotateSize = 0;
-      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
-    };
-    menuContainer.append(originalSize);
-    const imageDownload = document.createElement("i");
-    imageDownload.classList.add("image-download");
-    imageDownload.onclick = () => {
-      var _a;
-      const { mime } = this.previewerDrawOption;
-      downloadFile(img.src, `${(_a = this.curElement) == null ? void 0 : _a.id}.${mime || "png"}`);
-    };
-    menuContainer.append(imageDownload);
-    previewerContainer.append(menuContainer);
-    this.previewerContainer = previewerContainer;
-    document.body.append(previewerContainer);
-    let startX = 0;
-    let startY = 0;
-    let isAllowDrag = false;
-    img.onmousedown = (evt) => {
-      isAllowDrag = true;
-      startX = evt.x;
-      startY = evt.y;
-      previewerContainer.style.cursor = "move";
-    };
-    previewerContainer.onmousemove = (evt) => {
-      if (!isAllowDrag)
-        return;
-      x += evt.x - startX;
-      y += evt.y - startY;
-      startX = evt.x;
-      startY = evt.y;
-      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
-    };
-    previewerContainer.onmouseup = () => {
-      isAllowDrag = false;
-      previewerContainer.style.cursor = "auto";
-    };
-    previewerContainer.onwheel = (evt) => {
-      evt.preventDefault();
-      if (evt.deltaY < 0) {
-        scaleSize += 0.1;
-      } else {
-        if (scaleSize - 0.1 <= 0.1)
-          return;
-        scaleSize -= 0.1;
-      }
-      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
-    };
+  repaintControl(options = {}) {
+    const { curIndex, isCompute = true, isSubmitHistory = true } = options;
+    if (curIndex === void 0) {
+      this.range.clearRange();
+      this.draw.render({
+        isCompute,
+        isSubmitHistory,
+        isSetCursor: false
+      });
+    } else {
+      this.range.setRange(curIndex, curIndex);
+      this.draw.render({
+        curIndex,
+        isCompute,
+        isSubmitHistory
+      });
+    }
   }
-  _setPreviewerTransform(scale, rotate, x, y) {
-    if (!this.previewerImage)
+  reAwakeControl() {
+    if (!this.activeControl)
       return;
-    this.previewerImage.style.left = `${x}px`;
-    this.previewerImage.style.top = `${y}px`;
-    this.previewerImage.style.transform = `scale(${scale}) rotate(${rotate * 90}deg)`;
-  }
-  _clearPreviewer() {
-    var _a;
-    (_a = this.previewerContainer) == null ? void 0 : _a.remove();
-    this.previewerContainer = null;
-    document.body.style.overflow = "auto";
-  }
-  _updateResizerRect(width, height) {
-    const handleSize = this.options.resizerSize;
-    this.resizerSelection.style.width = `${width}px`;
-    this.resizerSelection.style.height = `${height}px`;
-    for (let i = 0; i < 8; i++) {
-      const left2 = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
-      const top = i === 0 || i === 1 || i === 2 ? -handleSize : i === 3 || i === 7 ? height / 2 - handleSize : height - handleSize;
-      this.resizerHandleList[i].style.left = `${left2}px`;
-      this.resizerHandleList[i].style.top = `${top}px`;
+    const elementList = this.getElementList();
+    const range = this.getRange();
+    const element = elementList[range.startIndex];
+    this.activeControl.setElement(element);
+    if ((this.activeControl instanceof DateControl || this.activeControl instanceof SelectControl) && this.activeControl.getIsPopup()) {
+      this.activeControl.destroy();
+      this.activeControl.awake();
     }
   }
-  _updateResizerSizeView(width, height) {
-    this.resizerSize.innerText = `${Math.round(width)} \xD7 ${Math.round(height)}`;
+  moveCursor(position) {
+    const { index: index2, trIndex, tdIndex, tdValueIndex } = position;
+    let elementList = this.draw.getOriginalElementList();
+    let element;
+    const newIndex = position.isTable ? tdValueIndex : index2;
+    if (position.isTable) {
+      elementList = elementList[index2].trList[trIndex].tdList[tdIndex].value;
+      element = elementList[tdValueIndex];
+    } else {
+      element = elementList[index2];
+    }
+    if (element.controlComponent === ControlComponent.VALUE) {
+      return {
+        newIndex,
+        newElement: element
+      };
+    } else if (element.controlComponent === ControlComponent.POSTFIX) {
+      let startIndex = newIndex + 1;
+      while (startIndex < elementList.length) {
+        const nextElement = elementList[startIndex];
+        if (nextElement.controlId !== element.controlId) {
+          return {
+            newIndex: startIndex - 1,
+            newElement: elementList[startIndex - 1]
+          };
+        }
+        startIndex++;
+      }
+    } else if (element.controlComponent === ControlComponent.PREFIX) {
+      let startIndex = newIndex + 1;
+      while (startIndex < elementList.length) {
+        const nextElement = elementList[startIndex];
+        if (nextElement.controlId !== element.controlId || nextElement.controlComponent !== ControlComponent.PREFIX) {
+          return {
+            newIndex: startIndex - 1,
+            newElement: elementList[startIndex - 1]
+          };
+        }
+        startIndex++;
+      }
+    } else if (element.controlComponent === ControlComponent.PLACEHOLDER) {
+      let startIndex = newIndex - 1;
+      while (startIndex > 0) {
+        const preElement = elementList[startIndex];
+        if (preElement.controlId !== element.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+          return {
+            newIndex: startIndex,
+            newElement: elementList[startIndex]
+          };
+        }
+        startIndex--;
+      }
+    }
+    return {
+      newIndex,
+      newElement: element
+    };
   }
-  render() {
-    this._drawPreviewer();
-    document.body.style.overflow = "hidden";
+  removeControl(startIndex, context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const startElement = elementList[startIndex];
+    const { deletable = true } = startElement.control;
+    if (!deletable)
+      return null;
+    let leftIndex = -1;
+    let rightIndex = -1;
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId) {
+        leftIndex = preIndex;
+        break;
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId) {
+        rightIndex = nextIndex - 1;
+        break;
+      }
+      nextIndex++;
+    }
+    if (nextIndex === elementList.length) {
+      rightIndex = nextIndex - 1;
+    }
+    if (!~leftIndex && !~rightIndex)
+      return startIndex;
+    leftIndex = ~leftIndex ? leftIndex : 0;
+    this.draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
+    return leftIndex;
   }
-  drawResizer(element, position = null, options = {}) {
-    this.previewerDrawOption = options;
-    this.curElementSrc = element[options.srcKey || "value"] || "";
-    this.updateResizer(element, position);
-    document.addEventListener("keydown", this._keydown);
+  removePlaceholder(startIndex, context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const startElement = elementList[startIndex];
+    const nextElement = elementList[startIndex + 1];
+    if (startElement.controlComponent === ControlComponent.PLACEHOLDER || nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
+      let isHasSubmitHistory = false;
+      let index2 = startIndex;
+      while (index2 < elementList.length) {
+        const curElement = elementList[index2];
+        if (curElement.controlId !== startElement.controlId)
+          break;
+        if (curElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          if (!isHasSubmitHistory) {
+            isHasSubmitHistory = true;
+            this.draw.getHistoryManager().popUndo();
+            this.draw.submitHistory(startIndex);
+          }
+          elementList.splice(index2, 1);
+        } else {
+          index2++;
+        }
+      }
+    }
   }
-  updateResizer(element, position = null) {
-    const { scale } = this.options;
-    const elementWidth = element.width * scale;
-    const elementHeight = element.height * scale;
-    this._updateResizerSizeView(elementWidth, elementHeight);
-    const { x: resizerLeft, y: resizerTop } = this._getElementPosition(element, position);
-    this.resizerSelection.style.left = `${resizerLeft}px`;
-    this.resizerSelection.style.top = `${resizerTop}px`;
-    this._updateResizerRect(elementWidth, elementHeight);
-    this.resizerSelection.style.display = "block";
-    this.curElement = element;
-    this.curPosition = position;
-    this.width = elementWidth;
-    this.height = elementHeight;
+  addPlaceholder(startIndex, context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const startElement = elementList[startIndex];
+    const control = startElement.control;
+    if (!control.placeholder)
+      return;
+    const placeholderStrList = splitText(control.placeholder);
+    for (let p = 0; p < placeholderStrList.length; p++) {
+      const value = placeholderStrList[p];
+      const newElement = {
+        value,
+        controlId: startElement.controlId,
+        type: ElementType.CONTROL,
+        control: startElement.control,
+        controlComponent: ControlComponent.PLACEHOLDER,
+        color: this.controlOptions.placeholderColor
+      };
+      formatElementContext(elementList, [newElement], startIndex);
+      this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
+    }
   }
-  clearResizer() {
-    this.resizerSelection.style.display = "none";
-    document.removeEventListener("keydown", this._keydown);
+  setValue(data2) {
+    if (!this.activeControl) {
+      throw new Error("active control is null");
+    }
+    return this.activeControl.setValue(data2);
   }
-}
-const contextmenu$1 = {
-  global: {
-    cut: "\u526A\u5207",
-    copy: "\u590D\u5236",
-    paste: "\u7C98\u8D34",
-    selectAll: "\u5168\u9009",
-    print: "\u6253\u5370"
-  },
-  control: {
-    "delete": "\u5220\u9664\u63A7\u4EF6"
-  },
-  hyperlink: {
-    "delete": "\u5220\u9664\u94FE\u63A5",
-    cancel: "\u53D6\u6D88\u94FE\u63A5",
-    edit: "\u7F16\u8F91\u94FE\u63A5"
-  },
-  image: {
-    change: "\u66F4\u6539\u56FE\u7247",
-    saveAs: "\u53E6\u5B58\u4E3A\u56FE\u7247",
-    textWrap: "\u6587\u5B57\u73AF\u7ED5",
-    textWrapType: {
-      embed: "\u5D4C\u5165\u578B",
-      upDown: "\u4E0A\u4E0B\u578B\u73AF\u7ED5",
-      floatTop: "\u6D6E\u4E8E\u6587\u5B57\u4E0A\u65B9",
-      floatBottom: "\u886C\u4E8E\u6587\u5B57\u4E0B\u65B9"
+  keydown(evt) {
+    if (!this.activeControl) {
+      throw new Error("active control is null");
     }
-  },
-  table: {
-    insertRowCol: "\u63D2\u5165\u884C\u5217",
-    insertTopRow: "\u4E0A\u65B9\u63D2\u51651\u884C",
-    insertBottomRow: "\u4E0B\u65B9\u63D2\u51651\u884C",
-    insertLeftCol: "\u5DE6\u4FA7\u63D2\u51651\u5217",
-    insertRightCol: "\u53F3\u4FA7\u63D2\u51651\u5217",
-    deleteRowCol: "\u5220\u9664\u884C\u5217",
-    deleteRow: "\u5220\u96641\u884C",
-    deleteCol: "\u5220\u96641\u5217",
-    deleteTable: "\u5220\u9664\u6574\u4E2A\u8868\u683C",
-    mergeCell: "\u5408\u5E76\u5355\u5143\u683C",
-    mergeCancelCell: "\u53D6\u6D88\u5408\u5E76",
-    verticalAlign: "\u5782\u76F4\u5BF9\u9F50",
-    verticalAlignTop: "\u9876\u7AEF\u5BF9\u9F50",
-    verticalAlignMiddle: "\u5782\u76F4\u5C45\u4E2D",
-    verticalAlignBottom: "\u5E95\u7AEF\u5BF9\u9F50",
-    border: "\u8868\u683C\u8FB9\u6846",
-    borderAll: "\u6240\u6709\u6846\u7EBF",
-    borderEmpty: "\u65E0\u6846\u7EBF",
-    borderExternal: "\u5916\u4FA7\u6846\u7EBF",
-    borderTd: "\u5355\u5143\u683C\u8FB9\u6846",
-    borderTdTop: "\u4E0A\u8FB9\u6846",
-    borderTdRight: "\u53F3\u8FB9\u6846",
-    borderTdBottom: "\u4E0B\u8FB9\u6846",
-    borderTdLeft: "\u5DE6\u8FB9\u6846",
-    borderTdForward: "\u6B63\u659C\u7EBF",
-    borderTdBack: "\u53CD\u659C\u7EBF"
+    return this.activeControl.keydown(evt);
   }
-};
-const datePicker$1 = {
-  now: "\u6B64\u523B",
-  confirm: "\u786E\u5B9A",
-  "return": "\u8FD4\u56DE\u65E5\u671F",
-  timeSelect: "\u65F6\u95F4\u9009\u62E9",
-  weeks: {
-    sun: "\u65E5",
-    mon: "\u4E00",
-    tue: "\u4E8C",
-    wed: "\u4E09",
-    thu: "\u56DB",
-    fri: "\u4E94",
-    sat: "\u516D"
-  },
-  year: "\u5E74",
-  month: "\u6708",
-  hour: "\u65F6",
-  minute: "\u5206",
-  second: "\u79D2"
-};
-const frame$1 = {
-  header: "\u9875\u7709",
-  footer: "\u9875\u811A"
-};
-const pageBreak$1 = {
-  displayName: "\u5206\u9875\u7B26"
-};
-const zone$1 = {
-  headerTip: "\u53CC\u51FB\u7F16\u8F91\u9875\u7709",
-  footerTip: "\u53CC\u51FB\u7F16\u8F91\u9875\u811A"
-};
-var zhCN = {
-  contextmenu: contextmenu$1,
-  datePicker: datePicker$1,
-  frame: frame$1,
-  pageBreak: pageBreak$1,
-  zone: zone$1
-};
-class DatePicker {
-  constructor(options = {}) {
-    __publicField(this, "options");
-    __publicField(this, "now");
-    __publicField(this, "dom");
-    __publicField(this, "renderOptions");
-    __publicField(this, "isDatePicker");
-    __publicField(this, "pickDate");
-    __publicField(this, "lang");
-    this.options = __spreadValues({
-      mountDom: document.body
-    }, options);
-    this.lang = datePicker$1;
-    this.now = new Date();
-    this.dom = this._createDom();
-    this.renderOptions = null;
-    this.isDatePicker = true;
-    this.pickDate = null;
-    this._bindEvent();
+  cut() {
+    if (!this.activeControl) {
+      throw new Error("active control is null");
+    }
+    return this.activeControl.cut();
   }
-  _createDom() {
-    const datePickerContainer = document.createElement("div");
-    datePickerContainer.classList.add(`${EDITOR_PREFIX}-date-container`);
-    const dateWrap = document.createElement("div");
-    dateWrap.classList.add(`${EDITOR_PREFIX}-date-wrap`);
-    const datePickerTitle = document.createElement("div");
-    datePickerTitle.classList.add(`${EDITOR_PREFIX}-date-title`);
-    const preYearTitle = document.createElement("span");
-    preYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-year`);
-    preYearTitle.innerText = `<<`;
-    const preMonthTitle = document.createElement("span");
-    preMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-month`);
-    preMonthTitle.innerText = `<`;
-    const nowTitle = document.createElement("span");
-    nowTitle.classList.add(`${EDITOR_PREFIX}-date-title__now`);
-    const nextMonthTitle = document.createElement("span");
-    nextMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-month`);
-    nextMonthTitle.innerText = `>`;
-    const nextYearTitle = document.createElement("span");
-    nextYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-year`);
-    nextYearTitle.innerText = `>>`;
-    datePickerTitle.append(preYearTitle);
-    datePickerTitle.append(preMonthTitle);
-    datePickerTitle.append(nowTitle);
-    datePickerTitle.append(nextMonthTitle);
-    datePickerTitle.append(nextYearTitle);
-    const datePickerWeek = document.createElement("div");
-    datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`);
-    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
-    const weekList = [sun, mon, tue, wed, thu, fri, sat];
-    weekList.forEach((week) => {
-      const weekDom = document.createElement("span");
-      weekDom.innerText = `${week}`;
-      datePickerWeek.append(weekDom);
-    });
-    const datePickerDay = document.createElement("div");
-    datePickerDay.classList.add(`${EDITOR_PREFIX}-date-day`);
-    dateWrap.append(datePickerTitle);
-    dateWrap.append(datePickerWeek);
-    dateWrap.append(datePickerDay);
-    const timeWrap = document.createElement("ul");
-    timeWrap.classList.add(`${EDITOR_PREFIX}-time-wrap`);
-    let hourTime;
-    let minuteTime;
-    let secondTime;
-    const timeList = [this.lang.hour, this.lang.minute, this.lang.second];
-    timeList.forEach((t, i) => {
-      const li = document.createElement("li");
-      const timeText = document.createElement("span");
-      timeText.innerText = t;
-      li.append(timeText);
-      const ol = document.createElement("ol");
-      const isHour = i === 0;
-      const isMinute = i === 1;
-      const endIndex = isHour ? 24 : 60;
-      for (let i2 = 0; i2 < endIndex; i2++) {
-        const time = document.createElement("li");
-        time.innerText = `${String(i2).padStart(2, "0")}`;
-        time.setAttribute("data-id", `${i2}`);
-        ol.append(time);
-      }
-      if (isHour) {
-        hourTime = ol;
-      } else if (isMinute) {
-        minuteTime = ol;
-      } else {
-        secondTime = ol;
-      }
-      li.append(ol);
-      timeWrap.append(li);
-    });
-    const datePickerMenu = document.createElement("div");
-    datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`);
-    const timeMenu = document.createElement("button");
-    timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`);
-    timeMenu.innerText = this.lang.timeSelect;
-    const nowMenu = document.createElement("button");
-    nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`);
-    nowMenu.innerText = this.lang.now;
-    const submitMenu = document.createElement("button");
-    submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`);
-    submitMenu.innerText = this.lang.confirm;
-    datePickerMenu.append(timeMenu);
-    datePickerMenu.append(nowMenu);
-    datePickerMenu.append(submitMenu);
-    datePickerContainer.append(dateWrap);
-    datePickerContainer.append(timeWrap);
-    datePickerContainer.append(datePickerMenu);
-    this.options.mountDom.append(datePickerContainer);
-    return {
-      container: datePickerContainer,
-      dateWrap,
-      datePickerWeek,
-      timeWrap,
-      title: {
-        preYear: preYearTitle,
-        preMonth: preMonthTitle,
-        now: nowTitle,
-        nextMonth: nextMonthTitle,
-        nextYear: nextYearTitle
+  getValueByConceptId(payload) {
+    const { conceptId } = payload;
+    const result = [];
+    const getValue = (elementList, zone2) => {
+      var _a;
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              getValue(td.value, zone2);
+            }
+          }
+        }
+        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        const { type, code, valueSets } = element.control;
+        let j = i;
+        let textControlValue = "";
+        while (j < elementList.length) {
+          const nextElement = elementList[j];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          if ((type === ControlType.TEXT || type === ControlType.DATE) && nextElement.controlComponent === ControlComponent.VALUE) {
+            textControlValue += nextElement.value;
+          }
+          j++;
+        }
+        if (type === ControlType.TEXT || type === ControlType.DATE) {
+          result.push(__spreadProps(__spreadValues({}, element.control), {
+            zone: zone2,
+            value: textControlValue || null,
+            innerText: textControlValue || null
+          }));
+        } else if (type === ControlType.SELECT || type === ControlType.CHECKBOX || type === ControlType.RADIO) {
+          const innerText = code == null ? void 0 : code.split(",").map((selectCode) => {
+            var _a2;
+            return (_a2 = valueSets == null ? void 0 : valueSets.find((valueSet) => valueSet.code === selectCode)) == null ? void 0 : _a2.value;
+          }).filter(Boolean).join("");
+          result.push(__spreadProps(__spreadValues({}, element.control), {
+            zone: zone2,
+            value: code || null,
+            innerText: innerText || null
+          }));
+        }
+        i = j;
+      }
+    };
+    const data2 = [
+      {
+        zone: EditorZone.HEADER,
+        elementList: this.draw.getHeaderElementList()
       },
-      day: datePickerDay,
-      time: {
-        hour: hourTime,
-        minute: minuteTime,
-        second: secondTime
+      {
+        zone: EditorZone.MAIN,
+        elementList: this.draw.getOriginalMainElementList()
       },
-      menu: {
-        time: timeMenu,
-        now: nowMenu,
-        submit: submitMenu
+      {
+        zone: EditorZone.FOOTER,
+        elementList: this.draw.getFooterElementList()
+      }
+    ];
+    for (const { zone: zone2, elementList } of data2) {
+      getValue(elementList, zone2);
+    }
+    return result;
+  }
+  setValueByConceptId(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    let isExistSet = false;
+    const { conceptId, value } = payload;
+    const setValue = (elementList) => {
+      var _a;
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              setValue(td.value);
+            }
+          }
+        }
+        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        isExistSet = true;
+        const { type } = element.control;
+        let currentEndIndex = i;
+        while (currentEndIndex < elementList.length) {
+          const nextElement = elementList[currentEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          currentEndIndex++;
+        }
+        const fakeRange = {
+          startIndex: i - 1,
+          endIndex: currentEndIndex - 2
+        };
+        const controlContext = {
+          range: fakeRange,
+          elementList
+        };
+        const controlRule = {
+          isIgnoreDisabledRule: true
+        };
+        if (type === ControlType.TEXT) {
+          const formatValue = [{ value }];
+          formatElementList(formatValue, {
+            isHandleFirstElement: false,
+            editorOptions: this.options
+          });
+          const text = new TextControl(element, this);
+          this.activeControl = text;
+          if (value) {
+            text.setValue(formatValue, controlContext, controlRule);
+          } else {
+            text.clearValue(controlContext, controlRule);
+          }
+        } else if (type === ControlType.SELECT) {
+          const select = new SelectControl(element, this);
+          this.activeControl = select;
+          if (value) {
+            select.setSelect(value, controlContext, controlRule);
+          } else {
+            select.clearSelect(controlContext, controlRule);
+          }
+        } else if (type === ControlType.CHECKBOX) {
+          const checkbox = new CheckboxControl(element, this);
+          this.activeControl = checkbox;
+          const codes = (value == null ? void 0 : value.split(",")) || [];
+          checkbox.setSelect(codes, controlContext, controlRule);
+        } else if (type === ControlType.RADIO) {
+          const radio = new RadioControl(element, this);
+          this.activeControl = radio;
+          const codes = value ? [value] : [];
+          radio.setSelect(codes, controlContext, controlRule);
+        } else if (type === ControlType.DATE) {
+          const date = new DateControl(element, this);
+          this.activeControl = date;
+          if (value) {
+            date.setSelect(value, controlContext, controlRule);
+          } else {
+            date.clearSelect(controlContext, controlRule);
+          }
+        }
+        this.activeControl = null;
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
       }
     };
+    this.destroyControl();
+    const data2 = [
+      this.draw.getHeaderElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooterElementList()
+    ];
+    for (const elementList of data2) {
+      setValue(elementList);
+    }
+    if (isExistSet) {
+      this.draw.render({
+        isSetCursor: false
+      });
+    }
   }
-  _bindEvent() {
-    this.dom.title.preYear.onclick = () => {
-      this._preYear();
+  setExtensionByConceptId(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { conceptId, extension } = payload;
+    const setExtension = (elementList) => {
+      var _a;
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              setExtension(td.value);
+            }
+          }
+        }
+        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        element.control.extension = extension;
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
     };
-    this.dom.title.preMonth.onclick = () => {
-      this._preMonth();
+    const data2 = [
+      this.draw.getHeaderElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooterElementList()
+    ];
+    for (const elementList of data2) {
+      setExtension(elementList);
+    }
+  }
+  setPropertiesByConceptId(payload) {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { conceptId, properties } = payload;
+    let isExistUpdate = false;
+    const pageComponentData = {
+      header: this.draw.getHeaderElementList(),
+      main: this.draw.getOriginalMainElementList(),
+      footer: this.draw.getFooterElementList()
+    };
+    for (const key in pageComponentData) {
+      const elementList = pageComponentData[key];
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        isExistUpdate = true;
+        element.control = __spreadProps(__spreadValues(__spreadValues({}, element.control), properties), {
+          value: element.control.value
+        });
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    }
+    if (!isExistUpdate)
+      return;
+    for (const key in pageComponentData) {
+      const pageComponentKey = key;
+      const elementList = zipElementList(pageComponentData[pageComponentKey]);
+      pageComponentData[pageComponentKey] = elementList;
+      formatElementList(elementList, {
+        editorOptions: this.options
+      });
+    }
+    this.draw.setEditorData(pageComponentData);
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
+  getList() {
+    const controlElementList = [];
+    function getControlElementList(elementList) {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              const tdElement = td.value;
+              getControlElementList(tdElement);
+            }
+          }
+        }
+        if (element.controlId) {
+          controlElementList.push(element);
+        }
+      }
+    }
+    const data2 = [
+      this.draw.getHeader().getElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooter().getElementList()
+    ];
+    for (const elementList of data2) {
+      getControlElementList(elementList);
+    }
+    return zipElementList(controlElementList);
+  }
+  recordBorderInfo(x, y, width, height) {
+    this.controlBorder.recordBorderInfo(x, y, width, height);
+  }
+  drawBorder(ctx) {
+    this.controlBorder.render(ctx);
+  }
+  getPreControlContext() {
+    if (!this.activeControl)
+      return null;
+    const position = this.draw.getPosition();
+    const positionContext = position.getPositionContext();
+    if (!positionContext)
+      return null;
+    const controlElement = this.activeControl.getElement();
+    function getPreContext(elementList2, start) {
+      for (let e = start; e > 0; e--) {
+        const element = elementList2[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList || [];
+          for (let r = trList.length - 1; r >= 0; r--) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = tdList.length - 1; d >= 0; d--) {
+              const td = tdList[d];
+              const context2 = getPreContext(td.value, td.value.length - 1);
+              if (context2) {
+                return {
+                  positionContext: {
+                    isTable: true,
+                    index: e,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: td.id,
+                    trId: tr.id,
+                    tableId: element.id
+                  },
+                  nextIndex: context2.nextIndex
+                };
+              }
+            }
+          }
+        }
+        if (!element.controlId || element.controlId === controlElement.controlId) {
+          continue;
+        }
+        let nextIndex = e;
+        while (nextIndex > 0) {
+          const nextElement = elementList2[nextIndex];
+          if (nextElement.controlComponent === ControlComponent.VALUE || nextElement.controlComponent === ControlComponent.PREFIX) {
+            break;
+          }
+          nextIndex--;
+        }
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex
+        };
+      }
+      return null;
+    }
+    const { startIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    const context = getPreContext(elementList, startIndex);
+    if (context) {
+      return {
+        positionContext: positionContext.isTable ? positionContext : context.positionContext,
+        nextIndex: context.nextIndex
+      };
+    }
+    if (controlElement.tableId) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const trList = originalElementList[index2].trList;
+      for (let r = trIndex; r >= 0; r--) {
+        const tr = trList[r];
+        const tdList = tr.tdList;
+        for (let d = tdList.length - 1; d >= 0; d--) {
+          if (trIndex === r && d >= tdIndex)
+            continue;
+          const td = tdList[d];
+          const context3 = getPreContext(td.value, td.value.length - 1);
+          if (context3) {
+            return {
+              positionContext: {
+                isTable: true,
+                index: positionContext.index,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: controlElement.tableId
+              },
+              nextIndex: context3.nextIndex
+            };
+          }
+        }
+      }
+      const context2 = getPreContext(originalElementList, index2 - 1);
+      if (context2) {
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: context2.nextIndex
+        };
+      }
+    }
+    return null;
+  }
+  getNextControlContext() {
+    if (!this.activeControl)
+      return null;
+    const position = this.draw.getPosition();
+    const positionContext = position.getPositionContext();
+    if (!positionContext)
+      return null;
+    const controlElement = this.activeControl.getElement();
+    function getNextContext(elementList2, start) {
+      for (let e = start; e < elementList2.length; e++) {
+        const element = elementList2[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList || [];
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              const context2 = getNextContext(td.value, 0);
+              if (context2) {
+                return {
+                  positionContext: {
+                    isTable: true,
+                    index: e,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: td.id,
+                    trId: tr.id,
+                    tableId: element.id
+                  },
+                  nextIndex: context2.nextIndex
+                };
+              }
+            }
+          }
+        }
+        if (!element.controlId || element.controlId === controlElement.controlId) {
+          continue;
+        }
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: e
+        };
+      }
+      return null;
+    }
+    const { endIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    const context = getNextContext(elementList, endIndex);
+    if (context) {
+      return {
+        positionContext: positionContext.isTable ? positionContext : context.positionContext,
+        nextIndex: context.nextIndex
+      };
+    }
+    if (controlElement.tableId) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const trList = originalElementList[index2].trList;
+      for (let r = trIndex; r < trList.length; r++) {
+        const tr = trList[r];
+        const tdList = tr.tdList;
+        for (let d = 0; d < tdList.length; d++) {
+          if (trIndex === r && d <= tdIndex)
+            continue;
+          const td = tdList[d];
+          const context3 = getNextContext(td.value, 0);
+          if (context3) {
+            return {
+              positionContext: {
+                isTable: true,
+                index: positionContext.index,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: controlElement.tableId
+              },
+              nextIndex: context3.nextIndex
+            };
+          }
+        }
+      }
+      const context2 = getNextContext(originalElementList, index2 + 1);
+      if (context2) {
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: context2.nextIndex
+        };
+      }
+    }
+    return null;
+  }
+  initNextControl(option = {}) {
+    const { direction = MoveDirection.DOWN } = option;
+    let context = null;
+    if (direction === MoveDirection.UP) {
+      context = this.getPreControlContext();
+    } else {
+      context = this.getNextControlContext();
+    }
+    if (!context)
+      return;
+    const { nextIndex, positionContext } = context;
+    const position = this.draw.getPosition();
+    position.setPositionContext(positionContext);
+    this.draw.getRange().replaceRange({
+      startIndex: nextIndex,
+      endIndex: nextIndex
+    });
+    this.draw.render({
+      curIndex: nextIndex,
+      isCompute: false,
+      isSetCursor: true,
+      isSubmitHistory: false
+    });
+    const positionList = position.getPositionList();
+    this.draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[nextIndex],
+      direction
+    });
+  }
+}
+class CheckboxParticle {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "options");
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  setSelect(element) {
+    const { checkbox } = element;
+    if (checkbox) {
+      checkbox.value = !checkbox.value;
+    } else {
+      element.checkbox = {
+        value: true
+      };
+    }
+    this.draw.render({
+      isCompute: false,
+      isSetCursor: false
+    });
+  }
+  render(ctx, element, x, y) {
+    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
+    const { metrics, checkbox } = element;
+    const left2 = Math.round(x + gap * scale);
+    const top = Math.round(y - metrics.height + lineWidth);
+    const width = metrics.width - gap * 2 * scale;
+    const height = metrics.height;
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(0.5, 0.5);
+    if (checkbox == null ? void 0 : checkbox.value) {
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = fillStyle;
+      ctx.rect(left2, top, width, height);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.fillStyle = fillStyle;
+      ctx.fillRect(left2, top, width, height);
+      ctx.beginPath();
+      ctx.strokeStyle = strokeStyle;
+      ctx.lineWidth = lineWidth * 2 * scale;
+      ctx.moveTo(left2 + 2 * scale, top + height / 2);
+      ctx.lineTo(left2 + width / 2, top + height - 3 * scale);
+      ctx.lineTo(left2 + width - 2 * scale, top + 3 * scale);
+      ctx.stroke();
+    } else {
+      ctx.lineWidth = lineWidth;
+      ctx.rect(left2, top, width, height);
+      ctx.stroke();
+    }
+    ctx.closePath();
+    ctx.restore();
+  }
+}
+class RadioParticle {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "options");
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  setSelect(element) {
+    const { radio } = element;
+    if (radio) {
+      radio.value = !radio.value;
+    } else {
+      element.radio = {
+        value: true
+      };
+    }
+    this.draw.render({
+      isCompute: false,
+      isSetCursor: false
+    });
+  }
+  render(ctx, element, x, y) {
+    const { radio: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
+    const { metrics, radio } = element;
+    const left2 = Math.round(x + gap * scale);
+    const top = Math.round(y - metrics.height + lineWidth);
+    const width = metrics.width - gap * 2 * scale;
+    const height = metrics.height;
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = (radio == null ? void 0 : radio.value) ? fillStyle : strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.arc(left2 + width / 2, top + height / 2, width / 2, 0, Math.PI * 2);
+    ctx.stroke();
+    if (radio == null ? void 0 : radio.value) {
+      ctx.beginPath();
+      ctx.fillStyle = fillStyle;
+      ctx.arc(left2 + width / 2, top + height / 2, width / 3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.closePath();
+    ctx.restore();
+  }
+}
+const encodedJs$2 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBmOyhmdW5jdGlvbih0KXt0LlRFWFQ9InRleHQiLHQuVEFCTEU9InRhYmxlIix0LkhZUEVSTElOSz0iaHlwZXJsaW5rIix0LkNPTlRST0w9ImNvbnRyb2wifSkoZnx8KGY9e30pKTt2YXIgcDsoZnVuY3Rpb24odCl7dC5WQUxVRT0idmFsdWUifSkocHx8KHA9e30pKTtjb25zdCBoPSJcdTIwMEIiLGc9YApgO2Z1bmN0aW9uIGEodCl7bGV0IGw9IiIsbj0wO2Zvcig7bjx0Lmxlbmd0aDspe2NvbnN0IG89dFtuXTtpZihvLnR5cGU9PT1mLlRBQkxFKXtpZihvLnRyTGlzdClmb3IobGV0IHI9MDtyPG8udHJMaXN0Lmxlbmd0aDtyKyspe2NvbnN0IHM9by50ckxpc3Rbcl07Zm9yKGxldCBlPTA7ZTxzLnRkTGlzdC5sZW5ndGg7ZSsrKXtjb25zdCBpPXMudGRMaXN0W2VdO2wrPWEoaS52YWx1ZSl9fX1lbHNlIGlmKG8udHlwZT09PWYuSFlQRVJMSU5LKXtjb25zdCByPW8uaHlwZXJsaW5rSWQscz1bXTtmb3IoO248dC5sZW5ndGg7KXtjb25zdCBlPXRbbl07aWYociE9PWUuaHlwZXJsaW5rSWQpe24tLTticmVha31kZWxldGUgZS50eXBlLHMucHVzaChlKSxuKyt9bCs9YShzKX1lbHNlIGlmKG8uY29udHJvbElkKXtjb25zdCByPW8uY29udHJvbElkLHM9W107Zm9yKDtuPHQubGVuZ3RoOyl7Y29uc3QgZT10W25dO2lmKHIhPT1lLmNvbnRyb2xJZCl7bi0tO2JyZWFrfWUuY29udHJvbENvbXBvbmVudD09PXAuVkFMVUUmJihkZWxldGUgZS5jb250cm9sSWQscy5wdXNoKGUpKSxuKyt9bCs9YShzKX1lbHNlKCFvLnR5cGV8fG8udHlwZT09PWYuVEVYVCkmJihsKz1vLnZhbHVlKTtuKyt9cmV0dXJuIGx9ZnVuY3Rpb24gZCh0KXtjb25zdCBsPVtdLG49L1swLTldLyxvPS9bQS1aYS16XS8scj0vXHMvO2xldCBzPSExLGU9ITEsaT0iIjtmdW5jdGlvbiB1KCl7aSYmKGwucHVzaChpKSxpPSIiKX1mb3IoY29uc3QgYyBvZiB0KW8udGVzdChjKT8oc3x8dSgpLGkrPWMscz0hMCxlPSExKTpuLnRlc3QoYyk/KGV8fHUoKSxpKz1jLHM9ITEsZT0hMCk6KHUoKSxzPSExLGU9ITEsci50ZXN0KGMpfHxsLnB1c2goYykpO3JldHVybiB1KCksbH1vbm1lc3NhZ2U9dD0+e2NvbnN0IGw9dC5kYXRhLG89YShsKS5yZXBsYWNlKG5ldyBSZWdFeHAoYF4ke2h9YCksIiIpLnJlcGxhY2UobmV3IFJlZ0V4cChoLCJnIiksZykscj1kKG8pO3Bvc3RNZXNzYWdlKHIubGVuZ3RoKX19KSgpO30pKCk7Cg==";
+const blob$2 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$2)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper$2() {
+  const objURL = blob$2 && (window.URL || window.webkitURL).createObjectURL(blob$2);
+  try {
+    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs$2, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+const encodedJs$1 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBhOyhmdW5jdGlvbih0KXt0LlRFWFQ9InRleHQiLHQuSU1BR0U9ImltYWdlIix0LlRBQkxFPSJ0YWJsZSIsdC5IWVBFUkxJTks9Imh5cGVybGluayIsdC5TVVBFUlNDUklQVD0ic3VwZXJzY3JpcHQiLHQuU1VCU0NSSVBUPSJzdWJzY3JpcHQiLHQuU0VQQVJBVE9SPSJzZXBhcmF0b3IiLHQuUEFHRV9CUkVBSz0icGFnZUJyZWFrIix0LkNPTlRST0w9ImNvbnRyb2wiLHQuQ0hFQ0tCT1g9ImNoZWNrYm94Iix0LlJBRElPPSJyYWRpbyIsdC5MQVRFWD0ibGF0ZXgiLHQuVEFCPSJ0YWIiLHQuREFURT0iZGF0ZSIsdC5CTE9DSz0iYmxvY2siLHQuVElUTEU9InRpdGxlIix0LkxJU1Q9Imxpc3QifSkoYXx8KGE9e30pKTt2YXIgYzsoZnVuY3Rpb24odCl7dC5GSVJTVD0iZmlyc3QiLHQuU0VDT05EPSJzZWNvbmQiLHQuVEhJUkQ9InRoaXJkIix0LkZPVVJUSD0iZm91cnRoIix0LkZJRlRIPSJmaWZ0aCIsdC5TSVhUSD0ic2l4dGgifSkoY3x8KGM9e30pKTtjb25zdCBJPXtbYy5GSVJTVF06MSxbYy5TRUNPTkRdOjIsW2MuVEhJUkRdOjMsW2MuRk9VUlRIXTo0LFtjLkZJRlRIXTo1LFtjLlNJWFRIXTo2fSx2PVthLlRFWFQsYS5IWVBFUkxJTkssYS5TVUJTQ1JJUFQsYS5TVVBFUlNDUklQVCxhLkNPTlRST0wsYS5EQVRFXSxoPSJcdTIwMEIiO2Z1bmN0aW9uIFQodCl7cmV0dXJuIXQudHlwZXx8di5pbmNsdWRlcyh0LnR5cGUpfWZ1bmN0aW9uIGYodCl7Y29uc3QgaT1bXTtsZXQgZT0wO2Zvcig7ZTx0Lmxlbmd0aDspe2NvbnN0IHM9dFtlXTtpZihzLnRpdGxlSWQpe2NvbnN0IG89cy50aXRsZUlkLGw9cy5sZXZlbCxuPXt0eXBlOmEuVElUTEUsdmFsdWU6IiIsbGV2ZWw6bCx0aXRsZUlkOm99LHI9W107Zm9yKDtlPHQubGVuZ3RoOyl7Y29uc3QgdT10W2VdO2lmKG8hPT11LnRpdGxlSWQpe2UtLTticmVha31yLnB1c2godSksZSsrfW4udmFsdWU9ci5maWx0ZXIodT0+VCh1KSkubWFwKHU9PnUudmFsdWUpLmpvaW4oIiIpLnJlcGxhY2UobmV3IFJlZ0V4cChoLCJnIiksIiIpLGkucHVzaChuKX1lKyt9aWYoIWkubGVuZ3RoKXJldHVybiBudWxsO2NvbnN0IGc9KHMsbyk9Pntjb25zdCBsPW8uc3ViQ2F0YWxvZ1tvLnN1YkNhdGFsb2cubGVuZ3RoLTFdLG49SVtsPT1udWxsP3ZvaWQgMDpsLmxldmVsXSxyPUlbcy5sZXZlbF07bCYmcj5uP2cocyxsKTpvLnN1YkNhdGFsb2cucHVzaCh7aWQ6cy50aXRsZUlkLG5hbWU6cy52YWx1ZSxsZXZlbDpzLmxldmVsLHN1YkNhdGFsb2c6W119KX0sUj1bXTtmb3IobGV0IHM9MDtzPGkubGVuZ3RoO3MrKyl7Y29uc3Qgbz1pW3NdLGw9UltSLmxlbmd0aC0xXSxuPUlbbD09bnVsbD92b2lkIDA6bC5sZXZlbF0scj1JW28ubGV2ZWxdO2wmJnI+bj9nKG8sbCk6Ui5wdXNoKHtpZDpvLnRpdGxlSWQsbmFtZTpvLnZhbHVlLGxldmVsOm8ubGV2ZWwsc3ViQ2F0YWxvZzpbXX0pfXJldHVybiBSfW9ubWVzc2FnZT10PT57Y29uc3QgaT10LmRhdGEsZT1mKGkpO3Bvc3RNZXNzYWdlKGUpfX0pKCk7fSkoKTsK";
+const blob$1 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$1)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper$1() {
+  const objURL = blob$1 && (window.URL || window.webkitURL).createObjectURL(blob$1);
+  try {
+    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs$1, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+const encodedJs = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBuOyhmdW5jdGlvbihvKXtvLlRBQkxFPSJ0YWJsZSJ9KShufHwobj17fSkpO2Z1bmN0aW9uIGMobyl7Y29uc3QgdD1bXTtmb3IoY29uc3QgcyBvZiBvKXtpZihzLnR5cGU9PT1uLlRBQkxFKXtjb25zdCBlPXMudHJMaXN0O2ZvcihsZXQgcj0wO3I8ZS5sZW5ndGg7cisrKXtjb25zdCBpPWVbcl07Zm9yKGxldCB1PTA7dTxpLnRkTGlzdC5sZW5ndGg7dSsrKXtjb25zdCBkPWkudGRMaXN0W3VdO3QucHVzaCguLi5jKGQudmFsdWUpKX19fWlmKCEhcy5ncm91cElkcylmb3IoY29uc3QgZSBvZiBzLmdyb3VwSWRzKXQuaW5jbHVkZXMoZSl8fHQucHVzaChlKX1yZXR1cm4gdH1vbm1lc3NhZ2U9bz0+e2NvbnN0IHQ9by5kYXRhLHM9Yyh0KTtwb3N0TWVzc2FnZShzKX19KSgpO30pKCk7Cg==";
+const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper() {
+  const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
+  try {
+    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+class WorkerManager {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "wordCountWorker");
+    __publicField(this, "catalogWorker");
+    __publicField(this, "groupWorker");
+    this.draw = draw;
+    this.wordCountWorker = new WorkerWrapper$2();
+    this.catalogWorker = new WorkerWrapper$1();
+    this.groupWorker = new WorkerWrapper();
+  }
+  getWordCount() {
+    return new Promise((resolve, reject) => {
+      this.wordCountWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.wordCountWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      this.wordCountWorker.postMessage(elementList);
+    });
+  }
+  getCatalog() {
+    return new Promise((resolve, reject) => {
+      this.catalogWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.catalogWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      this.catalogWorker.postMessage(elementList);
+    });
+  }
+  getGroupIds() {
+    return new Promise((resolve, reject) => {
+      this.groupWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.groupWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      this.groupWorker.postMessage(elementList);
+    });
+  }
+}
+class Previewer {
+  constructor(draw) {
+    __publicField(this, "container");
+    __publicField(this, "canvas");
+    __publicField(this, "draw");
+    __publicField(this, "options");
+    __publicField(this, "curElement");
+    __publicField(this, "curElementSrc");
+    __publicField(this, "previewerDrawOption");
+    __publicField(this, "curPosition");
+    __publicField(this, "resizerSelection");
+    __publicField(this, "resizerHandleList");
+    __publicField(this, "resizerImageContainer");
+    __publicField(this, "resizerImage");
+    __publicField(this, "resizerSize");
+    __publicField(this, "width");
+    __publicField(this, "height");
+    __publicField(this, "mousedownX");
+    __publicField(this, "mousedownY");
+    __publicField(this, "curHandleIndex");
+    __publicField(this, "previewerContainer");
+    __publicField(this, "previewerImage");
+    __publicField(this, "_keydown", () => {
+      if (this.resizerSelection.style.display === "block") {
+        this.clearResizer();
+        document.removeEventListener("keydown", this._keydown);
+      }
+    });
+    this.container = draw.getContainer();
+    this.canvas = draw.getPage();
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.curElement = null;
+    this.curElementSrc = "";
+    this.previewerDrawOption = {};
+    this.curPosition = null;
+    const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage, resizerSize } = this._createResizerDom();
+    this.resizerSelection = resizerSelection;
+    this.resizerHandleList = resizerHandleList;
+    this.resizerImageContainer = resizerImageContainer;
+    this.resizerImage = resizerImage;
+    this.resizerSize = resizerSize;
+    this.width = 0;
+    this.height = 0;
+    this.mousedownX = 0;
+    this.mousedownY = 0;
+    this.curHandleIndex = 0;
+    this.previewerContainer = null;
+    this.previewerImage = null;
+  }
+  _getElementPosition(element, position = null) {
+    var _a;
+    let x = 0;
+    let y = 0;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const pageNo = (_a = position == null ? void 0 : position.pageNo) != null ? _a : this.draw.getPageNo();
+    const preY = pageNo * (height + pageGap);
+    if (element.imgFloatPosition) {
+      x = element.imgFloatPosition.x;
+      y = element.imgFloatPosition.y + preY;
+    } else if (position) {
+      const { coordinate: { leftTop: [left2, top] }, ascent } = position;
+      x = left2;
+      y = top + preY + ascent;
+    }
+    return { x, y };
+  }
+  _createResizerDom() {
+    const resizerSelection = document.createElement("div");
+    resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`);
+    resizerSelection.style.display = "none";
+    resizerSelection.style.borderColor = this.options.resizerColor;
+    const resizerHandleList = [];
+    for (let i = 0; i < 8; i++) {
+      const handleDom = document.createElement("div");
+      handleDom.style.background = this.options.resizerColor;
+      handleDom.classList.add(`resizer-handle`);
+      handleDom.classList.add(`handle-${i}`);
+      handleDom.setAttribute("data-index", String(i));
+      handleDom.onmousedown = this._mousedown.bind(this);
+      resizerSelection.append(handleDom);
+      resizerHandleList.push(handleDom);
+    }
+    this.container.append(resizerSelection);
+    const resizerSizeView = document.createElement("div");
+    resizerSizeView.classList.add(`${EDITOR_PREFIX}-resizer-size-view`);
+    const resizerSize = document.createElement("span");
+    resizerSizeView.append(resizerSize);
+    resizerSelection.append(resizerSizeView);
+    const resizerImageContainer = document.createElement("div");
+    resizerImageContainer.classList.add(`${EDITOR_PREFIX}-resizer-image`);
+    resizerImageContainer.style.display = "none";
+    const resizerImage = document.createElement("img");
+    resizerImageContainer.append(resizerImage);
+    this.container.append(resizerImageContainer);
+    return {
+      resizerSelection,
+      resizerHandleList,
+      resizerImageContainer,
+      resizerImage,
+      resizerSize
+    };
+  }
+  _mousedown(evt) {
+    this.canvas = this.draw.getPage();
+    if (!this.curElement)
+      return;
+    const { scale } = this.options;
+    this.mousedownX = evt.x;
+    this.mousedownY = evt.y;
+    const target = evt.target;
+    this.curHandleIndex = Number(target.dataset.index);
+    const cursor = window.getComputedStyle(target).cursor;
+    document.body.style.cursor = cursor;
+    this.canvas.style.cursor = cursor;
+    this.resizerImage.src = this.curElementSrc;
+    this.resizerImageContainer.style.display = "block";
+    const { x: resizerLeft, y: resizerTop } = this._getElementPosition(this.curElement, this.curPosition);
+    this.resizerImageContainer.style.left = `${resizerLeft}px`;
+    this.resizerImageContainer.style.top = `${resizerTop}px`;
+    this.resizerImage.style.width = `${this.curElement.width * scale}px`;
+    this.resizerImage.style.height = `${this.curElement.height * scale}px`;
+    const mousemoveFn = this._mousemove.bind(this);
+    document.addEventListener("mousemove", mousemoveFn);
+    document.addEventListener("mouseup", () => {
+      var _a;
+      if (this.curElement) {
+        this.curElement.width = this.width;
+        this.curElement.height = this.height;
+        this.draw.render({
+          isSetCursor: true,
+          curIndex: (_a = this.curPosition) == null ? void 0 : _a.index
+        });
+      }
+      this.resizerImageContainer.style.display = "none";
+      document.removeEventListener("mousemove", mousemoveFn);
+      document.body.style.cursor = "";
+      this.canvas.style.cursor = "text";
+    }, {
+      once: true
+    });
+    evt.preventDefault();
+  }
+  _mousemove(evt) {
+    if (!this.curElement)
+      return;
+    const { scale } = this.options;
+    let dx = 0;
+    let dy = 0;
+    switch (this.curHandleIndex) {
+      case 0:
+        {
+          const offsetX = this.mousedownX - evt.x;
+          const offsetY = this.mousedownY - evt.y;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
+        break;
+      case 1:
+        dy = this.mousedownY - evt.y;
+        break;
+      case 2:
+        {
+          const offsetX = evt.x - this.mousedownX;
+          const offsetY = this.mousedownY - evt.y;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
+        break;
+      case 4:
+        {
+          const offsetX = evt.x - this.mousedownX;
+          const offsetY = evt.y - this.mousedownY;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
+        break;
+      case 3:
+        dx = evt.x - this.mousedownX;
+        break;
+      case 5:
+        dy = evt.y - this.mousedownY;
+        break;
+      case 6:
+        {
+          const offsetX = this.mousedownX - evt.x;
+          const offsetY = evt.y - this.mousedownY;
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+          dy = this.curElement.height * dx / this.curElement.width;
+        }
+        break;
+      case 7:
+        dx = this.mousedownX - evt.x;
+        break;
+    }
+    const dw = this.curElement.width + dx / scale;
+    const dh = this.curElement.height + dy / scale;
+    if (dw <= 0 || dh <= 0)
+      return;
+    this.width = dw;
+    this.height = dh;
+    const elementWidth = dw * scale;
+    const elementHeight = dh * scale;
+    this.resizerImage.style.width = `${elementWidth}px`;
+    this.resizerImage.style.height = `${elementHeight}px`;
+    this._updateResizerRect(elementWidth, elementHeight);
+    this._updateResizerSizeView(elementWidth, elementHeight);
+    evt.preventDefault();
+  }
+  _drawPreviewer() {
+    const previewerContainer = document.createElement("div");
+    previewerContainer.classList.add(`${EDITOR_PREFIX}-image-previewer`);
+    const closeBtn = document.createElement("i");
+    closeBtn.classList.add("image-close");
+    closeBtn.onclick = () => {
+      this._clearPreviewer();
     };
-    this.dom.title.nextMonth.onclick = () => {
-      this._nextMonth();
+    previewerContainer.append(closeBtn);
+    const imgContainer = document.createElement("div");
+    imgContainer.classList.add(`${EDITOR_PREFIX}-image-container`);
+    const img = document.createElement("img");
+    img.src = this.curElementSrc;
+    img.draggable = false;
+    imgContainer.append(img);
+    this.previewerImage = img;
+    previewerContainer.append(imgContainer);
+    let x = 0;
+    let y = 0;
+    let scaleSize = 1;
+    let rotateSize = 0;
+    const menuContainer = document.createElement("div");
+    menuContainer.classList.add(`${EDITOR_PREFIX}-image-menu`);
+    const zoomIn = document.createElement("i");
+    zoomIn.classList.add("zoom-in");
+    zoomIn.onclick = () => {
+      scaleSize += 0.1;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
     };
-    this.dom.title.nextYear.onclick = () => {
-      this._nextYear();
+    menuContainer.append(zoomIn);
+    const zoomOut = document.createElement("i");
+    zoomOut.onclick = () => {
+      if (scaleSize - 0.1 <= 0.1)
+        return;
+      scaleSize -= 0.1;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
     };
-    this.dom.menu.time.onclick = () => {
-      this.isDatePicker = !this.isDatePicker;
-      this._toggleDateTimePicker();
+    zoomOut.classList.add("zoom-out");
+    menuContainer.append(zoomOut);
+    const rotate = document.createElement("i");
+    rotate.classList.add("rotate");
+    rotate.onclick = () => {
+      rotateSize += 1;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
     };
-    this.dom.menu.now.onclick = () => {
-      this._now();
-      this._submit();
+    menuContainer.append(rotate);
+    const originalSize = document.createElement("i");
+    originalSize.classList.add("original-size");
+    originalSize.onclick = () => {
+      x = 0;
+      y = 0;
+      scaleSize = 1;
+      rotateSize = 0;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
     };
-    this.dom.menu.submit.onclick = () => {
-      this.dispose();
-      this._submit();
+    menuContainer.append(originalSize);
+    const imageDownload = document.createElement("i");
+    imageDownload.classList.add("image-download");
+    imageDownload.onclick = () => {
+      var _a;
+      const { mime } = this.previewerDrawOption;
+      downloadFile(img.src, `${(_a = this.curElement) == null ? void 0 : _a.id}.${mime || "png"}`);
     };
-    this.dom.time.hour.onclick = (evt) => {
-      if (!this.pickDate)
-        return;
-      const li = evt.target;
-      const id = li.dataset.id;
-      if (!id)
-        return;
-      this.pickDate.setHours(Number(id));
-      this._setTimePick(false);
+    menuContainer.append(imageDownload);
+    previewerContainer.append(menuContainer);
+    this.previewerContainer = previewerContainer;
+    document.body.append(previewerContainer);
+    let startX = 0;
+    let startY = 0;
+    let isAllowDrag = false;
+    img.onmousedown = (evt) => {
+      isAllowDrag = true;
+      startX = evt.x;
+      startY = evt.y;
+      previewerContainer.style.cursor = "move";
     };
-    this.dom.time.minute.onclick = (evt) => {
-      if (!this.pickDate)
-        return;
-      const li = evt.target;
-      const id = li.dataset.id;
-      if (!id)
+    previewerContainer.onmousemove = (evt) => {
+      if (!isAllowDrag)
         return;
-      this.pickDate.setMinutes(Number(id));
-      this._setTimePick(false);
+      x += evt.x - startX;
+      y += evt.y - startY;
+      startX = evt.x;
+      startY = evt.y;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
     };
-    this.dom.time.second.onclick = (evt) => {
-      if (!this.pickDate)
-        return;
-      const li = evt.target;
-      const id = li.dataset.id;
-      if (!id)
-        return;
-      this.pickDate.setSeconds(Number(id));
-      this._setTimePick(false);
+    previewerContainer.onmouseup = () => {
+      isAllowDrag = false;
+      previewerContainer.style.cursor = "auto";
     };
-  }
-  _setPosition() {
-    if (!this.renderOptions)
-      return;
-    const { position: { coordinate: { leftTop: [left2, top] }, lineHeight }, startTop } = this.renderOptions;
-    this.dom.container.style.left = `${left2}px`;
-    this.dom.container.style.top = `${top + (startTop || 0) + lineHeight}px`;
-  }
-  isInvalidDate(value) {
-    return value.toDateString() === "Invalid Date";
-  }
-  _setValue() {
-    var _a;
-    const value = (_a = this.renderOptions) == null ? void 0 : _a.value;
-    if (value) {
-      const setDate = new Date(value);
-      this.now = this.isInvalidDate(setDate) ? new Date() : setDate;
-    } else {
-      this.now = new Date();
-    }
-    this.pickDate = new Date(this.now);
-  }
-  _setLang() {
-    this.dom.menu.time.innerText = this.lang.timeSelect;
-    this.dom.menu.now.innerText = this.lang.now;
-    this.dom.menu.submit.innerText = this.lang.confirm;
-    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
-    const weekList = [sun, mon, tue, wed, thu, fri, sat];
-    this.dom.datePickerWeek.childNodes.forEach((child, i) => {
-      const childElement = child;
-      childElement.innerText = weekList[i];
-    });
-    const hourTitle = this.dom.time.hour.previousElementSibling;
-    hourTitle.innerText = this.lang.hour;
-    const minuteTitle = this.dom.time.minute.previousElementSibling;
-    minuteTitle.innerText = this.lang.minute;
-    const secondTitle = this.dom.time.second.previousElementSibling;
-    secondTitle.innerText = this.lang.second;
-  }
-  _update() {
-    const localDate = new Date();
-    const localYear = localDate.getFullYear();
-    const localMonth = localDate.getMonth() + 1;
-    const localDay = localDate.getDate();
-    let pickYear = null;
-    let pickMonth = null;
-    let pickDay = null;
-    if (this.pickDate) {
-      pickYear = this.pickDate.getFullYear();
-      pickMonth = this.pickDate.getMonth() + 1;
-      pickDay = this.pickDate.getDate();
-    }
-    const year = this.now.getFullYear();
-    const month = this.now.getMonth() + 1;
-    this.dom.title.now.innerText = `${year}${this.lang.year} ${String(month).padStart(2, "0")}${this.lang.month}`;
-    const curDate = new Date(year, month, 0);
-    const curDay = curDate.getDate();
-    let curWeek = new Date(year, month - 1, 1).getDay();
-    if (curWeek === 0) {
-      curWeek = 7;
-    }
-    const preDay = new Date(year, month - 1, 0).getDate();
-    this.dom.day.innerHTML = "";
-    const preStartDay = preDay - curWeek + 1;
-    for (let i = preStartDay; i <= preDay; i++) {
-      const dayDom = document.createElement("div");
-      dayDom.classList.add("disable");
-      dayDom.innerText = `${i}`;
-      dayDom.onclick = () => {
-        const newMonth = month - 2;
-        this.now = new Date(year, newMonth, i);
-        this._setDatePick(year, newMonth, i);
-      };
-      this.dom.day.append(dayDom);
-    }
-    for (let i = 1; i <= curDay; i++) {
-      const dayDom = document.createElement("div");
-      if (localYear === year && localMonth === month && localDay === i) {
-        dayDom.classList.add("active");
-      }
-      if (this.pickDate && pickYear === year && pickMonth === month && pickDay === i) {
-        dayDom.classList.add("select");
-      }
-      dayDom.innerText = `${i}`;
-      dayDom.onclick = (evt) => {
-        const newMonth = month - 1;
-        this.now = new Date(year, newMonth, i);
-        this._setDatePick(year, newMonth, i);
-        evt.stopPropagation();
-      };
-      this.dom.day.append(dayDom);
-    }
-    const nextEndDay = 6 * 7 - curWeek - curDay;
-    for (let i = 1; i <= nextEndDay; i++) {
-      const dayDom = document.createElement("div");
-      dayDom.classList.add("disable");
-      dayDom.innerText = `${i}`;
-      dayDom.onclick = () => {
-        this.now = new Date(year, month, i);
-        this._setDatePick(year, month, i);
-      };
-      this.dom.day.append(dayDom);
-    }
-  }
-  _toggleDateTimePicker() {
-    if (this.isDatePicker) {
-      this.dom.dateWrap.classList.add("active");
-      this.dom.timeWrap.classList.remove("active");
-      this.dom.menu.time.innerText = this.lang.timeSelect;
-    } else {
-      this.dom.dateWrap.classList.remove("active");
-      this.dom.timeWrap.classList.add("active");
-      this.dom.menu.time.innerText = this.lang.return;
-      this._setTimePick();
-    }
-  }
-  _setDatePick(year, month, day) {
-    var _a, _b, _c;
-    this.now = new Date(year, month, day);
-    (_a = this.pickDate) == null ? void 0 : _a.setFullYear(year);
-    (_b = this.pickDate) == null ? void 0 : _b.setMonth(month);
-    (_c = this.pickDate) == null ? void 0 : _c.setDate(day);
-    this._update();
-  }
-  _setTimePick(isIntoView = true) {
-    var _a, _b, _c;
-    const hour = ((_a = this.pickDate) == null ? void 0 : _a.getHours()) || 0;
-    const minute = ((_b = this.pickDate) == null ? void 0 : _b.getMinutes()) || 0;
-    const second = ((_c = this.pickDate) == null ? void 0 : _c.getSeconds()) || 0;
-    const { hour: hourDom, minute: minuteDom, second: secondDom } = this.dom.time;
-    const timeDomList = [hourDom, minuteDom, secondDom];
-    timeDomList.forEach((timeDom) => {
-      timeDom.querySelectorAll("li").forEach((li) => li.classList.remove("active"));
-    });
-    const pickList = [
-      [hourDom, hour],
-      [minuteDom, minute],
-      [secondDom, second]
-    ];
-    pickList.forEach(([dom, time]) => {
-      const pickDom = dom.querySelector(`[data-id='${time}']`);
-      pickDom.classList.add("active");
-      if (isIntoView) {
-        this._scrollIntoView(dom, pickDom);
+    previewerContainer.onwheel = (evt) => {
+      evt.preventDefault();
+      if (evt.deltaY < 0) {
+        scaleSize += 0.1;
+      } else {
+        if (scaleSize - 0.1 <= 0.1)
+          return;
+        scaleSize -= 0.1;
       }
-    });
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
   }
-  _scrollIntoView(container, selected) {
-    if (!selected) {
-      container.scrollTop = 0;
+  _setPreviewerTransform(scale, rotate, x, y) {
+    if (!this.previewerImage)
       return;
-    }
-    const offsetParents = [];
-    let pointer = selected.offsetParent;
-    while (pointer && container !== pointer && container.contains(pointer)) {
-      offsetParents.push(pointer);
-      pointer = pointer.offsetParent;
-    }
-    const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
-    const bottom = top + selected.offsetHeight;
-    const viewRectTop = container.scrollTop;
-    const viewRectBottom = viewRectTop + container.clientHeight;
-    if (top < viewRectTop) {
-      container.scrollTop = top;
-    } else if (bottom > viewRectBottom) {
-      container.scrollTop = bottom - container.clientHeight;
-    }
-  }
-  _preMonth() {
-    this.now.setMonth(this.now.getMonth() - 1);
-    this._update();
-  }
-  _nextMonth() {
-    this.now.setMonth(this.now.getMonth() + 1);
-    this._update();
-  }
-  _preYear() {
-    this.now.setFullYear(this.now.getFullYear() - 1);
-    this._update();
-  }
-  _nextYear() {
-    this.now.setFullYear(this.now.getFullYear() + 1);
-    this._update();
+    this.previewerImage.style.left = `${x}px`;
+    this.previewerImage.style.top = `${y}px`;
+    this.previewerImage.style.transform = `scale(${scale}) rotate(${rotate * 90}deg)`;
   }
-  _now() {
-    this.pickDate = new Date();
-    this.dispose();
+  _clearPreviewer() {
+    var _a;
+    (_a = this.previewerContainer) == null ? void 0 : _a.remove();
+    this.previewerContainer = null;
+    document.body.style.overflow = "auto";
   }
-  _toggleVisible(isVisible) {
-    if (isVisible) {
-      this.dom.container.classList.add("active");
-    } else {
-      this.dom.container.classList.remove("active");
+  _updateResizerRect(width, height) {
+    const handleSize = this.options.resizerSize;
+    this.resizerSelection.style.width = `${width}px`;
+    this.resizerSelection.style.height = `${height}px`;
+    for (let i = 0; i < 8; i++) {
+      const left2 = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
+      const top = i === 0 || i === 1 || i === 2 ? -handleSize : i === 3 || i === 7 ? height / 2 - handleSize : height - handleSize;
+      this.resizerHandleList[i].style.left = `${left2}px`;
+      this.resizerHandleList[i].style.top = `${top}px`;
     }
   }
-  _submit() {
-    var _a;
-    if (this.options.onSubmit && this.pickDate) {
-      const format = (_a = this.renderOptions) == null ? void 0 : _a.element.dateFormat;
-      const pickDateString = this.formatDate(this.pickDate, format);
-      this.options.onSubmit(pickDateString);
-    }
+  _updateResizerSizeView(width, height) {
+    this.resizerSize.innerText = `${Math.round(width)} \xD7 ${Math.round(height)}`;
   }
-  formatDate(date, format = "yyyy-MM-dd hh:mm:ss") {
-    let dateString = format;
-    const dateOption = {
-      "y+": date.getFullYear().toString(),
-      "M+": (date.getMonth() + 1).toString(),
-      "d+": date.getDate().toString(),
-      "h+": date.getHours().toString(),
-      "m+": date.getMinutes().toString(),
-      "s+": date.getSeconds().toString()
-    };
-    for (const k in dateOption) {
-      const reg = new RegExp("(" + k + ")").exec(format);
-      const key = k;
-      if (reg) {
-        dateString = dateString.replace(reg[1], reg[1].length === 1 ? dateOption[key] : dateOption[key].padStart(reg[1].length, "0"));
-      }
-    }
-    return dateString;
+  render() {
+    this._drawPreviewer();
+    document.body.style.overflow = "hidden";
   }
-  render(option) {
-    this.renderOptions = option;
-    if (this.options.getLang) {
-      this.lang = this.options.getLang();
-      this._setLang();
-    }
-    this._setValue();
-    this._update();
-    this._setPosition();
-    this.isDatePicker = true;
-    this._toggleDateTimePicker();
-    this._toggleVisible(true);
+  drawResizer(element, position = null, options = {}) {
+    this.previewerDrawOption = options;
+    this.curElementSrc = element[options.srcKey || "value"] || "";
+    this.updateResizer(element, position);
+    document.addEventListener("keydown", this._keydown);
   }
-  dispose() {
-    this._toggleVisible(false);
+  updateResizer(element, position = null) {
+    const { scale } = this.options;
+    const elementWidth = element.width * scale;
+    const elementHeight = element.height * scale;
+    this._updateResizerSizeView(elementWidth, elementHeight);
+    const { x: resizerLeft, y: resizerTop } = this._getElementPosition(element, position);
+    this.resizerSelection.style.left = `${resizerLeft}px`;
+    this.resizerSelection.style.top = `${resizerTop}px`;
+    this._updateResizerRect(elementWidth, elementHeight);
+    this.resizerSelection.style.display = "block";
+    this.curElement = element;
+    this.curPosition = position;
+    this.width = elementWidth;
+    this.height = elementHeight;
+  }
+  clearResizer() {
+    this.resizerSelection.style.display = "none";
+    document.removeEventListener("keydown", this._keydown);
   }
 }
 class DateParticle {
@@ -12462,31 +13070,8 @@ class DateParticle {
     __publicField(this, "datePicker");
     this.draw = draw;
     this.range = draw.getRange();
-    const i18n = draw.getI18n();
-    const t = i18n.t.bind(i18n);
-    this.datePicker = new DatePicker({
-      mountDom: draw.getContainer(),
-      onSubmit: this._setValue.bind(this),
-      getLang: () => ({
-        now: t("datePicker.now"),
-        confirm: t("datePicker.confirm"),
-        return: t("datePicker.return"),
-        timeSelect: t("datePicker.timeSelect"),
-        weeks: {
-          sun: t("datePicker.weeks.sun"),
-          mon: t("datePicker.weeks.mon"),
-          tue: t("datePicker.weeks.tue"),
-          wed: t("datePicker.weeks.wed"),
-          thu: t("datePicker.weeks.thu"),
-          fri: t("datePicker.weeks.fri"),
-          sat: t("datePicker.weeks.sat")
-        },
-        year: t("datePicker.year"),
-        month: t("datePicker.month"),
-        hour: t("datePicker.hour"),
-        minute: t("datePicker.minute"),
-        second: t("datePicker.second")
-      })
+    this.datePicker = new DatePicker(draw, {
+      onSubmit: this._setValue.bind(this)
     });
   }
   _setValue(date) {
@@ -12552,17 +13137,13 @@ class DateParticle {
     this.datePicker.dispose();
   }
   renderDatePicker(element, position) {
-    const height = this.draw.getHeight();
-    const pageGap = this.draw.getPageGap();
-    const startTop = this.draw.getPageNo() * (height + pageGap);
     const elementList = this.draw.getElementList();
     const range = this.getDateElementRange();
     const value = range ? elementList.slice(range[0] + 1, range[1] + 1).map((el) => el.value).join("") : "";
     this.datePicker.render({
       value,
-      element,
       position,
-      startTop
+      dateFormat: element.dateFormat
     });
   }
 }
@@ -12725,6 +13306,100 @@ class BlockParticle {
     });
   }
 }
+const contextmenu$1 = {
+  global: {
+    cut: "\u526A\u5207",
+    copy: "\u590D\u5236",
+    paste: "\u7C98\u8D34",
+    selectAll: "\u5168\u9009",
+    print: "\u6253\u5370"
+  },
+  control: {
+    "delete": "\u5220\u9664\u63A7\u4EF6"
+  },
+  hyperlink: {
+    "delete": "\u5220\u9664\u94FE\u63A5",
+    cancel: "\u53D6\u6D88\u94FE\u63A5",
+    edit: "\u7F16\u8F91\u94FE\u63A5"
+  },
+  image: {
+    change: "\u66F4\u6539\u56FE\u7247",
+    saveAs: "\u53E6\u5B58\u4E3A\u56FE\u7247",
+    textWrap: "\u6587\u5B57\u73AF\u7ED5",
+    textWrapType: {
+      embed: "\u5D4C\u5165\u578B",
+      upDown: "\u4E0A\u4E0B\u578B\u73AF\u7ED5",
+      floatTop: "\u6D6E\u4E8E\u6587\u5B57\u4E0A\u65B9",
+      floatBottom: "\u886C\u4E8E\u6587\u5B57\u4E0B\u65B9"
+    }
+  },
+  table: {
+    insertRowCol: "\u63D2\u5165\u884C\u5217",
+    insertTopRow: "\u4E0A\u65B9\u63D2\u51651\u884C",
+    insertBottomRow: "\u4E0B\u65B9\u63D2\u51651\u884C",
+    insertLeftCol: "\u5DE6\u4FA7\u63D2\u51651\u5217",
+    insertRightCol: "\u53F3\u4FA7\u63D2\u51651\u5217",
+    deleteRowCol: "\u5220\u9664\u884C\u5217",
+    deleteRow: "\u5220\u96641\u884C",
+    deleteCol: "\u5220\u96641\u5217",
+    deleteTable: "\u5220\u9664\u6574\u4E2A\u8868\u683C",
+    mergeCell: "\u5408\u5E76\u5355\u5143\u683C",
+    mergeCancelCell: "\u53D6\u6D88\u5408\u5E76",
+    verticalAlign: "\u5782\u76F4\u5BF9\u9F50",
+    verticalAlignTop: "\u9876\u7AEF\u5BF9\u9F50",
+    verticalAlignMiddle: "\u5782\u76F4\u5C45\u4E2D",
+    verticalAlignBottom: "\u5E95\u7AEF\u5BF9\u9F50",
+    border: "\u8868\u683C\u8FB9\u6846",
+    borderAll: "\u6240\u6709\u6846\u7EBF",
+    borderEmpty: "\u65E0\u6846\u7EBF",
+    borderExternal: "\u5916\u4FA7\u6846\u7EBF",
+    borderTd: "\u5355\u5143\u683C\u8FB9\u6846",
+    borderTdTop: "\u4E0A\u8FB9\u6846",
+    borderTdRight: "\u53F3\u8FB9\u6846",
+    borderTdBottom: "\u4E0B\u8FB9\u6846",
+    borderTdLeft: "\u5DE6\u8FB9\u6846",
+    borderTdForward: "\u6B63\u659C\u7EBF",
+    borderTdBack: "\u53CD\u659C\u7EBF"
+  }
+};
+const datePicker$1 = {
+  now: "\u6B64\u523B",
+  confirm: "\u786E\u5B9A",
+  "return": "\u8FD4\u56DE\u65E5\u671F",
+  timeSelect: "\u65F6\u95F4\u9009\u62E9",
+  weeks: {
+    sun: "\u65E5",
+    mon: "\u4E00",
+    tue: "\u4E8C",
+    wed: "\u4E09",
+    thu: "\u56DB",
+    fri: "\u4E94",
+    sat: "\u516D"
+  },
+  year: "\u5E74",
+  month: "\u6708",
+  hour: "\u65F6",
+  minute: "\u5206",
+  second: "\u79D2"
+};
+const frame$1 = {
+  header: "\u9875\u7709",
+  footer: "\u9875\u811A"
+};
+const pageBreak$1 = {
+  displayName: "\u5206\u9875\u7B26"
+};
+const zone$1 = {
+  headerTip: "\u53CC\u51FB\u7F16\u8F91\u9875\u7709",
+  footerTip: "\u53CC\u51FB\u7F16\u8F91\u9875\u811A"
+};
+var zhCN = {
+  contextmenu: contextmenu$1,
+  datePicker: datePicker$1,
+  frame: frame$1,
+  pageBreak: pageBreak$1,
+  zone: zone$1
+};
 const contextmenu = {
   global: {
     cut: "Cut",
@@ -14088,7 +14763,7 @@ class Draw {
     });
   }
   spliceElementList(elementList, start, deleteCount, ...items) {
-    var _a, _b;
+    var _a, _b, _c;
     if (deleteCount > 0) {
       const endIndex = start + deleteCount;
       const endElement = elementList[endIndex];
@@ -14109,7 +14784,7 @@ class Draw {
       if (!this.control.getActiveControl()) {
         let deleteIndex = endIndex - 1;
         while (deleteIndex >= start) {
-          if (((_b = elementList[deleteIndex].control) == null ? void 0 : _b.deletable) !== false) {
+          if (((_c = (_b = elementList[deleteIndex]) == null ? void 0 : _b.control) == null ? void 0 : _c.deletable) !== false) {
             elementList.splice(deleteIndex, 1);
           }
           deleteIndex--;
@@ -14256,10 +14931,18 @@ class Draw {
       this.footer.recovery();
       this.zone.setZone(EditorZone.MAIN);
     }
+    const { startIndex } = this.range.getRange();
+    const isCollapsed = this.range.getIsCollapsed();
     this.render({
-      isSubmitHistory: false,
-      isSetCursor: false
+      isSetCursor: true,
+      curIndex: startIndex,
+      isSubmitHistory: false
     });
+    if (!isCollapsed) {
+      this.cursor.drawCursor({
+        isShow: false
+      });
+    }
     setTimeout(() => {
       if (this.listener.pageModeChange) {
         this.listener.pageModeChange(payload);
@@ -14518,14 +15201,11 @@ class Draw {
         } else {
           const elementWidth = element.width * scale;
           const elementHeight = element.height * scale;
-          const curRowWidth2 = element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width;
-          if (curRowWidth2 + elementWidth > availableWidth) {
-            const surplusWidth = availableWidth - curRowWidth2;
-            const adaptiveWidth = surplusWidth > 0 ? surplusWidth : Math.min(elementWidth, availableWidth);
-            const adaptiveHeight = elementHeight * adaptiveWidth / elementWidth;
-            element.width = adaptiveWidth / scale;
+          if (elementWidth > availableWidth) {
+            const adaptiveHeight = elementHeight * availableWidth / elementWidth;
+            element.width = availableWidth / scale;
             element.height = adaptiveHeight / scale;
-            metrics.width = adaptiveWidth;
+            metrics.width = availableWidth;
             metrics.height = adaptiveHeight;
             metrics.boundingBoxDescent = adaptiveHeight;
           } else {
@@ -14851,7 +15531,7 @@ class Draw {
         rowList.push(row);
       } else {
         curRow.width += metrics.width;
-        if (i === 0 && getIsInlineElement(elementList[1])) {
+        if (i === 0 && getIsBlockElement(elementList[1])) {
           curRow.height = defaultBasicRowMarginHeight;
           curRow.ascent = defaultBasicRowMarginHeight;
         } else if (curRow.height < height) {
@@ -15147,7 +15827,7 @@ class Draw {
   _clearPage(pageNo) {
     const ctx = this.ctxList[pageNo];
     const pageDom = this.pageList[pageNo];
-    ctx.clearRect(0, 0, pageDom.width, pageDom.height);
+    ctx.clearRect(0, 0, Math.max(pageDom.width, this.getWidth()), Math.max(pageDom.height, this.getHeight()));
     this.blockParticle.clear();
   }
   _drawPage(payload) {
@@ -15478,6 +16158,7 @@ class Command {
     __publicField(this, "executeSetControlProperties");
     __publicField(this, "executeSetControlHighlight");
     __publicField(this, "executeUpdateOptions");
+    __publicField(this, "executeInsertTitle");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -15584,6 +16265,7 @@ class Command {
     this.executeLocationGroup = adapt.locationGroup.bind(adapt);
     this.executeSetZone = adapt.setZone.bind(adapt);
     this.executeUpdateOptions = adapt.updateOptions.bind(adapt);
+    this.executeInsertTitle = adapt.insertTitle.bind(adapt);
     this.getImage = adapt.getImage.bind(adapt);
     this.getOptions = adapt.getOptions.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
@@ -16372,6 +17054,7 @@ class CommandAdapt {
       } else {
         if (el.titleId) {
           delete el.titleId;
+          delete el.title;
           delete el.level;
           delete el.size;
           delete el.bold;
@@ -17378,14 +18061,15 @@ class CommandAdapt {
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
-    const { value, width, height } = payload;
+    const { value, width, height, imgDisplay } = payload;
     this.insertElementList([
       {
         value,
         width,
         height,
         id: getUUID(),
-        type: ElementType.IMAGE
+        type: ElementType.IMAGE,
+        imgDisplay
       }
     ]);
   }
@@ -17562,9 +18246,9 @@ class CommandAdapt {
     if (element.imgDisplay === display)
       return;
     element.imgDisplay = display;
+    const { startIndex, endIndex } = this.range.getRange();
     if (display === ImageDisplay.FLOAT_TOP || display === ImageDisplay.FLOAT_BOTTOM) {
       const positionList = this.position.getPositionList();
-      const { startIndex } = this.range.getRange();
       const { coordinate: { leftTop } } = positionList[startIndex];
       element.imgFloatPosition = {
         x: leftTop[0],
@@ -17575,7 +18259,8 @@ class CommandAdapt {
     }
     this.draw.getPreviewer().clearResizer();
     this.draw.render({
-      isSetCursor: false
+      isSetCursor: true,
+      curIndex: endIndex
     });
   }
   getImage(payload) {
@@ -17983,6 +18668,27 @@ class CommandAdapt {
     }
     return result;
   }
+  insertTitle(payload) {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const cloneElement = deepClone(payload);
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const copyElement = getAnchorElement(elementList, startIndex);
+    if (!copyElement)
+      return;
+    const cloneAttr = [
+      ...TABLE_CONTEXT_ATTR,
+      ...EDITOR_ROW_ATTR,
+      ...LIST_CONTEXT_ATTR
+    ];
+    (_a = cloneElement.valueList) == null ? void 0 : _a.forEach((valueItem) => {
+      cloneProperty(cloneAttr, copyElement, valueItem);
+    });
+    this.draw.insertElementList([cloneElement]);
+  }
 }
 class Listener {
   constructor() {