@zhangqingcq/vgce 0.1.23 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.23",
+  "version": "0.1.26",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"

package/src/components/svg-editor/index.vue

@@ -33,14 +33,28 @@
 	import { fileRead, fileWrite } from '@/utils/file-read-write'
 	import { useEditPrivateStore } from '@/stores/system'
 	import { setEditorLoadTime } from '@/utils'
+	import { onMounted } from 'vue'
 
 	setEditorLoadTime()
 
 	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
 	const props = withDefaults(
-		defineProps<{ customToolbar?: IConfig; vueComp?: Record<string, any>; data?: string; saveFile?: boolean }>(),
+		defineProps<{
+			customToolbar?: IConfig
+			vueComp?: Record<string, any>
+			data?: string
+			saveFile?: boolean
+			mqtt?: { cover: boolean; url: string; user: string; pwd: string; topics: string }
+		}>(),
 		{
-			saveFile: false
+			saveFile: false,
+			mqtt: () => ({
+				cover: false,
+				url: '',
+				user: '',
+				pwd: '',
+				topics: ''
+			})
 		}
 	)
 	const globalStore = useGlobalStore(pinia)
@@ -126,6 +140,14 @@
 		centerRef.value.onCanvasMouseUp()
 	}
 
+	onMounted(() => {
+		configStore.net.mqtt.useGlobalMqtt = Boolean(props.mqtt?.cover)
+		configStore.net.mqtt.global.url = props.mqtt?.url || ''
+		configStore.net.mqtt.global.user = props.mqtt?.user || ''
+		configStore.net.mqtt.global.pwd = props.mqtt?.pwd || ''
+		configStore.net.mqtt.global.topics = props.mqtt?.topics || ''
+	})
+
 	defineExpose({
 		setGraphNodeJson
 	})

package/src/components/svg-editor/right-panel.vue

@@ -173,16 +173,21 @@
 						<span style="font-weight: bold">MQTT</span>
 					</template>
 					<el-form label-width="60px" label-position="left">
-						<el-form-item label="URL" size="small">
+						<el-form-item label="外部配置" size="small">
+							<el-switch v-model="configStore.net.mqtt.useGlobalMqtt" /><span style="color: #999"
+								>（开启后这里无需配置）</span
+							>
+						</el-form-item>
+						<el-form-item label="URL" size="small" v-if="!configStore.net.mqtt.useGlobalMqtt">
 							<el-input v-model="configStore.net.mqtt.url" placeholder="如 ws://127.0.0.1:4500" />
 						</el-form-item>
-						<el-form-item label="用户名" size="small">
+						<el-form-item label="用户名" size="small" v-if="!configStore.net.mqtt.useGlobalMqtt">
 							<el-input v-model="configStore.net.mqtt.user" placeholder="username" />
 						</el-form-item>
-						<el-form-item label="密码" size="small">
+						<el-form-item label="密码" size="small" v-if="!configStore.net.mqtt.useGlobalMqtt">
 							<el-input v-model="configStore.net.mqtt.pwd" placeholder="password" />
 						</el-form-item>
-						<el-form-item label="Topics" size="small">
+						<el-form-item label="Topics" size="small" v-if="!configStore.net.mqtt.useGlobalMqtt">
 							<el-input v-model="configStore.net.mqtt.topics" placeholder="topics" />
 						</el-form-item>
 					</el-form>

package/src/components/svg-viewer.vue

@@ -31,7 +31,12 @@
 
 	const emit = defineEmits(['onMessage', 'onEvent'])
 	const props = withDefaults(
-		defineProps<{ vueComp?: Record<string, any>; data?: IDataModel; canvasDrag?: boolean; showCanvasInfo?: boolean }>(),
+		defineProps<{
+			vueComp?: Record<string, any>
+			data?: IDataModel
+			canvasDrag?: boolean
+			showCanvasInfo?: boolean
+		}>(),
 		{
 			canvasDrag: true,
 			showCanvasInfo: true
@@ -55,10 +60,17 @@
 				},
 				net: {
 					mqtt: {
+						useGlobalMqtt: false,
 						url: '',
 						user: '',
 						pwd: '',
-						topics: ''
+						topics: '',
+						global: {
+							url: '',
+							user: '',
+							pwd: '',
+							topics: ''
+						}
 					}
 				}
 			},
@@ -131,7 +143,7 @@
 			if (e.wheelDelta > 0) {
 				preview_data.config.svg.scale = myFixed(preview_data.config.svg.scale + 0.1, 1)
 				getZoomPosition(e, preview_data.config.svg.scale, preview_data.layout_center, true)
-			} else {
+			} else if (preview_data.config.svg.scale > 0.1) {
 				preview_data.config.svg.scale = myFixed(preview_data.config.svg.scale - 0.1, 1)
 				getZoomPosition(e, preview_data.config.svg.scale, preview_data.layout_center, false)
 			}
@@ -274,7 +286,12 @@
 	}
 
 	const connectNet = () => {
-		const m = preview_data.config.net.mqtt
+		let m
+		if (preview_data.config.net.mqtt.useGlobalMqtt) {
+			m = preview_data.config.net.mqtt.global
+		} else {
+			m = preview_data.config.net.mqtt
+		}
 		if (m && m.url && m.user && m.pwd && m.topics) {
 			link.sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
 				console.log(topics)

package/src/stores/config/index.ts

@@ -28,7 +28,16 @@ export const useConfigStore = defineStore('config-store', {
 		return {
 			svg: s,
 			connection_line: t,
-			net: { mqtt: { url: '', user: '', pwd: '', topics: '' } }
+			net: {
+				mqtt: {
+					useGlobalMqtt: false,
+					url: '',
+					user: '',
+					pwd: '',
+					topics: '',
+					global: { url: '', user: '', pwd: '', topics: '' }
+				}
+			}
 		}
 	},
 	getters: {},

package/src/stores/config/types.ts

@@ -11,9 +11,16 @@ export interface IPositionCenterSvg {
 
 export interface INet {
 	mqtt: {
+		useGlobalMqtt: boolean
 		url: string
 		user: string
 		pwd: string
 		topics: string
+		global: {
+			url: string
+			user: string
+			pwd: string
+			topics: string
+		}
 	}
 }

package/src/utils/mqtt-net.ts

@@ -17,7 +17,7 @@ class Link {
 		this.client = connect(_url, {
 			username: user.trim(),
 			password: pwd.trim(),
-			reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
+			reconnectPeriod: 120000 /*如果连不上，2分钟后重试*/
 		})
 
 		this.client?.on('connect', () => {

package/src/views/EditorS.vue

@@ -1,21 +1,22 @@
-<script setup lang="ts">
-	import SvgEditor from '@/components/svg-editor/index.vue'
-	import { useStore } from '@/stores/main'
-	import type { IDataModel } from '@/components/svg-editor/types'
-	import Preview from './Preview.vue'
-
-	const store = useStore()
-
-	const previewShow = ref(false)
-	function previewHandle(d: IDataModel) {
-		store.data = d
-		nextTick(function () {
-			previewShow.value = true
-		})
-	}
-</script>
-
-<template>
-	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
-	<Preview v-if="previewShow" @back="previewShow = false" />
-</template>
+<script setup lang="ts">
+	import SvgEditor from '@/components/svg-editor/index.vue'
+	import { useStore } from '@/stores/main'
+	import type { IDataModel } from '@/components/svg-editor/types'
+	import Preview from './Preview.vue'
+
+	const store = useStore()
+
+	const previewShow = ref(false)
+
+	function previewHandle(d: IDataModel) {
+		store.data = d
+		nextTick(function () {
+			previewShow.value = true
+		})
+	}
+</script>
+
+<template>
+	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" saveFile @onPreview="previewHandle" />
+	<Preview v-if="previewShow" @back="previewShow = false" />
+</template>