Merge branch 'pixi_v8' into main

config/esbuild.config.legacy.js → config/esbuild.config.legacy-dev.js

@@ -5,7 +5,7 @@ esbuild
     minify: false,
     bundle: true,
     sourcemap: false,
-    entryPoints: ['./modules/main.js'],
+    entryPoints: ['./modules/main_dev.js'],
     legalComments: 'none',
     logLevel: 'info',
     outfile: 'dist/rapid.legacy.js',

config/esbuild.config.legacy-min.js → config/esbuild.config.legacy-prod.js

@@ -5,7 +5,7 @@ esbuild
     minify: true,
     bundle: true,
     sourcemap: false,
-    entryPoints: ['./modules/main.js'],
+    entryPoints: ['./modules/main_prod.js'],
     legalComments: 'none',
     logLevel: 'info',
     outfile: 'dist/rapid.legacy.min.js',

config/esbuild.config.modern-min.js → config/esbuild.config.modern-dev.js

@@ -2,13 +2,13 @@ import esbuild from 'esbuild';
 
 esbuild
   .build({
-    minify: true,
+    minify: false,
     bundle: true,
-    sourcemap: false,
-    entryPoints: ['./modules/main.js'],
+    sourcemap: true,
+    entryPoints: ['./modules/main_dev.js'],
     legalComments: 'none',
     logLevel: 'info',
-    outfile: 'dist/rapid.min.js',
+    outfile: 'dist/rapid.js',
     target: 'esnext'
   })
   .catch(() => process.exit(1));

config/esbuild.config.modern.js → config/esbuild.config.modern-prod.js

@@ -3,14 +3,14 @@ import fs from 'node:fs';
 
 esbuild
   .build({
-    minify: false,
+    minify: true,
     bundle: true,
-    sourcemap: true,
+    sourcemap: false,
     metafile: true,
-    entryPoints: ['./modules/main.js'],
+    entryPoints: ['./modules/main_prod.js'],
     legalComments: 'none',
     logLevel: 'info',
-    outfile: 'dist/rapid.js',
+    outfile: 'dist/rapid.min.js',
     target: 'esnext'
   })
   .then(result => {

css/80_app.css

@@ -4397,26 +4397,28 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
 .map-footer {
   display: flex;
   flex: 0 0 0px;
-  flex-direction: column;
+  flex-flow: column nowrap;
 
   width: 100%;
   position: relative;
-  border-radius: 0;
-  pointer-events: none;
   -ms-user-select: element;
 }
 
+/* The very bottom "status" row */
+/* Will either display .flash-wrap or .map-footer-wrap */
 .map-footer-bar {
-  pointer-events: all;
-  display: block;
+  display: flex;
+  flex: 0 0 2.5em;
+  flex-flow: column nowrap;
+
   height: 2.5em;
   position: relative;
 }
 
 .map-footer-wrap,
 .flash-wrap {
   display: flex;
-  flex: 0 0 100%;
+  flex: 1 1 0px;
   flex-flow: row nowrap;
   justify-content: space-between;
 
@@ -4496,39 +4498,41 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
 /* Footer - Flash messages
 ------------------------------------------------------- */
 .flash-content {
-    display: flex;
-    flex: 1 0 auto;
-    flex-flow: row nowrap;
-    align-items: center;
-    padding: 2px;
+  display: flex;
+  flex: 1 0 auto;
+  flex-flow: row nowrap;
+
+  align-items: center;
+  padding: 2px;
 }
 
 .flash-icon {
-    flex: 0 0 auto;
-    width: 20px;
-    height: 20px;
-    margin: 0 8px;
+  flex: 0 0 auto;
+
+  width: 20px;
+  height: 20px;
+  margin: 0 8px;
 }
 
 .flash-icon circle {
-    fill: #eee;
+  fill: #eee;
 }
 .flash-icon.disabled circle {
-    cursor: auto;
-    fill: rgba(255,255,255,0.7);
+  cursor: auto;
+  fill: rgba(255,255,255,0.7);
 }
 
 .flash-icon use {
-    color: #222;
+  color: #222;
 }
 .flash-icon.disabled use,
 .flash-icon.operation.disabled use {
-    fill: rgba(32,32,32,0.7);
-    color: rgba(40,40,40,0.7);
+  fill: rgba(32,32,32,0.7);
+  color: rgba(40,40,40,0.7);
 }
 
 .flash-text {
-    flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 /* Scale bar
@@ -4638,32 +4642,33 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
 }
 
 .api-status {
-    text-align: right;
-    padding: 1px 10px;
-    color: #eee;
-    flex: 1 1 auto;
+  flex: 1 1 0px;
+
+  text-align: right;
+  padding: 1px 10px;
+  color: #eee;
 }
 .ideditor[dir='rtl'] .api-status {
-    text-align: left;
+  text-align: left;
 }
 .api-status:empty {
-    display: none;
+  display: none;
 }
 
 .api-status.offline,
 .api-status.readonly,
 .api-status.error {
-    background: #a22;
+  background: #a22;
 }
 
 .api-status a {
-    text-decoration: underline;
-    color: #ccc;
-    pointer-events: all;
+  text-decoration: underline;
+  color: #ccc;
+  pointer-events: all;
 }
 .api-status a:focus,
 .api-status a:active {
-    color: inherit;
+  color: inherit;
 }
 @media (hover: hover) {
     .api-status a:hover {

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';
@@ -28,8 +28,8 @@ export class Context extends EventEmitter {
   constructor() {
     super();
 
-    this.version = '2.4.2';     // see https://semver.org/ for examples
-    // this.version = '2.4.0-pre.0';     // see https://semver.org/ for examples
+    // this.version = '2.4.2';     // see https://semver.org/ for examples
+    this.version = '2.5.0-pre.0';     // see https://semver.org/ for examples
 
     // If user has not seen this version of our software, we will show them a modal at startup.
     // Just bump these dates to a higher number to get the screen to come back.
@@ -144,13 +144,14 @@ export class Context extends EventEmitter {
       return filters.hasHiddenConnections(entity, graph);
     };
 
+    // GraphicsSystem
+    const gfx = this.systems.gfx;
+    this.deferredRedraw = gfx.deferredRedraw;
+    this.immediateRedraw = gfx.immediateRedraw;
+    this.scene = () => gfx.scene;
+
     // MapSystem
-    const map = this.systems.map;
-    this.deferredRedraw = map.deferredRedraw;
-    this.immediateRedraw = map.immediateRedraw;
-    this.scene = () => map.scene;
-    this.surface = () => map.surface;
-    this.surfaceRect = () => map.surface.node().getBoundingClientRect();
+    //const map = this.systems.map;
     this.editable = () => {
       const mode = this._currMode;
       if (!mode || mode.id === 'save') return false;      // don't allow editing during save
@@ -455,7 +456,7 @@ export class Context extends EventEmitter {
   }
   setDebug(flag, val = true) {
     this._debugFlags[flag] = val;
-    this.systems.map?.immediateRedraw();
+    this.systems.gfx?.immediateRedraw();
   }
 
 

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/behaviors/DragBehavior.js

@@ -1,3 +1,4 @@
+import { select as d3_select } from 'd3-selection';
 import { vecLength } from '@rapid-sdk/math';
 
 import { AbstractBehavior } from './AbstractBehavior.js';
@@ -57,7 +58,7 @@ export class DragBehavior extends AbstractBehavior {
     this.lastMove = null;
     this.dragTarget = null;
 
-    const eventManager = this.context.systems.map.renderer.events;
+    const eventManager = this.context.systems.gfx.events;
     eventManager.on('modifierchange', this._doMove);
     eventManager.on('pointerover', this._doMove);
     eventManager.on('pointerout', this._doMove);
@@ -90,7 +91,7 @@ export class DragBehavior extends AbstractBehavior {
     this.lastMove = null;
     this.dragTarget = null;
 
-    const eventManager = this.context.systems.map.renderer.events;
+    const eventManager = this.context.systems.gfx.events;
     eventManager.off('modifierchange', this._doMove);
     eventManager.off('pointerover', this._doMove);
     eventManager.off('pointerout', this._doMove);
@@ -137,19 +138,19 @@ export class DragBehavior extends AbstractBehavior {
   _pointermove(e) {
     const context = this.context;
     const editor = context.systems.editor;
+    const gfx = context.systems.gfx;
     const graph = editor.staging.graph;
-    const map = context.systems.map;
 
     // If we detect the edit (right-click) menu, we should cease any dragging behavior.
-    const hasEditmenu = map.supersurface.select('.edit-menu').size();
-    if (hasEditmenu) {
+    const hasEditMenu = d3_select(gfx.overlay).select('.edit-menu').size();
+    if (hasEditMenu) {
       this._pointercancel(e);
       return;
     }
 
     // Ignore it if we are not over the canvas
     // (e.g. sidebar, out of browser window, over a button, toolbar, modal)
-    const eventManager = map.renderer.events;
+    const eventManager = gfx.events;
     if (!eventManager.pointerOverRenderer) return;
 
     const down = this.lastDown;
@@ -282,7 +283,7 @@ export class DragBehavior extends AbstractBehavior {
   _snappingDisabled() {
     // Ignore it if we are not over the canvas
     // (e.g. sidebar, out of browser window, over a button, toolbar, modal)
-    const eventManager = this.context.systems.map.renderer.events;
+    const eventManager = this.context.systems.gfx.events;
     if (!eventManager.pointerOverRenderer) return false;
 
     const modifiers = eventManager.modifierKeys;