Removed PIXIUtils from geographics.

This commit is contained in:
2019-12-09 14:27:32 +01:00
parent 9159073483
commit 792892cb82
4 changed files with 285 additions and 258 deletions
+36 -30
View File
@@ -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');
+89 -113
View File
@@ -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;
}());