@visactor/vrender 0.19.13-beta.1 → 0.19.14-alpha.1

package/dist/index.js

@@ -1299,6 +1299,18 @@
     };
     var isObject$1 = isObject;
 
+    const isObjectLike = value => "object" == typeof value && null !== value;
+    var isObjectLike$1 = isObjectLike;
+
+    const isPlainObject = function (value) {
+      if (!isObjectLike$1(value) || !isType$1(value, "Object")) return !1;
+      if (null === Object.getPrototypeOf(value)) return !0;
+      let proto = value;
+      for (; null !== Object.getPrototypeOf(proto);) proto = Object.getPrototypeOf(proto);
+      return Object.getPrototypeOf(value) === proto;
+    };
+    var isPlainObject$1 = isPlainObject;
+
     const isUndefined = value => void 0 === value;
     var isUndefined$1 = isUndefined;
 
@@ -1312,6 +1324,11 @@
     const isArray = value => Array.isArray ? Array.isArray(value) : isType$1(value, "Array");
     var isArray$1 = isArray;
 
+    const isArrayLike = function (value) {
+      return null !== value && "function" != typeof value && Number.isFinite(value.length);
+    };
+    var isArrayLike$1 = isArrayLike;
+
     const isNumber = function (value) {
       let fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
       const type = typeof value;
@@ -1332,6 +1349,56 @@
       has = (object, key) => null != object && hasOwnProperty.call(object, key);
     var has$1 = has;
 
+    function baseMerge(target, source) {
+      let shallowArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+      if (source) {
+        if (target === source) return;
+        if (isValid$1(source) && "object" == typeof source) {
+          const iterable = Object(source),
+            props = [];
+          for (const key in iterable) props.push(key);
+          let {
+              length: length
+            } = props,
+            propIndex = -1;
+          for (; length--;) {
+            const key = props[++propIndex];
+            isValid$1(iterable[key]) && "object" == typeof iterable[key] ? baseMergeDeep(target, source, key, shallowArray) : assignMergeValue(target, key, iterable[key]);
+          }
+        }
+      }
+    }
+    function baseMergeDeep(target, source, key) {
+      let shallowArray = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+      const objValue = target[key],
+        srcValue = source[key];
+      let newValue = source[key],
+        isCommon = !0;
+      if (isArray$1(srcValue)) {
+        if (shallowArray) newValue = [];else if (isArray$1(objValue)) newValue = objValue;else if (isArrayLike$1(objValue)) {
+          newValue = new Array(objValue.length);
+          let index = -1;
+          const length = objValue.length;
+          for (; ++index < length;) newValue[index] = objValue[index];
+        }
+      } else isPlainObject$1(srcValue) ? (newValue = objValue, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
+      isCommon && baseMerge(newValue, srcValue, shallowArray), assignMergeValue(target, key, newValue);
+    }
+    function assignMergeValue(target, key, value) {
+      (void 0 !== value && !eq(target[key], value) || void 0 === value && !(key in target)) && (target[key] = value);
+    }
+    function eq(value, other) {
+      return value === other || Number.isNaN(value) && Number.isNaN(other);
+    }
+    function merge(target) {
+      let sourceIndex = -1;
+      const length = arguments.length <= 1 ? 0 : arguments.length - 1;
+      for (; ++sourceIndex < length;) {
+        baseMerge(target, sourceIndex + 1 < 1 || arguments.length <= sourceIndex + 1 ? undefined : arguments[sourceIndex + 1], !0);
+      }
+      return target;
+    }
+
     function arrayEqual(a, b) {
       if (!isArray$1(a) || !isArray$1(b)) return !1;
       if (a.length !== b.length) return !1;
@@ -3919,6 +3986,7 @@
       keepDirIn3d: !0
     });
     const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
+      editable: !1,
       width: 300,
       height: 300,
       ellipsis: !0,
@@ -12920,10 +12988,10 @@
           strokeOpacity: strokeOpacity
         }, config);
       }
-      doUpdateFrameCache() {
+      doUpdateFrameCache(tc) {
         var _a;
         const {
-            textConfig = [],
+            textConfig: _tc = [],
             maxWidth: maxWidth,
             maxHeight: maxHeight,
             width: width,
@@ -12937,7 +13005,8 @@
             singleLine: singleLine,
             disableAutoWrapLine: disableAutoWrapLine
           } = this.attribute,
-          paragraphs = [];
+          paragraphs = [],
+          textConfig = null != tc ? tc : _tc;
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
           const config = this.combinedStyleToCharacter(textConfig[i]),
             iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
@@ -13929,7 +13998,7 @@
             x: x,
             y: y
           } = attribute;
-          width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, aabbBounds.set(0, 0, width || 0, height || 0);
+          width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, (isFinite(width) || isFinite(height) || isFinite(x) || isFinite(y)) && aabbBounds.set(0, 0, width || 0, height || 0);
         }
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -13944,7 +14013,8 @@
           width: width,
           height: height,
           path: path,
-          clip = groupTheme.clip
+          clip = groupTheme.clip,
+          display: display
         } = attribute;
         path && path.length ? path.forEach(g => {
           aabbBounds.union(g.AABBBounds);
@@ -17070,10 +17140,10 @@
         this.order = 1;
       }
       afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+        return null == graphic.attribute.shadowRootIdx && graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx < 0 || (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx || graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx > 0) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
       }
       beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+        return null == graphic.attribute.shadowRootIdx && graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx > 0 || (graphic.attribute.shadowRootIdx < 0 || graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx < 0) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
       }
       drawItem(graphic, renderService, drawContext, drawContribution, params) {
         if (!graphic.shadowRoot) return !1;
@@ -20290,6 +20360,424 @@
       return points = simplifyDouglasPeucker(points = highestQuality ? points : simplifyRadialDist(points, sqTolerance), sqTolerance);
     }
 
+    function findCursorIndexIgnoreLinebreak(textConfig, cursorIndex) {
+      let index = 0;
+      for (index = 0; index < textConfig.length; index++) {
+        const c = textConfig[index];
+        if (c.text && "\n" === c.text || cursorIndex--, cursorIndex < 0) break;
+      }
+      return index;
+    }
+    class EditModule {
+      constructor(container) {
+        this.handleKeyDown = e => {
+          "Delete" !== e.key && "Backspace" !== e.key || this.handleInput({
+            data: null,
+            type: "Backspace"
+          });
+        }, this.handleCompositionStart = () => {
+          const {
+              textConfig = []
+            } = this.currRt.attribute,
+            cursorIndex = findCursorIndexIgnoreLinebreak(textConfig, this.cursorIndex),
+            lastConfig = textConfig[cursorIndex];
+          textConfig.splice(cursorIndex + 1, 0, Object.assign(Object.assign({}, lastConfig), {
+            text: ""
+          })), this.isComposing = !0;
+        }, this.handleCompositionEnd = () => {
+          this.isComposing = !1;
+          const {
+              textConfig = []
+            } = this.currRt.attribute,
+            curIdx = findCursorIndexIgnoreLinebreak(textConfig, this.cursorIndex + 1),
+            lastConfig = textConfig[curIdx];
+          textConfig.splice(curIdx, 1);
+          const text = lastConfig.text,
+            textList = Array.from(text.toString());
+          for (let i = 0; i < textList.length; i++) textConfig.splice(i + curIdx, 0, Object.assign(Object.assign({}, lastConfig), {
+            text: textList[i]
+          }));
+          this.currRt.setAttributes({
+            textConfig: textConfig
+          }), this.onChangeCbList.forEach(cb => {
+            cb(text, this.isComposing, this.cursorIndex + textList.length, this.currRt, "right");
+          });
+        }, this.handleInput = ev => {
+          if (!this.currRt) return;
+          let str = ev.data;
+          "Backspace" === ev.type || str || (str = "\n");
+          const {
+            textConfig = []
+          } = this.currRt.attribute;
+          let startIdx = this.selectionStartCursorIdx,
+            endIdx = this.cursorIndex;
+          startIdx > endIdx && ([startIdx, endIdx] = [endIdx, startIdx]), this.selectionStartCursorIdx = startIdx, this.cursorIndex = startIdx, startIdx = findCursorIndexIgnoreLinebreak(textConfig, startIdx);
+          const delta = this.selectionStartCursorIdx - startIdx;
+          endIdx = findCursorIndexIgnoreLinebreak(textConfig, endIdx);
+          const lastConfig = textConfig[startIdx + (this.isComposing ? 1 : 0)];
+          let currConfig = lastConfig;
+          "Backspace" !== ev.type || this.isComposing ? (startIdx !== endIdx && textConfig.splice(startIdx + 1, endIdx - startIdx), this.isComposing || (currConfig = Object.assign(Object.assign({}, lastConfig), {
+            text: ""
+          }), startIdx += 1, textConfig.splice(startIdx, 0, currConfig)), currConfig.text = str) : startIdx !== endIdx ? textConfig.splice(startIdx + 1, endIdx - startIdx) : (textConfig.splice(startIdx, 1), startIdx -= 1), this.currRt.setAttributes({
+            textConfig: textConfig
+          }), this.isComposing ? this.onInputCbList.forEach(cb => {
+            cb(str, this.isComposing, startIdx + delta, this.currRt, "\n" === str ? "left" : "right");
+          }) : this.onChangeCbList.forEach(cb => {
+            cb(str, this.isComposing, startIdx + delta, this.currRt, "\n" === str ? "left" : "right");
+          });
+        }, this.container = null != container ? container : document.body;
+        const textAreaDom = document.createElement("textarea");
+        textAreaDom.autocomplete = "off", textAreaDom.innerText = "", this.applyStyle(textAreaDom), this.container.append(textAreaDom), this.textAreaDom = textAreaDom, this.isComposing = !1, this.onInputCbList = [], this.onChangeCbList = [];
+      }
+      onInput(cb) {
+        this.onInputCbList.push(cb);
+      }
+      onChange(cb) {
+        this.onChangeCbList.push(cb);
+      }
+      applyStyle(textAreaDom) {
+        textAreaDom.setAttribute("style", "width: 100px; height: 30px; left: 0; position: absolute; z-index: -1; outline: none; resize: none; border: none; overflow: hidden; color: transparent; user-select: none; caret-color: transparent;background-color: transparent;"), textAreaDom.addEventListener("input", this.handleInput), textAreaDom.addEventListener("compositionstart", this.handleCompositionStart), textAreaDom.addEventListener("compositionend", this.handleCompositionEnd), window.addEventListener("keydown", this.handleKeyDown);
+      }
+      moveTo(x, y, rt, cursorIndex, selectionStartCursorIdx) {
+        this.textAreaDom.style.left = `${x}px`, this.textAreaDom.style.top = `${y}px`, setTimeout(() => {
+          this.textAreaDom.focus(), this.textAreaDom.setSelectionRange(0, 0);
+        }), this.currRt = rt, this.cursorIndex = cursorIndex, this.selectionStartCursorIdx = selectionStartCursorIdx;
+      }
+      release() {
+        this.textAreaDom.removeEventListener("input", this.handleInput), this.textAreaDom.removeEventListener("compositionstart", this.handleCompositionStart), this.textAreaDom.removeEventListener("compositionend", this.handleCompositionEnd), window.removeEventListener("keydown", this.handleKeyDown);
+      }
+    }
+
+    class Selection {
+      constructor(cacheSelectionStartCursorIdx, cacheCurCursorIdx, selectionStartCursorIdx, curCursorIdx, rt) {
+        this.curCursorIdx = curCursorIdx, this.selectionStartCursorIdx = selectionStartCursorIdx, this.cacheCurCursorIdx = cacheCurCursorIdx, this.cacheSelectionStartCursorIdx = cacheSelectionStartCursorIdx, this.rt = rt;
+      }
+      hasFormat(key) {
+        return null != this.getFormat(key);
+      }
+      getFormat(key) {
+        if (!this.rt) return null;
+        const config = this.rt.attribute.textConfig,
+          val = config[this.selectionStartCursorIdx + 1][key];
+        if (null == val) return null;
+        for (let i = this.selectionStartCursorIdx + 2; i <= this.curCursorIdx; i++) {
+          if (val !== config[i][key]) return null;
+        }
+        return val;
+      }
+      getAllFormat(key) {
+        if (!this.rt) return [];
+        const config = this.rt.attribute.textConfig,
+          val = config[this.selectionStartCursorIdx + 1][key],
+          set = new Set();
+        set.add(val);
+        for (let i = this.selectionStartCursorIdx + 2; i <= this.curCursorIdx; i++) {
+          const item = config[i];
+          set.add(item[key]);
+        }
+        return Array.from(set.values());
+      }
+    }
+    const FORMAT_TEXT_COMMAND = "FORMAT_TEXT_COMMAND";
+    const FORMAT_ELEMENT_COMMAND = "FORMAT_ELEMENT_COMMAND";
+    class RichTextEditPlugin {
+      constructor() {
+        this.name = "RichTextEditPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.editing = !1, this.pointerDown = !1, this.handleInput = (text, isComposing, cursorIdx, rt, orient) => {
+          const p = this.getPointByColumnIdx(cursorIdx, rt, orient);
+          this.hideSelection(), this.setCursor(p.x, p.y1, p.y2), this.updateCbs.forEach(cb => cb("input", this));
+        }, this.handleChange = (text, isComposing, cursorIdx, rt, orient) => {
+          const p = this.getPointByColumnIdx(cursorIdx, rt, orient);
+          this.curCursorIdx = cursorIdx, this.selectionStartCursorIdx = cursorIdx, this.setCursorAndTextArea(p.x, p.y1, p.y2, rt), this.hideSelection(), this.updateCbs.forEach(cb => cb("change", this));
+        }, this.handleMove = e => {
+          this.isRichtext(e) && (this.currRt = e.target, this.handleEnter(e), e.target.once("pointerleave", this.handleLeave), this.showSelection(e));
+        }, this.handlePointerDown = e => {
+          this.editing ? this.onFocus(e) : this.deFocus(e), this.applyUpdate(), this.pointerDown = !0, this.updateCbs.forEach(cb => cb(this.editing ? "onfocus" : "defocus", this));
+        }, this.handlePointerUp = e => {
+          this.pointerDown = !1;
+        }, this.handleEnter = e => {
+          this.editing = !0, this.pluginService.stage.setCursor("text");
+        }, this.handleLeave = e => {
+          this.editing = !1, this.pluginService.stage.setCursor("default");
+        }, this.commandCbs = new Map(), this.commandCbs.set(FORMAT_TEXT_COMMAND, [this.formatTextCommandCb]), this.updateCbs = [];
+      }
+      getSelection() {
+        return this.selectionStartCursorIdx && this.curCursorIdx && this.selectionStartCursorIdx !== this.curCursorIdx && this.currRt ? new Selection(this.selectionStartCursorIdx, this.curCursorIdx, findCursorIndexIgnoreLinebreak(this.currRt.attribute.textConfig, this.selectionStartCursorIdx), findCursorIndexIgnoreLinebreak(this.currRt.attribute.textConfig, this.curCursorIdx), this.currRt) : null;
+      }
+      formatTextCommandCb(payload, p) {
+        const rt = p.currRt;
+        if (!rt) return;
+        const selectionData = p.getSelection();
+        if (!selectionData) return;
+        const {
+            selectionStartCursorIdx: selectionStartCursorIdx,
+            curCursorIdx: curCursorIdx
+          } = selectionData,
+          config = rt.attribute.textConfig.slice(selectionStartCursorIdx + 1, curCursorIdx + 1);
+        "bold" === payload ? config.forEach(item => item.fontWeight = "bold") : "italic" === payload ? config.forEach(item => item.fontStyle = "italic") : "underline" === payload ? config.forEach(item => item.underline = !0) : "lineThrough" === payload ? config.forEach(item => item.lineThrough = !0) : isObject$1(payload) && config.forEach(item => merge(item, payload)), rt.setAttributes(rt.attribute);
+      }
+      dispatchCommand(command, payload) {
+        const cbs = this.commandCbs.get(command);
+        cbs && cbs.forEach(cb => cb(payload, this)), this.updateCbs.forEach(cb => cb("dispatch", this));
+      }
+      registerCommand(command, cb) {
+        (this.commandCbs.get(command) || []).push(cb);
+      }
+      registerUpdateListener(cb) {
+        (this.updateCbs || []).push(cb);
+      }
+      activate(context) {
+        this.pluginService = context, this.editModule = new EditModule(), context.stage.on("pointermove", this.handleMove), context.stage.on("pointerdown", this.handlePointerDown), context.stage.on("pointerup", this.handlePointerUp), context.stage.on("pointerleave", this.handlePointerUp), this.editModule.onInput(this.handleInput), this.editModule.onChange(this.handleChange);
+      }
+      showSelection(e) {
+        const cache = e.target.getFrameCache();
+        if (cache && this.editBg && this.pointerDown) {
+          let p0 = this.lastPoint,
+            p1 = this.getEventPosition(e),
+            line1Info = this.getLineByPoint(cache, p1);
+          const column1 = this.getColumnByLinePoint(line1Info, p1),
+            y1 = line1Info.top,
+            y2 = line1Info.top + line1Info.height;
+          let x = column1.left + column1.width,
+            cursorIndex = this.getColumnIndex(cache, column1);
+          p1.x < column1.left + column1.width / 2 && (x = column1.left, cursorIndex -= 1), p1.x = x, p1.y = (y1 + y2) / 2;
+          let line0Info = this.getLineByPoint(cache, p0);
+          if ((p0.y > p1.y || p0.y === p1.y && p0.x > p1.x) && ([p0, p1] = [p1, p0], [line1Info, line0Info] = [line0Info, line1Info]), this.editBg.removeAllChild(), line0Info === line1Info) {
+            const column0 = this.getColumnByLinePoint(line0Info, p0);
+            this.editBg.setAttributes({
+              x: p0.x,
+              y: line0Info.top,
+              width: p1.x - p0.x,
+              height: column0.height,
+              fill: "#336df4",
+              fillOpacity: .2
+            });
+          } else {
+            this.editBg.setAttributes({
+              x: 0,
+              y: line0Info.top,
+              width: 0,
+              height: 0
+            });
+            const startIdx = cache.lines.findIndex(item => item === line0Info),
+              endIdx = cache.lines.findIndex(item => item === line1Info);
+            let y = 0;
+            for (let i = startIdx; i <= endIdx; i++) {
+              const line = cache.lines[i];
+              if (i === startIdx) {
+                const p = line.paragraphs[line.paragraphs.length - 1];
+                this.editBg.add(createRect({
+                  x: p0.x,
+                  y: y,
+                  width: p.left + p.width - p0.x,
+                  height: line.height,
+                  fill: "#336df4",
+                  fillOpacity: .2
+                }));
+              } else if (i === endIdx) {
+                const p = line.paragraphs[0];
+                this.editBg.add(createRect({
+                  x: p.left,
+                  y: y,
+                  width: p1.x - p.left,
+                  height: line.height,
+                  fill: "#336df4",
+                  fillOpacity: .2
+                }));
+              } else {
+                const p0 = line.paragraphs[0],
+                  p1 = line.paragraphs[line.paragraphs.length - 1];
+                this.editBg.add(createRect({
+                  x: p0.left,
+                  y: y,
+                  width: p1.left + p1.width - p0.left,
+                  height: line.height,
+                  fill: "#336df4",
+                  fillOpacity: .2
+                }));
+              }
+              y += line.height;
+            }
+          }
+          this.curCursorIdx = cursorIndex, this.setCursorAndTextArea(x, y1 + 2, y2 - 2, e.target), this.applyUpdate(), this.updateCbs.forEach(cb => cb("selection", this));
+        }
+      }
+      hideSelection() {
+        this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
+          fill: "transparent"
+        }));
+      }
+      isRichtext(e) {
+        return !(!e.target || "richtext" !== e.target.type || !e.target.attribute.editable);
+      }
+      getEventPosition(e) {
+        const p = this.pluginService.stage.eventPointTransform(e),
+          p1 = {
+            x: 0,
+            y: 0
+          };
+        return e.target.globalTransMatrix.transformPoint(p, p1), p1;
+      }
+      getLineByPoint(cache, p1) {
+        let lineInfo = cache.lines[0];
+        for (let i = 0; i < cache.lines.length && !(lineInfo.top <= p1.y && lineInfo.top + lineInfo.height >= p1.y); i++) lineInfo = cache.lines[i + 1];
+        return lineInfo;
+      }
+      getColumnByLinePoint(lineInfo, p1) {
+        let columnInfo = lineInfo.paragraphs[0];
+        for (let i = 0; i < lineInfo.paragraphs.length && !(columnInfo.left <= p1.x && columnInfo.left + columnInfo.width >= p1.x); i++) columnInfo = lineInfo.paragraphs[i];
+        return columnInfo;
+      }
+      onFocus(e) {
+        this.deFocus(e);
+        const target = e.target;
+        this.tryUpdateRichtext(target);
+        const shadowRoot = target.attachShadow();
+        shadowRoot.setAttributes({
+          shadowRootIdx: -1
+        });
+        const cache = target.getFrameCache();
+        if (!cache) return;
+        if (!this.editLine) {
+          const line = createLine({
+            x: 0,
+            y: 0,
+            lineWidth: 1,
+            stroke: "black"
+          });
+          line.animate().to({
+            opacity: 1
+          }, 10, "linear").wait(700).to({
+            opacity: 0
+          }, 10, "linear").wait(700).loop(1 / 0), this.editLine = line;
+          const g = createGroup({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+          });
+          this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
+        }
+        const p1 = this.getEventPosition(e),
+          lineInfo = this.getLineByPoint(cache, p1);
+        if (lineInfo) {
+          const columnInfo = this.getColumnByLinePoint(lineInfo, p1);
+          if (!columnInfo) return;
+          let y1 = lineInfo.top,
+            y2 = lineInfo.top + lineInfo.height,
+            x = columnInfo.left + columnInfo.width;
+          y1 += 2, y2 -= 2;
+          let cursorIndex = this.getColumnIndex(cache, columnInfo);
+          p1.x < columnInfo.left + columnInfo.width / 2 && (x = columnInfo.left, cursorIndex -= 1), this.lastPoint = {
+            x: x,
+            y: (y1 + y2) / 2
+          }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, this.setCursorAndTextArea(x, y1, y2, target);
+        }
+      }
+      getPointByColumnIdx(idx, rt, orient) {
+        const cache = rt.getFrameCache(),
+          {
+            lineInfo: lineInfo,
+            columnInfo: columnInfo
+          } = this.getColumnByIndex(cache, idx);
+        let y1 = lineInfo.top,
+          y2 = lineInfo.top + lineInfo.height;
+        return y1 += 2, y2 -= 2, {
+          x: columnInfo.left + ("left" === orient ? 0 : columnInfo.width),
+          y1: y1,
+          y2: y2
+        };
+      }
+      getColumnIndex(cache, cInfo) {
+        let inputIndex = -1;
+        for (let i = 0; i < cache.lines.length; i++) {
+          const line = cache.lines[i];
+          for (let j = 0; j < line.paragraphs.length; j++) if (inputIndex++, cInfo === line.paragraphs[j]) return inputIndex;
+        }
+        return -1;
+      }
+      getColumnByIndex(cache, index) {
+        let inputIndex = -1;
+        for (let i = 0; i < cache.lines.length; i++) {
+          const lineInfo = cache.lines[i];
+          for (let j = 0; j < lineInfo.paragraphs.length; j++) {
+            const columnInfo = lineInfo.paragraphs[j];
+            if (inputIndex++, inputIndex === index) return {
+              lineInfo: lineInfo,
+              columnInfo: columnInfo
+            };
+          }
+        }
+        return null;
+      }
+      setCursorAndTextArea(x, y1, y2, rt) {
+        this.editLine.setAttributes({
+          points: [{
+            x: x,
+            y: y1
+          }, {
+            x: x,
+            y: y2
+          }]
+        });
+        const out = {
+          x: 0,
+          y: 0
+        };
+        rt.globalTransMatrix.getInverse().transformPoint({
+          x: x,
+          y: y1
+        }, out);
+        const {
+          left: left,
+          top: top
+        } = this.pluginService.stage.window.getBoundingClientRect();
+        out.x += left, out.y += top, this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
+      }
+      setCursor(x, y1, y2) {
+        this.editLine.setAttributes({
+          points: [{
+            x: x,
+            y: y1
+          }, {
+            x: x,
+            y: y2
+          }]
+        });
+      }
+      applyUpdate() {
+        this.pluginService.stage.renderNextFrame();
+      }
+      deFocus(e) {
+        e.target.detachShadow(), this.currRt = null, this.editLine && (this.editLine.parent.removeChild(this.editLine), this.editLine.release(), this.editLine = null, this.editBg.parent.removeChild(this.editBg), this.editBg.release(), this.editBg = null);
+      }
+      splitText(text) {
+        return Array.from(text);
+      }
+      tryUpdateRichtext(richtext) {
+        if (!richtext.getFrameCache().lines.every(line => line.paragraphs.every(item => !(item.text && isString$1(item.text) && this.splitText(item.text).length > 1)))) {
+          const tc = [];
+          richtext.attribute.textConfig.forEach(item => {
+            const textList = this.splitText(item.text.toString());
+            if (isString$1(item.text) && textList.length > 1) for (let i = 0; i < textList.length; i++) {
+              const t = textList[i];
+              tc.push(Object.assign(Object.assign({}, item), {
+                text: t
+              }));
+            } else tc.push(item);
+          }), richtext.setAttributes({
+            textConfig: tc
+          }), richtext.doUpdateFrameCache(tc);
+        }
+      }
+      onSelect() {}
+      deactivate(context) {
+        context.stage.off("pointermove", this.handleMove), context.stage.off("pointerdown", this.handlePointerDown), context.stage.off("pointerup", this.handlePointerUp), context.stage.off("pointerleave", this.handlePointerUp);
+      }
+      release() {
+        this.editModule.release();
+      }
+    }
+
     class DefaultGraphicAllocate {
       constructor() {
         this.pools = [];
@@ -25927,13 +26415,20 @@
     } catch (err) {}
     function makeUpCanvas$3(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, offscreen, pixelRatio) {
       const dpr = null != pixelRatio ? pixelRatio : SystemInfo.pixelRatio;
-      canvasIdLists.forEach((id, i) => {
+      if (canvasIdLists.forEach((id, i) => {
         let _canvas;
         offscreen ? _canvas = lynx.createOffscreenCanvas() : (_canvas = ng ? lynx.createCanvasNG(id) : lynx.createCanvas(id), ng && _canvas.attachToCanvasView(id)), _canvas.width = domref.width * dpr, _canvas.height = domref.height * dpr;
         const ctx = _canvas.getContext("2d"),
           canvas = new CanvasWrapEnableWH(_canvas, ctx, dpr, domref.width, domref.height, id);
-        canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
-      });
+        canvasMap.set(id, canvas), i > freeCanvasIdx && freeCanvasList.push(canvas);
+      }), !freeCanvasList.length && lynx.createOffscreenCanvas) {
+        const _canvas = lynx.createOffscreenCanvas();
+        _canvas.width = domref.width * dpr, _canvas.height = domref.height * dpr;
+        const ctx = _canvas.getContext("2d"),
+          id = Math.random().toString(),
+          canvas = new CanvasWrapEnableWH(_canvas, ctx, dpr, domref.width, domref.height, id);
+        canvasMap.set(id, canvas), freeCanvasList.push(canvas);
+      }
     }
     function createImageElement(src) {
       let isSvg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
@@ -28600,7 +29095,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.19.13-beta.1";
+    const version = "0.19.14-alpha.1";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);
@@ -28751,6 +29246,8 @@
     exports.EventManager = EventManager;
     exports.EventSystem = EventSystem;
     exports.EventTarget = EventTarget;
+    exports.FORMAT_ELEMENT_COMMAND = FORMAT_ELEMENT_COMMAND;
+    exports.FORMAT_TEXT_COMMAND = FORMAT_TEXT_COMMAND;
     exports.FadeInPlus = FadeInPlus;
     exports.FederatedEvent = FederatedEvent;
     exports.FederatedMouseEvent = FederatedMouseEvent;
@@ -28851,6 +29348,7 @@
     exports.RenderService = RenderService;
     exports.ResourceLoader = ResourceLoader;
     exports.RichText = RichText;
+    exports.RichTextEditPlugin = RichTextEditPlugin;
     exports.RichTextRender = RichTextRender;
     exports.RotateBySphereAnimate = RotateBySphereAnimate;
     exports.SVG_ATTRIBUTE_MAP = SVG_ATTRIBUTE_MAP;