Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for setting whether dragging from an element causes panning #1905

Closed
maxkfranz opened this issue Jul 26, 2017 · 12 comments

Comments

Projects
None yet
6 participants
@maxkfranz
Copy link
Member

commented Jul 26, 2017

Issue type

Feature request

Description of new feature

Allow for no panning to occur when dragging on an edge.

Proposed API:

  • ele.pannable() : Get whether panning happens when dragging on the element
  • eles.panify() : Make the elements pannable.
  • eles.unpanify() : Make the elements unpannable.

This allows for per-element granularity, and it's consistent with existing functions like node.grabbable().

Motivation for new feature

When a tapdown-tapdrag gesture happens on an edge, it causes panning. This is useful for dense graphs, where panning on an empty area may be difficult.

However, it may be desirable for some apps to have their own behaviour for dragging on an edge. For example, you may want to drag the connected nodes of an edge when the edge is dragged.

This would be useful in apps like Factoid.

@maxkfranz maxkfranz added this to the 3.3.0 milestone Jul 26, 2017

@finger563

This comment has been minimized.

Copy link

commented Sep 20, 2017

Related to this, the behavior you describe differs if the edge is within another node, where no panning / dragging happen even if they're enabled. I agree we should allow the developer to programmatically specify how / where / when dragging or panning is enabled even on a per-node / per-edge basiss. For instance, I'd like to be able to disable dragging objects (which I can) but enable panning by clicking anywhere, not just on the background of the graph (which I can't: clicking / dragging inside compound nodes does nothing in that case).

@maxkfranz maxkfranz changed the title Allow disabling of panning passthrough on edges Allow for setting whether dragging from an element causes panning Sep 21, 2017

@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented Sep 21, 2017

Yes, it may make sense to allow for nodes as well. But I suppose that means we'd have to decide on a relative priority for dragging and panning. If both are enabled on a node, one should take precedence. Probably dragging should be higher priority, but there may be some usecases I'm not considering.

@finger563

This comment has been minimized.

Copy link

commented Sep 22, 2017

I think it's at that point that the programmer / user should be able to select what actions are enabled by ctrl, alt, meta/super; e.g. drag is default, pan is ctrl, box select is alt, and the programmer can have another option for meta/super (e.g. copy / re-parent)

@maxkfranz maxkfranz modified the milestones: 3.3.0, future Apr 16, 2018

@SkBlaz

This comment has been minimized.

Copy link

commented Jun 15, 2018

Hello all! Has there been any improvement on the subject yet?

Thank you!

@rdecapomaranca

This comment has been minimized.

Copy link

commented Jul 26, 2018

I would also like to know if there has been any progress on this issue. It is an essential feature when dealing with dense graphs where nodes take the majority of the space.

@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented Jul 26, 2018

Any updates would be referenced in this ticket. As you can see, this issue is not in the 3.3.0 milestone. It may be considered for a later release, like 3.4.0. PRs are welcome, and a PR could help put this feature into 3.3.0.

@finger563

This comment has been minimized.

Copy link

commented Jul 26, 2018

@rdecapomaranca have you seen https://github.com/cytoscape/cytoscape.js-panzoom ? I'm currently using that in my project until this feature gets implemented.

@lambdalisue

This comment has been minimized.

Copy link

commented Mar 1, 2019

I'm using the following code for workaround. fyi.

function globalPanning(cy: cytoscape.Core, enabled: () => boolean) {
  let startPosition: null | {
    readonly x: number;
    readonly y: number;
  };
  cy.on('mousedown', 'node, edge', (evt: cytoscape.EventObject) => {
    const e = (evt.originalEvent as any) as MouseEvent;
    if (enabled() && e.button === 0) {
      startPosition = evt.position;
    }
  });
  cy.on('mouseup', (evt: cytoscape.EventObject) => {
    const e = (evt.originalEvent as any) as MouseEvent;
    if (e.button === 0) {
      startPosition = null;
    }
  });
  cy.on('mousemove', (evt: cytoscape.EventObject) => {
    const e = (evt.originalEvent as any) as MouseEvent;
    if (startPosition) {
      const zoom = cy.zoom();
      const relativePosition = {
        x: (evt.position.x - startPosition.x) * zoom,
        y: (evt.position.y - startPosition.y) * zoom,
      };
      cy.panBy(relativePosition);
    }
  });
}

const cy = cytoscape({...});
globalPanning(cy, () => true);
@rdecapomaranca

This comment has been minimized.

Copy link

commented Mar 1, 2019

Thank you all for sharing different approaches. We have (temporarily) solved the problem by fixing the layout to be less dense.

@lambdalisue

This comment has been minimized.

Copy link

commented Mar 7, 2019

@lhannest

This comment has been minimized.

Copy link

commented May 14, 2019

@lambdalisue

I made a plugin. fyi https://www.npmjs.com/package/cytoscape-anywhere-panning

Thank you for that plugin. I found the nodes didn't move smoothly, but I was able to fix this by making the elements ungrabbable:

const isPanning = this.state.isPanning;
this.cy.autoungrabify(isPanning);
this.cy.anywherePanning(function() {
    return isPanning;
});

@maxkfranz maxkfranz modified the milestones: future, 3.7.0 May 14, 2019

@maxkfranz

This comment has been minimized.

Copy link
Member Author

commented May 14, 2019

@lambdalisue's extension is great, but basic native API support would be useful for things like changing the ele.grabbable() value automatically based on ele.pannable(). Even with the native feature, the extension could have convenience functions for things like toggling the pan anywhere mode. Another useful extension feature would be to easily customise keyboard shortcuts for toggling pan anywhere mode (e.g. enable pan anywhere mode when shift is held).

maxkfranz added a commit that referenced this issue May 23, 2019

Allow for setting whether dragging from an element causes panning #1905
- Implement `ele.pannable()`, `eles.panify()`, and `eles.unpanify()`.  If `ele.pannable() === true` then `ele.grabbable() === false`.  Previous checks in the renderer for passthrough panning that used `ele.isEdge()` now use `ele.pannable()`.
- Implement JSON import/export for the `pannable` property.
- Basic tests for JSON import/export.
- Document `ele.pannable()`, `eles.panify()`, and `eles.unpanify()`.
- Add panify and unpanify test UI to the debug page.

@maxkfranz maxkfranz closed this May 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.