@itwin/core-frontend
Version:
iTwin.js frontend components
126 lines • 5.06 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import { Point3d } from "@itwin/core-geometry";
import { IModelApp } from "../IModelApp";
import { IconSprites } from "../Sprites";
/** A simple decorator that shows the logo at a given screen position.
* @internal
*/
export class LogoDecoration {
_sprite;
/** The current position of the logo in view coordinates. */
position = new Point3d();
_offset;
set offset(offset) {
this._offset = offset;
}
/** The logo offset in view coordinates.*/
get offset() {
return this._offset;
}
/** Move the logo to the lower left corner of the screen. */
moveToLowerLeftCorner(context) {
if (!this._sprite || !this._sprite.isLoaded)
return false;
this.position.x = this._offset?.x ?? 0;
this.position.y = context.viewport.parentDiv.clientHeight - this._sprite.size.y;
if (this._offset?.y)
this.position.y -= this._offset.y;
return true;
}
/* TODO: Add other move methods as needed */
/** Indicate if the logo is loaded and ready to be drawn. */
get isLoaded() { return this._sprite?.isLoaded ?? false; }
async activate(sprite) {
this._sprite = sprite;
return new Promise((resolve, _reject) => {
sprite.loadPromise.then(() => {
resolve(true);
}).catch(() => {
resolve(false);
});
});
}
/** Draw this sprite onto the supplied canvas.
* @see [[CanvasDecoration.drawDecoration]]
*/
drawDecoration(ctx) {
if (this.isLoaded && this._sprite?.image !== undefined) {
// Draw image with an origin at the top left corner
ctx.drawImage(this._sprite.image, 0, 0);
}
}
decorate(context) {
context.addCanvasDecoration(this);
}
}
/** A decorator that adds the Google Maps logo to the lower left corner of the screen.
* @internal
*/
export class GoogleMapsDecorator {
logo = new LogoDecoration();
_showCreditsOnScreen;
/** Create a new GoogleMapsDecorator.
* @param showCreditsOnScreen If true, the data attributions/copyrights from the Google Photorealistic 3D Tiles will be displayed on screen. The Google Maps logo will always be displayed.
*/
constructor(showCreditsOnScreen) {
this._showCreditsOnScreen = showCreditsOnScreen;
}
/** Activate the logo based on the given map type. */
async activate(mapType) {
// Pick the logo that is the most visible on the background map
const imageName = mapType === "satellite" ?
"GoogleMaps_Logo_WithDarkOutline" :
"GoogleMaps_Logo_WithLightOutline";
// We need to move the logo right after the 'i.js' button
this.logo.offset = new Point3d(45, 10);
return this.logo.activate(IconSprites.getSpriteFromUrl(`${IModelApp.publicPath}images/${imageName}.svg`));
}
;
/** Decorate implementation */
decorate = (context) => {
if (!this.logo.isLoaded)
return;
this.logo.moveToLowerLeftCorner(context);
this.logo.decorate(context);
if (!this._showCreditsOnScreen)
return;
// Get data attribution (copyright) text
const copyrightMap = getCopyrights(context.viewport);
// Order by most occurances to least
// See https://developers.google.com/maps/documentation/tile/create-renderer#display-attributions
const sortedCopyrights = [...copyrightMap.entries()].sort((a, b) => b[1] - a[1]);
const copyrightText = sortedCopyrights.map(([key]) => ` • ${key}`).join("");
// Create and add element, offset to leave space for i.js and Google logos
const elem = document.createElement("div");
elem.innerHTML = copyrightText;
elem.style.color = "white";
elem.style.fontSize = "11px";
elem.style.textWrap = "wrap";
elem.style.position = "absolute";
elem.style.bottom = "14px";
elem.style.left = "155px";
context.addHtmlDecoration(elem);
};
}
/** Get copyrights from tiles currently in the viewport.
* @internal
*/
export function getCopyrights(vp) {
const tiles = IModelApp.tileAdmin.getTilesForUser(vp)?.selected;
const copyrightMap = new Map();
if (tiles) {
for (const tile of tiles) {
if (tile.copyright) {
for (const copyright of tile.copyright.split(";")) {
const currentCount = copyrightMap.get(copyright);
copyrightMap.set(copyright, currentCount ? currentCount + 1 : 1);
}
}
}
}
return copyrightMap;
}
//# sourceMappingURL=GoogleMapsDecorator.js.map