@visactor/vrender 0.21.3-alpha.0 → 0.21.4-alpha.1

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.21.3-alpha.0";
+export declare const version = "0.21.4-alpha.1";
 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.21.3-alpha.0", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.21.4-alpha.1", (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,gBAAgB,CAAC;AAExC,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.21.3-alpha.0\";\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,gBAAgB,CAAC;AAExC,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.21.4-alpha.1\";\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

@@ -585,6 +585,31 @@ var __decorate$1H = undefined && undefined.__decorate || function (decorators, t
     return function (target, key) {
       decorator(target, key, paramIndex);
     };
+  },
+  __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator.throw(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        var value;
+        result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+          resolve(value);
+        })).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
   };
 let DefaultGlobal = class {
   get env() {
@@ -710,6 +735,11 @@ let DefaultGlobal = class {
   loadBlob(url) {
     return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
   }
+  loadFont(name, source, descriptors) {
+    return __awaiter$8(this, void 0, void 0, function* () {
+      return this._env || this.setEnv("browser"), this.envContribution.loadFont(name, source, descriptors);
+    });
+  }
   isChrome() {
     return null != this._isChrome || (this._env || this.setEnv("browser"), this._isChrome = "browser" === this._env && navigator.userAgent.indexOf("Chrome") > -1), this._isChrome;
   }
@@ -5789,7 +5819,7 @@ function getThemeFromGroup(graphic) {
   return null;
 }
 
-var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var __awaiter$7 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -5859,7 +5889,7 @@ class Node extends EventEmitter {
   }
   forEachChildrenAsync(cb) {
     let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-    return __awaiter$5(this, void 0, void 0, function* () {
+    return __awaiter$7(this, void 0, void 0, function* () {
       if (reverse) {
         let child = this._lastChild,
           i = 0;
@@ -10467,7 +10497,7 @@ function isXML(str) {
   return str.startsWith("<");
 }
 
-var __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var __awaiter$6 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -10496,7 +10526,7 @@ function incrementalAddTo(group, graphic) {
   group.incrementalAppendChild(graphic);
 }
 function waitForAllSubLayers(stage) {
-  return __awaiter$4(this, void 0, void 0, function* () {
+  return __awaiter$6(this, void 0, void 0, function* () {
     const promiseList = [],
       layers = stage.getChildren();
     yield new Promise(resolve => {
@@ -12445,7 +12475,9 @@ class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRend
     const {
       background: background,
       backgroundMode = graphicAttribute.backgroundMode,
-      backgroundFit = graphicAttribute.backgroundFit
+      backgroundFit = graphicAttribute.backgroundFit,
+      width: width,
+      height: height
     } = graphic.attribute;
     if (background) if (graphic.backgroundImg) {
       const res = graphic.resources.get(background);
@@ -12478,11 +12510,7 @@ class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRend
         height: height
       } = getActualPosition(graphic);
       cornerRadius ? createRectPath(context, x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius) : context.rect(x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
-    } else {
-      context.beginPath();
-      const b = graphic.AABBBounds;
-      context.rect(x, y, b.width(), b.height()), context.fillStyle = background, context.globalAlpha = 1, context.fill();
-    }
+    } else context.beginPath(), context.rect(x, y, width || 0, height || 0), context.fillStyle = background, context.globalAlpha = 1, context.fill();
   }
 }
 function getActualPosition(graphic) {
@@ -14199,7 +14227,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
     const _runFill = () => {
         if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
           if (!url || !image.resources) return;
@@ -14216,7 +14244,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
         }
       },
       _runStroke = () => {
-        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
+        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.strokeRect(x, y, width, height)));
       };
     fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
   }
@@ -17835,7 +17863,7 @@ function load$1(container) {
   container.load(envModules), container.load(textMeasureModules), container.load(layerHandlerModules);
 }
 
-var __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var __awaiter$5 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -17908,7 +17936,7 @@ function foreach(graphic, defaultZIndex, cb) {
 }
 function foreachAsync(graphic, defaultZIndex, cb) {
   let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-  return __awaiter$3(this, void 0, void 0, function* () {
+  return __awaiter$5(this, void 0, void 0, function* () {
     yield graphic.forEachChildrenAsync(cb, reverse);
   });
 }
@@ -18269,7 +18297,7 @@ var STATUS,
       decorator(target, key, paramIndex);
     };
   },
-  __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  __awaiter$4 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
     return new (P || (P = Promise))(function (resolve, reject) {
       function fulfilled(value) {
         try {
@@ -18304,7 +18332,7 @@ let DefaultIncrementalDrawContribution = class extends DefaultDrawContribution {
     }, this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
   }
   draw(renderService, drawContext) {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       if (this.checkingForDrawPromise) return;
       this.lastRenderService = renderService, this.lastDrawContext = drawContext, this.checkingForDrawPromise = this.checkForDraw(drawContext);
       const skipDraw = yield this.checkingForDrawPromise;
@@ -18325,15 +18353,15 @@ let DefaultIncrementalDrawContribution = class extends DefaultDrawContribution {
     });
   }
   _increaseRender(group, drawContext) {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       this.rendering = !0, yield this._renderIncrementalGroup(group, drawContext);
     });
   }
   _renderIncrementalGroup(group, drawContext) {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       this.count = group.count, yield new Promise(resolve => {
         this.renderItem(group, drawContext, {
-          drawingCb: () => __awaiter$2(this, void 0, void 0, function* () {
+          drawingCb: () => __awaiter$4(this, void 0, void 0, function* () {
             if (2 !== group.count) yield foreachAsync(group, DefaultAttribute.zIndex, (item, i) => {
               if (this.status === STATUS.STOP) return !0;
               if (item.isContainer) return !1;
@@ -18354,7 +18382,7 @@ let DefaultIncrementalDrawContribution = class extends DefaultDrawContribution {
     });
   }
   waitToNextFrame() {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       return new Promise(resolve => {
         this.global.getRequestAnimationFrame()(() => {
           resolve(!1);
@@ -18363,13 +18391,13 @@ let DefaultIncrementalDrawContribution = class extends DefaultDrawContribution {
     });
   }
   checkForDraw(drawContext) {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       let skip = this.rendering;
       return drawContext.restartIncremental && (skip = !1, yield this.forceStop(), this.resetToInit()), skip;
     });
   }
   forceStop() {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       this.rendering && (this.status = STATUS.STOP, yield new Promise(resolve => {
         this.hooks.completeDraw.tap("stopCb", () => {
           this.status = STATUS.NORMAL, this.hooks.completeDraw.taps = this.hooks.completeDraw.taps.filter(item => "stopCb" !== item.name), resolve(!1);
@@ -18381,11 +18409,11 @@ let DefaultIncrementalDrawContribution = class extends DefaultDrawContribution {
     this.currFrameStartAt = 0, this.currentIdx = 0;
   }
   renderGroup(group, drawContext) {
-    return __awaiter$2(this, void 0, void 0, function* () {
+    return __awaiter$4(this, void 0, void 0, function* () {
       if (!drawContext.break && !1 !== group.attribute.visibleAll) return group.incremental && drawContext.startAtId === group._uid ? (yield this._increaseRender(group, drawContext), void (drawContext.break = !0)) : void (yield new Promise(resolve => {
         this.renderItem(group, drawContext, {
-          drawingCb: () => __awaiter$2(this, void 0, void 0, function* () {
-            yield foreachAsync(group, DefaultAttribute.zIndex, item => __awaiter$2(this, void 0, void 0, function* () {
+          drawingCb: () => __awaiter$4(this, void 0, void 0, function* () {
+            yield foreachAsync(group, DefaultAttribute.zIndex, item => __awaiter$4(this, void 0, void 0, function* () {
               drawContext.break || item.isContainer && (yield this.renderGroup(item, drawContext));
             })), resolve(!1);
           })
@@ -19407,12 +19435,37 @@ class BaseCanvas {
 BaseCanvas.env = "browser";
 
 var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-  var d,
-    c = arguments.length,
-    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  },
+  __awaiter$3 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator.throw(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        var value;
+        result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+          resolve(value);
+        })).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  };
 let BaseEnvContribution = class {
   configure(service) {
     service.env === this.type && service.setActiveEnvContribution(this);
@@ -19481,6 +19534,13 @@ let BaseEnvContribution = class {
       left: 0
     };
   }
+  loadFont(font, source, descriptors) {
+    return __awaiter$3(this, void 0, void 0, function* () {
+      return {
+        loadState: "fail"
+      };
+    });
+  }
 };
 BaseEnvContribution = __decorate$1c([injectable()], BaseEnvContribution);
 
@@ -20491,7 +20551,7 @@ let DefaultCanvasRichTextRender = class extends BaseRender {
     const fVisible = fillVisible(opacity, fillOpacity, !0),
       sVisible = fillVisible(opacity, strokeOpacity, !0);
     if (!fVisible) return;
-    context.translate(x, y), this.beforeRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(richtext, richtext.attribute, richtextAttribute), context.translate(x, y), this.beforeRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
     richtext.getFrameCache().draw(context, this.drawIcon), this.afterRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
   }
   drawIcon(icon, context, x, y, baseline) {
@@ -20925,11 +20985,18 @@ function registerWrapTextGraphic() {
 
 class HtmlAttributePlugin {
   constructor() {
-    this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.htmlMap = {}, this.renderId = 0;
+    this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.htmlMap = {}, this.renderId = 0, this.onWheel = ev => {
+      try {
+        const newEvent = new ev.constructor(ev.type, ev);
+        this.pluginService.stage.window.getContext().getCanvas().nativeCanvas.dispatchEvent(newEvent);
+      } catch (err) {
+        return;
+      }
+    };
   }
   activate(context) {
     this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
-      stage && stage === this.pluginService.stage && this.drawHTML(context.stage.renderService);
+      stage && stage === this.pluginService.stage && this.drawHTML([...context.stage.getChildren()]);
     });
   }
   deactivate(context) {
@@ -20991,10 +21058,13 @@ class HtmlAttributePlugin {
   }
   updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, options) {
     const {
-      pointerEvents: pointerEvents
+      pointerEvents: pointerEvents,
+      penetrateEventList = []
     } = options;
     let calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
-    calculateStyle.display = !1 !== graphic.attribute.visible ? "block" : "none", calculateStyle.pointerEvents = !0 === pointerEvents ? "all" : pointerEvents || "none", wrapContainer.style.position || (wrapContainer.style.position = "absolute", nativeContainer.style.position = "relative");
+    calculateStyle.display = !1 !== graphic.attribute.visible ? "block" : "none", calculateStyle.pointerEvents = !0 === pointerEvents ? "all" : pointerEvents || "none", "none" !== calculateStyle.pointerEvents && (this.removeWrapContainerEventListener(wrapContainer), penetrateEventList.forEach(event => {
+      "wheel" === event && wrapContainer.addEventListener("wheel", this.onWheel);
+    })), wrapContainer.style.position || (wrapContainer.style.position = "absolute", nativeContainer.style.position = "relative");
     let left = 0,
       top = 0;
     const b = graphic.globalAABBBounds;
@@ -21031,8 +21101,8 @@ class HtmlAttributePlugin {
       this.htmlMap[key] && this.htmlMap[key].renderId !== this.renderId && this.removeElement(key);
     }), this.renderId += 1;
   }
-  drawHTML(renderService) {
-    "browser" === application.global.env && (renderService.renderTreeRoots.sort((a, b) => {
+  drawHTML(layers) {
+    "browser" === application.global.env && (layers.sort((a, b) => {
       var _a, _b;
       return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
     }).forEach(group => {
@@ -21051,6 +21121,9 @@ class HtmlAttributePlugin {
     } = this.htmlMap[id];
     wrapContainer && application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
   }
+  removeWrapContainerEventListener(wrapContainer) {
+    wrapContainer.removeEventListener("wheel", this.onWheel);
+  }
   renderGraphicHTML(graphic) {
     var _a;
     const {
@@ -24044,6 +24117,7 @@ class Gesture extends EventEmitter {
     });
   }
   emitEvent(type, e) {
+    if (!this.element) return;
     const listeners = this.element._events[WILDCARD];
     if (listeners) if ("fn" in listeners) listeners.fn.call(listeners.context, e, type);else for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) listeners[i].fn.call(listeners[i].context, e, type);
     this.emit(type, e);
@@ -24921,6 +24995,31 @@ var __decorate$T = undefined && undefined.__decorate || function (decorators, ta
   },
   __metadata$J = undefined && undefined.__metadata || function (k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  },
+  __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator.throw(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        var value;
+        result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+          resolve(value);
+        })).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
   };
 class DynamicB {
   get x1() {
@@ -25116,6 +25215,19 @@ let BrowserEnvContribution = class extends BaseEnvContribution {
       left: actualLeft
     };
   }
+  loadFont(font, source, descriptors) {
+    return __awaiter$2(this, void 0, void 0, function* () {
+      return new FontFace(font, isString$1(source) ? `url(${source})` : source, descriptors).load().then(function (loadedFont) {
+        return document.fonts.add(loadedFont), {
+          loadState: "success"
+        };
+      }).catch(function (error) {
+        return console.error("Failed to load font:", error), {
+          loadState: "fail"
+        };
+      });
+    });
+  }
 };
 BrowserEnvContribution = __decorate$T([injectable(), __metadata$J("design:paramtypes", [])], BrowserEnvContribution);
 
@@ -28675,7 +28787,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.21.3-alpha.0";
+const version = "0.21.4-alpha.1";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);