@zhangqingcq/vgce 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"
@@ -58,7 +58,7 @@
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.1",
-    "element-plus": "2.8.0",
+    "element-plus": "2.8.6",
     "lodash-es": "^4.17.21",
     "mqtt": "5.1.3",
     "pinia": "^2.1.3",

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

@@ -287,6 +287,7 @@
 			}
 		}
 	}
+
 	const onSvgMouseEnter = (select_item: IDoneJson, index: number, e: MouseEvent) => {
 		e.preventDefault()
 		e.stopPropagation()
@@ -613,6 +614,7 @@
 			}
 		}
 	}
+
 	const onCanvasMouseUp = () => {
 		//如果鼠标不是按下状态
 		if (globalStore.mouse_info.state != EMouseInfoState.Down) {
@@ -666,7 +668,11 @@
 			globalStore.setHandleSvgInfo(null)
 			for (let e of globalStore.done_json) {
 				const t = selectRect.value
-				e.selected = e.x > t.x && e.x < t.x + t.with && e.y > t.y && e.y < t.y + t.height
+				e.selected =
+					e.center_position.x > t.x &&
+					e.center_position.x < t.x + t.with &&
+					e.center_position.y > t.y &&
+					e.center_position.y < t.y + t.height
 			}
 			globalStore.intention = EGlobalStoreIntention.None
 		} else if (globalStore.intention != EGlobalStoreIntention.Select) {
@@ -683,6 +689,7 @@
 		}
 		contextMenuStore.display = false
 	}
+
 	const onCanvasMouseDown = (e: MouseEvent) => {
 		const { clientX, clientY } = e
 		if (globalStore.intention === EGlobalStoreIntention.Connection) {
@@ -765,6 +772,32 @@
 		}
 	}
 
+	const onLineMouseDown = (e: Record<string, any>) => {
+		if (globalStore.intention === EGlobalStoreIntention.Connection && globalStore.handle_svg_info) {
+			if (e.button === 0) {
+				//鼠标左键创建新线段
+				if (globalStore.handle_svg_info.info.props.point_position.val.length !== 2) {
+					//鼠标移动后的实时位置（相对于起始点，只在创建第一个点时记录了鼠标原始位置）
+					globalStore.handle_svg_info.info.props.point_position.val.push({
+						x:
+							globalStore.mouse_info.new_position_x -
+							globalStore.mouse_info.position_x -
+							svgEditLayoutStore.center_offset.x,
+						y:
+							globalStore.mouse_info.new_position_y -
+							globalStore.mouse_info.position_y -
+							svgEditLayoutStore.center_offset.y
+					})
+				}
+			} else if (e.button === 2) {
+				//鼠标右键结束线段绘制
+				globalStore.intention = EGlobalStoreIntention.None
+				setSvgActualInfo(globalStore.done_json[globalStore.handle_svg_info.index])
+				globalStore.setHandleSvgInfo(null)
+			}
+		}
+	}
+
 	function onMousewheel(e: any) {
 		if (e?.wheelDelta) {
 			if (e.wheelDelta > 0) {
@@ -1003,6 +1036,7 @@
 									v-if="item.type === EDoneJsonType.ConnectionLine"
 									:item-info="item"
 									:point-visible="visible_info.connection_line && visible_info.select_item.info?.id == item.id"
+									@mousedown="onLineMouseDown"
 								/>
 								<use
 									v-else-if="item.type === EDoneJsonType.File"

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

@@ -157,7 +157,7 @@
 		<el-scrollbar max-height="60vh">
 			<div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
 			<div
-				>在画布空白区域按住鼠标左键可以框选（图形坐标在框选区域即判定被选中），也可以按住ctrl+鼠标左键点图形进行多选</div
+				>在画布空白区域按住鼠标左键可以框选（图形中心点在框选区域即判定被选中），也可以按住ctrl+鼠标左键点图形进行多选</div
 			>
 			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">拖动画布</div>

package/src/components/svg-viewer.vue

@@ -25,7 +25,7 @@
 	import 'element-plus/dist/index.css'
 	import 'animate.css'
 
-	import { sub, close } from '@/utils/mqtt-net'
+	import Link from '@/utils/mqtt-net'
 
 	setEditorLoadTime()
 
@@ -37,6 +37,8 @@
 			showCanvasInfo: true
 		}
 	)
+
+	let link: any = Link()
 	const globalStore = useGlobalStore(pinia)
 	componentsRegister(props.vueComp)
 	const preview_data = reactive(
@@ -274,7 +276,7 @@
 	const connectNet = () => {
 		const m = preview_data.config.net.mqtt
 		if (m && m.url && m.user && m.pwd && m.topics) {
-			sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
+			link.sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
 				console.log(topics)
 				console.log(message.toString())
 				//暴露给外部，让用户自己处理消息，message可以用JSON.parse解析成对象（后端推给前端的MQTT消息内容需要是JSON格式）
@@ -310,7 +312,12 @@
 		connectNet()
 	})
 
-	onBeforeUnmount(close)
+	onBeforeUnmount(() => {
+		link.close(() => {
+			link.destroy()
+			link = null
+		})
+	})
 
 	defineExpose({
 		setNodeAttrByID

package/src/config/svg/animation/thermometer.ts

@@ -6,7 +6,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.File,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/svg/custom/clock-a.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.CustomSvg,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/svg/custom/light.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.CustomSvg,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/svg/custom/svg-text.ts

@@ -9,7 +9,7 @@ const t: IConfigItem = {
 	display: true,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	props: {

package/src/config/svg/custom/switch-r.ts

@@ -9,7 +9,7 @@ const t: IConfigItem = {
 	display: true,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	props: {

package/src/config/svg/stateful/alert-light.ts

@@ -7,7 +7,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.File,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/vue/component/button.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.Vue,
 	config: {
 		can_zoom: false,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/vue/component/common-table.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.Vue,
 	config: {
 		can_zoom: false,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/vue/component/progress.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.Vue,
 	config: {
 		can_zoom: false,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/vue/component/tag.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.Vue,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/config/vue/echarts/pie-charts.ts

@@ -8,7 +8,7 @@ const t: IConfigItem = {
 	type: EDoneJsonType.Vue,
 	config: {
 		can_zoom: true,
-		have_anchor: true,
+		have_anchor: false,
 		actual_rect: true
 	},
 	display: true,

package/src/utils/mqtt-net.ts

@@ -1,59 +1,74 @@
 import { connect } from 'mqtt/dist/mqtt'
 import type { MqttClient, PacketCallback } from 'mqtt'
 
-let client: MqttClient
+class Link {
+	client: MqttClient | null
 
-export const sub = (url: string, user: string, pwd: string, topics: string, callback: any) => {
-	const _url = url.trim()
-	if (!/^wss?:\/\/.*$/.test(_url)) {
-		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
-		return
+	constructor() {
+		this.client = null
 	}
-	client = connect(_url, {
-		username: user.trim(),
-		password: pwd.trim(),
-		reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
-	})
-
-	client.on('connect', () => {
-		console.log('MQTT服务器连接成功')
-		console.log(client.options.clientId)
-		client.subscribe(topics, { qos: 1 })
-	})
-
-	client.on('message', callback)
-}
 
-export const pub = (url: string, user: string, pwd: string, topics: string, data: any, callback: PacketCallback) => {
-	const _url = url.trim()
-	if (!/^wss?:\/\/.*$/.test(_url)) {
-		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
-		return
+	sub(url: string, user: string, pwd: string, topics: string, callback: any) {
+		const _url = url.trim()
+		if (!/^wss?:\/\/.*$/.test(_url)) {
+			console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+			return false
+		}
+		this.client = connect(_url, {
+			username: user.trim(),
+			password: pwd.trim(),
+			reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
+		})
+
+		this.client?.on('connect', () => {
+			console.log('MQTT服务器连接成功')
+			console.log(this.client?.options.clientId)
+			this.client?.subscribe(topics, { qos: 1 })
+		})
+
+		this.client?.on('message', callback)
 	}
-	client = connect(_url, {
-		username: user.trim(),
-		password: pwd.trim()
-	})
-
-	client.on('connect', () => {
-		console.log('MQTT服务器连接成功')
-		console.log(client.options.clientId)
-		client.publish(
-			topics,
-			JSON.stringify(data),
-			{
-				qos: 0,
-				retain: true
-			},
-			callback
-		)
-	})
-}
 
-export const close = () => {
-	if (client && client.end) {
-		client.end(true, {}, () => {
+	pub(url: string, user: string, pwd: string, topics: string, data: any, callback: PacketCallback) {
+		const _url = url.trim()
+		if (!/^wss?:\/\/.*$/.test(_url)) {
+			console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+			return false
+		}
+		this.client = connect(_url, {
+			username: user.trim(),
+			password: pwd.trim()
+		})
+
+		this.client?.on('connect', () => {
+			console.log('MQTT服务器连接成功')
+			console.log(this.client?.options.clientId)
+			this.client?.publish(
+				topics,
+				JSON.stringify(data),
+				{
+					qos: 0,
+					retain: true
+				},
+				callback
+			)
+		})
+	}
+
+	close(callback?: () => void) {
+		this.client?.end?.(true, {}, () => {
 			console.log('MQTT服务连接关闭')
+			callback?.()
 		})
 	}
+
+	destroy() {
+		this.client = null
+	}
+}
+
+const t = function () {
+	return new Link()
 }
+
+export default t

package/src/views/Preview.vue

@@ -15,7 +15,7 @@
 <template>
 	<div class="previewPage">
 		<svg-viewer :data="store.data" />
-		<el-button type="text" @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
+		<el-button link @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
 	</div>
 </template>