# VGCE

Vector graphics configure editor. 矢量图组态编辑器。

## Guide

1. `npm i @zhangqingcq/vgce` or `pnpm add @zhangqingcq/vgce`

2. `import '@zhangqingcq/vgce/dist/style.css'` in main.ts

3. editor
      ```
         <script setup lang="ts">
           import {SvgEditor} from '@zhangqingcq/vgce'
           
           function preview(d: any) {
             //save d and send it to SvgViewer's data 
           }
         </script>
         <template>
           <SvgEditor @onPreview="preview"/>
         </template>
      ```
4. viewer
    ```
       <script setup lang="ts">
         import {SvgViewer} from '@zhangqingcq/vgce'
       </script>
       <template>
         <SvgViewer :data="xxx"/>
       </template>
    ```
5. custom toolbar
   - copy `src/config/` and change as you want

   - put svg files into `src/asset/svgs` , then file name need to be same with config.name

   - put custom parts file into `src/config/files`, then import in `src/config/index.ts`  and export with `vueComp`

   - PS: you have to install `vite-plugin-svg-icons` plugin to append your svgs to html dom.
     ```
     <script setup lang="ts">
       import {SvgEditor} from '@zhangqingcq/vgce'
       import {config} from '@/config'
     </script>
     <template>
       <SvgEditor :customToolbar="config"/>
     </template>
     ```
6. how to use `vite-plugin-svg-icons`
   - `npm i vite-plugin-svg-icons -D` or `pnpm add vite-plugin-svg-icons -D`
   - change `vite.config.ts`
     ```
     // vite.config.ts

          import { fileURLToPath, URL } from 'node:url'
          import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    
          export default defineConfig({
            plugins: [
              xxx,
              createSvgIconsPlugin({
                iconDirs: [fileURLToPath(new URL('./src/assets/svgs', import.meta.url))], 
                symbolId: 'svg-[name]',
                svgoOptions: false,
                customDomId: '__svg__icons__dom__'//your id, do not use this id!
              })
            ],
            xxx
          })
          ```
   - change `main.ts`
       ```
       // main.ts
 
       import 'virtual:svg-icons-register'
       ```
   - PS: if there is error: `Cannot find module ‘fast-glob’`,then run `npm i fast-glob -D` or `pnpm add fast-glob -D`
     
7. example
   - download [VGCE](https://github.com/RickyHeaven/VGCE.git)
   
   - `pnpm i` or `npm i`
   
   - `pnpm dev` or `npm run dev`
