Pixi V8 Upgrade

.github/workflows/build.yml

@@ -4,7 +4,7 @@ on:
  push:
  branches: [ main ]
  pull_request:
- branches: [ main ]
+ branches: [ 'main', '!pixi_v8' ]
 
 env:
  FORCE_COLOR: 2

modules/Context.js

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@pixi/utils';
+import { EventEmitter } from 'pixi.js';
 import { select as d3_select } from 'd3-selection';
 import { Viewport } from '@rapid-sdk/math';
 import { utilUnicodeCharsTruncated } from '@rapid-sdk/util';

modules/behaviors/AbstractBehavior.js

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@pixi/utils';
+import { EventEmitter } from 'pixi.js';
 import { vecRotate } from '@rapid-sdk/math';
 
 
@@ -125,54 +125,49 @@ export class AbstractBehavior extends EventEmitter {
  target: null
  };
 
- if (!e.target) { // `e.target` is the Pixi DisplayObject that triggered this event.
+ //console.log(`hit: ${e.target?.label}`);
+
+ if (!e.target) { // `e.target` is the PIXI.DisplayObject that triggered this event.
  return result;
  }
 
  let dObj = e.target;
- let feature = dObj?.__feature__;
-
- // __feature__ is here, use this target
- if (feature) {
- result.target = {
- displayObject: dObj,
- feature: feature,
- featureID: feature.id,
- layer: feature.layer,
- layerID: feature.layer.id,
- data: feature.data,
- dataID: feature.dataID
- };
- return result;
- }
 
- // No __feature__ in target, look in parent
- dObj = e.target.parent;
- feature = dObj?.__feature__;
- if (feature) {
- result.target = {
- displayObject: dObj,
- feature: feature,
- featureID: feature.id,
- layer: feature.layer,
- layerID: feature.layer.id,
- data: feature.data,
- dataID: feature.dataID
- };
- return result;
+ // Try to find a target feature - it will have a `__feature__` property.
+ // Look up through the parent hierarchy until we find one or end up at the root stage.
+ while (dObj) {
+ let feature = dObj.__feature__;
+ if (feature) {
+ result.target = {
+ displayObject: dObj,
+ feature: feature,
+ featureID: feature.id,
+ layer: feature.layer,
+ layerID: feature.layer.id,
+ data: feature.data,
+ dataID: feature.dataID
+ };
+ return result;
+
+ } else {
+ if (dObj.parent) {
+ dObj = dObj.parent;
+
+ } else { // can't look up any further, just return the original target.
+ result.target = {
+ displayObject: e.target,
+ feature: null,
+ featureID: null,
+ layer: null,
+ layerID: null,
+ data: null,
+ dataID: null
+ };
+ return result;
+ }
+ }
  }
 
- // No __feature__ there either, just use the original target
- result.target = {
- displayObject: e.target,
- feature: null,
- featureID: null,
- layer: null,
- layerID: null,
- data: null,
- dataID: null
- };
- return result;
  }
 
 }

modules/core/AbstractSystem.js

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@pixi/utils';
+import { EventEmitter } from 'pixi.js';
 
 
 /**

modules/core/MapSystem.js

@@ -56,6 +56,8 @@ export class MapSystem extends AbstractSystem {
 
  this._renderer = null;
  this._initPromise = null;
+ this._startPromise = null;
+ this._pixiReadyPromise = null;
 
  // Ensure methods used as callbacks always have `this` bound correctly.
  // (This is also necessary when using `d3-selection.call`)
@@ -144,8 +146,16 @@ export class MapSystem extends AbstractSystem {
  * @return {Promise} Promise resolved when this component has completed startup
  */
  startAsync() {
- this._started = true;
- return Promise.resolve();
+ if (this._startPromise) return this._startPromise;
+
+ const ui = this.context.systems.ui;
+ const prerequisites = ui.startAsync(); // UI must be started before we resolve
+
+ return this._startPromise = prerequisites
+ .then(() => {
+ this._started = true;
+ return this._pixiReadyPromise || Promise.reject();
+ });
  }
 
 
@@ -225,96 +235,100 @@ export class MapSystem extends AbstractSystem {
  .append('div')
  .attr('class', 'overlay');
 
- if (!this._renderer) {
- this._renderer = new PixiRenderer(context, this.supersurface, this.surface, this.overlay);
+ if (this._renderer) return; // we created it already
 
- // Forward the 'move' and 'draw' events from PixiRenderer
- this._renderer
- .on('move', () => this.emit('move'))
- .on('draw', () => {
- this._updateHash();
- this.emit('draw', { full: true }); // pass {full: true} for legacy receivers
- });
- }
 
+ this._renderer = new PixiRenderer(context, this.supersurface, this.surface, this.overlay);
 
- // Setup events that cause the map to redraw...
- const editor = context.systems.editor;
- const filters = context.systems.filters;
- const imagery = context.systems.imagery;
- const photos = context.systems.photos;
- const styles = context.systems.styles;
- const scene = this._renderer.scene;
-
- editor
- .on('merge', entityIDs => {
- if (entityIDs) {
- scene.dirtyData('osm', entityIDs);
- }
- this.deferredRedraw();
- })
- .on('stagingchange', difference => {
- // todo - maybe only do this if difference.didChange.geometry?
- const complete = difference.complete();
- for (const entity of complete.values()) {
- if (entity) { // may be undefined if entity was deleted
- entity.touch(); // bump .v in place, rendering code will pick it up as dirty
- filters.clearEntity(entity); // clear feature filter cache
- }
- }
- this.immediateRedraw();
- })
- .on('historyjump', (prevIndex, currIndex) => {
- // This code occurs when jumping to a different edit because of a undo/redo/restore, etc.
- const prevEdit = editor.history[prevIndex];
- const currEdit = editor.history[currIndex];
-
- // Counterintuitively, when undoing, we might want the metadata from the _next_ edit (located at prevIndex).
- // If that edit exists (it might not if we are restoring) use that one, otherwise just use the current edit
- const didUndo = (currIndex === prevIndex - 1);
- const edit = (didUndo && prevEdit) ?? currEdit;
-
- // Reposition the map if we've jumped to a different place.
- const t0 = context.viewport.transform.props;
- const t1 = edit.transform;
- if (t1 && (t0.x !== t1.x || t0.y !== t1.y || t0.k !== t1.k || t0.r !== t1.r)) {
- this.transformEase(t1);
- }
+ this._pixiReadyPromise = (this._renderer._pixiReadyPromise || Promise.reject())
+ .then(() => {
+ // Forward the 'move' and 'draw' events from PixiRenderer
+ this._renderer
+ .on('move', () => this.emit('move'))
+ .on('draw', () => {
+ this._updateHash();
+ this.emit('draw', { full: true }); // pass {full: true} for legacy receivers
+ });
 
- // Switch to select mode if the edit contains selected ids.
- // Note: draw modes need to do a little extra work to survive this,
- // so they have their own `historyjump` listeners.
- const modeID = context.mode?.id;
- if (/^draw/.test(modeID)) return;
-
- // For now these IDs are assumed to be OSM ids.
- // Check that they are actually in the stable graph.
- const graph = edit.graph;
- const checkIDs = edit.selectedIDs ?? [];
- const selectedIDs = checkIDs.filter(entityID => graph.hasEntity(entityID));
- if (selectedIDs.length) {
- context.enter('select-osm', { selection: { osm: selectedIDs }} );
- } else {
- context.enter('browse');
- }
- });
+ // Setup events that cause the map to redraw...
+ const editor = context.systems.editor;
+ const filters = context.systems.filters;
+ const imagery = context.systems.imagery;
+ const photos = context.systems.photos;
+ const styles = context.systems.styles;
+ const scene = this._renderer.scene;
+
+ editor
+ .on('merge', entityIDs => {
+ if (entityIDs) {
+ scene.dirtyData('osm', entityIDs);
+ }
+ this.deferredRedraw();
+ })
+ .on('stagingchange', difference => {
+ // todo - maybe only do this if difference.didChange.geometry?
+ const complete = difference.complete();
+ for (const entity of complete.values()) {
+ if (entity) { // may be undefined if entity was deleted
+ entity.touch(); // bump .v in place, rendering code will pick it up as dirty
+ filters.clearEntity(entity); // clear feature filter cache
+ }
+ }
+ this.immediateRedraw();
+ })
+ .on('historyjump', (prevIndex, currIndex) => {
+ // This code occurs when jumping to a different edit because of a undo/redo/restore, etc.
+ const prevEdit = editor.history[prevIndex];
+ const currEdit = editor.history[currIndex];
+
+ // Counterintuitively, when undoing, we might want the metadata from the _next_ edit (located at prevIndex).
+ // If that edit exists (it might not if we are restoring) use that one, otherwise just use the current edit
+ const didUndo = (currIndex === prevIndex - 1);
+ const edit = (didUndo && prevEdit) ?? currEdit;
+
+ // Reposition the map if we've jumped to a different place.
+ const t0 = context.viewport.transform.props;
+ const t1 = edit.transform;
+ if (t1 && (t0.x !== t1.x || t0.y !== t1.y || t0.k !== t1.k || t0.r !== t1.r)) {
+ this.transformEase(t1);
+ }
+
+ // Switch to select mode if the edit contains selected ids.
+ // Note: draw modes need to do a little extra work to survive this,
+ // so they have their own `historyjump` listeners.
+ const modeID = context.mode?.id;
+ if (/^draw/.test(modeID)) return;
+
+ // For now these IDs are assumed to be OSM ids.
+ // Check that they are actually in the stable graph.
+ const graph = edit.graph;
+ const checkIDs = edit.selectedIDs ?? [];
+ const selectedIDs = checkIDs.filter(entityID => graph.hasEntity(entityID));
+ if (selectedIDs.length) {
+ context.enter('select-osm', { selection: { osm: selectedIDs }} );
+ } else {
+ context.enter('browse');
+ }
+ });
 
- filters
- .on('filterchange', () => {
- scene.dirtyLayers('osm');
- this.immediateRedraw();
- });
+  filters
+  .on('filterchange', () => {
+  scene.dirtyLayers('osm');
+  this.immediateRedraw();
+  });
 
- context.on('modechange', this.immediateRedraw);
- imagery.on('imagerychange', this.immediateRedraw);
- photos.on('photochange', this.immediateRedraw);
- scene.on('layerchange', this.immediateRedraw);
- styles.on('stylechange', this.immediateRedraw);
+  context.on('modechange', this.immediateRedraw);
+  imagery.on('imagerychange', this.immediateRedraw);
+  photos.on('photochange', this.immediateRedraw);
+  scene.on('layerchange', this.immediateRedraw);
+  styles.on('stylechange', this.immediateRedraw);
 
- const osm = context.services.osm;
- if (osm) {
- osm.on('authchange', this.immediateRedraw);
- }
+ const osm = context.services.osm;
+ if (osm) {
+ osm.on('authchange', this.immediateRedraw);
+ }
+
+ });
  }