feat: add inputKey option to PanInput and WheelInput #204
Conversation
malangfox
force-pushed
the
feat-pan-wheel-inputkey
branch
from
0fa4331 to
7c6d63a
Compare
| @@ -130,7 +142,7 @@ export class WheelInput implements InputType { | |||
| } | |||
|
|
|||
| private _onWheel(event: WheelEvent) { | |||
| if (!this._enabled) { | |||
| if (!this._enabled || !isValidKey(event, this.options.inputKey)) { | |||
There was a problem hiding this comment.
The wheel will have to be careful.
Multi-touch in the browser works with ctrl + wheel.
There was a problem hiding this comment.
Since ctrl + wheel also has a zoom function in the browser, it looks like it should be handled with preventDefault.
In Axes, preventDefault is already applied for ctrl + wheel, can be there any additional processing needed?
| * - shift: shift 키 | ||
| * - ctrl: ctrl 키 | ||
| * - alt: alt 키 | ||
| * - meta: meta 키 </ko> |
There was a problem hiding this comment.
The action of inputKey is the same as or.
If so, does it also support and behavior?
There was a problem hiding this comment.
Currently this does not support and behavior. I designed this as or for the following reasons.
- Certain input devices do not have an Alt key, so it need a replacement.
- A similar option
inputButtonis implemented asorand both options are array, it seems better to work consistently withor.
| (!inputKey || isValidKey(event, inputKey)) && | ||
| (!inputButton || this._isValidButton(this._getButton(event), inputButton)) |
There was a problem hiding this comment.
Isn't every event valid when there're no items in inputKey and inputButton in this case?
There was a problem hiding this comment.
Since array is type of object, an empty Array is conversed to true and !inputButton is conversed to false.
The reason to check !inputButton here is that inputButton is optional like in the case of a pinch gesture where there is no inputButton option.
But for what you said, it seemed nice to add the case where inputButton is an empty array to the unit test, so I added it.
| }); | ||
|
|
||
| it("should not trigger event when the inputButton is empty", (done) => { | ||
| // Given | ||
| const hold = sinon.spy(); | ||
| const change = sinon.spy(); | ||
| const release = sinon.spy(); |
packages/demo/src/pages/Options.mdx
Outdated
| Allow input only when one of these keys is pressed. If the array is empty, it accepts all keys with case of no key is pressed. | ||
| - shift: shift key | ||
| - ctrl: ctrl key | ||
| - alt: alt key | ||
| - meta: meta key |
There was a problem hiding this comment.
You should change the document, as it looks like ANY replaces this
Details
This adds
InputKeyoption that accepts input only when certain keys are pressed for thePanInputandWheelInput.Considering that some devices don't have an Alt key and use a meta key instead, I implemented
InputKeyoption to be an array of keys that allows input when any one of these is pressed.