Merge pull request #397 from isaisstillalive/renameMarker

Changed "Delete marker" to "Show rename (or delete) marker dialog"

src/css/ingame_hud/waypoints.scss

@@ -52,11 +52,11 @@
             opacity: 1;
         }
 
-        .deleteButton {
+        .editButton {
             @include S(width, 10px);
             @include S(height, 10px);
             @include S(margin-left, 4px);
-            background: uiResource("icons/close.png") center center / 60% no-repeat;
+            background: uiResource("icons/edit_key.png") center center / 60% no-repeat;
             pointer-events: all;
             cursor: pointer;
 

src/js/core/modal_dialog_elements.js

@@ -365,10 +365,12 @@ export class DialogWithForm extends Dialog {
      * @param {Application} param0.app
      * @param {string} param0.title
      * @param {string} param0.desc
-     * @param {string=} param0.confirmButton
+     * @param {array=} param0.buttons
+     * @param {string=} param0.confirmButtonId
+     * @param {string=} param0.extraButton
      * @param {Array<FormElement>} param0.formElements
      */
-    constructor({ app, title, desc, formElements, confirmButton = "ok:good" }) {
+    constructor({ app, title, desc, formElements, buttons = ["cancel", "ok:good"], confirmButtonId = "ok" }) {
         let html = "";
         html += desc + "<br>";
         for (let i = 0; i < formElements.length; ++i) {
@@ -379,14 +381,14 @@ export class DialogWithForm extends Dialog {
             app,
             title: title,
             contentHTML: html,
-            buttons: ["cancel:bad", confirmButton],
+            buttons: buttons,
             type: "info",
             closeButton: true,
         });
-        this.confirmButtonId = confirmButton.split(":")[0];
+        this.confirmButtonId = confirmButtonId;
         this.formElements = formElements;
 
-        this.enterHandler = "ok";
+        this.enterHandler = confirmButtonId;
     }
 
     internalButtonHandler(id, ...payload) {

src/js/game/hud/parts/waypoints.js

@@ -109,9 +109,7 @@ export class HUDWaypoints extends BaseHUDPart {
 
         // Catch mouse and key events
         this.root.camera.downPreHandler.add(this.onMouseDown, this);
-        this.root.keyMapper
+        this.root.keyMapper.getBinding(KEYMAPPINGS.navigation.createMarker).add(this.requestSaveMarker, this);
-            .getBinding(KEYMAPPINGS.navigation.createMarker)
-            .add(this.requestCreateMarker, this);
 
         /**
          * Stores at how much opacity the markers should be rendered on the map.
@@ -168,8 +166,8 @@ export class HUDWaypoints extends BaseHUDPart {
             }
 
             if (this.isWaypointDeletable(waypoint)) {
-                const deleteButton = makeDiv(element, null, ["deleteButton"]);
+                const editButton = makeDiv(element, null, ["editButton"]);
-                this.trackClicks(deleteButton, () => this.deleteWaypoint(waypoint));
+                this.trackClicks(editButton, () => this.requestSaveMarker({ waypoint }));
             }
 
             if (!waypoint.label) {
@@ -220,42 +218,61 @@ export class HUDWaypoints extends BaseHUDPart {
     }
 
     /**
-     * Requests to create a marker at the current camera position. If worldPos is set,
+     * Requests to save a marker at the current camera position. If worldPos is set,
      * uses that position instead.
-     * @param {Vector=} worldPos Override the world pos, otherwise it is the camera position
+     * @param {object} param0
+     * @param {Vector=} param0.worldPos Override the world pos, otherwise it is the camera position
+     * @param {Waypoint=} param0.waypoint Waypoint to be edited. If omitted, create new
      */
-    requestCreateMarker(worldPos = null) {
+    requestSaveMarker({ worldPos = null, waypoint = null }) {
         // Construct dialog with input field
         const markerNameInput = new FormElementInput({
             id: "markerName",
             label: null,
             placeholder: "",
+            defaultValue: waypoint ? waypoint.label : "",
             validator: val =>
                 val.length > 0 && (val.length < MAX_LABEL_LENGTH || ShapeDefinition.isValidShortKey(val)),
         });
         const dialog = new DialogWithForm({
             app: this.root.app,
-            title: T.dialogs.createMarker.title,
+            title: waypoint ? T.dialogs.createMarker.titleEdit : T.dialogs.createMarker.title,
             desc: T.dialogs.createMarker.desc,
             formElements: [markerNameInput],
+            buttons: waypoint ? ["delete:bad", "cancel", "ok:good"] : ["cancel", "ok:good"],
         });
         this.root.hud.parts.dialogs.internalShowDialog(dialog);
 
-        // Compute where to create the marker
+        // Edit marker
-        const center = worldPos || this.root.camera.center;
+        if (waypoint) {
+            dialog.buttonSignals.ok.add(() => {
+                // Actually rename the waypoint
+                this.renameWaypoint(waypoint, markerNameInput.getValue());
+            });
+            dialog.buttonSignals.delete.add(() => {
+                // Actually delete the waypoint
+                this.deleteWaypoint(waypoint);
+            });
+        } else {
+            // Compute where to create the marker
+            const center = worldPos || this.root.camera.center;
 
-        dialog.buttonSignals.ok.add(() => {
+            dialog.buttonSignals.ok.add(() => {
-            // Show info that you can have only N markers in the demo,
+                // Show info that you can have only N markers in the demo,
-            // actually show this *after* entering the name so you want the
+                // actually show this *after* entering the name so you want the
-            // standalone even more (I'm evil :P)
+                // standalone even more (I'm evil :P)
-            if (IS_DEMO && this.waypoints.length > 2) {
+                if (IS_DEMO && this.waypoints.length > 2) {
-                this.root.hud.parts.dialogs.showFeatureRestrictionInfo("", T.dialogs.markerDemoLimit.desc);
+                    this.root.hud.parts.dialogs.showFeatureRestrictionInfo(
-                return;
+                        "",
-            }
+                        T.dialogs.markerDemoLimit.desc
+                    );
+                    return;
+                }
 
-            // Actually create the waypoint
+                // Actually create the waypoint
-            this.addWaypoint(markerNameInput.getValue(), center);
+                this.addWaypoint(markerNameInput.getValue(), center);
-        });
+            });
+        }
     }
 
     /**
@@ -272,18 +289,7 @@ export class HUDWaypoints extends BaseHUDPart {
             zoomLevel: Math.max(this.root.camera.zoomLevel, globalConfig.mapChunkOverviewMinZoom + 0.05),
         });
 
-        // Sort waypoints by name
+        this.sortWaypoints();
-        this.waypoints.sort((a, b) => {
-            if (!a.label) {
-                return -1;
-            }
-            if (!b.label) {
-                return 1;
-            }
-            return this.getWaypointLabel(a)
-                .padEnd(MAX_LABEL_LENGTH, "0")
-                .localeCompare(this.getWaypointLabel(b).padEnd(MAX_LABEL_LENGTH, "0"));
-        });
 
         // Show notification about creation
         this.root.hud.signals.notification.dispatch(
@@ -295,6 +301,26 @@ export class HUDWaypoints extends BaseHUDPart {
         this.rerenderWaypointList();
     }
 
+    /**
+     * Renames a waypoint with the given label
+     * @param {Waypoint} waypoint
+     * @param {string} label
+     */
+    renameWaypoint(waypoint, label) {
+        waypoint.label = label;
+
+        this.sortWaypoints();
+
+        // Show notification about renamed
+        this.root.hud.signals.notification.dispatch(
+            T.ingame.waypoints.creationSuccessNotification,
+            enumNotificationType.success
+        );
+
+        // Re-render the list and thus add it
+        this.rerenderWaypointList();
+    }
+
     /**
      * Called every frame to update stuff
      */
@@ -304,6 +330,23 @@ export class HUDWaypoints extends BaseHUDPart {
         }
     }
 
+    /**
+     * Sort waypoints by name
+     */
+    sortWaypoints() {
+        this.waypoints.sort((a, b) => {
+            if (!a.label) {
+                return -1;
+            }
+            if (!b.label) {
+                return 1;
+            }
+            return this.getWaypointLabel(a)
+                .padEnd(MAX_LABEL_LENGTH, "0")
+                .localeCompare(this.getWaypointLabel(b).padEnd(MAX_LABEL_LENGTH, "0"));
+        });
+    }
+
     /**
      * Returns the label for a given waypoint
      * @param {Waypoint} waypoint
@@ -381,7 +424,7 @@ export class HUDWaypoints extends BaseHUDPart {
             } else if (button === enumMouseButton.right) {
                 if (this.isWaypointDeletable(waypoint)) {
                     this.root.soundProxy.playUiClick();
-                    this.deleteWaypoint(waypoint);
+                    this.requestSaveMarker({ waypoint });
                 } else {
                     this.root.soundProxy.playUiError();
                 }
@@ -393,7 +436,7 @@ export class HUDWaypoints extends BaseHUDPart {
             if (button === enumMouseButton.right) {
                 if (this.root.camera.getIsMapOverlayActive()) {
                     const worldPos = this.root.camera.screenToWorld(pos);
-                    this.requestCreateMarker(worldPos);
+                    this.requestSaveMarker({ worldPos });
                     return STOP_PROPAGATION;
                 }
             }

translations/base-en.yaml

@@ -282,6 +282,7 @@ dialogs:
 
     createMarker:
         title: New Marker
+        titleEdit: Edit Marker
         desc: Give it a meaningful name, you can also include a <strong>short key</strong> of a shape (Which you can generate <a href="https://viewer.shapez.io" target="_blank">here</a>)
 
     markerDemoLimit:

translations/base-ja.yaml

@@ -253,6 +253,7 @@ dialogs:
 
     createMarker:
         title: マーカーを設置
+        titleEdit: マーカーを編集
         desc: わかりやすい名前をつけてください。形を表す<strong>短いキー</strong>を含めることもできます。（<a href="https://viewer.shapez.io" target="_blank">ここ</a>から生成できます）
 
     markerDemoLimit: