2019-03-29 08:49:53 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > iwmlib API Documentation< / title >
< meta name = "description" content = "The IWM Browser: One Browser for all apps." / >
< meta property = "og:title" content = "iwmlib API Documentation" / >
< meta property = "og:type" content = "website" / >
< meta property = "og:image" content = "" / >
< meta property = "og:url" content = "https://www.iwm-tuebingen.de" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< script src = "scripts/prettify/prettify.js" > < / script >
< script src = "scripts/prettify/lang-css.js" > < / script >
< script src = "scripts/jquery.min.js" > < / script >
<!-- [if lt IE 9]>
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< link href = "https://fonts.googleapis.com/css?family=Libre+Franklin:400,700" rel = "stylesheet" >
< link type = "text/css" rel = "stylesheet" href = "styles/prettify-tomorrow.css" >
< link type = "text/css" rel = "stylesheet" href = "styles/bootstrap.min.css" >
< link type = "text/css" rel = "stylesheet" href = "styles/main.css" >
< script >
var config = {"monospaceLinks":false,"cleverLinks":false,"applicationName":"iwmlib","disqus":"","googleAnalytics":"","openGraph":{"title":"iwmlib API Documentation","type":"website","image":"","site_name":"","url":"https://www.iwm-tuebingen.de"},"meta":{"title":"iwmlib API Documentation","description":"The IWM Browser: One Browser for all apps.","keyword":""},"linenums":true,"cleverlinks":true,"default":{"outputSourceFiles":true,"useLongnameInNav":false}};
< / script >
< / head >
< body >
< div id = "wrap" class = "clearfix" >
< div class = "navigation" >
< h3 class = "applicationName" > < a href = "index.html" > iwmlib< / a > < / h3 >
< button id = "menuToggle" class = "btn btn-link btn-lg menu-toggle" >
< span class = "glyphicon glyphicon-menu-hamburger" > < / span >
< / button >
< div class = "search" >
< input id = "search" type = "text" class = "form-control input-md" placeholder = "Search..." >
< / div >
< ul class = "list" >
< li class = "item" data-name = "global" >
< span class = "title namespace " >
< span class = "namespaceTag" >
< span class = "glyphicon glyphicon-globe" > < / span >
< / span >
< a href = "global.html" > Global< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< span class = "subtitle" > Typedefs< / span >
< li class = "parent" data-name = "actionActiveCallback" > < a href = "global.html#actionActiveCallback" > actionActiveCallback< / a > < / li >
< li class = "parent" data-name = "actionCallback" > < a href = "global.html#actionCallback" > actionCallback< / a > < / li >
< li class = "parent" data-name = "actionCallback" > < a href = "global.html#actionCallback" > actionCallback< / a > < / li >
< li class = "parent" data-name = "afterActionCallback" > < a href = "global.html#afterActionCallback" > afterActionCallback< / a > < / li >
< li class = "parent" data-name = "afterActionCallback" > < a href = "global.html#afterActionCallback" > afterActionCallback< / a > < / li >
< li class = "parent" data-name = "beforeActionCallback" > < a href = "global.html#beforeActionCallback" > beforeActionCallback< / a > < / li >
< li class = "parent" data-name = "beforeActionCallback" > < a href = "global.html#beforeActionCallback" > beforeActionCallback< / a > < / li >
< li class = "parent" data-name = "onCompleteCallback" > < a href = "global.html#onCompleteCallback" > onCompleteCallback< / a > < / li >
< li class = "parent" data-name = "onCompleteCallback" > < a href = "global.html#onCompleteCallback" > onCompleteCallback< / a > < / li >
< li class = "parent" data-name = "onStartCallback" > < a href = "global.html#onStartCallback" > onStartCallback< / a > < / li >
< li class = "parent" data-name = "onStartCallback" > < a href = "global.html#onStartCallback" > onStartCallback< / a > < / li >
< li class = "parent" data-name = "onUpdateCallback" > < a href = "global.html#onUpdateCallback" > onUpdateCallback< / a > < / li >
< li class = "parent" data-name = "onUpdateCallback" > < a href = "global.html#onUpdateCallback" > onUpdateCallback< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "AbstractPopup" >
< span class = "title " >
< a href = "AbstractPopup.html" > AbstractPopup< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "AbstractPopup#content" > < a href = "AbstractPopup.html#content" > content< / a > < / li >
< li class = "parent " data-name = "AbstractPopup#header" > < a href = "AbstractPopup.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "AbstractPopup#hide" > < a href = "AbstractPopup.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "AbstractPopup#layout" > < a href = "AbstractPopup.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "AbstractPopup#show" > < a href = "AbstractPopup.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Badge" >
< span class = "title " >
< a href = "Badge.html" > Badge< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = " " data-name = "Badge#content" > < a href = "Badge.html#content" > content< / a > < / li >
< li class = " " data-name = "Badge#header" > < a href = "Badge.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = " " data-name = "Badge#hide" > < a href = "Badge.html#hide" > hide< / a > < / li >
< li class = " " data-name = "Badge#layout" > < a href = "Badge.html#layout" > layout< / a > < / li >
< li class = " " data-name = "Badge#show" > < a href = "Badge.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "BlurFilter" >
< span class = "title " >
< a href = "BlurFilter.html" > BlurFilter< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "BlurFilter#blur" > < a href = "BlurFilter.html#blur" > blur< / a > < / li >
< li class = "parent " data-name = "BlurFilter#shape" > < a href = "BlurFilter.html#shape" > shape< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Button" >
< span class = "title " >
< a href = "Button.html" > Button< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "Button#active" > < a href = "Button.html#active" > active< / a > < / li >
< li class = "parent " data-name = "Button#disabled" > < a href = "Button.html#disabled" > disabled< / a > < / li >
< li class = "parent " data-name = "Button#iconColor" > < a href = "Button.html#iconColor" > iconColor< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Button#capture" > < a href = "Button.html#capture" > capture< / a > < / li >
< li class = "parent " data-name = "Button#hide" > < a href = "Button.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "Button#layout" > < a href = "Button.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "Button#show" > < a href = "Button.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "ButtonGroup" >
< span class = "title " >
< a href = "ButtonGroup.html" > ButtonGroup< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "ButtonGroup#disabled" > < a href = "ButtonGroup.html#disabled" > disabled< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "ButtonGroup#hide" > < a href = "ButtonGroup.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "ButtonGroup#layout" > < a href = "ButtonGroup.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "ButtonGroup#show" > < a href = "ButtonGroup.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "DeepZoomImage" >
< span class = "title " >
< a href = "DeepZoomImage.html" > DeepZoomImage< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "DeepZoomImage#baseSize" > < a href = "DeepZoomImage.html#baseSize" > baseSize< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#foreground" > < a href = "DeepZoomImage.html#foreground" > foreground< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#height" > < a href = "DeepZoomImage.html#height" > height< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#maxScale" > < a href = "DeepZoomImage.html#maxScale" > maxScale< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#pixelSize" > < a href = "DeepZoomImage.html#pixelSize" > pixelSize< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#width" > < a href = "DeepZoomImage.html#width" > width< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "DeepZoomImage#_calculateBounds" > < a href = "DeepZoomImage.html#_calculateBounds" > _calculateBounds< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#_createTiles" > < a href = "DeepZoomImage.html#_createTiles" > _createTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#activate" > < a href = "DeepZoomImage.html#activate" > activate< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#addTiles" > < a href = "DeepZoomImage.html#addTiles" > addTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#allTiles" > < a href = "DeepZoomImage.html#allTiles" > allTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#bringTilesToFront" > < a href = "DeepZoomImage.html#bringTilesToFront" > bringTilesToFront< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#calculateBounds" > < a href = "DeepZoomImage.html#calculateBounds" > calculateBounds< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#changedTiles" > < a href = "DeepZoomImage.html#changedTiles" > changedTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#deactivate" > < a href = "DeepZoomImage.html#deactivate" > deactivate< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#destroyObsoleteTiles" > < a href = "DeepZoomImage.html#destroyObsoleteTiles" > destroyObsoleteTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#destroyTiles" > < a href = "DeepZoomImage.html#destroyTiles" > destroyTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#destroyTilesAboveLevel" > < a href = "DeepZoomImage.html#destroyTilesAboveLevel" > destroyTilesAboveLevel< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#destroyUnneededTiles" > < a href = "DeepZoomImage.html#destroyUnneededTiles" > destroyUnneededTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#ensureAllTiles" > < a href = "DeepZoomImage.html#ensureAllTiles" > ensureAllTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#ensureTiles" > < a href = "DeepZoomImage.html#ensureTiles" > ensureTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#levelAndAlphaForScale" > < a href = "DeepZoomImage.html#levelAndAlphaForScale" > levelAndAlphaForScale< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#levelForScale" > < a href = "DeepZoomImage.html#levelForScale" > levelForScale< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#neededTiles" > < a href = "DeepZoomImage.html#neededTiles" > neededTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#populateAllTiles" > < a href = "DeepZoomImage.html#populateAllTiles" > populateAllTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#populateTiles" > < a href = "DeepZoomImage.html#populateTiles" > populateTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#setup" > < a href = "DeepZoomImage.html#setup" > setup< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#setupTiles" > < a href = "DeepZoomImage.html#setupTiles" > setupTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#thumbnail" > < a href = "DeepZoomImage.html#thumbnail" > thumbnail< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#tintObsoleteTiles" > < a href = "DeepZoomImage.html#tintObsoleteTiles" > tintObsoleteTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomImage#transformed" > < a href = "DeepZoomImage.html#transformed" > transformed< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "DeepZoomInfo" >
< span class = "title " >
< a href = "DeepZoomInfo.html" > DeepZoomInfo< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "DeepZoomInfo#dimensions" > < a href = "DeepZoomInfo.html#dimensions" > dimensions< / a > < / li >
< li class = "parent " data-name = "DeepZoomInfo#getDimensions" > < a href = "DeepZoomInfo.html#getDimensions" > getDimensions< / a > < / li >
< li class = "parent " data-name = "DeepZoomInfo#getNumTiles" > < a href = "DeepZoomInfo.html#getNumTiles" > getNumTiles< / a > < / li >
< li class = "parent " data-name = "DeepZoomInfo#getScale" > < a href = "DeepZoomInfo.html#getScale" > getScale< / a > < / li >
< li class = "parent " data-name = "DeepZoomInfo#imageForURL" > < a href = "DeepZoomInfo.html#imageForURL" > imageForURL< / a > < / li >
< li class = "parent " data-name = "DeepZoomInfo#urlForTile" > < a href = "DeepZoomInfo.html#urlForTile" > urlForTile< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Flippable" >
< span class = "title " >
< a href = "Flippable.html" > Flippable< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "Flippable#flipped" > < a href = "Flippable.html#flipped" > flipped< / a > < / li >
< li class = "parent " data-name = "Flippable#frontSideInFront" > < a href = "Flippable.html#frontSideInFront" > frontSideInFront< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Flippable#layout" > < a href = "Flippable.html#layout" > layout< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "FontInfo" >
< span class = "title " >
< a href = "FontInfo.html" > FontInfo< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Hypenate" >
< span class = "title " >
< a href = "Hypenate.html" > Hypenate< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Hypenate.splitLines" > < a href = "Hypenate.html#.splitLines" > splitLines< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "InteractivePopup" >
< span class = "title " >
< a href = "InteractivePopup.html" > InteractivePopup< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = " " data-name = "InteractivePopup#content" > < a href = "InteractivePopup.html#content" > content< / a > < / li >
< li class = " " data-name = "InteractivePopup#header" > < a href = "InteractivePopup.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = " " data-name = "InteractivePopup#hide" > < a href = "InteractivePopup.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "InteractivePopup#layout" > < a href = "InteractivePopup.html#layout" > layout< / a > < / li >
< li class = " " data-name = "InteractivePopup#show" > < a href = "InteractivePopup.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "LabeledGraphics" >
< span class = "title " >
< a href = "LabeledGraphics.html" > LabeledGraphics< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "LabeledGraphics#clear" > < a href = "LabeledGraphics.html#clear" > clear< / a > < / li >
< li class = "parent " data-name = "LabeledGraphics#debugInfos" > < a href = "LabeledGraphics.html#debugInfos" > debugInfos< / a > < / li >
< li class = "parent " data-name = "LabeledGraphics#ensureLabel" > < a href = "LabeledGraphics.html#ensureLabel" > ensureLabel< / a > < / li >
< li class = "parent " data-name = "LabeledGraphics#getLabel" > < a href = "LabeledGraphics.html#getLabel" > getLabel< / a > < / li >
< li class = "parent " data-name = "LabeledGraphics#hideLabel" > < a href = "LabeledGraphics.html#hideLabel" > hideLabel< / a > < / li >
< li class = "parent " data-name = "LabeledGraphics#removeLabel" > < a href = "LabeledGraphics.html#removeLabel" > removeLabel< / a > < / li >
< li class = "parent " data-name = "LabeledGraphics#truncateLabel" > < a href = "LabeledGraphics.html#truncateLabel" > truncateLabel< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "LabeledGraphics.exports.LabeledGraphics" >
< span class = "title " >
< a href = "LabeledGraphics.exports.LabeledGraphics.html" > LabeledGraphics.exports.LabeledGraphics< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "List" >
< span class = "title " >
< a href = "List.html" > List< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "List#innerHeight" > < a href = "List.html#innerHeight" > innerHeight< / a > < / li >
< li class = "parent " data-name = "List#innerWidth" > < a href = "List.html#innerWidth" > innerWidth< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "List#capture" > < a href = "List.html#capture" > capture< / a > < / li >
< li class = " parent " data-name = "List#layout" > < a href = "List.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "List#resize" > < a href = "List.html#resize" > resize< / a > < / li >
< li class = "parent " data-name = "List#setItems" > < a href = "List.html#setItems" > setItems< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Message" >
< span class = "title " >
< a href = "Message.html" > Message< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Message#layout" > < a href = "Message.html#layout" > layout< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Modal" >
< span class = "title " >
< a href = "Modal.html" > Modal< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "Modal#content" > < a href = "Modal.html#content" > content< / a > < / li >
< li class = "parent " data-name = "Modal#header" > < a href = "Modal.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Modal#hide" > < a href = "Modal.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "Modal#layout" > < a href = "Modal.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "Modal#show" > < a href = "Modal.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "PIXIApp" >
< span class = "title " >
< a href = "PIXIApp.html" > PIXIApp< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "PIXIApp#center" > < a href = "PIXIApp.html#center" > center< / a > < / li >
< li class = "parent " data-name = "PIXIApp#size" > < a href = "PIXIApp.html#size" > size< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "PIXIApp#addFpsDisplay" > < a href = "PIXIApp.html#addFpsDisplay" > addFpsDisplay< / a > < / li >
< li class = "parent " data-name = "PIXIApp#checkOrientation" > < a href = "PIXIApp.html#checkOrientation" > checkOrientation< / a > < / li >
< li class = "parent " data-name = "PIXIApp#convertPointFromNodeToPage" > < a href = "PIXIApp.html#convertPointFromNodeToPage" > convertPointFromNodeToPage< / a > < / li >
< li class = "parent " data-name = "PIXIApp#convertPointFromPageToNode" > < a href = "PIXIApp.html#convertPointFromPageToNode" > convertPointFromPageToNode< / a > < / li >
< li class = "parent " data-name = "PIXIApp#draw" > < a href = "PIXIApp.html#draw" > draw< / a > < / li >
< li class = "parent " data-name = "PIXIApp#expandRenderer" > < a href = "PIXIApp.html#expandRenderer" > expandRenderer< / a > < / li >
< li class = "parent " data-name = "PIXIApp#layout" > < a href = "PIXIApp.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "PIXIApp#loadSprites" > < a href = "PIXIApp.html#loadSprites" > loadSprites< / a > < / li >
< li class = "parent " data-name = "PIXIApp#loadTextures" > < a href = "PIXIApp.html#loadTextures" > loadTextures< / a > < / li >
< li class = "parent " data-name = "PIXIApp#message" > < a href = "PIXIApp.html#message" > message< / a > < / li >
< li class = "parent " data-name = "PIXIApp#modal" > < a href = "PIXIApp.html#modal" > modal< / a > < / li >
< li class = "parent " data-name = "PIXIApp#mutate" > < a href = "PIXIApp.html#mutate" > mutate< / a > < / li >
< li class = "parent " data-name = "PIXIApp#orientation" > < a href = "PIXIApp.html#orientation" > orientation< / a > < / li >
< li class = "parent " data-name = "PIXIApp#orientationChanged" > < a href = "PIXIApp.html#orientationChanged" > orientationChanged< / a > < / li >
< li class = "parent " data-name = "PIXIApp#progress" > < a href = "PIXIApp.html#progress" > progress< / a > < / li >
< li class = "parent " data-name = "PIXIApp#query" > < a href = "PIXIApp.html#query" > query< / a > < / li >
< li class = "parent " data-name = "PIXIApp#resize" > < a href = "PIXIApp.html#resize" > resize< / a > < / li >
< li class = "parent " data-name = "PIXIApp#setup" > < a href = "PIXIApp.html#setup" > setup< / a > < / li >
< li class = "parent " data-name = "PIXIApp#subscribe" > < a href = "PIXIApp.html#subscribe" > subscribe< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Popup" >
< span class = "title " >
< a href = "Popup.html" > Popup< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = " " data-name = "Popup#content" > < a href = "Popup.html#content" > content< / a > < / li >
< li class = " " data-name = "Popup#header" > < a href = "Popup.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = " " data-name = "Popup#hide" > < a href = "Popup.html#hide" > hide< / a > < / li >
< li class = " " data-name = "Popup#layout" > < a href = "Popup.html#layout" > layout< / a > < / li >
< li class = " " data-name = "Popup#show" > < a href = "Popup.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "PopupMenu" >
< span class = "title " >
< a href = "PopupMenu.html" > PopupMenu< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = " " data-name = "PopupMenu#content" > < a href = "PopupMenu.html#content" > content< / a > < / li >
< li class = " " data-name = "PopupMenu#header" > < a href = "PopupMenu.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = " " data-name = "PopupMenu#hide" > < a href = "PopupMenu.html#hide" > hide< / a > < / li >
< li class = " " data-name = "PopupMenu#layout" > < a href = "PopupMenu.html#layout" > layout< / a > < / li >
< li class = " " data-name = "PopupMenu#show" > < a href = "PopupMenu.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Progress" >
< span class = "title " >
< a href = "Progress.html" > Progress< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "Progress#progress" > < a href = "Progress.html#progress" > progress< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Progress#hide" > < a href = "Progress.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "Progress#layout" > < a href = "Progress.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "Progress#show" > < a href = "Progress.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Slider" >
< span class = "title " >
< a href = "Slider.html" > Slider< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "Slider#disabled" > < a href = "Slider.html#disabled" > disabled< / a > < / li >
< li class = "parent " data-name = "Slider#value" > < a href = "Slider.html#value" > value< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Slider#hide" > < a href = "Slider.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "Slider#layout" > < a href = "Slider.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "Slider#show" > < a href = "Slider.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Switch" >
< span class = "title " >
< a href = "Switch.html" > Switch< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "Switch#active" > < a href = "Switch.html#active" > active< / a > < / li >
< li class = "parent " data-name = "Switch#disabled" > < a href = "Switch.html#disabled" > disabled< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Switch#hide" > < a href = "Switch.html#hide" > hide< / a > < / li >
< li class = "parent " data-name = "Switch#layout" > < a href = "Switch.html#layout" > layout< / a > < / li >
< li class = "parent " data-name = "Switch#show" > < a href = "Switch.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "TextLabel.TextLabel" >
< span class = "title " >
< a href = "TextLabel.TextLabel.html" > TextLabel.TextLabel< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Theme" >
< span class = "title " >
< a href = "Theme.html" > Theme< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Theme.fromString" > < a href = "Theme.html#.fromString" > fromString< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "ThemeDark" >
< span class = "title " >
< a href = "ThemeDark.html" > ThemeDark< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "ThemeLight" >
< span class = "title " >
< a href = "ThemeLight.html" > ThemeLight< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "ThemeRed" >
< span class = "title " >
< a href = "ThemeRed.html" > ThemeRed< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "TileQuadNode" >
< span class = "title " >
< a href = "TileQuadNode.html" > TileQuadNode< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "TileQuadNode#link" > < a href = "TileQuadNode.html#link" > link< / a > < / li >
< li class = "parent " data-name = "TileQuadNode#noQuads" > < a href = "TileQuadNode.html#noQuads" > noQuads< / a > < / li >
< li class = "parent " data-name = "TileQuadNode#unlink" > < a href = "TileQuadNode.html#unlink" > unlink< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Tooltip" >
< span class = "title " >
< a href = "Tooltip.html" > Tooltip< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = " " data-name = "Tooltip#content" > < a href = "Tooltip.html#content" > content< / a > < / li >
< li class = " " data-name = "Tooltip#header" > < a href = "Tooltip.html#header" > header< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = " " data-name = "Tooltip#hide" > < a href = "Tooltip.html#hide" > hide< / a > < / li >
< li class = " " data-name = "Tooltip#layout" > < a href = "Tooltip.html#layout" > layout< / a > < / li >
< li class = " " data-name = "Tooltip#show" > < a href = "Tooltip.html#show" > show< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "UITest" >
< span class = "title " >
< a href = "UITest.html" > UITest< / a >
< / span >
< ul class = "members itemMembers" >
< span class = "subtitle" > Members< / span >
< li class = "parent " data-name = "UITest#timeline" > < a href = "UITest.html#timeline" > timeline< / a > < / li >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "UITest#clear" > < a href = "UITest.html#clear" > clear< / a > < / li >
< li class = "parent " data-name = "UITest#pan" > < a href = "UITest.html#pan" > pan< / a > < / li >
< li class = "parent " data-name = "UITest#pinch" > < a href = "UITest.html#pinch" > pinch< / a > < / li >
< li class = "parent " data-name = "UITest#restart" > < a href = "UITest.html#restart" > restart< / a > < / li >
< li class = "parent " data-name = "UITest#start" > < a href = "UITest.html#start" > start< / a > < / li >
< li class = "parent " data-name = "UITest#stop" > < a href = "UITest.html#stop" > stop< / a > < / li >
< li class = "parent " data-name = "UITest#tap" > < a href = "UITest.html#tap" > tap< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< li class = "item" data-name = "Volatile" >
< span class = "title " >
< a href = "Volatile.html" > Volatile< / a >
< / span >
< ul class = "members itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "typedefs itemMembers" >
< / ul >
< ul class = "methods itemMembers" >
< span class = "subtitle" > Methods< / span >
< li class = "parent " data-name = "Volatile#layout" > < a href = "Volatile.html#layout" > layout< / a > < / li >
< / ul >
< ul class = "events itemMembers" >
< / ul >
< / li >
< / ul >
< / div >
< div class = "main" >
< h1 class = "page-title" data-filename = "pixi_app.js.html" > Source: pixi/app.js< / h1 >
< section >
< header >
< div class = "header content-size" >
< h2 > pixi/app.js< / h2 >
< / div >
< / header >
< article >
< pre id = "source-code" class = "prettyprint source linenums" > < code > /* global apollo, subscriptions, gql */
import Theme from './theme.js'
import Progress from './progress.js'
import Modal from './modal.js'
import Message from './message.js'
import {debounce} from '../utils.js'
/**
* A special InteractionManager for fullscreen apps, which may
* go beyond the limits of WebGL drawing buffers. On Safari and Chrome
* the drawing buffers are limited to 4096 in width (Safari) or 4096x4096
* in total buffer size (Chrome). The original InteractionManager.mapPositionToPoint
* does not work with these extreme sizes which mainly occur if large
* retina displays (>= 4K) are used with devicePixelRatio > 1.
*
* @private
* @class
* @extends PIXI.interaction.InteractionManager
* @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager}
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
*/
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution
let extendWidth = 1.0
let extendHeight = 1.0
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
dy = (canvas.height - context.drawingBufferHeight) / resolution
}
x *= extendWidth
y *= extendHeight
super.mapPositionToPoint(point, x, y + dy)
}
}
/**
* The class PixiApp extends the class PIXI.Application
* by several functions and makes meaningful pre-assumptions.
*
* @example
* // Create the app
* const app = new PIXIApp({
* view: canvas,
* width: 450,
* height: 150,
* fpsLogging: true,
* theme: 'light',
* transparent: false
* }).setup().run()
*
* @class
* @extends PIXI.Application
* @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
*/
export default class PIXIApp extends PIXI.Application {
/**
* Creates an instance of a PixiApp.
*
* @constructor
* @param {object} [opts={}] - An options object. The following options can be set:
* @param {number} [opts.width] - The width of the renderer. If no set, the application will run in fullscreen.
* @param {number} [opts.height] - The height of the renderer. If no set, the application will run in fullscreen.
* @param {HTMLElement} [opts.view] - The canvas HTML element. If not set, a render-element is added inside the body.
* @param {boolean} [opts.transparent=true] - Should the render view be transparent?
* @param {boolean} [opts.antialias=true] - Sets antialias (only applicable in chrome at the moment).
* @param {number} [opts.resolution=window.devicePixelRatio | 1] - The resolution / device pixel ratio of the renderer, retina would be 2.
* @param {boolean} [opts.autoResize=true] - Should the canvas-element be resized automatically if the resolution was set?
* @param {number} [opts.backgroundColor=0x282828] - The color of the background.
* @param {string|Theme} [opts.theme=dark] - The name of the theme (dark, light, red) or a Theme object to use for styling.
* @param {boolean} [opts.fpsLogging=false] - If set to true, the current frames per second are displayed in the upper left corner.
* @param {object} [opts.progress={}] - Can be used to add options to the progress bar. See class Progress for more informations.
* @param {boolean} [opts.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present.
* @param {boolean} [opts.roundPixels=true] - Align PIXI.DisplayObject coordinates to screen resolution.
* @param {boolean} [opts.monkeyPatchMapping=true] - Monkey patch for canvas fullscreen support on large displays.
* @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
*/
constructor({
width = null, height = null, view = null,
transparent = true, backgroundColor = 0x282828, theme = 'dark',
antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true,
fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true,
graphql = false }) {
const fullScreen = !width || !height
if (fullScreen) {
width = window.innerWidth
height = window.innerHeight
}
super({
view: view,
width: width,
height: height,
transparent: transparent,
antialias: antialias,
resolution: resolution,
autoResize: autoResize,
backgroundColor: backgroundColor,
roundPixels: roundPixels,
forceCanvas: forceCanvas
})
this.width = width
this.height = height
this.theme = Theme.fromString(theme)
this.fpsLogging = fpsLogging
this.progressOpts = progress
this.fullScreen = fullScreen
this.orient = null
this.originalMapPositionToPoint = null
this.monkeyPatchMapping = monkeyPatchMapping
PIXI.Graphics.CURVES.adaptive = adaptive
this.graphql = graphql
if (fullScreen || autoResize) {
console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50)
window.addEventListener('resize', resizeDebounced)
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
}
if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping')
// Pluggin the specializtion does not work. Monkey patching does
// this.renderer.plugins.interaction = new FullscreenInteractionManager(this.renderer)
this.monkeyPatchPixiMapping()
}
}
/**
* Extra setup method to construct complex scenes, etc...
* Overwrite this method if you need additonal views and components.
*
* @return {PIXIApp} A reference to the PIXIApp for chaining.
*/
setup() {
this.scene = this.sceneFactory()
this.stage.addChild(this.scene)
// fpsLogging
if (this.fpsLogging) {
this.addFpsDisplay()
}
// GraphQL
if (this.graphql & & typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({
uri: '/graphql'
})
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true,
connectionParams: {}
})
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface,
wsClient
)
this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
})
}
// progress
this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this }))
this._progress.visible = false
this.stage.addChild(this._progress)
return this
}
/**
* Tests whether the width is larger than the height of the application.
*
* @return {boolean} Returns true if app is in landscape mode.
*/
orientation() {
return this.width > this.height
}
/**
* Checks orientation and adapts view size if necessary. Implements a
* handler for the orientationchange event.
*
* @param {event=} - orientationchange event
*/
checkOrientation(event) {
var value = this.orientation()
if (value != this.orient) {
setTimeout(100, function () {
this.orientationChanged(true)
}.bind(this))
this.orient = value
}
}
/**
* Called if checkOrientation detects an orientation change event.
*
* @param {boolean=} [force=false] - Called if checkOrientation detects an orientation change event.
*/
orientationChanged(force = false) {
if (this.expandRenderer() || force) {
this.layout()
}
}
/**
* Called after a resize. Empty method but can be overwritten to
* adapt their layout to the new app size.
*
* @param {number} [width] - The width of the app.
* @param {number} [height] - The height of the app.
*/
layout(width, height) {
}
/**
* Draws the display tree of the app. Typically this can be delegated
* to the layout method.
*
*/
draw() {
this.layout(this.width, this.height)
}
/*
* Run the application. Override this method with everything
* that is needed to maintain your App, e.g. setup calls, main loops, etc.
*
*/
run() {
return this
}
/*
* Overwrite this factory method if your application needs a special
* scene object.
*
* @returns {PIXI.Container} - A new PIXI Container for use as a scene.
*/
sceneFactory() {
return new PIXI.Container()
}
/**
* Adds the display of the frames per second to the renderer in the upper left corner.
*
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
addFpsDisplay() {
const fpsDisplay = new FpsDisplay(this)
this.stage.addChild(fpsDisplay)
return this
}
/**
* Returns the size of the renderer as an object with the keys width and height.
*
* @readonly
* @member {object}
*/
get size() {
return { width: this.width, height: this.height }
}
/**
* Returns the center of the renderer as an object with the keys x and y.
*
* @readonly
* @member {object}
*/
get center() {
return { x: this.width / 2, y: this.height / 2 }
}
/**
* Resizes the renderer to fit into the window or given width and height.
*
* @param {object} [event] - The event.
* @param {object=} [opts={}] - The event.
* @param {number} [opts.width=window.innerWidth] - The width of the app to resize to.
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
this.width = width
this.height = height
this.expandRenderer()
this.layout(width, height)
//console.log("App.resize", width, height, window.innerWidth, window.innerHeight )
// if (this.scene) {
// console.log("gl.drawingBufferWidth", this.renderer.view.getContext('webgl').drawingBufferWidth)
// console.log("scene", this.scene.scale, this.renderer, this.renderer.autoResize, this.renderer.resolution)
// }
return this
}
/**
* @todo Write the documentation.
*
* @private
*/
monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y)
}
}
}
/**
* In some browsers the canvas is distorted if the screen resolution and
* overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels).
* To compensate these distortions we need to fix the mapping to the actual
* drawing buffer coordinates.
* @private
* @param {any} local
* @param {number} x
* @param {number} y
* @return {} interactionManager.mapPositionToPoint
*/
fixedMapPositionToPoint(local, x, y) {
let resolution = this.renderer.resolution
let interactionManager = this.renderer.plugins.interaction
let extendWidth = 1.0
let extendHeight = 1.0
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context !== null & & (context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
dy = (canvas.height - context.drawingBufferHeight) / resolution
}
x *= extendWidth
y *= extendHeight
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
}
/**
* Expand the renderer step-wise on resize.
*
* @param {number} [expand] - The amount of additional space for the renderer [px].
* @return {boolean} true if the renderer was resized.
*/
expandRenderer(expand = 256) {
let renderer = this.renderer
let resolution = this.renderer.resolution
let ww = this.width
let hh = this.height
let sw = this.screen.width
let sh = this.screen.height
if (ww > sw || hh > sh) {
//console.log('App.expandRenderer')
renderer.resize(ww + expand, hh + expand)
return true
}
renderer.resize(ww, hh)
return false
}
/**
* Set the loading progress of the application. If called for the first time, display the progress bar.
*
* @param {number} [value] - Should be a value between 0 and 100. If 100, the progress bar will disappear.
* @return {PIXIApp|Progress} The PixiApp object for chaining or the Progress object when the method was
* called without a parameter.
*/
progress(value) {
if (typeof value === 'undefined') {
return this._progress
}
this._progress.visible = true
this._progress.progress = value
return this
}
/**
* Opens a new Modal object binded to this app.
*
* @param {object} [opts] - An options object for the Modal object.
* @return {Modal} Returns the Modal object.
*/
modal(opts = {}) {
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
this.scene.addChild(modal)
return modal
}
/**
* Opens a new Message object binded to this app.
*
* @param {object} [opts] - An options object for the Message object.
* @return {Message} Returns the Message object.
*/
message(opts = {}) {
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
this.scene.addChild(message)
return message
}
/**
* Loads sprites, e.g. images into the PIXI TextureCache.
*
* @param {string|string[]} resources - A String or an Array of urls to the images to load.
* @param {function} [loaded] - A callback which is executed after all resources has been loaded.
* Receives one paramter, a Map of sprites where the key is the path of the image which was
* loaded and the value is the PIXI.Sprite object.
* @param {object} [opts] - An options object for more specific parameters.
* @param {boolean} [opts.resolutionDependent=true] - Should the sprites be loaded dependent of the
* renderer resolution?
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
this.loadTextures(resources, textures => {
let sprites = new Map()
for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
if (loaded) {
loaded.call(this, sprites)
}
}, { resolutionDependent, progress })
return this
}
/**
* Loads textures, e.g. images into the PIXI TextureCache.
*
* @param {string|string[]} resources - A String or an Array of urls to the images to load.
* @param {function} [loaded] - A callback which is executed after all resources has been loaded.
* Receives one paramter, a Map of textures where the key is the path of the image which was
* loaded and the value is the PIXI.Texture object.
* @param {object} [opts] - An options object for more specific parameters.
* @param {boolean} [opts.resolutionDependent=true] - Should the textures be loaded dependent of the
* renderer resolution?
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
if (!Array.isArray(resources)) {
resources = [resources]
}
const loader = this.loader
for (let resource of resources) {
if (!loader.resources[resource]) {
if (resolutionDependent) {
let resolution = Math.round(this.renderer.resolution)
switch (resolution) {
case 2:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
break
case 3:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
break
default:
loader.add(resource)
break
}
} else {
loader.add(resource)
}
}
}
if (progress) {
loader.on('progress', e => {
this.progress(e.progress)
})
}
loader.load((loader, resources) => {
const textures = new Map()
for (let key in resources) {
textures.set(key, resources[key].texture)
}
if (loaded) {
loaded.call(this, textures)
}
})
return this
}
/**
* Queries the GraphQL endpoint.
*
* @param {string} [query] - The GraphQL query string.
* @param {object} [opts={}] - An options object. The following options can be set:
* http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query
* @return {Promise} Returns a Promise which is either resolved with the resulting data or
* rejected with an error.
*/
query(query, opts = {}) {
if (typeof query === 'string') {
opts = Object.assign({}, opts, { query })
} else {
opts = Object.assign({}, query)
}
opts.query = opts.query.trim()
if (!opts.query.startsWith('query')) {
if (opts.query.startsWith('{')) {
opts.query = `query ${opts.query}`
} else {
opts.query = `query {${opts.query}}`
}
}
opts.query = gql(opts.query)
return this.apolloClient.query(opts)
}
/**
* Mutate the GraphQL endpoint.
*
* @param {string} [mutation] - The GraphQL mutation string.
* @param {object} [opts={}] - An options object. The following options can be set:
* http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate
* @return {Promise} Returns a Promise which is either resolved with the resulting data or
* rejected with an error.
*/
mutate(mutation, opts = {}) {
if (typeof mutation === 'string') {
opts = Object.assign({}, opts, { mutation })
} else {
opts = Object.assign({}, mutation)
}
opts.mutation = opts.mutation.trim()
if (!opts.mutation.startsWith('mutation')) {
if (opts.mutation.startsWith('{')) {
opts.mutation = `mutation ${opts.mutation}`
} else {
opts.mutation = `mutation {${opts.mutation}}`
}
}
opts.mutation = gql(opts.mutation)
return this.apolloClient.mutate(opts)
}
/**
* Subscribe the GraphQL endpoint.
*
* @param {string} [subscription] - The GraphQL subscription.
* @param {object} [opts={}] - An options object. The following options can be set:
* http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query
* @return {Promise} Returns a Promise which is either resolved with the resulting data or
* rejected with an error.
*/
subscribe(subscription, opts = {}) {
if (typeof subscription === 'string') {
opts = Object.assign({}, opts, { subscription })
} else {
opts = Object.assign({}, subscription)
}
opts.subscription = opts.subscription.trim()
if (!opts.subscription.startsWith('subscription')) {
if (opts.subscription.startsWith('{')) {
opts.subscription = `subscription ${opts.subscription}`
} else {
opts.subscription = `subscription {${opts.subscription}}`
}
}
opts.query = gql(opts.subscription)
delete opts.subscription
return this.apolloClient.subscribe(opts)
}
/**
* Supports the page as a global coordinate system and converts browser page coordinates
* to local DisplayObject coordinates.
*
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
* @return {PIXI.Point} Returns a PIXI.Point.
*/
convertPointFromPageToNode(displayObject, x, y) {
let resolution = this.renderer.resolution
console.log("resolution", resolution)
let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
pixiGlobal.x /= resolution
pixiGlobal.y /= resolution
return displayObject.toLocal(new PIXI.Point(pixiGlobal.x, pixiGlobal.y))
}
/**
* Supports the page as a global coordinate system and converts local DisplayObject coordinates
* to browser page coordinates.
*
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
* @return {Point} Returns a DOM Point.
*/
convertPointFromNodeToPage(displayObject, x, y) {
let resolution = this.renderer.resolution
let pixiGlobal = displayObject.toGlobal(new PIXI.Point(x, y))
pixiGlobal.x *= resolution
pixiGlobal.y *= resolution
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
}
}
/**
* The class fpsdisplay shows in the upper left corner
* of the renderer the current image refresh rate.
*
* @private
* @class
* @extends PIXI.Graphics
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
class FpsDisplay extends PIXI.Graphics {
/**
* Creates an instance of a FpsDisplay.
*
* @constructor
* @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
*/
constructor(app) {
super()
this.app = app
this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, .6)
.drawRoundedRect(0, 0, 68, 32, 5)
.endFill()
.position.set(20, 20)
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
}))
this.text.position.set(6, 6)
this.addChild(this.text)
this.refreshFps()
window.setInterval(this.refreshFps.bind(this), 1000)
}
/**
* Refreshes fps numer.
*
* @return {PIXIApp} Returns the PIXIApp object for chaining.
*/
refreshFps() {
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`
return this
}
}
< / code > < / pre >
< / article >
< / section >
< footer class = "content-size" >
< div class = "footer" >
2019-03-29 11:44:34 +01:00
Documentation generated by < a href = "https://github.com/jsdoc3/jsdoc" > JSDoc 3.5.5< / a > on Fri Mar 29 2019 11:44:08 GMT+0100 (Mitteleuropäische Normalzeit)
2019-03-29 08:49:53 +01:00
< / div >
< / footer >
< / div >
< / div >
< script > prettyPrint ( ) ; < / script >
< script src = "scripts/main.js" > < / script >
< / body >
< / html >
