From 792892cb823241f66e0c48da78838a35d888e236 Mon Sep 17 00:00:00 2001 From: Severin Opel Date: Mon, 9 Dec 2019 14:27:32 +0100 Subject: [PATCH] Removed PIXIUtils from geographics. --- dist/iwmlib.js | 66 +++++----- dist/iwmlib.pixi.js | 202 ++++++++++++++---------------- lib/pixi/maps/geographics.html | 219 +++++++++++++++++++++------------ lib/pixi/maps/geographics.js | 56 +++------ 4 files changed, 285 insertions(+), 258 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index eeaa752..7c23704 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -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'); diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 20ca677..3f1f5f2 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -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; + }()); diff --git a/lib/pixi/maps/geographics.html b/lib/pixi/maps/geographics.html index 8edff9d..d9f4431 100644 --- a/lib/pixi/maps/geographics.html +++ b/lib/pixi/maps/geographics.html @@ -1,5 +1,5 @@ - + @@ -29,73 +29,7 @@ -

GeoGraphics

@@ -111,12 +45,139 @@ + + + + + +
+

Data & Functions

+ + + + + + +
+

GeoPoint

@@ -127,7 +188,7 @@ -