@zhangqingcq/vgce 0.0.18 → 0.0.20

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangqingcq/vgce",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -25,14 +25,6 @@
25
25
  }
26
26
  },
27
27
  "types": "types/index.d.ts",
28
- "scripts": {
29
- "dev": "vite",
30
- "build": "run-p type-check build-only",
31
- "preview": "vite preview",
32
- "build-only": "vite build",
33
- "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
34
- "lib": "vue-tsc --noEmit --skipLibCheck && vite build --mode lib"
35
- },
36
28
  "repository": {
37
29
  "type": "git",
38
30
  "url": "git+https://github.com/RickyHeaven/VGCE.git"
@@ -57,13 +49,13 @@
57
49
  },
58
50
  "homepage": "https://github.com/RickyHeaven/VGCE#readme",
59
51
  "dependencies": {
60
- "@types/lodash": "^4.14.182",
52
+ "@types/lodash-es": "^4.17.8",
61
53
  "ace-builds": "^1.14.0",
62
54
  "animate.css": "^4.1.1",
63
55
  "axios": "^1.4.0",
64
56
  "echarts": "^5.4.1",
65
57
  "element-plus": "^2.3.8",
66
- "lodash": "^4.17.21",
58
+ "lodash-es": "^4.17.21",
67
59
  "mqtt": "^4.3.7",
68
60
  "pinia": "^2.1.3",
69
61
  "vue": "^3.3.4",
@@ -93,5 +85,13 @@
93
85
  "node": ">=18.16.0",
94
86
  "npm": ">=9.5.1",
95
87
  "pnpm": ">=8.6.0"
88
+ },
89
+ "scripts": {
90
+ "dev": "vite",
91
+ "build": "run-p type-check build-only",
92
+ "preview": "vite preview",
93
+ "build-only": "vite build",
94
+ "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
95
+ "lib": "vue-tsc --noEmit --skipLibCheck && vite build --mode lib"
96
96
  }
97
- }
97
+ }
@@ -1,4 +1,4 @@
1
- <script setup lang='ts'>
1
+ <script setup lang="ts">
2
2
  import { pinia } from '@/hooks'
3
3
  import { useGlobalStore } from '@/stores/global'
4
4
  import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
@@ -15,7 +15,7 @@
15
15
 
16
16
  import { sub, close } from '@/utils/mqtt-net'
17
17
 
18
- const emit = defineEmits(['on-message'])
18
+ const emit = defineEmits(['onMessage'])
19
19
  //注册所有组件
20
20
  const instance = getCurrentInstance()
21
21
  Object.keys(vueComp).forEach((key: string) => {
@@ -27,51 +27,52 @@
27
27
  const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
28
28
  canvasDrag: true
29
29
  })
30
- const preview_data = reactive(props.data ?? {
31
- layout_center: {
32
- x: 0,
33
- y: 0
34
- },
35
- config: {
36
- svg: {
37
- background_color: '#fff',
38
- scale: 1,
39
- position_center: {
40
- x: -333,
41
- y: -113
30
+ const preview_data = reactive(
31
+ props.data ?? {
32
+ layout_center: {
33
+ x: 0,
34
+ y: 0
35
+ },
36
+ config: {
37
+ svg: {
38
+ background_color: '#fff',
39
+ scale: 1,
40
+ position_center: {
41
+ x: -333,
42
+ y: -113
43
+ },
44
+ svg_position_center: {
45
+ x: 50,
46
+ y: 50
47
+ }
42
48
  },
43
- svg_position_center: {
44
- x: 50,
45
- y: 50
49
+ net: {
50
+ mqtt: {
51
+ url: '',
52
+ user: '',
53
+ pwd: '',
54
+ topics: ''
55
+ }
46
56
  }
47
57
  },
48
- net: {
49
- mqtt: {
50
- url: '',
51
- user: '',
52
- pwd: '',
53
- topics: ''
54
- }
55
- }
56
- },
57
- done_json: []
58
- })
58
+ done_json: []
59
+ }
60
+ )
59
61
  const globalStore = useGlobalStore(pinia)
60
62
 
61
63
  const onCanvasMouseMove = (e: MouseEvent) => {
62
64
  //如果鼠标不是按下状态 连线除外
63
- if (globalStore.mouse_info.state != EMouseInfoState.Down && globalStore.intention !==
64
- EGlobalStoreIntention.Connection) {
65
+ if (
66
+ globalStore.mouse_info.state != EMouseInfoState.Down &&
67
+ globalStore.intention !== EGlobalStoreIntention.Connection
68
+ ) {
65
69
  return
66
70
  }
67
71
  if (!props.canvasDrag) {
68
72
  console.log(props.canvasDrag)
69
73
  return
70
74
  }
71
- const {
72
- clientX,
73
- clientY
74
- } = e
75
+ const { clientX, clientY } = e
75
76
  globalStore.mouse_info.new_position_x =
76
77
  globalStore.mouse_info.now_position_x + clientX - globalStore.mouse_info.position_x
77
78
  globalStore.mouse_info.new_position_y =
@@ -102,10 +103,7 @@
102
103
  }
103
104
  const onCanvasMouseDown = (e: MouseEvent) => {
104
105
  console.log('onCanvasMouseDown', e)
105
- const {
106
- clientX,
107
- clientY
108
- } = e
106
+ const { clientX, clientY } = e
109
107
  //点击画布 未选中组件 拖动画布
110
108
  globalStore.intention = EGlobalStoreIntention.MoveCanvas
111
109
  globalStore.setMouseInfo({
@@ -118,12 +116,16 @@
118
116
  new_position_y: preview_data.layout_center.y
119
117
  })
120
118
  }
121
- const getActualBoundScale = (actual_bound: {
122
- x: number
123
- y: number
124
- width: number
125
- height: number
126
- }, scale_x: number, scale_y: number) => {
119
+ const getActualBoundScale = (
120
+ actual_bound: {
121
+ x: number
122
+ y: number
123
+ width: number
124
+ height: number
125
+ },
126
+ scale_x: number,
127
+ scale_y: number
128
+ ) => {
127
129
  return {
128
130
  x: actual_bound.x - (actual_bound.width / 2) * scale_x + actual_bound.width / 2,
129
131
  y: actual_bound.y - (actual_bound.height / 2) * scale_y + actual_bound.height / 2,
@@ -163,8 +165,7 @@
163
165
  break
164
166
  }
165
167
  }
166
- }
167
- else {
168
+ } else {
168
169
  t = root
169
170
  }
170
171
 
@@ -175,14 +176,12 @@
175
176
  for (let a of e.attrs) {
176
177
  if (t.state && t.state.hasOwnProperty(a.key)) {
177
178
  t.state[a.key].default = valFormat(a.val)
178
- }
179
- else if (t.props.hasOwnProperty(a.key)) {
179
+ } else if (t.props.hasOwnProperty(a.key)) {
180
180
  t.props[a.key].val = valFormat(a.val)
181
181
  }
182
182
  }
183
183
  }
184
- }
185
- else if (e.action === EEventAction.JavaScript) {
184
+ } else if (e.action === EEventAction.JavaScript) {
186
185
  const t = new Function(e.scripts)
187
186
  t()
188
187
  }
@@ -224,7 +223,7 @@
224
223
  console.log(topics)
225
224
  console.log(message.toString())
226
225
  //暂时先暴露给外部,让用户自己处理消息,后期功能会补上
227
- emit('on-message', {
226
+ emit('onMessage', {
228
227
  topics,
229
228
  message
230
229
  })
@@ -238,81 +237,81 @@
238
237
  </script>
239
238
 
240
239
  <template>
241
- <div class='canvas' @mousedown='onCanvasMouseDown' @mousemove='onCanvasMouseMove' @mouseup='onCanvasMouseUp'>
240
+ <div class="canvas" @mousedown="onCanvasMouseDown" @mousemove="onCanvasMouseMove" @mouseup="onCanvasMouseUp">
242
241
  <svg
243
- xmlns='http://www.w3.org/2000/svg'
244
- :style='{ backgroundColor: preview_data.config.svg.background_color }'
245
- width='100%'
246
- height='100%'
242
+ xmlns="http://www.w3.org/2000/svg"
243
+ :style="{ backgroundColor: preview_data.config.svg.background_color }"
244
+ width="100%"
245
+ height="100%"
247
246
  >
248
247
  <g
249
- :transform='`translate(${preview_data.config.svg.position_center.x + preview_data.layout_center.x},${
248
+ :transform="`translate(${preview_data.config.svg.position_center.x + preview_data.layout_center.x},${
250
249
  preview_data.config.svg.position_center.y + preview_data.layout_center.y
251
- })rotate(${0})scale(${preview_data.config.svg.scale})`'
250
+ })rotate(${0})scale(${preview_data.config.svg.scale})`"
252
251
  >
253
252
  <g
254
- v-for='item in preview_data.done_json'
255
- :key='item.id'
256
- :transform='`translate(${item.x},${item.y})rotate(0)scale(1)`'
257
- v-show='item.display'
258
- @click='eventHandle(item)'
253
+ v-for="item in preview_data.done_json"
254
+ :key="item.id"
255
+ :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
256
+ v-show="item.display"
257
+ @click="eventHandle(item)"
259
258
  >
260
- <g :class='`${getCommonClass(item)}`'>
259
+ <g :class="`${getCommonClass(item)}`">
261
260
  <g
262
- :transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
261
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
263
262
  item.actual_bound.y + item.actual_bound.height / 2
264
263
  })rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
265
264
  item.actual_bound.y +
266
265
  item.actual_bound.height / 2
267
- )})`'
266
+ )})`"
268
267
  >
269
- <connection-line v-if='item.type === EDoneJsonType.ConnectionLine' :item-info='item' />
268
+ <connection-line v-if="item.type === EDoneJsonType.ConnectionLine" :item-info="item" />
270
269
  <use
271
- v-else-if='item.type === EDoneJsonType.File'
272
- :xlink:href='`#svg-${item.name}`'
273
- v-bind='prosToVBind(item)'
274
- width='100'
275
- height='100'
276
- :id='item.id'
277
- :transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
270
+ v-else-if="item.type === EDoneJsonType.File"
271
+ :xlink:href="`#svg-${item.name}`"
272
+ v-bind="prosToVBind(item)"
273
+ width="100"
274
+ height="100"
275
+ :id="item.id"
276
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
278
277
  item.actual_bound.y + item.actual_bound.height / 2
279
278
  }) scale(${item.scale_x},${item.scale_y}) translate(${-(
280
279
  item.actual_bound.x +
281
280
  item.actual_bound.width / 2
282
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`'
281
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
283
282
  />
284
283
  <component
285
- v-else-if='item.type === EDoneJsonType.CustomSvg'
286
- :is='item.tag'
287
- v-bind='prosToVBind(item)'
288
- width='100'
289
- height='100'
290
- :id='item.id'
291
- @on-change='eventHandle(item)'
292
- :transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
284
+ v-else-if="item.type === EDoneJsonType.CustomSvg"
285
+ :is="item.tag"
286
+ v-bind="prosToVBind(item)"
287
+ width="100"
288
+ height="100"
289
+ :id="item.id"
290
+ @on-change="eventHandle(item)"
291
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
293
292
  item.actual_bound.y + item.actual_bound.height / 2
294
293
  }) scale(${item.scale_x},${item.scale_y}) translate(${-(
295
294
  item.actual_bound.x +
296
295
  item.actual_bound.width / 2
297
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`'
296
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
298
297
  />
299
298
  <foreignObject
300
- v-else-if='item.type === EDoneJsonType.Vue'
301
- v-bind='getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)'
302
- :id='`foreign-object${item.id}`'
299
+ v-else-if="item.type === EDoneJsonType.Vue"
300
+ v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
301
+ :id="`foreign-object${item.id}`"
303
302
  >
304
303
  <component
305
- :is='item.tag'
306
- v-bind='prosToVBind(item)'
307
- :id='item.id'
308
- @on-change='eventHandle(item)'
309
- :transform='`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
304
+ :is="item.tag"
305
+ v-bind="prosToVBind(item)"
306
+ :id="item.id"
307
+ @on-change="eventHandle(item)"
308
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
310
309
  item.actual_bound.y + item.actual_bound.height / 2
311
310
  }) scale(${item.scale_x},${item.scale_y}) translate(${-(
312
311
  item.actual_bound.x +
313
312
  item.actual_bound.width / 2
314
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`'
315
- >{{ item.tag_slot }}
313
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
314
+ >{{ item.tag_slot }}
316
315
  </component>
317
316
  </foreignObject>
318
317
  </g>
@@ -323,7 +322,7 @@
323
322
  </div>
324
323
  </template>
325
324
 
326
- <style lang='less' scoped>
325
+ <style lang="less" scoped>
327
326
  .canvas {
328
327
  width: 100%;
329
328
  height: 100vh;
@@ -3,8 +3,8 @@
3
3
  * @author Ricky email:zhangqingcq@foxmail.com
4
4
  * @created 2023.06.21
5
5
  */
6
+ import { isEmpty } from 'lodash-es'
6
7
  import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
7
-
8
8
  import type { Collection } from './types'
9
9
 
10
10
  // const host = window.location.origin
@@ -162,7 +162,7 @@ function checkRequest(
162
162
  if (config && config.headers && config.headers['Content-Type'] === 'multipart/form-data') {
163
163
  data_ = data
164
164
  } else {
165
- if (data && !_.isEmpty(data)) {
165
+ if (data && !isEmpty(data)) {
166
166
  if (Array.isArray(data)) {
167
167
  data_ = []
168
168
  for (let e of data) {
package/types/index.d.ts CHANGED
@@ -3,11 +3,23 @@
3
3
  * @author Ricky email:zhangqingcq@foxmail.com
4
4
  * @created 2023.07.10
5
5
  */
6
+ import { DefineComponent } from 'vue'
6
7
 
7
- import SvgEditor from '../dist/vgce'
8
- import SvgViewer from '../dist/vgce'
8
+ export declare const SvgEditor: DefineComponent<{
9
+ data?: string
10
+ customToolbar?: any[]
11
+ saveFile?: boolean
12
+ onOnPreview?: (d: Record<string, any>) => void
13
+ onOnSave?: (d: Record<string, any>) => void
14
+ onOnReturn?: () => void
15
+ }>
16
+ export declare const SvgViewer: DefineComponent<{
17
+ data?: Record<string, any>
18
+ canvasDrag?: boolean
19
+ onOnMessage?: (d: { topics: string, message: string }) => void
20
+ }>
9
21
 
10
- export namespace VGCE {
11
- SvgEditor
22
+ export default {
23
+ SvgEditor,
12
24
  SvgViewer
13
- }
25
+ }