@hufe921/canvas-editor 0.9.66 → 0.9.67

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.9.67](https://github.com/Hufe921/canvas-editor/compare/v0.9.66...v0.9.67) (2024-03-01)
+
+
+### Bug Fixes
+
+* dragging image boundary error within the control ([52590f6](https://github.com/Hufe921/canvas-editor/commit/52590f6d92746e30aaf92efe85b0486ddd3cb467))
+* text control clear value range context error #439 (#443) ([c299290](https://github.com/Hufe921/canvas-editor/commit/c2992909b6c7ff94d6685007d09fa9611b5e6d8d)), closes [#439](https://github.com/Hufe921/canvas-editor/issues/439) [#443](https://github.com/Hufe921/canvas-editor/issues/443)
+
+
+### Chores
+
+* add underline decoration type demo ([aa12296](https://github.com/Hufe921/canvas-editor/commit/aa12296ef67aa66e46d6615e91833199746c8bae))
+* update FUNDING.yml ([dc2804c](https://github.com/Hufe921/canvas-editor/commit/dc2804c492b1d5d745ec58276e4ff8bc1ed825b3))
+
+
+### Features
+
+* add text decoration property ([f1570f2](https://github.com/Hufe921/canvas-editor/commit/f1570f2180086c1d4f9bf92e06edf5baecbd436c))
+* add textDecoration property to the rangeStyleChange event ([a7fa847](https://github.com/Hufe921/canvas-editor/commit/a7fa847b198010cc5c7b8af9c860a04fe1c4250d))
+
+
+
 ## [0.9.66](https://github.com/Hufe921/canvas-editor/compare/v0.9.65...v0.9.66) (2024-02-24)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.66";
+const version = "0.9.67";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -325,6 +325,16 @@ function isArrayEqual(arr1, arr2) {
   }
   return !arr1.some((item) => !arr2.includes(item));
 }
+function isObjectEqual(obj1, obj2) {
+  if (!isObject(obj1) || !isObject(obj2))
+    return false;
+  const obj1Keys = Object.keys(obj1);
+  const obj2Keys = Object.keys(obj2);
+  if (obj1Keys.length !== obj2Keys.length) {
+    return false;
+  }
+  return !obj1Keys.some((key) => obj2[key] !== obj1[key]);
+}
 const CURSOR_AGENT_OFFSET_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -369,7 +379,8 @@ const EDITOR_ELEMENT_STYLE_ATTR = [
   "size",
   "italic",
   "underline",
-  "strikeout"
+  "strikeout",
+  "textDecoration"
 ];
 const EDITOR_ROW_ATTR = ["rowFlex", "rowMargin"];
 const EDITOR_ELEMENT_COPY_ATTR = [
@@ -389,7 +400,8 @@ const EDITOR_ELEMENT_COPY_ATTR = [
   "dateFormat",
   "groupIds",
   "rowFlex",
-  "rowMargin"
+  "rowMargin",
+  "textDecoration"
 ];
 const EDITOR_ELEMENT_ZIP_ATTR = [
   "type",
@@ -422,7 +434,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "groupIds",
   "conceptId",
   "imgDisplay",
-  "imgFloatPosition"
+  "imgFloatPosition",
+  "textDecoration"
 ];
 const TABLE_TD_ZIP_ATTR = [
   "verticalAlign",
@@ -441,6 +454,11 @@ const LIST_CONTEXT_ATTR = [
   "listType",
   "listStyle"
 ];
+const CONTROL_CONTEXT_ATTR = [
+  "control",
+  "controlId",
+  "controlComponent"
+];
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
@@ -5426,8 +5444,7 @@ function mouseup(evt, host) {
     const editorOptions = draw.getOptions();
     const elementList = draw.getElementList();
     const replaceElementList = dragElementList.map((el) => {
-      var _a2;
-      if (!el.type || el.type === ElementType.TEXT || ((_a2 = el.control) == null ? void 0 : _a2.type) === ControlType.TEXT) {
+      if (!el.type || el.type === ElementType.TEXT) {
         const newElement = {
           value: el.value
         };
@@ -5439,7 +5456,7 @@ function mouseup(evt, host) {
         });
         return newElement;
       } else {
-        const newElement = deepClone(el);
+        const newElement = omitObject(deepClone(el), CONTROL_CONTEXT_ATTR);
         formatElementList([newElement], {
           isHandleFirstElement: false,
           editorOptions
@@ -7443,6 +7460,7 @@ class RangeManager {
     const level = curElement.level || null;
     const listType = curElement.listType || null;
     const listStyle = curElement.listStyle || null;
+    const textDecoration = underline ? curElement.textDecoration || null : null;
     const painter = !!this.draw.getPainterStyle();
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
@@ -7466,7 +7484,8 @@ class RangeManager {
       level,
       listType,
       listStyle,
-      groupIds
+      groupIds,
+      textDecoration
     };
     if (rangeStyleChangeListener) {
       rangeStyleChangeListener(rangeStyle);
@@ -7505,7 +7524,8 @@ class RangeManager {
       level: null,
       listType: null,
       listStyle: null,
-      groupIds: null
+      groupIds: null,
+      textDecoration: null
     };
     if (rangeStyleChangeListener) {
       rangeStyleChangeListener(rangeStyle);
@@ -7681,10 +7701,12 @@ class AbstractRichText {
   constructor() {
     __publicField(this, "fillRect");
     __publicField(this, "fillColor");
+    __publicField(this, "fillDecorationStyle");
     this.fillRect = this.clearFillInfo();
   }
   clearFillInfo() {
     this.fillColor = void 0;
+    this.fillDecorationStyle = void 0;
     this.fillRect = {
       x: 0,
       y: 0,
@@ -7693,12 +7715,12 @@ class AbstractRichText {
     };
     return this.fillRect;
   }
-  recordFillInfo(ctx, x, y, width, height, color) {
+  recordFillInfo(ctx, x, y, width, height, color, decorationStyle) {
     const isFirstRecord = !this.fillRect.width;
-    if (!isFirstRecord && this.fillColor !== color) {
+    if (!isFirstRecord && (this.fillColor !== color || this.fillDecorationStyle !== decorationStyle)) {
       this.render(ctx);
       this.clearFillInfo();
-      this.recordFillInfo(ctx, x, y, width, height, color);
+      this.recordFillInfo(ctx, x, y, width, height, color, decorationStyle);
       return;
     }
     if (isFirstRecord) {
@@ -7710,6 +7732,7 @@ class AbstractRichText {
     }
     this.fillRect.width += width;
     this.fillColor = color;
+    this.fillDecorationStyle = decorationStyle;
   }
 }
 class Highlight extends AbstractRichText {
@@ -8041,24 +8064,92 @@ class Strikeout extends AbstractRichText {
     this.clearFillInfo();
   }
 }
+var TextDecorationStyle;
+(function(TextDecorationStyle2) {
+  TextDecorationStyle2["SOLID"] = "solid";
+  TextDecorationStyle2["DOUBLE"] = "double";
+  TextDecorationStyle2["DASHED"] = "dashed";
+  TextDecorationStyle2["DOTTED"] = "dotted";
+  TextDecorationStyle2["WAVY"] = "wavy";
+})(TextDecorationStyle || (TextDecorationStyle = {}));
+var DashType;
+(function(DashType2) {
+  DashType2["SOLID"] = "solid";
+  DashType2["DASHED"] = "dashed";
+  DashType2["DOTTED"] = "dotted";
+})(DashType || (DashType = {}));
 class Underline extends AbstractRichText {
   constructor(draw) {
     super();
     __publicField(this, "options");
     this.options = draw.getOptions();
   }
+  _drawLine(ctx, startX, startY, width, dashType) {
+    const endX = startX + width;
+    ctx.beginPath();
+    switch (dashType) {
+      case DashType.DASHED:
+        ctx.setLineDash([3, 1]);
+        break;
+      case DashType.DOTTED:
+        ctx.setLineDash([1, 1]);
+        break;
+    }
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, startY);
+    ctx.stroke();
+  }
+  _drawDouble(ctx, startX, startY, width) {
+    const SPACING = 3;
+    const endX = startX + width;
+    const endY = startY + SPACING * this.options.scale;
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, startY);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(startX, endY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+  }
+  _drawWave(ctx, startX, startY, width) {
+    const { scale } = this.options;
+    const AMPLITUDE = 1.2 * scale;
+    const FREQUENCY = 1 / scale;
+    const adjustY = startY + 2 * AMPLITUDE;
+    ctx.beginPath();
+    for (let x = 0; x < width; x++) {
+      const y = AMPLITUDE * Math.sin(FREQUENCY * x);
+      ctx.lineTo(startX + x, adjustY + y);
+    }
+    ctx.stroke();
+  }
   render(ctx) {
     if (!this.fillRect.width)
       return;
-    const { underlineColor } = this.options;
+    const { underlineColor, scale } = this.options;
     const { x, y, width } = this.fillRect;
     ctx.save();
     ctx.strokeStyle = this.fillColor || underlineColor;
+    ctx.lineWidth = scale;
     const adjustY = Math.floor(y + 2 * ctx.lineWidth) + 0.5;
-    ctx.beginPath();
-    ctx.moveTo(x, adjustY);
-    ctx.lineTo(x + width, adjustY);
-    ctx.stroke();
+    switch (this.fillDecorationStyle) {
+      case TextDecorationStyle.WAVY:
+        this._drawWave(ctx, x, adjustY, width);
+        break;
+      case TextDecorationStyle.DOUBLE:
+        this._drawDouble(ctx, x, adjustY, width);
+        break;
+      case TextDecorationStyle.DASHED:
+        this._drawLine(ctx, x, adjustY, width, DashType.DASHED);
+        break;
+      case TextDecorationStyle.DOTTED:
+        this._drawLine(ctx, x, adjustY, width, DashType.DOTTED);
+        break;
+      default:
+        this._drawLine(ctx, x, adjustY, width);
+        break;
+    }
     ctx.restore();
     this.clearFillInfo();
   }
@@ -9613,9 +9704,9 @@ class TextControl {
   getElement() {
     return this.element;
   }
-  getValue() {
-    const elementList = this.control.getElementList();
-    const { startIndex } = this.control.getRange();
+  getValue(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
     const startElement = elementList[startIndex];
     const data2 = [];
     let preIndex = startIndex;
@@ -9676,7 +9767,7 @@ class TextControl {
     const range = context.range || this.control.getRange();
     const { startIndex, endIndex } = range;
     this.control.getDraw().spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
-    const value = this.getValue();
+    const value = this.getValue(context);
     if (!value.length) {
       this.control.addPlaceholder(startIndex);
     }
@@ -13682,7 +13773,7 @@ class Draw {
     this.textParticle.complete();
   }
   drawRow(ctx, payload) {
-    var _a, _b;
+    var _a, _b, _c;
     const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2 } = payload;
     const isPrintMode = this.mode === EditorMode.PRINT;
     const { scale, tdPadding, defaultBasicRowMarginHeight, defaultRowMargin, group: group2 } = this.options;
@@ -13776,8 +13867,8 @@ class Draw {
             offsetY2 = this.superscriptParticle.getOffsetY(element);
           }
           const color = element.controlComponent === ControlComponent.PLACEHOLDER ? void 0 : element.color;
-          this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color);
-        } else if ((preElement == null ? void 0 : preElement.underline) || ((_b = preElement == null ? void 0 : preElement.control) == null ? void 0 : _b.underline)) {
+          this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color, (_b = element.textDecoration) == null ? void 0 : _b.style);
+        } else if ((preElement == null ? void 0 : preElement.underline) || ((_c = preElement == null ? void 0 : preElement.control) == null ? void 0 : _c.underline)) {
           this.underline.render(ctx);
         }
         if (element.strikeout) {
@@ -14706,15 +14797,20 @@ class CommandAdapt {
       }
     }
   }
-  underline() {
+  underline(textDecoration) {
     const isDisabled = this.draw.isReadonly() || this.control.isDisabledControl();
     if (isDisabled)
       return;
     const selection = this.range.getSelectionElementList();
     if (selection == null ? void 0 : selection.length) {
-      const noUnderlineIndex = selection.findIndex((s) => !s.underline);
+      const isSetUnderline = selection.some((s) => !s.underline || !textDecoration && s.textDecoration || textDecoration && !s.textDecoration || textDecoration && s.textDecoration && !isObjectEqual(s.textDecoration, textDecoration));
       selection.forEach((el) => {
-        el.underline = !!~noUnderlineIndex;
+        el.underline = isSetUnderline;
+        if (isSetUnderline && textDecoration) {
+          el.textDecoration = textDecoration;
+        } else {
+          delete el.textDecoration;
+        }
       });
       this.draw.render({
         isSetCursor: false,
@@ -17626,5 +17722,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, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TdBorder, TdSlash, 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, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
 //# sourceMappingURL=canvas-editor.es.js.map