drawui-react

v0.3.6

Published

2 days ago

React wrapper for drawui-core canvas drawing (PNG / SVG / PDF export, UML, mind map)

0High
0Medium
0Low

wei2019

drawui-react

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

基于 drawui-core 的 React 封装，提供开箱即用的画布组件。

安装

npm install drawui-react   # 自动安装 drawui-core

用法

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="zh-CN"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

样式需单独引入：import 'drawui-react/styles.css'

`<CanvasBoard>` 主要属性

| 属性 | 类型 | 说明 | | --- | --- | --- | | initialTool | ToolType | 初始工具，默认 'select' | | themeColor | string | 主题主色（选中态 / 手柄 / 强调色），默认 #3b82f6 | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | 界面语言，默认 'zh-CN' | | data | Shape[] | 初始图形；传入后不读写 localStorage | | onChange | (data: EditorData) => void | 图形 / 相机变化时回调 | | onReady | (editor: Editor) => void | 编辑器实例就绪，可拿到 Editor 完全控制 |

导出组件

CanvasBoard — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
Toolbar — 工具栏
ZoomControl — 缩放控件

依赖

react / react-dom ^18.3（peerDependencies）
drawui-core（自动安装）

使用 drawui 的项目

myBookEditor — 基于 Slate.js 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。

更新日志

v0.3.6

🌏 language 新增 5 种语言：zh-TW、ja-JP、ko-KR、de-DE、fr-FR（连同简体中文 / English 共 7 种），画布内所有界面文案同步翻译。
📦 依赖的 drawui-core 同步升级到 0.3.6（新增 LANGUAGES 导出，含各语言本族语名称）。
ℹ️ 语言字典改为 Record<MessageKey, string> 强约束，任一语言漏翻 key 会在编译期直接报错。

更早版本的完整记录见仓库根目录 README。

License

MIT

繁體中文

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

以 drawui-core 為基礎的 React 封裝，提供開箱即用的畫布元件。

安裝

npm install drawui-react   # 會自動安裝 drawui-core

用法

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="zh-TW"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

樣式需單獨引入：import 'drawui-react/styles.css'

`<CanvasBoard>` 主要屬性

| 屬性 | 型別 | 說明 | | --- | --- | --- | | initialTool | ToolType | 初始工具，預設 'select' | | themeColor | string | 主題主色（選取態／手柄／強調色），預設 #3b82f6 | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | 介面語言，預設 'zh-CN' | | data | Shape[] | 初始圖形；傳入後不讀寫 localStorage | | onChange | (data: EditorData) => void | 圖形／相機變化時回呼 | | onReady | (editor: Editor) => void | 編輯器實例就緒，可取得 Editor 完全控制 |

匯出元件

CanvasBoard — 主畫布（含工具列／縮放／樣式面板／心智圖面板等）
Toolbar — 工具列
ZoomControl — 縮放控制項

相依

react / react-dom ^18.3（peerDependencies）
drawui-core（自動安裝）

使用 drawui 的專案

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

License

MIT

English

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

React wrapper for drawui-core, with drop-in canvas components.

Install

npm install drawui-react   # installs drawui-core automatically

Usage

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="en-US"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

The stylesheet must be imported separately: import 'drawui-react/styles.css'

`<CanvasBoard>` props

| Prop | Type | Description | | --- | --- | --- | | initialTool | ToolType | Initial tool, defaults to 'select' | | themeColor | string | Theme accent (selection / handles / highlights), defaults to #3b82f6 | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | UI language, defaults to 'zh-CN' | | data | Shape[] | Initial shapes; when provided, localStorage is not read or written | | onChange | (data: EditorData) => void | Called when shapes / camera change | | onReady | (editor: Editor) => void | Called once the editor is ready (full Editor access) |

Exported components

CanvasBoard — the main board (toolbar / zoom / style panel / mind-map panel, …)
Toolbar — the toolbar
ZoomControl — the zoom control

Dependencies

react / react-dom ^18.3 (peerDependencies)
drawui-core (installed automatically)

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

🌏 language now accepts 5 more languages: zh-TW, ja-JP, ko-KR, de-DE, fr-FR (7 in total together with Simplified Chinese and English); every UI string inside the board is translated.
📦 The bundled drawui-core is bumped to 0.3.6 (adds the LANGUAGES export with each language's native name).
ℹ️ 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

drawui-core の React ラッパー。すぐに使えるキャンバスコンポーネントを提供します。

インストール

npm install drawui-react   # drawui-core も自動でインストールされます

使い方

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="ja-JP"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

スタイルは別途インポートが必要です：import 'drawui-react/styles.css'

`<CanvasBoard>` の主な props

| props | 型 | 説明 | | --- | --- | --- | | initialTool | ToolType | 初期ツール。既定は 'select' | | themeColor | string | テーマのメインカラー（選択状態／ハンドル／強調色）。既定は #3b82f6 | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | UI の言語。既定は 'zh-CN' | | data | Shape[] | 初期図形。渡した場合 localStorage の読み書きは行いません | | onChange | (data: EditorData) => void | 図形／カメラの変化時に呼ばれます | | onReady | (editor: Editor) => void | エディタの準備完了時に呼ばれ、Editor を完全に操作できます |

エクスポートされるコンポーネント

CanvasBoard — メインのボード（ツールバー／ズーム／スタイルパネル／マインドマップパネルなど）
Toolbar — ツールバー
ZoomControl — ズームコントロール

依存関係

react / react-dom ^18.3（peerDependencies）
drawui-core（自動でインストール）

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

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

ライセンス

MIT

한국어

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

drawui-core 기반의 React 래퍼로, 바로 쓸 수 있는 캔버스 컴포넌트를 제공합니다.

설치

npm install drawui-react   # drawui-core도 자동으로 설치됩니다

사용법

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="ko-KR"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

스타일은 별도로 불러와야 합니다: import 'drawui-react/styles.css'

`<CanvasBoard>` 주요 props

| props | 타입 | 설명 | | --- | --- | --- | | initialTool | ToolType | 초기 도구, 기본값 'select' | | themeColor | string | 테마 기본 색상(선택 상태／핸들／강조색), 기본값 #3b82f6 | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | UI 언어, 기본값 'zh-CN' | | data | Shape[] | 초기 도형. 넘기면 localStorage를 읽거나 쓰지 않습니다 | | onChange | (data: EditorData) => void | 도형／카메라 변경 시 호출 | | onReady | (editor: Editor) => void | 에디터 준비 완료 시 호출되며 Editor를 완전히 제어할 수 있습니다 |

내보내는 컴포넌트

CanvasBoard — 메인 보드(툴바／확대·축소／스타일 패널／마인드맵 패널 등)
Toolbar — 툴바
ZoomControl — 확대·축소 컨트롤

의존성

react / react-dom ^18.3 (peerDependencies)
drawui-core (자동 설치)

drawui를 사용하는 프로젝트

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

라이선스

MIT

Deutsch

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

React-Wrapper für drawui-core mit sofort einsetzbaren Canvas-Komponenten.

Installation

npm install drawui-react   # installiert drawui-core automatisch

Verwendung

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="de-DE"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

Das Stylesheet muss separat importiert werden: import 'drawui-react/styles.css'

`<CanvasBoard>`-Props

| Prop | Typ | Beschreibung | | --- | --- | --- | | initialTool | ToolType | Startwerkzeug, Standard 'select' | | themeColor | string | Akzentfarbe des Themes (Auswahl / Griffe / Hervorhebungen), Standard #3b82f6 | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | UI-Sprache, Standard 'zh-CN' | | data | Shape[] | Anfangsformen; wenn gesetzt, wird localStorage nicht gelesen oder geschrieben | | onChange | (data: EditorData) => void | Wird bei Änderungen an Formen / Kamera aufgerufen | | onReady | (editor: Editor) => void | Wird aufgerufen, sobald der Editor bereit ist (voller Zugriff auf Editor) |

Exportierte Komponenten

CanvasBoard — das Hauptboard (Toolbar / Zoom / Stil-Panel / Mindmap-Panel, …)
Toolbar — die Toolbar
ZoomControl — die Zoom-Steuerung

Abhängigkeiten

react / react-dom ^18.3 (peerDependencies)
drawui-core (wird automatisch installiert)

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

Wrapper React pour drawui-core, avec des composants canvas prêts à l'emploi.

Installation

npm install drawui-react   # installe drawui-core automatiquement

Utilisation

import { CanvasBoard } from 'drawui-react'
import 'drawui-react/styles.css'
import type { Editor, EditorData } from 'drawui-core'

export function App() {
  return (
    <CanvasBoard
      themeColor="#3b82f6"
      language="fr-FR"
      onChange={(data: EditorData) => console.log(data.shapes.length)}
      onReady={(editor: Editor) => editor.setShapes([])}
    />
  )
}

La feuille de style doit être importée séparément : import 'drawui-react/styles.css'

Props de `<CanvasBoard>`

| Prop | Type | Description | | --- | --- | --- | | initialTool | ToolType | Outil initial, 'select' par défaut | | themeColor | string | Couleur d'accentuation du thème (sélection / poignées / surlignage), #3b82f6 par défaut | | language | 'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR' | Langue de l'interface, 'zh-CN' par défaut | | data | Shape[] | Formes initiales ; si fourni, localStorage n'est ni lu ni écrit | | onChange | (data: EditorData) => void | Appelé lors des changements de formes / caméra | | onReady | (editor: Editor) => void | Appelé dès que l'éditeur est prêt (accès complet à Editor) |

Composants exportés

CanvasBoard — le tableau principal (barre d'outils / zoom / panneau de style / panneau de carte mentale, …)
Toolbar — la barre d'outils
ZoomControl — le contrôle de zoom

Dépendances

react / react-dom ^18.3 (peerDependencies)
drawui-core (installé automatiquement)

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-react

安装

用法

<CanvasBoard> 主要属性

导出组件

依赖

使用 drawui 的项目

更新日志

v0.3.6

License

繁體中文

安裝

用法

<CanvasBoard> 主要屬性

匯出元件

相依

使用 drawui 的專案

License

English

Install

Usage

<CanvasBoard> props

Exported components

Dependencies

Projects using drawui

Changelog

v0.3.6

License

日本語

インストール

使い方

<CanvasBoard> の主な props

エクスポートされるコンポーネント

依存関係

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

ライセンス

한국어

설치

사용법

<CanvasBoard> 주요 props

내보내는 컴포넌트

의존성

drawui를 사용하는 프로젝트

라이선스

Deutsch

Installation

Verwendung

<CanvasBoard>-Props

Exportierte Komponenten

Abhängigkeiten

Projekte, die drawui verwenden

Lizenz

Français

Installation

Utilisation

Props de <CanvasBoard>

Composants exportés

Dépendances

Projets utilisant drawui

Licence

`<CanvasBoard>` 主要属性

`<CanvasBoard>` 主要屬性

`<CanvasBoard>` props

`<CanvasBoard>` の主な props

`<CanvasBoard>` 주요 props

`<CanvasBoard>`-Props

Props de `<CanvasBoard>`