2019-03-21 09:57:27 +01:00
/* globals Power0 */
/* eslint no-console: ["error", { allow: ["log", "info", "warn", "error"] }] */
/ * *
* Imports
* /
/ * *
* A class that can be used to perform automated user interface tests .
*
* @ example
* // Create the UITest object
* const test = new UITest ( {
* timeScale : 2
* } )
*
* // Add an action to the test case
* test . tap ( button , { eventType : 'click' } )
*
* // Start the test case
* test . start ( )
*
* @ class
* @ see { @ link https : //www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest}
* /
export default class UITest {
/ * *
* Creates an instance of an UITest .
*
* In the background , the class UITest uses the Greensock TimelineMax class . The opts object is passed directly to the TimelineMax class , so it can use any key that uses the TimelineMax class .
*
* @ constructor
* @ param { object } [ opts ] - An options object to specify the behaviour of the test case .
* @ param { number } [ opts . timeScale = 1 ] - The speed at which the test should run , see https : //greensock.com/docs/TimelineMax/timeScale().
* @ param { string } [ opts . eventType = auto ] - The type of events which should be used . Possible values : pointer , touch , mouse , auto . If set to auto , the eventType is set depending on the support of the browser used .
* @ param { boolean } [ opts . debug = false ] - If set to true , multiple informations will be print to the console .
* @ param { number } [ opts . defaultInterval ] - The interval used when no action is specified for an action .
* /
constructor ( opts = { } ) {
this . opts = Object . assign ( { } , {
timeScale : 1 ,
eventType : 'auto' ,
debug : false ,
defaultInterval : null
} , opts )
// timeline
//--------------------
this . _timeline = new TimelineMax ( Object . assign ( { } , {
paused : true
} , this . opts ) )
this . _timeline . timeScale ( this . opts . timeScale )
// eventType
//--------------------
if ( this . opts . eventType === 'auto' ) {
if ( window . PointerEvent ) {
this . opts . eventType = 'pointer'
} else if ( 'ontouchstart' in window ) {
this . opts . eventType = 'touch'
} else {
this . opts . eventType = 'mouse'
}
}
if ( this . opts . debug ) {
console . log ( ` Event type: ${ this . opts . eventType } ` )
}
this . _timelinePositions = [ 0 ]
this . _actions = 0
// setup
//-----------------
this . setup ( )
}
/ * *
* Generates the required structure .
*
* @ private
* @ return { UITest } A reference to the UITest for chaining .
* /
setup ( ) {
return this
}
/ * *
* Gets the Greensock TimelineMax object , used in the background of UITest .
*
* @ member { TimelineMax }
* /
get timeline ( ) {
return this . _timeline
}
/ * *
* Starts the test case and executes the corresponding statements in the specified order .
*
* @ return { UITest } A reference to the UITest for chaining .
* /
start ( ) {
this . _timeline . play ( )
return this
}
/ * *
* Stops the test case and stops executing any further instructions .
*
* @ return { UITest } A reference to the UITest for chaining .
* /
stop ( ) {
this . _timeline . pause ( )
return this
}
/ * *
* Clears all instructions of the test case .
*
* @ return { UITest } A reference to the UITest for chaining .
* /
clear ( ) {
this . _timeline . clear ( )
return this
}
/ * *
* Restarts the test case .
*
* @ return { UITest } A reference to the UITest for chaining .
* /
restart ( ) {
this . _timeline . restart ( )
return this
}
/ * *
* Executes a tap event ( pointerdown , pointerup ) on a specific element .
*
* @ param { HTMLElement | string } element - The HTML element on which the event is to be executed , e . g . button , document , h2 , canvas , etc . or an selector string . If a selector has been specified , it is evaluated immediately before the event is called using the querySelector method .
* @ param { number [ ] | object | PIXI . DisplayObject } [ position = The center of the element . ] - The local position of the event in the context of the specified HTML element . If no position is specified , the center of the HTML element is used . The position can be specified as an array of numbers , as an object with the two properties x and y , or as a PIXI . Display object .
* @ param { number } [ timelinePosition = One second after the last action . ] - The position in seconds when the event should be triggered , see shttps : //greensock.com/docs/TimelineMax/addCallback().
* @ param { object } [ opts ] - An options object to specify the behaviour of the action .
* @ param { function } [ opts . onStart ] - A function that runs after the first event is fired . Will not be fired if only one event is running ( for example , a click event ) . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { function } [ opts . onComplete ] - A function that runs after the second event is fired . Always fired , even if only one event is running ( for example , a click event ) . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { string [ ] } [ opts . eventTypes = [ 'pointerdown' , 'pointerup' ] ] - The event types to use . If no types are specified , the event types specified in the UITest constructor are used ( or auto if not specified ) .
* @ param { string } [ opts . eventType ] - If you want the tap method to fire only one event ( for example , a click event ) , you can specify the opts . eventType parameter . If eventType is not null , the parameter opts . eventTypes is ignored .
* @ param { Window | Frame } [ opts . context = window ] - The context within which the optionally specified element selector should be executed .
* @ param { boolean } [ opts . bubbles = true ] - The Event property bubbles indicates whether the event bubbles up through the DOM or not .
* @ param { boolean } [ opts . cancelable = true ] - Events ' cancelable property indicates if the event can be canceled , and therefore prevented as if the event never happened . If the event is not cancelable , then its cancelable property will be false and the event listener cannot stop the event from occurring .
* /
tap ( element , position , timelinePosition , opts = { } ) {
// arguments
//--------------------
[ position , timelinePosition , opts ] = this . reorderArguments ( arguments )
this . _timelinePositions . push ( timelinePosition )
// debug
//--------------------
if ( this . opts . debug ) console . log ( 'tap params' , { element , position , timelinePosition , opts } )
// opts
//--------------------
opts = Object . assign ( { } , {
onStart : null ,
onComplete : null ,
eventTypes : this . resolveEvents ( [ 'down' , 'up' ] ) ,
eventType : null ,
context : window ,
bubbles : true ,
cancelable : true
} , opts )
if ( opts . eventType ) {
opts . eventTypes = opts . eventType
}
opts . eventTypes = Array . isArray ( opts . eventTypes ) ? opts . eventTypes : [ opts . eventTypes ]
// timeline
//--------------------
this . _timeline . addCallback ( position => {
// element
//--------------------
const elem = Util . extractElement ( opts . context , element )
// position
//--------------------
if ( position === null ) {
const rect = elem . getBoundingClientRect ( )
position = [ rect . width / 2 , rect . height / 2 ]
}
// coords
//--------------------
const coords = Util . extractPosition ( position )
if ( this . opts . debug ) console . log ( 'local coords' , coords )
// eventTypes
//--------------------
if ( opts . eventTypes . length === 1 ) {
opts . eventTypes . unshift ( null )
}
// event opts
//--------------------
const eventOpts = { bubbles : opts . bubbles , cancelable : opts . cancelable }
if ( opts . eventTypes [ 0 ] ) {
// create and dispatch event
//--------------------
const eventStart = Event . create ( elem , coords , opts . eventTypes [ 0 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , eventStart )
elem . dispatchEvent ( eventStart )
// onStart
//--------------------
if ( opts . onStart ) {
opts . onStart . call ( this , eventStart )
}
}
// create and dispatch event
//--------------------
const eventComplete = Event . create ( elem , coords , opts . eventTypes [ 1 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , eventComplete )
elem . dispatchEvent ( eventComplete )
// onComplete
//--------------------
if ( opts . onComplete ) {
opts . onComplete . call ( this , eventComplete )
}
} , timelinePosition , [ position ] )
this . _actions ++
return this
}
/ * *
* Executes a pan event ( pointerdown , pointermove , pointerup ) on a specific element .
*
* @ param { HTMLElement | string } element - The HTML element on which the event is to be executed , e . g . button , document , h2 , canvas , etc . or an selector string . If a selector has been specified , it is evaluated immediately before the event is called using the querySelector method .
* @ param { number [ ] | object | PIXI . DisplayObject } [ position = The center of the element . ] - The local position of the event in the context of the specified HTML element . If no position is specified , the center of the HTML element is used . The position can be specified as an array of numbers , as an object with the two properties x and y , or as a PIXI . Display object .
* @ param { number } [ timelinePosition = One second after the last action . ] - The position in seconds when the event should be triggered , see shttps : //greensock.com/docs/TimelineMax/addCallback().
* @ param { object } [ opts ] - An options object to specify the behaviour of the action .
* @ param { function } [ opts . onStart ] - A function that runs after the first event is fired . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { function } [ opts . onUpdate ] - A function that runs after each execution of the second event . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { function } [ opts . onComplete ] - A function that runs after the third event is fired . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { number [ ] | object | PIXI . DisplayObject } [ opts . to = { x : 0 , y : 0 } ] - The target of the pan process . The position can be specified as an array of numbers , as an object with the two properties x and y , or as a PIXI . Display object .
* @ param { number } [ opts . duration = 1 ] - The duration of the pan animation in seconds , see https : //greensock.com/docs/TweenLite/duration().
* @ param { Ease } [ opts . ease = Power0 . easeNone ] - The easing of the pan animation , see https : //greensock.com/docs/Easing.
* @ param { string [ ] } [ opts . eventTypes = [ 'pointerdown' , 'pointermove' , 'pointerup' ] ] - The event types to use . If no types are specified , the event types specified in the UITest constructor are used ( or auto if not specified ) .
* @ param { Window | Frame } [ opts . context = window ] - The context within which the optionally specified element selector should be executed .
* @ param { boolean } [ opts . bubbles = true ] - The Event property bubbles indicates whether the event bubbles up through the DOM or not .
* @ param { boolean } [ opts . cancelable = true ] - Events ' cancelable property indicates if the event can be canceled , and therefore prevented as if the event never happened . If the event is not cancelable , then its cancelable property will be false and the event listener cannot stop the event from occurring .
* /
pan ( element , position , timelinePosition , opts = { } ) {
// arguments
//--------------------
[ position , timelinePosition , opts ] = this . reorderArguments ( arguments )
this . _timelinePositions . push ( timelinePosition )
// debug
//--------------------
if ( this . opts . debug ) console . log ( 'tap params' , { element , position , timelinePosition , opts } )
// opts
//--------------------
opts = Object . assign ( { } , {
onStart : null ,
onUpdate : null ,
onComplete : null ,
to : { x : 0 , y : 0 } ,
duration : 1 ,
ease : Power0 . easeNone ,
eventTypes : this . resolveEvents ( [ 'down' , 'move' , 'up' ] ) ,
context : window ,
bubbles : true ,
cancelable : true
} , opts )
// timeline
//--------------------
this . _timeline . addCallback ( position => {
// element
//--------------------
const elem = Util . extractElement ( opts . context , element )
// coords
//--------------------
const from = Util . extractPosition ( position )
// event opts
//--------------------
const eventOpts = { bubbles : opts . bubbles , cancelable : opts . cancelable }
const gsOpts = {
ease : opts . ease ,
onStart : ( ) => {
// create and dispatch event
//--------------------
const event = Event . create ( elem , from , opts . eventTypes [ 0 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , event )
elem . dispatchEvent ( event )
// onStart
//--------------------
if ( opts . onStart ) {
opts . onStart . call ( this , event )
}
} ,
onUpdate : ( ) => {
// create and dispatch event
//--------------------
const event = Event . create ( elem , from , opts . eventTypes [ 1 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , event )
elem . dispatchEvent ( event )
// onUpdate
//--------------------
if ( opts . onUpdate ) {
opts . onUpdate . call ( this , event )
}
} ,
onComplete : ( ) => {
// create and dispatch event
//--------------------
const event = Event . create ( elem , from , opts . eventTypes [ 2 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , event )
elem . dispatchEvent ( event )
// onComplete
//--------------------
if ( opts . onComplete ) {
opts . onComplete . call ( this , event )
}
}
}
// to
//--------------------
const object = Util . extractTo ( opts )
Object . assign ( gsOpts , object )
// drag animation
//--------------------
2019-03-28 09:37:30 +01:00
TweenLite . to ( from , opts . duration , gsOpts )
2019-03-21 09:57:27 +01:00
} , timelinePosition , [ position ] )
this . _actions ++
return this
}
/ * *
* Executes a pinch event ( pointerdown , pointermove , pointerup ) on a specific element with two "fingers" simultaneously .
*
* @ param { HTMLElement | string } element - The HTML element on which the event is to be executed , e . g . button , document , h2 , canvas , etc . or an selector string . If a selector has been specified , it is evaluated immediately before the event is called using the querySelector method .
* @ param { number [ ] | object | PIXI . DisplayObject } [ position = The center of the element . ] - The local position of the event in the context of the specified HTML element . If no position is specified , the center of the HTML element is used . The position can be specified as an array of numbers , as an object with the two properties x and y , or as a PIXI . Display object .
* @ param { number } [ timelinePosition = One second after the last action . ] - The position in seconds when the event should be triggered , see shttps : //greensock.com/docs/TimelineMax/addCallback().
* @ param { object } [ opts ] - An options object to specify the behaviour of the action .
* @ param { function } [ opts . onStart ] - A function that runs after the first events are fired . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { function } [ opts . onUpdate ] - A function that runs after each execution of the second events . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { function } [ opts . onComplete ] - A function that runs after the third events are fired . Receives the fired event object as the first parameter . The test case ( UITest ) is bound to this .
* @ param { boolean } [ opts . doubleCallbacks = false ] - The callbacks onStart , onUpdate and onComplete will be fired only for one finger . If set to true , the events will be fired for both fingers .
* @ param { number } [ opts . distance = 100 ] - The distance in pixels , how far the two "fingers" should move apart . If to or bezier specified , distance is ignored .
* @ param { number [ ] [ ] | object [ ] | PIXI . DisplayObject [ ] } [ opts . to ] - The targets of the pinch process . The position must be an array with two entries . An entry can be specified as an array of numbers , as an object with the two properties x and y , or as a PIXI . Display object . If bezier is specified , to is ignored .
* @ param { number [ ] [ ] | object [ ] | PIXI . DisplayObject [ ] } [ opts . bezier ] - The targets of the pinch process . The position must be an array with two entries . An entry may be an array of positions or a bezier object ( https : //greensock.com/docs/Plugins/BezierPlugin). A position in the array or the values array of the bezier object can be specified as an array of numbers, as an object with the two properties x and y, or as a PIXI.Display object. If bezier is specified, to is ignored.
* @ param { number } [ opts . duration = 1 ] - The duration of the pan animation in seconds , see https : //greensock.com/docs/TweenLite/duration().
* @ param { Ease } [ opts . ease = Power0 . easeNone ] - The easing of the pan animation , see https : //greensock.com/docs/Easing.
* @ param { string [ ] } [ opts . eventTypes = [ 'pointerdown' , 'pointermove' , 'pointerup' ] ] - The event types to use . If no types are specified , the event types specified in the UITest constructor are used ( or auto if not specified ) .
* @ param { Window | Frame } [ opts . context = window ] - The context within which the optionally specified element selector should be executed .
* @ param { boolean } [ opts . bubbles = true ] - The Event property bubbles indicates whether the event bubbles up through the DOM or not .
* @ param { boolean } [ opts . cancelable = true ] - Events ' cancelable property indicates if the event can be canceled , and therefore prevented as if the event never happened . If the event is not cancelable , then its cancelable property will be false and the event listener cannot stop the event from occurring .
* /
pinch ( element , position , timelinePosition , opts = { } ) {
// arguments
//--------------------
[ position , timelinePosition , opts ] = this . reorderArguments ( arguments )
this . _timelinePositions . push ( timelinePosition )
// debug
//--------------------
if ( this . opts . debug ) console . log ( 'tap params' , { element , position , timelinePosition , opts } )
// opts
//--------------------
opts = Object . assign ( { } , {
onStart : null ,
onUpdate : null ,
onComplete : null ,
doubleCallbacks : false ,
duration : 1 ,
distance : 100 ,
to : null ,
bezier : null ,
ease : Power0 . easeNone ,
eventTypes : this . resolveEvents ( [ 'down' , 'move' , 'up' ] ) ,
context : window ,
bubbles : true ,
cancelable : true
} , opts )
// timeline
//--------------------
this . _timeline . addCallback ( position => {
// element
//--------------------
const elem = Util . extractElement ( opts . context , element )
// from
//--------------------
let from1 = null
let from2 = null
if ( Array . isArray ( position ) && ! Util . isNumber ( position [ 0 ] ) ) {
from1 = Util . extractPosition ( position [ 0 ] )
from2 = Util . extractPosition ( position [ 1 ] )
} else {
from1 = Util . extractPosition ( position )
from2 = { x : from1 . x , y : from1 . y }
}
// to
//--------------------
let gsOpts1 = { }
let gsOpts2 = { }
if ( opts . to || opts . bezier ) {
[ gsOpts1 , gsOpts2 ] = Util . extractMultiTo ( opts )
} else {
const distance = opts . distance != null ? opts . distance : 100
gsOpts1 . x = from1 . x - distance / 2
gsOpts1 . y = from1 . y
gsOpts2 . x = from2 . x + distance / 2
gsOpts2 . y = from2 . y
}
// pointers
//--------------------
const pointers = new Map ( )
pointers . set ( 0 , { element : from1 , gsOpts : gsOpts1 } )
pointers . set ( 1 , { element : from2 , gsOpts : gsOpts2 } )
// loop
//--------------------
pointers . forEach ( ( value , key ) => {
// from
//--------------------
const from = value . element
// event opts
//--------------------
const eventOpts = { bubbles : opts . bubbles , cancelable : opts . cancelable , pointerId : key , isPrimary : key === 0 }
const gsOpts = {
ease : opts . ease ,
onStart : ( ) => {
// create and dispatch event
//--------------------
const event = Event . create ( elem , from , opts . eventTypes [ 0 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , event )
elem . dispatchEvent ( event )
// onStart
//--------------------
if ( opts . onStart && ( opts . doubleCallbacks || key === 0 ) ) {
opts . onStart . call ( this , event )
}
} ,
onUpdate : ( ) => {
// create and dispatch event
//--------------------
const event = Event . create ( elem , from , opts . eventTypes [ 1 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , event )
elem . dispatchEvent ( event )
// onUpdate
//--------------------
if ( opts . onUpdate && ( opts . doubleCallbacks || key === 0 ) ) {
opts . onUpdate . call ( this , event )
}
} ,
onComplete : ( ) => {
// create and dispatch event
//--------------------
const event = Event . create ( elem , from , opts . eventTypes [ 2 ] , eventOpts )
if ( this . opts . debug ) console . log ( 'dispatch event' , event )
elem . dispatchEvent ( event )
// onComplete
//--------------------
if ( opts . onComplete && ( opts . doubleCallbacks || key === 0 ) ) {
opts . onComplete . call ( this , event )
}
}
}
// to
//--------------------
Object . assign ( gsOpts , value . gsOpts )
// drag animation
//--------------------
2019-03-28 09:37:30 +01:00
TweenLite . to ( from , opts . duration , gsOpts )
2019-03-21 09:57:27 +01:00
} )
} , timelinePosition , [ position ] )
this . _actions ++
return this
}
// /**
// * Adds a tap event to the timeline.
// *
// * @return {UITest} A reference to the uitest for chaining.
// */
// rotate() {
// return this
// }
// /**
// * Adds a tap event to the timeline.
// *
// * @return {UITest} A reference to the uitest for chaining.
// */
// swipe() {
// return this
// }
// /**
// * Adds a tap event to the timeline.
// *
// * @return {UITest} A reference to the uitest for chaining.
// */
// press() {
// return this
// }
// /**
// * Adds a tap event to the timeline.
// *
// * @return {UITest} A reference to the uitest for chaining.
// */
// event() {
// return this
// }
/ * *
* Sorts the parameters so that the second , third , and fourth parameters can be optional ( and possibly slip forward ) .
*
* @ private
* @ param { arguments } params - The arguments which were passed to the function .
* @ returns { array } - Returns an array of the position , the timelinePosition and the opts object .
* /
reorderArguments ( params ) {
// first parameter
//--------------------
const element = params [ 0 ]
// other parameter
//--------------------
let position = null
let timelinePosition = null
let opts = null
// second parameter
//--------------------
if ( Util . isNumber ( params [ 1 ] ) ) {
timelinePosition = params [ 1 ]
} else if ( Util . isObject ( params [ 1 ] ) && ! Util . isPixiDisplayObject ( params [ 1 ] ) && ( params [ 1 ] . x == null || params [ 1 ] . y == null ) ) {
opts = params [ 1 ]
} else if ( params [ 1 ] != null ) {
position = params [ 1 ]
}
// third parameter
//--------------------
if ( Util . isNumber ( params [ 2 ] ) ) {
timelinePosition = params [ 2 ]
} else if ( Util . isObject ( params [ 2 ] ) ) {
opts = params [ 2 ]
}
// fourth parameter
//--------------------
if ( Util . isObject ( params [ 3 ] ) ) {
opts = params [ 3 ]
}
// defaults
//--------------------
if ( position === null ) {
// will later be filled...
}
if ( timelinePosition === null ) {
if ( this . opts . defaultInterval === null && this . _actions > 1 ) {
throw new Error ( 'No execution time was specified for this action, and a default interval was not set in the class constructor!' )
}
timelinePosition = Math . max ( ... this . _timelinePositions ) + ( this . opts . defaultInterval || 1 )
}
if ( opts === null ) {
opts = { }
}
return [ position , timelinePosition , opts ]
}
/ * *
* Converts event type shortcuts to real event names .
*
* @ private
* @ param { string [ ] } events - An array of event types .
* /
resolveEvents ( events ) {
const data = [ ]
if ( this . opts . eventType === 'pointer' ) {
events . forEach ( it => {
if ( it === 'down' ) {
data . push ( 'pointerdown' )
} else if ( it === 'move' ) {
data . push ( 'pointermove' )
} else if ( it === 'up' ) {
data . push ( 'pointerup' )
}
} )
} else if ( this . opts . eventType === 'touch' ) {
events . forEach ( it => {
if ( it === 'down' ) {
data . push ( 'touchstart' )
} else if ( it === 'move' ) {
data . push ( 'touchmove' )
} else if ( it === 'up' ) {
data . push ( 'touchend' )
}
} )
} else {
events . forEach ( it => {
if ( it === 'down' ) {
data . push ( 'mousedown' )
} else if ( it === 'move' ) {
data . push ( 'mousemove' )
} else if ( it === 'up' ) {
data . push ( 'mouseup' )
}
} )
}
return data
}
}
/ * *
* Helper class .
*
* @ example
* // Checks if a thing is a number.
* const num = Util . isNumber ( 20 )
*
* @ private
* @ ignore
* @ class
* /
class Util {
/ * *
* Resolves the element from a specific context .
*
* @ static
* @ param { Window | Frame } context - The context within which the optionally specified element selector should be executed .
* @ return { HTMLElement | string } element - The HTML element on which the event is to be executed , e . g . button , document , h2 , canvas , etc . or an selector string . If a selector has been specified , it is evaluated immediately before the event is called using the querySelector method .
* /
static extractElement ( context , element ) {
const cont = Util . isFrame ( context ) ? context . contentDocument : context . document
const elem = Util . isString ( element ) ? cont . querySelector ( element ) : element
return elem
}
/ * *
* Extracts the position of the second parameter .
*
* @ static
* @ param { object } object - Something were the coords should be extracted .
* @ return { object } - Returns an object with the keys x and y .
* /
static extractPosition ( object ) {
// event coords
//--------------------
const position = { x : 0 , y : 0 }
// get the position
//--------------------
if ( ! object ) {
position . x = 0
position . y = 0
} else if ( typeof object . getBounds === 'function' ) {
const bounds = object . getBounds ( )
position . x = bounds . x + bounds . width / 2
position . y = bounds . y + bounds . height / 2
} else if ( Array . isArray ( object ) ) {
position . x = object [ 0 ]
position . y = object [ 1 ]
} else if ( object . x != null && object . y != null ) {
position . x = object . x
position . y = object . y
}
return position
}
/ * *
* Extracts the to or bezier key .
*
* @ static
* @ param { object } opts - An options object where to or bezier should be extracted .
* @ return { object } - Returns an object with the to or bezier keys .
* /
static extractTo ( opts ) {
const object = { }
if ( opts . bezier ) {
let bezier = null
if ( Array . isArray ( opts . bezier ) ) {
bezier = {
values : opts . bezier . map ( it => Util . extractPosition ( it ) ) ,
type : 'thru'
}
} else {
opts . bezier . values = opts . bezier . values . map ( it => Util . extractPosition ( it ) )
bezier = opts . bezier
}
object . bezier = bezier
} else {
const to = Util . extractPosition ( opts . to )
object . x = to . x
object . y = to . y
}
return object
}
/ * *
* Extracts multiple to or bezier keys .
*
* @ static
* @ param { object } opts - An options object where to or bezier should be extracted .
* @ return { object [ ] } - Returns an array of objects with the keys x and y .
* /
static extractMultiTo ( opts ) {
const objects = [ ]
if ( opts . bezier ) {
opts . bezier . forEach ( it => {
let bezier = null
if ( Array . isArray ( it ) ) {
bezier = {
values : it . map ( it => Util . extractPosition ( it ) ) ,
type : 'thru'
}
} else {
it . values = it . values . map ( it => Util . extractPosition ( it ) )
bezier = it
}
objects . push ( {
bezier
} )
} )
} else {
opts . to . forEach ( it => {
const to = Util . extractPosition ( it )
objects . push ( {
x : to . x ,
y : to . y
} )
} )
}
return objects
}
/ * *
* Checks if a thing is a string .
*
* @ static
* @ param { object } object - The object to test for .
* @ return { boolean } - true if the thing is a string , otherwise false .
* /
static isString ( object ) {
return typeof object === 'string'
}
/ * *
* Checks if a thing is a number .
*
* @ static
* @ param { object } object - The object to test for .
* @ return { boolean } - true if the thing is a number , otherwise false .
* /
static isNumber ( object ) {
return typeof object === 'number'
}
/ * *
* Checks if a thing is an object .
*
* @ static
* @ param { object } object - The object to test for .
* @ return { boolean } - true if the thing is an object , otherwise false .
* /
static isObject ( object ) {
return typeof object === 'object' && ! Array . isArray ( object )
}
/ * *
* Checks if a thing is an PIXI . DisplayObject .
*
* @ static
* @ param { object } object - The object to test for .
* @ return { boolean } - true if the thing is a PIXI . DisplayObject , otherwise false .
* /
static isPixiDisplayObject ( object ) {
return typeof object . getBounds === 'function' && typeof object . renderWebGL === 'function' && typeof object . setTransform === 'function'
}
/ * *
* Checks if a thing is a frame .
*
* @ static
* @ param { object } object - The object to test for .
* @ return { boolean } - true if the thing is a frame , otherwise false .
* /
static isFrame ( object ) {
return object . contentDocument != null
}
}
/ * *
* Event helper class .
*
* @ example
* // Creates an event object.
* const event = Event . create ( h2 , { x : 5 , y : 10 } , 'touchstart' )
*
* @ private
* @ ignore
* @ class
* /
class Event {
/ * *
* Creates an event object .
*
* @ static
* @ param { HTMLElement } target - The element on which the event should be executed .
* @ param { object } position - The local position of the event in relation to the target . The object must have the keys x and y .
* @ param { string } type - The type of the event , see https : //developer.mozilla.org/de/docs/Web/Events
* @ param { object } opts - An options object . Every paramter of the event object can be overridden , see e . g . https : //developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties.
* /
static create ( target , position = { x : 0 , y : 0 } , type = 'pointerup' , opts = { } ) {
const rect = typeof target . getBoundingClientRect === 'function' ? target . getBoundingClientRect ( ) : { x : 0 , y : 0 }
// EventInit
const eventOpts = {
bubbles : true ,
cancelable : true ,
composed : false
}
// UIEventInit
const uiEventOpts = {
detail : 0 ,
view : window
}
// MouseEvent
const mouseEventOpts = {
2019-07-08 15:44:06 +02:00
screenX : window . screenX + ( target . offsetLeft || 0 ) + position . x ,
screenY : window . screenY + ( target . offsetTop || 0 ) + position . y ,
2019-03-21 09:57:27 +01:00
clientX : rect . x + position . x ,
clientY : rect . y + position . y ,
ctrlKey : false ,
shiftKey : false ,
altKey : false ,
metaKey : false ,
button : 0 ,
buttons : 1 ,
relatedTarget : null ,
region : null
}
// TouchEvent
const touchEventOpts = {
touches : [ ] ,
targetTouches : [ ] ,
changedTouches : [ ] ,
ctrlKey : false ,
shiftKey : false ,
altKey : false ,
metaKey : false
}
// PointerEvent
const pointerEventOpts = {
pointerId : 0 ,
width : 1 ,
height : 1 ,
pressure : 0 ,
tangentialPressure : 0 ,
tiltX : 0 ,
tiltY : 0 ,
twist : 0 ,
pointerType : 'touch' ,
isPrimary : true
}
if ( type . startsWith ( 'pointer' ) ) {
return new PointerEvent ( type , Object . assign ( { } , eventOpts , uiEventOpts , mouseEventOpts , pointerEventOpts , opts ) )
} else if ( type . startsWith ( 'touch' ) ) {
return new TouchEvent ( type , Object . assign ( { } , eventOpts , uiEventOpts , touchEventOpts , opts ) )
} else {
return new MouseEvent ( type , Object . assign ( { } , eventOpts , uiEventOpts , mouseEventOpts , opts ) )
}
}
}
