@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/README.md +66 -64
- package/dist/style.css +1 -1
- package/dist/vgce.js +33 -37
- package/dist/vgce.umd.cjs +1 -1
- package/package.json +12 -12
- package/src/components/svg-viewer/index.vue +94 -95
- package/src/utils/fetch.ts +2 -2
- package/types/index.d.ts +17 -5
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@zhangqingcq/vgce",
|
3
|
-
"version": "0.0.
|
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.
|
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=
|
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(['
|
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(
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
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
|
-
|
44
|
-
|
45
|
-
|
49
|
+
net: {
|
50
|
+
mqtt: {
|
51
|
+
url: '',
|
52
|
+
user: '',
|
53
|
+
pwd: '',
|
54
|
+
topics: ''
|
55
|
+
}
|
46
56
|
}
|
47
57
|
},
|
48
|
-
|
49
|
-
|
50
|
-
|
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 (
|
64
|
-
|
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 = (
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
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('
|
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=
|
240
|
+
<div class="canvas" @mousedown="onCanvasMouseDown" @mousemove="onCanvasMouseMove" @mouseup="onCanvasMouseUp">
|
242
241
|
<svg
|
243
|
-
xmlns=
|
244
|
-
:style=
|
245
|
-
width=
|
246
|
-
height=
|
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=
|
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=
|
255
|
-
:key=
|
256
|
-
:transform=
|
257
|
-
v-show=
|
258
|
-
@click=
|
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=
|
259
|
+
<g :class="`${getCommonClass(item)}`">
|
261
260
|
<g
|
262
|
-
:transform=
|
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=
|
268
|
+
<connection-line v-if="item.type === EDoneJsonType.ConnectionLine" :item-info="item" />
|
270
269
|
<use
|
271
|
-
v-else-if=
|
272
|
-
:xlink:href=
|
273
|
-
v-bind=
|
274
|
-
width=
|
275
|
-
height=
|
276
|
-
:id=
|
277
|
-
:transform=
|
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=
|
286
|
-
:is=
|
287
|
-
v-bind=
|
288
|
-
width=
|
289
|
-
height=
|
290
|
-
:id=
|
291
|
-
@on-change=
|
292
|
-
:transform=
|
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=
|
301
|
-
v-bind=
|
302
|
-
: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=
|
306
|
-
v-bind=
|
307
|
-
:id=
|
308
|
-
@on-change=
|
309
|
-
:transform=
|
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
|
-
|
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=
|
325
|
+
<style lang="less" scoped>
|
327
326
|
.canvas {
|
328
327
|
width: 100%;
|
329
328
|
height: 100vh;
|
package/src/utils/fetch.ts
CHANGED
@@ -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 && !
|
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
|
-
|
8
|
-
|
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
|
11
|
-
SvgEditor
|
22
|
+
export default {
|
23
|
+
SvgEditor,
|
12
24
|
SvgViewer
|
13
|
-
}
|
25
|
+
}
|