ivis-at-bilkent / cytoscape.js-grid-guide Goto Github PK

We should test the performance of linear time guideline and alignment operations for large graphs (e.g. a few hundred nodes and a few hundred edges) to see if the performance is good enough for interactive use on such graphs.

• When the guidelinesTolerance option is zero (0), I still expect to see the guidelines when there is perfect alignment but I don't!
• When the tolerance is non-zero (e.g. 2), guidelines should still be drawn horizontal or vertical to show where there would be perfect alignment.

There should be a way to snap to guidelines (similar to snapping to grid). We should choose the closest guideline for this.

Hi!

Is it possible to snap nodes to the gridline? like that the node is snapped to the cross of the gridline instead of the center of the cell?

With default options, a compound node's children will all nicely align with the grid and the compound node margins will also be modified to nicely align with the grid. See here:

And when you drag child nodes of the compound, they keep nicely aligning with the grid. However, when you drag the compound, sometimes, the compound gets positioned off the grid (resulting in children not properly aligning with the grid). See below:

Although i think the issue is related to the latest Firefox version i'd like to point out that the grid isn't drawn in Firefx 59.0.1
Older versions, before Firefox Quantum, seems to work fine.

Seems like setting snapToGridDuringDrag: true somehow messes with the undo stack of https://github.com/iVis-at-Bilkent/cytoscape.js-undo-redo

Here's what I get:

• selected multiple elements
• drag to move them all
• press cmd+z to undo
• only a single (the last) item moved back to previous position

This doesn't happen with snapToGridDuringDrag: false

Thanks!!

How could we make it show only one point at each intersection in the grid?

Alignment operations should be done w.r.t. the node selected first.

Dragging via parent nodes is not possible. Need to modify applyToCyTarget on events_controller module.

Hello! I want to upgrade your wonderful library so that it allows you to change the background. just pass the background setting (color)(change naming, this color is GridLinesColor):

Change as:

gridColor: '#fff', // Color of grid background
gridLinesColor: '#dedede' // Color of grid lines

, and after need add in svg rendering

following code:

<svg width="'+ canvasWidth + '" height="'+ canvasHeight + '" xmlns="http://www.w3.org/2000/svg">\n\
            <defs>\n\
                <pattern id="horizontalLines" width="' + increment + '" height="' + increment + '" patternUnits="userSpaceOnUse">\n\
                    <path d="M ' + increment + ' 0 L 0 0 0 ' + 0 + '" fill="none" stroke="' + options.gridLinesColor + '" stroke-width="' + options.lineWidth + '" />\n\
                </pattern>\n\
                <pattern id="verticalLines" width="' + increment + '" height="' + increment + '" patternUnits="userSpaceOnUse">\n\
                    <path d="M ' + 0 + ' 0 L 0 0 0 ' + increment + '" fill="none" stroke="' + options.gridLinesColor + '" stroke-width="' + options.lineWidth + '" />\n\
                </pattern>\n\
            </defs>\n\
<rect width="100%" height="100%"  fill="' + options.gridColor + '" />\n\
<rect width="100%" height="100%" fill="url(#horizontalLines)" transform="translate('+ 0 + ', ' + initialValueY + ')" />\n\
<rect width="100%" height="100%" fill="url(#verticalLines)" transform="translate('+ initialValueX + ', ' + 0 + ')" />\n\

This result i showed on attached image:

Dear Devs,
I am using cytoscape-grid-guide && cytoscape-edgehandles together.
Even though I have set handlePosition: "middle top", in cy.edgehandles but
handles are displayed at wrong position on hover, node selected.

1. If i disable cy.gridGuide() , cy.edgehandles seem to work fine
2. Node size and grid spacing seem to effect this behaviour too. Node size width,height 80,80 and grid spacing 100 would yield different handle position
3. For very first time when i hover on node, handlePosition, appears at node center while i set it as handlePosition: "middle top", in cy.edgehandles

Code Pen Demo:
https://codepen.io/mafar/pen/JjYqvVp?editors=0010

ISSUE (Animated GIF):
See how handlePosition, offsets

**ISSUE , First Hover node , handlePosition, appears at node center **

When setting the option snapToGridDuringDrag to true, I've noticed that dragfree and dragfreeon events are not being fired.

Example available at: https://codesandbox.io/embed/cytoscape-dagre-demo-7ge5o

Setting snapToGridDuringDrag to false will allow the event to get triggered.

While trying to use grid-guide and context-menus together I ran into the issue that the order of initialization of these extensions is crucial. To be more concrete:

• First initializing context-menus and then grid-guide results in "TypeError: e is null" in cytoscape.js.
• Initializing grid-guide first does not throw that error.

I suspect this is not intentional? :-)

Initial mouse location (the location where we clicked on the node to be dragged) should also be remembered and taken into consideration during drag. So the user knows how the drag is proceeding w.r.t. initial mouse position.

I have trouble to import the grud guide module to my angular project.

I get the following error:

Could not find a declaration file for module 'cytoscape-grid-guide'. '/home/user/xxx/node_modules/cytoscape-grid-guide/src/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/cytoscape-grid-guideif it exists or add a new declaration (.d.ts) file containingdeclare module 'cytoscape-grid-guide';``

Is there a typescript type definition that i can use?
Maybe you can create one for npm?

Please add license details to the project! :-)

After #33 there is now the above issue on initialization. After minimizing our project it turns out that the following line called in another external library causes the issue:

if (window.jQuery) { jQuery.noConflict(); }

Since other plugins, like edgehandles etc., don't have the above issue I wonder if initialization of all plugins should not follow the same pattern, preferably that of plugins without the above issue?!

However, since the hack in #33 still works well for us, this is more a question of general curiosity for now :-)

Hi guys,

I'm getting an error, while trying to include this plugin, registered with "Plain JS" method.

The problem is at line 1025 (probably somewhere else as well). 6fe4bfe

Uncaught ReferenceError: cy is not defined

I've added a temporary fix by assigning window.cy to an instance of cytoscape, but I'd say it has to be changed inside the plugin itself, as not everyone is assigning cytoscape to a window object directly.

Thanks

Drag actions are pushed onto the undo stack independent of the value for the 'undoableDrag' option in the Undo/Redo extension.

Current we snap on mouse release. Can we (optionally if not complicated) make it snap during drag?

It'd be great if we calculated and displayed guidelines for edge bend points as well.

I'm using this library with ReactJS and my page has the cytoscape graph in the mainview, and a sliding panel on the right. When the panel is closed, I would like the grid to re-calculate the size and update. Is there a way to force the grid to resize?

In the attached model, if you click on the process, both geometric and distribution (inside/middle) guidelines are shown. But if you click on either of the two macromolecules A or B, then only the geometric guideline is shown. Maybe there is a rounding error or something preventing alignment in this case?

inconsistent-distribution.sbgnml.txt

This one can be easily tested in the demo.

Most users will probably be interested in center-center alignment. Perhaps we can discuss and have options to determine which type of alignments to check. This might help with performance as well.

Have you ever made some uglifyjs related plugins config in your code?

I tried to compile my web code, but met the error:

ERROR in static/js/vendor.c2fa7ee7f34202a87f40.js from UglifyJs
Unexpected token name «of», expected punc «;» [./node_modules/cytoscape-grid-guide/src/guidelines.js:248,0][static/js/vendor.c2fa7ee7f34202a87f40.js:74852,13]

Build failed with errors.

npm ERR! code ELIFECYCLE

Let's add an option to ignore center to edge alignments of nodes

When using the following options
geometricGuideline: true,
snapToAlignmentLocationDuringDrag: true,
If I select multiple nodes and move them together, they lose their alignment with one another.

Ungrabified nodes can be grabbed if option "snapToGridDuringDrag" is set to true.

i'm trying to use the automove extension together with grid-guide. while the grabbed nodes are correctly aligned to the grid, it seems the nodes automatically moved by automove are not. the effect can be seen if you move the upper node in this fiddle.

please let me know if i missed something obvious! :-)

Hello,

grid-guide creates two additional canvas elements above of the cytoscape.js canvas elements. One of the both elements doesn't have any attributes, the other got an absolute position, top, left and z-index attributes. So far, no problem.
When the browser is resized and due to the layout, several HTML elements wrap, top and left attributes aren't updated like they were on other canvas elements from other cytoscape plugins.
This results in a problematically layout where you may drag and drop the canvas outside of the borders of the desired area. Additionally node's touchpoints are postponed.

Before resizing:

After resizing:

I think the guidelines would be more usable (better user experience) if

• a node is not aligned (no guidelines are drawn for) with a node which overlaps this one (e.g. two nodes whose bounds are are currently overlapping or a child node with its parent node)
• a node is not aligned with a node which is too far from it (more than 5 times the ideal edge length or default average node size?)

To reproduce (on Windows 10 with latest Chrome):

• Start ChiSE with a full screen window,
• Then resize the window to be smaller. Now the guidelines seem to be messed up (displayed in incorrect locations).

I noticed that if I set {drawGrid: false}, there will be an empty canvas element which cause the whole canvas height higher than it should be.
I'm using [email protected] with [email protected].

Initialization of the plugin does not work in my setting due to the above error. In order to make it work I had to adjust the plugin as given below, maybe someone finds this helpful.

},{"functional-red-black-tree":1}],7:[function(require,module,exports){
;(function($){ 'use strict';
// registers the extension on a cytoscape lib ref
[ ... ]
})(jQuery);

Alignment guidelines should also display for compound nodes (e.g. when a node is aligned with a compound node).

I realized that Cytoscape.js dependency was updated to 3.3.0 4d36ff8 As far as I know, we have maintained backward compatibility pretty well and it should work with all versions >=1.6.0

If backward compatibility will be removed, then it should be removed from the source code as well. There are a couple of checks and conditions that we use to provide backward compatibility.

Performance on drag is in state of concern due to guidelines espesically in bigger graphs.

When there is not enough room for guidelines, it's probably not worth drawing guidelines. See example below (where there isn't enough room for vertical distribution guidelines):

So, below a certain length (not long enough to accommodate a line with arrows), they shouldn't be drawn at all (would be best to let the user define this as an extension option).

I'm using a framework enforcing the JS strict mode and I encountering some errors due to some uninitialized variables like

• calculateOffset in guideline.js
• padding in parentPadding.js

Is it possible to ensure the respect of the strict mode ?

Multiple nodes cannot be dragged simultaneously.

We should draw distribution guidelines consistently when the dragged node is in between two nodes (same as equally distanced outside of two nodes)