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