@visactor/vrender 0.22.0-vstory.6 → 0.22.0-vstory.8

package/dist/index.js

@@ -10918,7 +10918,7 @@
         application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         const selfChange = this.shouldSelfChangeUpdateAABBBounds(),
           bounds = this.doUpdateAABBBounds();
-        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), bounds;
+        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
       }
       doUpdateLocalMatrix() {
         const {
@@ -13888,15 +13888,11 @@
     }
 
     function getFixedLRTB(left, right, top, bottom) {
-      const leftInt = Math.round(left),
-        topInt = Math.round(top),
-        rightInt = Math.round(right),
-        bottomInt = Math.round(bottom);
       return {
-        left: left > leftInt ? leftInt : leftInt - .5,
-        top: top > topInt ? topInt : topInt - .5,
-        right: rightInt > right ? rightInt : rightInt + .5,
-        bottom: bottomInt > bottom ? bottomInt : bottomInt + .5
+        left: Math.round(left),
+        top: Math.round(top),
+        right: Math.round(right),
+        bottom: Math.round(bottom)
       };
     }
     class Paragraph {
@@ -13940,19 +13936,11 @@
             }
           }
         }
-        switch (this.character.script) {
-          case "super":
-            baseline -= this.ascent * (1 / 3);
-            break;
-          case "sub":
-            baseline += this.descent / 2;
-        }
-        "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0);
-        const fillStyle = ctx.fillStyle,
-          globalAlpha = ctx.globalAlpha;
-        ctx.fillStyle = this.character.background, void 0 !== this.character.backgroundOpacity && (ctx.globalAlpha = this.character.backgroundOpacity);
         const lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + lineHeight);
-        ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top), ctx.fillStyle = fillStyle, ctx.globalAlpha = globalAlpha;
+        return Object.assign(Object.assign({}, lrtb), {
+          fillStyle: this.character.background,
+          globalAlpha: this.character.backgroundOpacity
+        });
       }
       draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
         let baseline = top + ascent,
@@ -14226,8 +14214,19 @@
             paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
           }
         }
+        let fillStyle = "",
+          globalAlpha = -1,
+          currBgList = [];
+        const bgList = [currBgList];
         this.paragraphs.forEach((paragraph, index) => {
-          paragraph instanceof RichTextIcon || paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
+          if (paragraph instanceof RichTextIcon) return;
+          const data = paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
+          data && (fillStyle === data.fillStyle && globalAlpha === data.globalAlpha || (currBgList = [], bgList.push(currBgList), fillStyle = data.fillStyle, globalAlpha = data.globalAlpha), currBgList.push(data));
+        }), bgList.forEach(bg => {
+          if (0 === bg.length) return;
+          const data = bg[0],
+            end = bg[bg.length - 1];
+          ctx.fillStyle = data.fillStyle, ctx.globalAlpha = data.globalAlpha, ctx.fillRect(data.left, data.top, end.right - data.left, end.bottom - data.top);
         }), this.paragraphs.forEach((paragraph, index) => {
           if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
             x: x + paragraph._x,
@@ -14390,7 +14389,13 @@
         }
         return cache.every(item => item.isComposing || !(item.text && isString$1(item.text) && RichText.splitText(item.text).length > 1));
       }
+      static splitEmoji(text) {
+        return [...new Intl.Segmenter().segment(text)].map(x => x.segment);
+      }
       static splitText(text) {
+        try {
+          return this.splitEmoji(text);
+        } catch (e) {}
         return Array.from(text);
       }
       static TransformTextConfig2SingleCharacter(textConfig) {
@@ -18436,7 +18441,7 @@
       renderGroup(group, drawContext, parentMatrix, skipSort) {
         if (drawContext.break || !1 === group.attribute.visibleAll) return;
         if (group.incremental && (null == drawContext.startAtId || drawContext.startAtId === group._uid)) return drawContext.break = !0, void this._increaseRender(group, drawContext);
-        if (this.useDirtyBounds && !isRectIntersect(group.AABBBounds, this.dirtyBounds, !1)) return;
+        if (this.useDirtyBounds && !isRectIntersect(group.AABBBounds, this.dirtyBounds, !1) && "empty" !== group.attribute.boundsMode) return;
         let tempBounds,
           nextM = parentMatrix;
         if (this.useDirtyBounds) {
@@ -20431,9 +20436,9 @@
         textConfig.splice(configIdx, 1);
         const text = lastConfig.text,
           textList = text ? Array.from(text.toString()) : [];
-        for (let i = 0; i < textList.length; i++) textConfig.splice(i + configIdx, 0, Object.assign(Object.assign({
+        for (let i = 0; i < textList.length; i++) textConfig.splice(i + configIdx, 0, Object.assign(Object.assign(Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), {
           fill: "black"
-        }, lastConfig), {
+        }), lastConfig), {
           isComposing: !1,
           text: textList[i]
         }));
@@ -20633,9 +20638,11 @@
           const cache = currRt.getFrameCache();
           if (!cache) return;
           const {
-              lines: lines
-            } = cache,
-            totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
+            lines: lines
+          } = cache;
+          if (0 === lines.length) return;
+          if (!lines[0].paragraphs || 0 === lines[0].paragraphs.length) return;
+          const totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
           return this.selectionRange(-.1, totalCursorCount + .1), e.preventDefault(), !0;
         }
         return !1;
@@ -20703,18 +20710,19 @@
             placeholderFontFamily: placeholderFontFamily,
             placeholderFontSize: placeholderFontSize
           } = editOptions,
-          shadow = this.currRt.shadowRoot || this.currRt.attachShadow();
-        this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), {
+          shadow = this.getShadow(this.currRt),
+          textConfigItem = Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), {
+            text: placeholder
+          });
+        placeholderColor && (textConfigItem.fill = placeholderColor), placeholderFontFamily && (textConfigItem.fontFamily = placeholderFontFamily), placeholderFontSize && (textConfigItem.fontSize = placeholderFontSize), this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), {
           x: 0,
           y: 0,
+          pickable: !1,
+          editable: !1,
+          editOptions: null,
           angle: 0,
           _debug_bounds: !1,
-          textConfig: [{
-            text: placeholder,
-            fill: placeholderColor,
-            fontFamily: placeholderFontFamily,
-            fontSize: placeholderFontSize
-          }]
+          textConfig: [textConfigItem]
         })), shadow.add(this.shadowPlaceHolder);
       }
       tryShowInputBounds() {
@@ -20727,15 +20735,15 @@
           } = editOptions;
         if (!editOptions || !boundsStrokeWhenInput) return;
         const {
-            attribute: attribute
-          } = this.currRt,
-          b = this.currRt.AABBBounds;
-        let h = b.height();
+          attribute: attribute
+        } = this.currRt;
+        let b = this.currRt.AABBBounds,
+          h = b.height();
         if (!attribute.textConfig.length && this.editLine) {
           const {
             points: points
           } = this.editLine.attribute;
-          h = points[1].y - points[0].y;
+          h = points[1].y - points[0].y, b = getRichTextBounds(Object.assign({}, this.shadowPlaceHolder.attribute));
         }
         this.shadowBounds = this.shadowBounds || createRect({}), this.shadowBounds.setAttributes({
           x: 0,
@@ -20745,10 +20753,9 @@
           fill: !1,
           stroke: boundsStrokeWhenInput,
           lineWidth: 1,
-          boundsMode: "empty",
           zIndex: -1
         });
-        (this.currRt.shadowRoot || this.currRt.attachShadow()).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
+        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
       }
       trySyncPlaceholderToTextConfig() {
         if (!this.currRt) return;
@@ -20757,7 +20764,7 @@
           editOptions: editOptions
         } = this.currRt.attribute;
         if (textConfig && textConfig.length) return;
-        if (!editOptions || !editOptions.placeholder) return;
+        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceHolderToTextConfig)) return;
         const {
           placeholder: placeholder
         } = editOptions;
@@ -20771,11 +20778,11 @@
         context.stage.off("pointermove", this.handleMove), context.stage.off("pointerdown", this.handlePointerDown), context.stage.off("pointerup", this.handlePointerUp), context.stage.off("pointerleave", this.handlePointerUp), context.stage.off("dblclick", this.handleDBLClick), application.global.addEventListener("keydown", this.handleKeyDown);
       }
       onFocus(e, data) {
-        this.deFocus(!1), this.focusing = !0;
+        this.updateCbs && this.updateCbs.forEach(cb => cb("beforeOnfocus", this)), this.deFocus(!1), this.focusing = !0;
         const target = e.target;
         if (!target || "richtext" !== target.type) return;
         this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
-        const shadowRoot = target.shadowRoot || target.attachShadow(),
+        const shadowRoot = this.getShadow(target),
           cache = target.getFrameCache();
         if (cache) {
           if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
@@ -20788,16 +20795,14 @@
               x: 0,
               y: 0,
               lineWidth: 1,
-              stroke: "black",
-              boundsMode: "empty"
+              stroke: "black"
             });
             this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
             const g = createGroup({
               x: 0,
               y: 0,
               width: 0,
-              height: 0,
-              boundsMode: "empty"
+              height: 0
             });
             this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
           }
@@ -20852,7 +20857,9 @@
         let trulyDeFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         const target = this.currRt;
         if (!target) return;
-        trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
+        this.updateCbs && this.updateCbs.forEach(cb => cb("beforeDefocus", this, {
+          trulyDeFocus: trulyDeFocus
+        })), trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), target.detachShadow());
         const currRt = this.currRt;
         this.currRt = null, this.editLine && (this.editLine.parent && this.editLine.parent.removeChild(this.editLine), this.editLine.release(), this.editLine = null, this.editBg.parent && this.editBg.parent.removeChild(this.editBg), this.editBg.release(), this.editBg = null), trulyDeFocus && (this.shadowBounds && (this.shadowBounds.parent && this.shadowBounds.parent.removeChild(this.shadowBounds), this.shadowBounds.release(), this.shadowBounds = null), this.shadowPlaceHolder && (this.shadowPlaceHolder.parent && this.shadowPlaceHolder.parent.removeChild(this.shadowPlaceHolder), this.shadowPlaceHolder.release(), this.shadowPlaceHolder = null)), this.focusing = !1;
         const textConfig = currRt.attribute.textConfig;
@@ -20909,67 +20916,75 @@
           },
           line0Info = this.getLineByPoint(cache, startCursorPos),
           line1Info = this.getLineByPoint(cache, endCursorPos);
-        if ((startCursorPos.y > endCursorPos.y || startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x) && ([startCursorPos, endCursorPos] = [endCursorPos, startCursorPos], [line1Info, line0Info] = [line0Info, line1Info]), this.hideSelection(), line0Info === line1Info) this.editBg.setAttributes({
-          x: startCursorPos.x,
-          y: line0Info.top,
-          width: endCursorPos.x - startCursorPos.x,
-          height: line0Info.height,
-          fill: "#336df4",
-          fillOpacity: .2
-        });else {
-          this.editBg.setAttributes({
-            x: 0,
+        if (line0Info && line1Info) {
+          if ((startCursorPos.y > endCursorPos.y || startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x) && ([startCursorPos, endCursorPos] = [endCursorPos, startCursorPos], [line1Info, line0Info] = [line0Info, line1Info]), this.hideSelection(), line0Info === line1Info) this.editBg.setAttributes({
+            x: startCursorPos.x,
             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: startCursorPos.x,
-                y: y,
-                width: p.left + p.width - startCursorPos.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: endCursorPos.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
-              }));
+            width: endCursorPos.x - startCursorPos.x,
+            height: line0Info.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: startCursorPos.x,
+                  y: y,
+                  width: p.left + p.width - startCursorPos.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: endCursorPos.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;
             }
-            y += line.height;
           }
+          this.setCursorAndTextArea(currCursorData.x, currCursorData.y1, currCursorData.y2, this.currRt), this.triggerRender(), this.updateCbs.forEach(cb => cb("selection", this));
         }
-        this.setCursorAndTextArea(currCursorData.x, currCursorData.y1, currCursorData.y2, this.currRt), this.triggerRender(), this.updateCbs.forEach(cb => cb("selection", this));
       }
       hideSelection() {
         this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
           fill: "transparent"
         }));
       }
+      getShadow(rt) {
+        const sr = rt.shadowRoot || rt.attachShadow();
+        return sr.setAttributes({
+          boundsMode: "empty"
+        }), sr;
+      }
       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];
@@ -30465,7 +30480,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.22.0-vstory.6";
+    const version = "0.22.0-vstory.8";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);