Improve map editor workflow controls

tools/map_editor/README.md

@@ -30,7 +30,16 @@ http://127.0.0.1:8787/tools/map_editor/
 - 导入的图形会在浏览器内临时预览，拖动或缩放图形时，同步移动或缩放绑定的碰撞块。
 - 编辑选中对象的数值和文本属性。
 - 新增/删除图块集、图层、碰撞块、铺砖区、战斗区和出生点。
-- 下载兼容 `StageMapLoader` 的 `.map` 文本。
+- 支持撤回最近编辑操作，也可以使用 `Ctrl+Z`。
+- 选中图层或图层内对象后，可以把对应图层上移或下移。
+- 保存并下载兼容 `StageMapLoader` 的 `.map` 文本。
+
+## 保存和撤回
+
+- “保存并下载”会把右侧导出文本下载成 `<地图ID>.map`。
+- 浏览器安全限制下，静态网页不能直接覆盖本地项目文件；下载后仍需要替换项目里的地图文件。
+- “撤回”会恢复最近一次地图编辑操作，包括新增、删除、拖动、缩放、属性修改、导入图形和图层移动。
+- 打开或重新加载 `.map` 会清空撤回历史。
 
 ## 调整碰撞块
 
@@ -65,9 +74,15 @@ assets/stage/stage_01/props/<图片文件名>
 
 实际运行游戏前，需要把图片素材放到这个路径下。
 
+## 调整图层顺序
+
+1. 在对象列表中选择一个图层，或选择该图层下的图形/铺砖区。
+2. 点击右侧“图层上移”或“图层下移”。
+3. 编辑器会按当前图层顺序预览和导出 `.map`。
+
 ## 当前限制
 
 - 浏览器安全限制不允许静态网页直接覆盖本地源文件。当前需要先下载 `.map`，再手动替换项目里的地图文件；部署到服务器后可以增加服务端保存接口。
 - 已导入图形的预览只在当前浏览器会话内有效；重新打开 `.map` 后，如果浏览器没有重新选择图片，图形会用颜色块显示。
 - 暂未实现图块集图片预览，铺砖区当前使用 fallback 颜色显示。
-- 暂未实现撤销/重做和多选。
+- 暂未实现重做和多选。

tools/map_editor/app.js

@@ -7,6 +7,7 @@ const state = {
   gridSize: 10,
   hitFilter: "all",
   imagePreviews: new Map(),
+  history: [],
   dragging: null,
 };
 
@@ -21,7 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 function bindElements() {
   for (const id of [
-    "mapCanvas", "fileInput", "loadSampleButton", "downloadButton",
+    "mapCanvas", "fileInput", "loadSampleButton", "downloadButton", "undoButton",
     "graphicFileInput",
     "mapIdInput", "worldWidthInput", "worldHeightInput", "gridSizeInput",
     "hitFilterInput",
@@ -29,6 +30,7 @@ function bindElements() {
     "tilesetList", "outputText", "statusText", "viewText",
     "addTilesetButton", "addLayerButton", "addCollisionButton",
     "addTileRectButton", "addBattleZoneButton", "addSpawnButton",
+    "moveLayerUpButton", "moveLayerDownButton",
   ]) {
     elements[id] = document.getElementById(id);
   }
@@ -39,18 +41,30 @@ function bindEvents() {
   elements.loadSampleButton.addEventListener("click", loadSampleMap);
   elements.fileInput.addEventListener("change", openFile);
   elements.graphicFileInput.addEventListener("change", importGraphicAsset);
-  elements.downloadButton.addEventListener("click", downloadMap);
+  elements.downloadButton.addEventListener("click", saveAndDownloadMap);
+  elements.undoButton.addEventListener("click", undoLast);
   elements.deleteButton.addEventListener("click", deleteSelected);
+  elements.moveLayerUpButton.addEventListener("click", () => moveSelectedLayer(-1));
+  elements.moveLayerDownButton.addEventListener("click", () => moveSelectedLayer(1));
+  window.addEventListener("keydown", (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      undoLast();
+    }
+  });
 
   elements.mapIdInput.addEventListener("change", () => {
+    pushUndo("修改地图 ID");
     state.map.id = elements.mapIdInput.value.trim() || "stage";
     refresh();
   });
   elements.worldWidthInput.addEventListener("change", () => {
+    pushUndo("修改世界宽度");
     state.map.world.width = numberValue(elements.worldWidthInput, state.map.world.width);
     refresh();
   });
   elements.worldHeightInput.addEventListener("change", () => {
+    pushUndo("修改世界高度");
     state.map.world.height = numberValue(elements.worldHeightInput, state.map.world.height);
     refresh();
   });
@@ -107,6 +121,7 @@ async function importGraphicAsset(event) {
     const image = await loadImage(previewUrl);
     const texturePath = defaultGraphicTexturePath(file.name);
     state.imagePreviews.set(texturePath, image);
+    pushUndo("导入图形");
     addGraphicSprite(texturePath, image.naturalWidth || image.width || 64, image.naturalHeight || image.height || 64);
     setStatus(`已导入图形 ${file.name}，并自动创建同尺寸碰撞块。请把素材放到 ${texturePath}`);
   } catch (error) {
@@ -129,6 +144,7 @@ function loadMapText(text, status) {
   try {
     state.map = parseMap(text);
     state.selected = null;
+    state.history = [];
     fitWorldToCanvas();
     setStatus(status);
     refresh();
@@ -263,7 +279,7 @@ function serializeMap(map) {
   }
   lines.push("");
 
-  for (const layer of sortLayers(map.layers)) {
+  for (const layer of map.layers) {
     lines.push(`layer ${layer.id} ${layer.role} ${fmt(layer.parallax)}`);
     for (const rect of layer.rects) {
       if (rect.texture && rect.source) {
@@ -298,6 +314,8 @@ function refresh() {
   elements.gridSizeInput.value = state.gridSize;
   elements.hitFilterInput.value = state.hitFilter;
   elements.outputText.value = serializeMap(state.map);
+  elements.undoButton.disabled = state.history.length === 0;
+  elements.undoButton.textContent = state.history.length ? `撤回 ${state.history.length}` : "撤回";
   renderTilesets();
   renderObjectList();
   renderPropertyPanel();
@@ -342,11 +360,14 @@ function renderPropertyPanel() {
   if (!object) {
     elements.selectionSummary.textContent = "未选择对象。";
     elements.deleteButton.disabled = true;
+    elements.moveLayerUpButton.disabled = true;
+    elements.moveLayerDownButton.disabled = true;
     return;
   }
 
   elements.selectionSummary.textContent = `${object.title} | ${object.meta}`;
   elements.deleteButton.disabled = !object.deletable;
+  updateLayerMoveButtons();
   const fields = object.fields();
   for (const field of fields) {
     const label = document.createElement("label");
@@ -367,7 +388,10 @@ function renderPropertyPanel() {
     }
     input.value = field.get();
     input.addEventListener("change", () => {
-      field.set(input.type === "number" ? Number(input.value) : input.value);
+      const nextValue = input.type === "number" ? Number(input.value) : input.value;
+      if (String(field.get()) === String(nextValue)) return;
+      pushUndo(`修改${field.label}`);
+      field.set(nextValue);
       refresh();
     });
     label.appendChild(input);
@@ -375,6 +399,12 @@ function renderPropertyPanel() {
   }
 }
 
+function updateLayerMoveButtons() {
+  const layerIndex = selectedLayerIndex();
+  elements.moveLayerUpButton.disabled = layerIndex <= 0;
+  elements.moveLayerDownButton.disabled = layerIndex < 0 || layerIndex >= state.map.layers.length - 1;
+}
+
 function drawCanvas() {
   const canvas = elements.mapCanvas;
   const ctx = canvas.getContext("2d");
@@ -427,7 +457,7 @@ function drawGrid(ctx) {
 }
 
 function drawLayers(ctx) {
-  for (const layer of sortLayers(state.map.layers)) {
+  for (const layer of state.map.layers) {
     for (const rect of layer.rects) drawLayerRect(ctx, rect);
     for (const tileRect of layer.tileRects) drawTileRect(ctx, tileRect);
   }
@@ -741,6 +771,10 @@ function onCanvasMouseMove(event) {
   const dx = current.x - state.dragging.last.x;
   const dy = current.y - state.dragging.last.y;
   if (dx || dy) {
+    if (!state.dragging.undoPushed) {
+      pushUndo(state.dragging.resize ? "调整对象尺寸" : "移动对象");
+      state.dragging.undoPushed = true;
+    }
     if (state.dragging.resize && object.resize) {
       object.resize(dx, dy);
     } else if (object.move) {
@@ -833,6 +867,7 @@ function setCanvasCursor(cursor) {
 }
 
 function addCollision() {
+  pushUndo("新增碰撞块");
   const point = snapPoint(viewCenter());
   state.map.collisions.push({ x: point.x, y: point.y, width: 160, height: 40 });
   state.selected = `collision:${state.map.collisions.length - 1}`;
@@ -865,6 +900,7 @@ function addGraphicSprite(texturePath, width, height) {
 }
 
 function addTileset() {
+  pushUndo("新增图块集");
   const index = state.map.tilesets.length + 1;
   state.map.tilesets.push({
     id: `tileset_${index}`,
@@ -878,6 +914,7 @@ function addTileset() {
 }
 
 function addLayer() {
+  pushUndo("新增图层");
   const index = state.map.layers.length + 1;
   state.map.layers.push({
     id: `layer_${index}`,
@@ -891,6 +928,7 @@ function addLayer() {
 }
 
 function addTileRect() {
+  pushUndo("新增铺砖区");
   ensureLevelVisualLayer();
   if (!state.map.tilesets.length) {
     state.map.tilesets.push({ id: "graybox_tile", texture: "assets/stage/stage_01/tiles/graybox_tile.png", tileWidth: 10, tileHeight: 10, color: { r: 0.62, g: 0.68, b: 0.73, a: 1 } });
@@ -904,7 +942,8 @@ function addTileRect() {
   refresh();
 }
 
-function addBattleZone() {
+function addBattleZone(recordHistory = true) {
+  if (recordHistory) pushUndo("新增战斗区");
   const point = snapPoint(viewCenter());
   state.map.battleZones.push({
     id: `zone_${String(state.map.battleZones.length + 1).padStart(2, "0")}`,
@@ -917,7 +956,8 @@ function addBattleZone() {
 }
 
 function addSpawn() {
-  if (!state.map.battleZones.length) addBattleZone();
+  pushUndo("新增出生点");
+  if (!state.map.battleZones.length) addBattleZone(false);
   const zoneIndex = Math.max(0, state.map.battleZones.length - 1);
   const zone = state.map.battleZones[zoneIndex];
   const point = snapPoint(viewCenter());
@@ -929,15 +969,16 @@ function addSpawn() {
 function deleteSelected() {
   if (!state.selected) return;
   const parts = state.selected.split(":");
-  if (parts[0] === "collision") deleteCollision(Number(parts[1]));
   if (parts[0] === "tileset") {
     const tileset = state.map.tilesets[Number(parts[1])];
     if (tileset && isTilesetUsed(tileset.id)) {
       setStatus(`不能删除图块集 ${tileset.id}：它仍被 tile_rect 使用。`);
       return;
     }
-    state.map.tilesets.splice(Number(parts[1]), 1);
   }
+  pushUndo("删除对象");
+  if (parts[0] === "collision") deleteCollision(Number(parts[1]));
+  if (parts[0] === "tileset") state.map.tilesets.splice(Number(parts[1]), 1);
   if (parts[0] === "layer") deleteLayer(Number(parts[1]));
   if (parts[0] === "rect") deleteLayerRect(Number(parts[1]), Number(parts[2]));
   if (parts[0] === "tile") state.map.layers[Number(parts[1])].tileRects.splice(Number(parts[2]), 1);
@@ -947,6 +988,54 @@ function deleteSelected() {
   refresh();
 }
 
+function saveAndDownloadMap() {
+  downloadMap();
+  setStatus(`已保存导出文本并下载 ${state.map.id || "stage"}.map`);
+}
+
+function undoLast() {
+  const entry = state.history.pop();
+  if (!entry) return;
+  restoreSnapshot(entry);
+  setStatus(`已撤回：${entry.label}`);
+  refresh();
+}
+
+function pushUndo(label) {
+  state.history.push({
+    label,
+    mapText: serializeMap(state.map),
+    selected: state.selected,
+    hitFilter: state.hitFilter,
+  });
+  if (state.history.length > 80) state.history.shift();
+}
+
+function restoreSnapshot(entry) {
+  state.map = parseMap(entry.mapText);
+  state.selected = entry.selected;
+  state.hitFilter = entry.hitFilter || "all";
+  if (state.selected && !getSelectedObject()) state.selected = null;
+}
+
+function moveSelectedLayer(direction) {
+  const index = selectedLayerIndex();
+  const nextIndex = index + direction;
+  if (index < 0 || nextIndex < 0 || nextIndex >= state.map.layers.length) return;
+  pushUndo(direction < 0 ? "图层上移" : "图层下移");
+  const [layer] = state.map.layers.splice(index, 1);
+  state.map.layers.splice(nextIndex, 0, layer);
+  state.selected = `layer:${nextIndex}`;
+  refresh();
+}
+
+function selectedLayerIndex() {
+  if (!state.selected) return -1;
+  const parts = state.selected.split(":");
+  if (parts[0] === "layer" || parts[0] === "rect" || parts[0] === "tile") return Number(parts[1]);
+  return -1;
+}
+
 function downloadMap() {
   const blob = new Blob([serializeMap(state.map)], { type: "text/plain" });
   const url = URL.createObjectURL(blob);

tools/map_editor/index.html

@@ -13,19 +13,23 @@
       <p>编辑游戏运行时使用的 Frostbite2D .map 文本地图。</p>
     </div>
     <div class="header-actions">
+      <button id="undoButton" type="button" disabled>撤回</button>
       <button id="loadSampleButton" type="button">加载 stage_01.map</button>
       <label class="file-button">
         打开 .map
         <input id="fileInput" type="file" accept=".map,text/plain">
       </label>
-      <button id="downloadButton" type="button">下载 .map</button>
+      <button id="downloadButton" type="button" class="primary-button">保存并下载</button>
     </div>
   </header>
 
   <main class="editor-shell">
     <aside class="panel left-panel">
-      <section>
-        <h2>地图</h2>
+      <section class="tool-card">
+        <div class="section-title">
+          <h2>地图设置</h2>
+          <span>基础参数</span>
+        </div>
         <div class="field-grid">
           <label>
             地图 ID
@@ -57,8 +61,11 @@
         </div>
       </section>
 
-      <section>
-        <h2>新增</h2>
+      <section class="tool-card">
+        <div class="section-title">
+          <h2>新增对象</h2>
+          <span>放到当前视图中心</span>
+        </div>
         <div class="button-grid">
           <button id="addTilesetButton" type="button">图块集</button>
           <button id="addLayerButton" type="button">图层</button>
@@ -73,8 +80,11 @@
         </div>
       </section>
 
-      <section class="object-section">
-        <h2>对象</h2>
+      <section class="tool-card object-section">
+        <div class="section-title">
+          <h2>对象列表</h2>
+          <span>点击选择后可拖动</span>
+        </div>
         <div id="objectList" class="object-list"></div>
       </section>
     </aside>
@@ -92,6 +102,10 @@
         <h2>选中对象</h2>
         <div id="selectionSummary" class="selection-summary">未选择对象。</div>
         <div id="propertyPanel" class="property-panel"></div>
+        <div class="layer-actions">
+          <button id="moveLayerUpButton" type="button">图层上移</button>
+          <button id="moveLayerDownButton" type="button">图层下移</button>
+        </div>
         <button id="deleteButton" type="button" class="danger-button">删除选中对象</button>
       </section>
 

tools/map_editor/styles.css

@@ -3,6 +3,7 @@
   --bg: #101214;
   --panel: #181b1f;
   --panel-2: #20242a;
+  --panel-3: #14171b;
   --line: #343a42;
   --text: #e8edf2;
   --muted: #9aa4af;
@@ -40,11 +41,27 @@ button,
   cursor: pointer;
 }
 
+button:disabled {
+  color: #68727d;
+  border-color: #272c33;
+  background: #15181d;
+  cursor: not-allowed;
+}
+
 button:hover,
 .file-button:hover {
   border-color: var(--accent);
 }
 
+button:disabled:hover {
+  border-color: #272c33;
+}
+
+.primary-button {
+  border-color: #3977c9;
+  background: #17365f;
+}
+
 .app-header {
   height: 72px;
   display: flex;
@@ -88,7 +105,7 @@ button:hover,
   background: var(--panel);
   border-right: 1px solid var(--line);
   overflow: auto;
-  padding: 14px;
+  padding: 12px;
 }
 
 .right-panel {
@@ -97,17 +114,37 @@ button:hover,
 }
 
 section + section {
-  margin-top: 18px;
+  margin-top: 12px;
 }
 
 h2 {
-  margin: 0 0 10px;
+  margin: 0;
   font-size: 13px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
 
+.tool-card {
+  border: 1px solid var(--line);
+  background: var(--panel-3);
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.section-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.section-title span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
 .field-grid,
 .property-panel {
   display: grid;
@@ -140,6 +177,11 @@ textarea {
   gap: 8px;
 }
 
+.button-grid button,
+.button-grid .file-button {
+  text-align: center;
+}
+
 .object-section {
   min-height: 0;
 }
@@ -157,6 +199,7 @@ textarea {
   border-radius: 6px;
   padding: 8px;
   cursor: pointer;
+  text-align: left;
 }
 
 .object-item:hover {
@@ -222,6 +265,13 @@ textarea {
   border-color: var(--danger);
 }
 
+.layer-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 10px;
+}
+
 #outputText {
   height: 220px;
   resize: vertical;