@zhangqingcq/vgce 0.1.7 → 0.1.8
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/README.md +118 -90
- package/dist/style.css +1 -1
- package/dist/vgce.js +10897 -10890
- package/dist/vgce.umd.cjs +33 -33
- package/package.json +1 -1
- package/src/assets/base.less +69 -68
- package/src/assets/variables.less +6 -6
- package/src/components/svg-editor/center-panel.vue +3 -2
- package/src/components/svg-editor/index.vue +7 -5
- package/src/components/svg-viewer.vue +7 -4
- package/src/utils/index.ts +3 -2
package/README.md
CHANGED
@@ -4,94 +4,122 @@ Vector graphics configure editor. 矢量图组态编辑器。
|
|
4
4
|
|
5
5
|
## Guide
|
6
6
|
|
7
|
-
1. install
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
2.
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
7
|
+
### 1. install
|
8
|
+
|
9
|
+
```
|
10
|
+
npm i @zhangqingcq/vgce element-plus@^2.3.8 ace-builds@^1.14.0 lodash-es^4.17.21 vue-echarts@^6.5.1 animate.css@^4.1.1
|
11
|
+
```
|
12
|
+
|
13
|
+
or
|
14
|
+
|
15
|
+
```
|
16
|
+
pnpm add @zhangqingcq/vgce element-plus@^2.3.8 ace-builds@^1.14.0 lodash-es^4.17.21 vue-echarts@^6.5.1 animate.css@^4.1.1
|
17
|
+
```
|
18
|
+
|
19
|
+
### 2. change main.ts or main.js
|
20
|
+
|
21
|
+
```
|
22
|
+
//main.js or main.ts
|
23
|
+
|
24
|
+
import '@zhangqingcq/vgce/dist/style.css'
|
25
|
+
```
|
26
|
+
|
27
|
+
### 3. use editor
|
28
|
+
```
|
29
|
+
<script setup lang="ts">
|
30
|
+
import {SvgEditor} from '@zhangqingcq/vgce'
|
31
|
+
|
32
|
+
function preview(d: any) {
|
33
|
+
//save d and send it to SvgViewer's data
|
34
|
+
}
|
35
|
+
</script>
|
36
|
+
<template>
|
37
|
+
<SvgEditor @onPreview="preview"/>
|
38
|
+
</template>
|
39
|
+
```
|
40
|
+
### 4. use viewer
|
41
|
+
```
|
42
|
+
<script setup lang="ts">
|
43
|
+
import {SvgViewer} from '@zhangqingcq/vgce'
|
44
|
+
</script>
|
45
|
+
<template>
|
46
|
+
<SvgViewer :data="xxx"/>
|
47
|
+
</template>
|
48
|
+
```
|
49
|
+
### 5. custom toolbar
|
50
|
+
|
51
|
+
- copy `src/config/` and change as you want
|
52
|
+
|
53
|
+
- put svg files into `src/asset/svgs` , then file name need to be same with config.name
|
54
|
+
|
55
|
+
- put custom vue components file into `src/config/files`, then import in `src/config/index.ts` and export with `vueComp`
|
56
|
+
|
57
|
+
- PS: you have to install `vite-plugin-svg-icons` plugin to append your svg to html dom.
|
58
|
+
|
59
|
+
```
|
60
|
+
// editor
|
61
|
+
|
62
|
+
<script setup lang="ts">
|
63
|
+
import {SvgEditor} from '@zhangqingcq/vgce'
|
64
|
+
import {config,vueComp} from '@/config'
|
65
|
+
</script>
|
66
|
+
<template>
|
67
|
+
<SvgEditor :customToolbar="config" :vueComp="vueComp"/>
|
68
|
+
</template>
|
69
|
+
```
|
70
|
+
|
71
|
+
```
|
72
|
+
//viewer
|
73
|
+
|
74
|
+
<script setup lang="ts">
|
75
|
+
import {SvgViewer} from '@zhangqingcq/vgce'
|
76
|
+
import {vueComp} from '@/config'
|
77
|
+
</script>
|
78
|
+
<template>
|
79
|
+
<SvgViewer :vueComp="vueComp" :data="xxx"/>
|
80
|
+
</template>
|
81
|
+
```
|
82
|
+
|
83
|
+
### 6. how to use `vite-plugin-svg-icons`
|
84
|
+
|
85
|
+
- `npm i vite-plugin-svg-icons -D` or `pnpm add vite-plugin-svg-icons -D`
|
86
|
+
- change `vite.config.ts`
|
87
|
+
|
88
|
+
````
|
89
|
+
// vite.config.ts
|
90
|
+
|
91
|
+
import { fileURLToPath, URL } from 'node:url'
|
92
|
+
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
93
|
+
|
94
|
+
export default defineConfig({
|
95
|
+
plugins: [
|
96
|
+
xxx,
|
97
|
+
createSvgIconsPlugin({
|
98
|
+
iconDirs: [fileURLToPath(new URL('./src/assets/svgs', import.meta.url))],
|
99
|
+
symbolId: 'svg-[name]',
|
100
|
+
svgoOptions: false,
|
101
|
+
customDomId: '__svg__icons__dom__'//your id, do not use this id!
|
102
|
+
})
|
103
|
+
],
|
104
|
+
xxx
|
105
|
+
})
|
89
106
|
```
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
107
|
+
````
|
108
|
+
|
109
|
+
- change `main.ts`
|
110
|
+
|
111
|
+
```
|
112
|
+
// main.ts
|
113
|
+
|
114
|
+
import 'virtual:svg-icons-register'
|
115
|
+
```
|
116
|
+
|
117
|
+
- PS: if there is error: `Cannot find module ‘fast-glob’`,then run `npm i fast-glob -D` or `pnpm add fast-glob -D`
|
118
|
+
|
119
|
+
### 7. example
|
120
|
+
|
121
|
+
- download [VGCE](https://github.com/RickyHeaven/VGCE.git)
|
122
|
+
|
123
|
+
- `pnpm i` or `npm i`
|
124
|
+
|
125
|
+
- `pnpm dev` or `npm run dev`
|