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.

Sign up for GitHub

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

Feat/right click #92

Merged
merged 16 commits into from
Oct 23, 2019
Merged

Feat/right click #92

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
87ccd76
pass in mouse event through UIs
tibotiber Oct 17, 2019
65d82a3
uniform variable names
tibotiber Oct 17, 2019
2f90b45
build
tibotiber Oct 17, 2019
ead3a3b
build docs
tibotiber Oct 17, 2019
564f286
typings and minify
tibotiber Oct 17, 2019
4c653c5
backward compatible api
tibotiber Oct 17, 2019
8edce52
build
tibotiber Oct 17, 2019
f12a315
update docs
tibotiber Oct 17, 2019
592bdea
typings and minify again
tibotiber Oct 17, 2019
74ed8da
Revert "typings and minify again"
tibotiber Oct 22, 2019
f91cdf4
Revert "update docs"
tibotiber Oct 22, 2019
30b20c7
Revert "build"
tibotiber Oct 22, 2019
2e2269d
Revert "typings and minify"
tibotiber Oct 22, 2019
9fb0ea9
Revert "build docs"
tibotiber Oct 22, 2019
88a0d67
Revert "build"
tibotiber Oct 22, 2019
1868541
build
tibotiber Oct 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
pass in mouse event through UIs
  • Loading branch information
@tibotiber
tibotiber committed Oct 17, 2019
commit 87ccd76310bb4ff311f62fccbf3a920a65501560
2 changes: 1 addition & 1 deletion src/Types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export type IntersectContext = {
/**
* UIHandler is a type alias that represents a callback function to handle UI actions.
*/
export type UIHandler = ( target:UI, pt:PtLike, type:string ) => void;
export type UIHandler = ( target:UI, pt:PtLike, type:string, evt:MouseEvent ) => void;


/**
Expand Down
44 changes: 23 additions & 21 deletions src/UI.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const UIShape = {


/**
* **[Experimental]** A set of string constants to represent different UI events.
* **[Experimental]** A set of string constants to represent different UI event types.
*/
export const UIPointerActions = {
up: "up", down: "down", move: "move", drag: "drag", uidrag: "uidrag", drop: "drop", uidrop: "uidrop", over: "over", out: "out", enter: "enter", leave: "leave", all: "all"
Expand Down Expand Up @@ -164,17 +164,18 @@ export class UI {

/**
* Listen for UI events and trigger action handlers.
* @param event an action event. Can be one of UIPointerActions or a custom one.
* @param type an action type. Can be one of UIPointerActions or a custom one.
* @param evt a MouseEvent emitted by the browser (See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent))
* @param p a point to check
*/
listen( event:string, p:PtLike ):boolean {
if ( this._actions[event] !== undefined ) {
listen( type:string, evt:MouseEvent, p:PtLike ):boolean {
if ( this._actions[type] !== undefined ) {

if ( this._within(p) || Array.from(this._holds.values()).indexOf(event) >= 0 ) {
UI._trigger( this._actions[event], this, p, event );
if ( this._within(p) || Array.from(this._holds.values()).indexOf(type) >= 0 ) {
UI._trigger( this._actions[type], this, p, type, evt );
return true;
} else if (this._actions['all']) { // listen for all regardless of trigger
UI._trigger( this._actions['all'], this, p, event );
UI._trigger( this._actions['all'], this, p, type, evt );
return true;
}
}
Expand Down Expand Up @@ -209,12 +210,13 @@ export class UI {
/**
* A static function to listen for a list of UIs. See also [`UI.listen`](#link).
* @param uis an array of UI
* @param key an action key. Can be one of `UIPointerActions` or a custom one.
* @param p A point to check
* @param type an action type. Can be one of `UIPointerActions` or a custom one.
* @param evt a MouseEvent emitted by the browser (See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent))
* @param p a point to check
*/
static track( uis:UI[], key:string, p:PtLike ):void {
static track( uis:UI[], type:string, evt:MouseEvent, p:PtLike ):void {
for (let i=0, len=uis.length; i<len; i++) {
uis[i].listen( key, p );
uis[i].listen( type, evt, p );
}
}

Expand Down Expand Up @@ -259,10 +261,10 @@ export class UI {
/**
* Static function to trigger an array of UIHandlers
*/
protected static _trigger( fns:UIHandler[], target:UI, pt:PtLike, type:string ) {
protected static _trigger( fns:UIHandler[], target:UI, pt:PtLike, type:string, evt:MouseEvent ) {
if (fns) {
for (let i=0, len=fns.length; i<len; i++) {
if (fns[i]) fns[i]( target, pt, type );
if (fns[i]) fns[i]( target, pt, type, evt );
}
}
}
Expand Down Expand Up @@ -320,21 +322,21 @@ export class UIButton extends UI {
const UA = UIPointerActions;

// listen for clicks when mouse up and increment clicks
this.on( UA.up, (target:UI, pt:PtLike, type:string) => {
this.on( UA.up, (target:UI, pt:PtLike, type:string, evt:MouseEvent) => {
this.state( 'clicks', this._states.clicks+1 );
});


// listen for move events and fire enter and leave events accordingly
this.on( UA.move, (target:UI, pt:PtLike, type:string) => {
this.on( UA.move, (target:UI, pt:PtLike, type:string, evt:MouseEvent) => {
let hover = this._within( pt );

// hover on
if (hover && !this._states.hover) {
this.state('hover', true);

// enter trigger
UI._trigger( this._actions[UA.enter], this, pt, UA.enter);
UI._trigger( this._actions[UA.enter], this, pt, UA.enter, evt);

// listen for hover off
var _capID = this.hold( UA.move ); // keep hold of second move
Expand All @@ -343,7 +345,7 @@ export class UIButton extends UI {
if (!this._within( p ) && !this.state('dragging')) {
this.state('hover', false);
// leave trigger
UI._trigger( this._actions[UA.leave], this, pt, UA.leave);
UI._trigger( this._actions[UA.leave], this, pt, UA.leave, evt);
this.off( UA.move, this._hoverID); // remove second move listener
this.unhold( _capID ); // stop keeping hold of second move
}
Expand Down Expand Up @@ -436,7 +438,7 @@ export class UIDragger extends UIButton {
*/

// Handle pointer down and begin dragging
this.on( UA.down, (target:UI, pt:PtLike, type:string) => {
this.on( UA.down, (target:UI, pt:PtLike, type:string, evt: MouseEvent) => {
// begin listening for all events after dragging starts
if (this._moveHoldID === -1) {
this.state( 'dragging', true );
Expand All @@ -452,15 +454,15 @@ export class UIDragger extends UIButton {
if (this._draggingID === -1) {
this._draggingID = this.on( UA.move, (t:UI, p:PtLike) => {
if ( this.state('dragging') ) {
UI._trigger( this._actions[UA.uidrag], t, p, UA.uidrag );
UI._trigger( this._actions[UA.uidrag], t, p, UA.uidrag, evt );
this.state( 'moved', true );
}
});
}
});

// Handle pointer drop or up and end dragging
const endDrag = (target:UI, pt:PtLike, type:string) => {
const endDrag = (target:UI, pt:PtLike, type:string, evt:MouseEvent) => {
this.state('dragging', false);
// remove move listener
this.off(UA.move, this._draggingID);
Expand All @@ -476,7 +478,7 @@ export class UIDragger extends UIButton {
this._upHoldID = -1;
// trigger event
if ( this.state('moved') ) {
UI._trigger( this._actions[UA.uidrop], target, pt, UA.uidrop );
UI._trigger( this._actions[UA.uidrop], target, pt, UA.uidrop, evt );
this.state( 'moved', false );
}
};
Expand Down