Merge pull request #397 from isaisstillalive/renameMarker

Changed "Delete marker" to "Show rename (or delete) marker dialog"
4 years ago · 6f85d7c810
parent 0d0c9fda2c 2722366d68
commit 6f85d7c810
5 changed files with 91 additions and 44 deletions
--- a/src/css/ingame_hud/waypoints.scss
+++ b/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;

--- a/src/js/core/modal_dialog_elements.js
+++ b/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) {
--- a/src/js/game/hud/parts/waypoints.js
+++ b/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
-            .getBinding(KEYMAPPINGS.navigation.createMarker)
-            .add(this.requestCreateMarker, this);
+        this.root.keyMapper.getBinding(KEYMAPPINGS.navigation.createMarker).add(this.requestSaveMarker, 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"]);
-                this.trackClicks(deleteButton, () => this.deleteWaypoint(waypoint));
+                const editButton = makeDiv(element, null, ["editButton"]);
+                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
-        const center = worldPos || this.root.camera.center;
-
-        dialog.buttonSignals.ok.add(() => {
-            // Show info that you can have only N markers in the demo,
-            // actually show this *after* entering the name so you want the
-            // standalone even more (I'm evil :P)
-            if (IS_DEMO && this.waypoints.length > 2) {
-                this.root.hud.parts.dialogs.showFeatureRestrictionInfo("", T.dialogs.markerDemoLimit.desc);
-                return;
-            }
+        // Edit marker
+        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(() => {
+                // Show info that you can have only N markers in the demo,
+                // actually show this *after* entering the name so you want the
+                // standalone even more (I'm evil :P)
+                if (IS_DEMO && this.waypoints.length > 2) {
+                    this.root.hud.parts.dialogs.showFeatureRestrictionInfo(
+                        "",
+                        T.dialogs.markerDemoLimit.desc
+                    );
+                    return;
+                }

-            // Actually create the waypoint
-            this.addWaypoint(markerNameInput.getValue(), center);
-        });
+                // Actually create the waypoint
+                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.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"));
-        });
+        this.sortWaypoints();

        // 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;
                }
            }
--- a/translations/base-en.yaml
+++ b/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:
--- a/translations/base-ja.yaml
+++ b/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: