diff options
Diffstat (limited to 'catalog-ui/non_bower_components')
3 files changed, 0 insertions, 781 deletions
diff --git a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js deleted file mode 100644 index 147f19ce54..0000000000 --- a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js +++ /dev/null @@ -1,554 +0,0 @@ -(function (scope) { - var Class = function (param1, param2) { - - var extend, mixins, definition; - if (param2) { //two parameters passed, first is extends, second definition object - extend = Array.isArray(param1) ? param1[0] : param1; - mixins = Array.isArray(param1) ? param1.slice(1) : null; - definition = param2; - } else { //only one parameter passed => no extend, only definition - extend = null; - definition = param1; - } - - - var Definition = definition.hasOwnProperty("constructor") ? definition.constructor : function () { - }; - - Definition.prototype = Object.create(extend ? extend.prototype : null); - var propertiesObject = definition.propertiesObject ? definition.propertiesObject : {}; - if (mixins) { - var i, i2; - for (i in mixins) { - for (i2 in mixins[i].prototype) { - Definition.prototype[i2] = mixins[i].prototype[i2]; - } - for (var i2 in mixins[i].prototype.propertiesObject) { - propertiesObject[i2] = mixins[i].prototype.propertiesObject[i2]; - } - } - } - - Definition.prototype.propertiesObject = propertiesObject; - - Object.defineProperties(Definition.prototype, propertiesObject); - - for (var key in definition) { - if (definition.hasOwnProperty(key)) { - Definition.prototype[key] = definition[key]; - } - } - - Definition.prototype.constructor = Definition; - - return Definition; - }; - - - var Interface = function (properties) { - this.properties = properties; - }; - - var InterfaceException = function (message) { - this.name = "InterfaceException"; - this.message = message || ""; - }; - - InterfaceException.prototype = new Error(); - - Interface.prototype.implements = function (target) { - for (var i in this.properties) { - if (target[this.properties[i]] == undefined) { - throw new InterfaceException("Missing property " + this.properties[i]); - } - } - return true; - }; - - Interface.prototype.doesImplement = function (target) { - for (var i in this.properties) { - if (target[this.properties[i]] === undefined) { - return false; - } - } - return true; - }; - - var VectorMath = { - distance: function (vector1, vector2) { - return Math.sqrt(Math.pow(vector1.x - vector2.x, 2) + Math.pow(vector1.y - vector2.y, 2)); - } - }; - - var EventDispatcher = Class({ - constructor: function () { - this.events = {}; - }, - on: function (name, listener, context) { - this.events[name] = this.events[name] ? this.events[name] : []; - this.events[name].push({ - listener: listener, - context: context - }) - }, - once: function (name, listener, context) { - this.off(name, listener, context); - this.on(name, listener, context); - }, - off: function (name, listener, context) { - //no event with this name registered? => finish - if (!this.events[name]) { - return; - } - if (listener) { //searching only for certains listeners - for (var i in this.events[name]) { - if (this.events[name][i].listener === listener) { - if (!context || this.events[name][i].context === context) { - this.events[name].splice(i, 1); - } - } - } - } else { - delete this.events[name]; - } - }, - trigger: function (name) { - var listeners = this.events[name]; - - for (var i in listeners) { - listeners[i].listener.apply(listeners[i].context, Array.prototype.slice.call(arguments, 1)); - } - } - }); - - scope.CytoscapeEdgeEditation = Class({ - - init: function (cy, handleSize) { - this.DOUBLE_CLICK_INTERVAL = 300; - this.HANDLE_SIZE = handleSize ? handleSize : 5; - this.ARROW_END_ID = "ARROW_END_ID"; - - this._handles = {}; - this._dragging = false; - this._hover = null; - - - this._cy = cy; - this._$container = $(cy.container()); - - this._cy.on('mouseover tap', 'node', this._mouseOver.bind(this)); - this._cy.on('mouseout', 'node', this._mouseOut.bind(this)); - - this._$container.on('mouseout', function (e) { - if (this.permanentHandle) { - return; - } - - this._clear(); - }.bind(this)); - - this._$container.on('mouseover', function (e) { - if (this._hover) { - this._mouseOver({cyTarget: this._hover}); - } - }.bind(this)); - - this._cy.on("select", "node", this._redraw.bind(this)) - - this._cy.on("mousedown", "node", function () { - this._nodeClicked = true; - }.bind(this)); - - this._cy.on("mouseup", "node", function () { - this._nodeClicked = false; - }.bind(this)); - - this._cy.on("remove", "node", function () { - this._hover = false; - this._clear(); - }.bind(this)); - - this._cy.on('showhandle', function (cy, target) { - this.permanentHandle = true; - this._showHandles(target); - }.bind(this)); - - this._cy.on('hidehandles', this._hideHandles.bind(this)); - - this._cy.bind('zoom pan', this._redraw.bind(this)); - - - this._$canvas = $('<canvas></canvas>'); - this._$canvas.css("top", 0); - this._$canvas.on("mousedown", this._mouseDown.bind(this)); - this._$canvas.on("mousemove", this._mouseMove.bind(this)); - - this._ctx = this._$canvas[0].getContext('2d'); - this._$container.children("div").append(this._$canvas); - - $(window).bind('mouseup', this._mouseUp.bind(this)); - - /*$(window).bind('resize', this._resizeCanvas.bind(this)); - $(window).bind('resize', this._resizeCanvas.bind(this));*/ - - this._cy.on("resize", this._resizeCanvas.bind(this)); - - this._$container.bind('resize', function () { - this._resizeCanvas(); - }.bind(this)); - - this._resizeCanvas(); - - this._arrowEnd = this._cy.add({ - group: "nodes", - data: { - "id": this.ARROW_END_ID, - "position": {x: 150, y: 150} - } - }); - - this._arrowEnd.css({ - "opacity": 0, - 'width': 0.0001, - 'height': 0.0001 - }); - - }, - registerHandle: function (handle) { - if (handle.nodeTypeNames) { - for (var i in handle.nodeTypeNames) { - var nodeTypeName = handle.nodeTypeNames[i]; - this._handles[nodeTypeName] = this._handles[nodeTypeName] || []; - this._handles[nodeTypeName].push(handle); - } - } else { - this._handles["*"] = this._handles["*"] || []; - this._handles["*"].push(handle); - } - - }, - _showHandles: function (target) { - var nodeTypeName = target.data().type; - if (nodeTypeName) { - - var handles = this._handles[nodeTypeName] ? this._handles[nodeTypeName] : this._handles["*"]; - - for (var i in handles) { - if (handles[i].type != null) { - this._drawHandle(handles[i], target); - } - } - } - - }, - _clear: function () { - - var w = this._$container.width(); - var h = this._$container.height(); - this._ctx.clearRect(0, 0, w, h); - }, - _drawHandle: function (handle, target) { - - var position = this._getHandlePosition(handle, target); - - this._ctx.beginPath(); - - if (handle.imageUrl) { - var base_image = new Image(); - base_image.src = handle.imageUrl; - this._ctx.drawImage(base_image, position.x, position.y, this.HANDLE_SIZE, this.HANDLE_SIZE); - } else { - this._ctx.arc(position.x, position.y, this.HANDLE_SIZE, 0, 2 * Math.PI, false); - this._ctx.fillStyle = handle.color; - this._ctx.strokeStyle = "white"; - this._ctx.lineWidth = 0; - this._ctx.fill(); - this._ctx.stroke(); - } - - }, - _drawArrow: function (fromNode, toPosition, handle) { - var toNode; - if (this._hover) { - toNode = this._hover; - } else { - this._arrowEnd.renderedPosition(toPosition); - toNode = this._arrowEnd; - } - - - if (this._edge) { - this._edge.remove(); - } - - this._edge = this._cy.add({ - group: "edges", - data: { - id: "edge", - source: fromNode.id(), - target: toNode.id(), - type: 'temporary-link' - }, - css: $.extend( - this._getEdgeCSSByHandle(handle), - {opacity: 0.5} - ) - }); - - }, - _clearArrow: function () { - if (this._edge) { - this._edge.remove(); - this._edge = null; - } - }, - _resizeCanvas: function () { - this._$canvas - .attr('height', this._$container.height()) - .attr('width', this._$container.width()) - .css({ - 'position': 'absolute', - 'z-index': '999' - }); - }, - _mouseDown: function (e) { - this._hit = this._hitTestHandles(e); - - if (this._hit) { - this._lastClick = Date.now(); - this._dragging = this._hover; - this._hover = null; - e.stopImmediatePropagation(); - } - }, - _hideHandles: function () { - this.permanentHandle = false; - this._clear(); - - if(this._hover){ - this._showHandles(this._hover); - } - }, - _mouseUp: function () { - if (this._hover) { - if (this._hit) { - //check if custom listener was passed, if so trigger it and do not add edge - var listeners = this._cy._private.listeners; - for (var i = 0; i < listeners.length; i++) { - if (listeners[i].type === 'addedgemouseup') { - this._cy.trigger('addedgemouseup', { - source: this._dragging, - target: this._hover, - edge: this._edge - }); - var that = this; - setTimeout(function () { - that._dragging = false; - that._clearArrow(); - that._hit = null; - }, 0); - - - return; - } - } - - var edgeToRemove = this._checkSingleEdge(this._hit.handle, this._dragging); - if (edgeToRemove) { - this._cy.remove("#" + edgeToRemove.id()); - } - var edge = this._cy.add({ - data: { - source: this._dragging.id(), - target: this._hover.id(), - type: this._hit.handle.type - } - }); - this._initEdgeEvents(edge); - } - } - this._cy.trigger('handlemouseout', { - node: this._hover - }); - $("body").css("cursor", "inherit"); - this._dragging = false; - this._clearArrow(); - }, - _mouseMove: function (e) { - if (this._hover) { - if (!this._dragging) { - var hit = this._hitTestHandles(e); - if (hit) { - this._cy.trigger('handlemouseover', { - node: this._hover - }); - $("body").css("cursor", "pointer"); - - } else { - this._cy.trigger('handlemouseout', { - node: this._hover - }); - $("body").css("cursor", "inherit"); - } - } - } else { - $("body").css("cursor", "inherit"); - } - - if (this._dragging && this._hit.handle) { - this._drawArrow(this._dragging, this._getRelativePosition(e), this._hit.handle); - } - - if (this._nodeClicked) { - this._clear(); - } - }, - _mouseOver: function (e) { - - if (this._dragging) { - if ( (e.cyTarget.id() != this._dragging.id()) && e.cyTarget.data().allowConnection || this._hit.handle.allowLoop) { - this._hover = e.cyTarget; - } - } else { - this._hover = e.cyTarget; - this._showHandles(this._hover); - } - }, - _mouseOut: function (e) { - if(!this._dragging) { - if (this.permanentHandle) { - return; - } - - this._clear(); - } - this._hover = null; - }, - _removeEdge: function (edge) { - edge.off("mousedown"); - this._cy.remove("#" + edge.id()); - }, - _initEdgeEvents: function (edge) { - var self = this; - edge.on("mousedown", function () { - if (self.__lastClick && Date.now() - self.__lastClick < self.DOUBLE_CLICK_INTERVAL) { - self._removeEdge(this); - } - self.__lastClick = Date.now(); - }) - }, - _hitTestHandles: function (e) { - var mousePoisition = this._getRelativePosition(e); - - if (this._hover) { - var nodeTypeName = this._hover.data().type; - if (nodeTypeName) { - var handles = this._handles[nodeTypeName] ? this._handles[nodeTypeName] : this._handles["*"]; - - for (var i in handles) { - var handle = handles[i]; - - var position = this._getHandlePosition(handle, this._hover); - if (VectorMath.distance(position, mousePoisition) < this.HANDLE_SIZE) { - return { - handle: handle, - position: position - }; - } - } - } - } - }, - _getHandlePosition: function (handle, target) { - var position = target.renderedPosition(); - var width = target.renderedOuterWidth(); - var height = target.renderedOuterHeight(); - var xpos = null; - var ypos = null; - - switch (handle.positionX) { - case "left": - xpos = position.x - width / 2 + this.HANDLE_SIZE; - break; - case "right": - xpos = position.x + width / 2 - this.HANDLE_SIZE; - break; - case "center": - xpos = position.x; - break; - } - - switch (handle.positionY) { - case "top": - ypos = position.y - height / 2 + this.HANDLE_SIZE; - break; - case "center": - ypos = position.y; - break; - case "bottom": - ypos = position.y + height / 2 - this.HANDLE_SIZE; - break; - } - - var offsetX = handle.offsetX ? handle.offsetX : 0; - var offsetY = handle.offsetY ? handle.offsetY : 0; - return {x: xpos + offsetX, y: ypos + offsetY}; - }, - _getEdgeCSSByHandle: function (handle) { - var color = handle.lineColor ? handle.lineColor : handle.color; - return { - "line-color": color, - "target-arrow-color": color, - "line-style": handle.lineStyle? handle.lineStyle: 'solid', - "width": handle.width? handle.width : 3 - }; - }, - _getHandleByType: function (type) { - for (var i in this._handles) { - var byNodeType = this._handles[i]; - for (var i2 in byNodeType) { - var handle = byNodeType[i2]; - if (handle.type == type) { - return handle; - } - } - } - }, - _getRelativePosition: function (e) { - var containerPosition = this._$container.offset(); - return { - x: e.pageX - containerPosition.left, - y: e.pageY - containerPosition.top - } - }, - _checkSingleEdge: function (handle, node) { - - if (handle.noMultigraph) { - var edges = this._cy.edges("[source='" + this._hover.id() + "'][target='" + node.id() + "'],[source='" + node.id() + "'][target='" + this._hover.id() + "']"); - - for (var i = 0; i < edges.length; i++) { - return edges[i]; - } - } else { - - if (handle.single == false) { - return; - } - var edges = this._cy.edges("[source='" + node.id() + "']"); - - for (var i = 0; i < edges.length; i++) { - if (edges[i].data()["type"] == handle.type) { - return edges[i]; - } - } - } - }, - _redraw: function () { - this._clear(); - if (this._hover) { - this._showHandles(this._hover); - } - } - }); - -})(this);
\ No newline at end of file diff --git a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md deleted file mode 100644 index 909dcb06d1..0000000000 --- a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md +++ /dev/null @@ -1,58 +0,0 @@ -# cytoscape.js-edge-editation -Extension for Cytoscape.js, which adds handles to nodes and allows to create different types of edges - - -## Dependencies - -Extension was tested with these versions of libraries: - -* jQuery 2.1.1 -* Cytoscape.js 2.6.0 - -## Install - -Use git clone or direct zip download and unpack archive into your project. Then, simply insert \<script\> tag after -Cytoscape.js and jQuery: - -```html -<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> -<script src="cytoscape.js"></script> -<script src="CytoscapeEdgeEditation.js"></script> -``` - -## How to use - -First, you need to initialize extension. After initializing Cytoscape.js: - -```js -var cy = cytoscape({...}); -var handles = new CytoscapeEdgeEditation; -handles.init(cy); -``` - -Then, you need to register handles to certain node types: - -```js -handles.registerHandle({ - positionX: "left", //horizontal position of the handle (left | center | right) - positionY: "center", //vertical position of the handle (top | center | bottom) - color: "#48FF00", //color of the handle - type: "some_type", //stored as data() attribute, can be used for styling - single: true, //wheter only one edge of this type can start from same node (default false) - nodeTypeNames: ["type2"] //which types of nodes will contain this handle - noMultigraph: false //whereter two nodes can't be connected with multiple edges (does not consider orientation) -}); - -handles.registerHandle({...}); -handles.registerHandle({...}); -``` - -Type of node is stored in data section: - -```js -cy.add({ - data: { id: 'n4', type: "type2"}, -}); -``` - - diff --git a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html deleted file mode 100644 index d19fd36c24..0000000000 --- a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/index.html +++ /dev/null @@ -1,169 +0,0 @@ -<!doctype html> -<html lang="cs"> -<head> - <meta charset="UTF-8"> - <title>CytoscapeEdgeEditation</title> - <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> - <script src="bower_components/cytoscape/dist/cytoscape.js"></script> - <script src="CytoscapeEdgeEditation.js"></script> - <script> - $(function(){ - //INITIALIZATION - var domContainer = $(".cy"); - var cy = cytoscape({ - container: domContainer, - style: [ - { - selector: 'node[type="type1"]', - style: { - 'background-color': '#FFEB12', - } - }, - { - selector: 'node[type="type2"]', - style: { - 'background-color': '#2CE8F2', - } - }, - { - selector: 'edge', - style: { - 'width': 3, - 'target-arrow-shape': 'triangle' - } - }, - { - selector: 'edge[type="default"]', - style: { - 'line-color': 'green', - 'target-arrow-color': 'green', - } - }, - { - selector: 'edge[type="yes"]', - style: { - 'line-color': '#48FF00', - 'target-arrow-color': '#48FF00', - } - }, - { - selector: 'edge[type="no"]', - style: { - 'line-color': '#ED1000', - 'target-arrow-color': '#ED1000', - } - } - ] - }); - - - var handles = new CytoscapeEdgeEditation; - handles.init(cy); - - handles.registerHandle({ - positionX: "center", - positionY: "bottom", - color: "green", - type: "default", - single: false, - nodeTypeNames: ["type1"] - }); - - handles.registerHandle({ - positionX: "center", - positionY: "top", - color: "green", - type: "default", - single: false, - nodeTypeNames: ["type1"] - }); - - handles.registerHandle({ - positionX: "left", - positionY: "center", - color: "green", - type: "default", - single: false, - nodeTypeNames: ["type1"] - }); - - handles.registerHandle({ - positionX: "right", - positionY: "center", - color: "green", - type: "default", - single: false, - nodeTypeNames: ["type1"] - // noMultigraph: true - }); - - handles.registerHandle({ - positionX: "left", - positionY: "center", - color: "#48FF00", - type: "yes", - single: true, - nodeTypeNames: ["type2"] - }); - - handles.registerHandle({ - positionX: "right", - positionY: "center", - color: "#ED1000", - type: "no", - single: true, - nodeTypeNames: ["type2"] - }); - - - //ADD NODES - cy.add({ - data: { id: 'n1', type: "type1"}, - }); - - cy.add({ - data: { id: 'n2', type: "type1"}, - }); - - cy.add({ - data: { id: 'n3', type: "type1"}, - }); - - cy.add({ - data: { id: 'n4', type: "type2"}, - }); - - - //ADJUST HEIGHT - var resizeViewport = function(){ - $(".cy").height($(window).height()); - cy.resize(); - }; - - $(window).resize(resizeViewport); - resizeViewport(); - - //LAYOUT - cy.layout({ - name: 'random', - fit: true, - padding: 40, - boundingBox: {x1: -200, y1:-200, x2:300, y2: 200} - }); - }); - </script> - <style> - * { - padding: 0; - margin: 0; - } - .cy { - width: 100%; - height:100%; - } - </style> -</head> -<body> - <div class="cy"></div> -</body> -</html>
\ No newline at end of file |