TypeScript Definition for Cytoscape.js - It is being worked on now!

Cyberider commented 9 years ago

For any of you that use or are thinking of using TypeScript to strengthen your JS coding there is s TS definition file project in the works.

Fabian-Schmidt (not me) is working on it at: https://github.com/Fabian-Schmidt/DefinitelyTyped/tree/master/cytoscape

I use TypeScript so I'm excited to be able to use cytoscape.js with TypeScript.

Rick

adaamz commented 6 years ago

Any update here? :-)

wy193777 commented 6 years ago

@CZechBoY The type definition is already in DefinitelyTyped.

adaamz commented 6 years ago

@wy193777 Ok, so we can closed this issue?

wy193777 commented 6 years ago

I think so. Someone has the permission can close it now.

rahul799 commented 3 years ago

Hello everyone, I have been working on this issue as a part of my GSoD project under the mentorship of @maxkfranz .

This project's main objective was to convert the documentation for Cytoscape, currently a JSON specification with references to Markdown files, to JSDoc annotations. From the JSDoc comments, a Typescript definition file will be generated using tsd-jsdoc module.

Right now I am fixing a few minor issues and very soon we will be able to support TypeScript in the new release.

PR for the same has been merged. I am looking for some more feedback ( it can be a bug report or a new feature request ) or the area of improvements that can be done. I will be very happy to address all the inputs and make my contribution more valuable.

maxkfranz commented 1 year ago

@phreed @opavader @Cyberider, and others:

Let's get these typings directly into the main Cytoscape repo.

What would be involved in this process, i.e.

basic integration,
precedence over DT,
new build steps,
etc.

maxkfranz commented 3 months ago

We've done some initial analysis to estimate the coverage of the existing community Typescript definition file . The method isn't perfect, but it will help to identify areas for improvement.

Process:

Convert the API documentation into a JSON array of functions, e.g. cy.pan().
Convert the Typescript definition file into a JSON array of functions, e.g. cy.pan().
Diff the files (below).
Functions are duplicated to signify multiple signatures (formats).

--- ts.json
+++ docs.json
@@ -10,24 +10,27 @@
   "ani.progress",
   "ani.progress",
   "ani.promise",
+  "ani.promise",
   "ani.reverse",
   "ani.rewind",
+  "ani.run",
+  "ani.running",
   "ani.stop",
   "ani.time",
   "ani.time",
   "cy.$",
   "cy.$id",
   "cy.add",
+  "cy.add",
+  "cy.add",
   "cy.addListener",
-  "cy.addListener",
-  "cy.addListener",
-  "cy.addListener",
   "cy.animate",
   "cy.animated",
   "cy.animation",
   "cy.attr",
   "cy.attr",
   "cy.attr",
+  "cy.attr",
   "cy.autolock",
   "cy.autolock",
   "cy.autoungrabify",
@@ -36,20 +39,21 @@
   "cy.autounselectify",
   "cy.batch",
   "cy.bind",
-  "cy.bind",
-  "cy.bind",
-  "cy.bind",
   "cy.boxSelectionEnabled",
   "cy.boxSelectionEnabled",
   "cy.center",
+  "cy.center",
   "cy.centre",
+  "cy.centre",
   "cy.clearQueue",
   "cy.collection",
+  "cy.collection",
   "cy.container",
   "cy.createLayout",
   "cy.data",
   "cy.data",
   "cy.data",
+  "cy.data",
   "cy.delay",
   "cy.delayAnimation",
   "cy.destroy",
@@ -60,25 +64,18 @@
   "cy.endBatch",
   "cy.extent",
   "cy.filter",
+  "cy.filter",
   "cy.fit",
-  "cy.forceRender",
+  "cy.fit",
   "cy.getElementById",
-  "cy.hasElementWithId",
   "cy.height",
   "cy.invalidateDimensions",
   "cy.jpeg",
-  "cy.jpeg",
-  "cy.jpeg",
   "cy.jpg",
-  "cy.jpg",
-  "cy.jpg",
   "cy.json",
   "cy.json",
   "cy.layout",
   "cy.listen",
-  "cy.listen",
-  "cy.listen",
-  "cy.listen",
   "cy.makeLayout",
   "cy.maxZoom",
   "cy.maxZoom",
@@ -87,51 +84,41 @@
   "cy.mount",
   "cy.nodes",
   "cy.off",
-  "cy.off",
-  "cy.off",
   "cy.on",
-  "cy.on",
-  "cy.on",
-  "cy.on",
   "cy.one",
-  "cy.one",
-  "cy.one",
-  "cy.one",
   "cy.pan",
   "cy.pan",
   "cy.panBy",
   "cy.panningEnabled",
   "cy.panningEnabled",
   "cy.png",
-  "cy.png",
-  "cy.png",
   "cy.pon",
   "cy.promiseOn",
   "cy.ready",
   "cy.remove",
+  "cy.remove",
   "cy.removeAllListeners",
   "cy.removeAttr",
+  "cy.removeAttr",
   "cy.removeData",
+  "cy.removeData",
   "cy.removeListener",
-  "cy.removeListener",
-  "cy.removeListener",
   "cy.removeScratch",
+  "cy.renderedExtent",
   "cy.reset",
   "cy.resize",
   "cy.scratch",
   "cy.scratch",
+  "cy.scratch",
   "cy.selectionType",
   "cy.selectionType",
   "cy.startBatch",
   "cy.stop",
   "cy.style",
+  "cy.style",
   "cy.trigger",
   "cy.unbind",
-  "cy.unbind",
-  "cy.unbind",
   "cy.unlisten",
-  "cy.unlisten",
-  "cy.unlisten",
   "cy.unmount",
   "cy.userPanningEnabled",
   "cy.userPanningEnabled",
@@ -141,11 +128,18 @@
   "cy.width",
   "cy.zoom",
   "cy.zoom",
+  "cy.zoom",
   "cy.zoomingEnabled",
+  "cy.zoomingEnabled",
   "edge.controlPoints",
   "edge.isLoop",
   "edge.isSimple",
   "edge.midpoint",
+  "edge.renderedControlPoints",
+  "edge.renderedMidpoint",
+  "edge.renderedSegmentPoints",
+  "edge.renderedSourceEndpoint",
+  "edge.renderedTargetEndpoint",
   "edge.segmentPoints",
   "edge.source",
   "edge.sourceEndpoint",
@@ -153,13 +147,20 @@
   "edge.targetEndpoint",
   "edges.codirectedEdges",
   "edges.connectedNodes",
+  "edges.move",
   "edges.parallelEdges",
   "edges.sources",
   "edges.targets",
   "ele.active",
   "ele.animated",
   "ele.animation",
+  "ele.classes",
+  "ele.component",
   "ele.cy",
+  "ele.data",
+  "ele.data",
+  "ele.data",
+  "ele.data",
   "ele.delayAnimation",
   "ele.effectiveOpacity",
   "ele.group",
@@ -171,24 +172,25 @@
   "ele.isEdge",
   "ele.isNode",
   "ele.json",
+  "ele.json",
   "ele.numericStyle",
   "ele.numericStyleUnits",
   "ele.outerHeight",
   "ele.outerWidth",
+  "ele.pannable",
   "ele.removeScratch",
   "ele.removed",
-  "ele.renderedCss",
-  "ele.renderedCss",
   "ele.renderedHeight",
   "ele.renderedOuterHeight",
   "ele.renderedOuterWidth",
-  "ele.renderedStyle",
-  "ele.renderedStyle",
   "ele.renderedWidth",
   "ele.scratch",
   "ele.scratch",
+  "ele.scratch",
   "ele.selectable",
   "ele.selected",
+  "ele.style",
+  "ele.style",
   "ele.transparent",
   "ele.visible",
   "ele.width",
@@ -196,52 +198,58 @@
   "eles.aStar",
   "eles.abscomp",
   "eles.absoluteComplement",
+  "eles.add",
+  "eles.add",
   "eles.addClass",
   "eles.addListener",
-  "eles.addListener",
   "eles.allAre",
   "eles.allAreNeighbors",
   "eles.allAreNeighbours",
+  "eles.and",
+  "eles.and",
   "eles.animate",
   "eles.anySame",
-  "eles.attr",
-  "eles.attr",
-  "eles.attr",
+  "eles.bb",
+  "eles.bc",
   "eles.bellmanFord",
   "eles.betweennessCentrality",
   "eles.bfs",
   "eles.bind",
-  "eles.bind",
   "eles.boundingBox",
   "eles.boundingbox",
   "eles.breadthFirstSearch",
+  "eles.cc",
+  "eles.ccn",
+  "eles.className",
+  "eles.classNames",
   "eles.classes",
-  "eles.classes",
-  "eles.classes",
   "eles.clearQueue",
   "eles.clone",
   "eles.closedNeighborhood",
   "eles.closenessCentrality",
+  "eles.closenessCentralityNormalised",
   "eles.closenessCentralityNormalized",
   "eles.complement",
   "eles.components",
+  "eles.componentsOf",
   "eles.contains",
   "eles.copy",
   "eles.createLayout",
   "eles.css",
   "eles.css",
-  "eles.css",
-  "eles.css",
-  "eles.data",
-  "eles.data",
-  "eles.data",
+  "eles.dc",
+  "eles.dcn",
   "eles.degreeCentrality",
+  "eles.degreeCentralityNormalised",
   "eles.degreeCentralityNormalized",
   "eles.delay",
   "eles.depthFirstSearch",
   "eles.deselect",
   "eles.dfs",
   "eles.diff",
+  "eles.diff",
+  "eles.difference",
+  "eles.difference",
   "eles.dijkstra",
   "eles.each",
   "eles.edges",
@@ -250,16 +258,22 @@
   "eles.eq",
   "eles.every",
   "eles.filter",
+  "eles.filter",
   "eles.first",
   "eles.flashClass",
   "eles.floydWarshall",
   "eles.forEach",
   "eles.getElementById",
   "eles.has",
+  "eles.hierholzer",
   "eles.hopcroftTarjanBiconnected",
   "eles.hopcroftTarjanBiconnectedComponents",
   "eles.htb",
   "eles.htbc",
+  "eles.intersect",
+  "eles.intersect",
+  "eles.intersection",
+  "eles.intersection",
   "eles.is",
   "eles.jsons",
   "eles.kargerStein",
@@ -267,38 +281,43 @@
   "eles.last",
   "eles.layout",
   "eles.listen",
-  "eles.listen",
   "eles.makeLayout",
   "eles.map",
+  "eles.markovClustering",
   "eles.max",
+  "eles.mcl",
   "eles.merge",
+  "eles.merge",
   "eles.min",
-  "eles.move",
-  "eles.move",
   "eles.neighborhood",
   "eles.nodes",
   "eles.nonempty",
+  "eles.not",
+  "eles.not",
   "eles.off",
   "eles.on",
-  "eles.on",
   "eles.once",
-  "eles.once",
-  "eles.once",
   "eles.one",
-  "eles.one",
-  "eles.one",
   "eles.openNeighborhood",
+  "eles.or",
+  "eles.or",
   "eles.pageRank",
+  "eles.panify",
   "eles.pon",
   "eles.promiseOn",
   "eles.reduce",
+  "eles.relativeComplement",
+  "eles.relativeComplement",
   "eles.remove",
   "eles.removeAllListeners",
   "eles.removeAttr",
+  "eles.removeAttr",
   "eles.removeClass",
   "eles.removeData",
+  "eles.removeData",
   "eles.removeListener",
   "eles.removeStyle",
+  "eles.removeStyle",
   "eles.renderedBoundingBox",
   "eles.renderedBoundingbox",
   "eles.restore",
@@ -312,8 +331,12 @@
   "eles.stop",
   "eles.style",
   "eles.style",
-  "eles.style",
-  "eles.style",
+  "eles.subtract",
+  "eles.subtract",
+  "eles.symdiff",
+  "eles.symdiff",
+  "eles.symmetricDifference",
+  "eles.symmetricDifference",
   "eles.tarjanStronglyConnected",
   "eles.tarjanStronglyConnectedComponents",
   "eles.toArray",
@@ -322,28 +345,47 @@
   "eles.tsc",
   "eles.tscc",
   "eles.unbind",
-  "eles.undefined",
+  "eles.union",
+  "eles.union",
   "eles.unlisten",
   "eles.unmerge",
+  "eles.unmerge",
+  "eles.unpanify",
   "eles.unselect",
   "eles.unselectify",
-  "event.isDefaultPrevented",
-  "event.isImmediatePropagationStopped",
-  "event.isPropagationStopped",
-  "event.preventDefault",
-  "event.stopImmediatePropagation",
-  "event.stopPropagation",
+  "eles.xor",
+  "eles.xor",
+  "eles['!']",
+  "eles['!']",
+  "eles['&']",
+  "eles['&']",
+  "eles['(+)']",
+  "eles['(+)']",
+  "eles['(-)']",
+  "eles['(-)']",
+  "eles['+']",
+  "eles['+']",
+  "eles['-']",
+  "eles['-']",
+  "eles['.']",
+  "eles['.']",
+  "eles['\\\\']",
+  "eles['\\\\']",
+  "eles['^']",
+  "eles['^']",
+  "eles['n']",
+  "eles['n']",
+  "eles['u']",
+  "eles['u']",
+  "eles['|']",
+  "eles['|']",
   "layout.addListener",
-  "layout.addListener",
   "layout.bind",
-  "layout.bind",
+  "layout.emit",
   "layout.listen",
-  "layout.listen",
   "layout.off",
   "layout.on",
-  "layout.on",
   "layout.one",
-  "layout.one",
   "layout.pon",
   "layout.promiseOn",
   "layout.removeAllListeners",
@@ -380,24 +422,38 @@
   "node.relativePoint",
   "node.relativePoint",
   "node.relativePoint",
+  "node.relativePoint",
   "node.relativePosition",
   "node.relativePosition",
   "node.relativePosition",
+  "node.relativePosition",
   "node.renderedPoint",
   "node.renderedPoint",
   "node.renderedPoint",
+  "node.renderedPoint",
   "node.renderedPosition",
   "node.renderedPosition",
   "node.renderedPosition",
+  "node.renderedPosition",
+  "nodes.affinityPropagation",
   "nodes.ancestors",
+  "nodes.ap",
   "nodes.children",
   "nodes.commonAncestors",
   "nodes.connectedEdges",
   "nodes.descendants",
   "nodes.edgesTo",
+  "nodes.edgesTo",
   "nodes.edgesWith",
+  "nodes.edgesWith",
+  "nodes.fcm",
+  "nodes.fuzzyCMeans",
   "nodes.grabify",
+  "nodes.hca",
+  "nodes.hierarchicalClustering",
   "nodes.incomers",
+  "nodes.kMeans",
+  "nodes.kMedoids",
   "nodes.layoutPositions",
   "nodes.leaves",
   "nodes.lock",
@@ -408,13 +464,17 @@
   "nodes.minIndegree",
   "nodes.minOutdegree",
   "nodes.modelPositions",
+  "nodes.modelPositions",
+  "nodes.move",
   "nodes.nonorphans",
   "nodes.orphans",
   "nodes.outgoers",
   "nodes.parent",
   "nodes.parents",
   "nodes.points",
+  "nodes.points",
   "nodes.positions",
+  "nodes.positions",
   "nodes.predecessors",
   "nodes.roots",
   "nodes.shift",
@@ -423,16 +483,5 @@
   "nodes.successors",
   "nodes.totalDegree",
   "nodes.ungrabify",
-  "nodes.unlock",
-  "style.append",
-  "style.clear",
-  "style.fromJson",
-  "style.fromString",
-  "style.json",
-  "style.resetToDefault",
-  "style.selector",
-  "style.style",
-  "style.style",
-  "style.update",
-  "stylesheet.json"
+  "nodes.unlock"
 ]

maxkfranz commented 3 months ago

And a similar process for style properties:

--- ts-style.json
+++ docs-style.json
@@ -3,10 +3,15 @@
   "active-bg-opacity",
   "active-bg-size",
   "arrow-scale",
+  "average",
   "background-blacken",
   "background-clip",
   "background-color",
+  "background-fill",
   "background-fit",
+  "background-gradient-direction",
+  "background-gradient-stop-colors",
+  "background-gradient-stop-positions",
   "background-height",
   "background-height-relative-to",
   "background-image",
@@ -22,19 +27,24 @@
   "background-repeat",
   "background-width",
   "background-width-relative-to",
-  "backgroundColor",
+  "border-cap",
   "border-color",
+  "border-dash-offset",
+  "border-dash-pattern",
+  "border-join",
   "border-opacity",
+  "border-position",
   "border-style",
   "border-width",
   "bounds-expansion",
   "color",
-  "content",
+  "compound-sizing-wrt-labels",
   "control-point-distance",
   "control-point-distances",
   "control-point-step-size",
   "control-point-weight",
   "control-point-weights",
+  "corner-radius",
   "curve-style",
   "display",
   "edge-distances",
@@ -59,26 +69,42 @@
   "line-gradient-stop-positions",
   "line-height",
   "line-opacity",
+  "line-outline-color",
+  "line-outline-width",
   "line-style",
   "loop-direction",
   "loop-sweep",
+  "max",
   "mid-source-arrow-color",
   "mid-source-arrow-fill",
   "mid-source-arrow-shape",
+  "mid-source-arrow-width",
   "mid-target-arrow-color",
   "mid-target-arrow-fill",
   "mid-target-arrow-shape",
+  "mid-target-arrow-width",
+  "min",
+  "min-height",
+  "min-height-bias-bottom",
+  "min-height-bias-top",
+  "min-width",
+  "min-width-bias-left",
+  "min-width-bias-right",
   "min-zoomed-font-size",
   "opacity",
+  "outline-color",
+  "outline-offset",
+  "outline-opacity",
+  "outline-style",
+  "outline-width",
   "outside-texture-bg-color",
   "outside-texture-bg-opacity",
   "overlay-color",
   "overlay-opacity",
   "overlay-padding",
-  "padding-bottom",
-  "padding-left",
-  "padding-right",
-  "padding-top",
+  "overlay-shape",
+  "padding",
+  "padding-relative-to",
   "pie-1-background-color",
   "pie-1-background-opacity",
   "pie-1-background-size",
@@ -131,7 +157,9 @@
   "pie-i-background-opacity",
   "pie-i-background-size",
   "pie-size",
+  "radius-type",
   "segment-distances",
+  "segment-radii",
   "segment-weights",
   "selection-box-border-color",
   "selection-box-border-width",
@@ -142,6 +170,7 @@
   "source-arrow-color",
   "source-arrow-fill",
   "source-arrow-shape",
+  "source-arrow-width",
   "source-distance-from-node",
   "source-endpoint",
   "source-label",
@@ -152,6 +181,7 @@
   "target-arrow-color",
   "target-arrow-fill",
   "target-arrow-shape",
+  "target-arrow-width",
   "target-distance-from-node",
   "target-endpoint",
   "target-label",
@@ -160,6 +190,7 @@
   "target-text-offset",
   "target-text-rotation",
   "taxi-direction",
+  "taxi-radius",
   "taxi-turn",
   "taxi-turn-min-distance",
   "text-background-color",
@@ -189,6 +220,10 @@
   "transition-duration",
   "transition-property",
   "transition-timing-function",
+  "underlay-color",
+  "underlay-opacity",
+  "underlay-padding",
+  "underlay-shape",
   "visibility",
   "width",
   "z-compound-depth",

cytoscape / cytoscape.js

TypeScript Definition for Cytoscape.js - It is being worked on now! #1012