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

Comparing version 1.9.13 to 1.9.14

dist/HTMLRenderingPlugin.d.ts

@@ -11,3 +11,2 @@ import { GlobalRuntime, RenderingPlugin, RenderingPluginContext } from '@antv/g-lite';
     apply(context: RenderingPluginContext, runtime: GlobalRuntime): void;
-    private getId;
     private createCamera;
@@ -14,0 +13,0 @@ private getOrCreateEl;

dist/index.esm.js

@@ -59,7 +59,2 @@ import { __extends } from 'tslib';
                 }
-                // const existedId = this.getId(object);
-                // const $existedElement: HTMLElement | null = this.$camera.querySelector('#' + existedId);
-                // if ($existedElement) {
-                //   this.$camera.removeChild($existedElement);
-                // }
             }
@@ -113,5 +108,2 @@ };
     };
-    HTMLRenderingPlugin.prototype.getId = function (object) {
-        return object.id || HTML_PREFIX + object.entity;
-    };
     HTMLRenderingPlugin.prototype.createCamera = function (camera) {
@@ -149,8 +141,9 @@ var _a;
         var doc = this.context.config.document;
-        var existedId = this.getId(object);
-        var $existedElement = this.$camera.querySelector('#' + existedId);
+        var uniqueHTMLId = "".concat(HTML_PREFIX).concat(object.entity);
+        var $existedElement = this.$camera.querySelector("[data-id=".concat(uniqueHTMLId, "]"));
         if (!$existedElement) {
             $existedElement = (doc || document).createElement('div');
             object.parsedStyle.$el = $existedElement;
-            $existedElement.id = existedId;
+            $existedElement.id = object.id || uniqueHTMLId;
+            $existedElement.dataset.id = uniqueHTMLId;
             if (object.name) {
@@ -157,0 +150,0 @@ $existedElement.setAttribute('name', object.name);

dist/index.js

@@ -61,7 +61,2 @@ 'use strict';
                 }
-                // const existedId = this.getId(object);
-                // const $existedElement: HTMLElement | null = this.$camera.querySelector('#' + existedId);
-                // if ($existedElement) {
-                //   this.$camera.removeChild($existedElement);
-                // }
             }
@@ -115,5 +110,2 @@ };
     };
-    HTMLRenderingPlugin.prototype.getId = function (object) {
-        return object.id || HTML_PREFIX + object.entity;
-    };
     HTMLRenderingPlugin.prototype.createCamera = function (camera) {
@@ -151,8 +143,9 @@ var _a;
         var doc = this.context.config.document;
-        var existedId = this.getId(object);
-        var $existedElement = this.$camera.querySelector('#' + existedId);
+        var uniqueHTMLId = "".concat(HTML_PREFIX).concat(object.entity);
+        var $existedElement = this.$camera.querySelector("[data-id=".concat(uniqueHTMLId, "]"));
         if (!$existedElement) {
             $existedElement = (doc || document).createElement('div');
             object.parsedStyle.$el = $existedElement;
-            $existedElement.id = existedId;
+            $existedElement.id = object.id || uniqueHTMLId;
+            $existedElement.dataset.id = uniqueHTMLId;
             if (object.name) {
@@ -159,0 +152,0 @@ $existedElement.setAttribute('name', object.name);

dist/index.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).G=e.G||{},e.G.HTMLRenderer={}),e.window.G)}(this,(function(e,t){"use strict";var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},n(e,t)};var r=function(e){return null==e},a={}.toString,i=function(e,t){return a.call(e)==="[object "+t+"]"},o=function(e){return i(e,"Number")},s=function(){function e(){}return e.prototype.joinTransformMatrix=function(e){return"matrix(".concat([e[0],e[1],e[4],e[5],e[12],e[13]].join(","),")")},e.prototype.apply=function(n,r){var a=this,i=n.camera,o=n.renderingContext,s=n.renderingService;this.context=n;var l=o.root.ownerDocument.defaultView,c=function(e,t){t.style.transform=a.joinTransformMatrix(e.getWorldTransform())},d=function(e){var n=e.target;if(n.nodeName===t.Shape.HTML){a.$camera||(a.$camera=a.createCamera(i));var o=a.getOrCreateEl(n);if(a.$camera.appendChild(o),r.enableCSSParsing){var s=n.ownerDocument.documentElement.attributes;Object.keys(s).forEach((function(e){o.style[e]=s[e]}))}Object.keys(n.attributes).forEach((function(e){a.updateAttribute(e,n)})),c(n,o),a.context.nativeHTMLMap.set(o,n)}},p=function(e){var n=e.target;if(n.nodeName===t.Shape.HTML&&a.$camera){var r=a.getOrCreateEl(n);r&&(r.remove(),a.context.nativeHTMLMap.delete(r))}},f=function(e){var n=e.target;n.nodeName===t.Shape.HTML&&a.updateAttribute(e.attrName,n)},u=function(e){var n=e.target;if(n.nodeName===t.Shape.HTML){var r=a.getOrCreateEl(n);c(n,r)}},y=function(){if(a.$camera){var e=a.context.config,t=e.height;a.$camera.style.width="".concat(e.width||0,"px"),a.$camera.style.height="".concat(t||0,"px")}};s.hooks.init.tap(e.tag,(function(){l.addEventListener(t.CanvasEvent.RESIZE,y),l.addEventListener(t.ElementEvent.MOUNTED,d),l.addEventListener(t.ElementEvent.UNMOUNTED,p),l.addEventListener(t.ElementEvent.ATTR_MODIFIED,f),l.addEventListener(t.ElementEvent.BOUNDS_CHANGED,u)})),s.hooks.endFrame.tap(e.tag,(function(){a.$camera&&o.renderReasons.has(t.RenderReason.CAMERA_CHANGED)&&(a.$camera.style.transform=a.joinTransformMatrix(i.getOrthoMatrix()))})),s.hooks.destroy.tap(e.tag,(function(){a.$camera&&a.$camera.remove(),l.removeEventListener(t.CanvasEvent.RESIZE,y),l.removeEventListener(t.ElementEvent.MOUNTED,d),l.removeEventListener(t.ElementEvent.UNMOUNTED,p),l.removeEventListener(t.ElementEvent.ATTR_MODIFIED,f),l.removeEventListener(t.ElementEvent.BOUNDS_CHANGED,u)}))},e.prototype.getId=function(e){return e.id||"g-html-"+e.entity},e.prototype.createCamera=function(e){var t,n=(t=this.context.config).document,r=t.width,a=t.height,i=this.context.contextService.getDomElement(),o=i.parentNode;if(o){var s="g-canvas-camera",l=o.querySelector("#"+s);if(!l){var c=(n||document).createElement("div");l=c,c.id=s,c.style.position="absolute",c.style.left="".concat(i.offsetLeft||0,"px"),c.style.top="".concat(i.offsetTop||0,"px"),c.style.transformOrigin="left top",c.style.transform=this.joinTransformMatrix(e.getOrthoMatrix()),c.style.overflow="hidden",c.style.pointerEvents="none",c.style.width="".concat(r||0,"px"),c.style.height="".concat(a||0,"px"),o.appendChild(c)}return l}return null},e.prototype.getOrCreateEl=function(e){var t=this.context.config.document,n=this.getId(e),r=this.$camera.querySelector("#"+n);return r||(r=(t||document).createElement("div"),e.parsedStyle.$el=r,r.id=n,e.name&&r.setAttribute("name",e.name),e.className&&(r.className=e.className),r.style.position="absolute",r.style.left="0px",r.style.top="0px",r.style["will-change"]="transform",r.style.transform=this.joinTransformMatrix(e.getWorldTransform())),r},e.prototype.updateAttribute=function(e,n){var a=this.getOrCreateEl(n);switch(e){case"innerHTML":var s=n.parsedStyle.innerHTML;i(s,"String")?a.innerHTML=s:(a.innerHTML="",a.appendChild(s));break;case"transformOrigin":var l=n.parsedStyle.transformOrigin;a.style["transform-origin"]="".concat(l[0].value," ").concat(l[1].value);break;case"width":if(this.context.enableCSSParsing){var c=n.computedStyleMap().get("width");a.style.width=""+c}else{a.style.width=o(c=n.parsedStyle.width)?"".concat(c,"px"):""+c}break;case"height":if(this.context.enableCSSParsing){var d=n.computedStyleMap().get("height");a.style.height=""+d}else{a.style.height=o(d=n.parsedStyle.height)?"".concat(d,"px"):""+d}break;case"zIndex":a.style["z-index"]="".concat(n.parsedStyle.zIndex);break;case"visibility":a.style.visibility=n.parsedStyle.visibility;break;case"pointerEvents":a.style.pointerEvents=n.parsedStyle.pointerEvents;break;case"opacity":a.style.opacity="".concat(n.parsedStyle.opacity);break;case"fill":var p=n.parsedStyle.fill,f="";t.isCSSRGB(p)?f=p.isNone?"transparent":n.getAttribute("fill"):Array.isArray(p)?f=n.getAttribute("fill"):t.isPattern(p),a.style.background=f;break;case"stroke":var u=n.parsedStyle.stroke,y="";t.isCSSRGB(u)?y=u.isNone?"transparent":n.getAttribute("stroke"):Array.isArray(u)?y=n.getAttribute("stroke"):t.isPattern(u),a.style["border-color"]=y,a.style["border-style"]="solid";break;case"lineWidth":a.style["border-width"]="".concat(n.parsedStyle.lineWidth||0,"px");break;case"lineDash":a.style["border-style"]="dashed";break;case"filter":a.style.filter=n.style.filter;break;default:"x"!==e&&"y"!==e&&(r(n.style[e])||""===n.style[e]||(a.style[e]=n.style[e]))}},e.tag="HTMLRendering",e}(),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.name="html-renderer",t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+t+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(t,e),t.prototype.init=function(){this.addRenderingPlugin(new s)},t.prototype.destroy=function(){this.removeAllRenderingPlugins()},t}(t.AbstractRendererPlugin);e.Plugin=l}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).G=e.G||{},e.G.HTMLRenderer={}),e.window.G)}(this,(function(e,t){"use strict";var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},n(e,t)};var r=function(e){return null==e},a={}.toString,i=function(e,t){return a.call(e)==="[object "+t+"]"},o=function(e){return i(e,"Number")},s=function(){function e(){}return e.prototype.joinTransformMatrix=function(e){return"matrix(".concat([e[0],e[1],e[4],e[5],e[12],e[13]].join(","),")")},e.prototype.apply=function(n,r){var a=this,i=n.camera,o=n.renderingContext,s=n.renderingService;this.context=n;var l=o.root.ownerDocument.defaultView,c=function(e,t){t.style.transform=a.joinTransformMatrix(e.getWorldTransform())},d=function(e){var n=e.target;if(n.nodeName===t.Shape.HTML){a.$camera||(a.$camera=a.createCamera(i));var o=a.getOrCreateEl(n);if(a.$camera.appendChild(o),r.enableCSSParsing){var s=n.ownerDocument.documentElement.attributes;Object.keys(s).forEach((function(e){o.style[e]=s[e]}))}Object.keys(n.attributes).forEach((function(e){a.updateAttribute(e,n)})),c(n,o),a.context.nativeHTMLMap.set(o,n)}},p=function(e){var n=e.target;if(n.nodeName===t.Shape.HTML&&a.$camera){var r=a.getOrCreateEl(n);r&&(r.remove(),a.context.nativeHTMLMap.delete(r))}},f=function(e){var n=e.target;n.nodeName===t.Shape.HTML&&a.updateAttribute(e.attrName,n)},u=function(e){var n=e.target;if(n.nodeName===t.Shape.HTML){var r=a.getOrCreateEl(n);c(n,r)}},y=function(){if(a.$camera){var e=a.context.config,t=e.height;a.$camera.style.width="".concat(e.width||0,"px"),a.$camera.style.height="".concat(t||0,"px")}};s.hooks.init.tap(e.tag,(function(){l.addEventListener(t.CanvasEvent.RESIZE,y),l.addEventListener(t.ElementEvent.MOUNTED,d),l.addEventListener(t.ElementEvent.UNMOUNTED,p),l.addEventListener(t.ElementEvent.ATTR_MODIFIED,f),l.addEventListener(t.ElementEvent.BOUNDS_CHANGED,u)})),s.hooks.endFrame.tap(e.tag,(function(){a.$camera&&o.renderReasons.has(t.RenderReason.CAMERA_CHANGED)&&(a.$camera.style.transform=a.joinTransformMatrix(i.getOrthoMatrix()))})),s.hooks.destroy.tap(e.tag,(function(){a.$camera&&a.$camera.remove(),l.removeEventListener(t.CanvasEvent.RESIZE,y),l.removeEventListener(t.ElementEvent.MOUNTED,d),l.removeEventListener(t.ElementEvent.UNMOUNTED,p),l.removeEventListener(t.ElementEvent.ATTR_MODIFIED,f),l.removeEventListener(t.ElementEvent.BOUNDS_CHANGED,u)}))},e.prototype.createCamera=function(e){var t,n=(t=this.context.config).document,r=t.width,a=t.height,i=this.context.contextService.getDomElement(),o=i.parentNode;if(o){var s="g-canvas-camera",l=o.querySelector("#"+s);if(!l){var c=(n||document).createElement("div");l=c,c.id=s,c.style.position="absolute",c.style.left="".concat(i.offsetLeft||0,"px"),c.style.top="".concat(i.offsetTop||0,"px"),c.style.transformOrigin="left top",c.style.transform=this.joinTransformMatrix(e.getOrthoMatrix()),c.style.overflow="hidden",c.style.pointerEvents="none",c.style.width="".concat(r||0,"px"),c.style.height="".concat(a||0,"px"),o.appendChild(c)}return l}return null},e.prototype.getOrCreateEl=function(e){var t=this.context.config.document,n="".concat("g-html-").concat(e.entity),r=this.$camera.querySelector("[data-id=".concat(n,"]"));return r||(r=(t||document).createElement("div"),e.parsedStyle.$el=r,r.id=e.id||n,r.dataset.id=n,e.name&&r.setAttribute("name",e.name),e.className&&(r.className=e.className),r.style.position="absolute",r.style.left="0px",r.style.top="0px",r.style["will-change"]="transform",r.style.transform=this.joinTransformMatrix(e.getWorldTransform())),r},e.prototype.updateAttribute=function(e,n){var a=this.getOrCreateEl(n);switch(e){case"innerHTML":var s=n.parsedStyle.innerHTML;i(s,"String")?a.innerHTML=s:(a.innerHTML="",a.appendChild(s));break;case"transformOrigin":var l=n.parsedStyle.transformOrigin;a.style["transform-origin"]="".concat(l[0].value," ").concat(l[1].value);break;case"width":if(this.context.enableCSSParsing){var c=n.computedStyleMap().get("width");a.style.width=""+c}else{a.style.width=o(c=n.parsedStyle.width)?"".concat(c,"px"):""+c}break;case"height":if(this.context.enableCSSParsing){var d=n.computedStyleMap().get("height");a.style.height=""+d}else{a.style.height=o(d=n.parsedStyle.height)?"".concat(d,"px"):""+d}break;case"zIndex":a.style["z-index"]="".concat(n.parsedStyle.zIndex);break;case"visibility":a.style.visibility=n.parsedStyle.visibility;break;case"pointerEvents":a.style.pointerEvents=n.parsedStyle.pointerEvents;break;case"opacity":a.style.opacity="".concat(n.parsedStyle.opacity);break;case"fill":var p=n.parsedStyle.fill,f="";t.isCSSRGB(p)?f=p.isNone?"transparent":n.getAttribute("fill"):Array.isArray(p)?f=n.getAttribute("fill"):t.isPattern(p),a.style.background=f;break;case"stroke":var u=n.parsedStyle.stroke,y="";t.isCSSRGB(u)?y=u.isNone?"transparent":n.getAttribute("stroke"):Array.isArray(u)?y=n.getAttribute("stroke"):t.isPattern(u),a.style["border-color"]=y,a.style["border-style"]="solid";break;case"lineWidth":a.style["border-width"]="".concat(n.parsedStyle.lineWidth||0,"px");break;case"lineDash":a.style["border-style"]="dashed";break;case"filter":a.style.filter=n.style.filter;break;default:"x"!==e&&"y"!==e&&(r(n.style[e])||""===n.style[e]||(a.style[e]=n.style[e]))}},e.tag="HTMLRendering",e}(),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.name="html-renderer",t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+t+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(t,e),t.prototype.init=function(){this.addRenderingPlugin(new s)},t.prototype.destroy=function(){this.removeAllRenderingPlugins()},t}(t.AbstractRendererPlugin);e.Plugin=l}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "@antv/g-plugin-html-renderer",
-  "version": "1.9.13",
+  "version": "1.9.14",
   "description": "A G plugin for rendering HTML",
@@ -5,0 +5,0 @@ "keywords": [

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

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

Worsened metrics

Total package byte prevSize

84312

decreased by-0.76%

Lines of code

629

decreased by-2.33%

No dependency changes