Removed PIXIUtils from geographics.
This commit is contained in:
Vendored
+36
-30
@@ -239,43 +239,49 @@
|
||||
let container = document.createElement('div');
|
||||
container.className = 'doctest-wrapper';
|
||||
|
||||
let titleParent = container;
|
||||
if (doctest.hasAttribute('data-collapsible')) {
|
||||
let collapsibleToggle = document.createElement('div');
|
||||
if (doctest.hasAttribute('data-title') || doctest.hasAttribute('data-collapsible')) {
|
||||
let titlebar = document.createElement('div');
|
||||
titlebar.className = 'doctest-titlebar';
|
||||
titlebar.style = 'min-height: 10px;';
|
||||
container.appendChild(titlebar);
|
||||
|
||||
let icon = document.createElement('i');
|
||||
icon.className = 'material-icons';
|
||||
collapsibleToggle.appendChild(icon);
|
||||
if (doctest.hasAttribute('data-title')) {
|
||||
let title = document.createElement('h6');
|
||||
title.innerText = doctest.getAttribute('data-title');
|
||||
title.className = 'doctest-section-title';
|
||||
titlebar.appendChild(title);
|
||||
}
|
||||
|
||||
collapsibleToggle.className = 'doctest-collapsible-toggle';
|
||||
collapsibleToggle.style = 'min-height: 10px;';
|
||||
titleParent = collapsibleToggle;
|
||||
container.appendChild(collapsibleToggle);
|
||||
if (doctest.hasAttribute('data-collapsible')) {
|
||||
let icon = document.createElement('i');
|
||||
icon.className = 'material-icons';
|
||||
titlebar.classList.add('doctest-collapsible-toggle');
|
||||
|
||||
const collapsedClass = 'collapsed';
|
||||
|
||||
function setToggleMode(collapse) {
|
||||
if (collapse) {
|
||||
container.classList.add(collapsedClass);
|
||||
icon.innerText = 'arrow_drop_down';
|
||||
if (titlebar.childNodes.length > 0) {
|
||||
titlebar.insertBefore(icon, titlebar.childNodes[0]);
|
||||
} else {
|
||||
container.classList.remove(collapsedClass);
|
||||
icon.innerText = 'arrow_drop_up';
|
||||
titlebar.appendChild(icon);
|
||||
}
|
||||
}
|
||||
|
||||
function determineToggleMode() {
|
||||
setToggleMode(!container.classList.contains(collapsedClass));
|
||||
}
|
||||
const collapsedClass = 'collapsed';
|
||||
|
||||
setToggleMode(doctest.hasAttribute('data-collapsed'));
|
||||
collapsibleToggle.addEventListener('click', determineToggleMode);
|
||||
}
|
||||
if (doctest.hasAttribute('data-title')) {
|
||||
let title = document.createElement('h6');
|
||||
title.innerText = doctest.getAttribute('data-title');
|
||||
title.className = 'doctest-section-title';
|
||||
titleParent.appendChild(title);
|
||||
function setToggleMode(collapse) {
|
||||
if (collapse) {
|
||||
container.classList.add(collapsedClass);
|
||||
icon.innerText = 'arrow_drop_down';
|
||||
} else {
|
||||
container.classList.remove(collapsedClass);
|
||||
icon.innerText = 'arrow_drop_up';
|
||||
}
|
||||
}
|
||||
|
||||
function determineToggleMode() {
|
||||
setToggleMode(!container.classList.contains(collapsedClass));
|
||||
}
|
||||
|
||||
setToggleMode(doctest.hasAttribute('data-collapsed'));
|
||||
titlebar.addEventListener('click', determineToggleMode);
|
||||
}
|
||||
}
|
||||
|
||||
let pre = document.createElement('pre');
|
||||
|
||||
Vendored
+89
-113
@@ -19094,6 +19094,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
class PIXIUtils {
|
||||
/*
|
||||
* Transform a pixi text to it's actual screensize,
|
||||
* ignoring it's local transforms
|
||||
*/
|
||||
static toScreenFontSize(pixiText, fontSize = null) {
|
||||
pixiText._recursivePostUpdateTransform();
|
||||
|
||||
let normalizedScale = {
|
||||
x: pixiText.scale.x / pixiText.transform.worldTransform.a,
|
||||
y: pixiText.scale.x / pixiText.transform.worldTransform.d
|
||||
};
|
||||
|
||||
pixiText.scale = { x: normalizedScale.x, y: normalizedScale.y };
|
||||
if (fontSize) pixiText.style.fontSize = fontSize;
|
||||
}
|
||||
|
||||
static saveFill(graphics) {
|
||||
return {
|
||||
fill: graphics.fill.color,
|
||||
alpha: graphics.fill.alpha
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GeoGraphics are graphical objects, that does not store the graphics information
|
||||
* in screen space, but in geographical coordinates. Therefore GeoGraphics must be
|
||||
@@ -19532,15 +19557,12 @@
|
||||
*/
|
||||
_drawShape(polygon, hole = []) {
|
||||
// We save the fill specified in the onDraw event handler.
|
||||
//
|
||||
// Consider: Maybe it would be a good idea to add a 'onHoleDraw'
|
||||
// callback to make the hole customizable. Maybe you want
|
||||
// to fill it with a different color or an mediocre alpha value.
|
||||
// then feel free to implement it.
|
||||
let { fill, alpha } = PIXIUtils.saveFill(this.graphics);
|
||||
|
||||
/**
|
||||
* This may seem redundant, but it's required
|
||||
* a) Draw the hole with a polygon.
|
||||
*
|
||||
* This may seem redundant to (c), but it's required (in this order(!))
|
||||
* to make the hole clickable.
|
||||
*
|
||||
* It was a bit confusing, so I made a CodePen
|
||||
@@ -19551,9 +19573,15 @@
|
||||
this.graphics.drawPolygon(hole);
|
||||
}
|
||||
|
||||
/**
|
||||
* b) Draw the shape.
|
||||
*/
|
||||
this.graphics.beginFill(fill, alpha);
|
||||
this.graphics.drawPolygon(polygon);
|
||||
|
||||
/**
|
||||
* c) Add the hole.
|
||||
*/
|
||||
if (hole.length > 0) {
|
||||
this.graphics.beginHole();
|
||||
this.graphics.drawPolygon(hole);
|
||||
@@ -19602,31 +19630,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
class PIXIUtils {
|
||||
/*
|
||||
* Transform a pixi text to it's actual screensize,
|
||||
* ignoring it's local transforms
|
||||
*/
|
||||
static toScreenFontSize(pixiText, fontSize = null) {
|
||||
pixiText._recursivePostUpdateTransform();
|
||||
|
||||
let normalizedScale = {
|
||||
x: pixiText.scale.x / pixiText.transform.worldTransform.a,
|
||||
y: pixiText.scale.x / pixiText.transform.worldTransform.d
|
||||
};
|
||||
|
||||
pixiText.scale = { x: normalizedScale.x, y: normalizedScale.y };
|
||||
if (fontSize) pixiText.style.fontSize = fontSize;
|
||||
}
|
||||
|
||||
static saveFill(graphics) {
|
||||
return {
|
||||
fill: graphics.fill.color,
|
||||
alpha: graphics.fill.alpha
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class MapList {
|
||||
constructor(active = null, maps = {}) {
|
||||
this.maps = maps;
|
||||
@@ -19926,7 +19929,15 @@
|
||||
mapList,
|
||||
scatterContainer,
|
||||
displayObject,
|
||||
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null, name = null } = {}
|
||||
{
|
||||
onTransform = null,
|
||||
onChange = null,
|
||||
focus = null,
|
||||
zoom = null,
|
||||
viewport = null,
|
||||
name = null,
|
||||
mapChangeLocked = false
|
||||
} = {}
|
||||
) {
|
||||
super(displayObject, {
|
||||
name
|
||||
@@ -19954,6 +19965,7 @@
|
||||
// this.maps = maps
|
||||
// if (opts.map) this.placeMap(opts.map)
|
||||
this.dynamicElements = new Map();
|
||||
this._mapChangeLocked = mapChangeLocked;
|
||||
|
||||
// Binds the transformed callback beforehand.
|
||||
this.transformed = this.transformed.bind(this);
|
||||
@@ -19961,13 +19973,24 @@
|
||||
this.changeMap(mapList.active);
|
||||
}
|
||||
|
||||
get mapChangeLocked() {
|
||||
return this._mapChangeLocked
|
||||
}
|
||||
|
||||
lockMapChange() {
|
||||
this._mapChangeLocked = true;
|
||||
}
|
||||
|
||||
unlockMapChange() {
|
||||
this._mapChangeLocked = false;
|
||||
}
|
||||
|
||||
adapt() {
|
||||
this.layers.forEach(layer => {
|
||||
if (layer.adapt) layer.adapt(this.map);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
focus(coordinates, zoom) {
|
||||
this.mapview.updateFocusPoint(this.map);
|
||||
}
|
||||
@@ -20017,89 +20040,39 @@
|
||||
/* map ,
|
||||
useScatterAsContainer = true // If set to false, the normal container is used. This is necessary when using submaps and the container need to be a RigidContainer.*/
|
||||
) {
|
||||
console.log('🗺️ Change map to: ', name);
|
||||
let oldMap = this.map;
|
||||
if (!this.mapChangeLocked) {
|
||||
console.log('🗺️ Change map to: ', name);
|
||||
let oldMap = this.map;
|
||||
|
||||
this.mapList.select(name);
|
||||
this.mapList.select(name);
|
||||
|
||||
if (oldMap) {
|
||||
oldMap.unload();
|
||||
oldMap.onTransform.remove(this.transformed);
|
||||
}
|
||||
|
||||
let map = this.map;
|
||||
if (map) {
|
||||
map.load();
|
||||
|
||||
this.scatterContainer.addChild(map.image);
|
||||
|
||||
this.mapview.apply(map);
|
||||
map.image.addChild(this.displayObject);
|
||||
|
||||
// A geolayer's displayObject is on the parent layer.
|
||||
// A maplayer's displayobject is always the child of the map.
|
||||
this.adapt();
|
||||
|
||||
this.changeHandler.call(this, map, oldMap);
|
||||
|
||||
//Call transform one time manually.
|
||||
this.transformed();
|
||||
map.onTransform.add(this.transformed);
|
||||
} else {
|
||||
console.error(`Could not change map to ${name}.`);
|
||||
}
|
||||
|
||||
/*Logging.log(`Map change: ${key}`)
|
||||
|
||||
if (this.active !== key) {
|
||||
if (this.maps.hasOwnProperty(key)) {
|
||||
let old = this.map ? this.map : null
|
||||
this._map = this.maps[key]
|
||||
this._map.name = key
|
||||
this.active = key
|
||||
|
||||
let container = useScatterAsContainer ? this.scatterContainer : this.container
|
||||
|
||||
this.map.load(container)
|
||||
|
||||
// Copies all layers.
|
||||
this.layers.forEach(layer => {
|
||||
if (old) this.map.image.addChild(layer.container)
|
||||
})
|
||||
|
||||
this.placeMap(this.map)
|
||||
|
||||
/**
|
||||
* TODO: Improve
|
||||
*
|
||||
* I'm quite sure if I made a design mistake here.
|
||||
* In an earlier version I did not need to migrate the
|
||||
* layers manually from the map to the next map.
|
||||
*
|
||||
* I believe the old version was a container next to the
|
||||
* map, which got updated on transform.
|
||||
*
|
||||
* -SO
|
||||
*/
|
||||
/*
|
||||
if (old) old.unload()
|
||||
|
||||
|
||||
} else {
|
||||
let keys = Object.keys(this.maps)
|
||||
|
||||
if (keys.length == 0) console.error('There is no map set for the map layer!')
|
||||
else {
|
||||
let fallbackMap = keys[0]
|
||||
console.error(
|
||||
`A map with the key (${key}) does not exists within the mapapp. Fallback to map: ${fallbackMap}.`
|
||||
)
|
||||
this.changeMap(fallbackMap, {
|
||||
useScatterAsContainer
|
||||
})
|
||||
}
|
||||
if (oldMap) {
|
||||
oldMap.unload();
|
||||
oldMap.onTransform.remove(this.transformed);
|
||||
}
|
||||
}*/
|
||||
|
||||
let map = this.map;
|
||||
if (map) {
|
||||
map.load();
|
||||
|
||||
this.scatterContainer.addChild(map.image);
|
||||
|
||||
this.mapview.apply(map);
|
||||
map.image.addChild(this.displayObject);
|
||||
|
||||
// A geolayer's displayObject is on the parent layer.
|
||||
// A maplayer's displayobject is always the child of the map.
|
||||
this.adapt();
|
||||
|
||||
this.changeHandler.call(this, map, oldMap);
|
||||
|
||||
//Call transform one time manually.
|
||||
this.transformed();
|
||||
map.onTransform.add(this.transformed);
|
||||
} else {
|
||||
console.error(`Could not change map to ${name}.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
refocus() {
|
||||
@@ -21642,4 +21615,7 @@
|
||||
window.Overlay = Overlay;
|
||||
window.MapList = MapList;
|
||||
|
||||
window.GeoJson = GeoJson;
|
||||
window.GeoUtils = GeoUtils;
|
||||
|
||||
}());
|
||||
|
||||
Reference in New Issue
Block a user