# 地图编辑器

这是一个静态网页地图编辑器，用来编辑游戏使用的 `.map` 文本文件。

## 本地运行

在仓库根目录执行：

```powershell
python -m http.server 8787
```

然后打开：

```text
http://127.0.0.1:8787/tools/map_editor/
```

从仓库根目录启动静态服务时，编辑器可以自动读取 `game/assets/map/stage_01.map`。也可以通过“打开 .map”选择任意 `.map` 文件。

## 当前能力

- 打开 `.map` 文本文件。
- 可视化世界范围、摄像机范围、玩家出生点、碰撞块、场景矩形、铺砖区、战斗区和敌人出生点。
- 从画布或对象列表选择对象。
- 在画布上拖动对象，支持网格吸附。
- 通过“编辑目标”过滤画布选择对象，默认“智能选择”会优先选中铺砖区和图形，避免被重叠碰撞块挡住。
- 选中矩形对象后，拖动右下角蓝色手柄可以调整宽高。
- 通过“导入图形”选择图片，自动生成一个 `rect_sprite` 图形对象和一个同尺寸 `collision`。
- 导入的图形会在浏览器内临时预览，拖动或缩放图形时，同步移动或缩放绑定的碰撞块。
- 编辑选中对象的数值和文本属性。
- 新增/删除图块集、图层、碰撞块、铺砖区、战斗区和出生点。
- 支持撤回最近编辑操作，也可以使用 `Ctrl+Z`。
- 选中图层或图层内对象后，可以把对应图层上移或下移。
- 保存并下载兼容 `StageMapLoader` 的 `.map` 文本。

## 保存和撤回

- “保存并下载”会把右侧导出文本下载成 `<地图ID>.map`。
- 浏览器安全限制下，静态网页不能直接覆盖本地项目文件；下载后仍需要替换项目里的地图文件。
- “撤回”会恢复最近一次地图编辑操作，包括新增、删除、拖动、缩放、属性修改、导入图形和图层移动。
- 打开或重新加载 `.map` 会清空撤回历史。

## 调整碰撞块

1. 在左侧“编辑目标”里选择“碰撞块”。
2. 在画布上点击红色碰撞框，或从对象列表选择对应碰撞块。
3. 拖动碰撞块本体可以移动位置。
4. 拖动右下角蓝色手柄可以调整宽高。
5. 也可以在右侧属性面板直接修改 `X`、`Y`、`W`、`H`。

## 调整铺砖区

1. 在左侧“编辑目标”里选择“智能选择”或“铺砖区”。
2. 在画布上点击铺砖区，或从对象列表选择对应铺砖区。
3. 拖动铺砖区本体可以移动位置。
4. 拖动右下角蓝色手柄可以调整列数和行数。
5. 如果要编辑同位置碰撞体，再把“编辑目标”切到“碰撞块”。

## 导入和调整图形

1. 点击左侧“导入图形”，选择一个图片素材。
2. 编辑器会把它添加到 `PropsBack` 图层，并在同一位置创建同尺寸碰撞块。
3. 新图形会自动选中，左侧“编辑目标”会切到“场景矩形”。
4. 拖动图形本体可以移动图形和绑定碰撞块。
5. 拖动右下角蓝色手柄可以调整图形和绑定碰撞块尺寸。
6. 也可以在右侧属性面板修改 `X`、`Y`、`W`、`H`、颜色和贴图路径。

静态网页不能自动把图片复制进项目目录。导入后 `.map` 默认写入：

```text
assets/stage/stage_01/props/<图片文件名>
```

实际运行游戏前，需要把图片素材放到这个路径下。

## 调整图层顺序

1. 在对象列表中选择一个图层，或选择该图层下的图形/铺砖区。
2. 点击右侧“图层上移”或“图层下移”。
3. 编辑器会按当前图层顺序预览和导出 `.map`。

## 当前限制

- 浏览器安全限制不允许静态网页直接覆盖本地源文件。当前需要先下载 `.map`，再手动替换项目里的地图文件；部署到服务器后可以增加服务端保存接口。
- 已导入图形的预览只在当前浏览器会话内有效；重新打开 `.map` 后，如果浏览器没有重新选择图片，图形会用颜色块显示。
- 暂未实现图块集图片预览，铺砖区当前使用 fallback 颜色显示。
- 暂未实现重做和多选。