@hufe921/canvas-editor 0.9.90 → 0.9.91

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.9.91](https://github.com/Hufe921/canvas-editor/compare/v0.9.90...v0.9.91) (2024-08-25)
+
+
+### Bug Fixes
+
+* format different types of line breaks #769 ([f65ff87](https://github.com/Hufe921/canvas-editor/commit/f65ff87e44728322417d235d2347ceca25cc6667)), closes [#769](https://github.com/Hufe921/canvas-editor/issues/769)
+* format initial data boundary error #771 #784 ([f62a315](https://github.com/Hufe921/canvas-editor/commit/f62a315a7bd04e49e9e17bc7737ccd1f0e751d69)), closes [#771](https://github.com/Hufe921/canvas-editor/issues/771) [#784](https://github.com/Hufe921/canvas-editor/issues/784)
+* set row margin boundary error ([5285170](https://github.com/Hufe921/canvas-editor/commit/528517094373b5fa9ca2145bb259889db865a588))
+
+
+### Features
+
+* add page border ([3f6bdf6](https://github.com/Hufe921/canvas-editor/commit/3f6bdf6fcb583ab370cb5abe3eafebf6100f415e))
+* hit checkbox/radio control when click on label #651 ([31b76b6](https://github.com/Hufe921/canvas-editor/commit/31b76b6fb6640ea75383569cb16ad1b5a2ccf25f)), closes [#651](https://github.com/Hufe921/canvas-editor/issues/651)
+
+
+
 ## [0.9.90](https://github.com/Hufe921/canvas-editor/compare/v0.9.89...v0.9.90) (2024-08-18)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.90";
+const version = "0.9.91";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -3768,11 +3768,9 @@ function unzipElementList(elementList) {
   return result;
 }
 function formatElementList(elementList, options) {
-  const { isHandleFirstElement, editorOptions } = __spreadValues({
-    isHandleFirstElement: true
-  }, options);
+  const { isHandleFirstElement = true, isForceCompensation = false, editorOptions } = options;
   const startElement = elementList[0];
-  if (isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
+  if (isForceCompensation || isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
     elementList.unshift({
       value: ZERO
     });
@@ -3784,7 +3782,8 @@ function formatElementList(elementList, options) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
       formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-        isHandleFirstElement: false
+        isHandleFirstElement: false,
+        isForceCompensation: false
       }));
       if (valueList.length) {
         const titleId = getUUID();
@@ -3813,7 +3812,8 @@ function formatElementList(elementList, options) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
       formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-        isHandleFirstElement: true
+        isHandleFirstElement: true,
+        isForceCompensation: false
       }));
       if (valueList.length) {
         const listId = getUUID();
@@ -3847,7 +3847,8 @@ function formatElementList(elementList, options) {
             const tdId = getUUID();
             td.id = tdId;
             formatElementList(td.value, __spreadProps(__spreadValues({}, options), {
-              isHandleFirstElement: true
+              isHandleFirstElement: true,
+              isForceCompensation: true
             }));
             for (let v = 0; v < td.value.length; v++) {
               const value = td.value[v];
@@ -4002,7 +4003,8 @@ function formatElementList(elementList, options) {
             }
           }
           formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-            isHandleFirstElement: false
+            isHandleFirstElement: false,
+            isForceCompensation: false
           }));
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
@@ -4055,7 +4057,7 @@ function formatElementList(elementList, options) {
       }
       el = elementList[i];
     }
-    if (el.value === "\n") {
+    if (el.value === "\n" || el.value == "\r\n") {
       el.value = ZERO;
     }
     if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
@@ -5658,7 +5660,40 @@ function setRangeCache(host) {
   host.cachePositionList = position.getPositionList();
   host.cachePositionContext = position.getPositionContext();
 }
+function hitCheckbox(element, draw) {
+  const { checkbox, control } = element;
+  if (!control) {
+    draw.getCheckboxParticle().setSelect(element);
+  } else {
+    const codes = (control == null ? void 0 : control.code) ? control.code.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);
+    }
+  }
+}
+function hitRadio(element, draw) {
+  const { radio, control } = element;
+  if (!control) {
+    draw.getRadioParticle().setSelect(element);
+  } else {
+    const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof RadioControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
 function mousedown(evt, host) {
+  var _a, _b;
   if (evt.button === MouseEventButton.RIGHT)
     return;
   const draw = host.getDraw();
@@ -5719,37 +5754,22 @@ function mousedown(evt, host) {
     }
     rangeManager.setRange(startIndex, endIndex);
     position.setCursorPosition(positionList[curIndex]);
-    const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
-    const isSetRadio = isDirectHitRadio && !isReadonly;
-    if (isSetCheckbox) {
-      const { checkbox, control } = curElement;
-      if (!control) {
-        draw.getCheckboxParticle().setSelect(curElement);
-      } else {
-        const codes = (control == null ? void 0 : control.code) ? control.code.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);
-        }
-      }
-    } else if (isSetRadio) {
-      const { control, radio } = curElement;
-      if (!control) {
-        draw.getRadioParticle().setSelect(curElement);
-      } else {
-        const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
-        const activeControl = draw.getControl().getActiveControl();
-        if (activeControl instanceof RadioControl) {
-          activeControl.setSelect(codes);
+    if (isDirectHitCheckbox && !isReadonly) {
+      hitCheckbox(curElement, draw);
+    } else if (isDirectHitRadio && !isReadonly) {
+      hitRadio(curElement, draw);
+    } else if (curElement.controlComponent === ControlComponent.VALUE && (((_a = curElement.control) == null ? void 0 : _a.type) === ControlType.CHECKBOX || ((_b = curElement.control) == null ? void 0 : _b.type) === ControlType.RADIO)) {
+      let preIndex = curIndex;
+      while (preIndex > 0) {
+        const preElement = elementList[preIndex];
+        if (preElement.controlComponent === ControlComponent.CHECKBOX) {
+          hitCheckbox(preElement, draw);
+          break;
+        } else if (preElement.controlComponent === ControlComponent.RADIO) {
+          hitRadio(preElement, draw);
+          break;
         }
+        preIndex--;
       }
     } else {
       draw.render({
@@ -8526,7 +8546,7 @@ class RangeManager {
     this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
   }
   setRangeStyle() {
-    var _a;
+    var _a, _b;
     const rangeStyleChangeListener = this.listener.rangeStyleChange;
     const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
     if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
@@ -8560,7 +8580,7 @@ class RangeManager {
     const color = curElement.color || null;
     const highlight = curElement.highlight || null;
     const rowFlex = curElement.rowFlex || null;
-    const rowMargin = curElement.rowMargin || this.options.defaultRowMargin;
+    const rowMargin = (_a = curElement.rowMargin) != null ? _a : this.options.defaultRowMargin;
     const dashArray = curElement.dashArray || [];
     const level = curElement.level || null;
     const listType = curElement.listType || null;
@@ -8570,7 +8590,7 @@ class RangeManager {
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
     const groupIds = curElement.groupIds || null;
-    const extension = (_a = curElement.extension) != null ? _a : null;
+    const extension = (_b = curElement.extension) != null ? _b : null;
     const rangeStyle = {
       type,
       undo,
@@ -12506,7 +12526,8 @@ class Control {
       const elementList = zipElementList(pageComponentData[pageComponentKey]);
       pageComponentData[pageComponentKey] = elementList;
       formatElementList(elementList, {
-        editorOptions: this.options
+        editorOptions: this.options,
+        isForceCompensation: true
       });
     }
     this.draw.setEditorData(pageComponentData);
@@ -14472,7 +14493,8 @@ class Placeholder {
       }
     ];
     formatElementList(this.elementList, {
-      editorOptions: this.options
+      editorOptions: this.options,
+      isForceCompensation: true
     });
     this._compute();
     const innerWidth = this.draw.getInnerWidth();
@@ -14715,6 +14737,33 @@ class LineNumber {
     ctx.restore();
   }
 }
+class PageBorder {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "header");
+    __publicField(this, "footer");
+    __publicField(this, "options");
+    this.draw = draw;
+    this.header = draw.getHeader();
+    this.footer = draw.getFooter();
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    const { scale, pageBorder: { color, lineWidth, padding } } = this.options;
+    ctx.save();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth * scale;
+    const margins = this.draw.getMargins();
+    const x = margins[3] - padding[3] * scale;
+    const y = margins[0] + this.header.getExtraHeight() - padding[0] * scale;
+    const width = this.draw.getInnerWidth() + (padding[1] + padding[3]) * scale;
+    const height = this.draw.getHeight() - y - this.footer.getExtraHeight() - margins[2] + padding[2] * scale;
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener, eventBus, override) {
     __publicField(this, "container");
@@ -14768,6 +14817,7 @@ class Draw {
     __publicField(this, "listParticle");
     __publicField(this, "lineBreakParticle");
     __publicField(this, "control");
+    __publicField(this, "pageBorder");
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
     __publicField(this, "selectionObserver");
@@ -14832,6 +14882,7 @@ class Draw {
     this.listParticle = new ListParticle(this);
     this.lineBreakParticle = new LineBreakParticle(this);
     this.control = new Control(this);
+    this.pageBorder = new PageBorder(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver(this);
     this.imageObserver = new ImageObserver();
@@ -15513,7 +15564,8 @@ class Draw {
       if (!data2)
         return;
       formatElementList(data2, {
-        editorOptions: this.options
+        editorOptions: this.options,
+        isForceCompensation: true
       });
     });
     this.setEditorData({
@@ -15597,11 +15649,12 @@ class Draw {
     return el.actualSize || el.size || this.options.defaultSize;
   }
   getElementRowMargin(el) {
+    var _a;
     const { defaultBasicRowMarginHeight, defaultRowMargin, scale } = this.options;
-    return defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale;
+    return defaultBasicRowMarginHeight * ((_a = el.rowMargin) != null ? _a : defaultRowMargin) * scale;
   }
   computeRowList(payload) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const { innerWidth, elementList, isPagingMode = false } = payload;
     const { defaultSize, defaultRowMargin, scale, table: { tdPadding }, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
@@ -15626,7 +15679,7 @@ class Draw {
     for (let i = 0; i < elementList.length; i++) {
       const curRow = rowList[rowList.length - 1];
       const element = elementList[i];
-      const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin);
+      const rowMargin = defaultBasicRowMarginHeight * ((_c = element.rowMargin) != null ? _c : defaultRowMargin);
       const metrics = {
         width: 0,
         height: 0,
@@ -15679,7 +15732,7 @@ class Draw {
             elementList.splice(i + 1, combineCount);
           }
         }
-        element.pagingIndex = (_c = element.pagingIndex) != null ? _c : 0;
+        element.pagingIndex = (_d = element.pagingIndex) != null ? _d : 0;
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -15755,7 +15808,7 @@ class Draw {
           let curPagePreHeight = marginHeight;
           for (let r = 0; r < rowList.length; r++) {
             const row = rowList[r];
-            if (row.height + curPagePreHeight > height2 || ((_d = rowList[r - 1]) == null ? void 0 : _d.isPageBreak)) {
+            if (row.height + curPagePreHeight > height2 || ((_e = rowList[r - 1]) == null ? void 0 : _e.isPageBreak)) {
               curPagePreHeight = marginHeight + row.height;
             } else {
               curPagePreHeight += row.height;
@@ -15776,7 +15829,7 @@ class Draw {
                 const trHeight = tr.height * scale;
                 if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
                   const rowColCount = tr.tdList.reduce((pre, cur) => pre + cur.colspan, 0);
-                  if (((_e = element.colgroup) == null ? void 0 : _e.length) !== rowColCount) {
+                  if (((_f = element.colgroup) == null ? void 0 : _f.length) !== rowColCount) {
                     deleteCount = 0;
                   }
                   break;
@@ -15899,7 +15952,7 @@ class Draw {
         metrics,
         style: this.getElementFont(element, scale)
       });
-      if ((_f = rowElement.control) == null ? void 0 : _f.minWidth) {
+      if ((_g = rowElement.control) == null ? void 0 : _g.minWidth) {
         if (rowElement.controlComponent) {
           controlRealWidth += metrics.width;
         }
@@ -15952,10 +16005,10 @@ class Draw {
           elementList: [rowElement],
           ascent,
           rowIndex: curRow.rowIndex + 1,
-          rowFlex: ((_g = elementList[i]) == null ? void 0 : _g.rowFlex) || ((_h = elementList[i + 1]) == null ? void 0 : _h.rowFlex),
+          rowFlex: ((_h = elementList[i]) == null ? void 0 : _h.rowFlex) || ((_i = elementList[i + 1]) == null ? void 0 : _i.rowFlex),
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
-        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_i = rowElement.control) == null ? void 0 : _i.indentation) === ControlIndentation.VALUE_START) {
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_j = rowElement.control) == null ? void 0 : _j.indentation) === ControlIndentation.VALUE_START) {
           const preStartIndex = curRow.elementList.findIndex((el) => el.controlId === rowElement.controlId && el.controlComponent !== ControlComponent.PREFIX);
           if (~preStartIndex) {
             const preRowPositionList = this.position.computeRowPosition({
@@ -15988,7 +16041,7 @@ class Draw {
       if (isForceBreak || isWidthNotEnough || i === elementList.length - 1) {
         curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
         if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.JUSTIFY || (preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && isWidthNotEnough) {
-          const rowElementList = ((_j = curRow.elementList[0]) == null ? void 0 : _j.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
+          const rowElementList = ((_k = curRow.elementList[0]) == null ? void 0 : _k.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
           const gap = (availableWidth - curRow.width) / (rowElementList.length - 1);
           for (let e = 0; e < rowElementList.length - 1; e++) {
             const el = rowElementList[e];
@@ -16295,7 +16348,7 @@ class Draw {
   _drawPage(payload) {
     var _a, _b;
     const { elementList, positionList, rowList, pageNo } = payload;
-    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber } = this.options;
+    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber, pageBorder } = this.options;
     const innerWidth = this.getInnerWidth();
     const ctx = this.ctxList[pageNo];
     ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1;
@@ -16346,6 +16399,9 @@ class Draw {
     if (!lineNumber.disabled) {
       this.lineNumber.render(ctx, pageNo);
     }
+    if (!pageBorder.disabled) {
+      this.pageBorder.render(ctx);
+    }
   }
   _disconnectLazyRender() {
     var _a;
@@ -16860,6 +16916,12 @@ const defaultLineNumberOption = {
   right: 20,
   type: LineNumberType.CONTINUITY
 };
+const defaultPageBorderOption = {
+  color: "#000000",
+  lineWidth: 1,
+  padding: [0, 5, 0, 5],
+  disabled: true
+};
 function mergeOption(options = {}) {
   const tableOptions = __spreadValues(__spreadValues({}, defaultTableOption), options.table);
   const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
@@ -16879,6 +16941,7 @@ function mergeOption(options = {}) {
   const lineBreakOptions = __spreadValues(__spreadValues({}, defaultLineBreak), options.lineBreak);
   const separatorOptions = __spreadValues(__spreadValues({}, defaultSeparatorOption), options.separator);
   const lineNumberOptions = __spreadValues(__spreadValues({}, defaultLineNumberOption), options.lineNumber);
+  const pageBorderOptions = __spreadValues(__spreadValues({}, defaultPageBorderOption), options.pageBorder);
   return __spreadProps(__spreadValues({
     mode: EditorMode.EDIT,
     defaultType: "TEXT",
@@ -16938,7 +17001,8 @@ function mergeOption(options = {}) {
     background: backgroundOptions,
     lineBreak: lineBreakOptions,
     separator: separatorOptions,
-    lineNumber: lineNumberOptions
+    lineNumber: lineNumberOptions,
+    pageBorder: pageBorderOptions
   });
 }
 function convertPxToPaperSize(width, height) {
@@ -17653,7 +17717,7 @@ class CommandAdapt {
         tdList.push({
           colspan: 1,
           rowspan: 1,
-          value: [{ value: ZERO, size: 16 }]
+          value: []
         });
       }
       trList.push(tr);
@@ -20470,7 +20534,8 @@ class Editor {
     ];
     pageComponentData.forEach((elementList) => {
       formatElementList(elementList, {
-        editorOptions
+        editorOptions,
+        isForceCompensation: true
       });
     });
     this.listener = new Listener();