@zhangqingcq/vgce 0.0.17 → 0.0.19

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 (45) hide show
  1. package/README.md +85 -83
  2. package/dist/style.css +2 -2
  3. package/dist/vgce.js +6979 -6928
  4. package/dist/vgce.umd.cjs +62 -62
  5. package/package.json +12 -10
  6. package/src/App.vue +1 -3
  7. package/src/components/svg-analysis/index.vue +0 -2
  8. package/src/components/svg-editor/center-panel/index.vue +0 -1
  9. package/src/components/svg-editor/component-tree/index.vue +0 -1
  10. package/src/components/svg-editor/connection-panel/index.vue +0 -1
  11. package/src/components/svg-editor/export-json/index.vue +0 -1
  12. package/src/components/svg-editor/handle-panel/index.vue +0 -1
  13. package/src/components/svg-editor/import-json/index.vue +0 -1
  14. package/src/components/svg-editor/index.vue +0 -1
  15. package/src/components/svg-editor/left-panel/index.vue +0 -1
  16. package/src/components/svg-editor/right-panel/code-edit-modal.vue +0 -1
  17. package/src/components/svg-editor/right-panel/common-animate.vue +0 -1
  18. package/src/components/svg-editor/right-panel/condition.vue +0 -1
  19. package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue +4 -4
  20. package/src/components/svg-editor/right-panel/index.vue +1 -2
  21. package/src/components/svg-editor/right-panel/list.vue +0 -1
  22. package/src/components/svg-viewer/index.vue +14 -2
  23. package/src/components/vue3-ruler-tool/index.vue +0 -1
  24. package/src/config/files/clock-a.vue +0 -2
  25. package/src/config/files/common-table.vue +0 -1
  26. package/src/config/files/light-a.vue +0 -2
  27. package/src/config/files/now-time.vue +0 -1
  28. package/src/config/files/pie-charts.vue +0 -1
  29. package/src/config/files/progress.vue +0 -1
  30. package/src/config/files/svg-text.vue +0 -2
  31. package/src/config/files/switch-a.vue +0 -2
  32. package/src/config/svg/stateless/index.ts +1 -5
  33. package/src/config/types.ts +2 -2
  34. package/src/hooks.ts +0 -1
  35. package/src/index.ts +2 -4
  36. package/src/main.ts +0 -1
  37. package/src/stores/config/index.ts +0 -1
  38. package/src/stores/global/index.ts +0 -2
  39. package/src/stores/main.ts +0 -3
  40. package/src/stores/svg-edit-layout/index.ts +0 -1
  41. package/src/stores/system/index.ts +0 -1
  42. package/src/utils/fetch.ts +2 -4
  43. package/src/utils/proxy.ts +0 -1
  44. package/src/views/EditorS.vue +0 -1
  45. package/types/index.d.ts +21 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangqingcq/vgce",
3
- "version": "0.0.17",
3
+ "version": "0.0.19",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -57,34 +57,36 @@
57
57
  },
58
58
  "homepage": "https://github.com/RickyHeaven/VGCE#readme",
59
59
  "dependencies": {
60
- "@types/lodash": "^4.14.182",
60
+ "@types/lodash-es": "^4.17.8",
61
61
  "ace-builds": "^1.14.0",
62
62
  "animate.css": "^4.1.1",
63
63
  "axios": "^1.4.0",
64
64
  "echarts": "^5.4.1",
65
- "element-plus": "^2.3.7",
66
- "lodash": "^4.17.21",
65
+ "element-plus": "^2.3.8",
66
+ "lodash-es": "^4.17.21",
67
67
  "mqtt": "^4.3.7",
68
- "pinia": "^2.0.36",
68
+ "pinia": "^2.1.3",
69
69
  "vue": "^3.3.4",
70
70
  "vue-echarts": "^6.5.1",
71
- "vue-router": "^4.2.0",
71
+ "vue-router": "^4.2.2",
72
72
  "vue3-ace-editor": "^2.2.2"
73
73
  },
74
74
  "devDependencies": {
75
75
  "@tsconfig/node18": "^2.0.1",
76
- "@types/node": "^18.16.8",
76
+ "@types/node": "^18.16.17",
77
77
  "@vitejs/plugin-vue": "^4.2.3",
78
78
  "@vitejs/plugin-vue-jsx": "^3.0.1",
79
79
  "@vue/tsconfig": "^0.4.0",
80
80
  "less": "^4.1.3",
81
81
  "npm-run-all": "^4.1.5",
82
82
  "prettier": "3.0.0",
83
- "typescript": "~5.1.6",
84
- "vite": "4.3.9",
83
+ "typescript": "~5.0.4",
84
+ "unplugin-auto-import": "^0.16.6",
85
+ "unplugin-vue-components": "^0.25.1",
86
+ "vite": "^4.3.9",
85
87
  "vite-plugin-svg-icons": "^2.0.1",
86
88
  "vite-plugin-windicss": "^1.9.0",
87
- "vue-tsc": "^1.8.4",
89
+ "vue-tsc": "^1.6.5",
88
90
  "windicss": "^3.5.6"
89
91
  },
90
92
  "engines": {
package/src/App.vue CHANGED
@@ -1,6 +1,4 @@
1
- <script setup lang="ts">
2
- import { RouterView } from 'vue-router'
3
- </script>
1
+ <script setup lang="ts"></script>
4
2
 
5
3
  <template>
6
4
  <RouterView />
@@ -1,6 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { computed } from 'vue'
3
-
4
2
  const props = withDefaults(defineProps<{ name: string; props?: object }>(), { props: () => ({}) })
5
3
  const symbolId = computed(() => `#svg-${props.name}`)
6
4
  </script>
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
3
2
  import { pinia } from '@/hooks'
4
3
  import { useConfigStore } from '@/stores/config'
5
4
  import { useGlobalStore } from '@/stores/global'
@@ -1,5 +1,4 @@
1
1
  <script lang="ts" setup>
2
- import { ref } from 'vue'
3
2
  import { pinia } from '@/hooks'
4
3
  import { useGlobalStore } from '@/stores/global'
5
4
  import { ElTree } from 'element-plus'
@@ -5,7 +5,6 @@
5
5
  import type { ISystemStraightLine } from '@/components/config/types'
6
6
  import { pinia } from '@/hooks'
7
7
  import { useConfigStore } from '@/stores/config'
8
- import { ref } from 'vue'
9
8
  import { useGlobalStore } from '@/stores/global'
10
9
  import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
11
10
  import type { IDoneJson } from '@/stores/global/types'
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { onMounted, ref } from 'vue'
3
2
  import { VAceEditor } from 'vue3-ace-editor'
4
3
  import '@/components/ace-edit'
5
4
  import { pinia } from '@/hooks'
@@ -2,7 +2,6 @@
2
2
  <script lang="ts" setup>
3
3
  import { pinia } from '@/hooks'
4
4
  import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
5
- import { ref } from 'vue'
6
5
  import { useGlobalStore } from '@/stores/global'
7
6
  import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from '@/stores/global/types'
8
7
  import type { IDoneJson } from '@/stores/global/types'
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { ref } from 'vue'
3
2
  import { VAceEditor } from 'vue3-ace-editor'
4
3
  import '@/components/ace-edit'
5
4
 
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
3
2
  import {
4
3
  ElContainer,
5
4
  ElHeader,
@@ -1,6 +1,5 @@
1
1
  <!--左侧工具栏-->
2
2
  <script lang="ts" setup>
3
- import { ref } from 'vue'
4
3
  import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
5
4
  import type { IConfig, IConfigItem } from '@/config/types'
6
5
  import { pinia } from '@/hooks'
@@ -2,7 +2,6 @@
2
2
  import { VAceEditor } from 'vue3-ace-editor'
3
3
  import '@/components/ace-edit'
4
4
  import { ElButton, ElDialog } from 'element-plus'
5
- import { computed, ref } from 'vue'
6
5
 
7
6
  const props = withDefaults(defineProps<{ modelValue: any; lang: string; title: string }>(), {
8
7
  modelValue: () => ({}),
@@ -1,6 +1,5 @@
1
1
  <script setup lang="ts">
2
2
  import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus'
3
- import { ref, watch } from 'vue'
4
3
  import { common_animate_list } from '@/components/config'
5
4
  import SvgAnalysis from '@/components/svg-analysis/index.vue'
6
5
 
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { computed } from 'vue'
3
2
  import { ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus/es'
4
3
  import type { ICondition } from '@/config/types'
5
4
  import { EConditionType } from '@/config/types'
@@ -59,22 +59,22 @@
59
59
  v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
60
60
  v-model="attr_item.val"
61
61
  :disabled="Boolean(attr_item?.disabled)"
62
- ></el-input-number>
62
+ />
63
63
  <el-input
64
64
  v-else-if="attr_item.type === EConfigItemPropsType.Input"
65
65
  v-model="attr_item.val"
66
66
  :disabled="Boolean(attr_item?.disabled)"
67
- ></el-input>
67
+ />
68
68
  <el-color-picker
69
69
  v-else-if="attr_item.type === EConfigItemPropsType.Color"
70
70
  v-model="attr_item.val"
71
71
  :disabled="Boolean(attr_item?.disabled)"
72
- ></el-color-picker>
72
+ />
73
73
  <el-switch
74
74
  v-else-if="attr_item.type === EConfigItemPropsType.Switch"
75
75
  v-model="attr_item.val"
76
76
  :disabled="Boolean(attr_item?.disabled)"
77
- ></el-switch>
77
+ />
78
78
  <code-edit-modal
79
79
  v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
80
80
  v-model="attr_item.val"
@@ -14,7 +14,6 @@
14
14
  ElTabPane,
15
15
  ElTabs
16
16
  } from 'element-plus'
17
- import { ref } from 'vue'
18
17
  import { pinia } from '@/hooks'
19
18
  import { useConfigStore } from '@/stores/config'
20
19
  import { useGlobalStore } from '@/stores/global'
@@ -248,7 +247,7 @@
248
247
  </el-form-item>
249
248
  <div
250
249
  v-for="(e, k) in globalStore.handle_svg_info!.info.state"
251
- :key="'state' + k"
250
+ :key="'state' + String(k)"
252
251
  v-if="globalStore.handle_svg_info!.info.state"
253
252
  >
254
253
  <el-form-item class="props-row" :label="String(k)" size="small"> {{ e?.default }}</el-form-item>
@@ -2,7 +2,6 @@
2
2
  import type { IAttrItem } from '@/config/types'
3
3
  import { ElIcon, ElInput } from 'element-plus'
4
4
  import SvgAnalysis from '@/components/svg-analysis/index.vue'
5
- import { computed } from 'vue'
6
5
 
7
6
  const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
8
7
  modelValue: () => [
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { getCurrentInstance, onMounted, onBeforeUnmount, reactive } from 'vue'
3
2
  import { pinia } from '@/hooks'
4
3
  import { useGlobalStore } from '@/stores/global'
5
4
  import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
@@ -16,6 +15,7 @@
16
15
 
17
16
  import { sub, close } from '@/utils/mqtt-net'
18
17
 
18
+ const emit = defineEmits(['onMessage'])
19
19
  //注册所有组件
20
20
  const instance = getCurrentInstance()
21
21
  Object.keys(vueComp).forEach((key: string) => {
@@ -46,7 +46,14 @@
46
46
  y: 50
47
47
  }
48
48
  },
49
- net: { mqtt: { url: '', user: '', pwd: '', topics: '' } }
49
+ net: {
50
+ mqtt: {
51
+ url: '',
52
+ user: '',
53
+ pwd: '',
54
+ topics: ''
55
+ }
56
+ }
50
57
  },
51
58
  done_json: []
52
59
  }
@@ -215,6 +222,11 @@
215
222
  sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
216
223
  console.log(topics)
217
224
  console.log(message.toString())
225
+ //暂时先暴露给外部,让用户自己处理消息,后期功能会补上
226
+ emit('onMessage', {
227
+ topics,
228
+ message
229
+ })
218
230
  })
219
231
  }
220
232
  }
@@ -1,5 +1,4 @@
1
1
  <script lang="ts">
2
- import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
3
2
  import { pinia } from '@/hooks'
4
3
  import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
5
4
 
@@ -1,6 +1,4 @@
1
1
  <script lang="ts" setup>
2
- import { ref } from 'vue'
3
-
4
2
  const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
5
3
  const nowTime = ref(new Date())
6
4
  const s = nowTime.value.getSeconds()
@@ -4,7 +4,6 @@
4
4
  </el-table>
5
5
  </template>
6
6
  <script setup lang="ts">
7
- import { ref, watchEffect } from 'vue'
8
7
  import { ElTable, ElTableColumn } from 'element-plus'
9
8
 
10
9
  const props = withDefaults(
@@ -1,6 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { watch } from 'vue'
3
-
4
2
  const props = withDefaults(defineProps<{ id: string; isOpen: boolean }>(), {
5
3
  id: '',
6
4
  isOpen: false
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { computed, onMounted, ref, onUnmounted } from 'vue'
3
2
  const props = defineProps({
4
3
  fontColor: {
5
4
  type: String,
@@ -4,7 +4,6 @@
4
4
  import { PieChart } from 'echarts/charts'
5
5
  import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
6
6
  import VChart, { THEME_KEY } from 'vue-echarts'
7
- import { watch, provide, reactive } from 'vue'
8
7
  use([SVGRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
9
8
 
10
9
  provide(THEME_KEY, 'dark')
@@ -1,7 +1,6 @@
1
1
  <script setup lang="ts">
2
2
  import { ElProgress } from 'element-plus'
3
3
  import type { ProgressColor } from 'element-plus'
4
- import { watch } from 'vue'
5
4
 
6
5
  const colors: ProgressColor[] = [
7
6
  {
@@ -1,7 +1,5 @@
1
1
  <script setup lang="ts">
2
2
  // 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
3
- import { nextTick, watch } from 'vue'
4
-
5
3
  const emit = defineEmits(['resize'])
6
4
 
7
5
  const props = defineProps({
@@ -1,6 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { watch } from 'vue'
3
-
4
2
  const props = defineProps({
5
3
  id: {
6
4
  type: String,
@@ -6,9 +6,5 @@ import { svg_bot_2 } from './bot-2'
6
6
  export const stateless_group: IConfigComponentGroup = {
7
7
  groupType: 'stateless',
8
8
  title: '静态图标',
9
- list: [
10
- alternator_svg_file,
11
- svg_house,
12
- svg_bot_2
13
- ]
9
+ list: [alternator_svg_file, svg_house, svg_bot_2]
14
10
  }
@@ -37,7 +37,7 @@ export interface IAnimations {
37
37
  }
38
38
 
39
39
  export interface IConfigItemProps {
40
- [key: string]: {
40
+ [key: keyof any]: {
41
41
  title: string
42
42
  type: EConfigItemPropsType
43
43
  val: any
@@ -77,7 +77,7 @@ interface IDoneJsonConfig {
77
77
  }
78
78
 
79
79
  export interface IConfigItemState {
80
- OnOff?: {
80
+ [k: keyof any]: {
81
81
  title: string
82
82
  default: false
83
83
  props: { [key: string]: { openVal: any; closeVal: any } }
package/src/hooks.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { IDataModel } from '@/components/svg-editor/types'
2
- import { createPinia } from 'pinia'
3
2
  import { useConfigStore } from '@/stores/config'
4
3
  import { useGlobalStore } from '@/stores/global'
5
4
  import type { IDoneJson } from '@/stores/global/types'
package/src/index.ts CHANGED
@@ -8,7 +8,5 @@ import 'virtual:windi.css'
8
8
  import 'virtual:svg-icons-register'
9
9
  import './assets/main.less'
10
10
 
11
- import SvgEditor from '@/components/svg-editor/index.vue'
12
- import SvgViewer from '@/components/svg-viewer/index.vue'
13
-
14
- export { SvgEditor, SvgViewer }
11
+ export { default as SvgEditor } from '@/components/svg-editor/index.vue'
12
+ export { default as SvgViewer } from '@/components/svg-viewer/index.vue'
package/src/main.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { createApp } from 'vue'
2
1
  import { pinia } from '@/hooks'
3
2
 
4
3
  import App from './App.vue'
@@ -1,4 +1,3 @@
1
- import { defineStore } from 'pinia'
2
1
  import { objectDeepClone } from '@/utils'
3
2
  import { connection_line_system } from '@/components/config'
4
3
 
@@ -1,5 +1,3 @@
1
- import { defineStore } from 'pinia'
2
- import { nextTick } from 'vue'
3
1
  import { config } from '@/config'
4
2
  import type { IConfigItem } from '@/config/types'
5
3
  import { isOfType, objectDeepClone, setSvgActualInfo } from '@/utils'
@@ -1,6 +1,3 @@
1
- import { defineStore } from 'pinia'
2
- import { ref } from 'vue'
3
-
4
1
  export const useStore = defineStore('main', () => {
5
2
  const data = ref()
6
3
 
@@ -1,4 +1,3 @@
1
- import { defineStore } from 'pinia'
2
1
  import type { ISvgEditLayoutStore } from './types'
3
2
  /**
4
3
  * 编辑器布局状态
@@ -1,5 +1,4 @@
1
1
  import { objectDeepClone, randomString } from '@/utils'
2
- import { defineStore } from 'pinia'
3
2
  import { useGlobalStore } from '../global'
4
3
  import type { IDoneJson } from '../global/types'
5
4
  import { EGlobalStoreIntention } from '../global/types'
@@ -3,10 +3,8 @@
3
3
  * @author Ricky email:zhangqingcq@foxmail.com
4
4
  * @created 2023.06.21
5
5
  */
6
- import axios from 'axios'
6
+ import { isEmpty } from 'lodash-es'
7
7
  import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
8
- import _ from 'lodash'
9
-
10
8
  import type { Collection } from './types'
11
9
 
12
10
  // const host = window.location.origin
@@ -164,7 +162,7 @@ function checkRequest(
164
162
  if (config && config.headers && config.headers['Content-Type'] === 'multipart/form-data') {
165
163
  data_ = data
166
164
  } else {
167
- if (data && !_.isEmpty(data)) {
165
+ if (data && !isEmpty(data)) {
168
166
  if (Array.isArray(data)) {
169
167
  data_ = []
170
168
  for (let e of data) {
@@ -1,5 +1,4 @@
1
1
  import type { ComponentInternalInstance } from 'vue'
2
- import { getCurrentInstance } from 'vue'
3
2
 
4
3
  export default function () {
5
4
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
@@ -1,7 +1,6 @@
1
1
  <script setup lang="ts">
2
2
  import SvgEditor from '@/components/svg-editor/index.vue'
3
3
  import { useStore } from '@/stores/main'
4
- import { useRouter } from 'vue-router'
5
4
  import type { IDataModel } from '@/components/svg-editor/types'
6
5
 
7
6
  const router = useRouter()
package/types/index.d.ts CHANGED
@@ -3,7 +3,25 @@
3
3
  * @author Ricky email:zhangqingcq@foxmail.com
4
4
  * @created 2023.07.10
5
5
  */
6
+ import { DefineComponent } from 'vue'
7
+ import type { IConfig } from '../src/config/types'
8
+ import type { IDataModel } from '../src/components/svg-editor/types'
6
9
 
7
- import SvgEditor from '../dist/vgce'
8
- import SvgViewer from '../dist/vgce'
9
- export { SvgEditor, SvgViewer }
10
+ export declare const SvgEditor: DefineComponent<{
11
+ data?: string
12
+ customToolbar?: IConfig
13
+ saveFile?: boolean
14
+ onOnPreview?: (d: IDataModel) => void
15
+ onOnSave?: (d: IDataModel) => void
16
+ onOnReturn?: () => void
17
+ }>
18
+ export declare const SvgViewer: DefineComponent<{
19
+ data?: IDataModel
20
+ canvasDrag?: boolean
21
+ onOnMessage?: (d: { topics: string, message: string }) => void
22
+ }>
23
+
24
+ export default {
25
+ SvgEditor,
26
+ SvgViewer
27
+ }