2327 lines
82 KiB
HTML
2327 lines
82 KiB
HTML
<!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_deepzoom_image.js.html">Source: pixi/deepzoom/image.js</h1>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
<header>
|
|
<div class="header content-size">
|
|
<h2>pixi/deepzoom/image.js</h2>
|
|
</div>
|
|
</header>
|
|
<article>
|
|
<pre id="source-code" class="prettyprint source linenums"><code>import { Capabilities } from '../../capabilities.js'
|
|
import { Points } from '../../utils.js'
|
|
import { deepZoomTileCache } from './tile.js'
|
|
import { Tiles } from './tiles.js'
|
|
|
|
function isEven(n) {
|
|
return n % 2 == 0
|
|
}
|
|
|
|
|
|
function printTileCacheInfos() {
|
|
let references = new Map()
|
|
let multiples = 0
|
|
for (let [url, tiles] of deepZoomTileCache.entries()) {
|
|
let count = tiles.size
|
|
references.set(url, count)
|
|
if (count > 1) {
|
|
multiples += 1
|
|
}
|
|
}
|
|
console.log({ multiples, references })
|
|
}
|
|
/**
|
|
* A utility class that holds information typically provided by DZI files, i.e.
|
|
* height and width of the overall image, overlap, and image type.
|
|
*
|
|
* @constructor
|
|
* @param {obj} attrs - A JSON-Object holding the listed keys and values
|
|
* @example
|
|
* {
|
|
* "tileSize": 1024,
|
|
* "format": "jpeg",
|
|
* "overlap": 1,
|
|
* "height": 4794,
|
|
* "width": 4095,
|
|
* "clip": { "minLevel": 12, "maxLevel": 20, "startCol": 301436, "startRow": 354060 },
|
|
* // optional: minLevel and maxLevel define the level bounds
|
|
* // startCol: first col at maxLevel
|
|
* // startRow: first row at maxLevel
|
|
* "path": "var/Vermeer/Vermeer_files",
|
|
* "type": "dzi", // optional: dzi (default) or map
|
|
* "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
|
* // optional: {path}/{level}/{column}_{row}.{format} (default) or
|
|
* // a template String with the format of the URL
|
|
* }
|
|
*/
|
|
export class DeepZoomInfo {
|
|
constructor(attrs) {
|
|
for (let key in attrs) {
|
|
this[key] = attrs[key]
|
|
}
|
|
this.maxLevel = 0 // The highest level number, typically corresponds to the
|
|
// number in the file system for the folder with tiles
|
|
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
|
|
this.type = this.type || 'dzi'
|
|
this.urlTileTemplate =
|
|
this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
|
|
this.setupDimensions()
|
|
}
|
|
|
|
/* Computes the needed number of layers from the width and height
|
|
* of the image. Note that this includes the level 0, i.e. 0 ... 4
|
|
* means that 5 levels exist.
|
|
**/
|
|
numLevels() {
|
|
let maxDimension = Math.max(this.width, this.height)
|
|
let boundary = this.type === 'dzi' ? 1 : this.tileSize
|
|
let numLevels = 0
|
|
while (maxDimension >= boundary) {
|
|
maxDimension /= 2
|
|
numLevels++
|
|
}
|
|
return numLevels
|
|
}
|
|
|
|
/** Computes the scale at the given level.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {number} scale
|
|
**/
|
|
getScale(level) {
|
|
let scale = 1
|
|
if (this.type === 'dzi') {
|
|
scale = Math.pow(0.5, this.maxLevel - level + 1)
|
|
} else {
|
|
scale = Math.pow(0.5, this.maxLevel - level)
|
|
}
|
|
return scale
|
|
}
|
|
|
|
/** Computes the scaled width and height of the given level.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {array} size - The width and height
|
|
**/
|
|
getDimensions(level) {
|
|
let scale = this.getScale(level)
|
|
let w = Math.ceil(this.width * scale)
|
|
let h = Math.ceil(this.height * scale)
|
|
return [w, h]
|
|
}
|
|
|
|
/** Computes the number of cols and rows of tiles.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {array} size - The cols and rows
|
|
**/
|
|
getNumTiles(level) {
|
|
let dim = this.getDimensions(level)
|
|
let cols = Math.ceil(dim[0] / this.tileSize)
|
|
let rows = Math.ceil(dim[1] / this.tileSize)
|
|
if (this.clip) {
|
|
let rest = this.rests[level]
|
|
if (rest) {
|
|
if (rest.restCol) {
|
|
cols += 1
|
|
}
|
|
if (rest.restRows) {
|
|
rows += 1
|
|
}
|
|
}
|
|
}
|
|
return [cols, rows]
|
|
}
|
|
|
|
setupDimensions(loadBaseImage = false) {
|
|
/** Setup instance variables and load the base image, i.e. the largest
|
|
image that can be represented as a single tile.
|
|
@private
|
|
**/
|
|
let ww = this.width
|
|
let hh = this.height
|
|
let scale = 1.0
|
|
let level = 0
|
|
let single = 0
|
|
const tsize = this.tileSize
|
|
|
|
if (this.clip) {
|
|
this.baseLevel = this.clip.minLevel
|
|
this.maxLevel = this.clip.maxLevel
|
|
this.baseImage = null
|
|
this.size = this.getDimensions(this.baseLevel)
|
|
this.offsets = {}
|
|
this.rests = {}
|
|
let startCol = this.clip.startCol
|
|
let startRow = this.clip.startRow
|
|
let floatStartCol = startCol
|
|
let floatStartRow = startRow
|
|
for (let i = this.maxLevel; i >= this.baseLevel; i--) {
|
|
this.offsets[i] = { startCol, startRow }
|
|
let restCol = floatStartCol % 1
|
|
let restRow = floatStartRow % 1
|
|
this.rests[i] = { restCol, restRow }
|
|
startCol = Math.floor(startCol / 2)
|
|
startRow = Math.floor(startRow / 2)
|
|
floatStartCol /= 2
|
|
floatStartRow /= 2
|
|
}
|
|
} else {
|
|
const boundary = this.type === 'dzi' ? 1.0 : tsize
|
|
while (ww > boundary && hh > boundary) {
|
|
if (ww >= tsize && hh >= tsize) {
|
|
single += 1
|
|
}
|
|
scale = scale / 2.0
|
|
ww = Math.ceil(this.width * scale)
|
|
hh = Math.ceil(this.height * scale)
|
|
level += 1
|
|
}
|
|
this.baseLevel = level - single
|
|
this.maxLevel = this.numLevels() - 1
|
|
this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false)
|
|
|
|
if (loadBaseImage) {
|
|
this.imageForURL(this.baseURL, e => {
|
|
this.size = [e.target.naturalWidth, e.target.naturalHeight]
|
|
this.baseImage = e.target
|
|
})
|
|
} else {
|
|
this.baseImage = null
|
|
this.size = this.getDimensions(this.baseLevel)
|
|
}
|
|
}
|
|
}
|
|
|
|
get maxLoadableLevel() {
|
|
if (this.clip) {
|
|
return this.maxLevel
|
|
}
|
|
return this.type === 'dzi' ? this.maxLevel : this.maxLevel
|
|
}
|
|
|
|
/** Computes the url for the given level, column and and row.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @param {number} column - The column of the tile
|
|
* @param {number} row - The row of the tile
|
|
* @returns {string} url
|
|
**/
|
|
urlForTile(level, column, row, compressed = true) {
|
|
let format = this.format
|
|
if (compressed && this.compression) {
|
|
let supported = Capabilities.isIOS ? 'pvr' : 'dds'
|
|
if (this.compression.indexOf(supported) >= 0) {
|
|
format = supported
|
|
}
|
|
}
|
|
if (this.clip) {
|
|
let offset = this.offsets[level]
|
|
if (offset) {
|
|
let { startCol, startRow } = offset
|
|
column += startCol
|
|
row += startRow
|
|
}
|
|
}
|
|
let url = this.urlTileTemplate
|
|
.replace(/\{path\}/g, this.path)
|
|
.replace(/\{level\}/g, level)
|
|
.replace(/\{row\}/g, row)
|
|
.replace(/\{column\}/g, column)
|
|
.replace(/\{format\}/g, format)
|
|
return url
|
|
}
|
|
|
|
/** Loads the image for the given url and executes a callback function
|
|
on completion.
|
|
* @param {string} url - The url of the tile
|
|
* @param {function} complete - The callback function
|
|
* @returns {Image} obj
|
|
**/
|
|
imageForURL(url, complete) {
|
|
let img = new Image()
|
|
img.onload = complete.bind(this)
|
|
img.src = url
|
|
return img
|
|
}
|
|
|
|
/** Computes the columns and rows as well as scaled width and height.
|
|
* @param {number} level - The level of the wanted layer
|
|
* @returns {array} [cols, rows, width, height]
|
|
**/
|
|
dimensions(level) {
|
|
let dim = this.getDimensions(level)
|
|
let tiles = this.getNumTiles(level)
|
|
return [tiles[0], tiles[1], dim[0], dim[1]]
|
|
}
|
|
|
|
test() {
|
|
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
|
|
for (let i = 0; i <= this.maxLevel; i++) {
|
|
console.log(
|
|
' ' +
|
|
i +
|
|
' -> ' +
|
|
this.getScale(i) +
|
|
' [' +
|
|
this.dimensions(i) +
|
|
']'
|
|
)
|
|
}
|
|
console.log(this.urlForTile(this.baseLevel, 0, 0))
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A utility class that describes a quad tree of tiles. Each tile on a given
|
|
* level has up to four corresponding tiles on the next level. A TileQuadNode
|
|
* uses the attributes nw (i.e. northwest), ne, sw, se to link to the
|
|
* quad nodes on the next level. The previous attributes links to the quad
|
|
* one level below that holds the given quad as nw, ne, sw, or se.
|
|
* We use this node class because we need a representation of tiles that are
|
|
* needed but not loaded yet to compute tiles which can be abandoned to reduce
|
|
* the memory pressure.
|
|
*
|
|
* @constructor
|
|
* @param {level} Number - The level the quad node belongs to
|
|
* @param {col} Number - The col of the quad
|
|
* @param {row} Number - The level the quad node belongs to
|
|
* @param {url} String - The level the quad node belongs to
|
|
*/
|
|
class TileQuadNode {
|
|
constructor(level, col, row, url) {
|
|
this.level = level
|
|
this.col = col
|
|
this.row = row
|
|
this.url = url
|
|
this.nw = null
|
|
this.ne = null
|
|
this.sw = null
|
|
this.se = null
|
|
this.previous = null
|
|
}
|
|
|
|
/** Return True if this node has no successors and can be used as
|
|
an indicator of tiles to free.
|
|
**/
|
|
noQuads() {
|
|
if (this.previous === null) return false
|
|
return (
|
|
this.nw === null &&
|
|
this.ne === null &&
|
|
this.sw === null &&
|
|
this.se === null
|
|
)
|
|
}
|
|
|
|
/** Unlink the given quad node
|
|
|
|
* @param {node} TileQuadNode - The TileQuadNode to remove
|
|
**/
|
|
unlink(node) {
|
|
if (this.nw === node) this.nw = null
|
|
if (this.ne === node) this.ne = null
|
|
if (this.sw === node) this.sw = null
|
|
if (this.se === node) this.se = null
|
|
}
|
|
|
|
/** Link this quad node to the given previous node. Use the north
|
|
* and west flags to address nw, ne, sw, and se.
|
|
|
|
* @param {node} TileQuadNode - The TileQuadNode to remove
|
|
* @param {north} Boolean - Link to north (true) or south (false)
|
|
* @param {west} Boolean - Link to west (true) or east (false)
|
|
**/
|
|
link(north, west, previous) {
|
|
this.previous = previous
|
|
if (north) {
|
|
if (west) {
|
|
previous.nw = this
|
|
} else {
|
|
previous.ne = this
|
|
}
|
|
} else {
|
|
if (west) {
|
|
previous.sw = this
|
|
} else {
|
|
previous.se = this
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* The main class of a deeply zoomable image that is represented by a hierarchy
|
|
* of tile layers for each zoom level. This gives the user the impression that
|
|
* even huge pictures (up to gigapixel-images) can be zoomed instantaneously,
|
|
* since the tiles at smaller levels are scaled immediately and overloaded by
|
|
* more detailed tiles at the larger level as fast as possible.
|
|
|
|
* @constructor
|
|
* @param {DeepZoomInfo} deepZoomInfo - Information extracted from a JSON-Object
|
|
*/
|
|
export class DeepZoomImage extends PIXI.Container {
|
|
constructor(
|
|
deepZoomInfo,
|
|
{
|
|
debug = false,
|
|
shadow = false,
|
|
center = false,
|
|
world = null, // Defines the world bounds the images lives in
|
|
highResolution = true,
|
|
autoLoadTiles = true,
|
|
preferWorker = false,
|
|
minimumLevel = 0,
|
|
alpha = 1,
|
|
app = window.app
|
|
} = {}
|
|
) {
|
|
super()
|
|
this.app = app
|
|
this.debug = debug
|
|
this.shadow = shadow
|
|
this.world = world
|
|
this.preferWorker = preferWorker
|
|
this.resolution = highResolution
|
|
? Math.round(window.devicePixelRatio)
|
|
: 1
|
|
this.alpha = alpha
|
|
this.fastLoads = 0
|
|
this.autoLoadTiles = autoLoadTiles
|
|
this.minimumLevel = minimumLevel
|
|
this.quadTrees = new Map() // url as keys, TileQuadNodes as values
|
|
this.setup(deepZoomInfo, center)
|
|
}
|
|
|
|
get point() {
|
|
if (this._point == null) {
|
|
let graphics = new PIXI.Graphics()
|
|
graphics.lineStyle(2, 0x00ff00)
|
|
graphics.drawCircle(0, 0, 2)
|
|
graphics.interactive = false
|
|
this._point = graphics
|
|
}
|
|
return this._point
|
|
}
|
|
|
|
/** Reads the DeepZoomInfo object and initializes all tile layers.
|
|
* Called by the constructor.
|
|
* Creates the sprite for the loaded texture and add the sprite to the tile
|
|
* layer.
|
|
* @param {Object} deepZoomInfo - the DeepZoomInfo instance
|
|
* @param {boolean} center - If true ensures that the pivot is set to the center
|
|
**/
|
|
setup(deepZoomInfo, center) {
|
|
this.info = deepZoomInfo
|
|
this.interactive = true
|
|
this.tileLayers = {}
|
|
|
|
this._foreground = null
|
|
this.tileContainer = new PIXI.Container()
|
|
this.tileContainer.interactive = false
|
|
|
|
let [w, h] = this.baseSize
|
|
if (this.shadow) {
|
|
this.filters = [new PIXI.filters.DropShadowFilter(45, 3)]
|
|
}
|
|
this.addChild(this.tileContainer)
|
|
|
|
if (deepZoomInfo.clip) {
|
|
let mask = new PIXI.Graphics()
|
|
mask.beginFill(1, 1)
|
|
mask.drawRect(0, 0, w, h)
|
|
mask.endFill()
|
|
this.mask = mask
|
|
mask.alpha = 0
|
|
this.addChild(mask)
|
|
this.minimumLevel = deepZoomInfo.baseLevel
|
|
}
|
|
this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel)
|
|
console.log("autoLoadTiles", this.autoLoadTiles)
|
|
if (this.autoLoadTiles) {
|
|
this.setupTiles(center)
|
|
}
|
|
}
|
|
|
|
/** Default setup method for tiles. Loads all tiles of the current level.
|
|
Can be overwritten in subclasses.
|
|
@param {boolean} center - If true ensures that the pivot is set to the center
|
|
**/
|
|
setupTiles(center = false) {
|
|
// First load background tile
|
|
let tiles = this.ensureAllTiles(this.currentLevel)
|
|
if (center) {
|
|
this.pivot.set(w / 2, h / 2)
|
|
}
|
|
let scaleLevel = this.levelForScale(1)
|
|
this.ensureAllTiles(scaleLevel)
|
|
}
|
|
|
|
removeTileQuadNode(level, col, row, url) {
|
|
if (this.quadTrees.has(url)) {
|
|
let quad = this.quadTrees.get(url)
|
|
this.tileQuadRemoved(quad)
|
|
this.quadTrees.delete(url)
|
|
}
|
|
}
|
|
|
|
addTileQuadNode(level, col, row, url) {
|
|
if (this.quadTrees.has(url)) return this.quadTrees.get(url)
|
|
let quad = new TileQuadNode(level, col, row, url)
|
|
this.quadTrees.set(url, quad)
|
|
this.tileQuadAdded(quad)
|
|
return quad
|
|
}
|
|
|
|
tileQuadRemoved(quad) {
|
|
let below = quad.previous
|
|
// if (this.debug) console.log("tileQuadRemoved", quad)
|
|
if (below) {
|
|
below.unlink(quad)
|
|
if (below.noQuads()) {
|
|
if (this.debug) console.log('Removed tile below')
|
|
let levelBelow = quad.level - 1
|
|
if (levelBelow < this.minimumLevel) return
|
|
let c = Math.floor(quad.col / 2)
|
|
let r = Math.floor(quad.row / 2)
|
|
let urlBelow = this.info.urlForTile(levelBelow, c, r)
|
|
if (this.quadTrees.has(urlBelow)) {
|
|
this.removeTileQuadNode(levelBelow, c, r, urlBelow)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tileQuadAdded(quad) {
|
|
let levelBelow = quad.level - 1
|
|
if (levelBelow < this.minimumLevel) return
|
|
//if (this.debug) console.log("tileQuadAdded", quad)
|
|
let c = Math.floor(quad.col / 2)
|
|
let r = Math.floor(quad.row / 2)
|
|
let urlBelow = this.info.urlForTile(levelBelow, c, r)
|
|
let below = null
|
|
if (!this.quadTrees.has(urlBelow)) {
|
|
below = this.addTileQuadNode(levelBelow, c, r, urlBelow)
|
|
quad.link(isEven(quad.row), isEven(quad.col), below)
|
|
}
|
|
}
|
|
|
|
/** Returns the tile layer level that corresponds to the given scale.
|
|
* @param {number} scale - the scale factor
|
|
**/
|
|
levelForScale(scale) {
|
|
let level = Math.round(Math.log2(scale * this.resolution)) // Math.floor(Math.log2(event.scale))+1
|
|
let newLevel = this.info.baseLevel + Math.max(level, 0)
|
|
return Math.min(newLevel, this.info.maxLoadableLevel)
|
|
}
|
|
|
|
/** Returns the tile layer level that corresponds to the given scale.
|
|
* @param {number} scale - the scale factor
|
|
**/
|
|
levelAndAlphaForScale(scale) {
|
|
let value = Math.log2(scale * this.resolution)
|
|
let level = Math.round(value)
|
|
let newLevel = this.info.baseLevel + Math.max(level, 0)
|
|
|
|
return { level: Math.min(newLevel, this.info.maxLoadableLevel), alpha: value - level }
|
|
}
|
|
|
|
/** Adds a tile layer to the DeepZoomImage.
|
|
* @param {string} key - the access key
|
|
* @param {Tiles} tiles - the tile layer object
|
|
**/
|
|
addTiles(key, tiles) {
|
|
if (key in this.tileLayers) {
|
|
console.warn('Tiles already availabl', key)
|
|
}
|
|
this.tileContainer.addChild(tiles)
|
|
this.tileLayers[key] = tiles
|
|
}
|
|
|
|
destroyTiles(key) {
|
|
let tiles = this.tileLayers[key]
|
|
this.tileContainer.removeChild(tiles)
|
|
tiles.destroy()
|
|
delete this.tileLayers[key]
|
|
}
|
|
|
|
/** Getter for PIXI.Container foreground layer.
|
|
* Adds a PIXI.Container if necessary.
|
|
**/
|
|
get foreground() {
|
|
if (this._foreground == null) {
|
|
this._foreground = new PIXI.Container()
|
|
this.addChild(this._foreground)
|
|
}
|
|
return this._foreground
|
|
}
|
|
|
|
/** Getter for the DeepZoomInfo base level size.
|
|
**/
|
|
get baseSize() {
|
|
return this.info.getDimensions(this.info.baseLevel)
|
|
}
|
|
|
|
/** Getter for the current scaled size in pixels.
|
|
**/
|
|
get pixelSize() {
|
|
let [w, h] = this.baseSize
|
|
return [w * this.scale.x, h * this.scale.y]
|
|
}
|
|
|
|
/** Getter for the max scale factor.
|
|
**/
|
|
get maxScale() {
|
|
let delta = this.info.maxLevel - this.info.baseLevel
|
|
return Math.pow(2, delta) / this.resolution * 2
|
|
}
|
|
|
|
/** Getter for the current width.
|
|
**/
|
|
get width() {
|
|
return this.pixelSize[0]
|
|
}
|
|
|
|
/** Getter for the current height.
|
|
**/
|
|
get height() {
|
|
return this.pixelSize[1]
|
|
}
|
|
|
|
|
|
/* Overrides PIXI.Container.hitArea()
|
|
* Allows to optimize the hit testing. Container with hit areas are directly
|
|
* hit tested without consideration of children.
|
|
*/
|
|
get hitArea() {
|
|
// Defining the hitArea resulted hitting the scatter in masked area
|
|
// when a mask was used (@Tüsch[submaps]). Removing the hitArea() altogether
|
|
// broke the interaction in other projects (@googleart).
|
|
// Fix: When masked, the hitArea is ignored by returning null.
|
|
// TODO: test if childs are hittested, without setting interactiveChildren.
|
|
// Opel, 03-05-2018
|
|
if (this.mask) {
|
|
return null
|
|
}
|
|
return this
|
|
}
|
|
|
|
/* Overrides PIXI.Container.contains()
|
|
* Allows to optimize the hit testing.
|
|
*/
|
|
contains(x, y) {
|
|
let [w, h] = this.baseSize
|
|
return x >= 0 && x <= w && y >= 0 && y <= h
|
|
}
|
|
|
|
/** Overrides PIXI.Container._calculateBounds()
|
|
* Only considers the base size and reduces the calculation to a single
|
|
* rect.
|
|
*/
|
|
_calculateBounds() {
|
|
let [w, h] = this.baseSize
|
|
this._bounds.addFrame(this.transform, 0, 0, w, h)
|
|
}
|
|
|
|
/** Overrides PIXI.Container.calculateBounds()
|
|
* Skips the children and only considers the deep zoom base size. Calls
|
|
* the also overwritten _calculateBounds method.
|
|
*/
|
|
calculateBounds() {
|
|
this._bounds.clear()
|
|
this._calculateBounds()
|
|
this._lastBoundsID = this._boundsID
|
|
}
|
|
|
|
/** Returns a single sprite that can be used a thumbnail representation of
|
|
* large images.
|
|
* @return {Sprite} sprite - A sprite with a single tile texture
|
|
*/
|
|
thumbnail() {
|
|
return new PIXI.Sprite.fromImage(this.info.baseURL)
|
|
}
|
|
|
|
/** Returns a list of all tiles of a given level.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {Array[]} - An array of [url, col, row] arrays
|
|
**/
|
|
allTiles(tiles, level) {
|
|
let result = []
|
|
for (let col = 0; col < tiles.cols; col++) {
|
|
for (let row = 0; row < tiles.rows; row++) {
|
|
let url = this.info.urlForTile(level, col, row)
|
|
result.push([url, col, row])
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
worldBounds() {
|
|
let viewBounds = this.app.scene.bounds
|
|
// Using getBounds extends visible scope after loading tiles and leads
|
|
// to excessive loading
|
|
if (this.world != null) {
|
|
let bounds = this.world.bounds
|
|
let x = Math.max(-bounds.width, bounds.x)
|
|
let y = Math.max(-bounds.height, bounds.y)
|
|
let width = Math.min(viewBounds.width, bounds.width)
|
|
let height = Math.min(viewBounds.height, bounds.height)
|
|
//console.log("worldBounds new", { x, y, width, height })
|
|
return { x, y, width, height }
|
|
}
|
|
//console.log("worldBounds old", viewBounds)
|
|
return viewBounds
|
|
}
|
|
|
|
/** Loads all tiles that are needed to fill the app bounds.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* @param {boolean} debug
|
|
* @return {Array[]} - An array of [url, col, row] arrays
|
|
*/
|
|
neededTiles(tiles, level, debug = false) {
|
|
let needed = []
|
|
let tsize = tiles.tileSize
|
|
let worldBounds = this.worldBounds()
|
|
let maxWidth = worldBounds.width
|
|
let maxHeight = worldBounds.height
|
|
|
|
let pointInWindow = new PIXI.Point()
|
|
let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y)
|
|
let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight)
|
|
let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2)
|
|
let tilesCenter = tiles.toLocal(worldCenter)
|
|
|
|
let topLeft = tiles.toLocal(worldTopLeft)
|
|
let bottomRight = tiles.toLocal(worldBottomRight)
|
|
tiles._centerPoint = tilesCenter
|
|
let bounds = new PIXI.Rectangle(
|
|
topLeft.x,
|
|
topLeft.y,
|
|
bottomRight.x - topLeft.x,
|
|
bottomRight.y - topLeft.y)
|
|
|
|
tiles._boundsRect = bounds
|
|
|
|
/* UO: we need a toLocal call here since the transform may need an update
|
|
which is guaranteed by the toLocal method. */
|
|
let centerCol = Math.floor(tilesCenter.x / tsize)
|
|
let centerRow = Math.floor(tilesCenter.y / tsize)
|
|
|
|
// Expand because we want to test for included centers
|
|
bounds.x -= tsize / 2
|
|
bounds.y -= tsize / 2
|
|
bounds.width += tsize
|
|
bounds.height += tsize
|
|
|
|
try {
|
|
let maxTilesWidth = Math.ceil(maxWidth / tsize)
|
|
let maxTilesHeight = Math.ceil(maxHeight / tsize)
|
|
|
|
maxTilesWidth += 2
|
|
maxTilesHeight += 2
|
|
|
|
let startCol = Math.max(0, centerCol - maxTilesWidth)
|
|
let endCol = Math.min(tiles.cols, centerCol + maxTilesWidth)
|
|
|
|
let startRow = Math.max(0, centerRow - maxTilesHeight)
|
|
let endRow = Math.min(tiles.rows, centerRow + maxTilesHeight)
|
|
|
|
for (let col = startCol; col < endCol; col++) {
|
|
let cx = (col + 0.5) * tsize
|
|
for (let row = startRow; row < endRow; row++) {
|
|
let cy = (row + 0.5) * tsize
|
|
let tileCenter = new PIXI.Point(cx, cy)
|
|
if (bounds.contains(tileCenter.x, tileCenter.y)) {
|
|
let url = this.info.urlForTile(level, col, row)
|
|
needed.push([url, col, row])
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn(error.message)
|
|
}
|
|
return { centerCol, centerRow, needed }
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Returns all changed tiles for a given level.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {object} - An object with the keys added and removed which values are [url, col, row] arrays
|
|
*/
|
|
changedTiles(tiles, level) {
|
|
if (this.debug) console.time('changedTiles')
|
|
let changed = { added: [], removed: [] }
|
|
let newNeeded = new Map()
|
|
let { centerCol, centerRow, needed } = this.neededTiles(tiles, level)
|
|
needed.forEach(d => {
|
|
let [url, col, row] = d
|
|
newNeeded.set(url, [col, row])
|
|
if (!tiles.requested.has(url)) {
|
|
changed.added.push(d)
|
|
}
|
|
})
|
|
for (let url of tiles.needed.keys()) {
|
|
if (!newNeeded.has(url)) {
|
|
let [col, row] = tiles.needed.get(url)
|
|
changed.removed.push([url, col, row])
|
|
}
|
|
}
|
|
tiles.needed = newNeeded
|
|
if (this.debug) console.log(newNeeded)
|
|
if (this.debug) console.timeEnd('changedTiles')
|
|
return { centerCol, centerRow, changed }
|
|
}
|
|
|
|
/** Populates all tiles for a given level.
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
populateAllTiles(tiles, level) {
|
|
let all = this.allTiles(tiles, level)
|
|
for (let [url, col, row] of all) {
|
|
this.addTileQuadNode(level, col, row, url)
|
|
}
|
|
tiles.loadTiles(all, false, 0, 0)
|
|
}
|
|
|
|
/** Loads all tiles that are needed to fill the browser window.
|
|
* If the optional about parameter is provided (as a point with col as x,
|
|
* and row as y attr) the tiles are sorted by the distance to this point.
|
|
*
|
|
* @param {Tiles} tiles - the grid of tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
* Optional parameter:
|
|
* @param {boolean} onlyone - if true only one tile is loaded
|
|
* @param {PIXI.Point} about - point of interaction
|
|
*/
|
|
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
|
|
if (tiles.isComplete())
|
|
return
|
|
let referenceCol = -1
|
|
let referenceRow = -1
|
|
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
|
|
if (about != null) {
|
|
// We want to load tiles in the focus of the user first, therefore
|
|
// we sort according to the distance of the focus of interaction
|
|
let refPoint = this.toLocal(about)
|
|
let scaledTileSize = tiles.tileSize * tiles.tileScale
|
|
referenceCol = Math.floor(refPoint.x / scaledTileSize)
|
|
referenceRow = Math.floor(refPoint.y / scaledTileSize)
|
|
}
|
|
else {
|
|
referenceCol = centerCol
|
|
referenceRow = centerRow
|
|
}
|
|
referenceCol = centerCol
|
|
referenceRow = centerRow
|
|
|
|
let removed = changed.removed
|
|
for (let [url, col, row] of removed) {
|
|
this.removeTileQuadNode(level, col, row, url)
|
|
}
|
|
let added = changed.added
|
|
if (added.length == 0) return
|
|
for (let [url, col, row] of added) {
|
|
this.addTileQuadNode(level, col, row, url)
|
|
}
|
|
let ref = new PIXI.Point(referenceCol, referenceRow)
|
|
// Note: The array must be sorted in a way that the nearest tiles
|
|
// are at the end of the array since the load queue uses Array.push
|
|
// Array.pop
|
|
added.sort((a, b) => {
|
|
let aa = new PIXI.Point(a[1], a[2])
|
|
let bb = new PIXI.Point(b[1], b[2])
|
|
let da = Points.distance(aa, ref)
|
|
let db = Points.distance(bb, ref)
|
|
return db - da
|
|
})
|
|
tiles.loadTiles(added, onlyone, referenceCol, referenceRow)
|
|
}
|
|
|
|
/** Private method: creates all tiles for a given level.
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {Tiles} - tiles
|
|
*/
|
|
_createTiles(key, level) {
|
|
let [cols, rows, w, h] = this.info.dimensions(level)
|
|
let increasedLevels = level - this.info.baseLevel
|
|
let invScale = Math.pow(0.5, increasedLevels)
|
|
let tiles = new Tiles(
|
|
level,
|
|
this,
|
|
invScale,
|
|
cols,
|
|
rows,
|
|
w,
|
|
h,
|
|
this.info.tileSize,
|
|
this.info.overlap
|
|
)
|
|
this.addTiles(key, tiles)
|
|
if (this.info.clip) {
|
|
let rest = this.info.rests[level]
|
|
if (rest) {
|
|
let x = rest.restCol * this.info.tileSize * invScale
|
|
let y = rest.restRow * this.info.tileSize * invScale
|
|
tiles.x = -x
|
|
tiles.y = -y
|
|
}
|
|
}
|
|
return tiles
|
|
}
|
|
|
|
/** Ensures that all needed tiles of a given level are loaded. Creates
|
|
* a new Tiles layer if necessary
|
|
* @param {number} level - The zoom level of the grid
|
|
* @return {Tiles} tiles
|
|
*/
|
|
ensureTiles(level, about) {
|
|
let key = level.toString()
|
|
if (key in this.tileLayers) {
|
|
let tiles = this.tileLayers[key]
|
|
this.populateTiles(tiles, level, { about: about })
|
|
return tiles
|
|
}
|
|
let tiles = this._createTiles(key, level)
|
|
this.populateTiles(tiles, level, { about: about })
|
|
//console.log("ensureTiles", level)
|
|
return tiles
|
|
}
|
|
|
|
untintTiles(level) {
|
|
let key = level.toString()
|
|
if (key in this.tileLayers) {
|
|
let tiles = this.tileLayers[key]
|
|
}
|
|
}
|
|
|
|
/** Ensures that all tiles of a given level are loaded.
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
ensureAllTiles(level) {
|
|
let key = level.toString()
|
|
if (key in this.tileLayers) {
|
|
let tiles = this.tileLayers[key]
|
|
this.populateAllTiles(tiles, level)
|
|
tiles.keep = true
|
|
return
|
|
}
|
|
let tiles = this._createTiles(key, level)
|
|
this.populateAllTiles(tiles, level)
|
|
tiles.keep = true
|
|
return tiles
|
|
}
|
|
|
|
hideTilesAboveLevel(level) {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (tiles.level > level) {
|
|
tiles.visible = false
|
|
}
|
|
})
|
|
}
|
|
|
|
/** Destroys all tiles above a given level to ensure that the memory can
|
|
* be reused.
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
destroyTilesAboveLevel(level) {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (tiles.level > level && !tiles.keep) {
|
|
for (let url of tiles.available.keys()) {
|
|
let quad = this.quadTrees.get(url)
|
|
if (quad) this.removeTileQuadNode(quad)
|
|
}
|
|
this.destroyTiles(key)
|
|
}
|
|
})
|
|
}
|
|
|
|
destroyAllTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
this.destroyTiles(key)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Tint tiles in all layers that are no longer needed
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
tintObsoleteTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
tiles.untintTiles()
|
|
if (!tiles.keep) {
|
|
tiles.tintObsoleteTiles()
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
/**
|
|
* Destroy tiles in all layers that are no longer needed
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
destroyUnneededTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (!tiles.keep) {
|
|
tiles.destroyUnneededTiles()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Destroy tiles in all layers that are no longer needed
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
destroyObsoleteTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (!tiles.keep) {
|
|
tiles.destroyObsoleteTiles()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Destroy tiles in all layers that are not part of the
|
|
* visible quadTrees
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
destroyTiles() {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (!tiles.keep) {
|
|
tiles.destroyTiles(this.quadTrees)
|
|
}
|
|
})
|
|
}
|
|
|
|
/* Tint all tiles
|
|
* @param {number} level - The zoom level of the grid
|
|
*/
|
|
tintTilesBelowLevel(level) {
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
let tiles = this.tileLayers[key]
|
|
if (tiles.level < level) {
|
|
tiles.tintTiles(this.quadTrees)
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Ensure that the given tiles layer is the topmost one and visible.
|
|
* @param {*} tiles
|
|
*/
|
|
bringTilesToFront(tiles) {
|
|
this.tileContainer.addChild(tiles)
|
|
tiles.visible = true
|
|
}
|
|
|
|
/** A callback function that can be used by a Scatter view to inform
|
|
* the zoomable image that it has been moved, rotated or scaled, and should
|
|
* load tiles accordingly.
|
|
* @param {PIXI.Point} translated - the movement of the scatter
|
|
* @param {number} scale - the zoom factor
|
|
* @param {PIXI.Point} about - the anchor point of the zoom
|
|
* @param {boolean} fast - informs the callback to return as fast as possible,
|
|
* i.e. after loading a single tile
|
|
* @param {boolean} debug - log debug infos
|
|
*/
|
|
transformed(event) {
|
|
let key = this.currentLevel.toString()
|
|
let currentTiles = this.tileLayers[key]
|
|
if (typeof currentTiles == 'undefined') {
|
|
return
|
|
}
|
|
if (event.fast) {
|
|
this.fastLoads += 1
|
|
this.populateTiles(currentTiles, this.currentLevel, {
|
|
onlyone: false,
|
|
about: event.about
|
|
})
|
|
if (this.fastLoads == 3) {
|
|
this.fastLoads = 0
|
|
}
|
|
else {
|
|
return
|
|
}
|
|
}
|
|
if (event.scale == null) {
|
|
this.ensureTiles(this.currentLevel, event.about)
|
|
return
|
|
}
|
|
|
|
let level = this.levelForScale(event.scale)
|
|
let newLevel = Math.max(level, this.minimumLevel)
|
|
if (newLevel != this.currentLevel) {
|
|
if (!currentTiles.keep) {
|
|
currentTiles.loader.cancel()
|
|
}
|
|
this.hideTilesAboveLevel(newLevel)
|
|
currentTiles = this.ensureTiles(newLevel, event.about)
|
|
this.currentLevel = newLevel
|
|
} else {
|
|
this.ensureTiles(this.currentLevel, event.about)
|
|
}
|
|
this.bringTilesToFront(currentTiles)
|
|
if (this._foreground) {
|
|
this.addChild(this._foreground)
|
|
}
|
|
}
|
|
|
|
/**
|
|
*Activates the textures on the DeepZoomImage.
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
activate() {
|
|
this.destroyTilesAboveLevel(this.currentLevel)
|
|
this.ensureTiles(this.currentLevel, null)
|
|
//console.log("Activate Textures!", this.currentLevel)
|
|
}
|
|
|
|
/**
|
|
*Dectivates the textures on the DeepZoomImage.
|
|
*
|
|
* @memberof DeepZoomImage
|
|
*/
|
|
deactivate() {
|
|
this.destroyAllTiles()
|
|
Object.keys(this.tileLayers).forEach(key => {
|
|
this.destroyTiles(key)
|
|
})
|
|
this.tileContainer.destroy({ children: true })
|
|
printTileCacheInfos()
|
|
}
|
|
|
|
throwFinished() {
|
|
console.log("throwFinished")
|
|
let key = this.currentLevel.toString()
|
|
let currentTiles = this.tileLayers[key]
|
|
if (typeof currentTiles == 'undefined') {
|
|
return
|
|
}
|
|
|
|
this.ensureTiles(this.currentLevel)
|
|
// let all = new Set()
|
|
// for (let tile of currentTiles.children) {
|
|
// all.add(tile.url)
|
|
// }
|
|
// let { centerCol, centerRow, needed } = this.neededTiles(currentTiles, this.currentLevel)
|
|
// for (let [url, col, row] of needed) {
|
|
// all.delete(url)
|
|
// }
|
|
// for (let url of all) {
|
|
// currentTiles.destroyTileByUrl(url)
|
|
// }
|
|
// currentTiles.loader.loader.reset()
|
|
}
|
|
}
|
|
</code></pre>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer class="content-size">
|
|
<div class="footer">
|
|
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)
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<script>prettyPrint();</script>
|
|
<script src="scripts/main.js"></script>
|
|
</body>
|
|
</html>
|