vkedit 3.2.4 → 3.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 vkedit contributors
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 vkedit contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.en.md CHANGED
@@ -3,14 +3,15 @@
3
3
  [![NPM Version](https://img.shields.io/npm/v/vkedit?style=flat-square)](https://www.npmjs.com/package/vkedit)
4
4
  [![License](https://img.shields.io/npm/l/vkedit?style=flat-square)](LICENSE)
5
5
  [![Node.js](https://img.shields.io/node/v/vkedit?style=flat-square)](package.json)
6
+ [![Live Demo](https://img.shields.io/badge/Live%20Demo-vkedit.org-orange?style=flat-square)](https://vkedit.org)
6
7
 
7
- A graphic editor plugin library built on Vue 3 and Konva.js. Features a plugin-based architecture suitable for label templates, QR codes, barcodes, receipts, business cards, certificates, and more.
8
+ A visual canvas designer component built on Vue 3 and Konva.js. Features a plugin-based architecture for label, QR code, barcode, receipt, business card, and certificate template design and print layout.
8
9
 
9
- **[中文](README.md)**
10
+ **[中文](README.md)** | **[Live Demo](https://vkedit.org)** | **[Docs](https://docs.vkedit.org)**
10
11
 
11
12
  ---
12
13
 
13
- ![Project Preview](./截图/image.png)
14
+ ![Project Preview](https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/image.png)
14
15
 
15
16
  ---
16
17
 
@@ -103,243 +104,14 @@ host.setStatus({
103
104
  </script>
104
105
  ```
105
106
 
106
- ### Vkedit Component Props
107
-
108
- | Prop | Type | Default | Description |
109
- | ------------------- | ------------ | ------- | ------------------------ |
110
- | `host` | `EditorHost` | - | Editor host instance |
111
- | `showToolbox` | `boolean` | `true` | Show left toolbox |
112
- | `showPropertyPanel` | `boolean` | `true` | Show right property panel|
113
- | `showToolbar` | `boolean` | `true` | Show top toolbar |
114
-
115
- ---
116
-
117
- ## Configuration
118
-
119
- ### createEditorHost Options
120
-
121
- `createEditorHost(options)` creates a host instance and automatically installs core plugins. Optional plugins are controlled by the following options:
122
-
123
- | Option | Type | Default | Description |
124
- | ------------------------ | --------- | ------- | -------------------------- |
125
- | `basePropertyPanel` | `boolean` | `false` | Base element property panel|
126
- | `baseCanvasPropertyPanel`| `boolean` | `true` | Canvas property panel |
127
- | `exportPlugin` | `boolean` | `true` | Export plugin |
128
- | `previewPlugin` | `boolean` | `true` | Preview plugin |
129
- | `importPlugin` | `boolean` | `true` | Import plugin |
130
-
131
- ### Canvas State
132
-
133
- Update canvas state via `host.setStatus()`, which supports partial updates:
134
-
135
- ```typescript
136
- interface IEditorState {
137
- zoom: number // Zoom level
138
- currentTool: string // Current tool
139
- snapToGrid: boolean // Snap to grid
140
- showGrid: boolean // Show grid
141
- width: number // Canvas width (pixels)
142
- height: number // Canvas height (pixels)
143
- wmm: number // Canvas width (millimeters)
144
- hmm: number // Canvas height (millimeters)
145
- dpm: number // Dots per millimeter (DPI / 25.4)
146
- }
147
- ```
148
-
149
- `width`/`height` and `wmm`/`hmm` are automatically converted via `dpm`. Setting `dpm` recalculates pixel dimensions from the current millimeter sizes.
150
-
151
- ---
152
-
153
- ## Plugin List
154
-
155
- ### Core Plugins (auto-installed by createEditorHost)
156
-
157
- | Plugin | Description |
158
- | --- | --- |
159
- | `ToolbarManagerPlugin` | Top toolbar management |
160
- | `GraphicToolManagerPlugin` | Graphic tool management |
161
- | `GraphicManagerPlugin` | Graphic rendering management |
162
- | `PropertyPanelManagerPlugin` | Dynamic property panel rendering |
163
- | `ElementManagerPlugin` | Element lifecycle management |
164
- | `SelectionPlugin` | Element selection and multi-select |
165
- | `KeyDownPlugin` | Keyboard shortcuts |
166
- | `SnapPlugin` | Grid snapping |
167
- | `ClipboardPlugin` | Copy / cut / paste |
168
- | `AlignPlugin` | Alignment and distribution |
169
- | `ContextMenuManagerPlugin` | Context menu |
170
-
171
- ### Feature Plugins (enabled via options)
172
-
173
- | Plugin | Option | Description |
174
- | --- | --- | --- |
175
- | `ExportPlugin` | `exportPlugin` | Export JSON / PNG / JPG / PDF |
176
- | `ImportPlugin` | `importPlugin` | Import JSON files |
177
- | `PreviewPlugin` | `previewPlugin` | Preview and print preview |
178
-
179
- ### Graphic Plugins (manually installed)
180
-
181
- | Plugin | Element Type | Description |
182
- | --- | --- | --- |
183
- | `RectPlugin` | `rect` | Rectangle with fill and stroke |
184
- | `TextPlugin` | `text` | Text with font, alignment, and style |
185
- | `LinePlugin` | `line` | Line with color and width |
186
- | `TablePlugin` | `table` | Table with rows, merged cells, and borders |
187
- | `QrcodePlugin` | `qr` | QR code with foreground/background colors |
188
- | `BarcodePlugin` | `barcode` | Barcode supporting CODE128, EAN-13, etc. |
189
- | `ChartPlugin` | `chart` | Chart powered by ECharts |
190
-
191
- ---
192
-
193
- ## Core Concepts
194
-
195
- ### EditorHost
196
-
197
- `EditorHost` is the core host class of the editor, managing plugins, state, commands, and history. After creating an instance via `createEditorHost()`, all operations revolve around the `host`.
198
-
199
- ### Plugin System
200
-
201
- Plugins are managed via `installPlugin` / `uninstallPlugin` / `getPlugin`. Plugins must extend `BasePlugin` and implement the `onInstall()` hook. `getPlugin` supports generic type inference:
202
-
203
- ```typescript
204
- const rectPlugin = host.getPlugin('rect-plugin') // inferred as RectPlugin
205
- const exportPlugin = host.getPlugin('export-plugin')
206
- ```
207
-
208
- ### Command Pattern
209
-
210
- All reversible operations are implemented as commands. `executeCommand()` executes a command and pushes it onto the history stack, while `undo()` / `redo()` navigate the stack:
211
-
212
- ```typescript
213
- host.executeCommand(command) // execute and push
214
- host.undo() // undo
215
- host.redo() // redo
216
- ```
217
-
218
- ### Event System
219
-
220
- The editor provides type-safe event communication via `emit` / `on` / `off`:
221
-
222
- ```typescript
223
- // Listen for element added
224
- host.on('element:added', (payload) => {
225
- console.log('Element added:', payload.element)
226
- })
227
-
228
- // Listen for selection changed
229
- host.on('selection:changed', (payload) => {
230
- console.log('Selected:', payload.selection)
231
- })
232
- ```
233
-
234
- For the full event list and custom event extension, refer to the API documentation.
235
-
236
- ---
237
-
238
- ## Common Operations
239
-
240
- ### Export / Import JSON
241
-
242
- ```typescript
243
- // Export to JSON string
244
- const json = host.toJSON()
245
-
246
- // Load from JSON string
247
- host.loadJSON(json)
248
- ```
249
-
250
- Use ExportPlugin / ImportPlugin to trigger file download and file picker:
251
-
252
- ```typescript
253
- const exportPlugin = host.getPlugin('export-plugin')
254
- exportPlugin.handleExportJSON() // download .json file
255
- exportPlugin.handleExportImage() // download PNG image
256
- exportPlugin.handleExportPdf() // download PDF document
257
-
258
- const importPlugin = host.getPlugin('import-plugin')
259
- importPlugin.handleImportJSON() // open file picker
260
- ```
261
-
262
- ### Undo / Redo
263
-
264
- ```typescript
265
- host.undo()
266
- host.redo()
267
- ```
268
-
269
- ### Listen to Events
270
-
271
- ```typescript
272
- host.on('selection:changed', (payload) => {
273
- console.log('Selected element IDs:', payload.selection)
274
- })
275
- ```
276
-
277
- ### Add Element (via command)
278
-
279
- ```typescript
280
- import { AddElementCommand } from 'vkedit'
281
-
282
- const elementManager = host.getPlugin('element-manager-plugin')
283
- const element = elementManager.createElement('rect')
284
- host.executeCommand(new AddElementCommand(host, element))
285
- ```
286
-
287
- ### Update Element Property (via command)
288
-
289
- ```typescript
290
- import { UpdatePropertyCommand } from 'vkedit'
291
-
292
- host.executeCommand(
293
- new UpdatePropertyCommand(host, element, 'fill', 'red', 'blue')
294
- )
295
- ```
296
-
297
- ### Batch Operations
298
-
299
- ```typescript
300
- import { BatchCommand, UpdatePropertyCommand } from 'vkedit'
301
-
302
- const batch = new BatchCommand(host, [
303
- new UpdatePropertyCommand(host, el1, 'fill', 'red', 'blue'),
304
- new UpdatePropertyCommand(host, el2, 'fill', 'red', 'green'),
305
- ])
306
- host.executeCommand(batch)
307
- ```
308
-
309
- ---
310
-
311
- ## Use Cases
312
-
313
- | Scenario | Applicable Plugins |
314
- | --- | --- |
315
- | Label template design | QR code, barcode, text, rectangle, table |
316
- | QR code design | QR code, text, rectangle |
317
- | Barcode design | Barcode, text, line |
318
- | Receipt design | Table, text, rectangle, line |
319
- | Business card design | Text, rectangle, line |
320
- | Certificate design | Text, rectangle, table |
321
- | Data visualization | Chart, text, rectangle |
322
-
323
- ---
324
-
325
- ## Available Commands
326
-
327
- | Command | Constructor Params | Description |
328
- | --- | --- | --- |
329
- | `AddElementCommand` | `(host, element)` | Add element |
330
- | `RemoveElementCommand` | `(host, element)` | Remove element |
331
- | `TransformElementCommand` | `(host, element, oldState, newState)` | Transform element (position/size/rotation) |
332
- | `UpdatePropertyCommand` | `(host, element, propertyPath, oldValue, newValue)` | Update property |
333
- | `BatchCommand` | `(host, commands, description?)` | Batch command |
334
- | `AlignElementsCommand` | `(host, alignment, elementIds)` | Align elements |
335
- | `DistributeElementsCommand` | `(host, direction, elementIds)` | Distribute elements |
336
- | `ChangeLayerOrderCommand` | `(host, elementId, direction)` | Change layer order |
337
- | `ClearSelectionCommand` | `(host)` | Clear selection |
107
+ > For full tutorials, API docs, and online examples, visit [docs.vkedit.org](https://docs.vkedit.org).
338
108
 
339
109
  ---
340
110
 
341
111
  ## Links
342
112
 
113
+ - [Website](https://vkedit.org)
114
+ - [Docs](https://docs.vkedit.org)
343
115
  - [npm](https://www.npmjs.com/package/vkedit)
344
116
  - [GitHub Releases](https://github.com/pwg-code/vkedit/releases)
345
117
  - [Vue.js](https://vuejs.org/)
@@ -372,11 +144,11 @@ If vkedit helps you, consider buying the author a coffee.
372
144
  <table>
373
145
  <tr>
374
146
  <td align="center">
375
- <img src="./截图/reward-alipay.png" width="200" alt="Alipay" />
147
+ <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-alipay.png" width="200" alt="Alipay" />
376
148
  <br>Alipay
377
149
  </td>
378
150
  <td align="center">
379
- <img src="./截图/reward-wechat.png" width="200" alt="WeChat Pay" />
151
+ <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-wechat.png" width="200" alt="WeChat Pay" />
380
152
  <br>WeChat
381
153
  </td>
382
154
  </tr>
package/README.md CHANGED
@@ -3,27 +3,28 @@
3
3
  [![NPM Version](https://img.shields.io/npm/v/vkedit?style=flat-square)](https://www.npmjs.com/package/vkedit)
4
4
  [![License](https://img.shields.io/npm/l/vkedit?style=flat-square)](LICENSE)
5
5
  [![Node.js](https://img.shields.io/node/v/vkedit?style=flat-square)](package.json)
6
+ [![在线示例](https://img.shields.io/badge/在线示例-vkedit.org-orange?style=flat-square)](https://vkedit.org)
6
7
 
7
- 基于 Vue 3 Konva.js 的图形编辑器插件库。采用插件化架构,适用于标签模板、二维码、条码、票据、名片、证书等设计场景。
8
+ 基于 Vue 3 Konva.js 的可视化画布设计器组件,采用插件化架构,适用于标签、二维码、条码、票据、名片、证书等模板设计与打印排版场景。
8
9
 
9
- **[English](README.en.md)**
10
+ **[English](README.en.md)** | **[在线示例](https://vkedit.org)** | **[文档](https://docs.vkedit.org)**
10
11
 
11
12
  ---
12
13
 
13
- ![项目预览](./截图/image.png)
14
+ ![项目预览](https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/image.png)
14
15
 
15
16
  ---
16
17
 
17
18
  ## 特性
18
19
 
19
- - **插件化架构** 核心功能与图形元素均以插件形式注册,按需启用
20
- - **7 种图形元素** 矩形、文本、线条、表格、二维码、条形码、图表(ECharts)
21
- - **撤销/重做** 基于命令模式,所有修改操作可逆
22
- - **导入/导出** JSON 序列化、PNG/JPG 图片、PDF 文档
23
- - **对齐与分布** 左/右/上/下/居中对齐、水平/垂直均分
24
- - **标尺与缩放** 毫米级精度标尺、可配置 DPM(每毫米点数)
25
- - **事件驱动** 类型安全的事件系统,插件间松耦合通信
26
- - **TypeScript** 完整类型定义,泛型推断插件与元素类型
20
+ - **插件化架构** - 核心功能与图形元素均以插件形式注册,按需启用
21
+ - **7 种图形元素** - 矩形、文本、线条、表格、二维码、条形码、图表(ECharts)
22
+ - **撤销/重做** - 基于命令模式,所有修改操作可逆
23
+ - **导入/导出** - JSON 序列化、PNG/JPG 图片、PDF 文档
24
+ - **对齐与分布** - 左/右/上/下/居中对齐、水平/垂直均分
25
+ - **标尺与缩放** - 毫米级精度标尺、可配置 DPM(每毫米点数)
26
+ - **事件驱动** - 类型安全的事件系统,插件间松耦合通信
27
+ - **TypeScript** - 完整类型定义,泛型推断插件与元素类型
27
28
 
28
29
  ---
29
30
 
@@ -103,243 +104,14 @@ host.setStatus({
103
104
  </script>
104
105
  ```
105
106
 
106
- ### Vkedit 组件 Props
107
-
108
- | Prop | 类型 | 默认值 | 说明 |
109
- | ------------------- | ------------ | ------ | ---------------- |
110
- | `host` | `EditorHost` | — | 编辑器宿主实例 |
111
- | `showToolbox` | `boolean` | `true` | 显示左侧工具箱 |
112
- | `showPropertyPanel` | `boolean` | `true` | 显示右侧属性面板 |
113
- | `showToolbar` | `boolean` | `true` | 显示顶部工具栏 |
114
-
115
- ---
116
-
117
- ## 配置
118
-
119
- ### createEditorHost 选项
120
-
121
- `createEditorHost(options)` 创建宿主实例并自动安装核心插件。可选插件通过以下选项控制:
122
-
123
- | 选项 | 类型 | 默认值 | 说明 |
124
- | ------------------------- | --------- | ------- | ---------------- |
125
- | `basePropertyPanel` | `boolean` | `false` | 基础元素属性面板 |
126
- | `baseCanvasPropertyPanel` | `boolean` | `true` | 画布属性面板 |
127
- | `exportPlugin` | `boolean` | `true` | 导出插件 |
128
- | `previewPlugin` | `boolean` | `true` | 预览插件 |
129
- | `importPlugin` | `boolean` | `true` | 导入插件 |
130
-
131
- ### 画布状态
132
-
133
- 通过 `host.setStatus()` 更新画布状态,支持部分更新:
134
-
135
- ```typescript
136
- interface IEditorState {
137
- zoom: number // 缩放级别
138
- currentTool: string // 当前工具
139
- snapToGrid: boolean // 网格吸附
140
- showGrid: boolean // 网格显示
141
- width: number // 画布宽度(像素)
142
- height: number // 画布高度(像素)
143
- wmm: number // 画布宽度(毫米)
144
- hmm: number // 画布高度(毫米)
145
- dpm: number // 每毫米点数(DPI / 25.4)
146
- }
147
- ```
148
-
149
- `width`/`height` 与 `wmm`/`hmm` 通过 `dpm` 自动换算。设置 `dpm` 会以当前毫米尺寸重新计算像素宽高。
150
-
151
- ---
152
-
153
- ## 插件列表
154
-
155
- ### 核心插件(createEditorHost 自动安装)
156
-
157
- | 插件 | 说明 |
158
- | ---------------------------- | ---------------- |
159
- | `ToolbarManagerPlugin` | 顶部工具栏管理 |
160
- | `GraphicToolManagerPlugin` | 图形工具管理 |
161
- | `GraphicManagerPlugin` | 图形渲染管理 |
162
- | `PropertyPanelManagerPlugin` | 属性面板动态渲染 |
163
- | `ElementManagerPlugin` | 元素生命周期管理 |
164
- | `SelectionPlugin` | 元素选择与多选 |
165
- | `KeyDownPlugin` | 键盘快捷键 |
166
- | `SnapPlugin` | 网格吸附 |
167
- | `ClipboardPlugin` | 复制/剪切/粘贴 |
168
- | `AlignPlugin` | 对齐与分布 |
169
- | `ContextMenuManagerPlugin` | 右键菜单 |
170
-
171
- ### 功能插件(通过选项启用)
172
-
173
- | 插件 | 选项 | 说明 |
174
- | --------------- | --------------- | --------------------------- |
175
- | `ExportPlugin` | `exportPlugin` | 导出 JSON / PNG / JPG / PDF |
176
- | `ImportPlugin` | `importPlugin` | 导入 JSON 文件 |
177
- | `PreviewPlugin` | `previewPlugin` | 预览与打印预览 |
178
-
179
- ### 图形插件(手动安装)
180
-
181
- | 插件 | 元素类型 | 说明 |
182
- | --------------- | --------- | ----------------------------------- |
183
- | `RectPlugin` | `rect` | 矩形,支持填充、描边 |
184
- | `TextPlugin` | `text` | 文本,支持字体、对齐、样式 |
185
- | `LinePlugin` | `line` | 线条,支持颜色、宽度 |
186
- | `TablePlugin` | `table` | 表格,支持行列、合并单元格、边框 |
187
- | `QrcodePlugin` | `qr` | 二维码,支持前景/背景色 |
188
- | `BarcodePlugin` | `barcode` | 条形码,支持 CODE128、EAN-13 等格式 |
189
- | `ChartPlugin` | `chart` | 图表,基于 ECharts |
190
-
191
- ---
192
-
193
- ## 核心概念
194
-
195
- ### EditorHost
196
-
197
- `EditorHost` 是编辑器的核心宿主类,管理插件、状态、命令和历史记录。通过 `createEditorHost()` 创建实例后,所有操作都围绕 `host` 进行。
198
-
199
- ### 插件系统
200
-
201
- 插件通过 `installPlugin` / `uninstallPlugin` / `getPlugin` 管理。插件需继承 `BasePlugin` 并实现 `onInstall()` 钩子。`getPlugin` 支持泛型推断:
202
-
203
- ```typescript
204
- const rectPlugin = host.getPlugin('rect-plugin') // 自动推断为 RectPlugin
205
- const exportPlugin = host.getPlugin('export-plugin')
206
- ```
207
-
208
- ### 命令模式
209
-
210
- 所有可撤销的操作通过命令实现。`executeCommand()` 执行命令并压入历史栈,`undo()` / `redo()` 在栈中导航:
211
-
212
- ```typescript
213
- host.executeCommand(command) // 执行并入栈
214
- host.undo() // 撤销
215
- host.redo() // 重做
216
- ```
217
-
218
- ### 事件系统
219
-
220
- 编辑器通过 `emit` / `on` / `off` 实现类型安全的事件通信:
221
-
222
- ```typescript
223
- // 监听元素添加
224
- host.on('element:added', (payload) => {
225
- console.log('元素已添加:', payload.element)
226
- })
227
-
228
- // 监听选择变化
229
- host.on('selection:changed', (payload) => {
230
- console.log('选中元素:', payload.selection)
231
- })
232
- ```
233
-
234
- 完整事件列表及自定义事件扩展请参阅 API 文档。
235
-
236
- ---
237
-
238
- ## 常用操作
239
-
240
- ### 导出 / 导入 JSON
241
-
242
- ```typescript
243
- // 导出为 JSON 字符串
244
- const json = host.toJSON()
245
-
246
- // 从 JSON 字符串加载
247
- host.loadJSON(json)
248
- ```
249
-
250
- 通过 ExportPlugin / ImportPlugin 可触发文件下载和文件选择:
251
-
252
- ```typescript
253
- const exportPlugin = host.getPlugin('export-plugin')
254
- exportPlugin.handleExportJSON() // 下载 .json 文件
255
- exportPlugin.handleExportImage() // 下载 PNG 图片
256
- exportPlugin.handleExportPdf() // 下载 PDF 文档
257
-
258
- const importPlugin = host.getPlugin('import-plugin')
259
- importPlugin.handleImportJSON() // 弹出文件选择器
260
- ```
261
-
262
- ### 撤销 / 重做
263
-
264
- ```typescript
265
- host.undo()
266
- host.redo()
267
- ```
268
-
269
- ### 监听事件
270
-
271
- ```typescript
272
- host.on('selection:changed', (payload) => {
273
- console.log('选中元素 ID:', payload.selection)
274
- })
275
- ```
276
-
277
- ### 添加元素(通过命令)
278
-
279
- ```typescript
280
- import { AddElementCommand } from 'vkedit'
281
-
282
- const elementManager = host.getPlugin('element-manager-plugin')
283
- const element = elementManager.createElement('rect')
284
- host.executeCommand(new AddElementCommand(host, element))
285
- ```
286
-
287
- ### 更新元素属性(通过命令)
288
-
289
- ```typescript
290
- import { UpdatePropertyCommand } from 'vkedit'
291
-
292
- host.executeCommand(
293
- new UpdatePropertyCommand(host, element, 'fill', 'red', 'blue')
294
- )
295
- ```
296
-
297
- ### 批量操作
298
-
299
- ```typescript
300
- import { BatchCommand, UpdatePropertyCommand } from 'vkedit'
301
-
302
- const batch = new BatchCommand(host, [
303
- new UpdatePropertyCommand(host, el1, 'fill', 'red', 'blue'),
304
- new UpdatePropertyCommand(host, el2, 'fill', 'red', 'green'),
305
- ])
306
- host.executeCommand(batch)
307
- ```
308
-
309
- ---
310
-
311
- ## 适用场景
312
-
313
- | 场景 | 适用插件 |
314
- | ------------ | -------------------------------- |
315
- | 标签模板设计 | 二维码、条形码、文本、矩形、表格 |
316
- | 二维码设计 | 二维码、文本、矩形 |
317
- | 条码设计 | 条形码、文本、线条 |
318
- | 票据设计 | 表格、文本、矩形、线条 |
319
- | 名片设计 | 文本、矩形、线条 |
320
- | 证书设计 | 文本、矩形、表格 |
321
- | 数据可视化 | 图表、文本、矩形 |
322
-
323
- ---
324
-
325
- ## 可用命令
326
-
327
- | 命令 | 构造参数 | 说明 |
328
- | --------------------------- | --------------------------------------------------- | -------------------------- |
329
- | `AddElementCommand` | `(host, element)` | 添加元素 |
330
- | `RemoveElementCommand` | `(host, element)` | 移除元素 |
331
- | `TransformElementCommand` | `(host, element, oldState, newState)` | 变换元素(位置/大小/旋转) |
332
- | `UpdatePropertyCommand` | `(host, element, propertyPath, oldValue, newValue)` | 更新属性 |
333
- | `BatchCommand` | `(host, commands, description?)` | 批量命令 |
334
- | `AlignElementsCommand` | `(host, alignment, elementIds)` | 对齐元素 |
335
- | `DistributeElementsCommand` | `(host, direction, elementIds)` | 分布元素 |
336
- | `ChangeLayerOrderCommand` | `(host, elementId, direction)` | 调整图层顺序 |
337
- | `ClearSelectionCommand` | `(host)` | 清空选择 |
107
+ > 完整教程、API 文档与在线示例请访问 [docs.vkedit.org](https://docs.vkedit.org)。
338
108
 
339
109
  ---
340
110
 
341
111
  ## 链接
342
112
 
113
+ - [官网](https://vkedit.org)
114
+ - [文档](https://docs.vkedit.org)
343
115
  - [npm](https://www.npmjs.com/package/vkedit)
344
116
  - [GitHub Releases](https://github.com/pwg-code/vkedit/releases)
345
117
  - [Vue.js](https://vuejs.org/)
@@ -370,11 +142,11 @@ host.executeCommand(batch)
370
142
  <table>
371
143
  <tr>
372
144
  <td align="center">
373
- <img src="./截图/reward-alipay.png" width="200" alt="支付宝打赏" />
145
+ <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-alipay.png" width="200" alt="支付宝打赏" />
374
146
  <br>支付宝
375
147
  </td>
376
148
  <td align="center">
377
- <img src="./截图/reward-wechat.png" width="200" alt="微信打赏" />
149
+ <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-wechat.png" width="200" alt="微信打赏" />
378
150
  <br>微信
379
151
  </td>
380
152
  </tr>
@@ -6,4 +6,4 @@ export interface IOptions {
6
6
  previewPlugin?: boolean;
7
7
  importPlugin?: boolean;
8
8
  }
9
- export declare function createEditorHost({ basePropertyPanel, baseCanvasPropertyPanel, exportPlugin, previewPlugin, importPlugin, }: IOptions): EditorHost;
9
+ export declare function createEditorHost({ basePropertyPanel, baseCanvasPropertyPanel, exportPlugin, previewPlugin, importPlugin, }?: IOptions): EditorHost;
@@ -66378,7 +66378,7 @@ endobj\r
66378
66378
  var u = l.getContext("2d");
66379
66379
  u.fillStyle = "#fff", u.fillRect(0, 0, l.width, l.height);
66380
66380
  var f = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, c = this;
66381
- return (vr.canvg ? Promise.resolve(vr.canvg) : import("./index.es-CBeYPr_x.js")).catch(function(h) {
66381
+ return (vr.canvg ? Promise.resolve(vr.canvg) : import("./index.es-CEBX1sXY.js")).catch(function(h) {
66382
66382
  return Promise.reject(new Error("Could not load canvg: " + h));
66383
66383
  }).then(function(h) {
66384
66384
  return h.default ? h.default : h;
@@ -72725,7 +72725,7 @@ function CAe({
72725
72725
  exportPlugin: e = !0,
72726
72726
  previewPlugin: n = !0,
72727
72727
  importPlugin: i = !0
72728
- }) {
72728
+ } = {}) {
72729
72729
  const a = new w5e();
72730
72730
  return a.installPlugin("toolbar-manager-plugin", b5e).installPlugin("graphic-tool-manager-plugin", fSe).installPlugin("graphic-manager-plugin", uSe).installPlugin("property-panel-manager-plugin", ySe).installPlugin("element-manager-plugin", ybe).installPlugin("keydown-plugin", Iw).installPlugin("selection-plugin", XM).installPlugin("snap-plugin", o5e).installPlugin("clipboard-plugin", db).installPlugin("align-plugin", CK).installPlugin("context-menu-manager-plugin", mbe), r && a.emit("property-panel:registered", {
72731
72731
  render: () => _Se,
@@ -1,4 +1,4 @@
1
- import { c as Da, _ as Va, g as il } from "./index-xKPujfCD.js";
1
+ import { c as Da, _ as Va, g as il } from "./index-Bisex1w7.js";
2
2
  var fn = {}, cn = {}, cr, vn;
3
3
  function Q() {
4
4
  if (vn) return cr;
package/dist/vkedit.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { A as s, J as n, e as t, K as o, O as l, P as r, L as i, M as m, N as P, B as u, f as p, aI as g, aJ as d, aK as C, b as T, aH as E, h as c, d as y, Y as h, Z as S, S as B, W as b, X as x, a as M, Q as k, C as L, $ as V, aG as R, D as A, E as I, a0 as v, aM as H, aL as w, a1 as D, a2 as G, a3 as N, a4 as Q, a5 as O, a6 as U, a7 as f, ab as F, ac as K, a8 as j, a9 as q, aa as z, ad as J, ae as Z, af as _, ag as W, ah as X, ai as Y, aj as $, an as aa, ao as ea, ak as sa, al as na, am as ta, R as oa, ap as la, ar as ra, aq as ia, as as ma, aw as Pa, ax as ua, ay as pa, at as ga, au as da, av as Ca, aC as Ta, aD as Ea, aE as ca, i as ya, az as ha, aA as Sa, aB as Ba, aF as ba, T as xa, U as Ma, j as ka, r as La, s as Va, l as Ra, V as Aa, q as Ia, p as va, m as Ha, n as wa, o as Da, k as Ga, t as Na, u as Qa, v as Oa, w as Ua, x as fa, y as Fa, z as Ka, F as ja, H as qa, G as za, I as Ja } from "./index-xKPujfCD.js";
1
+ import { A as s, J as n, e as t, K as o, O as l, P as r, L as i, M as m, N as P, B as u, f as p, aI as g, aJ as d, aK as C, b as T, aH as E, h as c, d as y, Y as h, Z as S, S as B, W as b, X as x, a as M, Q as k, C as L, $ as V, aG as R, D as A, E as I, a0 as v, aM as H, aL as w, a1 as D, a2 as G, a3 as N, a4 as Q, a5 as O, a6 as U, a7 as f, ab as F, ac as K, a8 as j, a9 as q, aa as z, ad as J, ae as Z, af as _, ag as W, ah as X, ai as Y, aj as $, an as aa, ao as ea, ak as sa, al as na, am as ta, R as oa, ap as la, ar as ra, aq as ia, as as ma, aw as Pa, ax as ua, ay as pa, at as ga, au as da, av as Ca, aC as Ta, aD as Ea, aE as ca, i as ya, az as ha, aA as Sa, aB as Ba, aF as ba, T as xa, U as Ma, j as ka, r as La, s as Va, l as Ra, V as Aa, q as Ia, p as va, m as Ha, n as wa, o as Da, k as Ga, t as Na, u as Qa, v as Oa, w as Ua, x as fa, y as Fa, z as Ka, F as ja, H as qa, G as za, I as Ja } from "./index-Bisex1w7.js";
2
2
  export {
3
3
  s as AddElementCommand,
4
4
  n as Align,
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "vkedit",
3
- "version": "3.2.4",
3
+ "version": "3.2.6",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "engines": {
7
7
  "node": "^20.19.0 || >=22.12.0"
8
8
  },
9
- "description": "A powerful and extensible graphic editor plugin library based on Vue 3 and Konva.js for label template design, QR code design, barcode design, receipt design, business card design, certificate design, and more. Supports rectangle, text, line, table, QR code, barcode, and chart elements with plugin architecture, undo/redo, import/export to JSON/PNG/JPG/PDF, alignment tools, and canvas manipulation.",
9
+ "description": "A visual canvas designer component built on Vue 3 and Konva.js with a plugin-based architecture, for label, QR code, barcode, receipt, business card, and certificate template design and print layout. Supports rectangle, text, line, table, QR code, barcode, and chart elements with undo/redo, import/export to JSON/PNG/JPG/PDF, alignment tools, and canvas manipulation.",
10
10
  "module": "dist/vkedit.es.js",
11
11
  "files": [
12
12
  "dist",
@@ -65,10 +65,15 @@
65
65
  "component"
66
66
  ],
67
67
  "license": "MIT",
68
+ "author": "pwg <168715824@qq.com>",
69
+ "homepage": "https://vkedit.org",
68
70
  "repository": {
69
71
  "type": "git",
70
72
  "url": "https://github.com/pwg-code/vkedit.git"
71
73
  },
74
+ "bugs": {
75
+ "url": "https://github.com/pwg-code/vkedit/issues"
76
+ },
72
77
  "devDependencies": {
73
78
  "@iconify/vue": "^5.0.0",
74
79
  "@tsconfig/node22": "^22.0.2",