projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

Adds support for touch events, enabling touch dragging the canvas #828

Closed renato-bohler closed 3 years ago

renato-bohler commented 3 years ago

Checklist

What?

Adds support for touch events (touchstart, touchmove and touchend). Enables touch dragging the canvas by default.

P.S.: this is already working on logossim, changes applied using patch-package on this PR: https://github.com/renato-bohler/logossim/pull/59

Example:

https://user-images.githubusercontent.com/25781956/114326338-b0049280-9b0a-11eb-909c-2d2340bcfcd6.mp4

Why?

Improves mobile support. Even though it doesn't completely makes touch-based devices supported, this makes it possible for developers to implement full support on their applications (by customizing State).

How?

  1. Added 3 touch events to InputType.
  2. Changed getActionsForEvent method on ActionEventBus.
  3. Changed AbstractDisplacementState to listen for touch events.
  4. Added onTouch(Start/End/Move) event handlers on CanvasWidget.
  5. Updated the DefaultState.
  6. Updated examples.

Feel good image:

image

renato-bohler commented 3 years ago

This is a mini version of #488 that only enables dragging. The advantage is that this PR could be shipped more easily. Maybe we could work on node dragging/link creation on future versions.

kobajs commented 3 years ago

I need that 👍