Geographics placements working again.

This commit is contained in:
2019-11-05 11:07:36 +01:00
parent ff0606d0a7
commit 87727d28b9
8 changed files with 297 additions and 222 deletions
+145 -108
View File
@@ -17791,8 +17791,13 @@
}
unload() {
console.log('unload', this, this.image);
if (this.image) {
if (this.image.parent) this.image.parent.removeChild(this.image);
console.log('removeScatter');
if (this.image.parent) {
console.log('Remove from parent');
this.image.parent.removeChild(this.image);
}
this.image.scatter = null;
}
}
@@ -17804,6 +17809,7 @@
* @param {ScatterEvent}[e] - Contains informations on how the element was transformed.
*/
transformed(e) {
console.log(this.name);
this.onTransform.call(this, e);
}
@@ -18157,8 +18163,6 @@
return null
}
}
}
GeoMap.counter = 0;
@@ -18607,6 +18611,7 @@
}
transformed(map) {
console.log('MAPVIEW RECEIVED TRANSFORM');
this.updateZoom(map);
this.updateFocusPoint(map);
}
@@ -19656,20 +19661,20 @@
);
return null
} else {
this.geographics = [];
displayObject.map = this;
this.displayObject = displayObject;
this.layers = [];
this.geographics = [];
let pixiAddChild = displayObject.addChild.bind(displayObject);
this.pixiAddChild = displayObject.addChild.bind(displayObject);
displayObject.addChild = (...elements) => {
elements.forEach(element => {
if (element instanceof GeoGraphics) {
this.geographics.push(element);
pixiAddChild(element.graphics);
this.pixiAddChild(element.graphics);
} else {
pixiAddChild(element);
this.pixiAddChild(element);
}
});
};
@@ -19747,59 +19752,6 @@
// }
}
class MapList {
constructor(active, maps) {
this.maps = maps;
this.active = active;
if (Object.keys(maps).length > 0) this.select(active);
}
/**
* Selects a map from the map list.
*
* @param {string} active - Name of the map to select.
* @returns
* @memberof MapList
*/
select(active) {
let map = null;
if (active !== this.active) {
let keys = Object.keys(this.maps);
if (keys.length > 0) {
if (this.maps[active] == null) {
let altActive = keys[0];
console.warn(
`The MapList does not contain the provided active key '${active}'. Used '${altActive}' as fallback.`
);
active = altActive;
}
if (this.active !== active) {
this.active = active;
map = this.maps[active];
}
} else {
console.error(`Could not provide a fallback map! The map object is empty.`);
}
}
return map
}
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.');
this.maps[key] = map;
}
get map() {
console.log(this.maps, this.active);
return this.maps[this.active]
}
}
class MapLayer extends GeoLayer {
constructor(
scatterContainer,
@@ -19884,27 +19836,6 @@
// }
// }
placeMap(map) {
if (map instanceof GeoMap) {
this.scatterContainer.addChild(map.image);
this.map.onTransform.add(this.transformed.bind(this));
this.mapview.update(this.map);
this.adapt();
} else {
console.error("Could not set map, it's not of type GeoMap.", map);
}
}
placeElement(elem) {
if (elem instanceof PIXI.DisplayObject) {
this.map.image.addChild(elem);
this.elements.push(elem);
} else {
console.error('Element need to be of type PIXI.DisplayObject.', elem);
}
}
transformed(e) {
this.mapview.transformed(this.map);
this.transformHandler.call(this);
@@ -19929,18 +19860,39 @@
return mapLayerClone
}
/**
* Changes the map to the specified one, keeping the position and the zoom of the old map.
*
* @public
* @param {GeoMap} map
* @memberof MapLayer
*/
changeMap(
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.
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.*/
) {
let oldMap = map;
this._map = map;
if (map instanceof GeoMap) {
let oldMap = this.map;
if (oldMap) oldMap.unload();
if (oldMap) oldMap.unload();
map.load();
this._map = map;
this.changeHandler.call(this, map, oldMap);
this.placeMap(map);
this.map.load();
this.scatterContainer.addChild(this.map.image);
map.image.addChild(this.displayObject);
this.mapview.update(this.map);
// 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);
this.map.onTransform.add(this.transformed.bind(this));
} else {
console.error("Could not set map, it's not of type GeoMap.", map);
}
/*Logging.log(`Map change: ${key}`)
@@ -20007,8 +19959,6 @@
get mapLayer() {
return this
}
}
MapLayer.idx = 0;
@@ -20667,6 +20617,69 @@
}
}
class MapList {
constructor(active, maps) {
this.maps = maps;
this.active = active;
if (Object.keys(maps).length > 0) this.select(active);
}
/**
* Selects a map from the map list.
*
* @param {string} active - Name of the map to select.
* @returns
* @memberof MapList
*/
select(active) {
let map = null;
if (active !== this.active) {
let keys = Object.keys(this.maps);
if (keys.length > 0) {
if (this.maps[active] == null) {
let altActive = keys[0];
console.warn(
`The MapList does not contain the provided active key '${active}'. Used '${altActive}' as fallback.`
);
active = altActive;
}
if (this.active !== active) {
this.active = active;
map = this.maps[active];
}
} else {
console.error(`Could not provide a fallback map! The map object is empty.`);
}
}
return map
}
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.');
map.name = key;
this.maps[key] = map;
}
get map() {
console.log(this.maps, this.active);
return this.maps[this.active]
}
next() {
let keys = Object.keys(this.maps);
let idx = keys.indexOf(this.active);
let next = idx + 1 < key.length ? keys[idx + 1] : keys[0];
console.log(keys, idx, next);
return next
}
}
/**
* MapApp is responsible for showing fullscreen
* map applications.
@@ -20681,7 +20694,8 @@
{
debug: false,
maps: {}, //required
view: null,
view: null, //required
wrapper: null, // Required if you want to use DOM Overlays.
startmap: null,
coordsLogging: false,
overlays: {},
@@ -20709,6 +20723,7 @@
this.overlays = opts.overlays;
this.focus = opts.focus;
this.zoom = opts.zoom;
this.wrapper = opts.wrapper;
this.onMapChanged = new EventHandler('mapChanged', {
listeners: opts.onMapChanged
@@ -20774,25 +20789,16 @@
container: this.scene
});
this.domLayer = new DOMLayer({
name: 'DOM Root',
container: document.body
});
this._setupMapLayer();
this.pixiLayer.place(this.mapContainer);
this.pixiUiLayer = new PIXILayer({ name: 'Pixi UI' });
this.pixiLayer.placeLayer(this.pixiUiLayer);
this.ui = new PIXI.Container();
this.scene.addChild(this.ui);
this.domUiLayer = new DOMLayer({ name: 'DOM UI' });
this.domLayer.placeLayer(this.domUiLayer);
if (this.fpsLogging && fpsDisplay) this.pixiUiLayer.place(fpsDisplay);
if (this.fpsLogging && fpsDisplay) this.ui.addChild(fpsDisplay);
if (this.coordsLogging) {
this.coordsDisplay = new CoordinateDisplay(this);
this.pixiUiLayer.place(this.coordsDisplay);
this.ui.addChild(this.coordsDisplay);
}
this.__dragging = false;
@@ -20810,6 +20816,29 @@
return this
}
/**
* You can add Dom elements directly to the app's DomLayer by calling
* appendChild(). The elements will be forced to use an absolute positioning.
* This shall prevent unwanted sideeffects with the app.
*
* @param {HTMLElement} element - Element to add to DOMRoot.
* @memberof MapApp
*/
appendChild(element) {
if (!this.wrapper)
console.error(
`When using DOMElements on ${this.constructor.name} you must specify a wrapper in the constructor.`
);
if (!(element instanceof HTMLElement))
console.error(
'You can only append HTMLElements to DOM. If you want to add PIXI elements to the scene call app.scene.addChild(element).'
);
else {
Object.assign(element.style, { position: 'absolute' });
this.wrapper.appendChild(element);
}
}
layout(width, height) {
this.scene.resize(width, height);
this.mapLayer.mapview.update();
@@ -20827,8 +20856,9 @@
}
selectMap(key) {
this.mapList.select(key);
if (this.mapLayer) {
let result = this.mapList.select(key);
console.log('Select map', key, result);
if (result && this.mapLayer) {
this.mapLayer.changeMap(this.mapList.map);
}
}
@@ -20885,6 +20915,13 @@
this.transformed();
this.onMapChanged.call(this, this.map);
if (this.ui && this.ui.parent) {
const parent = this.ui.parent;
parent.removeChild(this.ui);
parent.addChild(this.ui);
console.log('BRING TO FRONT!');
}
}
_doesOverlayElementExist(layer, type, name) {
@@ -22159,7 +22196,6 @@
window.CoverScatter = CoverScatter;
window.GeoLayer = GeoLayer;
window.MapLayer = MapLayer;
window.MapList = MapList;
window.GeoGraphics = GeoGraphics;
window.GeoPoint = GeoPoint;
@@ -22168,5 +22204,6 @@
window.GeoMultiShape = GeoMultiShape;
window.Overlay = Overlay;
window.MapList = MapList;
}());