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

Comparing version 1.0.3 to 1.0.5

dist/cytoscape-node-html-label.d.ts

@@ -1,18 +0,19 @@
-type IHAlign = "left" | "center" | "right";
-type IVAlign = "top" | "center" | "bottom";
-
-export declare interface CytoscapeNodeHtmlParams {
-  query ?: string;
-  halign ?: IHAlign;
-  valign ?: IVAlign;
-  halignBox ?: IHAlign;
-  valignBox ?: IVAlign;
-  cssClass ?: string;
-  tpl ?: (d: any) => string;
+declare const require: any;
+declare const module: any;
+declare const define: any;
+declare const cytoscape: any;
+declare type IHAlign = "left" | "center" | "right";
+declare type IVAlign = "top" | "center" | "bottom";
+interface CytoscapeNodeHtmlParams {
+    query?: string;
+    halign?: IHAlign;
+    valign?: IVAlign;
+    halignBox?: IHAlign;
+    valignBox?: IVAlign;
+    cssClass?: string;
+    tpl?: (d: any) => string;
 }
-
-export declare namespace cytoscape {
-  export type CytoscapeNodeHtmlLabel = CytoscapeNodeHtmlParams;
-
-  export function nodeHtmlLabel(o: CytoscapeNodeHtmlLabel[]): any;
+declare namespace cytoscape {
+    type CytoscapeNodeHtmlLabel = CytoscapeNodeHtmlParams;
+    function nodeHtmlLabel(o: CytoscapeNodeHtmlLabel[]): any;
 }

dist/cytoscape-node-html-label.js

@@ -20,4 +20,3 @@ (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, baseClassName = _a.baseClassName, _b = _a.position, position = _b === void 0 ? null : _b, _c = _a.data, data = _c === void 0 ? null : _c;
             this.updateParams(params);
@@ -34,10 +33,4 @@ this._node = node;
         }
-
         LabelElement.prototype.updateParams = function (_a) {
-            var _b = _a.tpl, tpl = _b === void 0 ? function () {
-                    return "";
-                } : _b, _c = _a.cssClass, cssClass = _c === void 0 ? null : _c, _d = _a.halign,
-                halign = _d === void 0 ? "center" : _d, _e = _a.valign, valign = _e === void 0 ? "center" : _e,
-                _f = _a.halignBox, halignBox = _f === void 0 ? "center" : _f, _g = _a.valignBox,
-                valignBox = _g === void 0 ? "center" : _g;
+            var _b = _a.tpl, tpl = _b === void 0 ? function () { return ""; } : _b, _c = _a.cssClass, cssClass = _c === void 0 ? null : _c, _d = _a.halign, halign = _d === void 0 ? "center" : _d, _e = _a.valign, valign = _e === void 0 ? "center" : _e, _f = _a.halignBox, halignBox = _f === void 0 ? "center" : _f, _g = _a.valignBox, valignBox = _g === void 0 ? "center" : _g;
             var _align = {
@@ -105,7 +98,4 @@ "top": -.5,
         }
-
         LabelContainer.prototype.addOrUpdateElem = function (id, param, payload) {
-            if (payload === void 0) {
-                payload = {};
-            }
+            if (payload === void 0) { payload = {}; }
             var cur = this._elements[id];
@@ -160,3 +150,2 @@ if (cur) {
     }());
-
     function cyNodeHtmlLabel(_cy, params) {
@@ -176,3 +165,2 @@ var _params = (!params || typeof params !== "object") ? [] : params;
         return _cy;
-
         function createLabelContainer() {
@@ -189,3 +177,2 @@ var _cyContainer = _cy.container();
         }
-
         function createNodesCyHandler(_a) {
@@ -204,8 +191,5 @@ var cy = _a.cy;
         }
-
         function addCyHandler(ev) {
             var target = ev.target;
-            var param = $$find(_params.slice().reverse(), function (x) {
-                return target.is(x.query);
-            });
+            var param = $$find(_params.slice().reverse(), function (x) { return target.is(x.query); });
             if (param) {
@@ -218,3 +202,2 @@ _lc.addOrUpdateElem(target.id(), param, {
         }
-
         function layoutstopHandler(_a) {
@@ -230,17 +213,12 @@ var cy = _a.cy;
         }
-
         function removeCyHandler(ev) {
             _lc.removeElemById(ev.target.id());
         }
-
         function moveCyHandler(ev) {
             _lc.updateElemPosition(ev.target.id(), getNodePosition(ev.target));
         }
-
         function updateDataCyHandler(ev) {
             setTimeout(function () {
                 var target = ev.target;
-                var param = $$find(_params.slice().reverse(), function (x) {
-                    return target.is(x.query);
-                });
+                var param = $$find(_params.slice().reverse(), function (x) { return target.is(x.query); });
                 if (param) {
@@ -257,3 +235,2 @@ _lc.addOrUpdateElem(target.id(), param, {
         }
-
         function wrapCyHandler(_a) {
@@ -266,3 +243,2 @@ var cy = _a.cy;
         }
-
         function getNodePosition(node) {
@@ -277,3 +253,2 @@ return {
     }
-
     var register = function (cy) {
@@ -303,1 +278,2 @@ if (!cy) {
 }());
+//# sourceMappingURL=cytoscape-node-html-label.js.map

gulpfile.js

@@ -9,4 +9,2 @@ "use strict";
 var uglify = require('gulp-uglify');
-var ts = require("gulp-typescript");
-var tsProject = ts.createProject("tsconfig.json");
 
@@ -42,9 +40,2 @@ var Server = require('karma').Server;
 
-gulp.task('ts', function () {
-  return tsProject.src()
-    .pipe(tsProject())
-    .js
-    .pipe(gulp.dest("dist"));
-});
-
 gulp.task('min', function () {
@@ -51,0 +42,0 @@ return gulp.src(['dist/cytoscape-node-html-label.js'])

karma.conf.js

@@ -19,3 +19,3 @@ // Karma configuration
       {pattern: 'libs/cytoscape.min.js', watched: false},
-      {pattern: 'cytoscape-node-html-label.js', watched: false},
+      {pattern: 'dist/cytoscape-node-html-label.js', watched: false},
       {pattern: 'test/**/*.css'},
@@ -22,0 +22,0 @@ 'test/**/*.js'

package.json

 {
   "name": "cytoscape-node-html-label",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "labels for cytoscape nodes",
   "author": "Kalugin Sergey <[e-mail]> (https://github.com/kaluginserg)",
   "main": "./dist/cytoscape-node-html-label.js",
+  "typings": "./dist/cytoscape-node-html-label.d.ts",
   "spm": {
@@ -11,4 +12,4 @@ "main": "./dist/cytoscape-node-html-label.js"
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "tsc"
+    "test": "gulp test",
+    "start": "tsc --watch --declaration"
   },
@@ -36,3 +37,2 @@ "repository": {
     "gulp-tag-version": "^1.3.0",
-    "gulp-typescript": "^3.2.1",
     "gulp-uglify": "^3.0.0",
@@ -39,0 +39,0 @@ "jasmine": "^2.7.0",

README.md

 cytoscape-node-html-label
 ================================================================================
 
+#### Brief instruction
 
+1) `npm install cytoscape-node-html-label`
+2) `cyInstance.nodeHtmlLabel( [{ tpl: d => '<div>' + d + '</div>' }] );`
+
 ## Description
 
-add html labels for cytoscape nodes.
+This extension provide ability adding labels for Cytoscape nodes.
+
 Demo: https://kaluginserg.github.io/cytoscape-node-html-label/
 
+## Fitures
+- optimised for high performance with high number nodes, for smooth panning and zooming.
+- customizable any labels with different templates.
+
 ## Dependencies
@@ -51,3 +60,3 @@
 ```js
-cy.nodeHtmlLabel(
+cyInstance.nodeHtmlLabel(
 [
@@ -61,3 +70,3 @@ {
         cssClass: '', // any classes will be as attribute of <div> container for every title
-        tpl: function(data){return data +''} // your html template here
+        tpl: function(data){return '<span>' + data + '</span>';} // your html template here
     }
@@ -68,2 +77,40 @@ ]
 
-#### Thank you for use this small extension.
+## Example usage
+
+Code example:
+```js
+// create Cy instance
+var cyInstance = cytoscape({
+    container: document.getElementById('cy'),
+    layout: {
+        name: 'random'
+    },
+    elements: [ // your cy elements
+        { group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
+        { group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
+        { group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
+        { group: "nodes", data: { id: 'a5', name: 'a5' }, classes: 'l2' }
+    ]
+});
+
+// set nodeHtmlLabel for your Cy instance
+cyInstance.nodeHtmlLabel([{
+        query: '.l1',
+        valign: "top",
+        halign: "left",
+        valignBox: "top",
+        halignBox: "left",
+        tpl: function(data) {
+            return '<p class="cy-title__p1">' + data.id + '</p>' + '<p  class="cy-title__p2">' + data.name + '</p>';
+        }
+    },
+    {
+        query: '.l2',
+        tpl: function(data) {
+            return '<p class="cy-title__p1">' + data.id + '</p>' + '<p  class="cy-title__p2">' + data.name + '</p>';
+        }
+    }
+]);
+```
+
+Demo here: https://kaluginserg.github.io/cytoscape-node-html-label/

src/cytoscape-node-html-label.ts

@@ -6,2 +6,22 @@ declare const require: any;
 
+declare type IHAlign = "left" | "center" | "right";
+declare type IVAlign = "top" | "center" | "bottom";
+
+declare interface CytoscapeNodeHtmlParams {
+  query ?: string;
+  halign ?: IHAlign;
+  valign ?: IVAlign;
+  halignBox ?: IHAlign;
+  valignBox ?: IVAlign;
+  cssClass ?: string;
+  tpl ?: (d: any) => string;
+}
+
+declare namespace cytoscape {
+  export type CytoscapeNodeHtmlLabel = CytoscapeNodeHtmlParams;
+
+  export function nodeHtmlLabel(o: CytoscapeNodeHtmlLabel[]): any;
+}
+
+
 (function () {
@@ -26,15 +46,2 @@ "use strict";
 
-  type IHAlign = "left" | "center" | "right";
-  type IVAlign = "top" | "center" | "bottom";
-
-  interface ICytoscapeNodeHtmlParams {
-    query ?: string;
-    halign ?: IHAlign;
-    valign ?: IVAlign;
-    halignBox ?: IHAlign;
-    valignBox ?: IVAlign;
-    cssClass ?: string;
-    tpl ?: (d: any) => string;
-  }
-
   interface ICyEventObject {
@@ -74,3 +81,3 @@ cy: any;
     constructor({node, baseClassName, position = null, data = null}: ILabelElement,
-                params: ICytoscapeNodeHtmlParams) {
+                params: CytoscapeNodeHtmlParams) {
 
@@ -98,3 +105,3 @@ this.updateParams(params);
                    valignBox = "center"
-                 }: ICytoscapeNodeHtmlParams) {
+                 }: CytoscapeNodeHtmlParams) {
 
@@ -181,3 +188,3 @@ const _align = {
 
-    addOrUpdateElem(id: string, param: ICytoscapeNodeHtmlParams, payload: { data?: any, position?: ICytoscapeNodeHtmlPosition } = {}) {
+    addOrUpdateElem(id: string, param: CytoscapeNodeHtmlParams, payload: { data?: any, position?: ICytoscapeNodeHtmlPosition } = {}) {
       let cur = this._elements[id];
@@ -236,3 +243,3 @@ if (cur) {
 
-  function cyNodeHtmlLabel(_cy: any, params: ICytoscapeNodeHtmlParams[]) {
+  function cyNodeHtmlLabel(_cy: any, params: CytoscapeNodeHtmlParams[]) {
     const _params = (!params || typeof params !== "object") ? [] : params;
@@ -239,0 +246,0 @@ const _lc = createLabelContainer();

test/specs/base.js

@@ -21,5 +21,8 @@ "use strict";
 
+  function isCyDefinedTest() {
+    expect(cy).toBeDefined();
+  }
+
   function isMainDefinedTest() {
-    expect(cy).toBeDefined();
-    expect(cy.nodeHtmlLabel).toBeDefined();
+    isCyDefinedTest();
     expect(typeof cy.nodeHtmlLabel).toEqual('function');
@@ -63,2 +66,6 @@ }
 
+  it('cy was defined', function () {
+    isCyDefinedTest();
+  });
+
   it('nodeHtmlLabel was defined in cy', function () {
@@ -65,0 +72,0 @@ isMainDefinedTest();

tsconfig.json

@@ -5,3 +5,2 @@ {
     "module": "None",
-    "moduleResolution": "node",
     "sourceMap": true,
@@ -19,3 +18,4 @@ "emitDecoratorMetadata": true,
     ],
-    "removeComments": true
+    "removeComments": true,
+    "outDir": "dist"
   },
@@ -22,0 +22,0 @@ "files": [

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

433615

increased by0.88%

Dev dependency count

15

decreased by-6.25%

Number of package files

36

increased by9.09%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

114

increased by72.73%

Worsened metrics

Lines of code

2080

decreased by-11.56%

No dependency changes