# Hướng dẫn sử dụng KL_Design cho người mới
Tài liệu này dành cho người chưa từng dùng phần mềm thiết kế. Đọc theo thứ tự từ trên xuống.
---
## 1. Cài đặt & mở phần mềm
### Yêu cầu
- macOS hoặc Windows.
- Node.js 18+ (để chạy bản dev). Bản đóng gói sẵn không cần Node.
### Mở app (chế độ dev)
Mở Terminal, chạy:
```bash
cd ~/"Drive của tôi/App/App_Design/KL_Design"
npm install # chỉ chạy lần đầu
npm start
```
Cửa sổ KL_Design hiện ra cùng cửa sổ DevTools rời (để xem lỗi nếu có).
---
## 2. Làm quen giao diện
Cửa sổ chia làm 4 vùng chính:
```
┌─────────────────────────────────────────────────────────┐
│ ① Thanh menu (Tệp / Hiển thị / Đối tượng / Trợ giúp) │
├─────────────────────────────────────────────────────────┤
│ ② Tab (mỗi tab = 1 tài liệu) │
├─────┬─────────────────────────────────────────┬─────────┤
│ ③ │ │ ④ Dock │
│ Tool│ Vùng vẽ (canvas) │ phải │
│ bar │ │ │
│ │ │ │
├─────┴─────────────────────────────────────────┴─────────┤
│ Thanh trạng thái │
└─────────────────────────────────────────────────────────┘
```
- **① Menu trên cùng:** Tệp · Hiển thị · Đối tượng · Trợ giúp.
- **② Tab:** dấu `+` để tạo tab mới, dấu `×` để đóng.
- **③ Toolbar trái:** Chọn, Node, Line, Rect, Ellipse, Polygon, Text, Xóa, Mirror, Xoay, sắp xếp Z-order, Contour, Boolean, RDP.
- **④ Dock phải:** Thuộc tính · Lớp · Nhân bản & Giàn trang · Đối tượng · Plugin · Ước tính & Vật liệu. **Click tiêu đề (▾)** để thu/mở từng panel.
- **Vùng vẽ:** trang giấy mặc định 600×400 mm.
---
## 3. Tạo tài liệu mới
1. Menu **Tệp → Tài liệu mới…** (hoặc `Ctrl/Cmd+N`).
2. Chọn khổ giấy (A4, A3, Decal 600×400, 1200×600…) hoặc nhập kích thước tùy chỉnh.
3. Bấm **Tạo**.
> **Đơn vị toàn app là milimét (mm).**
---
## 4. Vẽ hình cơ bản
### Các công cụ
| Phím | Công cụ | Cách dùng |
|------|---------|-----------|
| `V` | Chọn | Click để chọn, kéo để di chuyển |
| `L` | Line | Click + giữ + kéo → thả |
| `R` | Rect | Click + giữ + kéo |
| `E` | Ellipse | Click + giữ + kéo |
| `P` | Polygon | Click từng điểm, **Enter** chốt, **Esc** hủy |
| `T` | Text | Click chỗ muốn đặt, gõ chữ |
| `F10` | Node | Sửa từng điểm của polygon/line |
Khi vẽ, giữ **Shift** để khóa tỉ lệ (hình vuông / tròn / 0°-45°-90°).
### Snap khi vẽ
Vào **Hiển thị → Snap nâng cao**, bật các loại snap: điểm đầu/cuối, điểm giữa, tâm, lưới. Khi con trỏ đến gần điểm hợp lệ sẽ có dấu chấm xanh + nhãn.
---
## 5. Chọn đối tượng (giống Illustrator)
| Thao tác | Kết quả |
|----------|---------|
| Click vào hình | Chọn 1 |
| Click nền + kéo | Khung **marquee**: thả ra chọn mọi hình nằm trọn trong khung |
| **Shift+click** vào hình | Thêm/bớt hình khỏi nhóm chọn |
| **Shift + kéo nền** | Marquee cộng dồn vào nhóm hiện tại |
| `Ctrl/Cmd+A` | Chọn tất cả (trừ layer khóa/ẩn) |
| `Ctrl/Cmd+Shift+A` | Bỏ chọn |
Khi chọn nhiều hình, **kéo bất kỳ hình nào trong nhóm** sẽ kéo cả nhóm cùng lúc. Khung viền:
- **Xanh dashed** = hình chính.
- **Cam dashed** = các hình còn lại trong nhóm.
---
## 6. Di chuyển, xoay, scale
### Di chuyển
- Tool **Chọn** → kéo. Giữ **Shift** khi kéo để khóa trục ngang/dọc.
- Hoặc nhập trực tiếp **X, Y** trong dock **Thuộc tính**.
### Xoay / Scale
- Toolbar: nút `↻ 90°`, `↺ -90°`, `⇆ Mirror H`, `⇅ Mirror V`.
- Phím tắt: `Ctrl+K` xoay 90°, `Ctrl+L` xoay -90°, `Ctrl+H` mirror ngang, `Ctrl+J` mirror dọc.
- Mở hộp thoại chính xác: `Alt+F8` (xoay), `Alt+F9` (scale).
### Sửa node
Chọn polygon/line → bấm `F10` (Node tool) → kéo node vuông, double-click trên line để chèn điểm.
> Xem chi tiết ở phần **6.bis — Shape Tool thông minh (bezier, góc nhọn / cong)** bên dưới.
---
## 6.bis. Shape Tool thông minh (vector node + bezier)
Bấm `F10` hoặc chọn nút **Shape** ở toolbar trái để vào chế độ sửa node.
### Hiểu các ký hiệu
- **■ Anchor vuông (xanh dương)** = node **góc nhọn** (corner).
- **◆ Anchor kim cương (xanh lá)** = node **cong** (smooth) — có 2 tay cầm bezier đối xứng.
- **● Tay cầm bezier** = chấm tròn nhỏ nối với anchor bằng vạch mảnh; kéo nó để chỉnh độ cong.
- Anchor được **chọn** sẽ to và tô đặc.
### Thao tác cơ bản
| Hành động | Kết quả |
|-----------|---------|
| Click vào shape khi đang ở Shape Tool | Hiện toàn bộ node của shape đó |
| Click vào anchor | Chọn node (highlight); kéo để di chuyển |
| **Alt + click anchor** | Đổi **góc nhọn ↔ cong**; khi thành cong, app **tự tính tay cầm bezier** theo tangent qua 2 node hàng xóm — đường cong hợp lý ngay |
| Kéo tay cầm bezier (chấm tròn) | Chỉnh độ cong; nếu node là smooth, tay cầm đối diện **tự gương** quanh anchor (giữ độ dài cũ) |
| **Alt + kéo tay cầm** | **Bẻ gãy đối xứng** → node thành góc gãy với 2 tay cầm độc lập (như Illustrator Convert Anchor Point) |
| Kéo anchor | Di chuyển node, 2 tay cầm bezier dịch theo cùng |
| **Double-click anchor** | Xóa node đó |
| `Delete` / `Backspace` khi đã chọn node | Xóa node đó (không xóa cả shape) |
| **Double-click trên thân polygon** (không trúng anchor) | Chèn node mới tại điểm gần nhất trên đường |
| **Double-click trên line** | Tự biến line thành polygon 3 điểm để sửa tiếp |
### Quy trình điển hình
1. Vẽ polygon thô bằng tool **Polygon (P)** — chỉ cần click các điểm chính, Enter chốt.
2. Bấm `F10` → click polygon vừa vẽ.
3. **Alt + click** vào các node cần bo tròn → đường tự cong.
4. Kéo tay cầm bezier để tinh chỉnh độ cong từng đoạn.
5. Cần thêm chi tiết? **Double-click** trên đoạn cong để chèn node mới.
6. Cần góc nhọn lại? **Alt + click** node smooth để đưa về corner.
### Lưu ý kỹ thuật
- Polygon có node cong được render bằng SVG `<path>` + lệnh `C` (cubic bezier) → cong thật, không gãy khúc.
- **Xuất PLT cho máy cắt:** hiện tại các tay cầm bezier **chưa được flatten tự động** trước khi gửi máy — máy cắt sẽ đi theo đường gấp khúc nối các anchor. Trước khi xuất, chèn thêm node ở các đoạn cong (double-click trên thân) để mịn hơn, hoặc dùng `Ctrl+Q` (Convert to curve) sau khi đã ưng ý hình dáng.
---
## 7. Tô màu — Swatch kiểu Illustrator
Ở góc dưới-trái canvas có cụm 5 nút:
- **Nét** (viền): click 1 lần để chọn active stroke, click lần 2 để mở picker.
- **Nền** (fill): click 1 → active fill, click 2 → mở picker.
- **⇄** Hoán đổi nét ↔ nền (`Shift+X`).
- **D** Reset mặc định (`D`): nét đen, nền trắng tắt.
- **∅** Bỏ tô (`/`): set None cho cái đang active.
Phím tắt: `X` đổi qua lại active fill/stroke.
> Tip: chọn shape trước, sau đó thao tác swatch sẽ áp ngay lên shape; nếu chưa chọn shape thì màu sẽ thành **mặc định cho hình vẽ kế tiếp**.
---
## 8. Layer & Đối tượng
Dock **Lớp** bên phải:
- **+ Lớp** tạo layer mới, **⎘ Nhân bản** copy layer, **− Xóa** xóa.
- Trong mỗi layer có nút **▸** xổ ra danh sách shape con (như Illustrator).
- Cột bên trái mỗi dòng: **👁 / 🔓** để ẩn / khóa **layer hoặc từng shape riêng lẻ**.
- Click tên shape để chọn nó trên canvas; Shift+click để thêm vào nhóm chọn.
Shape bị ẩn không vẽ. Shape bị khóa không nhận click, không chọn bằng marquee, không vào `Ctrl+A`.
---
## 9. Nhân bản & Giàn trang
Dock **Nhân bản & Giàn trang**:
- **Cột × Hàng + Khoảng X/Y**, bấm **Giàn lưới** để xếp ma trận từ shape đang chọn.
- **Fill trang** tự tính số cột/hàng để phủ kín trang.
- **Số bản + dx + dy** → **Nhân bản tuyến tính** (theo trục cố định).
---
## 10. Boolean — Hợp / Giao / Trừ
1. Chọn shape A.
2. **Shift+click** shape B (B sẽ thành "secondary", viền cam).
3. Menu **Đối tượng → Hợp / Giao / Trừ / XOR**, hoặc nút trên toolbar.
> Boolean chỉ áp dụng cho 2 shape đầu trong selection.
---
## 11. Contour & Đơn giản hóa
- **Contour** (`Ctrl+F9`): tạo đường offset (lớn hơn / nhỏ hơn) quanh shape. Dùng để in + cắt viền.
- **RDP — Đơn giản hóa đường:** menu **Đối tượng → Đơn giản hóa đường…**. Giảm số node trên polygon. Sai số nhỏ = ít mất chi tiết; lớn = ít node hơn.
---
## 12. Text on Path — Văn bản theo đường
1. Vẽ 1 polygon (làm path).
2. Vẽ 1 text.
3. Chọn text → **Shift+click** polygon.
4. Menu **Đối tượng → Gán text vào polygon…** → bấm **Gán**.
Có thể đặt **Khoảng cách đầu path** (mm).
---
## 13. Autotrace — Ảnh thành vector
1. **Tệp → Nhập ảnh (PNG/JPG)…**
2. Chọn image vừa nhập → **Đối tượng → Autotrace ảnh → vector…**
3. Kéo thanh **Ngưỡng sáng** quan sát preview, có thể **Đảo** để vector hóa vùng sáng.
4. **Đơn giản hóa sau trace** (mm) để bớt node.
5. Bấm **Vector hóa**.
---
## 14. Nesting — Sắp xếp tối ưu
1. Có sẵn nhiều shape rải rác.
2. **Đối tượng → Sắp xếp tối ưu (Nesting)…**
3. Đặt khoảng cách giữa shape, lề khổ giấy, có cho xoay 90° không.
4. Bấm **Sắp xếp** — thuật toán shelf-first-fit-decreasing sẽ xếp lại.
---
## 15. Ước tính giá / thời gian cắt
Dock **Ước tính & Vật liệu**:
- Chọn **Vật liệu** (Decal PVC, phản quang, chuyển nhiệt, dạ quang, kim loại, giấy mỏng/dày).
- Nhập **Tốc độ cắt (mm/s)** và **Đơn giá (đ/m²)**.
- App tự tính: số đối tượng, diện tích bbox, tổng độ dài cắt, thời gian, giá.
---
## 16. Xuất file PLT cho máy cắt
1. **Tệp → Xuất PLT…**
2. Trước khi xuất, mở **Trợ giúp → Pre-flight check…** để kiểm tra:
- Shape lọt ra ngoài trang
- Polygon quá nhiều node
- Text chưa convert to curve
- …
3. Bấm **Tự sửa lỗi đơn giản** nếu có, rồi **Vẫn xuất PLT**.
Định dạng xuất còn hỗ trợ DXF, EPS.
---
## 17. Lịch sử thao tác
- `Ctrl+Z` Undo, `Ctrl+Shift+Z` (hoặc `Ctrl+Y`) Redo.
- **Đối tượng → Lịch sử (xem nhánh)…** mở cây lịch sử: khi bạn Undo rồi làm thao tác khác, nhánh cũ vẫn được giữ. Click ô bất kỳ để nhảy về trạng thái đó.
---
## 18. Auto-save & Khôi phục
- App tự lưu nền 30 giây/lần vào `localStorage`.
- Khi mở app, nếu có bản tự lưu chưa đóng đúng cách → hiện hộp thoại **Khôi phục bản tự lưu?**.
- Hộp thoại nhớ thời điểm + số đối tượng để bạn quyết định.
---
## 19. Tab nhiều tài liệu
- Bấm **+** trên tabbar hoặc `Ctrl+T` để tạo tab mới.
- `Ctrl+W` đóng tab hiện tại.
- Mỗi tab có doc + undo/redo riêng.
---
## 20. Plugin marketplace
Menu **Đối tượng → Plugin marketplace…**: 6 plugin có sẵn (mã QR, barcode, hatch, contour QR…). Bấm **Cài** → plugin xuất hiện thành nút trên dock **Plugin** bên phải.
---
## 21. Cài đặt mặc định (Preferences)
Menu **Trợ giúp → Cài đặt**:
- **Lưu lựa chọn hiện tại làm mặc định** — chụp style (nét/nền/dày), rulers, grid, snap, vật liệu, autotrace, nesting, RDP eps vào `localStorage["kl:prefs"]`. Lần sau mở app sẽ tự nạp lại.
- **Tự động lưu mỗi khi đổi** (mặc định BẬT, có ✓) — debounce 600 ms khi bạn đổi bất cứ input nào.
- **Khôi phục cài đặt gốc** — xóa prefs đã lưu; tải lại app để có hiệu lực hoàn toàn.
Mỗi panel dock bên phải có **▾** trên tiêu đề: click để thu/mở; trạng thái lưu trong `localStorage["kl:docks"]`.
---
## 22. Phím tắt thường dùng
> Đầy đủ: **Trợ giúp → Bảng phím tắt…** (`Shift+F1`).
| Nhóm | Phím | Việc |
|------|------|------|
| Tệp | `Ctrl+N / O / S` | New / Open / Save |
| Sửa | `Ctrl+Z` / `Ctrl+Shift+Z` | Undo / Redo |
| Sửa | `Ctrl+D` | Nhân bản (offset +5mm) |
| Sửa | `Delete` | Xóa nhóm chọn |
| Chọn | `Ctrl/Cmd+A` / `Ctrl/Cmd+Shift+A` | Chọn tất cả / Bỏ chọn |
| Công cụ | `V / F10 / L / R / E / P / T` | Chọn / Node / Line / Rect / Ellipse / Polygon / Text |
| Xem | `Ctrl+R` / `Ctrl+'` / `F` | Thước / Lưới / Khít trang |
| Xem | `Space + kéo` / `Wheel` | Pan / Zoom |
| Biến đổi | `Ctrl+H / J / K / L` | Mirror H/V, xoay ±90° |
| Outline | `F12` / `Shift+F12` / `Alt+F12` | Outline Pen / Color / Size |
| Convert | `Ctrl+Q` / `Ctrl+Shift+Q` | To Curve / Outline → Object |
| Swatch | `X` / `Shift+X` / `D` / `/` | Đổi active / Hoán đổi / Default / None |
| DevTools | `F12` / `Cmd+Option+I` (Mac) | Mở Console khi gặp lỗi |
| Trợ giúp | `Shift+F1` / `Esc` | Bảng phím tắt / Đóng modal |
---
## 23. Khắc phục sự cố
| Triệu chứng | Cách xử lý |
|-------------|-----------|
| Click hình không chọn được | Kiểm tra layer có khóa (🔒) không; thử bấm `V` trước. Nếu vẫn lỗi: `Cmd+Option+I` mở Console xem chữ đỏ. |
| Đổi màu không thấy hình đổi | Đảm bảo đã chọn shape trước; nếu không thì màu chỉ là default cho hình kế tiếp. |
| Mất file đang vẽ | Mở lại app — sẽ có hộp thoại "Khôi phục bản tự lưu?". |
| App treo / GPU error | Đóng app, mở lại. Lỗi `GPU process exited unexpectedly: exit_code=15` lúc tắt là bình thường. |
| Xuất PLT máy cắt sai chiều | Vào Pre-flight check, kiểm tra Mirror & gốc tọa độ; chỉnh `Mirror V` nếu máy đảo trục Y. |
---
## 24. Lời khuyên
1. **Dùng layer ngay từ đầu** — thiết kế > 10 đối tượng nên chia layer.
2. **Lưu thường xuyên** (`Ctrl+S`) — auto-save chỉ là cứu cánh.
3. **Convert text to curve** (`Ctrl+Q`) trước khi xuất PLT để máy không thiếu font.
4. **Bật snap điểm đầu/cuối + tâm** khi cần đường khép kín chính xác.
5. **Pre-flight check** mỗi khi sắp gửi máy.
Chúc bạn làm việc hiệu quả!
