@zhangqingcq/vgce 0.1.1 → 0.1.3
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/dist/style.css +1 -1
- package/dist/vgce.js +14 -7
- package/dist/vgce.umd.cjs +2 -2
- package/package.json +1 -1
- package/src/components/config/index.ts +1 -1
- package/src/components/svg-editor/connection-line.vue +2 -2
- package/src/components/svg-viewer.vue +17 -1
- package/src/config/svg/custom/svg-text.ts +5 -0
- package/src/utils/mqtt-net.ts +2 -1
package/package.json
CHANGED
@@ -47,7 +47,7 @@
|
|
47
47
|
fill="none"
|
48
48
|
fill-opacity="0"
|
49
49
|
stroke="#DE4517"
|
50
|
-
:stroke-width="props.itemInfo.props['stroke-width'].val + 1"
|
50
|
+
:stroke-width="Math.ceil(props.itemInfo.props['stroke-width'].val * 1.2) + 1"
|
51
51
|
stroke-linecap="round"
|
52
52
|
stroke-linejoin="round"
|
53
53
|
v-show="props.itemInfo.selected || props.itemInfo.id === globalStore.handle_svg_info?.info.id"
|
@@ -143,7 +143,7 @@
|
|
143
143
|
:r="props.itemInfo.props.point_r.val + 1"
|
144
144
|
fill="none"
|
145
145
|
fill-opacity="0"
|
146
|
-
stroke-width="1"
|
146
|
+
:stroke-width="Math.ceil(props.itemInfo.props.point_r.val * 0.2) + 1"
|
147
147
|
stroke="#DE4517"
|
148
148
|
v-show="props.itemInfo.selected || props.itemInfo.id === globalStore.handle_svg_info?.info.id"
|
149
149
|
/>
|
@@ -233,7 +233,16 @@
|
|
233
233
|
sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
|
234
234
|
console.log(topics)
|
235
235
|
console.log(message.toString())
|
236
|
-
|
236
|
+
//暴露给外部,让用户自己处理消息,message可以用JSON.parse解析成对象(后端推给前端的MQTT消息内容需要是JSON格式)
|
237
|
+
//用户拿到消息后可以配合setNodeAttrByID方法更新界面
|
238
|
+
//setNodeAttrByID的参数id可以在传给本组件的props.data(用户传进来的,自然知道值是多少)里done_json找到
|
239
|
+
/*如何找到指定组件的两种方案:
|
240
|
+
1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id(必须保证唯一),然后调用setNodeAttrByID改变组件属性。
|
241
|
+
2.如果不想改动id(避免因不能保证手动改过的id唯一性导致编辑器功能异常),可以在config里给想要改变的组件的配置文件的props里增加一个字段,
|
242
|
+
如deviceCode(svg-text的配置文件里有被注释的例子),然后在编辑组态时,给对应组件填上对应的deviceCode(这样deviceCode就和组件id实现
|
243
|
+
了映射关系),并保存,后台给前台推MQTT消息时带上指定的deviceCode,前台预览时,在收到MQTT消息后,凭借消息里的deviceCode找在done_json
|
244
|
+
找到组件的id(可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里,这样在需要id时可直接在计算出的对象凭借deviceCode
|
245
|
+
直接取到),即可用setNodeAttrByID改变组件属性*/
|
237
246
|
emit('onMessage', {
|
238
247
|
topics,
|
239
248
|
message
|
@@ -242,6 +251,13 @@
|
|
242
251
|
}
|
243
252
|
}
|
244
253
|
|
254
|
+
/**
|
255
|
+
* 根据组件id设置相应属性
|
256
|
+
* @param id done_json里元素的id
|
257
|
+
* @param attr 属性,如svg-text的文字内容是:props.text.val
|
258
|
+
* @param val 需要设置的值
|
259
|
+
* @example setNodeAttrByID('Q5cZBSDXTP','props.text.val','新的文字内容')
|
260
|
+
*/
|
245
261
|
const setNodeAttrByID = (id: string, attr: string, val: any) => {
|
246
262
|
return setArrItemByID(id, attr, val, preview_data.done_json)
|
247
263
|
}
|
package/src/utils/mqtt-net.ts
CHANGED
@@ -6,7 +6,8 @@ let client: MqttClient
|
|
6
6
|
export const sub = (url: string, user: string, pwd: string, topics: string, callback: Function) => {
|
7
7
|
client = connect(url, {
|
8
8
|
username: user,
|
9
|
-
password: pwd
|
9
|
+
password: pwd,
|
10
|
+
reconnectPeriod: 600000 /*如果连不上,10分钟后重试*/
|
10
11
|
})
|
11
12
|
|
12
13
|
client.on('connect', () => {
|