vkedit 2.8.5 → 2.8.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.
Files changed (3) hide show
  1. package/README.en.md +109 -89
  2. package/README.md +108 -90
  3. package/package.json +31 -2
package/README.en.md CHANGED
@@ -22,6 +22,113 @@ A powerful, extensible graphic editor plugin library built on Vue 3 and Konva.js
22
22
 
23
23
  ---
24
24
 
25
+
26
+ ## 🚀 Installation and Usage
27
+
28
+ ### Environment Requirements
29
+
30
+ - **Node.js**: ^20.19.0 || >=22.12.0
31
+ - **Package Manager**: pnpm 10.19.0+
32
+
33
+ ### Installation
34
+
35
+ ```bash
36
+ # Using npm
37
+ npm install vkedit vue konva vue-konva pinia
38
+
39
+ # Using pnpm
40
+ pnpm add vkedit vue konva vue-konva pinia
41
+
42
+ # Using yarn
43
+ yarn add vkedit vue konva vue-konva pinia
44
+ ```
45
+
46
+ ### Entry File Example (main.ts)
47
+
48
+ In the project entry file `main.ts`, you need to properly configure the Vue application, Pinia state management, and VueKonva:
49
+
50
+ ```typescript
51
+ import { createApp } from 'vue'
52
+ import { createPinia } from 'pinia'
53
+ import App from './App.vue'
54
+ import VueKonva from 'vue-konva'
55
+ import 'vkedit/dist/vkedit.css' // Import vkedit styles
56
+
57
+ const app = createApp(App)
58
+
59
+ app.use(createPinia())
60
+ app.use(VueKonva)
61
+ app.mount('#app')
62
+ ```
63
+
64
+ ### Basic Usage Example
65
+
66
+ ```vue
67
+ <template>
68
+ <Vkedit
69
+ :host="host"
70
+ :show-toolbox="true"
71
+ :show-property-panel="true"
72
+ :show-toolbar="true"
73
+ />
74
+ </template>
75
+
76
+ <script setup lang="ts">
77
+ import { createEditorHost, Vkedit } from 'vkedit'
78
+ import {
79
+ RectPlugin,
80
+ TextPlugin,
81
+ TablePlugin,
82
+ QrcodePlugin,
83
+ BarcodePlugin,
84
+ ChartPlugin,
85
+ LinePlugin
86
+ } from 'vkedit'
87
+
88
+ // Create editor host
89
+ const host = createEditorHost({
90
+ basePropertyPanel: false,
91
+ baseCanvasPropertyPanel: true,
92
+ exportPlugin: true,
93
+ previewPlugin: true,
94
+ importPlugin: true
95
+ })
96
+
97
+ // Install graphic plugins
98
+ host
99
+ .installPlugin('rect-plugin', RectPlugin)
100
+ .installPlugin('text-plugin', TextPlugin)
101
+ .installPlugin('table-plugin', TablePlugin)
102
+ .installPlugin('qr-plugin', QrcodePlugin)
103
+ .installPlugin('barcode-plugin', BarcodePlugin)
104
+ .installPlugin('chart-plugin', ChartPlugin)
105
+ .installPlugin('line-plugin', LinePlugin)
106
+
107
+ // Set canvas dimensions (A4 paper)
108
+ host.setStatus({
109
+ dpm: 8, // Dots per millimeter (DPI / 25.4)
110
+ width: 210 * 8, // A4 width 210mm
111
+ height: 297 * 8, // A4 height 297mm
112
+ zoom: 0.4 // Zoom level
113
+ })
114
+ </script>
115
+ ```
116
+
117
+ ### Optional Configuration
118
+
119
+ The `createEditorHost` function accepts the following configuration options:
120
+
121
+ | Option | Type | Default | Description |
122
+ | ------------------------- | ------- | ------- | ---------------------------------- |
123
+ | `basePropertyPanel` | boolean | false | Enable base element property panel |
124
+ | `baseCanvasPropertyPanel` | boolean | true | Enable canvas property panel |
125
+ | `exportPlugin` | boolean | true | Enable export plugin |
126
+ | `previewPlugin` | boolean | true | Enable preview plugin |
127
+ | `importPlugin` | boolean | true | Enable import plugin |
128
+
129
+ ---
130
+
131
+
25
132
  ## 📖 Project Overview
26
133
 
27
134
  **vkedit** is a plugin-based graphic editor library built on Vue 3 and Konva.js. It provides a complete set of graphic editing features, including support for multiple graphic elements, a plugin system architecture, undo/redo mechanisms, and import/export functionality.
@@ -381,93 +488,6 @@ vkedit/
381
488
 
382
489
  ---
383
490
 
384
- ## 🚀 Installation and Usage
385
-
386
- ### Environment Requirements
387
-
388
- - **Node.js**: ^20.19.0 || >=22.12.0
389
- - **Package Manager**: pnpm 10.19.0+
390
-
391
- ### Installation
392
-
393
- ```bash
394
- # Using npm
395
- npm install vkedit vue konva vue-konva pinia
396
-
397
- # Using pnpm
398
- pnpm add vkedit vue konva vue-konva pinia
399
-
400
- # Using yarn
401
- yarn add vkedit vue konva vue-konva pinia
402
- ```
403
-
404
- ### Basic Usage Example
405
-
406
- ```vue
407
- <template>
408
- <Vkedit
409
- :host="host"
410
- :show-toolbox="true"
411
- :show-property-panel="true"
412
- :show-toolbar="true"
413
- />
414
- </template>
415
-
416
- <script setup lang="ts">
417
- import { createEditorHost, Vkedit } from 'vkedit'
418
- import {
419
- RectPlugin,
420
- TextPlugin,
421
- TablePlugin,
422
- QrcodePlugin,
423
- BarcodePlugin,
424
- ChartPlugin,
425
- LinePlugin
426
- } from 'vkedit'
427
-
428
- // Create editor host
429
- const host = createEditorHost({
430
- basePropertyPanel: false,
431
- baseCanvasPropertyPanel: true,
432
- exportPlugin: true,
433
- previewPlugin: true,
434
- importPlugin: true
435
- })
436
-
437
- // Install graphic plugins
438
- host
439
- .installPlugin('rect-plugin', RectPlugin)
440
- .installPlugin('text-plugin', TextPlugin)
441
- .installPlugin('table-plugin', TablePlugin)
442
- .installPlugin('qr-plugin', QrcodePlugin)
443
- .installPlugin('barcode-plugin', BarcodePlugin)
444
- .installPlugin('chart-plugin', ChartPlugin)
445
- .installPlugin('line-plugin', LinePlugin)
446
-
447
- // Set canvas dimensions (A4 paper)
448
- host.setStatus({
449
- dpm: 8, // Dots per millimeter (DPI / 25.4)
450
- width: 210 * 8, // A4 width 210mm
451
- height: 297 * 8, // A4 height 297mm
452
- zoom: 0.4 // Zoom level
453
- })
454
- </script>
455
- ```
456
-
457
- ### Optional Configuration
458
-
459
- The `createEditorHost` function accepts the following configuration options:
460
-
461
- | Option | Type | Default | Description |
462
- | ------------------------- | ------- | ------- | ---------------------------------- |
463
- | `basePropertyPanel` | boolean | false | Enable base element property panel |
464
- | `baseCanvasPropertyPanel` | boolean | true | Enable canvas property panel |
465
- | `exportPlugin` | boolean | true | Enable export plugin |
466
- | `previewPlugin` | boolean | true | Enable preview plugin |
467
- | `importPlugin` | boolean | true | Enable import plugin |
468
-
469
- ---
470
-
471
491
  ## 🔌 Available Plugin List
472
492
 
473
493
  ### Core Plugins
@@ -907,7 +927,7 @@ host.executeCommand(batchCommand)
907
927
 
908
928
  ```bash
909
929
  # Clone repository
910
- git clone https://github.com/your-org/vkedit.git
930
+ git clone https://github.com/pwg-code/vkedit.git
911
931
  cd vkedit
912
932
 
913
933
  # Install dependencies (recommended pnpm)
@@ -1130,7 +1150,7 @@ chore: build/tool changes
1130
1150
  - Undo/Redo mechanism
1131
1151
 
1132
1152
  ### Version History
1133
- For detailed version history, see [GitHub Releases](https://github.com/your-org/vkedit/releases)
1153
+ For detailed version history, see [GitHub Releases](https://github.com/pwg-code/vkedit/releases)
1134
1154
 
1135
1155
  ---
1136
1156
 
package/README.md CHANGED
@@ -30,12 +30,117 @@
30
30
 
31
31
  vkedit 特别适用于**标签模板设计**、**二维码设计**、**条码设计**、**票据设计**、**名片设计**、**证书设计**等多种图形设计场景，为开发者提供强大的可视化设计能力。
32
32
 
33
- - **当前版本**: 2.8.5
34
33
  - **许可证**: MIT
35
34
  - **Node.js 要求**: ^20.19.0 || >=22.12.0
36
35
 
37
36
  ---
38
37
 
38
+ ## 🚀 安装与使用
39
+
40
+ ### 环境要求
41
+
42
+ - **Node.js**: ^20.19.0 || >=22.12.0
43
+ - **包管理器**: pnpm 10.19.0+
44
+
45
+ ### 安装
46
+
47
+ ```bash
48
+ # 使用 npm
49
+ npm install vkedit vue konva vue-konva pinia
50
+
51
+ # 使用 pnpm
52
+ pnpm add vkedit vue konva vue-konva pinia
53
+
54
+ # 使用 yarn
55
+ yarn add vkedit vue konva vue-konva pinia
56
+ ```
57
+
58
+ ### 入口文件示例（main.ts）
59
+
60
+ 在项目入口文件 `main.ts` 中，需要正确配置 Vue 应用、Pinia 状态管理和 VueKonva：
61
+
62
+ ```typescript
63
+ import { createApp } from 'vue'
64
+ import { createPinia } from 'pinia'
65
+ import App from './App.vue'
66
+ import VueKonva from 'vue-konva'
67
+ import 'vkedit/dist/vkedit.css' // 导入 vkedit 样式
68
+
69
+ const app = createApp(App)
70
+
71
+ app.use(createPinia())
72
+ app.use(VueKonva)
73
+ app.mount('#app')
74
+ ```
75
+
76
+ ### 基础使用示例
77
+
78
+ ```vue
79
+ <template>
80
+ <Vkedit
81
+ :host="host"
82
+ :show-toolbox="true"
83
+ :show-property-panel="true"
84
+ :show-toolbar="true"
85
+ />
86
+ </template>
87
+
88
+ <script setup lang="ts">
89
+ import { createEditorHost, Vkedit } from 'vkedit'
90
+ import {
91
+ RectPlugin,
92
+ TextPlugin,
93
+ TablePlugin,
94
+ QrcodePlugin,
95
+ BarcodePlugin,
96
+ ChartPlugin,
97
+ LinePlugin
98
+ } from 'vkedit'
99
+
100
+ // 创建编辑器宿主
101
+ const host = createEditorHost({
102
+ basePropertyPanel: false,
103
+ baseCanvasPropertyPanel: true,
104
+ exportPlugin: true,
105
+ previewPlugin: true,
106
+ importPlugin: true
107
+ })
108
+
109
+ // 安装图形插件
110
+ host
111
+ .installPlugin('rect-plugin', RectPlugin)
112
+ .installPlugin('text-plugin', TextPlugin)
113
+ .installPlugin('table-plugin', TablePlugin)
114
+ .installPlugin('qr-plugin', QrcodePlugin)
115
+ .installPlugin('barcode-plugin', BarcodePlugin)
116
+ .installPlugin('chart-plugin', ChartPlugin)
117
+ .installPlugin('line-plugin', LinePlugin)
118
+
119
+ // 设置画布尺寸（A4 纸张）
120
+ host.setStatus({
121
+ dpm: 8, // 每毫米点数 (DPI / 25.4)
122
+ width: 210 * 8, // A4 宽度 210mm
123
+ height: 297 * 8, // A4 高度 297mm
124
+ zoom: 0.4 // 缩放级别
125
+ })
126
+ </script>
127
+ ```
128
+
129
+ ### 可选配置说明
130
+
131
+ `createEditorHost` 函数接受以下配置选项：
132
+
133
+ | 选项 | 类型 | 默认值 | 说明 |
134
+ | ------------------------- | ------- | ------ | ------------------------ |
135
+ | `basePropertyPanel` | boolean | false | 是否启用基础元素属性面板 |
136
+ | `baseCanvasPropertyPanel` | boolean | true | 是否启用画布属性面板 |
137
+ | `exportPlugin` | boolean | true | 是否启用导出插件 |
138
+ | `previewPlugin` | boolean | true | 是否启用预览插件 |
139
+ | `importPlugin` | boolean | true | 是否启用导入插件 |
140
+
141
+ ---
142
+
143
+
39
144
  ## ✨ 核心特性
40
145
 
41
146
  - **🔌 插件化架构**: 灵活的插件系统，可按需启用或禁用功能模块
@@ -381,93 +486,6 @@ vkedit/
381
486
 
382
487
  ---
383
488
 
384
- ## 🚀 安装与使用
385
-
386
- ### 环境要求
387
-
388
- - **Node.js**: ^20.19.0 || >=22.12.0
389
- - **包管理器**: pnpm 10.19.0+
390
-
391
- ### 安装
392
-
393
- ```bash
394
- # 使用 npm
395
- npm install vkedit vue konva vue-konva pinia
396
-
397
- # 使用 pnpm
398
- pnpm add vkedit vue konva vue-konva pinia
399
-
400
- # 使用 yarn
401
- yarn add vkedit vue konva vue-konva pinia
402
- ```
403
-
404
- ### 基础使用示例
405
-
406
- ```vue
407
- <template>
408
- <Vkedit
409
- :host="host"
410
- :show-toolbox="true"
411
- :show-property-panel="true"
412
- :show-toolbar="true"
413
- />
414
- </template>
415
-
416
- <script setup lang="ts">
417
- import { createEditorHost, Vkedit } from 'vkedit'
418
- import {
419
- RectPlugin,
420
- TextPlugin,
421
- TablePlugin,
422
- QrcodePlugin,
423
- BarcodePlugin,
424
- ChartPlugin,
425
- LinePlugin
426
- } from 'vkedit'
427
-
428
- // 创建编辑器宿主
429
- const host = createEditorHost({
430
- basePropertyPanel: false,
431
- baseCanvasPropertyPanel: true,
432
- exportPlugin: true,
433
- previewPlugin: true,
434
- importPlugin: true
435
- })
436
-
437
- // 安装图形插件
438
- host
439
- .installPlugin('rect-plugin', RectPlugin)
440
- .installPlugin('text-plugin', TextPlugin)
441
- .installPlugin('table-plugin', TablePlugin)
442
- .installPlugin('qr-plugin', QrcodePlugin)
443
- .installPlugin('barcode-plugin', BarcodePlugin)
444
- .installPlugin('chart-plugin', ChartPlugin)
445
- .installPlugin('line-plugin', LinePlugin)
446
-
447
- // 设置画布尺寸（A4 纸张）
448
- host.setStatus({
449
- dpm: 8, // 每毫米点数 (DPI / 25.4)
450
- width: 210 * 8, // A4 宽度 210mm
451
- height: 297 * 8, // A4 高度 297mm
452
- zoom: 0.4 // 缩放级别
453
- })
454
- </script>
455
- ```
456
-
457
- ### 可选配置说明
458
-
459
- `createEditorHost` 函数接受以下配置选项：
460
-
461
- | 选项 | 类型 | 默认值 | 说明 |
462
- | ------------------------- | ------- | ------ | ------------------------ |
463
- | `basePropertyPanel` | boolean | false | 是否启用基础元素属性面板 |
464
- | `baseCanvasPropertyPanel` | boolean | true | 是否启用画布属性面板 |
465
- | `exportPlugin` | boolean | true | 是否启用导出插件 |
466
- | `previewPlugin` | boolean | true | 是否启用预览插件 |
467
- | `importPlugin` | boolean | true | 是否启用导入插件 |
468
-
469
- ---
470
-
471
489
  ## 🔌 可用插件列表
472
490
 
473
491
  ### 核心插件
@@ -907,7 +925,7 @@ host.executeCommand(batchCommand)
907
925
 
908
926
  ```bash
909
927
  # 克隆仓库
910
- git clone https://github.com/your-org/vkedit.git
928
+ git clone https://github.com/pwg-code/vkedit.git
911
929
  cd vkedit
912
930
 
913
931
  # 安装依赖（推荐使用 pnpm）
@@ -1130,7 +1148,7 @@ chore: 构建/工具变动
1130
1148
  - 撤销/重做机制
1131
1149
 
1132
1150
  ### 版本历史
1133
- 详细版本历史请查看 [GitHub Releases](https://github.com/your-org/vkedit/releases)
1151
+ 详细版本历史请查看 [GitHub Releases](https://github.com/pwg-code/vkedit/releases)
1134
1152
 
1135
1153
  ---
1136
1154
 
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "vkedit",
3
- "version": "2.8.5",
3
+ "version": "2.8.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": "Vue3 Konva Plug-in designer",
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.",
10
10
  "module": "dist/vkedit.es.js",
11
11
  "files": [
12
12
  "dist",
@@ -34,7 +34,36 @@
34
34
  },
35
35
  "keywords": [
36
36
  "vue3",
37
+ "vue",
38
+ "konva",
39
+ "vue-konva",
40
+ "canvas",
37
41
  "typescript",
42
+ "editor",
43
+ "graphic-editor",
44
+ "designer",
45
+ "label-designer",
46
+ "barcode",
47
+ "qrcode",
48
+ "chart",
49
+ "table",
50
+ "print",
51
+ "receipt",
52
+ "invoice",
53
+ "business-card",
54
+ "certificate",
55
+ "plugin",
56
+ "svg",
57
+ "pdf",
58
+ "export",
59
+ "import",
60
+ "undo",
61
+ "redo",
62
+ "alignment",
63
+ "ruler",
64
+ "zoom",
65
+ "drag",
66
+ "pinia",
38
67
  "component"
39
68
  ],
40
69
  "license": "MIT",