cytoscape-node-html-label - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

demo/sample-dataset.js

@@ -7,3 +7,3 @@ var sampleDataset = [{
   "group": "nodes",
-  "data": {"id": "1", "name": "Parent"}
+  "data": {"id": "1", "name": "Parent",  "type": 1}
 },{
@@ -10,0 +10,0 @@ "group": "nodes",

dist/cytoscape-node-html-label.js

@@ -20,7 +20,6 @@ (function () {
         function LabelElement(_a, params) {
-            var node = _a.node, baseClassName = _a.baseClassName, _b = _a.position, position = _b === void 0 ? null : _b, _c = _a.data, data = _c === void 0 ? null : _c;
+            var node = _a.node, _b = _a.position, position = _b === void 0 ? null : _b, _c = _a.data, data = _c === void 0 ? null : _c;
             this.updateParams(params);
             this._node = node;
-            this._baseElementClassName = baseClassName;
-            this.initStyles();
+            this.initStyles(params.cssClass);
             if (data) {
@@ -48,3 +47,2 @@ this.updateData(data);
             ];
-            this.cssClass = cssClass;
             this.tpl = tpl;
@@ -66,5 +64,8 @@ };
         };
-        LabelElement.prototype.initStyles = function () {
+        LabelElement.prototype.initStyles = function (cssClass) {
             var stl = this._node.style;
             stl.position = 'absolute';
+            if (cssClass && cssClass.length) {
+                this._node.classList.add(cssClass);
+            }
         };
@@ -91,5 +92,2 @@ LabelElement.prototype._renderPosition = function (position) {
             this._node = node;
-            this._cssWrap = "cy-node-html-" + (+new Date());
-            this._cssElem = this._cssWrap + "__e";
-            this._node.className = this._cssWrap;
             this._elements = {};
@@ -110,3 +108,2 @@ }
                     node: nodeElem,
-                    baseClassName: this._cssElem,
                     data: payload.data,
@@ -155,3 +152,3 @@ position: payload.position
         _cy.on("pan zoom", wrapCyHandler);
-        _cy.on("drag bounds", moveCyHandler);
+        _cy.on("position bounds", moveCyHandler);
         return _cy;
@@ -216,2 +213,3 @@ function createLabelContainer() {
         function moveCyHandler(ev) {
+            console.log('moveCyHandler');
             _lc.updateElemPosition(ev.target.id(), getNodePosition(ev.target));
@@ -218,0 +216,0 @@ }

dist/cytoscape-node-html-label.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function t(t,n){function i(t){var e=t.cy;r.forEach(function(t){e.elements(t.query).forEach(function(e){e.isNode()&&d.addOrUpdateElem(e.id(),t,{position:s(e),data:e.data()})})})}function a(t){var e=t.cy;d.updatePanZoom({pan:e.pan(),zoom:e.zoom()})}function s(t){return{w:t.width(),h:t.height(),x:t.position("x"),y:t.position("y")}}var r=n&&"object"==typeof n?n:[],d=function(){var e=t.container(),n=document.createElement("div"),i=e.querySelector("canvas"),a=e.querySelector("[class^='cy-node-html']");a&&i.parentNode.removeChild(a);var s=n.style;return s.position="absolute",s["z-index"]=10,s.width="500px",s["pointer-events"]="none",s.margin="0px",s.padding="0px",s.border="0px",s.outline="0px",s.outline="0px",i.parentNode.appendChild(n),new o(n)}();return t.one("render",function(t){i(t),a(t)}),t.on("add",function(t){var n=t.target,o=e(r.slice().reverse(),function(t){return n.is(t.query)});o&&d.addOrUpdateElem(n.id(),o,{position:s(n),data:n.data()})}),t.on("layoutstop",function(t){var e=t.cy;r.forEach(function(t){e.elements(t.query).forEach(function(t){t.isNode()&&d.updateElemPosition(t.id(),s(t))})})}),t.on("remove",function(t){d.removeElemById(t.target.id())}),t.on("data",function(t){setTimeout(function(){var n=t.target,o=e(r.slice().reverse(),function(t){return n.is(t.query)});o?d.addOrUpdateElem(n.id(),o,{position:s(n),data:n.data()}):d.removeElemById(n.id())},0)}),t.on("pan zoom",a),t.on("drag bounds",function(t){d.updateElemPosition(t.target.id(),s(t.target))}),t}var e=function(t,e){if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var n,o=t.length>>>0,i=arguments[1],a=0;a<o;a++)if(n=t[a],e.call(i,n,a,t))return n},n=function(){function t(t,e){var n=t.node,o=t.baseClassName,i=t.position,a=void 0===i?null:i,s=t.data,r=void 0===s?null:s;this.updateParams(e),this._node=n,this._baseElementClassName=o,this.initStyles(),r&&this.updateData(r),a&&this.updatePosition(a)}return t.prototype.updateParams=function(t){var e=t.tpl,n=void 0===e?function(){return""}:e,o=t.cssClass,i=void 0===o?null:o,a=t.halign,s=void 0===a?"center":a,r=t.valign,d=void 0===r?"center":r,p=t.halignBox,u=void 0===p?"center":p,l=t.valignBox,c=void 0===l?"center":l,f={top:-.5,left:-.5,center:0,right:.5,bottom:.5};this._align=[f[s],f[d],100*(f[u]-.5),100*(f[c]-.5)],this.cssClass=i,this.tpl=n},t.prototype.updateData=function(t){try{this._node.innerHTML=this.tpl(t)}catch(t){console.error(t)}},t.prototype.getNode=function(){return this._node},t.prototype.updatePosition=function(t){this._renderPosition(t)},t.prototype.initStyles=function(){this._node.style.position="absolute"},t.prototype._renderPosition=function(t){var e=this._position,n=t.x+this._align[0]*t.w,o=t.y+this._align[1]*t.h;if(!e||e[0]!==n||e[1]!==o){this._position=[n,o];var i="translate("+this._align[2]+"%,"+this._align[3]+"%) "+("translate("+n.toFixed(2)+"px,"+o.toFixed(2)+"px) "),a=this._node.style;a.webkitTransform=i,a.msTransform=i,a.transform=i}},t}(),o=function(){function t(t){this._node=t,this._cssWrap="cy-node-html-"+ +new Date,this._cssElem=this._cssWrap+"__e",this._node.className=this._cssWrap,this._elements={}}return t.prototype.addOrUpdateElem=function(t,e,o){void 0===o&&(o={});var i=this._elements[t];if(i)i.updateParams(e),i.updateData(o.data),i.updatePosition(o.position);else{var a=document.createElement("div");this._node.appendChild(a),this._elements[t]=new n({node:a,baseClassName:this._cssElem,data:o.data,position:o.position},e)}},t.prototype.removeElemById=function(t){this._elements[t]&&(this._node.removeChild(this._elements[t].getNode()),delete this._elements[t])},t.prototype.updateElemPosition=function(t,e){var n=this._elements[t];n&&n.updatePosition(e)},t.prototype.updatePanZoom=function(t){var e=t.pan,n=t.zoom,o="translate("+e.x+"px,"+e.y+"px) scale("+n+")",i=this._node.style;i.webkitTransform=o,i.msTransform=o,i.transform=o,i.webkitTransformOrigin="top left",i.msTransformOrigin="top left",i.transformOrigin="top left"},t}(),i=function(e){e&&e("core","nodeHtmlLabel",function(e){return t(this,e)})};"undefined"!=typeof module&&module.exports?module.exports=function(t){i(t)}:"undefined"!=typeof define&&define.amd&&define("cytoscape-nodeHtmlLabel",function(){return i}),"undefined"!=typeof cytoscape&&i(cytoscape)}();
+!function(){"use strict";function t(t,n){function i(t){var e=t.cy;s.forEach(function(t){e.elements(t.query).forEach(function(e){e.isNode()&&d.addOrUpdateElem(e.id(),t,{position:a(e),data:e.data()})})})}function r(t){var e=t.cy;d.updatePanZoom({pan:e.pan(),zoom:e.zoom()})}function a(t){return{w:t.width(),h:t.height(),x:t.position("x"),y:t.position("y")}}var s=n&&"object"==typeof n?n:[],d=function(){var e=t.container(),n=document.createElement("div"),i=e.querySelector("canvas"),r=e.querySelector("[class^='cy-node-html']");r&&i.parentNode.removeChild(r);var a=n.style;return a.position="absolute",a["z-index"]=10,a.width="500px",a["pointer-events"]="none",a.margin="0px",a.padding="0px",a.border="0px",a.outline="0px",a.outline="0px",i.parentNode.appendChild(n),new o(n)}();return t.one("render",function(t){i(t),r(t)}),t.on("add",function(t){var n=t.target,o=e(s.slice().reverse(),function(t){return n.is(t.query)});o&&d.addOrUpdateElem(n.id(),o,{position:a(n),data:n.data()})}),t.on("layoutstop",function(t){var e=t.cy;s.forEach(function(t){e.elements(t.query).forEach(function(t){t.isNode()&&d.updateElemPosition(t.id(),a(t))})})}),t.on("remove",function(t){d.removeElemById(t.target.id())}),t.on("data",function(t){setTimeout(function(){var n=t.target,o=e(s.slice().reverse(),function(t){return n.is(t.query)});o?d.addOrUpdateElem(n.id(),o,{position:a(n),data:n.data()}):d.removeElemById(n.id())},0)}),t.on("pan zoom",r),t.on("position bounds",function(t){console.log("moveCyHandler"),d.updateElemPosition(t.target.id(),a(t.target))}),t}var e=function(t,e){if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var n,o=t.length>>>0,i=arguments[1],r=0;r<o;r++)if(n=t[r],e.call(i,n,r,t))return n},n=function(){function t(t,e){var n=t.node,o=t.position,i=void 0===o?null:o,r=t.data,a=void 0===r?null:r;this.updateParams(e),this._node=n,this.initStyles(e.cssClass),a&&this.updateData(a),i&&this.updatePosition(i)}return t.prototype.updateParams=function(t){var e=t.tpl,n=void 0===e?function(){return""}:e,o=(t.cssClass,t.halign),i=void 0===o?"center":o,r=t.valign,a=void 0===r?"center":r,s=t.halignBox,d=void 0===s?"center":s,p=t.valignBox,u=void 0===p?"center":p,l={top:-.5,left:-.5,center:0,right:.5,bottom:.5};this._align=[l[i],l[a],100*(l[d]-.5),100*(l[u]-.5)],this.tpl=n},t.prototype.updateData=function(t){try{this._node.innerHTML=this.tpl(t)}catch(t){console.error(t)}},t.prototype.getNode=function(){return this._node},t.prototype.updatePosition=function(t){this._renderPosition(t)},t.prototype.initStyles=function(t){this._node.style.position="absolute",t&&t.length&&this._node.classList.add(t)},t.prototype._renderPosition=function(t){var e=this._position,n=t.x+this._align[0]*t.w,o=t.y+this._align[1]*t.h;if(!e||e[0]!==n||e[1]!==o){this._position=[n,o];var i="translate("+this._align[2]+"%,"+this._align[3]+"%) "+("translate("+n.toFixed(2)+"px,"+o.toFixed(2)+"px) "),r=this._node.style;r.webkitTransform=i,r.msTransform=i,r.transform=i}},t}(),o=function(){function t(t){this._node=t,this._elements={}}return t.prototype.addOrUpdateElem=function(t,e,o){void 0===o&&(o={});var i=this._elements[t];if(i)i.updateParams(e),i.updateData(o.data),i.updatePosition(o.position);else{var r=document.createElement("div");this._node.appendChild(r),this._elements[t]=new n({node:r,data:o.data,position:o.position},e)}},t.prototype.removeElemById=function(t){this._elements[t]&&(this._node.removeChild(this._elements[t].getNode()),delete this._elements[t])},t.prototype.updateElemPosition=function(t,e){var n=this._elements[t];n&&n.updatePosition(e)},t.prototype.updatePanZoom=function(t){var e=t.pan,n=t.zoom,o="translate("+e.x+"px,"+e.y+"px) scale("+n+")",i=this._node.style;i.webkitTransform=o,i.msTransform=o,i.transform=o,i.webkitTransformOrigin="top left",i.msTransformOrigin="top left",i.transformOrigin="top left"},t}(),i=function(e){e&&e("core","nodeHtmlLabel",function(e){return t(this,e)})};"undefined"!=typeof module&&module.exports?module.exports=function(t){i(t)}:"undefined"!=typeof define&&define.amd&&define("cytoscape-nodeHtmlLabel",function(){return i}),"undefined"!=typeof cytoscape&&i(cytoscape)}();

package.json

 {
   "name": "cytoscape-node-html-label",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "labels for cytoscape nodes",
@@ -5,0 +5,0 @@ "author": "Kalugin Sergey <[e-mail]> (https://github.com/kaluginserg)",

src/cytoscape-node-html-label.ts

@@ -8,9 +8,9 @@ type IHAlign = "left" | "center" | "right";
 interface CytoscapeNodeHtmlParams {
-  query ?: string;
-  halign ?: IHAlign;
-  valign ?: IVAlign;
-  halignBox ?: IHAlign;
-  valignBox ?: IVAlign;
-  cssClass ?: string;
-  tpl ?: (d: any) => string;
+  query?: string;
+  halign?: IHAlign;
+  valign?: IVAlign;
+  halignBox?: IHAlign;
+  valignBox?: IVAlign;
+  cssClass?: string;
+  tpl?: (d: any) => string;
 }
@@ -53,3 +53,2 @@
     position?: ICytoscapeNodeHtmlPosition;
-    baseClassName: string;
     node: HTMLElement;
@@ -64,10 +63,12 @@ }
     public tpl: (d: any) => string;
-    public cssClass: string;
 
     private _position: number[];
-    private _baseElementClassName: string;
     private _node: HTMLElement;
     private _align: [number, number, number, number];
 
-    constructor({node, baseClassName, position = null, data = null}: ILabelElement,
+    constructor({
+                  node,
+                  position = null,
+                  data = null
+                }: ILabelElement,
                 params: CytoscapeNodeHtmlParams) {
@@ -77,5 +78,4 @@
       this._node = node;
-      this._baseElementClassName = baseClassName;
 
-      this.initStyles();
+      this.initStyles(params.cssClass);
 
@@ -113,3 +113,3 @@ if (data) {
       ];
-      this.cssClass = cssClass;
+
       this.tpl = tpl;
@@ -134,5 +134,8 @@ }
 
-    private initStyles() {
+    private initStyles(cssClass: string) {
       let stl = this._node.style;
       stl.position = 'absolute';
+      if (cssClass && cssClass.length) {
+        this._node.classList.add(cssClass);
+      }
     }
@@ -167,11 +170,5 @@
     private _node: HTMLElement;
-    private _cssWrap: string;
-    private _cssElem: string;
 
     constructor(node: HTMLElement) {
       this._node = node;
-      this._cssWrap = "cy-node-html-" + (+new Date());
-      this._cssElem = this._cssWrap + "__e";
-      // this.addCssToDocument();
-      this._node.className = this._cssWrap;
       this._elements = <HashTableElements>{};
@@ -192,3 +189,2 @@ }
           node: nodeElem,
-          baseClassName: this._cssElem,
           data: payload.data,
@@ -201,6 +197,6 @@ position: payload.position
     removeElemById(id: string) {
-        if (this._elements[id]) {
-            this._node.removeChild(this._elements[id].getNode());
-            delete this._elements[id];
-        }
+      if (this._elements[id]) {
+        this._node.removeChild(this._elements[id].getNode());
+        delete this._elements[id];
+      }
     }
@@ -242,3 +238,3 @@
     _cy.on("pan zoom", wrapCyHandler);
-    _cy.on("drag bounds", moveCyHandler);
+    _cy.on("position bounds", moveCyHandler); // "bounds" - not documented event
 
@@ -313,2 +309,3 @@ return _cy;
     function moveCyHandler(ev: ICyEventObject) {
+      console.log('moveCyHandler');
       _lc.updateElemPosition(ev.target.id(), getNodePosition(ev.target));
@@ -315,0 +312,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

468753

increased by0.26%

Worsened metrics

Lines of code

2829

decreased by-0.21%

No dependency changes