@hufe921/canvas-editor 0.9.48 → 0.9.49

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.9.49](https://github.com/Hufe921/canvas-editor/compare/v0.9.48...v0.9.49) (2023-09-16)
+
+
+### Bug Fixes
+
+* control minimum width when scaling ([05ddc2d](https://github.com/Hufe921/canvas-editor/commit/05ddc2db290e58a4ec0fb1b00ad5d64ce7f4cf3a))
+* draw text element letter space error #282 ([c35f8ab](https://github.com/Hufe921/canvas-editor/commit/c35f8ab82c57849269a09fbad9d54d5085065d22)), closes [#282](https://github.com/Hufe921/canvas-editor/issues/282)
+* omitObject function missing reference ([c45317e](https://github.com/Hufe921/canvas-editor/commit/c45317eced93e3d79129aea24776a8629d058050))
+
+
+### Features
+
+* add set and get control value api #278 ([f754741](https://github.com/Hufe921/canvas-editor/commit/f754741f32de6c5d5c27d15dfc9fc31e284d29dc)), closes [#278](https://github.com/Hufe921/canvas-editor/issues/278)
+* text element width #277 ([bb64626](https://github.com/Hufe921/canvas-editor/commit/bb646266b10897c3097ada5932f9b7cef317aebe)), closes [#277](https://github.com/Hufe921/canvas-editor/issues/277)
+
+
+### Performance Improvements
+
+* adjusted the tab draw in the list style #283 ([fc0fdb2](https://github.com/Hufe921/canvas-editor/commit/fc0fdb2fe36966e3b8a51107d9929ca137e5681c)), closes [#283](https://github.com/Hufe921/canvas-editor/issues/283)
+
+
+
 ## [0.9.48](https://github.com/Hufe921/canvas-editor/compare/v0.9.47...v0.9.48) (2023-09-09)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.48";
+const version = "0.9.49";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -257,14 +257,14 @@ function cloneProperty(properties, sourceElement, targetElement) {
     }
   }
 }
-function omitObject(object, keys) {
-  const cloneObject = deepClone(object);
+function omitObject(object, omitKeys) {
+  const newObject = {};
   for (const key in object) {
-    if (keys.includes(key)) {
-      delete cloneObject[key];
+    if (!omitKeys.includes(key)) {
+      newObject[key] = object[key];
     }
   }
-  return cloneObject;
+  return newObject;
 }
 function convertStringToBase64(input2) {
   const encoder = new TextEncoder();
@@ -4919,10 +4919,10 @@ class CheckboxControl {
   setValue() {
     return -1;
   }
-  setSelect() {
+  setSelect(context = {}) {
     const { control } = this.element;
-    const elementList = this.control.getElementList();
-    const { startIndex } = this.control.getRange();
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
     const startElement = elementList[startIndex];
     const data2 = [];
     let preIndex = startIndex;
@@ -7497,6 +7497,18 @@ class TextParticle {
     return this.measureText(ctx, element).width;
   }
   measureText(ctx, element) {
+    if (element.width) {
+      const textMetrics2 = ctx.measureText(element.value);
+      return {
+        width: element.width,
+        actualBoundingBoxAscent: textMetrics2.actualBoundingBoxAscent,
+        actualBoundingBoxDescent: textMetrics2.actualBoundingBoxDescent,
+        actualBoundingBoxLeft: textMetrics2.actualBoundingBoxLeft,
+        actualBoundingBoxRight: textMetrics2.actualBoundingBoxRight,
+        fontBoundingBoxAscent: textMetrics2.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: textMetrics2.fontBoundingBoxDescent
+      };
+    }
     const id = `${element.value}${ctx.font}`;
     const cacheTextMetrics = this.cacheMeasureText.get(id);
     if (cacheTextMetrics) {
@@ -8662,9 +8674,9 @@ class SelectControl {
     }
     return this.clearSelect();
   }
-  clearSelect() {
-    const elementList = this.control.getElementList();
-    const { startIndex } = this.control.getRange();
+  clearSelect(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
     const startElement = elementList[startIndex];
     let leftIndex = -1;
     let rightIndex = -1;
@@ -8694,7 +8706,7 @@ class SelectControl {
     this.element.control.code = null;
     return preIndex;
   }
-  setSelect(code) {
+  setSelect(code, context = {}) {
     const control = this.element.control;
     const valueSets = control.valueSets;
     if (!Array.isArray(valueSets) || !valueSets.length)
@@ -8702,9 +8714,9 @@ class SelectControl {
     const valueSet = valueSets.find((v) => v.code === code);
     if (!valueSet)
       return;
-    const startIndex = this.clearSelect();
+    const startIndex = this.clearSelect(context);
     this.control.removePlaceholder(startIndex);
-    const elementList = this.control.getElementList();
+    const elementList = context.elementList || this.control.getElementList();
     const startElement = elementList[startIndex];
     const anchorElement = startElement.controlComponent === ControlComponent.PREFIX ? omitObject(startElement, EDITOR_ELEMENT_STYLE_ATTR) : startElement;
     const start = startIndex + 1;
@@ -8718,10 +8730,12 @@ class SelectControl {
       formatElementContext(elementList, [newElement], startIndex);
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
-    const newIndex = start + data2.length - 1;
-    this.control.repaintControl(newIndex);
     this.element.control.code = code;
-    this.destroy();
+    if (!context.range) {
+      const newIndex = start + data2.length - 1;
+      this.control.repaintControl(newIndex);
+      this.destroy();
+    }
   }
   _createSelectPopupDom() {
     const control = this.element.control;
@@ -8816,9 +8830,9 @@ class TextControl {
     }
     return data2;
   }
-  setValue(data2) {
-    const elementList = this.control.getElementList();
-    const range = this.control.getRange();
+  setValue(data2, context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
     this.control.shrinkBoundary();
     const { startIndex, endIndex } = range;
     const draw = this.control.getDraw();
@@ -8839,6 +8853,17 @@ class TextControl {
     }
     return start + data2.length - 1;
   }
+  clearValue(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    const { startIndex, endIndex } = range;
+    this.control.getDraw().spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    const value = this.getValue();
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex);
+    }
+    return startIndex;
+  }
   keydown(evt) {
     const elementList = this.control.getElementList();
     const range = this.control.getRange();
@@ -9217,6 +9242,135 @@ class Control {
     }
     return this.activeControl.cut();
   }
+  getValueByConceptId(payload) {
+    var _a;
+    const { conceptId } = payload;
+    const elementList = [
+      ...this.draw.getHeaderElementList(),
+      ...this.draw.getOriginalMainElementList(),
+      ...this.draw.getFooterElementList()
+    ];
+    const result = [];
+    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;
+      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({
+          value: textControlValue || null,
+          innerText: textControlValue || null
+        });
+      } else if (type === ControlType.SELECT || type === ControlType.CHECKBOX) {
+        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({
+          value: code || null,
+          innerText: innerText || null
+        });
+      }
+      i = j;
+    }
+    return result;
+  }
+  setValueByConceptId(payload) {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    let isExistSet = false;
+    const { conceptId, value } = payload;
+    const data2 = [
+      this.draw.getHeaderElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooterElementList()
+    ];
+    for (const elementList of data2) {
+      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;
+        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
+        };
+        if (type === ControlType.TEXT) {
+          const formatValue = [{ value }];
+          formatElementList(formatValue, {
+            isHandleFirstElement: false,
+            editorOptions: this.draw.getOptions()
+          });
+          const text = new TextControl(element, this);
+          if (value) {
+            text.setValue(formatValue, controlContext);
+          } else {
+            text.clearValue(controlContext);
+          }
+        } else if (type === ControlType.SELECT) {
+          const select = new SelectControl(element, this);
+          if (value) {
+            select.setSelect(value, controlContext);
+          } else {
+            select.clearSelect(controlContext);
+          }
+        } else if (type === ControlType.CHECKBOX) {
+          const checkbox = new CheckboxControl(element, this);
+          const checkboxElementList = elementList.slice(fakeRange.startIndex + 1, fakeRange.endIndex + 1);
+          const codes = (value == null ? void 0 : value.split(",")) || [];
+          for (const checkElement of checkboxElementList) {
+            if (checkElement.controlComponent === ControlComponent.CHECKBOX) {
+              const checkboxItem = checkElement.checkbox;
+              checkboxItem.value = codes.includes(checkboxItem.code);
+            }
+          }
+          checkbox.setSelect(controlContext);
+        }
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    }
+    if (isExistSet) {
+      this.draw.render({
+        isSetCursor: false
+      });
+    }
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -10840,6 +10994,14 @@ class ListParticle {
     const startElement = elementList[0];
     if (startElement.value !== ZERO || startElement.listWrap)
       return;
+    let tabWidth = 0;
+    const { defaultTabWidth, scale, defaultFont, defaultSize } = this.options;
+    for (let i = 1; i < elementList.length; i++) {
+      const element = elementList[i];
+      if ((element == null ? void 0 : element.type) !== ElementType.TAB)
+        break;
+      tabWidth += defaultTabWidth * scale;
+    }
     let text = "";
     if (startElement.listType === ListType.UL) {
       text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
@@ -10849,9 +11011,8 @@ class ListParticle {
     if (!text)
       return;
     const { coordinate: { leftTop: [startX, startY] } } = position;
-    const x = startX - offsetX;
+    const x = startX - offsetX + tabWidth;
     const y = startY + ascent;
-    const { defaultFont, defaultSize, scale } = this.options;
     ctx.save();
     ctx.font = `${defaultSize * scale}px ${defaultFont}`;
     ctx.fillText(text, x, y);
@@ -12103,7 +12264,7 @@ class Draw {
           const extraWidth = rowElement.control.minWidth - controlRealWidth;
           if (extraWidth > 0) {
             const rowRemainingWidth = availableWidth - curRow.width - metrics.width;
-            const left = Math.min(rowRemainingWidth, extraWidth);
+            const left = Math.min(rowRemainingWidth, extraWidth) * scale;
             rowElement.left = left;
             curRow.width += left;
           } else {
@@ -12289,6 +12450,9 @@ class Draw {
           this.blockParticle.render(pageNo, element, x, y);
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY);
+          if (element.width || element.letterSpacing) {
+            this.textParticle.complete();
+          }
         }
         if (element.underline || ((_a = element.control) == null ? void 0 : _a.underline)) {
           const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin) * scale;
@@ -12647,6 +12811,7 @@ class Command {
     __publicField(this, "executeSetGroup");
     __publicField(this, "executeDeleteGroup");
     __publicField(this, "executeLocationGroup");
+    __publicField(this, "executeSetControlValue");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -12662,6 +12827,7 @@ class Command {
     __publicField(this, "getSearchNavigateInfo");
     __publicField(this, "getLocale");
     __publicField(this, "getGroupIds");
+    __publicField(this, "getControlValue");
     this.executeMode = adapt.mode.bind(adapt);
     this.executeCut = adapt.cut.bind(adapt);
     this.executeCopy = adapt.copy.bind(adapt);
@@ -12756,6 +12922,8 @@ class Command {
     this.getSearchNavigateInfo = adapt.getSearchNavigateInfo.bind(adapt);
     this.getLocale = adapt.getLocale.bind(adapt);
     this.getGroupIds = adapt.getGroupIds.bind(adapt);
+    this.executeSetControlValue = adapt.setControlValue.bind(adapt);
+    this.getControlValue = adapt.getControlValue.bind(adapt);
   }
 }
 const defaultWatermarkOption = {
@@ -14590,6 +14758,15 @@ class CommandAdapt {
       isSubmitHistory: false
     });
   }
+  getControlValue(payload) {
+    return this.draw.getControl().getValueByConceptId(payload);
+  }
+  setControlValue(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.getControl().setValueByConceptId(payload);
+  }
 }
 class Listener {
   constructor() {