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 +21 -21
- package/README.en.md +9 -237
- package/README.md +17 -245
- package/dist/create-host.d.ts +1 -1
- package/dist/{index-xKPujfCD.js → index-Bisex1w7.js} +2 -2
- package/dist/{index.es-CBeYPr_x.js → index.es-CEBX1sXY.js} +1 -1
- package/dist/vkedit.es.js +1 -1
- package/package.json +7 -2
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
|
[](https://www.npmjs.com/package/vkedit)
|
|
4
4
|
[](LICENSE)
|
|
5
5
|
[](package.json)
|
|
6
|
+
[](https://vkedit.org)
|
|
6
7
|
|
|
7
|
-
A
|
|
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
|
-

|
|
14
15
|
|
|
15
16
|
---
|
|
16
17
|
|
|
@@ -103,243 +104,14 @@ host.setStatus({
|
|
|
103
104
|
</script>
|
|
104
105
|
```
|
|
105
106
|
|
|
106
|
-
|
|
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="
|
|
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="
|
|
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
|
[](https://www.npmjs.com/package/vkedit)
|
|
4
4
|
[](LICENSE)
|
|
5
5
|
[](package.json)
|
|
6
|
+
[](https://vkedit.org)
|
|
6
7
|
|
|
7
|
-
基于 Vue 3
|
|
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
|
-

|
|
14
15
|
|
|
15
16
|
---
|
|
16
17
|
|
|
17
18
|
## 特性
|
|
18
19
|
|
|
19
|
-
- **插件化架构**
|
|
20
|
-
- **7 种图形元素**
|
|
21
|
-
- **撤销/重做**
|
|
22
|
-
- **导入/导出**
|
|
23
|
-
- **对齐与分布**
|
|
24
|
-
- **标尺与缩放**
|
|
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
|
-
|
|
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="
|
|
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="
|
|
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>
|
package/dist/create-host.d.ts
CHANGED
|
@@ -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, }
|
|
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-
|
|
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,
|
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-
|
|
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.
|
|
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
|
|
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",
|