drawui-core

v0.3.6

Published

a day ago

Framework-agnostic canvas drawing engine (PNG / SVG / PDF export, UML, mind map)

0High
0Medium
0Low

wei2019

drawui-core

简体中文 ｜繁體中文｜ English ｜日本語｜ 한국어 ｜ Deutsch ｜ Français

框架无关的核心画布绘图引擎（原生 TypeScript，无 UI 框架依赖）。

配套 React 封装见 drawui-react。

安装

npm install drawui-core

用法

import { Editor } from 'drawui-core'

const canvas = document.getElementById('board') as HTMLCanvasElement
const editor = new Editor(canvas, { language: 'zh-CN' })

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 等

构造选项

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 — 基于 Slate.js 的富文本 / 文档编辑器，已接入 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

繁體中文

简体中文｜ 繁體中文 ｜ English ｜日本語｜ 한국어 ｜ Deutsch ｜ Français

框架無關的核心畫布繪圖引擎（原生 TypeScript，無 UI 框架相依）。

React 封裝請見 drawui-react。

安裝

npm install drawui-core

用法

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 等

建構選項

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 — 基於 Slate.js 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。

License

MIT

English

简体中文｜繁體中文｜ English ｜日本語｜ 한국어 ｜ Deutsch ｜ Français

Framework-agnostic core canvas drawing engine (vanilla TypeScript, no UI-framework dependency).

React wrapper: drawui-react.

Install

npm install drawui-core

Usage

import { Editor } from 'drawui-core'

const canvas = document.getElementById('board') as HTMLCanvasElement
const editor = new Editor(canvas, { language: 'en-US' })

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 },
  },
])

Main exports

Editor (new Editor(canvas, options?)), EditorOptions, UiEvent
Tools: SelectTool, HandTool, ShapeTool, LineTool, FreehandTool, ArrowTool
Geometry: Vec, Mat2d, Camera, Renderer
Theme: THEME, getTheme, setTheme, subscribeTheme, hexToRgba, shadeColor
i18n: LANGUAGES, setLanguage, getLanguage, subscribeLanguage, t
Mind map: layoutMindMap, mindMapNodeColor, mindMapNodeSize, …
Types: Shape, ShapeType, EditorData, ToolType, MindMapNode, …

EditorOptions

interface EditorOptions {
  theme?: Partial<DrawuiTheme>
  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 — a rich-text / document editor built on Slate.js. 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

日本語

简体中文｜繁體中文｜ English ｜ 日本語 ｜ 한국어 ｜ Deutsch ｜ Français

フレームワーク非依存のコア描画エンジン（ピュア TypeScript、UI フレームワークへの依存なし）。

React ラッパーは drawui-react をご覧ください。

インストール

npm install drawui-core

使い方

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 など

コンストラクタオプション

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 — Slate.js ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。

ライセンス

MIT

한국어

简体中文｜繁體中文｜ English ｜日本語｜ 한국어 ｜ Deutsch ｜ Français

프레임워크에 종속되지 않는 코어 캔버스 드로잉 엔진(순수 TypeScript, UI 프레임워크 의존성 없음).

React 래퍼는 drawui-react를 참고하세요.

설치

npm install drawui-core

사용법

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 등

생성자 옵션

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 — Slate.js 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.

라이선스

MIT

Deutsch

简体中文｜繁體中文｜ English ｜日本語｜ 한국어 ｜ Deutsch ｜ Français

Framework-unabhängige Canvas-Zeichenbibliothek (reines TypeScript, keine Abhängigkeit von einem UI-Framework).

React-Wrapper: drawui-react.

Installation

npm install drawui-core

Verwendung

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

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 — ein Rich-Text-/Dokumenteneditor auf Basis von Slate.js. 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

简体中文｜繁體中文｜ English ｜日本語｜ 한국어 ｜ Deutsch ｜ Français

Moteur de dessin sur canvas indépendant du framework (TypeScript pur, sans dépendance à un framework UI).

Wrapper React : drawui-react.

Installation

npm install drawui-core

Utilisation

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

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 — un éditeur de texte enrichi / de documents basé sur Slate.js. 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

drawui-core

安装

用法

主要导出

构造选项

使用 drawui 的项目

更新日志

v0.3.6

License

繁體中文

安裝

用法

主要匯出

建構選項

使用 drawui 的專案

License

English

Install

Usage

Main exports

EditorOptions

Projects using drawui

Changelog

v0.3.6

License

日本語

インストール

使い方

主なエクスポート

コンストラクタオプション

drawui を利用しているプロジェクト

ライセンス

한국어

설치

사용법

주요 내보내기

생성자 옵션

drawui를 사용하는 프로젝트

라이선스

Deutsch

Installation

Verwendung

Wichtigste Exporte

EditorOptions

Projekte, die drawui verwenden

Lizenz

Français

Installation

Utilisation

Principaux exports

Options de l'éditeur

Projets utilisant drawui

Licence