@antv/g-plugin-html-renderer - npm Package Compare versions

Comparing version 1.0.22 to 1.1.0

dist/index.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@antv/g"),require("mana-syringe")):"function"==typeof define&&define.amd?define(["@antv/g","mana-syringe"],t):"object"==typeof exports?exports.HTMLRenderer=t(require("@antv/g"),require("mana-syringe")):(e.G=e.G||{},e.G.HTMLRenderer=t(e.G,e.G.ManaSyringe))}(window,(function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.r(t),n.d(t,"Plugin",(function(){return d}));var r=n(1);
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@antv/g"),require("mana-syringe")):"function"==typeof define&&define.amd?define(["@antv/g","mana-syringe"],t):"object"==typeof exports?exports.HTMLRenderer=t(require("@antv/g"),require("mana-syringe")):(e.G=e.G||{},e.G.HTMLRenderer=t(e.G,e.G.ManaSyringe))}(window,(function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.r(t),n.d(t,"Plugin",(function(){return f}));var r=n(1);
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function o(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function i(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function a(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{u(r.next(e))}catch(e){i(e)}}function c(e){try{u(r.throw(e))}catch(e){i(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}u((r=r.apply(e,t||[])).next())}))}function c(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(i){return function(c){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}Object.create;Object.create;var u=n(0),l=function(){function e(){}var t;return t=e,e.prototype.apply=function(e){var n=this,r=function(e){var t=e.target;if(t.nodeName===u.Shape.HTML){var r=t.parsedStyle.innerHTML,o="g-html-"+t.entity,i=n.contextService.getDomElement().parentNode;if(i)if(!i.querySelector("#"+o)){var a=document.createElement("div");t.parsedStyle.$el=a,a.id=o,Object(u.isString)(r)?a.innerHTML=r:a.appendChild(r),i.appendChild(a)}}},o=function(e){var t=e.target;if(t.nodeName===u.Shape.HTML){var r="g-html-"+t.entity,o=n.contextService.getDomElement().parentNode;if(o){var i=o.querySelector("#"+r);i&&o.removeChild(i)}}};e.hooks.init.tapPromise(t.tag,(function(){return a(n,void 0,void 0,(function(){return c(this,(function(e){return this.renderingContext.root.addEventListener(u.ElementEvent.MOUNTED,r),this.renderingContext.root.addEventListener(u.ElementEvent.UNMOUNTED,o),[2]}))}))})),e.hooks.destroy.tap(t.tag,(function(){n.renderingContext.root.removeEventListener(u.ElementEvent.MOUNTED,r),n.renderingContext.root.removeEventListener(u.ElementEvent.UNMOUNTED,o)})),e.hooks.render.tap(t.tag,(function(e){if(e.nodeName===u.Shape.HTML){var t="g-html-"+e.entity,r=n.contextService.getDomElement().parentNode;if(r){var o=r.querySelector("#"+t);n.updateCSSStyle(o,e.parsedStyle,e)}}}))},e.prototype.updateCSSStyle=function(e,t,n){var r,o,i=t.zIndex,a=t.visibility,c=t.opacity,l=t.fill,f=t.lineWidth,d=t.lineDash,s=t.stroke,p=t.width,y=t.height,v=t.style,b=void 0===v?"":v,g=t.className,m=void 0===g?"":g;r=p.value,o=y.value;var h={position:"absolute",top:0,left:0};if(h.width="".concat(r,"px"),h.height="".concat(o,"px"),h.transform="matrix3d(".concat(n.getWorldTransform().join(","),")"),n.style.transformOrigin&&(h["transform-origin"]=n.style.transformOrigin),h["z-index"]=i.value,h.visibility=a.value,h.opacity=c.value,l){var S="";if(l instanceof u.CSSRGB)S=l.toString();else if(l instanceof u.CSSGradientValue&&l.type===u.GradientPatternType.LinearGradient){var x=l.value.steps.map((function(e){return"".concat(e[1]," ").concat(100*Number(e[0]),"%")})).join(",");S="linear-gradient(to right, ".concat(x,");")}h.background=S}h["border-width"]="".concat((null==f?void 0:f.value)||0,"px"),s&&(h["border-color"]=s.toString(),h["border-style"]="solid"),d&&(h["border-style"]="dashed"),n.style.filter&&(h.filter=n.style.filter),m&&(Array.isArray(m)?m.forEach((function(t){e.classList.add(t)})):e.classList.add(m)),e.setAttribute("style",Object.keys(h).map((function(e){return"".concat(e,":").concat(h[e])})).join(";")+b)},e.tag="HTMLRendering",o([Object(r.inject)(u.ContextService),i("design:type",Object)],e.prototype,"contextService",void 0),o([Object(r.inject)(u.RenderingContext),i("design:type",Object)],e.prototype,"renderingContext",void 0),e=t=o([Object(r.singleton)({contrib:u.RenderingPluginContribution})],e)}(),f=Object(r.Module)((function(e){e(l)})),d=function(){function e(){this.name="html-renderer"}return e.prototype.init=function(e){e.load(f,!0)},e.prototype.destroy=function(e){e.unload(f)},e}()}])}));
+***************************************************************************** */function o(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function i(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function a(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function c(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}l((r=r.apply(e,t||[])).next())}))}function c(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(i){return function(c){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}Object.create;Object.create;var l=n(0),u=function(){function e(){}var t;return t=e,e.prototype.apply=function(e){var n=this,r=function(e){var t=e.target;if(t.nodeName===l.Shape.HTML){var r=n.getOrCreateEl(t),o=t.ownerDocument.documentElement.attributes;Object.keys(o).forEach((function(e){r.style[e]=o[e]})),Object.keys(t.attributes).forEach((function(e){n.updateAttribute(e,t)}))}},o=function(e){var t=e.target;if(t.nodeName===l.Shape.HTML){var r=n.getId(t),o=n.contextService.getDomElement().parentNode;if(o){var i=o.querySelector("#"+r);i&&o.removeChild(i)}}},i=function(e){var t=e.target;if(t.nodeName===l.Shape.HTML){var r=e.attrName;n.updateAttribute(r,t)}};e.hooks.init.tapPromise(t.tag,(function(){return a(n,void 0,void 0,(function(){return c(this,(function(e){return this.renderingContext.root.addEventListener(l.ElementEvent.MOUNTED,r),this.renderingContext.root.addEventListener(l.ElementEvent.UNMOUNTED,o),this.renderingContext.root.addEventListener(l.ElementEvent.ATTR_MODIFIED,i),[2]}))}))})),e.hooks.destroy.tap(t.tag,(function(){n.renderingContext.root.removeEventListener(l.ElementEvent.MOUNTED,r),n.renderingContext.root.removeEventListener(l.ElementEvent.UNMOUNTED,o),n.renderingContext.root.removeEventListener(l.ElementEvent.ATTR_MODIFIED,i)}))},e.prototype.getId=function(e){return e.id||"g-html-"+e.entity},e.prototype.getOrCreateEl=function(e){var t=this.getId(e),n=this.contextService.getDomElement().parentNode;if(n){var r=n.querySelector("#"+t);if(!r){r=document.createElement("div"),e.parsedStyle.$el=r,r.id=t,e.name&&r.setAttribute("name",e.name),e.className&&r.setAttribute("className",e.className),n.appendChild(r),r.style.position="absolute",r.style.left="0",r.style.top="0",r.style["will-change"]="transform";var o=e.getWorldTransform();r.style.transform="matrix(".concat([o[0],o[1],o[4],o[5],o[12],o[13]].join(","),")")}return r}return null},e.prototype.updateAttribute=function(e,t){var n=this.getOrCreateEl(t);switch(e){case"innerHTML":var r=t.parsedStyle.innerHTML;Object(l.isString)(r)?n.innerHTML=r:(n.innerHTML="",n.appendChild(r));break;case"modelMatrix":case"transformOrigin":var o=t.parsedStyle.transformOrigin;n.style["transform-origin"]="".concat(o[0].value," ").concat(o[1].value);var i=t.getWorldTransform();n.style.transform="matrix(".concat([i[0],i[1],i[4],i[5],i[12],i[13]].join(","),")");break;case"width":var a=t.parsedStyle.width;n.style.width="".concat((null==a?void 0:a.value)||0,"px");break;case"height":var c=t.parsedStyle.height;n.style.height="".concat((null==c?void 0:c.value)||0,"px");break;case"zIndex":var u=t.parsedStyle.zIndex;n.style["z-index"]="".concat(u.value);break;case"visibility":var s=t.parsedStyle.visibility;n.style.visibility=s.value;break;case"pointerEvents":var f=t.parsedStyle.pointerEvents;n.style.pointerEvents=f.value;break;case"opacity":var d=t.parsedStyle.opacity;n.style.opacity="".concat(d.value);break;case"fill":var p=t.parsedStyle.fill,y="";if(p instanceof l.CSSRGB)y=p.toString();else if(p instanceof l.CSSGradientValue&&p.type===l.GradientPatternType.LinearGradient){var v=p.value.steps.map((function(e){return"".concat(e[1]," ").concat(100*Number(e[0]),"%")})).join(",");y="linear-gradient(to right, ".concat(v,");")}n.style.background=y;break;case"stroke":var b=t.parsedStyle.stroke;n.style["border-color"]=b.toString(),n.style["border-style"]="solid";break;case"lineWidth":var g=t.parsedStyle.lineWidth;n.style["border-width"]="".concat(g.value||0,"px");break;case"lineDash":n.style["border-style"]="dashed";break;case"filter":var m=t.parsedStyle.filter;n.style.filter=m}},e.tag="HTMLRendering",o([Object(r.inject)(l.ContextService),i("design:type",Object)],e.prototype,"contextService",void 0),o([Object(r.inject)(l.RenderingContext),i("design:type",Object)],e.prototype,"renderingContext",void 0),e=t=o([Object(r.singleton)({contrib:l.RenderingPluginContribution})],e)}(),s=Object(r.Module)((function(e){e(u)})),f=function(){function e(){this.name="html-renderer"}return e.prototype.init=function(e){e.load(s,!0)},e.prototype.destroy=function(e){e.unload(s)},e}()}])}));

es/HTMLRenderingPlugin.d.ts

@@ -8,3 +8,5 @@ import type { RenderingService, RenderingPlugin } from '@antv/g';
     apply(renderingService: RenderingService): void;
-    private updateCSSStyle;
+    private getId;
+    private getOrCreateEl;
+    private updateAttribute;
 }

es/HTMLRenderingPlugin.js

@@ -21,24 +21,12 @@ import { __awaiter, __decorate, __generator, __metadata } from "tslib";
       if (object.nodeName === Shape.HTML) {
-        var innerHTML = object.parsedStyle.innerHTML;
-        var existedId = HTML_PREFIX + object.entity;
+        var $el_1 = _this.getOrCreateEl(object); // apply documentElement's style
 
-        var $container = _this.contextService.getDomElement().parentNode;
 
-        if ($container) {
-          var $existedElement = $container.querySelector('#' + existedId);
-
-          if (!$existedElement) {
-            var $div = document.createElement('div');
-            object.parsedStyle.$el = $div;
-            $div.id = existedId;
-
-            if (isString(innerHTML)) {
-              $div.innerHTML = innerHTML;
-            } else {
-              $div.appendChild(innerHTML);
-            }
-
-            $container.appendChild($div);
-          }
-        }
+        var attributes_1 = object.ownerDocument.documentElement.attributes;
+        Object.keys(attributes_1).forEach(function (name) {
+          $el_1.style[name] = attributes_1[name];
+        });
+        Object.keys(object.attributes).forEach(function (name) {
+          _this.updateAttribute(name, object);
+        });
       }
@@ -51,3 +39,3 @@ };
       if (object.nodeName === Shape.HTML) {
-        var existedId = HTML_PREFIX + object.entity;
+        var existedId = _this.getId(object);
 
@@ -66,2 +54,12 @@ var $container = _this.contextService.getDomElement().parentNode;
 
+    var handleAttributeChanged = function handleAttributeChanged(e) {
+      var object = e.target;
+
+      if (object.nodeName === Shape.HTML) {
+        var attrName = e.attrName;
+
+        _this.updateAttribute(attrName, object);
+      }
+    };
+
     renderingService.hooks.init.tapPromise(HTMLRenderingPlugin_1.tag, function () {
@@ -72,2 +70,3 @@ return __awaiter(_this, void 0, void 0, function () {
           this.renderingContext.root.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
+          this.renderingContext.root.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
           return [2
@@ -83,109 +82,141 @@ /*return*/
       _this.renderingContext.root.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
+
+      _this.renderingContext.root.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
     });
-    renderingService.hooks.render.tap(HTMLRenderingPlugin_1.tag, function (object) {
-      if (object.nodeName === Shape.HTML) {
-        var existedId = HTML_PREFIX + object.entity;
+  };
 
-        var $container = _this.contextService.getDomElement().parentNode;
+  HTMLRenderingPlugin.prototype.getId = function (object) {
+    return object.id || HTML_PREFIX + object.entity;
+  };
 
-        if ($container) {
-          var $existedElement = $container.querySelector('#' + existedId);
+  HTMLRenderingPlugin.prototype.getOrCreateEl = function (object) {
+    var existedId = this.getId(object);
+    var $container = this.contextService.getDomElement().parentNode;
 
-          _this.updateCSSStyle($existedElement, object.parsedStyle, object);
+    if ($container) {
+      var $existedElement = $container.querySelector('#' + existedId);
+
+      if (!$existedElement) {
+        $existedElement = document.createElement('div');
+        object.parsedStyle.$el = $existedElement;
+        $existedElement.id = existedId;
+
+        if (object.name) {
+          $existedElement.setAttribute('name', object.name);
         }
+
+        if (object.className) {
+          $existedElement.setAttribute('className', object.className);
+        }
+
+        $container.appendChild($existedElement); // use absolute position
+
+        $existedElement.style.position = 'absolute';
+        $existedElement.style.left = '0';
+        $existedElement.style.top = '0';
+        $existedElement.style['will-change'] = 'transform';
+        var worldTransform = object.getWorldTransform();
+        $existedElement.style.transform = "matrix(".concat([worldTransform[0], worldTransform[1], worldTransform[4], worldTransform[5], worldTransform[12], worldTransform[13]].join(','), ")");
       }
-    });
+
+      return $existedElement;
+    }
+
+    return null;
   };
 
-  HTMLRenderingPlugin.prototype.updateCSSStyle = function ($el, parsedStyle, object) {
-    var zIndex = parsedStyle.zIndex,
-        visibility = parsedStyle.visibility,
-        opacity = parsedStyle.opacity,
-        fill = parsedStyle.fill,
-        lineWidth = parsedStyle.lineWidth,
-        lineDash = parsedStyle.lineDash,
-        stroke = parsedStyle.stroke,
-        width = parsedStyle.width,
-        height = parsedStyle.height,
-        _a = parsedStyle.style,
-        initialStyle = _a === void 0 ? '' : _a,
-        _b = parsedStyle.className,
-        className = _b === void 0 ? '' : _b;
-    var contentWidth = 0;
-    var contentHeight = 0;
-    var widthValue = width.value;
-    var heightValue = height.value;
-    contentWidth = widthValue;
-    contentHeight = heightValue;
-    var style = {}; // use absolute position
+  HTMLRenderingPlugin.prototype.updateAttribute = function (name, object) {
+    var $el = this.getOrCreateEl(object);
 
-    style.position = 'absolute';
-    style.top = 0;
-    style.left = 0;
-    style.width = "".concat(contentWidth, "px");
-    style.height = "".concat(contentHeight, "px"); // use transform
+    switch (name) {
+      case 'innerHTML':
+        var innerHTML = object.parsedStyle.innerHTML;
 
-    style.transform = "matrix3d(".concat(object.getWorldTransform().join(','), ")"); // use unparsed transform origin
+        if (isString(innerHTML)) {
+          $el.innerHTML = innerHTML;
+        } else {
+          $el.innerHTML = '';
+          $el.appendChild(innerHTML);
+        }
 
-    if (object.style.transformOrigin) {
-      style['transform-origin'] = object.style.transformOrigin;
-    } // z-index
+        break;
 
+      case 'modelMatrix':
+      case 'transformOrigin':
+        var transformOrigin = object.parsedStyle.transformOrigin;
+        $el.style['transform-origin'] = "".concat(transformOrigin[0].value, " ").concat(transformOrigin[1].value);
+        var worldTransform = object.getWorldTransform();
+        $el.style.transform = "matrix(".concat([worldTransform[0], worldTransform[1], worldTransform[4], worldTransform[5], worldTransform[12], worldTransform[13]].join(','), ")");
+        break;
 
-    style['z-index'] = zIndex.value; // visibility
+      case 'width':
+        var width = object.parsedStyle.width;
+        $el.style.width = "".concat((width === null || width === void 0 ? void 0 : width.value) || 0, "px");
+        break;
 
-    style.visibility = visibility.value; // opacity
+      case 'height':
+        var height = object.parsedStyle.height;
+        $el.style.height = "".concat((height === null || height === void 0 ? void 0 : height.value) || 0, "px");
+        break;
 
-    style.opacity = opacity.value; // backgroundColor
+      case 'zIndex':
+        var zIndex = object.parsedStyle.zIndex;
+        $el.style['z-index'] = "".concat(zIndex.value);
+        break;
 
-    if (fill) {
-      var color = '';
+      case 'visibility':
+        var visibility = object.parsedStyle.visibility;
+        $el.style.visibility = visibility.value;
+        break;
 
-      if (fill instanceof CSSRGB) {
-        color = fill.toString();
-      } else if (fill instanceof CSSGradientValue) {
-        if (fill.type === GradientPatternType.LinearGradient) {
-          var steps = fill.value.steps.map(function (cur) {
-            //  ['0', '#ffffff'],
-            return "".concat(cur[1], " ").concat(Number(cur[0]) * 100, "%");
-          }).join(','); // @see https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
+      case 'pointerEvents':
+        var pointerEvents = object.parsedStyle.pointerEvents;
+        $el.style.pointerEvents = pointerEvents.value;
+        break;
 
-          color = "linear-gradient(to right, ".concat(steps, ");");
-        }
-      }
+      case 'opacity':
+        var opacity = object.parsedStyle.opacity;
+        $el.style.opacity = "".concat(opacity.value);
+        break;
 
-      style.background = color;
-    } // border
+      case 'fill':
+        var fill = object.parsedStyle.fill;
+        var color = '';
 
+        if (fill instanceof CSSRGB) {
+          color = fill.toString();
+        } else if (fill instanceof CSSGradientValue) {
+          if (fill.type === GradientPatternType.LinearGradient) {
+            var steps = fill.value.steps.map(function (cur) {
+              //  ['0', '#ffffff'],
+              return "".concat(cur[1], " ").concat(Number(cur[0]) * 100, "%");
+            }).join(','); // @see https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
 
-    style['border-width'] = "".concat((lineWidth === null || lineWidth === void 0 ? void 0 : lineWidth.value) || 0, "px");
+            color = "linear-gradient(to right, ".concat(steps, ");");
+          }
+        }
 
-    if (stroke) {
-      style['border-color'] = stroke.toString();
-      style['border-style'] = 'solid';
-    }
+        $el.style.background = color;
+        break;
 
-    if (lineDash) {
-      style['border-style'] = 'dashed';
-    } // filters
+      case 'stroke':
+        var stroke = object.parsedStyle.stroke;
+        $el.style['border-color'] = stroke.toString();
+        $el.style['border-style'] = 'solid';
+        break;
 
+      case 'lineWidth':
+        var lineWidth = object.parsedStyle.lineWidth;
+        $el.style['border-width'] = "".concat(lineWidth.value || 0, "px");
+        break;
 
-    if (object.style.filter) {
-      // use unparsed filter directly
-      style.filter = object.style.filter;
-    }
+      case 'lineDash':
+        $el.style['border-style'] = 'dashed';
+        break;
 
-    if (className) {
-      if (Array.isArray(className)) {
-        className.forEach(function (c) {
-          $el.classList.add(c);
-        });
-      } else {
-        $el.classList.add(className);
-      }
+      case 'filter':
+        var filter = object.parsedStyle.filter;
+        $el.style.filter = filter;
+        break;
     }
-
-    $el.setAttribute('style', Object.keys(style).map(function (key) {
-      return "".concat(key, ":").concat(style[key]);
-    }).join(';') + initialStyle);
   };
@@ -192,0 +223,0 @@

lib/HTMLRenderingPlugin.d.ts

@@ -8,3 +8,5 @@ import type { RenderingService, RenderingPlugin } from '@antv/g';
     apply(renderingService: RenderingService): void;
-    private updateCSSStyle;
+    private getId;
+    private getOrCreateEl;
+    private updateAttribute;
 }

lib/HTMLRenderingPlugin.js

@@ -30,24 +30,12 @@ "use strict";
       if (object.nodeName === _g.Shape.HTML) {
-        var innerHTML = object.parsedStyle.innerHTML;
-        var existedId = HTML_PREFIX + object.entity;
+        var $el_1 = _this.getOrCreateEl(object); // apply documentElement's style
 
-        var $container = _this.contextService.getDomElement().parentNode;
 
-        if ($container) {
-          var $existedElement = $container.querySelector('#' + existedId);
-
-          if (!$existedElement) {
-            var $div = document.createElement('div');
-            object.parsedStyle.$el = $div;
-            $div.id = existedId;
-
-            if ((0, _g.isString)(innerHTML)) {
-              $div.innerHTML = innerHTML;
-            } else {
-              $div.appendChild(innerHTML);
-            }
-
-            $container.appendChild($div);
-          }
-        }
+        var attributes_1 = object.ownerDocument.documentElement.attributes;
+        Object.keys(attributes_1).forEach(function (name) {
+          $el_1.style[name] = attributes_1[name];
+        });
+        Object.keys(object.attributes).forEach(function (name) {
+          _this.updateAttribute(name, object);
+        });
       }
@@ -60,3 +48,3 @@ };
       if (object.nodeName === _g.Shape.HTML) {
-        var existedId = HTML_PREFIX + object.entity;
+        var existedId = _this.getId(object);
 
@@ -75,2 +63,12 @@ var $container = _this.contextService.getDomElement().parentNode;
 
+    var handleAttributeChanged = function handleAttributeChanged(e) {
+      var object = e.target;
+
+      if (object.nodeName === _g.Shape.HTML) {
+        var attrName = e.attrName;
+
+        _this.updateAttribute(attrName, object);
+      }
+    };
+
     renderingService.hooks.init.tapPromise(HTMLRenderingPlugin_1.tag, function () {
@@ -81,2 +79,3 @@ return (0, _tslib.__awaiter)(_this, void 0, void 0, function () {
           this.renderingContext.root.addEventListener(_g.ElementEvent.UNMOUNTED, handleUnmounted);
+          this.renderingContext.root.addEventListener(_g.ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
           return [2
@@ -92,109 +91,141 @@ /*return*/
       _this.renderingContext.root.removeEventListener(_g.ElementEvent.UNMOUNTED, handleUnmounted);
+
+      _this.renderingContext.root.removeEventListener(_g.ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
     });
-    renderingService.hooks.render.tap(HTMLRenderingPlugin_1.tag, function (object) {
-      if (object.nodeName === _g.Shape.HTML) {
-        var existedId = HTML_PREFIX + object.entity;
+  };
 
-        var $container = _this.contextService.getDomElement().parentNode;
+  HTMLRenderingPlugin.prototype.getId = function (object) {
+    return object.id || HTML_PREFIX + object.entity;
+  };
 
-        if ($container) {
-          var $existedElement = $container.querySelector('#' + existedId);
+  HTMLRenderingPlugin.prototype.getOrCreateEl = function (object) {
+    var existedId = this.getId(object);
+    var $container = this.contextService.getDomElement().parentNode;
 
-          _this.updateCSSStyle($existedElement, object.parsedStyle, object);
+    if ($container) {
+      var $existedElement = $container.querySelector('#' + existedId);
+
+      if (!$existedElement) {
+        $existedElement = document.createElement('div');
+        object.parsedStyle.$el = $existedElement;
+        $existedElement.id = existedId;
+
+        if (object.name) {
+          $existedElement.setAttribute('name', object.name);
         }
+
+        if (object.className) {
+          $existedElement.setAttribute('className', object.className);
+        }
+
+        $container.appendChild($existedElement); // use absolute position
+
+        $existedElement.style.position = 'absolute';
+        $existedElement.style.left = '0';
+        $existedElement.style.top = '0';
+        $existedElement.style['will-change'] = 'transform';
+        var worldTransform = object.getWorldTransform();
+        $existedElement.style.transform = "matrix(".concat([worldTransform[0], worldTransform[1], worldTransform[4], worldTransform[5], worldTransform[12], worldTransform[13]].join(','), ")");
       }
-    });
+
+      return $existedElement;
+    }
+
+    return null;
   };
 
-  HTMLRenderingPlugin.prototype.updateCSSStyle = function ($el, parsedStyle, object) {
-    var zIndex = parsedStyle.zIndex,
-        visibility = parsedStyle.visibility,
-        opacity = parsedStyle.opacity,
-        fill = parsedStyle.fill,
-        lineWidth = parsedStyle.lineWidth,
-        lineDash = parsedStyle.lineDash,
-        stroke = parsedStyle.stroke,
-        width = parsedStyle.width,
-        height = parsedStyle.height,
-        _a = parsedStyle.style,
-        initialStyle = _a === void 0 ? '' : _a,
-        _b = parsedStyle.className,
-        className = _b === void 0 ? '' : _b;
-    var contentWidth = 0;
-    var contentHeight = 0;
-    var widthValue = width.value;
-    var heightValue = height.value;
-    contentWidth = widthValue;
-    contentHeight = heightValue;
-    var style = {}; // use absolute position
+  HTMLRenderingPlugin.prototype.updateAttribute = function (name, object) {
+    var $el = this.getOrCreateEl(object);
 
-    style.position = 'absolute';
-    style.top = 0;
-    style.left = 0;
-    style.width = "".concat(contentWidth, "px");
-    style.height = "".concat(contentHeight, "px"); // use transform
+    switch (name) {
+      case 'innerHTML':
+        var innerHTML = object.parsedStyle.innerHTML;
 
-    style.transform = "matrix3d(".concat(object.getWorldTransform().join(','), ")"); // use unparsed transform origin
+        if ((0, _g.isString)(innerHTML)) {
+          $el.innerHTML = innerHTML;
+        } else {
+          $el.innerHTML = '';
+          $el.appendChild(innerHTML);
+        }
 
-    if (object.style.transformOrigin) {
-      style['transform-origin'] = object.style.transformOrigin;
-    } // z-index
+        break;
 
+      case 'modelMatrix':
+      case 'transformOrigin':
+        var transformOrigin = object.parsedStyle.transformOrigin;
+        $el.style['transform-origin'] = "".concat(transformOrigin[0].value, " ").concat(transformOrigin[1].value);
+        var worldTransform = object.getWorldTransform();
+        $el.style.transform = "matrix(".concat([worldTransform[0], worldTransform[1], worldTransform[4], worldTransform[5], worldTransform[12], worldTransform[13]].join(','), ")");
+        break;
 
-    style['z-index'] = zIndex.value; // visibility
+      case 'width':
+        var width = object.parsedStyle.width;
+        $el.style.width = "".concat((width === null || width === void 0 ? void 0 : width.value) || 0, "px");
+        break;
 
-    style.visibility = visibility.value; // opacity
+      case 'height':
+        var height = object.parsedStyle.height;
+        $el.style.height = "".concat((height === null || height === void 0 ? void 0 : height.value) || 0, "px");
+        break;
 
-    style.opacity = opacity.value; // backgroundColor
+      case 'zIndex':
+        var zIndex = object.parsedStyle.zIndex;
+        $el.style['z-index'] = "".concat(zIndex.value);
+        break;
 
-    if (fill) {
-      var color = '';
+      case 'visibility':
+        var visibility = object.parsedStyle.visibility;
+        $el.style.visibility = visibility.value;
+        break;
 
-      if (fill instanceof _g.CSSRGB) {
-        color = fill.toString();
-      } else if (fill instanceof _g.CSSGradientValue) {
-        if (fill.type === _g.GradientPatternType.LinearGradient) {
-          var steps = fill.value.steps.map(function (cur) {
-            //  ['0', '#ffffff'],
-            return "".concat(cur[1], " ").concat(Number(cur[0]) * 100, "%");
-          }).join(','); // @see https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
+      case 'pointerEvents':
+        var pointerEvents = object.parsedStyle.pointerEvents;
+        $el.style.pointerEvents = pointerEvents.value;
+        break;
 
-          color = "linear-gradient(to right, ".concat(steps, ");");
-        }
-      }
+      case 'opacity':
+        var opacity = object.parsedStyle.opacity;
+        $el.style.opacity = "".concat(opacity.value);
+        break;
 
-      style.background = color;
-    } // border
+      case 'fill':
+        var fill = object.parsedStyle.fill;
+        var color = '';
 
+        if (fill instanceof _g.CSSRGB) {
+          color = fill.toString();
+        } else if (fill instanceof _g.CSSGradientValue) {
+          if (fill.type === _g.GradientPatternType.LinearGradient) {
+            var steps = fill.value.steps.map(function (cur) {
+              //  ['0', '#ffffff'],
+              return "".concat(cur[1], " ").concat(Number(cur[0]) * 100, "%");
+            }).join(','); // @see https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
 
-    style['border-width'] = "".concat((lineWidth === null || lineWidth === void 0 ? void 0 : lineWidth.value) || 0, "px");
+            color = "linear-gradient(to right, ".concat(steps, ");");
+          }
+        }
 
-    if (stroke) {
-      style['border-color'] = stroke.toString();
-      style['border-style'] = 'solid';
-    }
+        $el.style.background = color;
+        break;
 
-    if (lineDash) {
-      style['border-style'] = 'dashed';
-    } // filters
+      case 'stroke':
+        var stroke = object.parsedStyle.stroke;
+        $el.style['border-color'] = stroke.toString();
+        $el.style['border-style'] = 'solid';
+        break;
 
+      case 'lineWidth':
+        var lineWidth = object.parsedStyle.lineWidth;
+        $el.style['border-width'] = "".concat(lineWidth.value || 0, "px");
+        break;
 
-    if (object.style.filter) {
-      // use unparsed filter directly
-      style.filter = object.style.filter;
-    }
+      case 'lineDash':
+        $el.style['border-style'] = 'dashed';
+        break;
 
-    if (className) {
-      if (Array.isArray(className)) {
-        className.forEach(function (c) {
-          $el.classList.add(c);
-        });
-      } else {
-        $el.classList.add(className);
-      }
+      case 'filter':
+        var filter = object.parsedStyle.filter;
+        $el.style.filter = filter;
+        break;
     }
-
-    $el.setAttribute('style', Object.keys(style).map(function (key) {
-      return "".concat(key, ":").concat(style[key]);
-    }).join(';') + initialStyle);
   };
@@ -201,0 +232,0 @@

package.json

 {
   "name": "@antv/g-plugin-html-renderer",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "description": "A G plugin for rendering HTML",
@@ -48,3 +48,3 @@ "main": "lib/index.js",
   "homepage": "https://github.com/antvis/g#readme",
-  "gitHead": "98a28060c701e8c9c6c23fca672534677c4401b3"
+  "gitHead": "ffbd006ec52c899e53e84671ca160d49dd63f3e9"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29397

increased by15.26%

Lines of code

466

increased by12.56%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes