@hufe921/canvas-editor 0.9.89 → 0.9.90

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.9.90](https://github.com/Hufe921/canvas-editor/compare/v0.9.89...v0.9.90) (2024-08-18)
+
+
+### Bug Fixes
+
+* float image position when scaling the page #766 ([c249b9e](https://github.com/Hufe921/canvas-editor/commit/c249b9eec215fe573b325d1430212f5f01c32099)), closes [#766](https://github.com/Hufe921/canvas-editor/issues/766)
+* get range paragraph info boundary error #758 ([4653fe7](https://github.com/Hufe921/canvas-editor/commit/4653fe7427f4a9ec40700f6a86ff284d1d46088a)), closes [#758](https://github.com/Hufe921/canvas-editor/issues/758)
+* insert block element row flex error #754 ([136b1ff](https://github.com/Hufe921/canvas-editor/commit/136b1ffa55b7b0b78bf3d114400489e1bbab4f17)), closes [#754](https://github.com/Hufe921/canvas-editor/issues/754)
+* paper printing size setting #760 ([7a6dd75](https://github.com/Hufe921/canvas-editor/commit/7a6dd753e59bde4cb581ac215b038dd1cd08c96f)), closes [#760](https://github.com/Hufe921/canvas-editor/issues/760)
+* set editor mode option error #755 ([500cec3](https://github.com/Hufe921/canvas-editor/commit/500cec3e0b63e012f6572dcedb071befa114956e)), closes [#755](https://github.com/Hufe921/canvas-editor/issues/755)
+* set row flex boundary error when deleting element ([2f272de](https://github.com/Hufe921/canvas-editor/commit/2f272dee58169607783e4cfd1347534f49db0834))
+
+
+### Features
+
+* add location property to executeLocationControl api #753 ([d1a1aaa](https://github.com/Hufe921/canvas-editor/commit/d1a1aaa6ae08d8395df1df664d47bfe4fe821869)), closes [#753](https://github.com/Hufe921/canvas-editor/issues/753)
+* add radio and checkbox vertical align setting ([c375466](https://github.com/Hufe921/canvas-editor/commit/c3754663cee25003a7021a6079dd46e2a3a0abd8))
+* get context content width ([187498e](https://github.com/Hufe921/canvas-editor/commit/187498ed3dfba4386375d812d41b31c057ac3af8))
+
+
+
 ## [0.9.89](https://github.com/Hufe921/canvas-editor/compare/v0.9.88...v0.9.89) (2024-08-09)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.89";
+const version = "0.9.90";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -42,6 +42,11 @@ var ImageDisplay;
   ImageDisplay2["FLOAT_TOP"] = "float-top";
   ImageDisplay2["FLOAT_BOTTOM"] = "float-bottom";
 })(ImageDisplay || (ImageDisplay = {}));
+var LocationPosition;
+(function(LocationPosition2) {
+  LocationPosition2["BEFORE"] = "before";
+  LocationPosition2["AFTER"] = "after";
+})(LocationPosition || (LocationPosition = {}));
 const ZERO = "\u200B";
 const WRAP = "\n";
 const NBSP = " ";
@@ -508,8 +513,7 @@ const CONTROL_STYLE_ATTR = [
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
-  ...LIST_CONTEXT_ATTR,
-  ...EDITOR_ROW_ATTR
+  ...LIST_CONTEXT_ATTR
 ];
 const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.TEXT,
@@ -3893,7 +3897,10 @@ function formatElementList(elementList, options) {
       const { editorOptions: { control: controlOption, checkbox: checkboxOption, radio: radioOption } } = options;
       const controlId = getUUID();
       elementList.splice(i, 1);
-      const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR);
+      const controlContext = pickObject(el, [
+        ...EDITOR_ELEMENT_CONTEXT_ATTR,
+        ...EDITOR_ROW_ATTR
+      ]);
       const controlDefaultStyle = pickObject(el.control, CONTROL_STYLE_ATTR);
       const thePrePostfixArg = __spreadProps(__spreadValues({}, controlDefaultStyle), {
         color: editorOptions.control.bracketColor
@@ -4358,17 +4365,21 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
       isBreakWarped = true;
     }
     if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
-      const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
-      cloneProperty(cloneAttr, copyElement, targetElement);
+      const cloneAttr2 = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
+      cloneProperty(cloneAttr2, copyElement, targetElement);
       (_b = targetElement.valueList) == null ? void 0 : _b.forEach((valueItem) => {
-        cloneProperty(cloneAttr, copyElement, valueItem);
+        cloneProperty(cloneAttr2, copyElement, valueItem);
       });
       continue;
     }
     if ((_c = targetElement.valueList) == null ? void 0 : _c.length) {
       formatElementContext(sourceElementList, targetElement.valueList, anchorIndex);
     }
-    cloneProperty(EDITOR_ELEMENT_CONTEXT_ATTR, copyElement, targetElement);
+    const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR];
+    if (!getIsBlockElement(targetElement)) {
+      cloneAttr.push(...EDITOR_ROW_ATTR);
+    }
+    cloneProperty(cloneAttr, copyElement, targetElement);
   }
 }
 function convertElementToDom(element, options) {
@@ -6112,13 +6123,13 @@ function backspace(evt, host) {
     }
     const startElement = elementList[startIndex];
     if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
-      const rowList = draw.getRowList();
-      const positionList = position.getPositionList();
-      const rowNo = positionList[startIndex].rowNo;
-      const rowFlexElementList = rowList[rowNo].elementList;
-      rowFlexElementList.forEach((element) => {
-        delete element.rowFlex;
-      });
+      const rowFlexElementList = rangeManager.getRangeRowElementList();
+      if (rowFlexElementList) {
+        const preElement = elementList[startIndex - 1];
+        rowFlexElementList.forEach((element) => {
+          element.rowFlex = preElement == null ? void 0 : preElement.rowFlex;
+        });
+      }
     }
     if (!isCollapsed) {
       draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
@@ -8351,7 +8362,8 @@ class RangeManager {
       }
       start--;
     }
-    if (startIndex !== endIndex) {
+    const isCollapsed = startIndex === endIndex;
+    if (!isCollapsed) {
       let middle = startIndex + 1;
       while (middle < endIndex) {
         const { pageNo, rowNo } = positionList[middle];
@@ -8367,6 +8379,9 @@ class RangeManager {
       }
     }
     let end = endIndex;
+    if (isCollapsed && elementList[startIndex].value === ZERO) {
+      end += 1;
+    }
     while (end < positionList.length) {
       const element = elementList[end];
       const nextElement = elementList[end + 1];
@@ -12774,6 +12789,12 @@ class Control {
     });
   }
 }
+var VerticalAlign;
+(function(VerticalAlign2) {
+  VerticalAlign2["TOP"] = "top";
+  VerticalAlign2["MIDDLE"] = "middle";
+  VerticalAlign2["BOTTOM"] = "bottom";
+})(VerticalAlign || (VerticalAlign = {}));
 class CheckboxParticle {
   constructor(draw) {
     __publicField(this, "draw");
@@ -12795,9 +12816,32 @@ class CheckboxParticle {
       isSetCursor: false
     });
   }
-  render(ctx, element, x, y) {
-    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
-    const { metrics, checkbox } = element;
+  render(payload) {
+    const { ctx, x, index: index2, row } = payload;
+    let { y } = payload;
+    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign }, scale } = this.options;
+    const { metrics, checkbox } = row.elementList[index2];
+    if (verticalAlign === VerticalAlign.TOP || verticalAlign === VerticalAlign.MIDDLE) {
+      let nextIndex = index2 + 1;
+      let nextElement = null;
+      while (nextIndex < row.elementList.length) {
+        nextElement = row.elementList[nextIndex];
+        if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+          break;
+        nextIndex++;
+      }
+      if (nextElement) {
+        const { metrics: { boundingBoxAscent, boundingBoxDescent } } = nextElement;
+        const textHeight = boundingBoxAscent + boundingBoxDescent;
+        if (textHeight > metrics.height) {
+          if (verticalAlign === VerticalAlign.TOP) {
+            y -= boundingBoxAscent - metrics.height;
+          } else if (verticalAlign === VerticalAlign.MIDDLE) {
+            y -= (textHeight - metrics.height) / 2;
+          }
+        }
+      }
+    }
     const left2 = Math.round(x + gap * scale);
     const top = Math.round(y - metrics.height + lineWidth);
     const width = metrics.width - gap * 2 * scale;
@@ -12850,9 +12894,32 @@ class RadioParticle {
       isSetCursor: false
     });
   }
-  render(ctx, element, x, y) {
-    const { radio: { gap, lineWidth, fillStyle, strokeStyle }, scale } = this.options;
-    const { metrics, radio } = element;
+  render(payload) {
+    const { ctx, x, index: index2, row } = payload;
+    let { y } = payload;
+    const { radio: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign }, scale } = this.options;
+    const { metrics, radio } = row.elementList[index2];
+    if (verticalAlign === VerticalAlign.TOP || verticalAlign === VerticalAlign.MIDDLE) {
+      let nextIndex = index2 + 1;
+      let nextElement = null;
+      while (nextIndex < row.elementList.length) {
+        nextElement = row.elementList[nextIndex];
+        if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+          break;
+        nextIndex++;
+      }
+      if (nextElement) {
+        const { metrics: { boundingBoxAscent, boundingBoxDescent } } = nextElement;
+        const textHeight = boundingBoxAscent + boundingBoxDescent;
+        if (textHeight > metrics.height) {
+          if (verticalAlign === VerticalAlign.TOP) {
+            y -= boundingBoxAscent - metrics.height;
+          } else if (verticalAlign === VerticalAlign.MIDDLE) {
+            y -= (textHeight - metrics.height) / 2;
+          }
+        }
+      }
+    }
     const left2 = Math.round(x + gap * scale);
     const top = Math.round(y - metrics.height + lineWidth);
     const width = metrics.width - gap * 2 * scale;
@@ -14279,7 +14346,15 @@ class ListParticle {
           height: height * scale
         })
       });
-      this.draw.getCheckboxParticle().render(ctx, checkboxRowElement, x - gap * scale, y);
+      this.draw.getCheckboxParticle().render({
+        ctx,
+        x: x - gap * scale,
+        y,
+        index: 0,
+        row: __spreadProps(__spreadValues({}, row), {
+          elementList: [checkboxRowElement, ...row.elementList]
+        })
+      });
     } else {
       let text = "";
       if (startElement.listType === ListType.UL) {
@@ -14813,6 +14888,7 @@ class Draw {
     this.clearSideEffect();
     this.range.clearRange();
     this.mode = payload;
+    this.options.mode = payload;
     this.render({
       isSetCursor: false,
       isSubmitHistory: false
@@ -14886,6 +14962,17 @@ class Draw {
     const margins = this.getOriginalMargins();
     return width - margins[1] - margins[3];
   }
+  getContextInnerWidth() {
+    const positionContext = this.position.getPositionContext();
+    if (positionContext.isTable) {
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const elementList = this.getOriginalElementList();
+      const td = elementList[index2].trList[trIndex].tdList[tdIndex];
+      const tdPadding = this.getTdPadding();
+      return td.width - tdPadding[1] - tdPadding[3];
+    }
+    return this.getOriginalInnerWidth();
+  }
   getMargins() {
     return this.getOriginalMargins().map((m) => m * this.options.scale);
   }
@@ -16039,10 +16126,22 @@ class Draw {
           }
         } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
           this.textParticle.complete();
-          this.checkboxParticle.render(ctx, element, x, y + offsetY);
+          this.checkboxParticle.render({
+            ctx,
+            x,
+            y: y + offsetY,
+            index: j,
+            row: curRow
+          });
         } else if (element.type === ElementType.RADIO || element.controlComponent === ControlComponent.RADIO) {
           this.textParticle.complete();
-          this.radioParticle.render(ctx, element, x, y + offsetY);
+          this.radioParticle.render({
+            ctx,
+            x,
+            y: y + offsetY,
+            index: j,
+            row: curRow
+          });
         } else if (element.type === ElementType.TAB) {
           this.textParticle.complete();
         } else if (element.rowFlex === RowFlex.ALIGNMENT || element.rowFlex === RowFlex.JUSTIFY) {
@@ -16175,6 +16274,7 @@ class Draw {
     }
   }
   _drawFloat(ctx, payload) {
+    const { scale } = this.options;
     const floatPositionList = this.position.getFloatPositionList();
     const { imgDisplay, pageNo } = payload;
     for (let e = 0; e < floatPositionList.length; e++) {
@@ -16182,7 +16282,7 @@ class Draw {
       const element = floatPosition.element;
       if ((pageNo === floatPosition.pageNo || floatPosition.zone === EditorZone.HEADER || floatPosition.zone == EditorZone.FOOTER) && element.imgDisplay === imgDisplay && element.type === ElementType.IMAGE) {
         const imgFloatPosition = element.imgFloatPosition;
-        this.imageParticle.render(ctx, element, imgFloatPosition.x, imgFloatPosition.y);
+        this.imageParticle.render(ctx, element, imgFloatPosition.x * scale, imgFloatPosition.y * scale);
       }
     }
   }
@@ -16673,12 +16773,6 @@ const defaultWatermarkOption = {
   size: 200,
   font: "Microsoft YaHei"
 };
-var VerticalAlign;
-(function(VerticalAlign2) {
-  VerticalAlign2["TOP"] = "top";
-  VerticalAlign2["MIDDLE"] = "middle";
-  VerticalAlign2["BOTTOM"] = "bottom";
-})(VerticalAlign || (VerticalAlign = {}));
 const defaultBackground = {
   color: "#FFFFFF",
   image: "",
@@ -16692,7 +16786,8 @@ const defaultCheckboxOption = {
   gap: 5,
   lineWidth: 1,
   fillStyle: "#5175f4",
-  strokeStyle: "#ffffff"
+  strokeStyle: "#ffffff",
+  verticalAlign: VerticalAlign.BOTTOM
 };
 const defaultControlOption = {
   placeholderColor: "#9c9b9b",
@@ -16742,7 +16837,8 @@ const defaultRadioOption = {
   gap: 5,
   lineWidth: 1,
   fillStyle: "#5175f4",
-  strokeStyle: "#000000"
+  strokeStyle: "#000000",
+  verticalAlign: VerticalAlign.BOTTOM
 };
 const defaultSeparatorOption = {
   lineWidth: 1,
@@ -16845,6 +16941,34 @@ function mergeOption(options = {}) {
     lineNumber: lineNumberOptions
   });
 }
+function convertPxToPaperSize(width, height) {
+  if (width === 1125 && height === 1593) {
+    return {
+      size: "a3",
+      width: "297mm",
+      height: "420mm"
+    };
+  }
+  if (width === 794 && height === 1123) {
+    return {
+      size: "a4",
+      width: "210mm",
+      height: "297mm"
+    };
+  }
+  if (width === 565 && height === 796) {
+    return {
+      size: "a5",
+      width: "148mm",
+      height: "210mm"
+    };
+  }
+  return {
+    size: "",
+    width: `${width}px`,
+    height: `${height}px`
+  };
+}
 function printImageBase64(base64List, options) {
   const { width, height, direction = PaperDirection.VERTICAL } = options;
   const iframe = document.createElement("iframe");
@@ -16860,10 +16984,11 @@ function printImageBase64(base64List, options) {
   const doc = contentWindow.document;
   doc.open();
   const container = document.createElement("div");
+  const paperSize = convertPxToPaperSize(width, height);
   base64List.forEach((base64) => {
     const image = document.createElement("img");
-    image.style.width = `${width}px`;
-    image.style.height = `${height}px`;
+    image.style.width = direction === PaperDirection.HORIZONTAL ? paperSize.height : paperSize.width;
+    image.style.height = direction === PaperDirection.HORIZONTAL ? paperSize.width : paperSize.height;
     image.src = base64;
     container.append(image);
   });
@@ -16875,7 +17000,7 @@ function printImageBase64(base64List, options) {
   }
   @page {
     margin: 0;
-    size: ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
+    size: ${paperSize.size} ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
   }`;
   style.append(document.createTextNode(stylesheet));
   setTimeout(() => {
@@ -17509,7 +17634,7 @@ class CommandAdapt {
       const row2 = rowList[rowIndex];
       offsetX = (row2 == null ? void 0 : row2.offsetX) || 0;
     }
-    const innerWidth = this.draw.getOriginalInnerWidth() - offsetX;
+    const innerWidth = this.draw.getContextInnerWidth() - offsetX;
     const colgroup = [];
     const colWidth = innerWidth / col;
     for (let c = 0; c < col; c++) {
@@ -18578,12 +18703,10 @@ class CommandAdapt {
     });
   }
   async print() {
-    const { scale, printPixelRatio, paperDirection } = this.options;
+    const { scale, printPixelRatio, paperDirection, width, height } = this.options;
     if (scale !== 1) {
       this.draw.setPageScale(1);
     }
-    const width = this.draw.getOriginalWidth();
-    const height = this.draw.getOriginalHeight();
     const base64List = await this.draw.getDataURL({
       pixelRatio: printPixelRatio,
       mode: EditorMode.PRINT
@@ -19015,7 +19138,8 @@ class CommandAdapt {
   getControlList() {
     return this.draw.getControl().getList();
   }
-  locationControl(controlId) {
+  locationControl(controlId, options) {
+    const isLocationAfter = (options == null ? void 0 : options.position) === LocationPosition.AFTER;
     function location(elementList, zone2) {
       let i = 0;
       while (i < elementList.length) {
@@ -19046,7 +19170,13 @@ class CommandAdapt {
         }
         if ((element == null ? void 0 : element.controlId) !== controlId)
           continue;
-        const curIndex = i - 1;
+        let curIndex = i - 1;
+        if (isLocationAfter) {
+          curIndex -= 1;
+          if (element.controlComponent !== ControlComponent.PLACEHOLDER && element.controlComponent !== ControlComponent.POSTFIX) {
+            continue;
+          }
+        }
         return {
           zone: zone2,
           range: {
@@ -20368,5 +20498,5 @@ class Editor {
     this.use = plugin.use.bind(plugin);
   }
 }
-export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, LineNumberType, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RenderMode, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
+export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, LineNumberType, ListStyle, ListType, LocationPosition, MaxHeightRatio, NumberType, PageMode, PaperDirection, RenderMode, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
 //# sourceMappingURL=canvas-editor.es.js.map