ZaneDev/JiboOs
1
0
Fork 0
forked from Jibo-Revival-Group/JiboOs
Code Pull Requests Activity

initial commit

Browse Source
This commit is contained in:
Kevin
2026-03-16 13:53:01 +02:00
parent 631dc7df36
commit 81e6e0a7a2
23381 changed files with 8224173 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
docs/rendering/gui/Component.js Normal file
View File

@@ -0,0 +1,291 @@
/**
* @interface jibo.face.views.Component~ComponentOptions
* @description Interface - Configuration values for creating a Component.
* @prop {String} [id] - Identifier for component.
* @prop {String} [type] - Type of component.
* @prop {jibo.face.views~AssetDescriptor[]} [assets] - List of required asset descriptors.
* @prop {jibo.face.views~ActionDescriptor} [action] - Action triggered when user interacts with the component.
* @prop {jibo.face.views~ActionDescriptor[]} [actions] - List of possible actions for the interactions with the component.
*/
/**
* Base component class for GUI elements.
* @class Component
* @extends EventEmitter
* @memberof jibo.face.views
* @abstract
*/
/**
* String used for identification, each Component within a
* ComponentGroup should have a unique id to help with retrieval.
* @name jibo.face.views.Component#id
* @type {String}
*/
/**
* Reference to the parent group of this Component.
* @name jibo.face.views.Component#parentGroup
* @type {jibo.face.views.ComponentGroup}
*/
/**
* Reference to the top most parent group of this Component, which is a View.
* @name jibo.face.views.Component#_parentView
* @type {jibo.face.views.View}
* @private
*/
/**
* Subcomponent to handles interactive aspects of Component.
* Manages actions and their gesture association.
* @name jibo.face.views.Component#_touchInteractivity
* @type {jibo.face.views.TouchInteractive}
* @private
*/
/**
* Set to `true` class has changed its
* state in a way that needs to be recorded between Views (e.g when a
* list moves from one page to another).
* @name jibo.face.views.Component#stateChanged
* @type {Boolean}
* @default false
* @readOnly
*/
/**
* The Component type. Should equal the Class name.
* In some case, `type` may not be equal to Class name if you're using variants.
* Variants allow for different behavior within the class without having to extend it.
* @name jibo.face.views.Component#type
* @type {String}
* @readOnly
*/
/**
* Holds Subcomponents.
* @name jibo.face.views.Component#_subcomponents
* @type {{jibo.face.views.Subcomponent}}
* @private
*/
/**
* Flag determining whether to respond to input.
* @name jibo.face.views.Component#inputLocked
* @type {Boolean}
*/
/**
* Return array of objects that describe assets to be loaded.
* Refer to {@link jibo.loader} for documentation.
* @name jibo.face.views.Component#assetDescriptors
* @type {jibo.face.views~AssetDescriptor[]}
* @readOnly
*/
/**
* Get the View the Component is ultimately parented to.
* @name jibo.face.views.Component#parentView
* @type {jibo.face.views.View}
* @readOnly
*/
/**
* Add a Subcomponent.
* @method jibo.face.views.Component#addSubcomponent
* @param {jibo.face.views.Subcomponent} subcomponent - Subcomponent to add.
* @returns {jibo.face.views.Subcomponent} Subcomponent added.
*/
/**
* Retrieve a Subcomponent.
* @method jibo.face.views.Component#getSubcomponent
* @param {string} type - Type of SubComponent, can access type statically from class like Subcomponent.TYPE.
* @returns {jibo.face.views.Subcomponent} Subcomponent matching given type, otherwise null.
*/
/**
* Applies data contained within the given `configData` object (generally derived
* from JSON) to the class. Override this method to configure further.
* data and/or make manual additions to the class's variables.
* @method jibo.face.views.Component#assignConfig
* @param {Object} configData The configuration object for the Component.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Takes initial config Object that was provided to define class and updates it
* with any necessary values regarding any new `state` of the component.
* Returns the updated Object, though it shouldn't be necessary to reassign
* the returned Object, since generally the updated values are assigned through `Object.assign`
* to merge new values into original.
* @method jibo.face.views.Component#updateConfig
* @param {Object} configObject The configuration Object for the Component.
* @abstract
*/
/**
* To be overridden, should create DisplayObjects from given assets and add the
* to stage via the given container.
* @method jibo.face.views.Component#createDisplay
* @param {PIXI.Container} container Parent container, which all DisplayObject
* created within this Component should be added to.
* @param {Object} [assets] Object passed back from loader namespace load method.
* Refer to {@link jibo.loader} for details.
* @abstract
*/
/**
* Register with the parent group to enter the update loop.
* If `true` registers for update, if `false` unregisters for update.
* @method jibo.face.views.Component#registerUpdate
* @param {Boolean} bool Flag to register or unregister with update.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Frame enter loop update.
* @method jibo.face.views.Component#update
* @param {number} elapsed Time in milliseconds since the last frame update.
* @abstract
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Cleanup method to assist with garbage collection.
* @method jibo.face.views.Component#destroy
*/
/**
* Called by parent ComponentGroup once parent has finished its loading and setup.
* Allows opportunity to do additional setup that may depend on other components.
*
* ATTENTION : This should not be called directly, the parent View {@link jibo.face.views.View}
* will call this, which will recurse through Component tree.
* @method jibo.face.views.Component#ready
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Method for `open` transition, override to custom how Component opens.
* Method is responsible for calling the callback in all situations as
* the parent ComponentGroup is waiting for all children to trigger the callback in oder to complete.
*
* ATTENTION : This should not be called directly, {@link jibo.face.views}
* will manage when Components should close during the view process.
* @method jibo.face.views.Component#open
* @param {Function} callback Function to be called once open is complete.
* @param {String} transitionType String used to determine way Component opens.
* Refer to {@link jibo.face.views} for constants used
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Method for `close` transition, override to custom how Component opens.
* Method is responsible for calling the callback in all situations as
* the parent ComponentGroup is waiting for all children to trigger the callback in oder to comple
*
* ATTENTION : This should not be called directly, {@link jibo.face.views}
* will manage when Components should close during the view process.
* @method jibo.face.views.Component#close
* @param {Function} callback Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way Component closes.
* Refer to {@link jibo.face.views} for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
*/
/**
* Manually add an asset descriptor via parameters.
* Refer to {@link jibo.loader} for documentation.
* @method jibo.face.views.Component#addAssetDescriptor
* @param {String} id The id for the asset, ids must be unique, otherwise they will override each other.
* @param {String} src The source path of the asset to be loaded
* @param {String} type The type of asset to load. Refer to {@link jibo.loader} for valid types.
* @param {Boolean} [upload = false] Flag determining if asset should be loaded to the CPU as part of the load process.
* @param {String} [cache] - Cache asset is associated with. Will use the loader's current cache unless otherwise specified.
* @returns {Object} Asset descriptor added
*/
/**
* Manually add an asset descriptor object. Refer to {@link jibo.loader} for documentation on format.
* @method jibo.face.views.Component#addAssetDescriptorObject
* @param {jibo.face.views~AssetDescriptor} assetDescriptor See {@link jibo.loader} for asset format.
* @returns {Object} Asset descriptor object added.
*/
/**
* Component has interactivity.
* NOTE: Possible that interactivity is not active, will still return `true` in this case.
* @name jibo.face.views.Component#hasTouchInteractive
* @type {Boolean}
* @readOnly
*/
/**
* Whether Component has interactivity and it is active.
* @name jibo.face.views.Component#isTouchInteractive
* @type {Boolean}
* @readOnly
*/
/**
* Add a {@link jibo.face.views.ActionData} and associate it with given gesture.
* Generally these actions are triggered on a screen press (if a screen press is set up).
* Adding an action adds interactivity to the Component.
* @method jibo.face.views.Component#addAction
* @param {jibo.face.views.ActionData | string} action - The action to be triggered on click,
* can pass the ActionData or provide the action type
* @param {any} [data] - The data Object for the action, generally used if passing the action type.
* @param {boolean} [clearPrevious = false] Flag to determine if we should clear out the existing actions.
* @param {boolean} [toFront = false] If `true` adds action to front of actions list, causing it to be called first when actions are triggered.
* @param {jibo.face.views.GESTURE} [gesture = tap] - Type of gesture the actions are associated with.
* @returns {jibo.face.views.ActionData} The ActionData added.
*/
/**
* Clear all actions associated with given gesture type.
* @method jibo.face.views.Component#clearActions
* @param {jibo.face.views.GESTURE} [gesture = tap] - Type of gesture the actions ae associated with.
*/
/**
* Remove all actions of given type associated with given gesture.
* @method jibo.face.views.Component#removeActionsByType
* @param {string} actionType - Type of ActionData to remove.
* @param {jibo.face.views.GESTURE} [gesture = tap] - Type of gesture the actions are associated with.
*/
/**
* Trigger actions associated with given gesture type.
* Calls Component or the Component parent's actionHandler for each action.
* @method jibo.face.views.Component#triggerActions
* @param {jibo.face.views.GESTURE} [gesture = tap] - Type of gesture the actions are associated with.
* @return {boolean} `true` if at least one action was triggered.
*/
/**
* Get actions associated with given gesture type.
* @method jibo.face.views.Component#getActions
* @param {jibo.face.views.GESTURE} [gesture = tap] - Type of gesture the actions ae associated with.
* @return {jibo.face.views.ActionData[]} Array of actions.
*/
/**
* Returns `true` if there are actions associated with given gesture type.
* @method jibo.face.views.Component#hasActions
* @param {jibo.face.views.GESTURE} [gesture = tap] - Gesture actions related to.
* @return {boolean} `true` if actions found for given gesture type.
*/
/**
* Turn interactivity on and off.
* @method jibo.face.views.Component#lockInput
* @param {Boolean} flag - Flag to turn interactivity on or off.
*/

94
docs/rendering/gui/ComponentCreator.js Normal file
View File

@@ -0,0 +1,94 @@
/**
* Instance used for singleton.
* @name jibo.face.views.ComponentCreator._instance
* @type {jibo.face.views.ComponentCreator}
* @private
*/
/**
* Hash table for registered classes.
* To be able to create Classes dynamically must first keep reference to them
* that can later be retrieved by key value pairing.
* @name jibo.face.views.ComponentCreator#_classRegistry
* @type {any}
* @private
*/
/**
* Default view to create if none is specified in creation methods.
* @name jibo.face.views.ComponentCreator.DEFAULT_VIEW
* @type {String}
* @default 'View'
* @readonly
* @private
*/
/**
* Create a View from its class and configuration data.
* @method jibo.face.views.ComponentCreator#createView
* @param {any} [viewClass] Can be the class Object or the string name of the class (name must match class names in registry).
* @param {any} [config] Can config as an Object or a string of the path the JSON config file.
* @returns {jibo.face.views.View} The View created.
*/
/**
* Creates a view from a config.
* @method jibo.face.views.ComponentCreator#createViewFromConfigObject
* @param {Object} config The configuration Object for the Component.
* @returns {jibo.face.views.View} The View created.
*/
/**
* Create a View from its configuration path.
* This process requires a load, the {@link jibo.face.views.View} will be returned within the given callback
* @method jibo.face.views.ComponentCreator#createViewFromConfigPath
* @param {String} configPath Path to the configuration file defining the View to create.
* @param {jibo.face.views~ViewCallback} complete Callback called once when View is created.
* @param {Function} [failure] Callback called if View fails to be created.
*/
/**
* Creates a {@link jibo.face.views.ViewState} that represent a {@link jibo.face.views.View}.
* ComponentCreator keeps a registry of known View classes, which allows the classes to be constructed.
* @method jibo.face.views.ComponentCreator#createViewState
* @param {Object|String} viewClass Can be View class or string name of View class.
* @param {Object|String} [config] Can be configuration Object or the path to JSON config file.
* @returns {jibo.face.views.ViewState} The created ViewState.
*/
/**
* Create a {@link jibo.face.views.View} from a {@link jibo.face.views.ViewState}.
* @method jibo.face.views.ComponentCreator#createViewFromState
* @param {jibo.face.views.ViewState} viewState The ViewState associated with the View to create.
* @returns {jibo.face.views.View} The created View.
*/
/**
* Create a {@link jibo.face.views.Component} from configuration data.
* @method jibo.face.views.ComponentCreator#createComponentFromConfig
* @param {Object} componentConfig Configuration Object for the Component, generally derived from JSON.
* @returns {jibo.face.views.Component} The Component defined by the configuration Object.
*/
/**
* Register class so it can be referenced later for dynamic creation.
* A `key` must be provided to retrieve the class, if none is provided
* then the method looks for a `DEFAULT_TYPE` property on the class.
* When creating a custom class it is helpful to define `DEFAULT_TYPE`.
* This `key` is also used within the JSON configuration to specify the component Class.
* @method jibo.face.views.ComponentCreator#registerClass
* @param {any} componentClass The Class to register. Class must be or extend {@link jibo.face.views.View}.
* @param {String} [classType] If specified the given string will be used as the registry key,
* otherwise registry key is derived from the Class's name.
* classNameOverride allows for multiple registries for the same Class,
* which can be used for type variation within the same Class.
* @example
* static public static get DEFAULT_TYPE():string {return 'YourClassName';}
*/
/**
* Unregister a class from the class registry.
* Pass the 'key' used to register the class.
* @method jibo.face.views.ComponentCreator#unregisterClass
* @param {String} [classType] The string used to identify the class, often this is defined by the class via DEFAULT_TYPE
*/

265
docs/rendering/gui/ComponentGroup.js Normal file
View File

@@ -0,0 +1,265 @@
/**
* DO NOT ADD TO DIRECTLY
*
* Object serving as hash table for child Components using the Component's id variable as a key.
* To add components use [addComponent()]{@link jibo.face.views.ComponentGroup#addComponent}
* @name jibo.face.views.ComponentGroup#componentLibrary
* @type {Object}
* @protected
*/
/**
* DO NOT ADD TO DIRECTLY
*
* Array of child Components.
* To add components use [addComponent()]{@link jibo.face.views.ComponentGroup#addComponent}
* @name jibo.face.views.ComponentGroup#componentList
* @type {jibo.face.views.Component[]}
* @protected
*/
/**
* DO NOT WRITE DIRECTLY
*
* Array of config Objects (generally derived from JSON).
* Gets defined within various creation methods.
* @name jibo.face.views.ComponentGroup#componentConfigs
* @type {any[]}
* @protected
*/
/**
* Container for displays, is set within [createDisplay()]{@link jibo.face.views.Component#createDisplay}
* which receives the container as a parameter.
* @name jibo.face.views.ComponentGroup#container
* @type {PIXI.Container}
* @protected
*/
/**
* List of Components that have registered to be updated.
* @name jibo.face.views.ComponentGroup#_updateRegistry
* @type {jibo.face.views.Component[]}
* @private
*/
/**
* Get the number of child components.
* @name jibo.face.views.ComponentGroup#componentsTotal
* @type {number}
* @readOnly
*/
/**
* List of assets required by the ComponentGroup and its Component children.
* Compiles list of all assets on each call.
* @name jibo.face.views.ComponentGroup#assetDescriptors
* @type {jibo.face.views~AssetDescriptor[]}
* @readOnly
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Compiles together required assets for the ComponentGroup and its children.
* @name jibo.face.views.ComponentGroup#groupAssetDescriptors
* @type {jibo.face.views~AssetDescriptor[]}
* @readonly
* @protected
*/
/**
* Turn the interactivity of the child components off or on.
* @method jibo.face.views.ComponentGroup#lockInput
* @param {boolean} flag - Flag to turn interactivity on or off.
*/
/**
* Turn the interactivity of the child components off or on.
* @method jibo.face.views.ComponentGroup#lockChildInput
* @param {boolean} flag - Flag to turn interactivity on or off.
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Update configuration Object to reflect the current configuration state.
* This ensures that when the Component is recreated from its configuration it reflects its last state.
* @method jibo.face.views.ComponentGroup#updateConfig
* @param {Object} configObject Configuration Object to update.
* @returns {any} The given configuration Object with any required values updates applied.
*/
/**
* Add component to this ComponentGroup, allows parent and child to reference to each other.
* @method jibo.face.views.ComponentGroup#addComponent
* @param {jibo.face.views.Component} component The Component to add this group's component list and library.
* @param {String} [componentId] The id to assign to the Component, if specified will overwrite existing id,
* if none is specified an id will be automatically generated and assigned.
* @returns {jibo.face.views.Component} The given Component.
*/
/**
* Get index of Component within the ComponentGroup's component list.
* @method jibo.face.views.ComponentGroup#getIndexOfComponent
* @param {jibo.face.views.Component} component - Component to check for index.
* @returns {number} Index of the Component in the component list
*/
/**
* Remove ComponentGroup's reference to a Component.
* This does not destroy the Component or remove its assets from the manifest.
* It only removes it from the ComponentGroup array and hash that reference it.
* @method jibo.face.views.ComponentGroup#removeComponent
* @param {jibo.face.views.Component|Number|String} componentDeterminer Provide Component, index of component, or id of component to remove.
* @returns {jibo.face.views.Component} The Component being removed.
*/
/**
* Retrieve a child Component by its id.
* @method jibo.face.views.ComponentGroup#getComponentById
* @param {String} componentId The ID of the component to retrieve.
* @returns {jibo.face.views.Component} The retrieved component.
*/
/**
* Retrieve a child Component by its index.
* @method jibo.face.views.ComponentGroup#getComponentByIndex
* @param {number} index The index of the component to retrieve.
* @returns {jibo.face.views.Component} The retrieved component.
*/
/**
* Returns first component found in Component tree that returns `true` for given test.
* Iterates downward, breadth-first search, starting from this ComponentGroup.
* @method jibo.face.views.ComponentGroup#findComponent
* @param {Function} testFunction - Function must take a Component parameter and return a boolean,
* passing an additional Object to test against is optional.
* @param {any} [against] - Object to test against.
* @return {jibo.face.views.Component} First Component found that the testFunction return `true` for.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Frame enter loop update.
* Calls update method of any child that has registered for updates.
* @method jibo.face.views.ComponentGroup#update
* @param {number} elapsed Time in milliseconds since the last frame update.
*/
/**
* Register for the given component's update method to be called.
* @method jibo.face.views.ComponentGroup#registerComponentUpdate
* @param {jibo.face.views.Component} component The component to update.
*/
/**
* Stop the given component's update method from getting called.
* @method jibo.face.views.ComponentGroup#unregisterComponentUpdate
* @param {jibo.face.views.Component} component The Component to stop providing updates to.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Create this Component's display as well as calling createDisplay on all child Components.
* This method should should 'visualize' the component, creating DisplayObjects and adding them the container.
* @method jibo.face.views.ComponentGroup#createDisplay
* @param {PIXI.Container} container Is ultimately a child of the stage.
* @param {any} assets Object passed back from loader namespace load method,
* refer to loader namespace within jibo for details.
*/
/**
* Called by parent ComponentGroup once parent has finished its loading and setup,
* calls ready on all child Components.
* Allows opportunity to do additional setup that may depend on other components.
*
* ATTENTION: This should not be called directly; the top level [View]{@link jibo.face.views.View}
* will call this, which will recurse through Component tree.
* @method jibo.face.views.ComponentGroup#ready
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Method for `open` transition.
* Iterates through components and calls their open method.
* Method is responsible for calling the callback in all situations.
*
* ATTENTION : This should not be called directly; {@link jibo.face.views}
* will manage when Components should open during the view process.
* @method jibo.face.views.ComponentGroup#open
* @param {Function} callback Function to be called once open is complete.
* @param {String} transitionType String used to determine way Component opens,
* refer to ViewManager for constants used
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Method for `close` transition.
* Iterates through components and calls their close method.
* Method is responsible for calling the callback in all situations.
*
* ATTENTION : This should not be called directly; {@link jibo.face.views}
* will manage when Components should close during the view process.
* @method jibo.face.views.ComponentGroup#close
* @param {Function} callback Function to be called once close is complete.
* @param {String} [transitionType] String used to determine way Component closes,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
*/
/**
* Call open method on all component children.
* Iterates through components and calls their open method, passing given transitionType.
* Method is responsible for calling the callback in all situations.
* @method jibo.face.views.ComponentGroup#openChildren
* @param {Function} callback Function called once all component children have completed their open.
* @param {String} transitionType Transition type passed to all component children.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @protected
*/
/**
* Call close method on all component children.
* Iterates through components and calls their close method.
* Method is responsible for calling the callback in all situations.
* @method jibo.face.views.ComponentGroup#closeChildren
* @param {Function} callback Function called once all component children have completed their close.
* @param {String} transitionType Transition type passed to all component children.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @protected
*/
/**
* Method to bubble actions up from Components.
* Actions pass through this method up to next ComponentGroup parent, ultimately reaching the ViewManager.
* Passing action up through parents allows each to augment or block the action if desired.
* @method jibo.face.views.ComponentGroup#actionHandler
* @param {jibo.face.views.ActionData} action Contains string for type of action and data Object
* with any pertinent data dependent on action type.
* @param {jibo.face.views.Component} [fromComponent] The component that triggered the action (if applicable).
*/
/**
* Method to pass actions downward to Components.
* Passing actions through parent chain allows parents to interrupt and augment actions.
* @method jibo.face.views.ComponentGroup#actionEnactor
* @param {jibo.face.views.ActionData} action Contains string for type of action and data Object
* with any pertinent data dependent on action type.
* @return {boolean} `true` if action is acted on by this ComponentGroup or any of its ComponentGroup children.
*/
/**
* Handler for when transitions are all complete.
* @method jibo.face.views.ComponentGroup#transitionComplete
* @param {Function} callback The callback triggered once all components have completed their transitions.
* @param {Error} [err] Error returns if there is an issue with the asynchronous method.
* @param {any[]} [results] Results returned from asynchronous method, will be empty.
* @private
*/

24
docs/rendering/gui/DisplayUtils.js Normal file
View File

@@ -0,0 +1,24 @@
/**
* Get the uniform scale required for DisplayObject to fit given dimensions.
* @method jibo.face.DisplayUtils#getScaleByWidthHeight
* @param {PIXI.DisplayObject} displayObject - DisplayObject to get the scale for.
* @param {number} width - Target width.
* @param {number} height - Target height.
* @returns {number} Uniform scale to apply to given DisplayObject for it to fit given dimension.
*/
/**
* Check whether display if contained by another display.
* @method jibo.face.DisplayUtils#isContained
* @param {PIXI.DisplayObject} display - DisplayObject checking for containment.
* @param {PIXI.Container} container - Container to check if display is contained within.
* @returns {boolean} `true` if display is contained within container.
*/
/**
* Takes position value provided for the element and makes sure that it is positioned properly + processes LEFT/RIGHT/CENTER/TOP/BOTTOM alignment options
* Remember, that RIGHT/BOTTOM alignment does not include actual element bounds, this should be handled separately
* @method jibo.face.DisplayUtils#getElementPosition
* @param {Object} position - Position data for the element
* @returns {PIXI.Point} Contains proper point value of the element on the screen
*/

282
docs/rendering/gui/TouchManager.js Normal file
View File

@@ -0,0 +1,282 @@
/**
* @typedef jibo.face.views~GESTURE
* @description Static class with static members that describe possible types of gestures
* @prop TAP Gesture type for a single tap
* @prop SWIPE_DOWN Gesture type for a swipe down
* @prop SWIPE Old name for SWIPE_DOWN
* @prop SWIPE_UP Gesture type for a swipe up
* @prop PAN Gesture type for a pan.
*/
/**
* Gets singleton instance of TouchManager.
* @name jibo.face.views.TouchManager#instance
* @type {jibo.face.views.TouchManager}
* @readonly
*/
/**
* Instance used for singleton.
* @name jibo.face.views.TouchManager._instance
* @type {jibo.face.views.TouchManager}
* @private
*/
/**
* Threshold of movemnent between gesture types.
* @type {number}
* @name jibo.face.views.TouchManager.THRESHOLD
* @readOnly
* @private
*/
/**
* Pixi interaction manager reference.
* @type {PIXI.interation.TouchManager}
* @name jibo.face.views.TouchManager#_interactionManager
* @private
*/
/**
* Reference to canvas element.
* @type {Object}
* @name jibo.face.views.TouchManager#_canvas
* @private
*/
/**
* Reference to GestureManager instance.
* @type {jibo.face.GestureManager}
* @name jibo.face.views.TouchManager#_gestureManager
* @private
*/
/**
* Reference to ViewManager instance.
* @type {jibo.face.views}
* @name jibo.face.views.TouchManager#_viewManager
* @private
*/
/**
* Reference to the tap gesture.
* @name jibo.face.views.TouchManager#_tapGesture
* @type {HammerJS.Tap}
* @private
*/
/**
* Reference to the swipe down gesture.
* @name jibo.face.views.TouchManager#_swipeDownGesture
* @type {HammerJS.Swipe}
* @private
*/
/**
* Reference to the swipe up gesture.
* @name jibo.face.views.TouchManager#_swipeUpGesture
* @type {HammerJS.Swipe}
* @private
*/
/**
* Reference to the pan horizontal gesture.
* @name jibo.face.views.TouchManager#_panHorizontalGesture
* @type {HammerJS.Pan}
* @private
*/
/**
* Object (PIXI.interaction.InteractionEvent) used to pass input position for PIXI hit testing.
* @name jibo.face.views.TouchManager#_interactionEvent
* @type {any}
* @private
*/
/**
* Holds reference to element most recently hit.
* @name jibo.face.views.TouchManager#_elementHit
* @type {jibo.face.views.Element}
* @private
*/
/**
* Flag for whether in simulator or not.
* @name jibo.face.views.TouchManager#_isSim
* @type {boolean}
* @private
*/
/**
* Value holding the latest X coordinate when emulating panning.
* @name jibo.face.views.TouchManager#_prevX
* @type {Number}
* @private
*/
/**
* Value holding the latest Y coordinate when emulating panning.
* @name jibo.face.views.TouchManager#_prevY
* @type {Number}
* @private
*/
/**
* Flag indicating current state of pan emulation.
* @name jibo.face.views.TouchManager#_isEmulatingPan
* @type {boolean}
* @private
*/
/**
* Flag indicating whether user has his finger on the screen
* This flag is set only on real Jibo and only by core event listener
* @name jibo.face.views.TouchManager#_isMouseDown
* @type {boolean}
* @private
*/
/**
* Remove gesture by type.
* @method jibo.face.views.TouchManager#addGesture
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] - type of gesture to remove.
* @param {Function} [gestureEventCallback] - For use with Pan gesture, handler called on each pan event.
*/
/**
* Remove gesture by type.
* @method jibo.face.views.TouchManager#removeGesture
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] - type of gesture to remove.
*/
/**
* Remove all possible TouchManager gestures.
* @method jibo.face.views.TouchManager#removeAllGestures
*/
/**
* Create gestures required by Component tree.
* NOTE :: Does not create pan gesture, must be created by Component that requires it.
* @method jibo.face.views.TouchManager#createRequiredGestures
* @param view {jibo.face.views.View} View to create gestures for.
*/
/**
* Destroy.
* @method jibo.face.views.TouchManager#destroy
*/
/**
* Add listener for input exiting viewport.
* @method jibo.face.views.TouchManager#addViewportOut
* @private
*/
/**
* Remove listener for input exiting viewport.
* @method jibo.face.views.TouchManager#removeViewportOut
* @private
*/
/**
* Create listener for input exiting viewport.
* @method jibo.face.views.TouchManager#createViewportOut
* @private
*/
/**
* Add listeners that will track core mouse events.
* We need them to emulate panning in those cases when user started panning outside of the touch screen.
* @method jibo.face.views.TouchManager#addCoreTouchEvents
* @private
*/
/**
* Remove listeners for core mouse events.
* @method jibo.face.views.TouchManager#removeCoreTouchEvents
* @private
*/
/**
* Listener of mouse core events that we might need to determine if user
* has started panning outside of the screen
* @method jibo.face.views.TouchManager#onCoreTouchEvent
* @private
*/
/**
* Set the input coordinates and clear the target.
* @method jibo.face.views.TouchManager#resetInput
* @param {Number} x - x poisition
* @param {Number} y - y position
* @private
*/
/**
* Create a gesture for tap.
* Refer to HammerJS documentation for Tap values {@link http://hammerjs.github.io/recognizer-tap}
* @method jibo.face.views.TouchManager#createTapGesture
* @returns {boolean} `true` if a new gesture was created.
* @private
*/
/**
* Handler for tap complete event.
* @method jibo.face.views.TouchManager#tapHandler
* @param gestureEvent {any}
* @private
*/
/**
* Find Element within View whose display was tapped.
* @param {jibo.face.views.View} currentView - View to check.
* @returns {boolean}
* @private
*/
/**
* Function required by PIXI processInteractive method, create method to speed up process
* @method jibo.face.views.TouchManager#checkElementHit
* @param {any} event - PIXI.interactive.InteractionEvent passed from Pixi's hit test
* @param {PIXI.DisplayObject} displayObject - dis
* @param {boolean} hit - Flag for hit test against display object
* @private
*/
/**
* Create a gesture for swipe down.
* @method jibo.face.views.TouchManager#createSwipeDownGesture
* @returns {boolean} `true` if a new gesture was created.
* @private
*/
/**
* Handler for swipe down complete event.
* Currently only activates for Views.
* @method jibo.face.views.TouchManager#swipeDownHandler
* @param gestureEvent {any}
* @private
*/
/**
* Create a gesture for swipe up.
* @method jibo.face.views.TouchManager#createSwipeUpGesture
* @returns {boolean} `true` if a new gesture was created.
* @private
*/
/**
* Handler for swipe up complete event.
* Currently only activates for Views.
* @method jibo.face.views.TouchManager#swipeUpHandler
* @param gestureEvent {any}
* @private
*/
/**
* Create a gesture for horizontal pan.
* @method jibo.face.views.TouchManager#createPanHorizontalGesture
* @param {Object} gestureEventCallback
* @returns {boolean} `true` if a new gesture was created.
* @private
*/

104
docs/rendering/gui/ViewGlobalEvents.js Normal file
View File

@@ -0,0 +1,104 @@
/**
* @class ViewGlobalEvents
* @description Typed global view events for ViewManager (`jibo.face.views.events`)
* @example
* jibo.face.views.events.process.on(onProcess);
*
* onProcess = (result:ViewProcessResult) => {
* // act accordingly
* }
*
* // When finished with event listening
* jibo.face.views.events.process.removeListener(onProcess);
*
* @memberof jibo.face.views
*/
/**
* Emits results from view change process.
* @name jibo.face.views.ViewGlobalEvents#process
* @type {Event<jibo.face.views.ViewProcessResult>}
*/
/**
* Emits results from View emitted events.
* @name jibo.face.views.ViewGlobalEvents#view
* @type {Event<jibo.face.views.ViewResult>}
*/
/**
* @class ViewProcessResult
* @description Result from change in view change process.
* @memberof jibo.face.views
*/
/**
* Current state of view process.
* Refer to {@link jibo.face.views.ViewProcess} for status values.
* @name jibo.face.views.ViewProcessResult#status
* @type {String}
* @readOnly
*/
/**
* Id of current view in process.
* @name jibo.face.views.ViewProcessResult#currentId
* @type {String}
* @readOnly
*/
/**
* Id of closing view in process.
* @name jibo.face.views.ViewProcessResult#closingId
* @type {String}
* @readOnly
*/
/**
* Serialized change options of process.
* @name jibo.face.views.ViewProcessResult#changeOptions
* @type {jibo.face.views~ChangeOptions}
* @readOnly
*/
/**
* @class ViewResult
* @description Results from events emitted by View.
* @memberof jibo.face.views
*/
/**
* Event emitted from view.
* @name jibo.face.views.ViewResult#event
* @type {String}
* @readOnly
*/
/**
* Id of view emitting the event.
* @name jibo.face.views.ViewResult#id
* @type {String}
* @readOnly
*/
/**
* Type of view emitting the event.
* @name jibo.face.views.ViewResult#type
* @type {String}
* @readOnly
*/
/**
* Statis of view emitting the event.
* Refer to {@link jibo.face.views.View} for status values.
* @name jibo.face.views.ViewResult#status
* @type {String}
* @readOnly
*/
/**
* Any additional data that may be passed with the event.
* @name jibo.face.views.ViewResult#data
* @type {any}
* @readOnly
*/

633
docs/rendering/gui/ViewManager.js Normal file
View File

@@ -0,0 +1,633 @@
/**
* Callback given to view process methods, called once process completes successfully.
* @callback jibo.face.views~ViewCallback
* @param [view] {jibo.face.views.View} View associated with view process, not all view processes return a View.
* @param [done] {Function} ONLY used for the onLoaded callback within [changeView()]{@link jibo.face.views#changeView}.
* Not specifying this parameter on the onLoaded callback makes it synchronous.
* Specifying makes the callback asynchronous and requires that `done()` be called at some point within the method.
*/
/**
* @interface jibo.face.views~ChangeOptions
* @description Interface for changing view process options.
* @prop {Boolean} [remove] - `true` to remove current element.
* This is exclusive from the other `remove*` methods, with the order of override: `removeAll > removeTo > removeToInclude > remove`
* @prop {Boolean} [removeAll] - `true` to remove all views down to root.
* This is exclusive from the other `remove*` methods, with the order of override: `removeAll > removeTo > removeToInclude > remove`
* @prop {String} [options.removeTo] - Id of a view within the stack, all views above it will be removed.
* This is exclusive from the other `remove*` methods, with the order of override: `removeAll > removeTo > removeToInclude > remove`
* @prop {String} [options.removeToInclude] - Id of a view within the stack, that view and all views above it will be removed.
* This is exclusive from the other `remove*` methods, with the order of override: `removeAll > removeTo > removeToInclude > remove`
* @prop {Boolean} [leaveEmpty] - `true` to prevent next view in stack from opening and leaving the display empty.
* Setting to `true` overrides `addView`.
* @prop {String|jibo.face.views.View|any} [addView] - Add view, can specify a path to config file, instantiated View, or view config Object.
* @prop {jibo.face.views.PauseOverlay#PauseOptions} [pause] - If when adding the next view the current view should be paused. If so, how.
* @prop {String} [transitionClose] - Type of transition the current View should use to close.
* @prop {String} [transitionOpen] - Type of transition the next View should use to open.
*/
/**
* @interface jibo.face.views~AssetDescriptor
* @description Interface for asset description objects, used in conjunction with [loader]{@link jibo.loader}.
* @prop {String} id - Id of asset, should be unique within cache.
* @prop {String} type - Type of asset, for valid types refer to [loader]{@link jibo.loader}.
* @prop {String} src - URI of asset.
* @prop {Boolean} [upload] - If `true` will also load to GPU.
* @prop {String} [cache] - Cache asset is associated with. Will use the loader's currently default cache unless otherwise specified.
*/
/**
* @typedef jibo.face.views~STACK_DIRECTION
* @description Enum - For use with `View.addTransition` & `View.applyTransitions`
* to define transitions by the way the view stack will change.
* @prop 1 ADD
* @prop 2 REMOVE
* @prop 3 SWAP
*/
/**
* @typedef jibo.face.views~TRANSITION
* @description Static class with static members that describe possible transitions for views.
* @prop UP Transition type for view to move up.
* @prop DOWN Transition type for view to move down.
* @prop LEFT Transition type for view to move left.
* @prop RIGHT Transition type for view to move right.
* @prop IN Transition type for view to fade and scale in from center of screen.
* @prop OUT Transition type for view to fade and scale out from center of screens.
* @prop EYE Transition type for view to or from eye.
* @prop NONE Transition type for no transition.
*/
/**
* @class ViewManager
* @description Everything in this class is now accessible as part of {@link jibo.face.views}.
* Please update your code to use the `face.views` namespace instead of the `ViewManager` class.
* @memberof jibo.face.views
* @deprecated Since 7.4.1
* @see jibo.face.views
*/
/**
* Manages the creation and transition of the GUI.
* @namespace jibo.face.views
*/
/**
* Default duration, in milliseconds, of open and close view transitions.
* @type {number}
* @private
*/
/**
* Top level container.
* @name jibo.face.views#stage
* @type {PIXI.Container}
*/
/**
* If the view manager is disabled, in which case all view changes will fail immediately.
* This will only be used when the WebGL context is lost.
* @name jibo.face.views#disabled
* @type {boolean}
* @private
*/
/**
* If movement should be disabled due to screen taps - don't want to move around once the GUI
* has begun to be used.
* @name jibo.face.views#_disableMovement
* @type {boolean}
* @private
*/
/**
* Array of ViewStates in order of the view hierarchy.
* @name jibo.face.views#_viewStates
* @type {Array<jibo.face.views.ViewState>}
* @private
*/
/**
* Class to assist in creation of Views and Components.
* @name jibo.face.views#_creator
* @type {jibo.face.views.ComponentCreator}
* @private
*/
/**
* Class to manage interactions.
* @name jibo.face.views#_interactionManager
* @type {jibo.face.views.TouchManager}
* @private
*/
/**
* Handle to the Menu attention mode pushed with a GUI view.
* @name jibo.face.views#_menuMode
* @type {jibo.attention.AttentionModeHandle}
* @private
*/
/**
* Event dispatched when the View is going to close because of a 'back' command.
* Currently closing a View and going back to the previous view is triggered by a swipe down.
* The same constant is statically accessible via `View.BACK`, but duplicated here for convenience.
* @type {string}
* @name jibo.face.views#BACK
* @constant
* @readOnly
*/
/**
* Option for setting custom transitions.
* Use with `View.addTransition` for transitions to be used when opening from or closing to an empty screen.
* The same constant is statically accessible via `View.EMPTY`, but duplicated here for convenience.
* @type {string}
* @name jibo.face.views.EMPTY
* @readOnly
*/
/**
* Option for setting custom transitions.
* Use with `View.addTransition` for transitions to be used when opening over a paused view or closing while being paused.
* The same constant is statically accessible via `View.PAUSED`, but duplicated here for convenience.
* @type {string}
* @name jibo.face.views.PAUSED
* @readOnly
*/
/**
* Current top-level view.
* @name jibo.face.views#currentView
* @type {jibo.face.views.View}
* @readOnly
*/
/**
* Class to assist in creation of Views and Components.
* @name jibo.face.views#creator
* @type {jibo.face.views.ComponentCreator}
* @readOnly
*/
/**
* Maintains view processes.
* @name jibo.face.views#_viewProcess
* @type {jibo.face.views.ViewProcess}
* @private
*/
/**
* Source for global events related to GUI processes.
* @name jibo.face.views#_events
* @type {jibo.face.views.ViewGlobalEvents}
* @private
*/
/**
* Black gradient border at edge of screen, layered above ViewManager stage.
* @name jibo.face.views#_border
* @type {PIXI.Container}
* @private
*/
/**
* Image that exist above all displays and the border, there can only be one watermark at a time.
* Use for things like remote mode indication.
* @name jibo.face.views#_waterMark
* @type {PIXI.Container}
* @private
*/
/**
* Flag to keep track of visibility of border.
* @name jibo.face.views#_borderVisibility
* @type {Boolean}
* @private
*/
/**
* Visibility of border.
* @name jibo.face.views#borderVisible
* @param {Boolean} visible Determines border's visibility
*/
/**
* Will return the total number of views in the view stack.
* @name jibo.face.views#viewStackLength
* @type {number}
* @readOnly
*/
/**
* Determines if views are currently in process.
* @name jibo.face.views#viewsInProcess
* @type {boolean}
* @readOnly
*/
/**
* Create a View by specifying the class and the configuration.
* @method jibo.face.views#createView
* @param {Object|String} [viewDeterminer] Can be the Class or name of Class of the the view to create.
* @param {Object} [config] Config can be an Object or a string of the path to the JSON file for the config.
* @param {Boolean} [open=false] If true continue process of adding and opening the view.
* @param {jibo.face.views~ViewCallback} [onOpenComplete] Callback for when View has finished opening, will only be used if the open flag is set to true.
* @param {String} [openTransition=TRANSITION.UP] Type of transition to open view.
* @param {String} [closeTransition=TRANSITION.UP] Type of transition to close view.
* @return {jibo.face.views.View} The View created.
*/
/**
* Create a View from only the View's configuration path.
* Unlike the the createView method, this method does not require the view class to be specified,
* instead the view class is derived from the configuration file.
* This method does not return the View directly, but rather through the provided callback.
* If the open flag is set to true the callback will be fire when the View is created, and opened,
* if not the callback is fire as soon as the View class is created.
* @method jibo.face.views#createViewFromConfigPath
* @param {String} configPath Path to the configuration for the view.
* @param {Boolean} [open=false] If true continue process of adding and opening the view, callback will be fired after View finishes opening.
* @param {jibo.face.views~ViewCallback} callback Callback that returns the View
* @param {String} [openTransition=TRANSITION.UP] Type of transition to open view.
* @param {String} [closeTransition=TRANSITION.UP] Type of transition to close view.
*/
/**
* Add the view that is at the top of the stack.
* This is generally used when there is no current view present
* (i.e. to create the first eye view, or when a view was removed to empty)
* @method jibo.face.views#addViewNextInStack
* @param {jibo.face.views~ViewCallback} callback Callback that returns the View
* @param {String} [openTransition=TRANSITION.UP] Type of transition to open view.
* @param {String} [closeTransition=TRANSITION.UP] Type of transition to close view.
* @param {Function} [onFailure] Callback for if process does not complete
*/
/**
* Passes {@link jibo.face.views.ActionData} to the current {@link jibo.face.views.View} and its children.
* @method jibo.face.views#actionEnactor
* @param {jibo.face.views.ActionData} action - The action to be passed.
* @return {boolean} `true` if action is acted on by the current View or any of its ComponentGroup children.
*/
/**
* Process for changing views, takes a config that defines process particulars.
* @example
* <caption>Option examples</caption>
*
* 'Example of closing all views and leave display empty'
* {
* removeAll: true,
* leaveEmpty: true,
* }
*
* 'Example of opening view lower in the view stack and having it fade in'
* {
* removeTo: 'myView',
* transitionOpen: "trans_in"
* }
*
* 'Example of closing current view and leaving display empty'
* {
* remove: true,
* leaveEmpty: true
* }
*
* 'Example of opening a new view while pausing the view beneath it but fully hiding it using standard overlay tween'
* {
* addView: "resources/views/myViewConfig.json",
* pause:{
* "alpha": 1,
* }
* }
*
* 'Example of removing all views above a particular view in the stack and then opening that view, using view's id'
* {
* removeTo: "myView"
* }
*
* 'Example of removing a particular view and all views above it in the stack, then adding a new view.'
* {
* removeToInclude: "myView",
* addView: "resources/views/myViewConfig.json"
* }
*
* @method jibo.face.views#changeView
* @param {jibo.face.views~ChangeOptions} options - Options for view change process.
* @param {jibo.face.views~ViewCallback} [onComplete] Callback when process completes, gives the current view as a parameter.
* @param {Function} [onFailure] Callback for if process does not complete.
* @param {jibo.face.views~ViewCallback} [onLoaded] Callback when next view has loaded, use to augment view prior to it opening.
*/
/**
* Add a new {@link jibo.face.views.View} to the hierarchy.
* Adding process involves disposing of or pausing current view and storing its state.
* @method jibo.face.views#addView
* @param {jibo.face.views.View | string} view - Info for the view to load, can pass the View class directly,
* or pass a string that is the path to the config file defining the View.
* @param {jibo.face.views~ViewCallback} [onAdded] Callback when process completes, gives the current view as a parameter.
* @param {String} [openTransition = TRANSITION.UP] Type of transition the next View should use to open.
* @param {String} [closeTransition = TRANSITION.UP] Type of transition the current View should use to close.
* @param {Function} [onFailure] Callback for if process does not complete.
*/
/**
* Remove current {@link jibo.face.views.View} and open the View beneath it in the stack.
* Removal process involves disposing of current view and recreating prior View using its stored ViewState.
* If top most view was pausing the previous view then we don't need to recreate it, only un-pause it.
* @method jibo.face.views#removeView
* @param {jibo.face.views~ViewCallback} [onRemoved] Callback when process completes, gives the current view as a parameter.
* @param {String} [openTransition = TRANSITION.DOWN] Type of transition the next View should use to open.
* @param {String} [closeTransition = TRANSITION.DOWN] Type of transition the current View should use to close.
* @param {Function} [onFailure] Callback for if process does not complete.
*/
/**
* Force open the eye view and clear the view stack.
* @method jibo.face.views#forceEyeView
* @param {jibo.face.views~ViewCallback} [onOpenCallback] called once eyeView is opened or if it is already open, returns the EyeView as a parameter.
* @param {Function} [onPressCallback] handler for when EyeView is pressed, if nothing is specified will remove any existing callbacks.
* @param {String} [openTransition=TRANSITION.IN] Type of transition to open view.
* @param {String} [closeTransition=TRANSITION.UP] Type of transition to close view.
* @param {Function} [onFailure] Callback for if process does not complete.
*/
/**
* If there is an active process attempting to make the EyeView the current view we want to try not to interrupt that process as it has the same purpose as forceEyeView.
* We determine if that is the state of the process if a closing view is defined (so we know that the EyeView is not what the process may be closing)
* AND the current view (which is an EyeView) has a status indicating it is going to open, basically that it is loaded but not yet open.
*/
/**
* Clear the view stack, if current view is of category EYE leave the eye as the current view,
* if any other category remove call views and leave the current view empty.
* @method jibo.face.views#viewStackCleanup
* @param {jibo.face.views~TRANSITION} [closeTransition=TRANSITION.DOWN] Type of transition to close the current view.
* @returns {Promise<void>}
*/
/**
* Check if a view exists with a given ID, and can be used as `removeTo` or `removeToInclude`
* in [changeView]{@link jibo.face.views#changeView}.
* @method jibo.face.views#hasView
* @param {String} id View ID to look for.
* @returns {Boolean} `true` if a View exists with the given ID.
*/
/**
* Resets the TRANS_TIME to default, or transTime if specified
* @method jibo.face.views#resetTransTime
* @param {number} [transTime] Optional time in milliseconds to set the TRANS_TIME to
*/
/**
* Handles process failure or interruption.
* Cleans up current process. and queue stack.
* If queue has members, start process for top most member and clean up any below it.
* @method jibo.face.views#viewProcessFailure
* @param {jibo.face.views.ViewProcess} process Active view process
* @private
*/
/**
* This allows us to more logically recover from an interruption in the case where the interrupting process will remove the current view.
* Interrupting a process normally destroys the current view involved immediately, which would skip it's close transition.
* In the case where the interrupting process will attempt to remove the current view,
* we want to allow it to do so, so we prevent the process fail from destroying the current view so that the next process can close and destroy it naturally.
*/
/**
* Add a new {@link jibo.face.views.View} to the view hierarchy and display.
* Adding process involves disposing of or pausing current view and storing its state.
* @method jibo.face.views#add
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} nextView - View to add and make current.
* @param {jibo.face.views.PauseOverlay#PauseOptions} [pauseOptions] - Pause options, defined within change view options.ß
* @param {String} [openTransition = TRANSITION.UP] Type of transition the next View should use to open.
* @param {String} [closeTransition = TRANSITION.UP] Type of transition the current View should use to close.
* @private
*/
/**
* Remove current {@link jibo.face.views.View} from the hierarchy and display.
* @method jibo.face.views#remove
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} [nextView] - View to add after current view is closed.
* @param {boolean} leaveEmpty - If next view in stack should be opened after current view closes, if 'true' display is left empty.
* @param {String} [openTransition = TRANSITION.UP] Type of transition the next View should use to open.
* @param {String} [closeTransition = TRANSITION.UP] Type of transition the current View should use to close.
* @returns {Promise<View>}
* @private
*/
/**
* Close all currently active views and open the 'root' view ({@link jibo.face.views.EyeView}).
* @method jibo.face.views#removeToRoot
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} [nextView] - View to add above root view after current views and stack have been cleared.
* @param {boolean} leaveEmpty - If root View should be opened after close completes, if 'true' display is left empty.
* @param {String} [closeTransition = TRANSITION.DOWN] Type of transition the current View should use to close.
* @param {String} [openTransition = TRANSITION.DOWN] Type of transition the next View should use to open.
* @returns {Promise<View>}
* @private
*/
/**
* Close all currently active views and open the 'root' view ({@link jibo.face.views.EyeView}).
* @method jibo.face.views#removeToRoot
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} [nextView] - View to add above root view after current views and stack have been cleared.
* @param {boolean} leaveEmpty - If root View should be opened after close completes, if 'true' display is left empty.
* @param {String} [closeTransition = TRANSITION.DOWN] Type of transition the current View should use to close.
* @param {String} [openTransition = TRANSITION.DOWN] Type of transition the next View should use to open.
* @returns {Promise<View>}
* @private
*/
/**
* Load and open View.
* @param {jibo.face.views.ViewProcess} process Active view process.
* @method jibo.face.views#openView
* @param {jibo.face.views.View}view - View to open.
* @param {string} openTransition - Type of transition view will open with.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Close and destroy View.
* Does not take into account any paused Views that may be associated with the given view.
* @method jibo.face.views#closeView
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} view - View to close.
* @param {string} [closeTransition] - Type of transition view will close with.
* @param {boolean} [addToStack = false] - if 'true' closed views are added to the view stack.
* @param {boolean} [destroyViews = true] - if 'true' views will be destroyed.
* @param {boolean} [toPaused = false] - if view is closing over a paused if 'true' views will be destroyed.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Close and open separate views.
* Supports async behavior, making sure the view being opened has been fully loaded and prepped before opening.
* @method jibo.face.views#closeAndOpenViews
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} nextView - View to open.
* @param {jibo.face.views.View} closeView - View to close.
* @param {string} [openTransition] - Type of transition next view will open with.
* @param {string} [closeTransition] - Type of transition closing view will close with.
* @param {boolean} [addToStack = false] - if 'true' closed views are added to the view stack.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Close and destroy given view and all paused views beneath it, and open next view.
* Supports async behavior, making sure the view being opened has been fully loaded and prepped before opening.
* method jibo.face.views#closeWithPausedAndOpenViews
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} nextView - View to open.
* @param {jibo.face.views.View} closeView - View to close.
* @param {string} [openTransition] - Type of transition next view will open with.
* @param {string} [closeTransition] - Type of transition closing view will close with.
* @param {boolean} [addToStack = false] - if 'true' closed views are added to the view stack.
* @param {jibo.face.views~STACK_DIRECTION} [stackDirection] - Specifies the stack direction associated with the transition, if undefined does not take stack direction into account
* STACK_DIRECTION.UP indicates view is being added to stack.
* STACK_DIRECTION.DOWN indicates view is being removed.
* STACK_DIRECTION.SWAP indicates the views are being swapped and there is no change to the stack size.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Close and destroy given view's paused views.
* method jibo.face.views#closePaused
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} view - View whose paused views to close.
* @param {string} [closeTransition] - Type of transition Views will open with.
* @param {boolean} [addToStack = false] - if 'true' closed views are added to the view stack.
* @param {boolean} [destroyViews = true] - if 'true' views will be destroyed.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Close and destroy given view and all paused views beneath it.
* method jibo.face.views#closeViewWithPaused
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} view - View to close.
* @param {string} [closeTransition] - Type of transition Views will open with.
* @param {boolean} [addToStack = false] - if 'true' closed views are added to the view stack.
* @param {boolean} [destroyViews = true] - if 'true' views will be destroyed.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Close a list of views.
* Generally used to close a view and the pause chain beneath it.
* @method jibo.face.views#closeGroup
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View[]} closingViews - Array of Views to close in order of stack, with lowest at 0.
* @param {string} [closeTransition] - Type of transition Views will open with.
* @param {boolean} [addToStack = false] - if 'true' closed views are added to the view stack.
* @param {boolean} [destroyViews = true] - if 'true' views will be destroyed.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Pause current view and open next above it.
* method jibo.face.views#pauseThenOpen
* @param {jibo.face.views.ViewProcess} process Active view process.
* @param {jibo.face.views.View} nextView - View to open.
* @param {jibo.face.views.View} pausingView - View to pause.
* @param {jibo.face.views.PauseOverlay#PauseOptions} [pauseOptions] - Specific pause options, if undefined falls back to nextView.pauseOptions.
* @param {string} [openTransition] - Type of transition nextView will open with.
* @returns {Promise<jibo.face.views.View>}
* @private
*/
/**
* Helper to sets transitions for opening and closing views.
* @param {jibo.face.views.views.View} nextView - View that will be opening
* @param {jibo.face.views.views.View} closingView - View that will be closing.
* @param {jibo.face.views~STACK_DIRECTION} [stackDirection] - Specifies the stack direction associated with the transition, if undefined does not take stack direction into account
* STACK_DIRECTION.UP indicates view is being added to stack.
* STACK_DIRECTION.DOWN indicates view is being removed.
* STACK_DIRECTION.SWAP indicates the views are being swapped and there is no change to the stack size.
*/
/**
* Returns the View from the top of the stack of ViewStates.
* @method jibo.face.views#popViewFromStack
* @return {jibo.face.views.View}
* @private
*/
/**
* Converts given View to ViewState and adds to top of the stack of ViewStates.
* Given View must be in acceptable state to be converted to ViewState, otherwise it will not be added to stack.
* @method jibo.face.views#pushViewToStack}
* @private
*/
/**
* Converts given View and its paused View chain to ViewStates and adds them to the stack of ViewStates in the right order.
* Views must be in acceptable state to be converted to ViewState, otherwise they will not be added to stack.
* @method jibo.face.views#pushViewWithPausedToStack
* @private
*/
/**
* Clear view stack so only root ViewState remains.
* If the currentView given is an EyeView remove all view states,
* otherwise leave EyeView ViewState as the only view state in view stack.
* @method jibo.face.views#clearViewStack
* @param {jibo.face.views.View} [currentView] - The view that is or will be the current view.
* @private
*/
/**
* Update the attention mode, ensuring that it is a Menu mode when a GUI view is active, and
* deactivating our Menu mode if it is no longer a GUI.
* @method jibo.face.views#updateAttentionMode
* @param {jibo.face.views.View} [view] - The view that is or will be the current view.
* @private
*/
/**
* Set PIXI's texture garbage collection to auto garbage collect or manually collect. only run when an Eye view is active.
* @method jibo.face.views#setTextureGC
* @param {boolean} [autoOn] - If `true` texture garbage collection is set to auto, if 'false' it is set to manual
* @private
*/
/**
* Using supplied assets creates a border around the screen.
* Placed above ViewManager.stage so that everything created within ViewManager will be beneath it.
* @method jibo.face.views#createBorder
* @param {PIXI.Texture} cornerTexture - asset for corner
* @param {PIXI.Texture} edgeTexture - asset for edge
* @private
*/
/**
* Register default GUI classes.
* @method jibo.face.views#registerDefaults
* @private
*/
/**
* Check if given views are in a valid state (e.g. not destroyed)
* @method jibo.face.views#checkViewsValid
* @private
*/
/**
* Log view process and view status events, useful for debugging.
* @method jibo.face.views#logEvents
* @private
*/

194
docs/rendering/gui/ViewProcess.js Normal file
View File

@@ -0,0 +1,194 @@
/**
* Process is currently in the queue.
* @type {string}
* @name jibo.face.views.ViewProcess#QUEUED
* @readOnly
*/
/**
* Process has been started.
* @type {string}
* @name jibo.face.views.ViewProcess#STARTED
* @readOnly
*/
/**
* Process has successfully completed.
* @type {string}
* @name jibo.face.views.ViewProcess#COMPLETED
* @readOnly
*/
/**
* Process was interrupted by another process.
* @type {string}
* @name jibo.face.views.ViewProcess#INTERRUPTED
* @readOnly
*/
/**
* Process failed.
* @type {string}
* @name jibo.face.views.ViewProcess#FAILED
* @readOnly
*/
/**
* Get flag to determine if views currently in process.
* If a new process is requested while active the active process will be interrupted.applied.
* @name jibo.face.views.ViewProcess#active
* @type {Boolean}
* @readOnly
*/
/**
* Options for current view change.
* @name jibo.face.views.ViewProcess#changeOptions
* @type {jibo.face.views~ChangeOptions}
*/
/**
* Callback for process completes.
* @name jibo.face.views.ViewProcess#_onComplete
* @type {jibo.face.views~ViewCallback}
*/
/**
* Callback for process fails, due to error or interruption.
* @name jibo.face.views.ViewProcess#onFailure
* @type {Function}
*/
/**
* Callback for when next view in process has loaded.
* Use to access view prior to it being added to display and opened.
* @name jibo.face.views.ViewProcess#onLoaded
* @type {jibo.face.views~ViewCallback}
*/
/**
* Queue of view change processes.
* @name jibo.face.views.ViewProcess#processQueue
* @type {jibo.face.views.ViewProcess[]}
*/
/**
* Current state of process.
* @name jibo.face.views.ViewProcess#status
* @type {String}
*/
/**
* Flag to determine if views currently in process.
* If a new process is requested while active the active process will be interrupted.
* @name jibo.face.views.ViewProcess#_active
* @type {Function}
* @private
*/
/**
* Array of Views involved in the current process.
* A reference is kept so that views can be destroyed if process is interrupted.
* @name jibo.face.views.ViewProcess#_activeViews
* @type {Array<jibo.face.views.View>}
* @private
*/
/**
* Currently active view in display.
* @name jibo.face.views.ViewProcess#_currentView
* @type {jibo.face.views.View}
* @private
*/
/**
* Currently active view in display.
* @name jibo.face.views.ViewProcess#currentView
* @type {jibo.face.views.View}
*/
/**
* View that was previously current but is now in process of closing.
* @name jibo.face.views.ViewProcess#_closingView
* @type {jibo.face.views.View}
* @private
*/
/**
* View that was previously current but is now in process of closing.
* @name jibo.face.views.ViewProcess#closingView
* @type {jibo.face.views.View}
*/
/**
* Flag for process interruption, if 'true' process has been interrupted.
* @name jibo.face.views.ViewProcess#_interrupted
* @type {boolean}
* @private
*/
/**
* Flag for process interruption, if 'true' process has been interrupted.
* @name jibo.face.views.ViewProcess#interrupted
* @type {boolean}
* @readOnly
*/
/**
* Prepare change options for logging
* @method jibo.face.views.ViewProcess#serializeOptions
* @param {jibo.face.views~ChangeOptions} changeOptions - Options for the change view process being queued.
* @public
*/
/**
* Start the view process.
* Before starting a process should check for interrupt.
* @method jibo.face.views.ViewProcess#start
* @param {jibo.face.views~ViewCallback} onComplete Callback for process completes.
* @param {Function} onFailure Callback for process fails, due to error or interruption.
* @param {jibo.face.views~ViewCallback} onLoaded - Callback for when next view in process has loaded.
* @param {jibo.face.views~ChangeOptions} changeOptions - Options for the change view process being queued.
*/
/**
* Adds View to Array of Views involved in the current process.
* A reference is kept so that views can be destroyed if process is interrupted.
* @method jibo.face.views.ViewProcess#storeView
* @param {jibo.face.views.View} view View to keep reference to for current process.
*/
/**
* Call to complete process.
* Completion callbacks are triggered and process is cleared.
* @method jibo.face.views.ViewProcess#complete
* @param {jibo.face.views.View} [view] View established by process, not all processes will return a view.
*/
/**
* Fail current process, call appropriate callbacks and clean up.
* @method jibo.face.views.ViewProcess#fail
* @param {Boolean} retainCurrent - if `true` prevents currentView from being destroyed.
*/
/**
* Check for active process, if active sets the interrupted flag to `true`.
* @method jibo.face.views.ViewProcess#interrupt
* @param {jibo.face.views~ChangeOptions} changeOptions - Options for the process being queued. Identifier for interrupting process, useful in debugging.
* @returns {boolean} `true` if a process is interrupted.
*/
/**
* Add a change view process to the queue.
* @method jibo.face.views.ViewProcess#addProcessToQueue
* @param {jibo.face.views~ChangeOptions} changeOptions - Options for the process being queued.
* @param {jibo.face.views~ViewCallback} [onComplete] - Callback if process completes, returns current view as param.
* @param {Function} [onFailure] - Callback if queued process fails, gets interrupted, or does not get to execute.
* @param {jibo.face.views~ViewCallback} [onLoaded] Called when next view has loaded, can be used to augment View prior to it being displayed.
*/
/**
* Clear the view process references.
* @method jibo.face.views.ViewProcess#clear
* @private
*/

60
docs/rendering/gui/ViewState.js Normal file
View File

@@ -0,0 +1,60 @@
/**
* Identifier, same as id of View that ViewState represents.
* @name jibo.face.views.ViewState#id
* @type {String}
*/
/**
* URI to the configuration JSON file for the corresponding view.
* @name jibo.face.views.ViewState#configPath
* @type {String}
*/
/**
* Class name of the corresponding view.
* @name jibo.face.views.ViewState#viewClassName
* @type {String}
*/
/**
* Configuration Objects, generally derived from JSON,
* that defines corresponding view.
* @name jibo.face.views.ViewState#viewConfig
*/
/**
* Array of configuration Objects, generally derived from JSON,
* that define corresponding view's components.
* @name jibo.face.views.ViewState#componentConfigs
* @type {Object[]}
*/
/**
* Flag to determine whether, when corresponding view is opened,
* it should pause the view below it.
* @name jibo.face.views.ViewState#pauseParent
* @type {boolean}
* @default false
*/
/**
* Flag to determine if corresponding view should enact close on swipe down.
* @name jibo.face.views.ViewState#ignoreSwipeDown
* @type {boolean}
* @default false
*/
/**
* Can pass in the name of the corresponding ViewState class and config if available at construction.
* @param {String} [viewClassName = 'View'] - Class name of View the ViewState represents.
* @param {Object} [config] - Configuration Object for the corresponding View, generally derived from JSON.
* Contains both view and components configurations.
*/
/**
* Derives separate references to view configuration, component configurations,
* and View type from the given configuration.
* @method jibo.face.views.ViewState#applyConfig
* @param {Object} config Configuration Object for the corresponding View, generally derived from JSON.
* Contains both view and components configurations.
*/

414
docs/rendering/gui/actions/ActionData.js Normal file
View File

@@ -0,0 +1,414 @@
/**
* @interface jibo.face.views.ActionData~ActionDescriptor
* @description Interface for an Object to be turned into instance of an ActionData class.
* @prop {String} type - The type of the action.
* @prop {any} [data] - Additional data for action, requited data depends on type.
*/
/**
* Use to pass actions across the view architecture.
* @class ActionData
* @memberof jibo.face.views
*/
/**
* The type of the action.
* Supported types are this class's constants.
* @name jibo.face.views.ActionData#type
* @type {String}
*/
/**
* The data Object that is passed with the action.
* Not all action types require data.
* Refer to this class's constants for action type requirements.
* @name jibo.face.views.ActionData#data
* @type {Object}
*/
/**
* Change view by specifying view change options.
* Data requirements include [ChangeOptions]{@link jibo.face.views~ChangeOptions}
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "changeView",
* "data": {
* "options": {
* "removeAll": true,
* "leaveEmpty": true
* }
* }
* }
* @constant jibo.face.views.ActionData.CHANGE_VIEW
* @type {String}
*/
/**
* Add a view.
* Data requirements include a path to view configuration to be opened.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "openView",
* "data": {
* "configPath": "resources/menus/myMenu.json"
* }
* }
* @constant jibo.face.views.ActionData.OPEN_VIEW
* @type {String}
* @readOnly
*/
/**
* Remove the current view.
* This action has no data requirements.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "closeView",
* }
* @constant jibo.face.views.ActionData.CLOSE_VIEW
* @type {String}
* @readOnly
*/
/**
* Remove the current view and not open the next view in the hierarchy.
* Will leave the display empty and the current view equal to null.
* This action has no data requirements.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "closeViewEmpty",
* }
* @constant jibo.face.views.ActionData.CLOSE_VIEW_EMPTY
* @type {String}
* @readOnly
*/
/**
* Remove all the views up to, but not including, the root view.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "closeAll"
* }
* @constant jibo.face.views.ActionData.CLOSE_ALL
* @type {String}
* @readOnly
*/
/**
* Remove all the views and clear hierarchy up to but not including root, then add view.
* Added view will be one above the root view.
* Data requirements include a path to view configuration to be opened.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "closeAllOpen",
* "data": {
* "configPath": "resources/menus/myMenu.json"
* }
* }
* @constant jibo.face.views.ActionData.CLOSE_ALL_OPEN
* @type {String}
* @readOnly
*/
/**
* Close all the views and clear hierarchy up to but not including root,
* but do not add the root view to the display.
* Added view will be one above the root view.
* Data requirements include a path to view configuration to be opened.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "closeAllEmpty"
* }
* @constant jibo.face.views.ActionData.CLOSE_ALL_EMPTY
* @type {String}
* @readOnly
*/
/**
* Emulate a swipe right gesture.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "swipeRight"
* }
* @constant jibo.face.views.ActionData.SWIPE_RIGHT
* @type {String}
* @readOnly
*/
/**
* Emulate a swipe left gesture.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "swipeLeft"
* }
* @constant jibo.face.views.ActionData.SWIPE_LEFT
* @type {String}
* @readOnly
*/
/**
* Emulate a swipe down.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "swipeDown"
* }
* @constant jibo.face.views.ActionData.SWIPE_DOWN
* @type {String}
* @readOnly
*/
/**
* Emulate a swipe up.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "swipeUp"
* }
* @constant jibo.face.views.ActionData.SWIPE_UP
* @type {String}
* @readOnly
*/
/**
* Go to first page of a list.
* Enact action on [List]{@link jibo.face.views.List} to take effect.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "goToBeginning"
* }
* @constant jibo.face.views.ActionData.GO_TO_BEGINNING
* @type {String}
* @readOnly
*/
/**
* Go to last page of a list.
* Enact action on [List]{@link jibo.face.views.List} to take effect.
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "goToEnd"
* }
* @constant jibo.face.views.ActionData.GO_TO_END
* @type {String}
* @readOnly
*/
/**
* Emit an event from the owning View when triggered.
* Required data is an event string.
*
* @example
* <caption>JSON format</caption>
* "action": {
* "type": "event",
* "data": {
* "event": "danceParty"
* }
* }
*
* @example
* <caption> To listen for these events just add a listener to
* the View that contains the action. </caption>
*
* myView.on('danceParty', getDown);
*
* @example
* <caption>You must specify the event string for the event to fire,
* but can include as much additional data as needed.
* The entire data Object is returned when the event is fired.
* Here we add another value to the data Object in JSON:</caption>
*
* "action": {
* "type": "event",
* "data": {
* "event": "danceParty"
* "dance": "funkyChicken"
* }
* }
*
* @example
* <caption>Then in your code you can listen for the event,
* which will pass back the data Object:</caption>
*
* myView.on('danceParty', (eventData) => {
* if(eventData.dance === 'funkyChicken'){
* console.log('Booo');
* }
* });
*
* @constant jibo.face.views.ActionData.EVENT
* @type {String}
* @readOnly
*/
/**
* Play a sound.
* Within data, provide either the type of sound or the URI for the sound file.
* @example
*
* <caption>JSON format. Playing a preloaded or gloabl sound by giving the the ID.</caption>
* "action": {
* "type": "sound",
* "data": {
* "id": "button"
* }
* }
* @example
* <caption>JSON format. Playing sound by just giving src of sound asset.</caption>
* "action": {
* "type": "sound",
* "data": {
* "src": "resources/sfx/button_sfx.m4a"
* }
* }
* @example
* <caption>JSON format. Loading a sound and giving it an ID for repeat usage.</caption>
* "action": {
* "type": "sound",
* "data": {
* "id": "unique_sound"
* "src": "resources/sfx/button_sfx.m4a"
* }
* }
*
* @name jibo.face.views.ActionData#SOUND
* @type {String}
* @readOnly
*/
/**
* Spoof an utterance that will be used as the result of the current MIM listen. Strings are
* handled as the result intent, otherwise a properly formatted NLU result must be provided
* @example
* <caption>JSON format with string</caption>
* "action": {
* "type": "utterance",
* "data": {
* "utterance": "whatIsWeather"
* }
* }
* @example
* <caption>JSON format with full result</caption>
* "action": {
* "type": "utterance",
* "data": {
* "utterance": {
* "intent": "whatIsWeather",
* "entities": {
* "time": "tomorrow"
* }
* }
* }
* @constant jibo.face.views.ActionData.UTTERANCE
* @type {String}
* @readOnly
*/
/**
* Results passed from the MIM systems.
* @example
* <caption>JSON format for select elements on a page</caption>
* "action": {
* "type": "verbalCommand",
* "data": {
* "intent": "selectItem",
* "entities": {
* "itemPosition": "first"
* }
* }
* }
*
* <caption>JSON format tp control pages</caption>
* "action": {
* "type": "verbalCommand",
* "data": {
* "intent": "right",
* }
* }
*
*
* @constant jibo.face.views.ActionData.VERBAL_COMMAND
* @type {String}
* @readOnly
*/
/**
* Immediately end the currently active MIM.
* @example
* <caption>JSON format for ending a MIM</caption>
* "action": {
* "type": "mimEnd"
* }
*
* @constant jibo.face.views.ActionData.MIM_END
* @type {String}
* @readOnly
*/
/**
* Immediately show the available GUI for the currently active MIM.
* @example
* <caption>JSON format for showing a MIM's GUI</caption>
* "action": {
* "type": "mimShowGUI"
* }
*
* @constant jibo.face.views.ActionData.MIM_SHOW_GUI
* @type {String}
* @readOnly
*/
/**
* Call a method when action is triggered.
* Not something easily defined via JSON; more likely to be defined in code.
* @example
* <caption>Creating in code</caption>
* new ActionData( ActionData.CALLBACK, {
* callback: this.foo.bind(this)
* });
* <caption>Adding to a Component</caption>
* component.addAction(ActionData.CALLBACK, {callback: this.foo.bind(this)});
* @constant jibo.face.views.ActionData.CALLBACK
* @type {String}
* @readOnly
*/
/**
* Create an ActionData object from a configuration Object.
* Generally derived from JSON.
* @method jibo.face.views.ActionData.createFromConfig
* @example
* <caption>JSON format</caption>
* {
* "type": "openView",
* "data": {
* "configPath": "assets/menu/myMenu.json"
* }
* }
* @param {jibo.face.views.ActionData~ActionDescriptor} configData Object defining the action.
* @returns {jibo.face.views.ActionData} A new ActionData with values specified by given configuration.
*/
/**
* Constructor for ActionData.
* @param {String} [type] The type of action.
* @param {Object} [data] The data Object with action values.
*/
/**
* Apply the configuration Object's values to this ActionData class.
* @method jibo.face.views.ActionData#applyConfig
* @param {jibo.face.views.ActionData~ActionDescriptor} configData Object defining the action.
*/

110
docs/rendering/gui/components/Button.js Normal file
View File

@@ -0,0 +1,110 @@
/**
* Button element.
* Can be assigned {@link jibo.face.views.ActionData}, which are triggered on button click.
*
* @class Button
* @extends jibo.face.views.Element
* @memberof jibo.face.views
*/
/**
* `PIXI.animate.MovieClip` containing button states.
* Buttons do not require MovieClips, so if a `PIXI.animate.Timeline`
* is not given as the base asset this remains undefined.
* @name jibo.face.views.Button#timeline
* @type {PIXI.animate.MovieClip}
*/
/**
* FOR OVERRIDE ONLY. DO NOT ALTER.
*
* The Class name as a string.
* @name jibo.face.views.Button#_type
* @type {String}
* @protected
*/
/**
* Flag used to keep track if button is down.
* Is set within button state methods e.g. over, down, up, etc.
* @name jibo.face.views.Button#isDown
* @type {Boolean}
* @protected
*/
/**
* Create a Button from a configuration Object derived from JSON.
* @method jibo.face.views.Button.createFromConfig
* @param {Object} configData Object derived from JSON, must be a specific format refer to examples.
* @returns {jibo.face.views.Button} The Button created from the given configuration.
*/
/**
* Create a Button object by passing the DisplayObject and specifying the {@link jibo.face.views.ActionData}.
* This allows for a more direct way to create Buttons that is not reliant on the configuration data.
* @method jibo.face.views.Button.createFromDisplayObject
* @param {PIXI.DisplayObject} displayObject The DisplayObject with the button assets.
* @param {jibo.face.views.ActionData} [actionData] The action to be triggered on button click.
* @param {PIXI.Container} container Display container for the button.
* @returns {jibo.face.views.Button} The created Button.
*/
/**
* Set up the display.
* Assign assets, set timelines, etc.
* @method jibo.face.views.Button#setupDisplay
* @param {Object} [assets] - Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for details.
*/
/**
* TO BE CALLED INTERNALLY ONLY.
*
* Define the interactive hit area of the display.
* The `DisplayObject.hitArea` is what Pixi uses to define the interactive area.
* Should be called within `setupDisplay()`.
* @method jibo.face.views.Button#setupHitArea
* @param {PIXI.Rectangle} [bounds] Optionally specify the bounds for the hit area.
* If not defined, defaults to using the display's bounds.
* @protected
*/
/**
* Lock or unlock input, lock value is applied to the display's interactive variable.
* @method jibo.face.views.Button#lockInput
* @param {Boolean} flag - Determines if input is locked.
*/
/**
* Manually force a click.
* @method jibo.face.views.Button#click
* @param {any} mouseData Returned from Pixi.
* @protected
*/
/**
* Handler for out touch input.
* @method jibo.face.views.Button#out
* @param {any} mouseData Returned from Pixi.
* @protected
*/
/**
* Handler for down touch input.
* @method jibo.face.views.Button#down
* @param {any} mouseData Returned from Pixi.
* @protected
*/
/**
* Handler for up touch input.
* @method jibo.face.views.Button#up
* @param {any} mouseData Returned from Pixi.
* @protected
*/
/**
* Activate the button, used for non-touch input.
* @method jibo.face.views.Button#activate
* @public
*/

35
docs/rendering/gui/components/Clip.js Normal file
View File

@@ -0,0 +1,35 @@
/**
* Clip to manage timelines and images.
*
* @class Clip
* @extends jibo.face.views.Element
* @memberof jibo.face.views
*/
/**
* Timeline for the display content.
* @name jibo.face.views.Clip#timeline
* @type {Timeline}
*/
/**
* MovieClip for the display content, the instance of the Timeline.
* @name jibo.face.views.Clip#movieClip
* @type {PIXI.animate.MovieClip}
*/
/**
* Create a Clip from a configuration Object derived from JSON.
* @method jibo.face.views.Clip#createFromConfig
* @param configData Object derived from JSON, must be a specific format refer to examples.
* @returns {jibo.face.views.Clip} The created Clip.
*/
/**
* Create a Clip object by passing the DisplayObject.
* This allows for a more direct way to create Clips that is not reliant on the configuration data.
* @method jibo.face.views.Clip#createFromDisplayObject
* @param {PIXI.DisplayObject} displayObject The DisplayObject with the button assets.
* @param {PIXI.Container} [container] Display container for the button.
* @returns {jibo.face.views.Clip} The created Clip.
*/

91
docs/rendering/gui/components/ContactButton.js Normal file
View File

@@ -0,0 +1,91 @@
/**
* Contact button, extends MenuButton to handle specifics required for contacts
*
* @class ContactButton
* @extends jibo.face.views.MenuButton
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* MenuButton uses variants, so this should be defined specifically at
* Generally used to register the class.
* @name jibo.face.views.ContactButton.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* Loop member associated with button.
* @method jibo.face.views.ContactButton#looper
* @returns {jibo.kb.loop.UserNode} Loop member associated with button.
* @readOnly
*/
/**
* Looper member associated with button.
* @name jibo.face.views.ContactButton#_looper
* @type {jibo.kb.loop.UserNode}
* @private
*/
/**
* Create a ContactButton from a configuration Object derived from JSON.
* @method jibo.face.views.ContactButton#createFromConfig
* @param {Object} configData Object derived from JSON, must be a specific format refer to examples.
* @returns {jibo.face.views.ContactButton} The ContactButton created from the given configuration.
*/
/**
* Create and add a button asset descriptor that corresponds with the type value.
* If `type` is provided as a parameter, it is applied to the internal type variable.
* Add an asset descriptor for the looper's photo, if defined.
* @method jibo.face.views.ContactButton#applyButtonType
* @param {String} [type] If definfed, applied to [MenuButton#_type]{@link jibo.face.views.MenuButton#_type},
* which is then used to determine which timeline assets to use for the button.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Destroy.
* @method jibo.face.views.ContactButton#destroy
*/
/**
* Keep reference to looper Object and use to define variables.
* @method jibo.face.views.ContactButton#assignLooper
* @param {jibo.kb.loop.UserNode} looper Reference to Looper.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Set up the timeline asset associated with the button.
* @method jibo.face.views.ContactButton#setupTimeline
* @param assets {any} Assets associated with the button.
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for toggleDown-transition executed in {@link jibo.face.views.StandardButton#down}
* @method jibo.face.views.ContactButton#toggleDownTransition
* @protected
*/
/**
* Handler for click touch input.
* If `willToggle` is `true`, toggle the check mark on each click.
* @method jibo.face.views.ContactButton#click
* @protected
*/
/**
* Show or hide the button's checkmark according to its state.
* @method jibo.face.views.ContactButton#animateToggleState
* @param {Boolean} [isToggled = false] State the button needs to be animated into
* @param {Boolean} [shouldAnimate = true] Flag determining if check mark should animate.
* @private
*/

78
docs/rendering/gui/components/ContentButton.js Normal file
View File

@@ -0,0 +1,78 @@
/**
* @interface jibo.face.views.ContentButton~ContentButtonOptions
* @extends jibo.face.views.MenuButton~MenuButtonOptions
* @description Interface describing data provided in the config.
* @prop {Boolean} [isVideo] - Flag indicating if the content in the button is video.
* @prop {jibo.face.views.ContentButton.AlbumInfo} [albumInfo] - Information about album shown in the button.
*/
/**
* @interface jibo.face.views.ContentButton~ContentButtonOptions
* @extends jibo.face.views.MenuButton~MenuButtonOptions
* @description Interface describing data provided in the config.
* @prop {Boolean} [isVideo] - Flag indicating if the content in the button is video.
* @prop {jibo.face.views.ContentButton.AlbumInfo} [albumInfo] - Information about album shown in the button.
*/
/**
* Information about album displayed on the button.
* @class AlbumInfo
* @memberof jibo.face.views.ContentButton
*/
/**
* Album title.
* @name jibo.face.views.ContentButton.AlbumInfo#title
* @type {String}
*/
/**
* Number of items in the album.
* @name jibo.face.views.ContentButton.AlbumInfo#length
* @type {Number}
*/
/**
* Content button, extends MenuButton to handle specifics required for displaying photo, video, or
* album thumbnails.
* @class ContentButton
* @extends jibo.face.views.MenuButton
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.ContentButton#DEFAULT_TYPE
* @type {String}
* @private
* @readOnly
*/
/**
* Create a ContentButton from a configuration Object derived from JSON.
* @method jibo.face.views.ContentButton#createFromConfig
* @param {Object} configData Object derived from JSON, must be a specific format refer to examples.
* @returns {jibo.face.views.ContentButton} ContentButton created from the given configuration.
*/
/**
* Assign configuration.
* @method jibo.face.views.ContentButton#assignConfig
* @param {Object} configData - Configuration to apply
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Destroy.
* @method jibo.face.views.ContentButton#destroy
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Set up the timeline asset associated with the button.
* @method jibo.face.views.ContentButton#setupTimeline
* @protected
*/

223
docs/rendering/gui/components/Element.js Normal file
View File

@@ -0,0 +1,223 @@
/**
* @description Interface describing some point in space with 'x' and 'y' properties.
* @interface jibo.face.views.Element~PointData
* @property {Number|String} [x] X value for the point
* @property {Number|String} [y] Y value for the point
*/
/**
* @description Interface for describing position of the element on the screen.
* @interface jibo.face.views.Element~PositionData
* @extends jibo.face.views.Element~PointData
* @property {Number|String} [x] X value for the position. May take numbers and such values as LEFT/CENTER/RIGHT.
* @property {Number|String} [y] Y value for the position. May take numbers and such values as TOP/CENTER/BOTTOM.
* @property {Number|jibo.face.views.Element~PointData} [margin] Sets the margin value for position specified. May be a number or {jibo.face.views.Element~PointData} structure.
*/
/**
* @description Interface for basic transformations.
* @interface jibo.face.views.Element~TransformData
* @property {Number} [scaleX] From 0 to N.
* @property {Number} [scaleY] From 0 to N.
* @property {Number} [rotate] In degrees. Positive value to rotate object clockwise. Negative value to rotate object counterclockwise.
* @property {Number} [pivotX] From 0 to 1.
* @property {Number} [pivotY] From 0 to 1.
*/
/**
* @description Interface for describing hit area of the element.
* @interface jibo.face.views.Element~HitAreaData
* @extends jibo.face.views.Element~PointData
* @property {Number} [x] X value of the hit area.
* @property {Number} [y] Y value of the hit area.
* @property {Number} [width] Width value of the hit area.
* @property {Number} [height] Height value of the hit area.
*/
/**
* @description Interface for width and height.
* @interface jibo.face.views.Element~DimensionData
* @property {Number} width Width value of the hit area
* @property {Number} height Height value of the hit area
*/
/**
* @description Interface - Configuration values for creating an Element.
* @interface jibo.face.views.Element~ElementOptions
* @extends jibo.face.views.Component~ComponentOptions
* @prop {jibo.face.views.Element~PositionData} [position] - Position of the element on the screen.
* @prop {jibo.face.views.Element~TransformData} [transform] - Transformation values to be applied to the element.
* @prop {jibo.face.views.Element~HitAreaData} [hitArea] - Structure desribing hit are a for the element.
* @prop {Boolean} [interactable] - Flag that indicates if user can interact with the element.
*/
/**
* Base class for components elements (non-groups) that appear in component
* groups (buttons, labels, .etc) Has base methods that deal with display
* and positioning.
*
* @class Element
* @extends jibo.face.views.Component
* @memberof jibo.face.views
*/
/**
* Flag determines if Element can be interactive.
* If `false` prevents locking and unlocking input from effecting the display's interactivity.
* @name jibo.face.views.Element#interactable
* @default false
* @type {boolean}
*/
/**
* Display container for the Element.
* @name jibo.face.views.Element#display
* @type {PIXI.Container}
*/
/**
* The target position.
* Can be specified prior to the creation of the display, when the display is created this position is applied.
* @name jibo.face.views.Element#targetPosition
* @type {PIXI.Point}
*/
/**
* The transformation data.
* @method jibo.face.views.Element#transformData
* @return {jibo.face.views.Element~TransformData}
*/
/**
* Set transformData for Element.
* @name jibo.face.views.Element#setTransformData
* @type {jibo.face.views.Element~TransformData}
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Assign data passed via Object to class.
* Method can be overridden to allow for manual definition of values, assets, etc.
* @method jibo.face.views.Element#assignConfig
* @param {any} configData - Object derived from JSON containing values specific to Element.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Update data representation of element with any `state` changes
* (anything that should persist between views).
* @method jibo.face.views.Element#updateConfig
* @param configData {any} - Object derived from JSON containing values specific to Element.
* @returns {any} Updated element.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Frame enter loop update, should be overridden.
* @method jibo.face.views.Element#update
* @param {number} elapsed Time in milliseconds since the last frame update.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Create Element's display and add to container.
* @method jibo.face.views.Element#createDisplay
* @param {PIXI.Container} container Parent Container which all DisplayObject
* created within this Component should be added to.
* @param {Object} assets Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for detail
*/
/**
* Set up the display.
* Assign assets, set timelines, etc.
* @method jibo.face.views.Element#setupDisplay
* @param {Object} [assets] Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for detail
*/
/**
* Destroy display's children
* Clean up all processes using display's children
* (i.e. tweens).
* @method jibo.face.views.Element#emptyDisplay
*/
/**
* Stop all tweens whose targets are children of Element's display.
* Option to stop tweens on Element's display as well.
* @param {boolean} [includeDisplay = false] If `true` will stop tween on display.
* @method jibo.face.views.Element#stopChildTweens
*/
/**
* Called by parent ComponentGroup once parent has finished its loading and setup.
* Allows opportunity to do additional setup that may depend on other components.
*
* ATTENTION: This should not be called directly, the parent View {@link jibo.face.views.View}
* will call this, which will recurse through Component tree.
* @method jibo.face.views.Element#ready
*/
/**
* Used to define the position for the display before it is created.
* @method jibo.face.views.Element#setTargetPosition
* @param {Number} [x = 0] The x position target.
* @param {Number} [y = 0] The y position target.
* @param {Boolean} [applyNow = false] Flag determining if given target position should be applied to display within this method.
* (Display must be defined for this to take effect.)
*/
/**
* Apply position that was defined in config to display's actual position.
* @method jibo.face.views.Element#applyPosition
* @public
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Open transition, defaults to vertical tween upward from below viewport.
* @method jibo.face.views.Element#open
* @param {Function} callback Function to be called once open is complete.
* @param {String} transitionType String used to determine Element's open transition,
* refer to ViewManager for constants used
* @param {number} [duration = ViewManager.TRANS_TIME] Duration in milliseconds of the transition.
* @param {String} [tweenType = 'backOut'] Type of tween used.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Close transition, defaults to vertical tween upward out of viewport.
* @method jibo.face.views.Element#close
* @param {Function} callback Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way Element's close transition,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration in milliseconds of the transition.
* @param {String} [tweenType = 'backIn'] Type of tween used.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Destroy, stops any tweens that may be active on the Elements' display.
* @method jibo.face.views.Element#destroy
*/
/**
* Lock or unlock input.
* If display is defined and interactable is `true` sets display's interactivity.
* @method jibo.face.views.Element#lockInput
* @param {Boolean} flag Determines if input is locked.
*/
/**
* Center the pivot of the display.
* Overwrite in inheriting classes
* @method jibo.face.views.Element#centerPivot
*/

155
docs/rendering/gui/components/ElementGroup.js Normal file
View File

@@ -0,0 +1,155 @@
/**
* @description Interface describing some point in space with 'x' and 'y' properties.
* @interface jibo.face.views.ElementGroup~PointData
* @property {Number|String} [x] X value for the point
* @property {Number|String} [y] Y value for the point
*/
/**
* @description Interface - Configuration values for creating an ElementGroup.
* @interface jibo.face.views.ElementGroup~ElementOptions
* @extends jibo.face.views.Component~ComponentOptions
* @prop {Boolean} [interactable] - Flag that indicates if user can interact with the element.
*/
/**
* Base class for element groups that extend component
* groups. Has base methods that deal with display
* and positioning.
*
* @class ElementGroup
* @extends jibo.face.views.ComponentGroup
* @implements jibo.face.views.IElement
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.ElementGroup.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* Flag determines if ElementGroup can be interactive.
* If `false` prevents locking and unlocking input from effecting the display's interactivity.
* @name jibo.face.views.ElementGroup#interactable
* @default false
* @type {boolean}
*/
/**
* Display container for the ElementGroup.
* @name jibo.face.views.ElementGroup#display
* @type {PIXI.Container}
*/
/**
* The target position.
* Can be specified prior to the creation of the display, when the display is created this position is applied.
* @name jibo.face.views.ElementGroup#targetPosition
* @type {PIXI.Point}
*/
/**
* Create ElementGroup from configuration.
* @method jibo.face.views.ElementGroup#createFromConfig
* @param {Object} configData Configuration to create list from.
* @returns {jibo.face.views.ElementGroup}
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Assign data passed via Object to class.
* Method can be overridden to allow for manual definition of values, assets, etc.
* @method jibo.face.views.ElementGroup#assignConfig
* @param {any} configData - Object derived from JSON containing values specific to ElementGroup.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Create ElementGroup's display and add to container.
* @method jibo.face.views.ElementGroup#createDisplay
* @param {PIXI.Container} container Parent Container which all DisplayObject
* created within this ElementGroup should be added to.
* @param {Object} assets Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for detail
*/
/**
* Set up the display.
* Assign assets, set timelines, etc.
* @method jibo.face.views.ElementGroup#setupDisplay
* @param {Object} [assets] Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for detail
*/
/**
* Destroy display's children
* Clean up all processes using display's children
* (i.e. tweens).
* @method jibo.face.views.ElementGroup#emptyDisplay
*/
/**
* Stop all tweens whose targets are children of ElementGroup's display.
* Option to stop tweens on ElementGroup's display as well.
* @param {boolean} [includeDisplay = false] If `true` will stop tween on display.
* @method jibo.face.views.ElementGroup#stopChildTweens
*/
/**
* Used to define the position for the display before it is created.
* @method jibo.face.views.ElementGroup#setTargetPosition
* @param {Number} [x = 0] The x position target.
* @param {Number} [y = 0] The y position target.
* @param {Boolean} [applyNow = false] Flag determining if given target position should be applied to display within this method.
* (Display must be defined for this to take effect.)
*/
/**
* Apply position that was defined in config to display's actual position.
* @method jibo.face.views.ElementGroup#applyPosition
* @public
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Open transition, defaults to vertical tween upward from below viewport.
* @method jibo.face.views.ElementGroup#open
* @param {Function} callback Function to be called once open is complete.
* @param {String} transitionType String used to determine ElementGroup's open transition,
* refer to ViewManager for constants used
* @param {number} [duration = ViewManager.TRANS_TIME] Duration in milliseconds of the transition.
* @param {String} [tweenType = 'backOut'] Type of tween used.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Close transition, defaults to vertical tween upward out of viewport.
* @method jibo.face.views.ElementGroup#close
* @param {Function} callback Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way ElementGroup's close transition,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration in milliseconds of the transition.
* @param {String} [tweenType = 'backIn'] Type of tween used.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Destroy, stops any tweens that may be active on the ElementGroup's display.
* @method jibo.face.views.ElementGroup#destroy
*/
/**
* Lock or unlock input.
* If display is defined and interactable is `true` sets display's interactivity.
* @method jibo.face.views.ElementGroup#lockInput
* @param {Boolean} flag Determines if input is locked.
*/

9
docs/rendering/gui/components/IElement.js Normal file
View File

@@ -0,0 +1,9 @@
/**
* Interface for elements and element groups that appear in component
* groups (buttons, labels, .etc) Has base methods that deal with display
* and positioning.
*
* @interface IElement
* @extends jibo.face.views.Component
* @memberof jibo.face.views
*/

181
docs/rendering/gui/components/Label.js Normal file
View File

@@ -0,0 +1,181 @@
/**
* @interface jibo.face.views.Label~LabelOptions
* @extends jibo.face.views.Element~ElementOptions
* @description Interface describing data provided in the config for label initialization.
* @prop {PIXI.TextStyle} [style] - Structure that describes text style.
* @prop {String} [text] - Text value shown in the label.
* @prop {jibo.face.views.Element~PointData} [targetAnchor] - Anchor point for the label.
* @prop {jibo.face.views.Element~DimensionData} [bounds] - Bounds for text. When specified font will be decreased to fit.
*/
/**
* Wraps text label in Pixi.
*
* @class Label
* @extends jibo.face.views.Element
* @memberof jibo.face.views
*/
/**
* Default value for the text style if one's missing.
* @name jibo.face.views.Label.DEFAULT_STYLE
* @type {PIXI.TextStyle}
* @readOnly
* @private
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.Label.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* Object describing the font specification used by `PIXI.Text`.
* ```
* fontSize: 100,
* fontFamily: 'Proxima Nova Soft',
* fill: '#FFFFFF',
* fontStyle: 'bold'
* wordWrap: true,
* wordWrapWidth: 100,
* align: 'center'
* ```
* @name jibo.face.views.Label#style
* @type {PIXI.TextStyle}
*/
/**
* Reference to the PIXI.Text object.
* @name jibo.face.views.Label#textDisplay
* @type {PIXI.Text}
*/
/**
* Bounds of the label component
* @name jibo.face.views.Label#_bounds
* @type {jibo.face.views.Element~DimensionData}
* @private
*/
/**
* Dimensional boundaries of the label that text display cannot exceed.
* If defined, {@link jibo.face.views.Label#style}`.fontSize` will be scaled to fit.
* Does not increase `fontSize` if text will fit provided boundaries.
* @example
* x: 300, // width
* y: 100 // height
* @name jibo.face.views.Label#bounds
* @type {jibo.face.views.Element~DimensionData}
*/
/**
* Anchor values for display, values range from 0 to 1
* and represent a percentage of the total width or height.
* If defined anchor values will be applied to display on its creation.
* @name jibo.face.views.Label#_targetAnchor
* @type {PIXI.Point}
* @private
*/
/**
* Text message to display.
* @name jibo.face.views.Label#_text
* @type {String}
* @private
*/
/**
* Keeps reference to original font size specified by style.
* A reference is necessary as the font size can be adjusted to fit the bounds.
* @name jibo.face.views.Label#_originalFontSize
* @type {String}
* @private
*/
/**
* Text to display.
* If display exists updating the text value will also update the display.
* @name jibo.face.views.Label#text
* @type {String}
*/
/**
* Helper method to create font style Objects for use with `PIXI.Text`.
* @method jibo.face.views.Label.createFontStyle
* @param {Number|String} size The size of the font.
* @param {String} family The font family/name.
* @param {String} color The font color.
* @param {String} [style] The font style (e.g. bold, italic)
* @param {String} [align] The font alignment (e.g. left, center, right)
* @returns {PIXI.TextStyle} [style] Object in format required by Pixi to define text style.
*/
/**
* Create Label from config Object.
* @method jibo.face.views.Label.createFromConfig
* @param configData {any} Configuration object to create label for.
* @returns {jibo.face.views.Label} Label created.
*/
/**
* Get the width and height of `PIXI.Text` based on current text and style.
* If text has not been defined method will use given `sampleText`, if that is not given uses an internal default.
* @method jibo.face.views.Label#getTextDimensions
* @param {String} [sampleText] Used only if {@link jibo.face.views.Label#text} is undefined.
* @returns {jibo.face.views.Element~DimensionData} Dimensions of text.
*/
/**
* Predefine the anchor point for your text. These anchors are applied when `applyTransition` is called.
* This is useful for defining anchor of the label before the display is created.
* @method jibo.face.views.Label#setTargetAnchor
* @param {int} [x = 0] - Value between 0 and 1, percentage of width where the anchor should be placed.
* @param {int} [y = 0] - Value between 0 and 1, percentage of height where the anchor should be placed.
* @param {Boolean} [applyNow = false] If `true` will apply anchor position to Text within method,
* as long as Text has been defined.
*/
/**
* Apply target position and anchors if they were defined and if display and text have been created.
* @method jibo.face.views.Label#applyPosition
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Open transition, defaults to fading alpha in from zero.
* @method jibo.face.views.Label#open
* @param {Function} [callback] Function to be called once open is complete.
* @param {String} transitionType String used to determine way Component opens,
* refer to ViewManager for constants used
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @param {String} [tweenType = sineOut] Type of tween used.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Open transition, defaults to fading alpha out to zero.
* @method jibo.face.views.Label#close
* @param {Function} [callback] Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way Component closes,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @param {String} [tweenType = sineIn] Type of tween used.
*/
/**
* Adjust text font size to fit within bounds.
* Applies autofit if bounds were specified and display and text are defined.
* @method jibo.face.views.Label#applyTextBounds
*/
/**
* Extract font size from a text style and return as a number.
* @method jibo.face.views.Label#getFontSize
* @return {number} - Font size as a number
* @private
*/

661
docs/rendering/gui/components/List.js Normal file
View File

@@ -0,0 +1,661 @@
/**
* @interface jibo.face.views.List~ListOptions
* @extends jibo.face.views.Element~ElementOptions
* @description Interface - Configuration values for creating a List.
* @prop {String} [axis] - Orientation of the list. Can be either `horizontal` or `vertical`.
* @prop {jibo.face.views.Element~ElementOptions[]} [componentConfigs] - Object containing list of element configurations contain within list.
* @prop {Boolean} [noPan = false] - If `true` disables gesture for panning left and right on list.
* @prop {Number} [elementsPerPage] - Number of elements that will appear fully on screen at a time.
* @prop {Number} [pageIndex] - Index of active page of list.
* @prop {Number} [indexOfAction] - Index of the element within list that last triggered an action.
* @prop {jibo.face.views.Element~DimensionData} [elementDimensions] - Width and height of the elements.
* @prop {Number} [elementBuffer] - Minimum space between the elements in the list.
* @prop {jibo.face.views.Element~ElementOptions} [defaultElement] - Default configuration for the elements in the list.
* @prop {Boolean} [dynamic = false] - If `true`, list elements will load as needed. If `false`, all elements assets are loaded with view.
* @prop {Boolean} [dynamicPreload = true] - Use only when `dynamic` is `true`.
* If `true` will load the assets for active elements prior to open, if `false` assets for active elements start laod after open is called.
* @prop {Number} [dynamicBuffer] - Use only when `dynamic` is `true`. Number of pages on either side of current page that will be loaded.
*/
/**
* Format for methods that will handle destroy transitioning for an Element
* @callback jibo.face.views.List~ElementTransition
* @param {jibo.face.views.Element} element - Element to transition.
* @param {Function} done - Called once transition is complete.
*/
/**
* Manage lists of elements using pagination.
*
* @class List
* @extends jibo.face.views.ComponentGroup
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.List.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* Action type triggered when page changes.
* @name jibo.face.views.List.PAN
* @type {String}
* @readOnly
*/
/**
* Action type triggered/Event string dispatched when page changes.
* @name jibo.face.views.List.PAGED
* @type {String}
* @readOnly
*/
/**
* Event dispatched when page forward attempt is made from end of list.
* @name jibo.face.views.List.AT_END
* @type {String}
* @readOnly
*/
/**
* Event dispatched when page backward attempt is made from front of list.
* @name jibo.face.views.List.AT_FRONT
* @type {String}
* @readOnly
*/
/**
* Number of elements that will appear fully on screen at a time.
* @name jibo.face.views.List#elementsPerPage
* @type {number}
*/
/**
* Number of elements permitted to remain active at
* the edge of the 'page' in addition to the elements per page,
* a value of 1 will allow the elements on either end to remain visible and active.
* @name jibo.face.views.List#numElementsAtEdge
* @type {number}
* @default 1
*/
/**
* The width and height of the elements.
* @name jibo.face.views.List#elementDimensions
* @type {jibo.face.views.Element~DimensionData}
*/
/**
* Minimum space between the elements in the list.
* Buffer is calculated during List creation to guarantee appropriate page positioning,
* and uses this value as the minimum allowable spacing between elements.
* @name jibo.face.views.List#elementBuffer
* @type {number}
* @default 20
*/
/**
* Default configuration for the elements within the list.
* Properties of `defaultElementData` are merged into the element configs on List creation,
* filling in any unspecified values.
* @name jibo.face.views.List#defaultElementData
* @type {Object}
*/
/**
* Position of list axis.
* Only horizontal lists are currently supported.
* @name jibo.face.views.List#axisPosition
* @type {number}
*/
/**
* In case of dynamic element lists, the number of pages on either side of current page that will be loaded.
* @name jibo.face.views.List#dynamicLoadBuffer
* @type {number}
* @default 1
*/
/**
* Flag to disable gestures for panning left and right on list.
* Set value before List's `createDisplay` is called to take effect.
* @name jibo.face.views.List#noPan
* @type {boolean}
* @default false
*/
/**
* Flag to determine if all the list elements will be created dynamically.
* Dynamic elements within the list are not supported yet, so this should remain false.
* The use case for dynmic creation be for a list with a large or unknown number of elements.
* @name jibo.face.views.List#dynamicElements
* @type {boolean}
* @default false
*/
/**
* Flag to include assets for elements that are in initial load range as part of the assets included in the View setup.
* This guarantees that the initially visible elements will have their required assets when the View is opened.
* @name jibo.face.views.List#dynamicPreload
* @type {boolean}
* @default false
*/
/**
* `true` to allow automatic recalculation of elementsPerPage to fit as many elements on page as possible, `false` to respect elementsPerPage
* @name jibo.face.views.List#autoFitElements
* @type {Boolean}
* @default true
*/
/**
* `true` to display portion of elements from next pages at edge of screen, `false` to disable it
* @name jibo.face.views.List#pageHinting
* @type {Boolean}
* @default true
*/
/**
* Get the standard distance between element positions, calculated from element dimensions and buffer.
* @name jibo.face.views.List#elementSpacing
* @type {number}
*/
/**
* Whether the list requires a pan or not, determine at ready.
* @name jibo.face.views.List#_requiresPan
* @type {Boolean}
* @private
*/
/**
* In case of list with multiple pages, amount element for next page appears on screen.
* Determines amount element shows to indicate there are more elements in that direction.
* @name jibo.face.views.List#EDGE_HINT
* @type {Number}
* @constant
* @private
*/
/**
* The max distance of buffer 'spread' when scrolling.
* @name jibo.face.views.List#BUFFER_SPREAD
* @type {number}
* @constant
* @private
*/
/**
* Minimum amount of pan distance required for page change.
* @name jibo.face.views.List#PAN_THRESHOLD
* @type {int}
* @constant
* @private
*/
/**
* The max distance of buffer 'spread' when panning.
* @name jibo.face.views.List#PAN_SPREAD
* @type {number}
* @constant
* @private
*/
/**
* Constant springs value used for spring movement.
* @name jibo.face.views.List#SPRING
* @type {number}
* @constant
* @private
*/
/**
* Constant friction value applied to spring movement.
* @name jibo.face.views.List#FRICTION
* @type {int}
* @type {number}
* @constant
* @private
*/
/**
* The threshold the velocity must surpass in order to start the 'spread' between elements.
* Assume a velocity of 0 if the velocity gets below or equal to this threshold.
* @name jibo.face.views.List#REST_THRESHOLD
* @type {number}
* @constant
* @private
*/
/**
* The x delta that all list elements must be below in order to unlock inputs during a swipe.
* @name jibo.face.views.List#SWIPE_THRESHOLD
* @type {number}
* @constant
* @private
*/
/**
* The axis of the list, only supports horizontal for now.
* @name jibo.face.views.List#_axis
* @type {String}
* @default 'horizontal'
* @private
*/
/**
* List of Elements currently awaiting assets to load.
* @name jibo.face.views.List#_loadingElements
* @type {jibo.face.views.Element[]}
* @private
*/
/**
* left page bound
* @name jibo.face.views.List#_leftPageBound
* @type {number}
* @private
*/
/**
* right page bound
* @name jibo.face.views.List#_leftPageBound
* @type {number}
* @private
*/
/**
* Current page the list is on, 0 being the first page.
* @name jibo.face.views.List#_pageIndex
* @type {int}
* @private
*/
/**
* The current element offset of the pages.
* @name jibo.face.views.List#_pageElementOffset
* @type {int}
* @private
*/
/**
* The list index of the element that last triggered an action.
* @name jibo.face.views.List#_indexOfAction
* @type {number}
* @private
*/
/**
* The current page the list is on, 0 being the first page.
* @name jibo.face.views.List#pageIndex
* @type {number}
* @readOnly
*/
/**
* Maximum buffer distance, this is the standard buffer plus the max distance of buffer 'spread' when scrolling
* @name jibo.face.views.List#_bufferMax
* @type {int}
* @private
*/
/**
* Current type of movement, refer to Movement enum for values.
* @name jibo.face.views.List#_currentMovement
* @type {int}
* @private
*/
/**
* Total distance of the list has mpved from when pan began.
* This is reset to zeroed once the pan stops.
* @name jibo.face.views.List#_panTotalDelta
* @type {number}
* @private
*/
/**
* Holds index range for active elements.
* For use in dynamic lists where we don't want to keep calculating the active range.
* @name jibo.face.views.List#_dynamicActiveIndexRange
* @type {number[]}
* @private
*/
/**
* Create List from configuration.
* @method jibo.face.views.List#createFromConfig
* @param {Object} configData Configuration to create list from.
* @returns {jibo.face.views.List}
*/
/**
* Add Element to the List.
* Assigns the Element's index within the list to the Element.index variable.
* @method jibo.face.views.List#addComponent
* @param {jibo.face.views.Element} element The Element to add this group's component list and library.
* @param {String} [elementId] The id to assign to the Element, if specified will overwrite existing id,
* if none is specified an id will be automatically generated and assigned.
* @returns {jibo.face.views.Element} Returns the given Element.
*/
/**
* Remove Element from list, ultimately destroying the Element.
* @method jibo.face.views.List#removeComponent
* @param {jibo.face.views.Component|Number|String} componentDeterminer - Provide Component, index of component, or id of component to remove.
* @param {Function} [done] - Callback for when element has been fully removed.
* @param {jibo.face.views.List~ElementTransition} [transition] - Optional method to transition element prior to destruction, if not defined uses default.
* @returns {jibo.face.views.Component}
*/
/**
* Compiles together Objects that describe the assets to load from this Component and its children.
* If list is dynamic, only loads an asset to display loading, the element asset are then loaded on the fly.
* @name jibo.face.views.List#assetDescriptors
* @type {jibo.face.views~AssetDescriptor[]}
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Updates the indexes, so list can remember which page it was on when it closed and what element closed it.
* @method jibo.face.views.List#updateConfig
* @param {Object} [configData] Object defining configuration.
* @returns {Object}
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Create the display, sets up touch controls.
* @method jibo.face.views.List#createDisplay
* @param {PIXI.Container} container Parent Container which all DisplayObject
* created within this Component should be added to.
* @param {Object} [assets] Object passed back from loader namespace load method,
* refer to loader namespace within jibo for details.
*/
/**
* Called by parent ComponentGroup once parent has finished its loading and setup.
* Allows opportunity to do additional setup that may depend on other components.
* Register for update if multiple pages are required. Also register for panning if its not disabled.
*
* ATTENTION: This should not be called directly, the top level View {@link jibo.face.views.View}
* will call this, which will recurse through Component tree.
* @method jibo.face.views.List#ready
*/
/**
* Destroy, unregister for update, remove gestures.
* Should not be called directly, is called through the owning ComponentGroup
* @method jibo.face.views.List#destroy
*/
/**
* Lock input for List and all child Components,
* and activate or deactivate gestures.
* @method jibo.face.views.List#lockInput
* @param {Boolean} [flag = true] - Flag for pausing or un-pausing the Component.
*/
/**
* Turn the interactivity of the child components off or on.
* @method jibo.face.views.List#lockChildInput
* @param {boolean} flag - flag to turn interactivity on or off.
* @protected
*/
/**
* Open the list, has unique implementation for vertical transitions (TRANS_UP, TRANS_DOWN, & TRANS_EYE).
* Once open is complete start registering for pans if criteria are met.
* Should not be called directly, is called through the owning ComponentGroup
* @method jibo.face.views.List#open
* @param {Function} callback Function to be called once open is complete.
* @param {String} transitionType String used to determine way Component opens,
* refer to ViewManager for constants used
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @param {String} [tweenType = 'backOut'] Type of tween used.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Close the list, has unique implementation for vertical transitions (TRANS_UP, TRANS_DOWN, & TRANS_EYE).
* Should not be called directly, is called through the owning ComponentGroup.
* @method jibo.face.views.List#close
* @param {Function} callback Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way Component closes,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @param {String} [tweenType = 'backIn'] Type of tween used.
*/
/**
* Bubble up action to parent, keep a reference to the index of the element that triggered action for later use with transitions.
* @method jibo.face.views.List#actionHandler
* @param {jibo.face.views.ActionData} action Contains string for type of action and Object with any pertinent data required for that action type.
* @param {jibo.face.views.Component} [fromComponent] Component that triggered action.
*/
/**
* Blocks actions from reaching child Elements.
* Listens for actions that will effect the page to change,
* namely ActionData.SWIPE_RIGHT, ActionData.SWIPE_LEFT
* @method jibo.face.views.List#actionEnactor
* @param {jibo.face.views.ActionData} action Contains string for type of action and data Object with any pertinent data dependent on action type.
* @return {boolean} Returns true if given action is acted on.
*/
/**
* Move forward or backward one page.
* @method jibo.face.views.List#changePage
* @param {Boolean} [pageForward = true] - If `true` moves forward through the list, if `false` moves backwards.
* @return {Boolean} `true` if list was able to change pages
*/
/**
* Move to start or end of list.
* @method jibo.face.views.List#pageToEnd
* @param {Boolean} [pageToFront = false] - If `true` moves to the beginning of the list, if `false` moves to end of the list.
* @return {Boolean} `true` if list was able to change pages
*/
/**
* Get the start index of the element for the given page index.
* Make sure page index is set before using as it to guarantees offsets is correct.
* The offset guarantees that pages will always show the max elements per page,
* leaving no 'empty' slots when the page displays.
* @method jibo.face.views.List#getStartIndexByPage
* @param {number} pageIndex The index of the page.
* @return {number} The adjusted start index for the page, so that the page is always 'full'.
* @public
*/
/**
* Set the active page index.
* Updates variables that keep track of element offset and range for dynamic elements.
* @method jibo.face.views.List#setActivePage
* @param {number} index - index of page
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL FROM EXTERNAL CLASS.
*
* Custom list open for opening vertically.
* Should not be called directly, but from within List.open()
* @method jibo.face.views.List#openVertical
* @param {Function} callback Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way Component closes,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @param {String} [tweenType = 'backIn'] Type of tween used.
* @private
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL FROM EXTERNAL CLASS.
*
* Custom list close for closing vertically.
* Should not be called directly, but from within List.close()
* @method jibo.face.views.List#closeVertical
* @param {Function} callback Function to be called once open is complete.
* @param {String} [transitionType] String used to determine way Component closes,
* refer to ViewManager for constants used.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @param {String} [tweenType = 'backIn'] Type of tween used.
* @private
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL FROM EXTERNAL CLASS.
*
* Custom list open for opening from an EyeView.
* Should not be called directly, but from within List.open()
* @method jibo.face.views.List#openFromEye
* @param {Function} callback Function to be called once open is complete.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @private
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL FROM EXTERNAL CLASS.
*
* Custom list close for closing an EyeView.
* Should not be called directly, but from within List.close()
* @method jibo.face.views.List#closeToEye
* @param {Function} callback Function to be called once open is complete.
* @param {number} [duration = ViewManager.TRANS_TIME] Duration of the transition.
* @private
*/
/**
* Load and destroy elements dynamically based on page index.
* @method jibo.face.views.List#dynamicElementsPageChange
* @param {number} pageIndex - Page index to reference for dynamic loading, generally the current page.
* @private
*/
/**
* Enables recursive iteration through each asset descriptor in given object, loading each individually.
* This is to reduce the impact of one bad asset corrupting a load batch.
* @method jibo.face.views.List#iterativeLoad
* @param {any} assetsToLoad Object containing AssetDescriptors using their id as key
* @private
*/
/**
* Run through list of loading components and check to see if their required assets have been loaded.
* If assets are available update display.
* @method jibo.face.views.List#assignElementAssets
* @private
*/
/**
* Remove loader display and create Element's display now that assets are available.
* @method jibo.face.views.List#updateElementDisplay
* @param {jibo.face.views.Element} element - Element to update.
* @private
*/
/**
* Remove loader stand-in and create Element's display now that assets are available.
* @method jibo.face.views.List#emptyElementDisplay
* @param {jibo.face.views.Element} element - Element to empty display.
* @private
*/
/**
* Set the list element targets based on page index.
* This is used in conjunction with changePage().
* @method jibo.face.views.List#setTargetsByPage
* @param {number} pageIndex - we can expect that the pageIndex is possible
* @private
*/
/**
* Set the list element targets based on touch input.
* This is used when panning the list.
* @method jibo.face.views.List#setTargetsByInput
* @param {number} panState The t of the pan, refer to Pan Case enum for valid states
* @param {number} velocity The velocity of the pan, equal to the delta of the mouse x position since last update
* @param {number} inputX - Position x of input.
* @private
*/
/**
* Updates the position of the list elements by springing them toward their targets.
* @method jibo.face.views.List#springUpdate
* @private
*/
/**
* Setup panning, determining the pan state and setting spring strength.
* The parameters are supplied by the GestureManager.
* @method jibo.face.views.List#pan
* @param {number} inputX - Position x of input.
* @param {number} velocity - Distance input has moved since last GestureManager dispatch.
* @private
*/
/**
* Stop panning.
* @method jibo.face.views.List#panStop
* @private
*/
/**
* Handler for events sent from pan gesture.
* @method jibo.face.views.List#onPanEvent
* @param {Object} event - Event object sent from HammerJS's Pan gesture.
* @private
*/
/**
* Check the input events received from the gesture manager.
* @method jibo.face.views.List#checkGestureInput
* @param {Boolean} active - Flag determining if pan is active.
* @param {Number} [inputX = 0] - Current x position of pan input.
* @param {Number} [deltaX = 0] - Difference between start position on current position of pan input.
* @private
*/
/**
* Default transition for removing a list element.
* @method jibo.face.views.List#elementRemovalTransition
* @param {jibo.face.views.Element} element - Element from list to destroy
* @param {Function} done - Callback when transition is complete
* @private
*/
/**
* Destroy a single element, removal of element form the list is handle in List.
* Removes assets associated with Element, while checking for asset conflicts.
* @method jibo.face.views.List#destroyElement
* @param {jibo.face.views.Element} element - Element from list to destroy
* @param {Function} [done] - Callback when destruction of element is complete
* @private
*/
/**
* Merge Component configurations together.
* @method jibo.face.views.List#mergeConfigs
* @param {Object} data - Object that defaultData is merging into and that will be returned.
* @param Object} defaultData - Object to merge into data
* @param {Boolean} [mergeArrays = true] - if `true` will merge Arrays together, if 'false' arrays will overwrite each other.
* @returns {Object} - resulting object from merge.
* @private
*/
/**
* Returns page index that has been tested against the number of elements in list.
* Does not adjust the original parameter.
* @method jibo.face.views.List#normalizePageIndex
* @param {Number} pageIndex The index of the page
* @return {Number} the normalized page index
* @private
*/

112
docs/rendering/gui/components/ListProgress.js Normal file
View File

@@ -0,0 +1,112 @@
/**
* @typedef jibo.face.views.ListProgress~ListProgressOptions
* @description Interface - Configuration values for creating a ListProgress.
* @prop {number} [width] - Value for the desired width of the component.
* @prop {number} [height] - Value for the desired height of the component.
* @prop {number} [backgroundColor] - Background color value.
* @prop {number} [progressColor] - Progress color value.
* @prop {Object} [position] - An object with 'x' and 'y' properties.
*/
/**
* Indicate current position (page) while navigating in MenuView.
*
* @class ListProgress
* @extends jibo.face.views.Element
* @memberof jibo.face.views
*/
/**
* Default value for WIDTH of the component.
* @name jibo.face.views.ListProgress.DEFAULT_WIDTH
* @type {number}
* @readOnly
* @private
*/
/**
* Default value for HEIGHT of the component.
* @name jibo.face.views.ListProgress.DEFAULT_HEIGHT
* @type {number}
* @readOnly
* @private
*/
/**
* Default value for backgroundColor of the component.
* @name jibo.face.views.ListProgress.BACKGROUND_COLOR
* @type {number}
* @readOnly
* @private
*/
/**
* Default value for progressColor of the component.
* @name jibo.face.views.ListProgress.PROGRESS_COLOR
* @type {number}
* @readOnly
* @private
*/
/**
* Set of options which are used to specify position, size and look of progress bar
* @name jibo.face.views.ListProgress#_listProgressOptions
* @type {jibo.face.views.ListProgress~ListProgressOptions}
* @private
*/
/**
* Graphics instance that represents progress bar
* @name jibo.face.views.ListProgress#_progressDisplay
* @type {PIXI.Graphics}
* @private
*/
/**
* Graphics instance that represents background
* @name jibo.face.views.ListProgress#_backgroundDisplay
* @type {PIXI.Graphics}
* @private
*/
/**
* Last passed-in page index from MenuView
* @name jibo.face.views.ListProgress#_pageIndex
* @type {number}
* @private
*/
/**
* Last passed-in pages count from MenuView
* @name jibo.face.views.ListProgress#_pagesCount
* @type {number}
* @private
*/
/**
* The radius of the round corner to be drawn on the left and right of the progress bar
* @name jibo.face.views.ListProgress#_cornerRadius
* @type {number}
* @private
*/
/**
* Set up the display.
* Assign assets, set timelines, etc.
* @method jibo.face.views.ListProgress#setupDisplay
* @param {Object} [assets] Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for detail
*/
/**
* Updates progress position based on provided current page and pages quantity available in the MenuView
* @method jibo.face.views.ListProgress#updatePage
* @param {number} [pageIndex = -1] Index of the current page
* @param {number} [pagesCount = -1] Number of pages available in MenuView
*/
/**
* Retrieves the actual height of the component.
* @method jibo.face.views.ListProgress#getHeight
* @type {Number}
*/

152
docs/rendering/gui/components/MenuButton.js Normal file
View File

@@ -0,0 +1,152 @@
/**
* @interface jibo.face.views.MenuButton~MenuButtonOptions
* @extends jibo.face.views.StandardButton~StandardButtonOptions
* @description Interface describing data provided in the config.
* @prop {Number[]|String} [colors] - Array with colors that can be used for button filling.
* @prop {String} [label] - Value for the text label to be shown for the button.
* @prop {String} [iconSrc] - Path to the icon placed inside of the button.
*/
/**
* @interface jibo.face.views.MenuButton~ButtonData
* @description Interface for required data for MenuButton types.
* @prop {String} assetPath - Path to button timeline source.
* @prop {jibo.face.views.Element~DimensionData} dimensions - Width and height of button.
* @prop {String} [cache] - Optionally define cache.
*/
/**
* Menu button.
*
* @class MenuButton
* @extends jibo.face.views.StandardButton
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.MenuButton.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* Text to appear below the MenuButton
* @name jibo.face.views.MenuButton#label
* @type {String}
*/
/**
* MovieClip that may be placed inside of the MenuButton instead of a static image
* @name jibo.face.views.MenuButton#iconMovieClip
* @type {PIXI.animate.MovieClip}
*/
/**
* Array of 2 colors to be applied to button base.
* @name jibo.face.views.MenuButton#_colors
* @type {number[]}
* @private
*/
/**
* Mapping for button-specific data.
* @name jibo.face.views.MenuButton#_buttonURIs
* @type {Object}
* @private
*/
/**
* String identifier for skill button.
* @name jibo.face.views.MenuButton.SKILL
* @type {string}
* @readOnly
*/
/**
* String identifier for action button.
* @name jibo.face.views.MenuButton.ACTION
* @type {string}
* @readOnly
*/
/**
* String identifier for large action button.
* @name jibo.face.views.MenuButton.ACTION_BIG
* @type {string}
* @readOnly
*/
/**
* The predefined dimensions of the button.
* This only returns the dimensions that have been explicitly set;
* it does not return the dimensions of the display itself.
* @name jibo.face.views.MenuButton#dimensions
* @type {jibo.face.views.Element~DimensionData}
* @readOnly
*/
/**
* Array of 2 colors to be applied to button base. If set to a value of `default`, `confirm`,
* or `cancel` uses the global color for that button type.
* @name jibo.face.views.MenuButton#colors
* @type {number[]}
*/
/**
* Get button data object.
* @method jibo.face.views.MenuButton.getButtonData
* @param {string} type - Type of button.
* @returns {jibo.face.views.MenuButton~ButtonData} ButtonData for the object.
* @protected
*/
/**
* Add button data object.
* @method jibo.face.views.MenuButton.addButtonData
* @param {string} type - Type of button.
* @param {string} assetPath - Path to button timeline src.
* @param {jibo.face.views.Element~DimensionData} dimensions - Width and height of button.
* @param {string} [cache] - Optionally define cache.
* @returns {jibo.face.views.MenuButton~ButtonData} ButtonData for the object.
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Set up the display.
* Assign assets, set timelines, etc.
* @method jibo.face.views.MenuButton#setupDisplay
* @param {Object} [assets] Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for detail.
*/
/**
* Set new icon for MenuButton.
* @method jibo.face.views.MenuButton#setIcon
* @param {PIXI.DisplayObject} icon DisplayObject instance to use as new icon.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL EXTERNALLY.
* Define the interactive hit area of the display.
* The DisplayObject.hitArea is what Pixi uses to define the interactive area.
* @method jibo.face.views.MenuButton#setupHitArea
* @param {PIXI.Rectangle} [bounds] Optionally specify the bounds for the hit area.
* If not defined, defaults to using the display's bounds.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Destroy.
* @method jibo.face.views.MenuButton#destroy
*/
/**
* Assign colors to display, works for 'Menu' style buttons.
* @method jibo.face.views.MenuButton#applyColors
* @private
*/

246
docs/rendering/gui/components/StandardButton.js Normal file
View File

@@ -0,0 +1,246 @@
/**
* Animates view according to its toggled state
* @callback jibo.face.views.StandardButton~ToggleAnimate
* @param {Boolean} toggleOn Value to assign to flag holding button's current toggle state
* @param {Boolean} [shouldAnimate = false] `true` to animate state change.
*/
/**
* @interface jibo.face.views.StandardButton~StandardButtonOptions
* @extends jibo.face.views.Element~ElementOptions
* @description Interface describing data provided in the config.
* @prop {Boolean} [willToggle] - Flag that indicates whether button will be toggleable or not.
* @prop {Boolean} [toggledOn] - Value indicating current state of the button
* @prop {jibo.face.views.StandardButton~ToggleAnimate} [toggleAnimate] - Function that performs animation for the changes of the toggling state
*/
/**
* StandardButton element.
* Describes general behavior for buttons when graphical asset responses to basic touch events.
*
* @class StandardButton
* @extends jibo.face.views.Button
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.StandardButton#DEFAULT_TYPE
* @type {String}
* @private
* @readOnly
*/
/**
* FOR OVERRIDE ONLY. DO NOT ALTER.
*
* The Class name as a string.
* @name jibo.face.views.StandardButton#_type
* @type {String}
* @protected
*/
/**
* Scale value for down state of button.
* @name jibo.face.views.StandardButton#downScale
* @type {number}
*/
/**
* Scale value for activate state of button.
* @name jibo.face.views.StandardButton#activateScale
* @type {number}
*/
/**
* Duration of tweens for button state changes.
* @name jibo.face.views.StandardButton#tweenTime
* @type {number}
*/
/**
* Flag that indicates whether button will be toggleable or not.
* @name jibo.face.views.StandardButton#willToggle
* @type {Boolean}
* @default false
*/
/**
* Flag that indicates whether button will do default down-state transitions
* @name jibo.face.views.StandardButton#disableStateAnimations
* @type {Boolean}
* @default false
*/
/**
* Flag determining current toggle state of the button
* @name jibo.face.views.StandardButton#_toggledOn
* @type {Boolean}
* @default false
* @private
*/
/**
* Create a StandardButton from a configuration Object derived from JSON.
* @method jibo.face.views.StandardButton.createFromConfig
* @param {Object} configData Object derived from JSON, must be a specific format refer to examples.
* @returns {jibo.face.views.StandardButton} The StandardButton created from the given configuration.
*/
/**
* Create a StandardButton object by passing the DisplayObject and specifying the {@link jibo.face.views.ActionData}.
* This allows for a more direct way to create Buttons that is not reliant on the configuration data.
* @method jibo.face.views.StandardButton.createFromDisplayObject
* @param {PIXI.DisplayObject} displayObject The DisplayObject with the button assets.
* @param {jibo.face.views.ActionData} [actionData] The action to be triggered on button click.
* @param {PIXI.Container} container Display container for the button.
* @returns {jibo.face.views.StandardButton} The created StandardButton.
*/
/**
* Optional function that implements animation switching of toggle state
* @name jibo.face.views.StandardButton#toggleAnimate
* @type {jibo.face.views.StandardButton~ToggleAnimate}
*/
/**
* Returns button's current toggle state value
* @method jibo.face.views.StandardButton#toggledOn
* @returns {Boolean} `true` if the button is currently toggled
* @readOnly
*/
/**
* The display containing the button assets.
* Additionaly this is the DisplayObject that transforms are applied to for button states.
* @name jibo.face.views.StandardButton#buttonDisplay
* @type {PIXI.Container}
* @readOnly
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Assign data passed via Object to class.
* Method can be overridden to allow for manual definition of values, assets, etc.
* @method jibo.face.views.StandardButton#assignConfig
* @param {any} configData - Object derived from JSON containing values specific to StandardButton.
*/
/**
* Destroy display's children and stop tweens on content.
* @method jibo.face.views.StandardButton#emptyDisplay
*/
/**
* Set up the display.
* Assign assets, set timelines, etc.
* @method jibo.face.views.StandardButton#setupDisplay
* @param {Object} [assets] - Object passed back from loader namespace load method,
* refer to {@link jibo.loader} for details.
*/
/**
*
* Add asset to content container of button, content is effected by state change transitions (e.g. down, out, up)
* If the given asset is a PIXI.Sprite a center registration is applied,
* in all other cases it is expected that the assets has been given appropriate registration.
* @method jibo.face.views.StandardButton#addToContent
* @param {PIXI.DisplayObject} asset DisplayObject instance to be placed within content container.
* @param {PIXI.Container} [container] If not specified will uses default content container.
* @param {boolean} [emptyContent = false] If `true` will empty content of all children
*/
/**
* Method to change the state of the button and trigger visual change of the state
* @method jibo.face.views.StandardButton#toggle
* @param {Boolean} toggleOn Value to assign to flag holding button's current toggle state
* @param {Boolean} [animate = true] `true` to animate state change.
*/
/**
* Activate the button. Used for non-touch input.
* @method jibo.face.views.StandardButton#activate
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for out-transition executed in {@link jibo.face.views.StandardButton#out}
* @method jibo.face.views.StandardButton#outTransition
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for toggleOut-transition executed in {@link jibo.face.views.StandardButton#out}
* @method jibo.face.views.StandardButton#toggleOutTransition
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for down-transition executed in {@link jibo.face.views.StandardButton#down}
* @method jibo.face.views.StandardButton#downTransition
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for toggleDown-transition executed in {@link jibo.face.views.StandardButton#down}
* @method jibo.face.views.StandardButton#toggleDownTransition
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for up-transition executed in {@link jibo.face.views.StandardButton#up}
* @method jibo.face.views.StandardButton#upTransition
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Handler for toggleUp-transition executed in {@link jibo.face.views.StandardButton#up}
* @method jibo.face.views.StandardButton#toggleUpTransition
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Animation for simple button behavior when it's pressed down
* @method jibo.face.views.StandardButton#animateDown
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Animation for simple button behavior when touch event is released
* @method jibo.face.views.StandardButton#animateUp
* @protected
*/
/**
* This method takes array of functions and starts them asynchronously
* @method jibo.face.views.StandardButton#executeAsyncTransitions
* @param {any[]} [transitionArray] Array of transition functions to be executed in parallel
* @param {Function} [callback] Function to execute once execution is done
* @private
*/
/**
// * Handler for when transitions are all complete.
// * @method jibo.face.views.StandardButton#transitionComplete
// * @param {Function} callback The callback triggered once transitions are completed
// * @param {Error} [err] Error returns if there is an issue with the asynchronous method.
// * @param {any[]} [results] Results returned from asynchronous method, will be empty.
// * @private
// */

31
docs/rendering/gui/components/subcomponents/ListMember.js Normal file
View File

@@ -0,0 +1,31 @@
/**
* Subcomponent identifier.
* @name jibo.face.views.ListMember.ID
* @type {String}
* @default 'ListMember'
* @readOnly
*/
/**
* Target position of list member.
* @name jibo.face.views.ListMember.targetPosition
* @type {PIXI.Point}
*/
/**
* Velocity of list member.
* @name jibo.face.views.ListMember.velocity
* @type {PIXI.Point}
*/
/**
* Offset from target.
* @name jibo.face.views.ListMember.targetOffset
* @type {Number}
*/
/**
* If assets are loaded for owning Component.
* @name jibo.face.views.ListMember.loaded
* @type {Boolean}
*/

39
docs/rendering/gui/components/subcomponents/Subcomponent.js Normal file
View File

@@ -0,0 +1,39 @@
/**
* Subcomponent identifier.
* @name jibo.face.views.Subcomponent.TYPE
* @type {String}
* @default 'TouchInteractive'
* @readOnly
*/
/**
* Type of Subcomponnet, used for identification
* @name jibo.face.views.Subcomponent#type
* @type {String}
* @readOnly
*/
/**
* Owning Component.
* @name jibo.face.views.Subcomponent.component
* @type {Boolean}
* @protected
*/
/**
* Type of Subcomponent, used for mapping storage and retrieval.
* @name jibo.face.views.Subcomponent._type
* @type {String}
* @private
*/
/**
* Initialize Subcomponent.
* @method jibo.face.views.Subcomponent#init
* @param {jibo.face.views.Component} component - Component this Subcomponent is being added to.
*/
/**
* Destroy.
* @method jibo.face.views.Subcomponent#destroy
*/

64
docs/rendering/gui/components/subcomponents/TouchInteractive.js Normal file
View File

@@ -0,0 +1,64 @@
/**
* Subcomponent identifier.
* @name jibo.face.views.TouchInteractive.TYPE
* @type {String}
* @default 'TouchInteractive'
* @readOnly
*/
/**
* Whether interactivity is active or not.
* @name jibo.face.views.TouchInteractive.isActive
* @type {Boolean}
*/
/**
* Object of array of actions, with gesture type as key.
* @name jibo.face.views.TouchInteractive._gestureActions
* @type {Object.<string, jibo.face.views.ActionData>}
* @private
*/
/**
* Destroy
* @method jibo.face.views.TouchInteractive#destroy
*/
/**
* Add a {@link jibo.face.views.ActionData}. All actions with will be triggered on triggerActions.
* Generally these actions are triggered on a screen press (if a screen press is set up).
* @method jibo.face.views.TouchInteractive#addAction
* @param {jibo.face.views.ActionData} actionData - The action to be triggered on tap.
* @param {boolean} [clearPrevious = false] Flag to determine if we should clear out the existing actions.
* @param {boolean} [toFront = false] If `true` adds action to front of actions list, causing it to be called first when actions are triggered.
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] Gesture actions are related to.
* @returns {jibo.face.views.ActionData} The ActionData added.
*/
/**
* Returns `true` if there are actions associated with given gesture type.
* @method jibo.face.views.TouchInteractive#hasActions
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] Gesture actions are related to.
* @returns {boolean} `true` if there are actions associated with given gesture type.
*/
/**
* Get actions associated with given gesture type.
* @method jibo.face.views.TouchInteractive#getActions
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] Gesture actions are related to.
* @return {jibo.face.views.ActionData[]} Actions associated with the given gesture type.
*/
/**
* Clear all actions associated with given gesture type.
* @method jibo.face.views.TouchInteractive#clearActions
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] Gesture actions are related to.
*/
/**
* Trigger actions associated with given gesture type.
* Calls Component or the Component parent's actionHandler for each action.
* @method jibo.face.views.TouchInteractive#triggerActions
* @param {jibo.face.views.GESTURE} [gesture = 'tap'] Gesture actions are related to.
* @return {boolean} `true` if at least one action was triggered.
*/

62
docs/rendering/gui/views/ContactsView.js Normal file
View File

@@ -0,0 +1,62 @@
/**
* Sort the list of Loop members.
* @callback jibo.face.views.ContactsView~LoopListSort
* @param loopList {jibo.kb.loop.UserNode[]} List of Loop members to sort.
*/
/**
* Check to see if a Loop member is in the list.
* @callback jibo.face.views.ContactsView~LooperCheck
* @param looper {jibo.kb.loop.UserNode} Loop member to check the list for.
* @return {Boolean} `true` if the Looper exists in the list.
*/
/**
* Menu display for a list of Contacts.
*
* @class ContactsView
* @extends jibo.face.views.MenuView
* @memberof jibo.face.views
*/
/**
* Optional function used to edit the looper list.
* Should determine what ContactButtons are created and in what order.
* Need to take and return an array of Loop members.
* If not explicitly defined will be set to a default when createListComponents is called.
* @name jibo.face.views.ContactsView#sortLoopList
* @type {jibo.face.views.ContactsView~LoopListSort}
*/
/**
* Optional function used to determine if a ContactButton's checkmark should be displayed.
* Requires a Looper and return a boolean.
* If true is returned, a checkmark on the Loop member's ContactButton will be displayed.
* @name jibo.face.views.ContactsView#determineCheck
* @type {jibo.face.views.ContactsView~LooperCheck}
*/
/**
* Optional parameters indicating whether show the "Not a Loop Member" button.
* @name jibo.face.views.ContactsView#showNotALoopMemberButton
* @type {Boolean}
*/
/**
* @name jibo.face.views.ContactsView#_loopMembers
* @type {jibo.kb.loop.UserNode[]}
* @private
*/
/**
* Destroy.
* @method jibo.face.views.ContactsView#destroy
*/
/**
* Default LoopListSort used to edit list of Loop members.
* @method jibo.face.views.ContactsView#removeInvalidLoopers
* @param {jibo.kb.loop.UserNode[]} loopList List of Loop members objects
* @returns {jibo.kb.loop.UserNode[]} The edited list of Loop members objects
* @private
*/

29
docs/rendering/gui/views/EyeView.js Normal file
View File

@@ -0,0 +1,29 @@
/**
* View class that serves as a container for the Eye.
*
* @class EyeView
* @extends jibo.face.views.View
* @memberof jibo.face.views
*/
/**
* Construct View
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Adjust provided transition before calling inherited method.
* @method jibo.face.views.EyeView#open
* @param {Function} [callback] - Callback fired when close is complete, can also listen for View.OPENED event.
* @param {String} [transitionType] - This will be ignored as EyeView defines its own transition types.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* We want to override the close transition type for EyeView
* @method jibo.face.views.EyeView#close
* @param {Function} [callback] - Callback fired when close is complete, can also listen for View.CLOSED event.
* @param {String} [transitionType] - This will be ignored as EyeView defines its own transition types.
*/

70
docs/rendering/gui/views/ImageView.js Normal file
View File

@@ -0,0 +1,70 @@
/**
* @description Interface - Configuration values for creating a ImageView.
* @interface jibo.face.views.ImageView~ImageViewOptions
* @extends jibo.face.views.View~ViewOptions
* @prop {AssetDescriptor} [image] - Relative source path to the resource.
*/
/**
* View designed to display standard Clips.
*
* Takes a simplified JSON configuration. Example:
* ```json
* {
* "viewConfig": {
* "type": "ImageView",
* "id": "my_image_view",
* "image": {
* "id": "clipTest",
* "src": "resources/images/my-image.png",
* "type": "texture"
* },
* "scaleToFit": true
* }
* }
* ```
* @class ImageView
* @extends jibo.face.views.View
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.ImageView.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* If clip is smaller than screen determine if it should be stretched to fit
* @name jibo.face.views.ImageView#scaleToFit
* @type {boolean}
* @public
*/
/**
* AssetDescriptor for the ImageView's Clip
* @name jibo.face.views.ImageView.imageDescriptor
* @type {jibo.face.views~AssetDescriptor}
* @public
*/
/**
* Clip for the ImageView.
* @name jibo.face.views.MenuView#clip
* @public
* @readOnly
* @type {jibo.face.views.Clip}
*/
/**
* Construct ImageView
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL EXTERNALLY.
*
* Determine x and y positions for the clip element, and its scaling relative to the screen.
* @method jibo.face.views.ImageView#positionComponents
*/

208
docs/rendering/gui/views/MenuView.js Normal file
View File

@@ -0,0 +1,208 @@
/**
* @description Interface for describing default values of the list elements that will be shown in the MenuView.
* @interface jibo.face.views.MenuView~ListDefaultData
* @extends jibo.face.views.MenuButton~MenuButtonOptions
* @property {String} [menuButtonType] The name of the MenuButton type that will be generated in the list.
*/
/**
* @description Interface - Configuration values for creating a MenuView.
* @interface jibo.face.views.MenuView~MenuViewOptions
* @extends jibo.face.views.View~ViewOptions
* @prop {String} [title] - Position of the element on the screen.
* @prop {jibo.face.views.MenuView~ListDefaultData} [listDefault] - Default values that will be applied to list elements upon creation.
* @prop {jibo.face.views.MenuButton~MenuButtonOptions[]} [list] - Structure specifying the contents of the list. Its values override those given in {~listDefault}.
* @prop {Boolean} [useEyeTransitions] - Flag indicating whether eyeTransitions should be used.
*/
/**
* View designed to display standard list menus.
*
* Takes a simplified JSON configuration. Example:
* ```json
* {
* "viewConfig": {
* "type": "MenuView",
* "id": "my_menu",
* "title": "Menu Title",
* "progress": { //setting to true will use default values, setting to false prevent creation
* "width" : 500,
* "height": 20,
* "backgroundColor": "0xff892f",
* "progressColor": "0x1E90FF",
* "position": {
* "x": "390",
* "y": "170",
* "margin" : {
* "x": 100|LEFT|CENTER|RIGHT,
* "y": 100|TOP|CENTER|BOTTOM
* }
* }
* },
* "listDefault": {
* "menuButtonType": "SkillButton"
* },
* "list": [
* {
* "id": "mySkill",
* "label": "My SKill",
* "colors": ["0xff892f", "0xaf4123"],
* "iconSrc": "resources/icons/mySkill.png",
* "action": {
* "type": "event",
* "data": {
* "event": "openSkill"
* "skill": "mySkill"
* }
* }
* }
* ]
* }
* }
* ```
* @class MenuView
* @extends jibo.face.views.View
* @memberof jibo.face.views
*/
/**
* Default value for X padding of the listProgress.
* @name jibo.face.views.MenuView.LISTPROGRESS_LEFT_MARGIN
* @type {number}
* @readOnly
* @private
*/
/**
* Default value for Y padding of the listProgress.
* @name jibo.face.views.MenuView.LISTPROGRESS_BOTTOM_MARGIN
* @type {number}
* @readOnly
* @private
*/
/**
* Margin value for X padding on either side of title to edge of screen.
* @name jibo.face.views.MenuView.TITLE_MARGIN
* @type {number}
* @readOnly
* @private
*/
/**
* Buffer value for Y padding beween bottom of title and top of list buttons.
* @name jibo.face.views.MenuView.TITLE_BUFFER
* @type {number}
* @readOnly
* @private
*/
/**
* Maximum height of title text.
* @name jibo.face.views.MenuView.TITLE_HEIGHT
* @type {number}
* @readOnly
* @private
*/
/**
* Maximum height of button label text.
* @name jibo.face.views.MenuView.LABEL_HEIGHT
* @type {number}
* @readOnly
* @private
*/
/**
* A constant specified by design
* @name jibo.face.views.MenuView#MENU_LABEL_BUFFER
* @private
* @type {number}
* @readOnly
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.MenuView.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* List for the MenuView.
* @name jibo.face.views.MenuView#list
* @public
* @readOnly
* @type {jibo.face.views.List}
*/
/**
* Title for the MenuView, only created if specified.
* @name jibo.face.views.MenuView#titleLabel
* @public
* @readOnly
* @type {jibo.face.views.Label}
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Create and add components for List.
* @method jibo.face.views.MenuView#createListComponents
* @param {jibo.face.views.List} list The List components components will be added to.
* @protected
*/
/**
* Add eye specific transitions for use when this instance of MenuView opens from or closes to an EyeView.
* Call on instance of MenuView prior to starting a change view process.
* @method jibo.face.views.MenuView#addEyeTransitions
*/
/**
* Apply List config update values (pageIndex, indexOfAction) directly to view config.
* This occurs because MenuView does not use a standard component configuration,
* instead storing List related data directly to its viewConfig.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL EXTERNALLY.
*
* Determine y positions for the menu elements, as they are relative to each other.
* @method jibo.face.views.MenuView#positionComponents
* @param {number} [overrideTitleHeight] Override the calculated title height (or if there is no title but you want more spacing).
*/
/**
* Positions button labels according to list start position to match buttons location on the screen
* @method jibo.face.views.MenuView#positionButtonLabels
* @protected
*/
/**
* Update the button labels to match the list elements.
* Enacts the Label close and open transitions by default.
* @method jibo.face.views.MenuView#updateButtonLabels
* @param {Boolean} [labelRemovalNeeded = false] Flag indicating that we need to remove label component
* and reposition labels
* @param {Boolean} [playTransition = true] Flag determining if close and open transitions will be used,
* if false updates the text without any transitions.
* @param {number} [duration = 200] Duration of the transition.
* @protected
*/
/**
* Calls the close transition on all of the button labels.
* @method jibo.face.views.MenuView#fadeOutButtonLabels
* @param {number} [duration = 100] Duration of the transition.
* @private
*/
/**
* Manages eye tween aspect of the close to eye transition.
* @method jibo.face.views.MenuView#eyeOpenTransition
* @param {Function} callback - Callback fired when eye completes tween.
* @param {number} duration - Duration of the transition.
* @private
*/

81
docs/rendering/gui/views/PauseOverlay.js Normal file
View File

@@ -0,0 +1,81 @@
/**
* @interface jibo.face.views.PauseOverlay~PauseOptions
* @description Interface for pause options.
* @prop {number} [alpha] - Alpha value for overlay when opened. Supports values between `0` and `1`.
* @prop {number} [duration] - Duration in milliseconds of tween, if `0` no tween is used.
* @prop {String} [type] - Type of tween applied to alpha transition when opening and closing.
*/
/**
* Level of opacity for overlay.
* Supports values between `0` and `1`.
* @name jibo.face.views.PauseOverlay#alpha
* @default .7
* @type {number}
*/
/**
* Duration in milliseconds of tween.
* If `0` no tween is used.
* @name jibo.face.views.PauseOverlay#duration
* @default 550
* @type {number}
*/
/**
* Type of tween applied to alpha transition when opening and closing.
* @name jibo.face.views.PauseOverlay#type
* @default 'sineOut'
* @type {string}
*/
/**
* Graphic for display overlay.
* @name jibo.face.views.PauseOverlay#_overlay
* @type {PIXI.Graphics}
* @private
*/
/**
* Flag set to `true` after open is called, reset to `false` on close.
* @name jibo.face.views.PauseOverlay#_isOpen
* @type {boolean}
* @private
*/
/**
* Apply values from options.
* @method jibo.face.views.PauseOverlay#applyOptions
* @example
* {
* "alpha": ".7",
* "duration": 550,
* "type": "sineOut",
* }
* @param {jibo.face.views.PauseOverlay~PauseOptions} options - Options for pause.
* @param {number} [options.alpha] - Level of opacity for overlay.
* @param {number} [options.duration] - Duration in milliseconds of tween.
* @param {String} [options.type] - Type of tween applied to alpha transition.
*/
/**
* Apply default values.
* @method jibo.face.views.PauseOverlay#applyDefaults
*/
/**
* Open the overlay.
* Creates PIXI.Graphic and adds to stage.
* @method jibo.face.views.PauseOverlay#open
* @param {PIXI.Container} container - Container for the overlay, should be View's stage.
*/
/**
* Close the overlay, once closed remove overlay from display.
* @method jibo.face.views.PauseOverlay#close
*/
/**
* Destroy
* @method jibo.face.views.PauseOverlay#destroy
*/

99
docs/rendering/gui/views/TextView.js Normal file
View File

@@ -0,0 +1,99 @@
/**
* @description Interface - Configuration values for creating a TextView.
* @interface jibo.face.views.TextView~TextViewOptions
* @extends jibo.face.views.View~ViewOptions
* @prop {string} [text] - Text to show.
* @prop {PIXI.TextStyle} [style] - Style of the text.
* @prop {jibo.face.views.Element~DimensionData} [margins] - Margins between edge of screen and text bounds.
*/
/**
* View designed to display standard text.
*
* Takes a simplified JSON configuration.
* @example
* {
* "viewConfig": {
* "type": "TextView","
* "id": "text_view_id",
* "text":"This is a text"
* }
* }
* @class TextView
* @extends jibo.face.views.View
* @memberof jibo.face.views
*/
/**
* Default value for the text style if one's missing.
* @name jibo.face.views.Label.DEFAULT_STYLE
* @type {PIXI.TextStyle}
* @readOnly
* @private
*/
/**
* Margin value for X padding on either side of text to edge of screen.
* @name jibo.face.views.TextView.TEXT_MARGIN_X
* @type {number}
* @readOnly
* @private
*/
/**
* Margin value for Y padding on either side of text to edge of screen.
* @name jibo.face.views.TextView.TEXT_MARGIN_Y
* @type {number}
* @readOnly
* @private
*/
/**
* Object describing the font specification used by `PIXI.Text`.
* Will be applied to the text on
* ```
* fontSize: 100,
* fontFamily: 'Proxima Nova Soft',
* fill: '#FFFFFF',
* fontStyle: 'bold'
* wordWrap: true,
* wordWrapWidth: 100,
* align: 'center'
* ```
* @name jibo.face.views.Label#style
* @type {PIXI.TextStyle}
*/
/**
* Margins between text and edge of screen.
* If not specified will use the defaults.
* @name jibo.face.views.Label#margins
* @type {DimensionData}
*/
/**
* Text of TextView label.
* @name jibo.face.views.TextView#text
* @public
* @readOnly
* @type {String}
*/
/**
* Text of TextView label.
* @name jibo.face.views.TextView#text
* @public
* @type {String}
*/
/**
* Label of the TextView.
* @name jibo.face.views.TextView#label
* @public
* @readOnly
* @type {jibo.face.views.Label}
*/
/**
* Construct View
*/

428
docs/rendering/gui/views/View.js Normal file
View File

@@ -0,0 +1,428 @@
/**
* @interface jibo.face.views.View~ViewOptions
* @extends jibo.face.views.Component~ComponentOptions
* @description Interface - Configuration values for creating a View.
* @prop {String} [category] - Category of view.
* @prop {String} [soundSet] - Set of sounds for view sfx.
* @prop {Boolean} [ignoreSwipeDown] - Flag to block or enable swipe down gesture.
* @prop {Boolean} [transitionStageOnly] - If 'true' view transition apply to View's stage only,
* if 'false' possible for transition to be acted out by individual Components where applicable.
* @prop {Boolean | jibo.face.views.PauseOverlay#PauseOptions} [pause] - Determine if view will pause the view it is opening over.
* If 'true' will use default pause options, pass PauseOptions for custom values.
* @prop {Boolean} [pauseParent] - Deprecated.
* @prop {jibo.face.views.PauseOverlay#PauseOptions} [pauseOptions] - Deprecated.
* @prop {Boolean} [border] - Flag to turn screen border visibility true or false.
*/
/**
* Handler for custom View transitions.
* @callback jibo.face.views.View~TransitionHandler
* @param {Function} done - Must call when transition is complete.
* @param {jibo.face.views.View} [view] View to apply the transition to.
*/
/**
* @typedef jibo.face.views~STATE
* @description Static class with static members that describe possible states of the views.
* @prop INITIALIZED Intialize the data.
* @prop DATA_LOADED State set and emitted once initial data has been loaded and configurations set.
* @prop ASSETS_LOADED State set and emitted once initial assets have been loaded.
* @prop LOADED State set and emitted once loading is complete, at point of dispatch View should be ready for use.
* @prop OPENED State set and emitted once View has completed its opening transition.
* @prop CLOSED State set and emitted once View has completed its closing transition.
* @prop DESTROYED State set and emitted once View has been destroyed.
* @prop LOAD_ERROR Event emitted if there is a load error.
*/
/**
* @typedef jibo.face.views~CATEGORY
* @description Static class with static members that describe possible categories of the views.
* @prop GUI Category for views that contain an interactive user interface.
* @prop DISPLAY Category for views that are primarily used for display and not for interfacing.
* @prop EYE Category for EyeView type views.
*/
/**
* Base class for groupings of GUI elements on screen at once.
* Views are the unit which {@link jibo.face.views} acts upon.
*
* @class View
* @extends jibo.face.views.ComponentGroup
* @memberof jibo.face.views
*/
/**
* The default class identifier.
* Generally used to register the class.
* @name jibo.face.views.View.DEFAULT_TYPE
* @type {String}
* @readOnly
*/
/**
* Event dispatched when the View is going to close because of a 'back' command.
* Currently closing a View and going back to the previous view is triggered by a swipe down.
* @type {string}
* @name jibo.face.views.View#BACK
* @readOnly
*/
/**
* Option for setting custom transitions.
* Use with `View.defineTransitions` for transitions to be used when opening from or closing to an empty screen.
* @type {string}
* @name jibo.face.views.View.EMPTY
* @readOnly
*/
/**
* Option for setting custom transitions.
* Use with `View.defineTransitions` for transitions to be used when opening over a paused view or closing while being paused.
* @type {string}
* @name jibo.face.views.View.PAUSED
* @readOnly
*/
/**
* Reference to the paused View below this View.
* @name jibo.face.views.View#pausedParent
* @type {jibo.face.views.View}
*/
/**
* Overlay used when view is paused.
* @name jibo.face.views.View#pauseOverlay
* @type {jibo.face.views.PauseOverlay}
*/
/**
* Flag, if `true` the closure of the View on swipe down behavior will be setup.
* @name jibo.face.views.View#closeOnSwipeDown
* @type {boolean}
* @default true
*/
/**
* Flag that when `true` will pause, instead of closing and destroying, the current View when this View opens above it.
* Once this View finishes opening the previous View, which is now paused, is referenced here {@link jibo.face.views.View#pausedParent}
* @name jibo.face.views.View#willPauseParent
* @type {boolean}
* @default false
*/
/**
* Options applied to parent view when pausing.
* @name jibo.face.views.View#pauseOptions
* @type {jibo.face.views.PauseOverlay#PauseOptions}
*/
/**
* Set of sounds to use when triggering sfx connected to menu button clicks, view open transition, and view close transition.
*
* The global sound sets include:
* - `main` - Used for the eye view and the main menu.
* - `skill` - Default sound set for standard views.
* - `action` - Use for confirmation view overlays.
*
* The soundSet value is combined with the sound type to determine which sound to play.
* For example clicking a menu button will trigger a 'button' sfx, this is combined with the soundSet value to determine the sound id.
* So a clicking a button in a view with a soundSet of `skill` will play the sound with id `skill_button`.
*
* Example for Setting a view's soundSet value via the config:
* ```
* "viewConfig": {
* "type": "MenuView",
* "id": "confirmation_view",
* "soundSet": "action",
* ```
* @name jibo.face.views.View#soundSet
* @type {string}
* @default `skill`
*/
/**
* Flag to transition using only stage.
* If `true` prevents components from handling open and close individually.
* @name jibo.face.views.View#transitionStageOnly
* @type {boolean}
* @default false
*/
/**
* Flag, if `true` the screen border is made visible just before opening view.
* Must set before view opens to take effect.
* @name jibo.face.views.View#borderNeeded
* @type {boolean}
* @default true
*/
/**
* Specify a custom transition for either close or open, whichever is happening next.
* Can be set to a Function, in which case that Function will be used instead of the `open` or `close` methods,
* or set to a string, in which case that string will become the transition type checked by the `open` or `close` methods.
* @name jibo.face.views.View#transitionHandler
* @type {jibo.face.views.View~TransitionHandler | string}
*/
/**
* View category, helps determine behavior and function expected from view.
* Category is not directly bound to `View.type`.
* @name jibo.face.views.View#_category
* @type {string}
*/
/**
* Reference to ViewState the View was created from.
* A View will may not always have a ViewState defined,
* reference to ViewState is made within applyState.
* @name jibo.face.views.View#_viewState
* @type {jibo.face.views.ViewState}
* @private
*/
/**
* Reference to loadAsset created by loader, kept for cleanup.
* @name jibo.face.views.View#_assetLoad
* @type {jibo.loader.AssetLoad}
* @private
*/
/**
* Tokens of assets loaded and cached by this loader.
* @name jibo.face.views.View#_loadedAssets
* @type {jibo.loader.AssetToken[]}
* @private
*/
/**
* Queue for assets that require loading.
* When _assetLoad completes a single load task queued asset are added to _assetLoad's load list.
* @name jibo.face.views.View#_assetLoadQueue
* @type {jibo.face.views~AssetDescriptor[]}
* @private
*/
/**
* List of pending asset load requests.
* When _assetLoad completes asset load requests are checked,
* if requested assets have been loaded executes callback.
* @name jibo.face.views.View#_assetLoadRequests
* @type {any[]}
* @private
*/
/**
* Object used to store custom transitions, uses a specific structure to manage nested choices.
* @type {any}
* @private
*/
/**
* Get top most PIXI.Container of this View.
* @name jibo.face.views.View#stage
* @type {PIXI.Container}
* @readOnly
*/
/**
* The assets loaded by the View, these are returned from the loader as an Object using the asset id as keys.
* Assets available after the view has completed its load methods.
* @name jibo.face.views.View#assets
* @type {Object}
* @readOnly
*/
/**
* Type is equal to Class name.
* @name jibo.face.views.View#type
* @type {string}
* @readOnly
*/
/**
* The current state of view.
* Refer to documentation for valid states e.g. LOADED, OPENED, CLOSED
* @name jibo.face.views.View#state
* @return {String} Refer to the View static constants or ViewManager for valid values.
*/
/**
* View category, helps determine behavior and function expected from view.
* Category is not directly bound to `View.type`.
* @name jibo.face.views.View#category
* @type {string}
* @readOnly
*/
/**
* Construct View
*/
/**
* Method to acquire the source of data needed to setup the View.
* Once the data source is available calls internal methods to assign the data to the class appropriately.
* By default this method handles the loading of a configuration file, but could also be extended to get data from the KB, servers, or web services.
* @method jibo.face.views.View#loadData
* @param {Boolean} [loadAssetsOnComplete = true] - If `true` will call loadAssets() once data finishes loading.
* @protected
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Loads view configuration if a configPath has been defined, but the viewConfig is undefined.
* @method jibo.face.views.View#loadConfig
* @returns {Promise<jibo.face.views.View>} Promise with View it was called from.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Apply data once all required data has finished loading.
* Custom View classes can overrdie this class to manually create custom Components.
* @method jibo.face.views.View#applyData
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* All data and assets have finished loading, create the display and update the status.
* For classes that override View this is where a lot of the setup logic will go.
* @method jibo.face.views.View#loaded
* @protected
*/
/**
* Called when loaded process is completed and View is ready to become current.
* Calls ready on all child Components, which allows opportunity to do additional setup
* that may depend on other components or parent Components.
* @method jibo.face.views.View#ready
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Pause the View and its Components.
* Pausing locks/unlocks the input and applies/removes a black overly to the stage.
* @method jibo.face.views.View#pause
* @param {Boolean} [flag = true] - Flag for pausing or un-pausing this View.
* @param {jibo.face.views.PauseOverlay#PauseOptions} [pauseOptions] - Options defining how the pause executes.
*/
/**
* FOR OVERRIDE ONLY. DO NOT CALL.
*
* Destroy the view, calls destroy on all child components first.
* @method jibo.face.views.View#destroy
*/
/**
* Load given asset descriptions.
* Callback executes once requested assets are available within the `View.assets`.
* @method jibo.face.views.View#addAssets
* @param {jibo.face.views~AssetDescriptor|jibo.face.views~AssetDescriptor[]|Object} assets
* The assets to load.
* @param {Function} [callback] - Called when requested asset are available in `View.assets`.
* If there is an error while loading callback is called with err
*/
/**
* Adds custom `open` and `close` transitions.
* Custom transitions to use when opening or closing from specific view types
* or certain states, such as an empty screen (`View.EMPTY`) or a paused view (`View.PAUSED`).
* @method jibo.face.views.View#addTransition
* @param {string} viewType - Type of view or state. Accepted states include `View.EMPTY` and `View.PAUSED`.
* @param {boolean} openFrom - If `true`, transitions will be used when opening from the given viewType. If `false`, when closing from that type.
* @param {jibo.face.views.View~TransitionHandler | string} [myTransition] - Handler for executing transition or transition type on owning view.
* A Function will be used instead of the `open` or `close` methods, and a string will be the transition type used by the View's `open` or `close` methods.
* @param {jibo.face.views.View~TransitionHandler | string} [theirTransition] - Handler or transition type used by matching view for their transition.
* If the owning view is closing then this will be set as the opening view's transition.
* @param {jibo.face.views~STACK_DIRECTION} [stackDirection] - Specifies the stack direction associated with the transition,
* if undefined does not take stack direction into account
* STACK_DIRECTION.ADD indicates view is being added to stack.
* STACK_DIRECTION.REMOVE indicates view is being removed.
* STACK_DIRECTION.SWAP indicates the views are being swapped and there is no change to the stack size.
*/
/**
* Method to bubble actions up from Components.
* Actions pass through this method up to the ViewManager.
* By passing actions through the View the View can augment the action, supply additional parameters, etc.
* @method jibo.face.views.View#actionHandler
* @param {jibo.face.views.ActionData} action The action called. Contains string for type of action and data Object
* with any pertinent data dependent on action type.
* @param {jibo.face.views.Component} fromComponent The component that triggered the action (if applicable).
*/
/**
* Method to pass actions downward to Components.
* Passing actions through parent chain allows parents to interrupt and augment actions.
* @method jibo.face.views.View#actionEnactor
* @param {jibo.face.ActionData} action Contains string for type of action and data Object
* with any pertinent data dependent on action type.
* @return {boolean} Returns true if action is acted on by this View or any of its children.
*/
/**
* Set up swipe down to close current view, if no other swipe actions were defined.
* This is a standard UX specification for Menus, but may want to be excluded in certain use cases.
* @method jibo.face.views.View#setupSwipeDownToClose
* @protected
*/
/**
* Apply default values for use by loader.
* @method jibo.face.views.View#setAssetDescriptorDefaults
* @param {jibo.face.views~AssetDescriptor} asset Description of asset.
* @return {jibo.face.views~AssetDescriptor} Description of asset.
* @private
*/
/**
* Adds asset to load queue if not already loaded or loading.
* @method jibo.face.views.View#addAssetToQueue
* @param {jibo.face.views~AssetDescriptor} asset - Asset to add to queue.
* @returns {boolean} `true` if asset was added to queue.
* @private
*/
/**
* Remove asset from manifest and `View.assets` and unload from cache.
* NOTE: Use carefully; removing shared assets can have adverse effects.
* @method jibo.face.views.View#removeAsset
* @param {jibo.face.views~AssetDescriptor} asset - Asset to remove.
* @private
*/
/**
* Remove asset from manifest and `View.assets` and unload from cache.
* NOTE: Use carefully; removing shared assets can have adverse effects.
* @method jibo.face.views.View#removeFromManifest
* @param {jibo.face.views~AssetDescriptor} asset - Asset descriptordescribing asset to remove
* @private
*/
/**
* Check if given assets exist in `View.assets`.
* @method jibo.face.views.View#checkForAssets
* @param {jibo.face.views~AssetDescriptor|jibo.face.views~AssetDescriptor[]|Object} assets
* The assets to check.
* @returns {boolean} `true` if all assets were found in `View.assets`.
* @private
*/
/**
* Remove assets from manifest and unload tokens if they do not exist in `View.assets`.
* @method jibo.face.views.View#removeMissingAssets
* @param {jibo.face.views~AssetDescriptor|jibo.face.views~AssetDescriptor[]|Object} assets
* The assets to check.
* @private
*/
/**
* Play sound, considering the View's sound set.
* @method jibo.face.views.View#playSound
* @param {string} soundType - Kind of sound to use ('button', 'enter', 'exit').
* Combined with with View's soundSet to create sound id, for example the skill button sound id is 'skill_button'.
* @private
*/