Kain344/History-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replay in route /

Browse Source
This commit is contained in:
taDuc
2026-05-28 11:32:31 +07:00
parent b3d2f56797
commit 0dbe26fd4e
15 changed files with 1929 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uhm/components/editor/ModeHint.tsx
+35 -5
View File
@@ -4,35 +4,65 @@ export function ModeHint({ mode }: { mode: EditorMode }) {
if (mode === "add-line" || mode === "add-path") {
return (
<div style={{ marginTop: 6, fontSize: 12, color: "#93c5fd" }}>
Click để thêm điểm, Enter để hoàn tất, Esc để hủy.
<div style={{ marginBottom: 4 }}>Click trên bản đồ để thêm đỉnh.</div>
<ul style={{ paddingLeft: 16, margin: 0, opacity: 0.85 }}>
<li><b>Enter</b>: Hoàn tất & Chốt hình</li>
<li><b>Esc</b>: Hủy bỏ thao tác vẽ</li>
<li><b>Backspace</b>: Xóa đỉnh vừa vẽ cuối cùng</li>
<li><b>Giữ Shift / Alt</b>: Bắt dính (Snap) vào hình khác</li>
</ul>
</div>
);
}
if (mode === "add-circle") {
return (
<div style={{ marginTop: 6, fontSize: 12, color: "#93c5fd" }}>
Giữ chuột trái kéo để mở bán kính, thả chuột để hoàn tất.
<div style={{ marginBottom: 4 }}>Kéo chuột để vẽ hình tròn.</div>
<ul style={{ paddingLeft: 16, margin: 0, opacity: 0.85 }}>
<li><b>Nhấn giữ chuột trái</b>: Chọn tâm & kéo để tạo bán kính</li>
<li><b>Nhả chuột trái</b>: Hoàn tất chốt hình</li>
<li><b>Esc</b>: Hủy bỏ thao tác đang kéo vẽ dở</li>
</ul>
</div>
);
}
if (mode === "add-point") {
return (
<div style={{ marginTop: 6, fontSize: 12, color: "#93c5fd" }}>
Chọn 1 điểm trên bản đồ để đặt địa điểm.
<div style={{ marginBottom: 4 }}>Click trên bản đồ để tạo một Điểm.</div>
<ul style={{ paddingLeft: 16, margin: 0, opacity: 0.85 }}>
<li><b>Giữ Shift / Alt</b>: Bắt dính (Snap) chính xác vào hình khác</li>
</ul>
</div>
)
}
if (mode === "select") {
return (
<div style={{ marginTop: 6, fontSize: 12, color: "#93c5fd" }}>
Chọn 1 hình, đường, điểm trên bản đồ để xem chi tiết.
<div style={{ marginBottom: 4 }}>Click vào hình trên map để Chọn (Select).</div>
<ul style={{ paddingLeft: 16, margin: 0, opacity: 0.85 }}>
<li>(Khi đã chọn) Nhấp biểu tượng <b>Cây Bút</b> để sửa đỉnh.</li>
<li>Trong chế độ Sửa đỉnh:
<ul style={{ paddingLeft: 16, margin: "2px 0 0 0" }}>
<li><b>Enter</b>: Lưu hình đã sửa</li>
<li><b>Delete</b>: Bật/Tắt chế độ Xóa đỉnh (click để xóa)</li>
<li><b>Giữ Shift</b>: Bắt dính (Snap) điểm đang kéo</li>
</ul>
</li>
</ul>
</div>
)
}
if (mode === "draw") {
return (
<div style={{ marginTop: 6, fontSize: 12, color: "#93c5fd" }}>
Chọn các điểm trên bản đồ để vẽ hình, ENTER để kết thúc, ESC để hủy.
<div style={{ marginBottom: 4 }}>Click trên bản đồ để vẽ Đa giác (Polygon).</div>
<ul style={{ paddingLeft: 16, margin: 0, opacity: 0.85 }}>
<li><b>Enter</b>: Hoàn tất & Chốt hình</li>
<li><b>Esc</b>: Hủy bỏ thao tác vẽ</li>
<li><b>Backspace</b>: Xóa đỉnh vừa vẽ cuối cùng</li>
<li><b>Giữ Shift / Alt</b>: Bắt dính (Snap) vào hình khác</li>
</ul>
</div>
)
}