@hufe921/canvas-editor 0.9.60 → 0.9.61

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.9.61](https://github.com/Hufe921/canvas-editor/compare/v0.9.60...v0.9.61) (2023-12-29)
+
+
+### Bug Fixes
+
+* checkbox cannot be selected #382 ([3fb8435](https://github.com/Hufe921/canvas-editor/commit/3fb843570680d1607834b47c5ad86781ea4f5f14)), closes [#382](https://github.com/Hufe921/canvas-editor/issues/382)
+* double-click to expand selection boundary error ([0bd4c5c](https://github.com/Hufe921/canvas-editor/commit/0bd4c5cc51eb400e985d77911c37fd02bf574f07))
+* elements in the table cannot be selected #378 ([1477bd0](https://github.com/Hufe921/canvas-editor/commit/1477bd0e3f2685753ec66f868d5664ce5c4c85c2)), closes [#378](https://github.com/Hufe921/canvas-editor/issues/378)
+* line break error before separator element #379 ([bdb981d](https://github.com/Hufe921/canvas-editor/commit/bdb981d242821d80d3d45f8569badaaa6f3a8a1d)), closes [#379](https://github.com/Hufe921/canvas-editor/issues/379)
+* three click selection paragraph boundary error ([56ea7d8](https://github.com/Hufe921/canvas-editor/commit/56ea7d8bb13d6f57e24e15550a81f6e2c947f653))
+
+
+### Features
+
+* enter to delete list #376 ([f542739](https://github.com/Hufe921/canvas-editor/commit/f542739d3eb1be273e1f77c3a908dab329f8c619)), closes [#376](https://github.com/Hufe921/canvas-editor/issues/376)
+
+
+
 ## [0.9.60](https://github.com/Hufe921/canvas-editor/compare/v0.9.59...v0.9.60) (2023-12-23)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.60";
+const version = "0.9.61";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -4111,12 +4111,14 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
   if (!copyElement)
     return;
   const { isBreakWhenWrap = false } = options || {};
+  let isBreakWarped = false;
   for (let e = 0; e < formatElementList2.length; e++) {
     const targetElement = formatElementList2[e];
     if (isBreakWhenWrap && !copyElement.listId && /^\n/.test(targetElement.value)) {
-      break;
+      isBreakWarped = true;
     }
-    if (!copyElement.listId && targetElement.type === ElementType.LIST) {
+    if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
+      cloneProperty(TABLE_CONTEXT_ATTR, copyElement, targetElement);
       (_a = targetElement.valueList) == null ? void 0 : _a.forEach((valueItem) => {
         cloneProperty(TABLE_CONTEXT_ATTR, copyElement, valueItem);
       });
@@ -5133,18 +5135,22 @@ function mousedown(evt, host) {
     const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
     if (isSetCheckbox) {
       const { checkbox, control } = curElement;
-      const codes = ((_a = control == null ? void 0 : control.code) == null ? void 0 : _a.split(",")) || [];
-      if (checkbox == null ? void 0 : checkbox.value) {
-        const codeIndex = codes.findIndex((c) => c === checkbox.code);
-        codes.splice(codeIndex, 1);
+      if (!control) {
+        draw.getCheckboxParticle().setSelect(curElement);
       } else {
-        if (checkbox == null ? void 0 : checkbox.code) {
-          codes.push(checkbox.code);
+        const codes = ((_a = control == null ? void 0 : control.code) == null ? void 0 : _a.split(",")) || [];
+        if (checkbox == null ? void 0 : checkbox.value) {
+          const codeIndex = codes.findIndex((c) => c === checkbox.code);
+          codes.splice(codeIndex, 1);
+        } else {
+          if (checkbox == null ? void 0 : checkbox.code) {
+            codes.push(checkbox.code);
+          }
+        }
+        const activeControl = draw.getControl().getActiveControl();
+        if (activeControl instanceof CheckboxControl) {
+          activeControl.setSelect(codes);
         }
-      }
-      const activeControl = draw.getControl().getActiveControl();
-      if (activeControl instanceof CheckboxControl) {
-        activeControl.setSelect(codes);
       }
     } else {
       draw.render({
@@ -5388,8 +5394,102 @@ function mousemove(evt, host) {
     isCompute: false
   });
 }
+var EditorComponent;
+(function(EditorComponent2) {
+  EditorComponent2["COMPONENT"] = "component";
+  EditorComponent2["MENU"] = "menu";
+  EditorComponent2["MAIN"] = "main";
+  EditorComponent2["FOOTER"] = "footer";
+  EditorComponent2["CONTEXTMENU"] = "contextmenu";
+  EditorComponent2["POPUP"] = "popup";
+  EditorComponent2["CATALOG"] = "catalog";
+  EditorComponent2["COMMENT"] = "comment";
+})(EditorComponent || (EditorComponent = {}));
+var EditorContext;
+(function(EditorContext2) {
+  EditorContext2["PAGE"] = "page";
+  EditorContext2["TABLE"] = "table";
+})(EditorContext || (EditorContext = {}));
+var EditorMode;
+(function(EditorMode2) {
+  EditorMode2["EDIT"] = "edit";
+  EditorMode2["CLEAN"] = "clean";
+  EditorMode2["READONLY"] = "readonly";
+  EditorMode2["FORM"] = "form";
+  EditorMode2["PRINT"] = "print";
+})(EditorMode || (EditorMode = {}));
+var EditorZone;
+(function(EditorZone2) {
+  EditorZone2["HEADER"] = "header";
+  EditorZone2["MAIN"] = "main";
+  EditorZone2["FOOTER"] = "footer";
+})(EditorZone || (EditorZone = {}));
+var PageMode;
+(function(PageMode2) {
+  PageMode2["PAGING"] = "paging";
+  PageMode2["CONTINUITY"] = "continuity";
+})(PageMode || (PageMode = {}));
+var PaperDirection;
+(function(PaperDirection2) {
+  PaperDirection2["VERTICAL"] = "vertical";
+  PaperDirection2["HORIZONTAL"] = "horizontal";
+})(PaperDirection || (PaperDirection = {}));
+var WordBreak;
+(function(WordBreak2) {
+  WordBreak2["BREAK_ALL"] = "break-all";
+  WordBreak2["BREAK_WORD"] = "break-word";
+})(WordBreak || (WordBreak = {}));
+function enter(evt, host) {
+  var _a, _b;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  const control = draw.getControl();
+  if (isReadonly || control.isPartRangeInControlOutside())
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = rangeManager.getIsCollapsed();
+  const elementList = draw.getElementList();
+  const startElement = elementList[startIndex];
+  const endElement = elementList[endIndex];
+  if (isCollapsed && endElement.listId && endElement.value === ZERO && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.listId) !== endElement.listId) {
+    draw.getListParticle().unsetList();
+    return;
+  }
+  const enterText = {
+    value: ZERO
+  };
+  if (evt.shiftKey && startElement.listId) {
+    enterText.listWrap = true;
+  }
+  if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
+    formatElementContext(elementList, [enterText], startIndex);
+  }
+  const activeControl = control.getActiveControl();
+  let curIndex;
+  if (activeControl && !control.isRangInPostfix()) {
+    curIndex = control.setValue([enterText]);
+  } else {
+    const position = draw.getPosition();
+    const cursorPosition = position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { index: index2 } = cursorPosition;
+    if (isCollapsed) {
+      draw.spliceElementList(elementList, index2 + 1, 0, enterText);
+    } else {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex, enterText);
+    }
+    curIndex = index2 + 1;
+  }
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+  }
+  evt.preventDefault();
+}
 function keydown(evt, host) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   if (host.isComposing)
     return;
   const draw = host.getDraw();
@@ -5461,35 +5561,7 @@ function keydown(evt, host) {
     rangeManager.setRange(curIndex, curIndex);
     draw.render({ curIndex });
   } else if (evt.key === KeyMap.Enter) {
-    if (isReadonly || control.isPartRangeInControlOutside())
-      return;
-    const enterText = {
-      value: ZERO
-    };
-    const startElement = elementList[startIndex];
-    const endElement = elementList[endIndex];
-    if (evt.shiftKey && startElement.listId) {
-      enterText.listWrap = true;
-    }
-    if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
-      formatElementContext(elementList, [enterText], startIndex);
-    }
-    let curIndex;
-    if (activeControl && !control.isRangInPostfix()) {
-      curIndex = control.setValue([enterText]);
-    } else {
-      if (isCollapsed) {
-        draw.spliceElementList(elementList, index2 + 1, 0, enterText);
-      } else {
-        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex, enterText);
-      }
-      curIndex = index2 + 1;
-    }
-    if (~curIndex) {
-      rangeManager.setRange(curIndex, curIndex);
-      draw.render({ curIndex });
-    }
-    evt.preventDefault();
+    enter(evt, host);
   } else if (evt.key === KeyMap.Left) {
     if (isReadonly)
       return;
@@ -5499,7 +5571,7 @@ function keydown(evt, host) {
       if (isMod(evt)) {
         const LETTER_REG = draw.getLetterReg();
         const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition2 == null ? void 0 : cursorPosition2.index) ? endIndex : startIndex;
-        if (LETTER_REG.test((_c = elementList[moveStartIndex]) == null ? void 0 : _c.value)) {
+        if (LETTER_REG.test((_b = elementList[moveStartIndex]) == null ? void 0 : _b.value)) {
           let i = moveStartIndex - 1;
           while (i > 0) {
             const element = elementList[i];
@@ -5548,7 +5620,7 @@ function keydown(evt, host) {
       if (isMod(evt)) {
         const LETTER_REG = draw.getLetterReg();
         const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition2 == null ? void 0 : cursorPosition2.index) ? endIndex : startIndex;
-        if (LETTER_REG.test((_d = elementList[moveStartIndex + 1]) == null ? void 0 : _d.value)) {
+        if (LETTER_REG.test((_c = elementList[moveStartIndex + 1]) == null ? void 0 : _c.value)) {
           let i = moveStartIndex + 2;
           while (i < elementList.length) {
             const element = elementList[i];
@@ -5962,8 +6034,11 @@ function dblclick(host, evt) {
       }
     }
   }
+  const startIndex = index2 - upCount - 1;
+  if (startIndex < 0)
+    return;
   const rangeManager = draw.getRange();
-  rangeManager.setRange(index2 - upCount - 1, index2 + downCount);
+  rangeManager.setRange(startIndex, index2 + downCount);
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
@@ -5972,6 +6047,7 @@ function dblclick(host, evt) {
   rangeManager.setRangeStyle();
 }
 function threeClick(host) {
+  var _a, _b;
   const draw = host.getDraw();
   const position = draw.getPosition();
   const cursorPosition = position.getCursorPosition();
@@ -5983,26 +6059,36 @@ function threeClick(host) {
   let downCount = 0;
   let upStartIndex = index2 - 1;
   while (upStartIndex > 0) {
-    const value = elementList[upStartIndex].value;
-    if (value !== ZERO) {
-      upCount++;
-      upStartIndex--;
-    } else {
+    const element = elementList[upStartIndex];
+    const preElement = elementList[upStartIndex - 1];
+    if (element.value === ZERO && !element.listWrap || element.listId !== (preElement == null ? void 0 : preElement.listId) || element.titleId !== (preElement == null ? void 0 : preElement.titleId)) {
       break;
     }
+    upCount++;
+    upStartIndex--;
   }
   let downStartIndex = index2 + 1;
   while (downStartIndex < elementList.length) {
-    const value = elementList[downStartIndex].value;
-    if (value !== ZERO) {
-      downCount++;
-      downStartIndex++;
-    } else {
+    const element = elementList[downStartIndex];
+    const nextElement = elementList[downStartIndex + 1];
+    if (element.value === ZERO && !element.listWrap || element.listId !== (nextElement == null ? void 0 : nextElement.listId) || element.titleId !== (nextElement == null ? void 0 : nextElement.titleId)) {
       break;
     }
+    downCount++;
+    downStartIndex++;
   }
   const rangeManager = draw.getRange();
-  rangeManager.setRange(index2 - upCount - 1, index2 + downCount);
+  let newStartIndex = index2 - upCount - 1;
+  if (((_a = elementList[newStartIndex]) == null ? void 0 : _a.value) !== ZERO) {
+    newStartIndex -= 1;
+  }
+  if (newStartIndex < 0)
+    return;
+  let newEndIndex = index2 + downCount + 1;
+  if (((_b = elementList[newEndIndex]) == null ? void 0 : _b.value) === ZERO) {
+    newEndIndex -= 1;
+  }
+  rangeManager.setRange(newStartIndex, newEndIndex);
   draw.render({
     isSubmitHistory: false,
     isSetCursor: false,
@@ -6384,51 +6470,6 @@ class HistoryManager {
     this.redoStack = [];
   }
 }
-var EditorComponent;
-(function(EditorComponent2) {
-  EditorComponent2["COMPONENT"] = "component";
-  EditorComponent2["MENU"] = "menu";
-  EditorComponent2["MAIN"] = "main";
-  EditorComponent2["FOOTER"] = "footer";
-  EditorComponent2["CONTEXTMENU"] = "contextmenu";
-  EditorComponent2["POPUP"] = "popup";
-  EditorComponent2["CATALOG"] = "catalog";
-  EditorComponent2["COMMENT"] = "comment";
-})(EditorComponent || (EditorComponent = {}));
-var EditorContext;
-(function(EditorContext2) {
-  EditorContext2["PAGE"] = "page";
-  EditorContext2["TABLE"] = "table";
-})(EditorContext || (EditorContext = {}));
-var EditorMode;
-(function(EditorMode2) {
-  EditorMode2["EDIT"] = "edit";
-  EditorMode2["CLEAN"] = "clean";
-  EditorMode2["READONLY"] = "readonly";
-  EditorMode2["FORM"] = "form";
-  EditorMode2["PRINT"] = "print";
-})(EditorMode || (EditorMode = {}));
-var EditorZone;
-(function(EditorZone2) {
-  EditorZone2["HEADER"] = "header";
-  EditorZone2["MAIN"] = "main";
-  EditorZone2["FOOTER"] = "footer";
-})(EditorZone || (EditorZone = {}));
-var PageMode;
-(function(PageMode2) {
-  PageMode2["PAGING"] = "paging";
-  PageMode2["CONTINUITY"] = "continuity";
-})(PageMode || (PageMode = {}));
-var PaperDirection;
-(function(PaperDirection2) {
-  PaperDirection2["VERTICAL"] = "vertical";
-  PaperDirection2["HORIZONTAL"] = "horizontal";
-})(PaperDirection || (PaperDirection = {}));
-var WordBreak;
-(function(WordBreak2) {
-  WordBreak2["BREAK_ALL"] = "break-all";
-  WordBreak2["BREAK_WORD"] = "break-word";
-})(WordBreak || (WordBreak = {}));
 class Position {
   constructor(draw) {
     __publicField(this, "cursorPosition");
@@ -6939,7 +6980,6 @@ class RangeManager {
     return rowElementList;
   }
   getRangeParagraph() {
-    var _a, _b, _c;
     const { startIndex, endIndex } = this.range;
     if (!~startIndex && !~endIndex)
       return null;
@@ -6957,7 +6997,9 @@ class RangeManager {
       if (!rowArray.includes(rowNo)) {
         rowArray.unshift(rowNo);
       }
-      if (((_a = positionList[start]) == null ? void 0 : _a.value) === ZERO || elementList[start].titleId !== ((_b = elementList[start - 1]) == null ? void 0 : _b.titleId)) {
+      const element = elementList[start];
+      const preElement = elementList[start - 1];
+      if (element.value === ZERO && !element.listWrap || element.listId !== (preElement == null ? void 0 : preElement.listId) || element.titleId !== (preElement == null ? void 0 : preElement.titleId)) {
         break;
       }
       start--;
@@ -6979,7 +7021,9 @@ class RangeManager {
     }
     let end = endIndex;
     while (end < positionList.length) {
-      if (positionList[end].value === ZERO || elementList[end].titleId !== ((_c = elementList[end + 1]) == null ? void 0 : _c.titleId)) {
+      const element = elementList[end];
+      const nextElement = elementList[end + 1];
+      if (element.value === ZERO && !element.listWrap || element.listId !== (nextElement == null ? void 0 : nextElement.listId) || element.titleId !== (nextElement == null ? void 0 : nextElement.titleId)) {
         break;
       }
       const { pageNo, rowNo } = positionList[end];
@@ -7019,12 +7063,15 @@ class RangeManager {
   getIsSelectAll() {
     const elementList = this.draw.getElementList();
     const { startIndex, endIndex } = this.range;
-    return startIndex === 0 && elementList.length - 1 === endIndex;
+    return startIndex === 0 && elementList.length - 1 === endIndex && !this.position.getPositionContext().isTable;
   }
   getIsPointInRange(x, y) {
     const { startIndex, endIndex } = this.range;
     const positionList = this.position.getPositionList();
     for (let p = startIndex + 1; p <= endIndex; p++) {
+      const position = positionList[p];
+      if (!position)
+        break;
       const { coordinate: { leftTop, rightBottom } } = positionList[p];
       if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
         return true;
@@ -9909,9 +9956,25 @@ class Control {
 }
 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, fontStyle }, scale } = this.options;
     const { metrics, checkbox } = element;
@@ -11590,12 +11653,79 @@ class Footer {
 }
 class ListParticle {
   constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "range");
     __publicField(this, "options");
     __publicField(this, "UN_COUNT_STYLE_WIDTH", 20);
     __publicField(this, "MEASURE_BASE_TEXT", "0");
     __publicField(this, "LIST_GAP", 10);
+    this.draw = draw;
+    this.range = draw.getRange();
     this.options = draw.getOptions();
   }
+  setList(listType, listStyle) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const changeElementList = this.range.getRangeParagraphElementList();
+    if (!changeElementList || !changeElementList.length)
+      return;
+    const isUnsetList = changeElementList.find((el) => el.listType === listType && el.listStyle === listStyle);
+    if (isUnsetList || !listType) {
+      this.unsetList();
+      return;
+    }
+    const listId = getUUID();
+    changeElementList.forEach((el) => {
+      el.listId = listId;
+      el.listType = listType;
+      el.listStyle = listStyle;
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
+  unsetList() {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const changeElementList = (_a = this.range.getRangeParagraphElementList()) == null ? void 0 : _a.filter((el) => el.listId);
+    if (!changeElementList || !changeElementList.length)
+      return;
+    const elementList = this.draw.getElementList();
+    const endElement = elementList[endIndex];
+    if (endElement.listId) {
+      let start = endIndex + 1;
+      while (start < elementList.length) {
+        const element = elementList[start];
+        if (element.value === ZERO && !element.listWrap)
+          break;
+        if (element.listId !== endElement.listId) {
+          this.draw.spliceElementList(elementList, start, 0, {
+            value: ZERO
+          });
+          break;
+        }
+        start++;
+      }
+    }
+    changeElementList.forEach((el) => {
+      delete el.listId;
+      delete el.listType;
+      delete el.listStyle;
+      delete el.listWrap;
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
   computeListStyle(ctx, elementList) {
     const listStyleMap = new Map();
     let start = 0;
@@ -12406,6 +12536,9 @@ class Draw {
   getListParticle() {
     return this.listParticle;
   }
+  getCheckboxParticle() {
+    return this.checkboxParticle;
+  }
   getControl() {
     return this.control;
   }
@@ -12965,7 +13098,7 @@ class Draw {
         }
       }
       listId = element.listId;
-      if (element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || curRowWidth > availableWidth || i !== 0 && element.value === ZERO || (preElement == null ? void 0 : preElement.listId) !== element.listId) {
+      if (element.type === ElementType.SEPARATOR || element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || curRowWidth > availableWidth || i !== 0 && element.value === ZERO || (preElement == null ? void 0 : preElement.listId) !== element.listId) {
         if (curRow.startIndex === 0 && curRow.elementList.length === 1 && INLINE_ELEMENT_TYPE.includes(element.type)) {
           curRow.height = defaultBasicRowMarginHeight;
         }
@@ -14115,30 +14248,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const { startIndex, endIndex } = this.range.getRange();
-    if (!~startIndex && !~endIndex)
-      return;
-    const changeElementList = this.range.getRangeParagraphElementList();
-    if (!changeElementList || !changeElementList.length)
-      return;
-    const isUnsetList = changeElementList.find((el) => el.listType === listType && el.listStyle === listStyle);
-    const listId = getUUID();
-    changeElementList.forEach((el) => {
-      if (!isUnsetList && listType) {
-        el.listId = listId;
-        el.listType = listType;
-        el.listStyle = listStyle;
-      } else {
-        if (el.listId) {
-          delete el.listId;
-          delete el.listType;
-          delete el.listStyle;
-        }
-      }
-    });
-    const isSetCursor = startIndex === endIndex;
-    const curIndex = isSetCursor ? endIndex : startIndex;
-    this.draw.render({ curIndex, isSetCursor });
+    this.draw.getListParticle().setList(listType, listStyle);
   }
   rowFlex(payload) {
     const isReadonly = this.draw.isReadonly();