Skip to content

Tap to open flydown, double-tap to edit on touch devices - #90

Open
preetvadaliya wants to merge 1 commit into
mit-cml:mainfrom
preetvadaliya:flydown-touch-gestures
Open

preetvadaliya wants to merge 1 commit into
mit-cml:mainfrom
preetvadaliya:flydown-touch-gestures

Conversation

@preetvadaliya

Copy link
Copy Markdown

Fixes #40

On touch screens the flydown for a variable name could never be opened: it only appears on mouse hover, and a finger fires pointerover → pointerdown → pointerup → pointerout within a few milliseconds, so pointerout cancels the 500 ms hover timer before it fires.

This gives touch its own gestures, decided per event from pointerType. Mouse and pen are unchanged.

Input Before After
Mouse hover flydown after 500 ms same
Mouse click rename editor (editable fields) same
Pen same as mouse same as mouse
Touch tap nothing opens the flydown
Second tap on the same field within 500 ms nothing rename editor if the field is editable, otherwise nothing
Finger held on the field flydown at 500 ms, then editor on lift nothing (long-press context menu still works)

How it works

  • showEditor_(e) now looks at e.pointerType. For touch, the first tap calls showFlydown_(); a second tap on the same field within FieldFlydown.DOUBLE_TAP_TIMEOUT (500 ms) opens the editor when the field is EDITABLE. Everything else keeps the old code path.
  • onMouseOver_ no longer arms the hover timer for touch.
  • The double-tap is detected with a per-field timestamp (lastTapField_ / lastTapTime_), because the pointerdown of every tap already hides the flydown through hideChaff().
  • Small fix on the way: the thunk from showFlydownMaker_ checked this.htmlInput_ with this bound to window; it now checks the field, so hovering no longer opens the flydown over an open inline editor.

Testing

  • New test/field_flydown_touch.mocha.js (22 cases): single, double and slow taps; non-editable fields; tapping another field; dragging; fields in flyouts; mouse, pen and missing pointerType; hover timer per input type; dispose. npm test: 110 passing.
  • Playground with synthetic PointerEvents through Blockly's gesture pipeline: tap → flydown, second tap → editor, slow second tap → flydown, mouse click → editor, mouse hover → flydown, touch pointerover alone → nothing.

Also documents the gestures in FIELDS.md / README.md, adds sinon as a devDependency and bumps the package to 11.0.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support different gestures on touch devices

1 participant