drawui-core 0.3.5 → 0.3.6

package/README.md

@@ -1,6 +1,6 @@
 # drawui-core
 
-**简体中文** ｜ [English](#english)
+**简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
 
 框架无关的核心画布绘图引擎（原生 TypeScript，无 UI 框架依赖）。
 
@@ -38,7 +38,7 @@ editor.setShapes([
 - 工具类：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
 - 几何：`Vec`、`Mat2d`、`Camera`、`Renderer`
 - 主题：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
-- 国际化：`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
+- 国际化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
 - 思维导图：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` 等
 - 类型：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` 等
 
@@ -47,16 +47,95 @@ editor.setShapes([
 ```ts
 interface EditorOptions {
   theme?: Partial<DrawuiTheme>
-  language?: 'zh-CN' | 'en-US'
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
   shapes?: Shape[]
   persist?: boolean   // 是否写入 localStorage，默认 true（提供 shapes 时自动关闭）
 }
 ```
 
+> 可用语言清单也可直接从 `LANGUAGES` 读取（含各语言的本族语名称），便于自行渲染语言切换 UI。
+
 ## 使用 drawui 的项目
 
 - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
 
+## 更新日志
+
+### v0.3.6
+
+- 🌏 国际化新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种）；界面文案（工具栏、状态栏、样式面板、生成菜单、小地图、思维导图）已全部翻译。
+- 📦 新增导出 `LANGUAGES`：`{ code, label }[]`，含各语言的本族语名称，便于宿主直接渲染语言切换 UI。
+- ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
+
+> 更早版本的完整记录见仓库根目录 README。
+
+## License
+
+MIT
+
+---
+
+# 繁體中文
+
+[简体中文](#drawui-core) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+框架無關的核心畫布繪圖引擎（原生 TypeScript，無 UI 框架相依）。
+
+React 封裝請見 [drawui-react](https://www.npmjs.com/package/drawui-react)。
+
+## 安裝
+
+```bash
+npm install drawui-core
+```
+
+## 用法
+
+```ts
+import { Editor } from 'drawui-core'
+
+const canvas = document.getElementById('board') as HTMLCanvasElement
+const editor = new Editor(canvas, { language: 'zh-TW' })
+
+editor.subscribe(() => console.log('changed'))
+editor.setShapes([
+  {
+    id: 'r1',
+    type: 'rectangle',
+    x: 80, y: 80, width: 160, height: 90, rotation: 0,
+    text: 'Hello',
+    style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
+  },
+])
+```
+
+## 主要匯出
+
+- `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
+- 工具類別：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
+- 幾何：`Vec`、`Mat2d`、`Camera`、`Renderer`
+- 主題：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
+- 國際化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
+- 心智圖：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` 等
+- 型別：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` 等
+
+## 建構選項
+
+```ts
+interface EditorOptions {
+  theme?: Partial<DrawuiTheme>
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
+  shapes?: Shape[]
+  persist?: boolean   // 是否寫入 localStorage，預設 true（提供 shapes 時自動關閉）
+}
+```
+
+> 可用語言清單也可直接從 `LANGUAGES` 讀取（含各語言的原生名稱），方便自行渲染語言切換 UI。
+
+## 使用 drawui 的專案
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
+
 ## License
 
 MIT
@@ -65,7 +144,7 @@ MIT
 
 # English
 
-[简体中文](#drawui-core) ｜ **English**
+[简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
 
 Framework-agnostic core canvas drawing engine (vanilla TypeScript, no UI-framework dependency).
 
@@ -103,7 +182,7 @@ editor.setShapes([
 - Tools: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
 - Geometry: `Vec`, `Mat2d`, `Camera`, `Renderer`
 - Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
-- i18n: `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
+- i18n: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
 - Mind map: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
 - Types: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
 
@@ -112,16 +191,296 @@ editor.setShapes([
 ```ts
 interface EditorOptions {
   theme?: Partial<DrawuiTheme>
-  language?: 'zh-CN' | 'en-US'
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
   shapes?: Shape[]
   persist?: boolean   // persist to localStorage; defaults to true (auto-off when `shapes` is given)
 }
 ```
 
+> The list of available languages is also exported as `LANGUAGES` (with each language's native name), handy for rendering your own language switcher.
+
 ## Projects using drawui
 
 - **[myBookEditor](https://github.com/weishell/myBookEditor)** — a rich-text / document editor built on [Slate.js](https://github.com/ianstormtaylor/slate). It embeds drawui boards: insert and edit a board right inside a document to draw diagrams, UML class diagrams and mind maps, and export / download them along with the document.
 
+## Changelog
+
+### v0.3.6
+
+- 🌏 Added 5 languages: `zh-TW`, `ja-JP`, `ko-KR`, `de-DE`, `fr-FR` (7 in total together with Simplified Chinese and English). All UI strings — toolbar, status bar, style panel, create-shape menu, minimap, mind map — are translated.
+- 📦 New export `LANGUAGES`: `{ code, label }[]` with each language's native name, handy for rendering your own language switcher.
+- ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
+
+> The full history lives in the repository root README.
+
 ## License
 
 MIT
+
+---
+
+# 日本語
+
+[简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+フレームワーク非依存のコア描画エンジン（ピュア TypeScript、UI フレームワークへの依存なし）。
+
+React ラッパーは [drawui-react](https://www.npmjs.com/package/drawui-react) をご覧ください。
+
+## インストール
+
+```bash
+npm install drawui-core
+```
+
+## 使い方
+
+```ts
+import { Editor } from 'drawui-core'
+
+const canvas = document.getElementById('board') as HTMLCanvasElement
+const editor = new Editor(canvas, { language: 'ja-JP' })
+
+editor.subscribe(() => console.log('changed'))
+editor.setShapes([
+  {
+    id: 'r1',
+    type: 'rectangle',
+    x: 80, y: 80, width: 160, height: 90, rotation: 0,
+    text: 'Hello',
+    style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
+  },
+])
+```
+
+## 主なエクスポート
+
+- `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
+- ツール：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
+- 幾何：`Vec`、`Mat2d`、`Camera`、`Renderer`
+- テーマ：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
+- 国際化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
+- マインドマップ：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` など
+- 型：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` など
+
+## コンストラクタオプション
+
+```ts
+interface EditorOptions {
+  theme?: Partial<DrawuiTheme>
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
+  shapes?: Shape[]
+  persist?: boolean   // localStorage に保存するか。既定は true（shapes を渡すと自動でオフ）
+}
+```
+
+> 利用可能な言語の一覧は `LANGUAGES` としてもエクスポートされています（各言語のネイティブ表記つき）。独自の言語切り替え UI の実装に便利です。
+
+## drawui を利用しているプロジェクト
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
+
+## ライセンス
+
+MIT
+
+---
+
+# 한국어
+
+[简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
+
+프레임워크에 종속되지 않는 코어 캔버스 드로잉 엔진(순수 TypeScript, UI 프레임워크 의존성 없음).
+
+React 래퍼는 [drawui-react](https://www.npmjs.com/package/drawui-react)를 참고하세요.
+
+## 설치
+
+```bash
+npm install drawui-core
+```
+
+## 사용법
+
+```ts
+import { Editor } from 'drawui-core'
+
+const canvas = document.getElementById('board') as HTMLCanvasElement
+const editor = new Editor(canvas, { language: 'ko-KR' })
+
+editor.subscribe(() => console.log('changed'))
+editor.setShapes([
+  {
+    id: 'r1',
+    type: 'rectangle',
+    x: 80, y: 80, width: 160, height: 90, rotation: 0,
+    text: 'Hello',
+    style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
+  },
+])
+```
+
+## 주요 내보내기
+
+- `Editor`(`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
+- 도구: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
+- 기하: `Vec`, `Mat2d`, `Camera`, `Renderer`
+- 테마: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
+- 국제화: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
+- 마인드맵: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize` 등
+- 타입: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode` 등
+
+## 생성자 옵션
+
+```ts
+interface EditorOptions {
+  theme?: Partial<DrawuiTheme>
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
+  shapes?: Shape[]
+  persist?: boolean   // localStorage에 저장할지 여부. 기본값 true (shapes를 넘기면 자동으로 꺼짐)
+}
+```
+
+> 사용 가능한 언어 목록은 `LANGUAGES`로도 내보내집니다(각 언어의 원어 표기 포함). 직접 언어 전환 UI를 만들 때 편리합니다.
+
+## drawui를 사용하는 프로젝트
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
+
+## 라이선스
+
+MIT
+
+---
+
+# Deutsch
+
+[简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
+
+Framework-unabhängige Canvas-Zeichenbibliothek (reines TypeScript, keine Abhängigkeit von einem UI-Framework).
+
+React-Wrapper: [drawui-react](https://www.npmjs.com/package/drawui-react).
+
+## Installation
+
+```bash
+npm install drawui-core
+```
+
+## Verwendung
+
+```ts
+import { Editor } from 'drawui-core'
+
+const canvas = document.getElementById('board') as HTMLCanvasElement
+const editor = new Editor(canvas, { language: 'de-DE' })
+
+editor.subscribe(() => console.log('changed'))
+editor.setShapes([
+  {
+    id: 'r1',
+    type: 'rectangle',
+    x: 80, y: 80, width: 160, height: 90, rotation: 0,
+    text: 'Hello',
+    style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
+  },
+])
+```
+
+## Wichtigste Exporte
+
+- `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
+- Werkzeuge: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
+- Geometrie: `Vec`, `Mat2d`, `Camera`, `Renderer`
+- Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
+- i18n: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
+- Mindmap: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
+- Typen: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
+
+## EditorOptions
+
+```ts
+interface EditorOptions {
+  theme?: Partial<DrawuiTheme>
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
+  shapes?: Shape[]
+  persist?: boolean   // in localStorage speichern; Standard true (automatisch aus, wenn `shapes` gesetzt ist)
+}
+```
+
+> Die Liste der verfügbaren Sprachen wird ebenfalls als `LANGUAGES` exportiert (mit der jeweiligen Eigenbezeichnung) – praktisch für einen eigenen Sprachumschalter.
+
+## Projekte, die drawui verwenden
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — ein Rich-Text-/Dokumenteneditor auf Basis von [Slate.js](https://github.com/ianstormtaylor/slate). Er bindet drawui-Boards ein: Boards direkt im Dokument einfügen und bearbeiten, um Diagramme, UML-Klassendiagramme und Mindmaps zu zeichnen und zusammen mit dem Dokument zu exportieren / herunterzuladen.
+
+## Lizenz
+
+MIT
+
+---
+
+# Français
+
+[简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
+
+Moteur de dessin sur canvas indépendant du framework (TypeScript pur, sans dépendance à un framework UI).
+
+Wrapper React : [drawui-react](https://www.npmjs.com/package/drawui-react).
+
+## Installation
+
+```bash
+npm install drawui-core
+```
+
+## Utilisation
+
+```ts
+import { Editor } from 'drawui-core'
+
+const canvas = document.getElementById('board') as HTMLCanvasElement
+const editor = new Editor(canvas, { language: 'fr-FR' })
+
+editor.subscribe(() => console.log('changed'))
+editor.setShapes([
+  {
+    id: 'r1',
+    type: 'rectangle',
+    x: 80, y: 80, width: 160, height: 90, rotation: 0,
+    text: 'Hello',
+    style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
+  },
+])
+```
+
+## Principaux exports
+
+- `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
+- Outils : `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
+- Géométrie : `Vec`, `Mat2d`, `Camera`, `Renderer`
+- Thème : `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
+- i18n : `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
+- Carte mentale : `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
+- Types : `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
+
+## Options de l'éditeur
+
+```ts
+interface EditorOptions {
+  theme?: Partial<DrawuiTheme>
+  language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
+  shapes?: Shape[]
+  persist?: boolean   // écrire dans localStorage ; par défaut true (désactivé si `shapes` est fourni)
+}
+```
+
+> La liste des langues disponibles est également exportée sous `LANGUAGES` (avec le nom natif de chaque langue), pratique pour construire votre propre sélecteur de langue.
+
+## Projets utilisant drawui
+
+- **[myBookEditor](https://github.com/weishell/myBookEditor)** — un éditeur de texte enrichi / de documents basé sur [Slate.js](https://github.com/ianstormtaylor/slate). Il intègre les tableaux drawui : insérez et modifiez un tableau directement dans le document pour dessiner des schémas, des diagrammes de classes UML et des cartes mentales, puis exportez / téléchargez le tout avec le document.
+
+## Licence
+
+MIT