@visactor/vrender 0.22.0-vstory.2 → 0.22.0-vstory.3

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.22.0-vstory.2";
+export declare const version = "0.22.0-vstory.3";
 export * from '@visactor/vrender-core';
 export * from '@visactor/vrender-kits';

package/cjs/index.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 
 const vrender_core_1 = require("@visactor/vrender-core"), vrender_kits_1 = require("@visactor/vrender-kits"), vrender_kits_2 = require("@visactor/vrender-kits");
 
-exports.version = "0.22.0-vstory.2", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.22.0-vstory.3", (0, vrender_core_1.preLoadAllModule)(), (0, 
 vrender_core_1.isBrowserEnv)() ? (0, vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, 
 vrender_core_1.isNodeEnv)() && (0, vrender_kits_1.loadNodeEnv)(vrender_core_1.container), 
 (0, vrender_kits_2.registerArc)(), (0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,iBAAiB,CAAC;AAEzC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.22.0-vstory.2\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,iBAAiB,CAAC;AAEzC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.22.0-vstory.3\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

package/dist/index.es.js

@@ -13915,7 +13915,8 @@ class Paragraph {
     } = measureTextCanvas(this.text, this.character);
     this.width = width, "vertical" === this.direction && (this.widthOrigin = this.width, this.width = this.heightOrigin, this.height = this.widthOrigin);
   }
-  draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+  drawBackground(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+    if (!this.character.background || this.character.backgroundOpacity && !(this.character.backgroundOpacity > 0)) return;
     let baseline = top + ascent,
       text = this.text,
       left = this.left + deltaLeft;
@@ -13940,13 +13941,39 @@ class Paragraph {
       case "sub":
         baseline += this.descent / 2;
     }
-    if ("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), this.character.fill && this.character.background && (!this.character.backgroundOpacity || this.character.backgroundOpacity > 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;
+    "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;
+  }
+  draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+    let baseline = top + ascent,
+      text = this.text,
+      left = this.left + deltaLeft;
+    baseline += this.top;
+    let direction = this.direction;
+    if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
+      if ("hide" === this.ellipsis) return;
+      if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+        const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+          const {
+            width: width
+          } = measureTextCanvas(this.text.slice(index), this.character);
+          "vertical" === direction || (left -= this.ellipsisWidth - width);
+        }
+      }
+    }
+    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 {
       lineWidth = 1
     } = this.character;
@@ -14194,6 +14221,8 @@ class Line {
       }
     }
     this.paragraphs.forEach((paragraph, index) => {
+      paragraph instanceof RichTextIcon || paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
+    }), this.paragraphs.forEach((paragraph, index) => {
       if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
         x: x + paragraph._x,
         y: y + paragraph._y
@@ -30430,7 +30459,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.22.0-vstory.2";
+const version = "0.22.0-vstory.3";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);

package/dist/index.js

@@ -13921,7 +13921,8 @@
         } = measureTextCanvas(this.text, this.character);
         this.width = width, "vertical" === this.direction && (this.widthOrigin = this.width, this.width = this.heightOrigin, this.height = this.widthOrigin);
       }
-      draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+      drawBackground(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+        if (!this.character.background || this.character.backgroundOpacity && !(this.character.backgroundOpacity > 0)) return;
         let baseline = top + ascent,
           text = this.text,
           left = this.left + deltaLeft;
@@ -13946,13 +13947,39 @@
           case "sub":
             baseline += this.descent / 2;
         }
-        if ("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), this.character.fill && this.character.background && (!this.character.backgroundOpacity || this.character.backgroundOpacity > 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;
+        "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;
+      }
+      draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+        let baseline = top + ascent,
+          text = this.text,
+          left = this.left + deltaLeft;
+        baseline += this.top;
+        let direction = this.direction;
+        if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
+          if ("hide" === this.ellipsis) return;
+          if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+            const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
+            if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+              const {
+                width: width
+              } = measureTextCanvas(this.text.slice(index), this.character);
+              "vertical" === direction || (left -= this.ellipsisWidth - width);
+            }
+          }
+        }
+        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 {
           lineWidth = 1
         } = this.character;
@@ -14200,6 +14227,8 @@
           }
         }
         this.paragraphs.forEach((paragraph, index) => {
+          paragraph instanceof RichTextIcon || paragraph.drawBackground(ctx, y, this.ascent, x, 0 === index, this.textAlign, this.height);
+        }), this.paragraphs.forEach((paragraph, index) => {
           if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
             x: x + paragraph._x,
             y: y + paragraph._y
@@ -30436,7 +30465,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.22.0-vstory.2";
+    const version = "0.22.0-vstory.3";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);