Cleanup of UI component names

This commit moves a few UI components around:
- MapInMap is now named Minimap
- Info, Minimap, PhotoViewer, Specctor now live with the Overmap component
  (but can still be accessed through UiSystem)
- Switching to the new convention of referring to UiComponents with
  TitleCase (e.g. ui.sidebar -> ui.Sidebar) (to make it feel more like React)
- Continuing the push to make every Ui Component be a class component
  with a `render` function and be actually reentrant

modules/behaviors/KeyOperationBehavior.js

@@ -64,6 +64,7 @@ export class KeyOperationBehavior extends AbstractBehavior {
   _keydown(e) {
     const context = this.context;
     const operation = this._operation;
+    const ui = context.systems.ui;
 
     if (operation.availableForKeypress && !operation.availableForKeypress()) return;  // copy paste detail 😕
 
@@ -72,14 +73,14 @@ export class KeyOperationBehavior extends AbstractBehavior {
     const disabled = operation.disabled();
 
     if (disabled) {
-      context.systems.ui.flash
+      ui.Flash
         .duration(4000)
         .iconName(`#rapid-operation-${operation.id}`)
         .iconClass('operation disabled')
         .label(operation.tooltip)();
 
     } else {
-      context.systems.ui.flash
+      ui.Flash
         .duration(2000)
         .iconName(`#rapid-operation-${operation.id}`)
         .iconClass('operation')

modules/core/UiSystem.js

@@ -4,8 +4,8 @@ import { vecAdd } from '@rapid-sdk/math';
 import { AbstractSystem } from './AbstractSystem.js';
 
 import {
-  UiApiStatus, UiDefs, uiEditMenu, uiFlash, UiFullscreen, uiInfo, uiIntro,
-  uiLoading, UiMapInMap, UiMapFooter, UiMapToolbar, UiOvermap, UiPhotoViewer,
+  UiApiStatus, UiDefs, uiEditMenu, uiFlash, UiFullscreen, uiIntro,
+  uiLoading, UiMapFooter, UiMapToolbar, UiOvermap, UiPhotoViewer,
   uiSplash, uiRestore, UiShortcuts, UiSidebar, uiWhatsNew
 } from '../ui/index.js';
 
@@ -35,20 +35,24 @@ export class UiSystem extends AbstractSystem {
     this._resizeTimeout = null;
 
     // Child components, we will defer creating these until after some other things have initted.
-    this.apiStatus = null;
-    this.authModal = null;
-    this.defs = null;
-    this.editMenu = null;
-    this.flash = null;
-    this.fullscreen = null;
-    this.info = null;
-    this.mapFooter = null;
-    this.mapInMap = null;
-    this.mapToolbar = null;
-    this.overmap = null;
-    this.photoviewer = null;
-    this.shortcuts = null;
-    this.sidebar = null;
+    this.ApiStatus = null;
+    this.AuthModal = null;
+    this.Defs = null;
+    this.EditMenu = null;
+    this.Flash = null;
+    this.Fullscreen = null;
+    this.MapFooter = null;
+    this.MapToolbar = null;
+    this.Overmap = null;
+    this.Shortcuts = null;
+    this.Sidebar = null;
+
+    // These components live below in the tree, but we will hold a reference
+    // to them here in the UiSystem, so other code can find them easily.
+    this.Info = null;
+    this.Minimap = null;
+    this.PhotoViewer = null;
+    this.Spector = null;
 
     // Ensure methods used as callbacks always have `this` bound correctly.
     // (This is also necessary when using `d3-selection.call`)
@@ -85,26 +89,30 @@ export class UiSystem extends AbstractSystem {
       .then(() => {
         window.addEventListener('resize', this.resize);
 
-        this.apiStatus = new UiApiStatus(context);
-        this.authModal = uiLoading(context).blocking(true).message(l10n.t('loading_auth'));
-        this.defs = new UiDefs(context);
-        this.editMenu = uiEditMenu(context);
-        this.flash = uiFlash(context);
-        this.fullscreen = new UiFullscreen(context);
-        this.info = uiInfo(context);
-        this.mapFooter = new UiMapFooter(context);
-        this.mapInMap = new UiMapInMap(context);
-        this.mapToolbar = new UiMapToolbar(context);
-        this.overmap = new UiOvermap(context);
-        this.photoviewer = new UiPhotoViewer(context);
-        this.shortcuts = new UiShortcuts(context);
-        this.sidebar = new UiSidebar(context);
+        this.ApiStatus = new UiApiStatus(context);
+        this.AuthModal = uiLoading(context).blocking(true).message(l10n.t('loading_auth'));
+        this.Defs = new UiDefs(context);
+        this.EditMenu = uiEditMenu(context);
+        this.Flash = uiFlash(context);
+        this.Fullscreen = new UiFullscreen(context);
+        this.MapFooter = new UiMapFooter(context);
+        this.MapToolbar = new UiMapToolbar(context);
+        this.Overmap = new UiOvermap(context);
+        this.Shortcuts = new UiShortcuts(context);
+        this.Sidebar = new UiSidebar(context);
+
+        // These components live below in the tree, but we will hold a reference
+        // to them here in the UiSystem, so that other code can find them easily.
+        this.Info = this.Overmap.Info;
+        this.Minimap = this.Overmap.Minimap;
+        this.PhotoViewer = this.Overmap.PhotoViewer;
+        this.Spector = this.Overmap.Spector;
 
         const osm = context.services.osm;
         if (osm) {
           osm
-            .on('authLoading', () => context.container()?.call(this.authModal))
-            .on('authDone', () => this.authModal.close());
+            .on('authLoading', () => context.container()?.call(this.AuthModal))
+            .on('authDone', () => this.AuthModal.close());
         }
       });
 
@@ -193,10 +201,10 @@ export class UiSystem extends AbstractSystem {
     $container
       .attr('lang', l10n.localeCode())
       .attr('dir', l10n.textDirection())
-      .call(this.fullscreen.render)
-      .call(this.defs.render)
-      .call(this.sidebar.render)
-      .call(this.shortcuts.render);
+      .call(this.Fullscreen.render)
+      .call(this.Defs.render)
+      .call(this.Sidebar.render)
+      .call(this.Shortcuts.render);
 
     // .main-content
     // Contains the map and everything floating above it, such as toolbars, etc.
@@ -222,17 +230,15 @@ export class UiSystem extends AbstractSystem {
     $mainContent = $mainContent.merge($$mainContent);
 
     $mainContent
-      .call(this.mapToolbar.render)
-      .call(this.overmap.render)
-      .call(this.apiStatus.render)
-      .call(this.mapFooter.render);
-
+      .call(this.MapToolbar.render)
+      .call(this.Overmap.render)
+      .call(this.ApiStatus.render)
+      .call(this.MapFooter.render);
 
     // Setup map dimensions
     // This should happen after .main-content and toolbars exist.
     this.resize();
 
-
     // On first render only, enter browse mode and show a startup screen.
     if (this._firstRender) {
       context.enter('browse');
@@ -444,7 +450,7 @@ dims = vecAdd(dims, [overscan * 2, overscan * 2]);
    * @param  {string}  triggerType  - (not used?)  'touch', 'pen', or 'rightclick' that triggered the menu
    */
   showEditMenu(anchorPoint, triggerType) {
-    this.editMenu.close();   // remove any displayed menu
+    this.EditMenu.close();   // remove any displayed menu
 
     const context = this.context;
     const gfx = context.systems.gfx;
@@ -468,14 +474,14 @@ dims = vecAdd(dims, [overscan * 2, overscan * 2]);
       }
     }
 
-    this.editMenu
+    this.EditMenu
       .anchorLoc(viewport.unproject(anchorPoint))
       .triggerType(triggerType)
       .operations(operations);
 
     // render the menu
     const $overlay = select(gfx.overlay);
-    $overlay.call(this.editMenu);
+    $overlay.call(this.EditMenu);
   }
 
 
@@ -496,10 +502,10 @@ dims = vecAdd(dims, [overscan * 2, overscan * 2]);
     const operations = context.mode?.operations ?? [];
 
     if (operations.length && context.editable()) {
-      this.editMenu.operations(operations);
-      $overlay.call(this.editMenu);   // redraw it
+      this.EditMenu.operations(operations);
+      $overlay.call(this.EditMenu);   // redraw it
     } else {
-      this.editMenu.close();
+      this.EditMenu.close();
     }
   }
 
@@ -509,7 +515,7 @@ dims = vecAdd(dims, [overscan * 2, overscan * 2]);
    * Remove any existing menu
    */
   closeEditMenu() {
-    this.editMenu.close();
+    this.EditMenu.close();
   }
 
 
@@ -526,7 +532,9 @@ dims = vecAdd(dims, [overscan * 2, overscan * 2]);
       right: src.right,
       bottom: src.bottom,
       width: src.width,
-      height: src.height
+      height: src.height,
+      x: src.x,
+      y: src.y
     };
   }
 

modules/modes/BrowseMode.js

@@ -44,8 +44,8 @@ export class BrowseMode extends AbstractMode {
       .on('hoverchange', this._hover);
 
     // Reset sidebar to show "search features"
-    const sidebar = context.systems.ui.sidebar;
-    sidebar.hide();
+    const Sidebar = context.systems.ui.Sidebar;
+    Sidebar.hide();
 
     // Get focus on the body.
     // I think this was done to remove focus from whatever

modules/modes/DragNodeMode.js

@@ -88,7 +88,7 @@ export class DragNodeMode extends AbstractMode {
       // Bail out if the node is connected to something hidden.
       const hasHidden = filters.hasHiddenConnections(entity, graph);
       if (hasHidden) {
-        ui.flash
+        ui.Flash
           .duration(4000)
           .iconName('#rapid-icon-no')
           .label(l10n.t('modes.drag_node.connected_to_hidden'))();

modules/modes/SaveMode.js

@@ -57,8 +57,8 @@ export class SaveMode extends AbstractMode {
   enter() {
     const context = this.context;
     const osm = context.services.osm;
-    const sidebar = context.systems.ui.sidebar;
     const uploader = context.systems.uploader;
+    const Sidebar = context.systems.ui.Sidebar;
 
     if (!osm) return false;  // can't enter save mode
 
@@ -67,7 +67,7 @@ export class SaveMode extends AbstractMode {
     }
 
     // Show sidebar
-    sidebar.expand();
+    Sidebar.expand();
 
     this._active = true;
     this._wasSuccessfulSave = false;
@@ -76,13 +76,13 @@ export class SaveMode extends AbstractMode {
       .on('cancel', this._cancel);
 
     if (osm.authenticated()) {
-      sidebar.show(this._uiCommit);
+      Sidebar.show(this._uiCommit);
     } else {
       osm.authenticate(err => {
         if (err) {
           this._cancel();
         } else {
-          sidebar.show(this._uiCommit);
+          Sidebar.show(this._uiCommit);
         }
       });
     }
@@ -120,8 +120,8 @@ export class SaveMode extends AbstractMode {
     }
 
     const context = this.context;
-    const sidebar = context.systems.ui.sidebar;
     const uploader = context.systems.uploader;
+    const Sidebar = context.systems.ui.Sidebar;
 
     this._uiCommit.on('cancel', null);
     this._uiCommit = null;
@@ -145,7 +145,7 @@ export class SaveMode extends AbstractMode {
 
     // After a successful save, we want to leave the "thanks" content in the sidebar
     if (!this._wasSuccessfulSave) {
-      sidebar.hide();
+      Sidebar.hide();
     }
   }
 
@@ -308,15 +308,15 @@ export class SaveMode extends AbstractMode {
    */
   _resultSuccess(changeset) {
     const context = this.context;
-    const sidebar = context.systems.ui.sidebar;
+    const Sidebar = context.systems.ui.Sidebar;
 
     const successContent = this._uiSuccess
       .changeset(changeset)
       .location(this._location)
-      .on('cancel', () => sidebar.hide());
+      .on('cancel', () => Sidebar.hide());
 
     this._wasSuccessfulSave = true;
-    sidebar.show(successContent);
+    Sidebar.show(successContent);
 
     // Add delay before resetting to allow for postgres replication iD#1646 iD#2678
     window.setTimeout(() => {

modules/modes/SelectMode.js

@@ -61,7 +61,7 @@ export class SelectMode extends AbstractMode {
     const gfx = context.systems.gfx;
     const photos = context.systems.photos;
     const scene = gfx.scene;
-    const sidebar = context.systems.ui.sidebar;
+    const Sidebar = context.systems.ui.Sidebar;
 
     context.enableBehaviors(['hover', 'select', 'drag', 'mapInteraction', 'lasso', 'paste']);
 
@@ -130,7 +130,7 @@ export class SelectMode extends AbstractMode {
           const osm = context.services.osm;
           const note = osm?.getNote(datumID);
           if (!(note instanceof QAItem)) return;   // or - go to browse mode
-          sidebar.show(sidebarContent.note(note));
+          Sidebar.show(sidebarContent.note(note));
           this._selectedData.set(datumID, note);  // update selectedData after a change happens?
         });
 
@@ -142,7 +142,7 @@ export class SelectMode extends AbstractMode {
           const keepright = context.services.keepRight;
           const error = keepright?.getError(datumID);
           if (!(error instanceof QAItem)) return;  // or - go to browse mode?
-          sidebar.show(sidebarContent.error(error));
+          Sidebar.show(sidebarContent.error(error));
           this._selectedData.set(datumID, error);  // update selectedData after a change happens?
         });
 
@@ -154,7 +154,7 @@ export class SelectMode extends AbstractMode {
           const osmose = context.services.osmose;
           const error = osmose?.getError(datumID);
           if (!(error instanceof QAItem)) return;  // or - go to browse mode?
-          sidebar.show(sidebarContent.error(error));
+          Sidebar.show(sidebarContent.error(error));
           this._selectedData.set(datumID, error);  // update selectedData after a change happens?
         });
 
@@ -166,7 +166,7 @@ export class SelectMode extends AbstractMode {
           const maproulette = context.services.maproulette;
           const error = maproulette?.getError(datumID);
           if (!(error instanceof QAItem)) return;  // or - go to browse mode?
-          sidebar.show(sidebarContent.error(error));
+          Sidebar.show(sidebarContent.error(error));
           this._selectedData.set(datumID, error);  // update selectedData after a change happens?
         });
 
@@ -194,10 +194,10 @@ export class SelectMode extends AbstractMode {
 
     // setup the sidebar
     if (sidebarContent) {
-      sidebar.show(sidebarContent); //.newNote(_newFeature));
+      Sidebar.show(sidebarContent); //.newNote(_newFeature));
       // Attempt to expand the sidebar, avoid obscuring the selected thing if we can..
       // For this to work the datum must have an extent already
-      // sidebar.expand(sidebar.intersects(datum.extent()));
+      // Sidebar.expand(Sidebar.intersects(datum.extent()));
     }
 
     return true;
@@ -214,7 +214,7 @@ export class SelectMode extends AbstractMode {
     const context = this.context;
     const photos = context.systems.photos;
     const scene = context.systems.gfx.scene;
-    const sidebar = context.systems.ui.sidebar;
+    const Sidebar = context.systems.ui.Sidebar;
 
     this.extent = null;
 
@@ -230,7 +230,7 @@ export class SelectMode extends AbstractMode {
     this._selectedData.clear();
 
     scene.clearClass('select');
-    sidebar.hide();
+    Sidebar.hide();
     photos.selectDetection(null);
   }