@visactor/vrender 0.19.12 → 0.19.13-alpha.1

package/dist/index.js

@@ -12920,10 +12920,10 @@
           strokeOpacity: strokeOpacity
         }, config);
       }
-      doUpdateFrameCache() {
+      doUpdateFrameCache(tc) {
         var _a;
         const {
-            textConfig = [],
+            textConfig: _tc = [],
             maxWidth: maxWidth,
             maxHeight: maxHeight,
             width: width,
@@ -12937,7 +12937,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);
@@ -17070,10 +17071,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;
@@ -20284,6 +20285,356 @@
       return points = simplifyDouglasPeucker(points = highestQuality ? points : simplifyRadialDist(points, sqTolerance), sqTolerance);
     }
 
+    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,
+            lastConfig = textConfig[this.cursorIndex];
+          textConfig.splice(this.cursorIndex + 1, 0, Object.assign(Object.assign({}, lastConfig), {
+            text: ""
+          })), this.isComposing = !0;
+        }, this.handleCompositionEnd = () => {
+          this.isComposing = !1;
+          const curIdx = this.cursorIndex + 1,
+            {
+              textConfig = []
+            } = this.currRt.attribute,
+            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);
+          });
+        }, this.handleInput = ev => {
+          if (!this.currRt) return;
+          const str = ev.data || "\n",
+            {
+              textConfig = []
+            } = this.currRt.attribute;
+          let startIdx = this.selectionStartCursorIdx,
+            endIdx = this.cursorIndex;
+          startIdx > endIdx && ([startIdx, endIdx] = [endIdx, startIdx]), this.selectionStartCursorIdx = startIdx, this.cursorIndex = startIdx;
+          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, this.currRt);
+          }) : this.onChangeCbList.forEach(cb => {
+            cb(str, this.isComposing, startIdx, this.currRt);
+          });
+        }, 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 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) => {
+          const p = this.getPointByColumnIdx(cursorIdx, rt);
+          this.hideSelection(), this.setCursor(p.x, p.y1, p.y2);
+        }, this.handleChange = (text, isComposing, cursorIdx, rt) => {
+          const p = this.getPointByColumnIdx(cursorIdx, rt);
+          this.curCursorIdx = cursorIdx, this.selectionStartCursorIdx = cursorIdx, this.setCursorAndTextArea(p.x, p.y1, p.y2, rt), this.hideSelection();
+        }, this.handleMove = e => {
+          this.isRichtext(e) && (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.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");
+        };
+      }
+      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) {
+          if (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();
+        }
+      }
+      hideSelection() {
+        this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
+          fill: "transparent"
+        }));
+      }
+      isRichtext(e) {
+        return !(!e.target || "richtext" !== e.target.type);
+      }
+      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) {
+        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 + 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.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.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 = [];
@@ -24530,7 +24881,7 @@
         };
       });
     }
-    exports.BrowserEnvContribution = class BrowserEnvContribution extends exports.BaseEnvContribution {
+    let BrowserEnvContribution = class extends exports.BaseEnvContribution {
       constructor() {
         super(), this.type = "browser", this.supportEvent = !0;
         try {
@@ -24684,10 +25035,10 @@
         };
       }
     };
-    exports.BrowserEnvContribution = __decorate$U([injectable(), __metadata$J("design:paramtypes", [])], exports.BrowserEnvContribution);
+    BrowserEnvContribution = __decorate$U([injectable(), __metadata$J("design:paramtypes", [])], BrowserEnvContribution);
 
     const browserEnvModule = new ContainerModule(bind => {
-      browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(exports.BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(exports.BrowserEnvContribution));
+      browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
     });
     browserEnvModule.isBrowserBound = !1;
     function loadBrowserEnv(container) {
@@ -25921,13 +26272,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;
@@ -28594,7 +28952,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.19.12";
+    const version = "0.19.13-alpha.1";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);
@@ -28771,7 +29129,6 @@
     exports.GroupFadeOut = GroupFadeOut;
     exports.GroupRender = GroupRender;
     exports.GroupRenderContribution = GroupRenderContribution;
-    exports.HtmlAttributePlugin = HtmlAttributePlugin;
     exports.IMAGE_NUMBER_TYPE = IMAGE_NUMBER_TYPE;
     exports.Image = Image;
     exports.ImageRender = ImageRender;
@@ -28834,7 +29191,6 @@
     exports.RECT_NUMBER_TYPE = RECT_NUMBER_TYPE;
     exports.RICHTEXT_NUMBER_TYPE = RICHTEXT_NUMBER_TYPE;
     exports.RafBasedSTO = RafBasedSTO;
-    exports.ReactAttributePlugin = ReactAttributePlugin;
     exports.Rect = Rect;
     exports.Rect3DRender = Rect3DRender;
     exports.Rect3d = Rect3d;
@@ -28845,6 +29201,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;
@@ -28944,7 +29301,6 @@
     exports.createGlyph = createGlyph;
     exports.createGroup = createGroup;
     exports.createImage = createImage;
-    exports.createImageElement = createImageElement$1;
     exports.createLine = createLine;
     exports.createMat4 = createMat4;
     exports.createPath = createPath;