@zhangqingcq/vgce 0.0.31 → 0.0.33

package/package.json

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

package/src/assets/base.less

@@ -1,3 +1,5 @@
+@import '@/assets/variables';
+
 *,
 *::before,
 *::after {
@@ -44,15 +46,15 @@ body {
 }
 
 .icon-out {
-  fill: #64A0CF;
+  fill: @iconOutColor;
 }
 
 .icon-in {
-  fill: #9EEFD9;
+  fill: @iconInColor;
 }
 
 .icon-middle {
-  fill: #33DEB4;
+  fill: @iconMiddleColor;
 }
 
 .gray{
@@ -71,15 +73,15 @@ body {
 
 .active{
   .icon-out {
-    fill: #008fff;
+    fill: @activeIconOut;
   }
 
   .icon-in {
-    fill: #44fac9;
+    fill: @activeIconIn;
   }
 
   .icon-middle {
-    fill: #00ffc0;
+    fill: @activeIconMiddle;
   }
 }
 
@@ -95,3 +97,18 @@ body {
     color: #aaa;
   }
 }
+
+.foreignObject {
+  > span {
+    /*解决span标签显示不完整的问题*/
+    position: relative;
+    bottom: 2px;
+  }
+}
+
+.tree-v {
+  --el-color-primary-light-9: @listActiveColor;
+  &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+    color: #fff;
+  }
+}

package/src/assets/svgs/clock-a.svg

@@ -1,23 +1,23 @@
 <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-    <path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF"/>
+    <path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#B3A7FF"/>
     <path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF"/>
-    <path d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
-          fill="#2D416C">
-        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-45 512 512"
-                          to="315 512 512" dur="43200s" repeatCount="indefinite"/>
-    </path>
     <path d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
-          fill="#365087">
+          fill="#50E68E">
         <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45 512 512"
                           to="405 512 512" dur="3600s" repeatCount="indefinite"/>
     </path>
-    <path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087"/>
+    <path d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
+          fill="#9A36E7">
+        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-45 512 512"
+                          to="315 512 512" dur="43200s" repeatCount="indefinite"/>
+    </path>
+    <path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#F45AFC"/>
     <path d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
-          fill="#2D416C"/>
+          fill="#4942CF"/>
     <path d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
-          fill="#C11B16">
+          fill="#E83E24">
         <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="135 512 512"
                           to="495 512 512" dur="60s" repeatCount="indefinite"/>
     </path>
-    <path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#FFFFFF"/>
+    <path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#EBF257"/>
 </svg>

package/src/assets/variables.less

@@ -0,0 +1,8 @@
+//颜色
+@listActiveColor: #6ab4ff;
+@iconOutColor:#5fadff;
+@iconInColor:#9EEFD9;
+@iconMiddleColor:#33DEB4;
+@activeIconOut:#008fff;
+@activeIconIn:#44fac9;
+@activeIconMiddle:#00ffc0;

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

@@ -6,6 +6,7 @@
 	import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from '@/stores/global/types'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 	import {
+		componentsRegister,
 		createLine,
 		getCenterPoint,
 		getCommonClass,
@@ -35,24 +36,17 @@
 	import { EDoneJsonType } from '@/config/types'
 	import ConnectionLine from '@/components/svg-editor/connection-line.vue'
 	import type { IVisibleInfo } from '../config'
-	import { vueComp } from '@/config'
 	import { useContextMenuStore, useEditPrivateStore } from '@/stores/system'
 	import { EContextMenuInfoType } from '@/stores/system/types'
-	import { computed } from 'vue'
+	import ImportJson from '@/components/svg-editor/import-json.vue'
 
-	//注册所有组件
-	const instance = getCurrentInstance()
-	Object.keys(vueComp).forEach((key) => {
-		if (!Object.keys(instance?.appContext?.components as any).includes(key)) {
-			// @ts-ignore
-			instance?.appContext.app.component(key, vueComp[key])
-		}
-	})
 	const globalStore = useGlobalStore(pinia)
 	const configStore = useConfigStore(pinia)
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const editPrivateStore = useEditPrivateStore(pinia)
 	const contextMenuStore = useContextMenuStore(pinia)
+
+	componentsRegister()
 	const contextMenuRef = ref<HTMLElement>()
 	const canvasRef = ref<HTMLElement>()
 	const ct: Record<string, any> = {
@@ -210,17 +204,19 @@
 	const onSvgMouseDown = (select_item: IDoneJson, index: number, e: MouseEvent) => {
 		canvasRef.value?.focus()
 		if (globalStore.intention === EGlobalStoreIntention.Connection) {
+			e.stopPropagation()
 			return
 		}
 		e.preventDefault()
 		e.stopPropagation()
 		if (e.ctrlKey && e.button === 0) {
 			//ctrl+鼠标左键 多选组件
-			if (globalStore.handle_svg_info?.index) {
+			if (globalStore.handle_svg_info?.index || globalStore.handle_svg_info?.index === 0) {
 				globalStore.done_json[globalStore.handle_svg_info.index].selected = true
 				globalStore.setHandleSvgInfo(null)
-				select_item.selected = !select_item.selected
+				globalStore.intention = EGlobalStoreIntention.None
 			}
+			select_item.selected = !select_item.selected
 		} else if (isGroup.value) {
 			//有框选的组件
 			globalStore.intention = EGlobalStoreIntention.GroupMove
@@ -941,6 +937,8 @@
 			}
 		})
 	})
+
+	defineExpose({ onCanvasMouseUp })
 </script>
 
 <template>
@@ -1087,7 +1085,11 @@
 							/>
 
 							<handle-panel
-								v-if="globalStore.handle_svg_info?.info.id === item.id && visible_info.handle_panel"
+								v-if="
+									globalStore.handle_svg_info?.info.id === item.id &&
+									visible_info.handle_panel &&
+									item.type !== EDoneJsonType.ConnectionLine
+								"
 								:item-info="item"
 							/>
 							<connection-panel
@@ -1136,6 +1138,8 @@
 </template>
 
 <style lang="less" scoped>
+	@import '@/assets/variables';
+
 	.canvas {
 		width: 100%;
 		height: 100%;
@@ -1168,14 +1172,6 @@
 		outline: 1px solid rgb(222, 69, 23);
 	}
 
-	.foreignObject {
-		> span {
-			/*解决span标签显示不完整的问题*/
-			position: relative;
-			bottom: 2px;
-		}
-	}
-
 	.contextMenu {
 		position: fixed;
 		z-index: 99999;
@@ -1208,7 +1204,7 @@
 		}
 
 		p:hover {
-			background-color: #0cf;
+			background-color: @listActiveColor;
 			color: #ffffff;
 			cursor: default;
 		}
@@ -1220,6 +1216,7 @@
 		.disabled:hover {
 			color: #999;
 			background-color: transparent;
+			cursor: not-allowed;
 		}
 
 		li.separator {

package/src/components/svg-editor/component-tree.vue

@@ -6,7 +6,7 @@
 	import type { IDoneJson } from '@/stores/global/types'
 
 	const global_store = useGlobalStore(pinia)
-	const current_node_key = ref(global_store.handle_svg_info?.info.id || '')
+	const current_node_key = computed(() => global_store.handle_svg_info?.info.id ?? '')
 	const handleNodeClick = (data: IDoneJson) => {
 		for (let e of global_store.done_json) {
 			e.selected = false
@@ -24,12 +24,13 @@
 
 <template>
 	<el-tree
+		class="tree-v"
 		:data="global_store.done_json"
 		:props="defaultProps"
 		@node-click="handleNodeClick"
 		:default-expand-all="true"
 		:expand-on-click-node="false"
-		:highlight-current="true"
+		:highlight-current="Boolean(current_node_key)"
 		node-key="id"
 		:current-node-key="current_node_key"
 	/>

package/src/components/svg-editor/connection-line.vue

@@ -40,7 +40,29 @@
 </script>
 
 <template>
-	<g>
+	<g :style="{ cursor: globalStore.intention === EGlobalStoreIntention.Connection ? 'crosshair' : 'move' }">
+		<!-- 选中效果 -->
+		<path
+			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
+			fill="none"
+			fill-opacity="0"
+			stroke="#DE4517"
+			:stroke-width="props.itemInfo.props['stroke-width'].val + 1"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			v-show="props.itemInfo.selected || props.itemInfo.id === globalStore.handle_svg_info?.info.id"
+		/>
+		<!-- 打底 -->
+		<path
+			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
+			fill="none"
+			fill-opacity="0"
+			stroke="#fff"
+			stroke-opacity=".01"
+			:stroke-width="props.itemInfo.props['stroke-width'].val"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
 		<path
 			:id="props.itemInfo.id"
 			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
@@ -51,13 +73,13 @@
 					: props.itemInfo.props.stroke.val
 			"
 			:stroke-width="props.itemInfo.props['stroke-width'].val"
-			:style="{ cursor: globalStore.intention === EGlobalStoreIntention.Connection ? 'crosshair' : 'move' }"
 			stroke-dashoffset="0"
 			:stroke-dasharray="
 				props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
 					? props.itemInfo.props['stroke-width'].val * 3
 					: 0
 			"
+			stroke-linejoin="round"
 		>
 			<animate
 				v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity"
@@ -79,6 +101,7 @@
 			:stroke-dasharray="props.itemInfo.props['stroke-width'].val * 3"
 			stroke-dashoffset="0"
 			stroke-linecap="round"
+			stroke-linejoin="round"
 		>
 			<animate
 				attributeName="stroke-dashoffset"
@@ -94,7 +117,7 @@
 			v-else-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Track"
 			cx="0"
 			cy="0"
-			:r="props.itemInfo.props['stroke-width'].val * 2"
+			:r="Math.ceil(props.itemInfo.props['stroke-width'].val * 0.6) + 2"
 			:fill="props.itemInfo.animations.color.val"
 		>
 			<animateMotion
@@ -110,8 +133,21 @@
 			>
 			</animateMotion>
 		</circle>
-		<!-- 更改线段 -->
 		<g>
+			<!-- 节点选中效果 -->
+			<circle
+				v-for="(item, index) in props.itemInfo.props.point_position.val"
+				:key="index"
+				:cx="item.x"
+				:cy="item.y"
+				:r="props.itemInfo.props.point_r.val + 1"
+				fill="none"
+				fill-opacity="0"
+				stroke-width="1"
+				stroke="#DE4517"
+				v-show="props.itemInfo.selected || props.itemInfo.id === globalStore.handle_svg_info?.info.id"
+			/>
+			<!-- 更改线段 -->
 			<circle
 				v-for="(item, index) in props.itemInfo.props.point_position.val"
 				:key="index"

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

@@ -6,6 +6,7 @@
 	import { createLine, getCoordinateOffset, moveAnchors } from '@/utils'
 	import { useGlobalStore } from '@/stores/global'
 	import { pinia } from '@/hooks'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 
 	const props = defineProps<{
 		itemInfo: IDoneJson
@@ -15,6 +16,7 @@
 	const radius = ref(4)
 	const outRadius = ref(12)
 	const globalStore = useGlobalStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 
 	const cxT = computed(
 		() => props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2 - offset.value + radius.value
@@ -105,6 +107,28 @@
 	const bindAnchor = (e: any, type: ELineBindAnchors) => {
 		if (globalStore.intention === EGlobalStoreIntention.None) {
 			createLine(e, type, props.itemInfo)
+			if (globalStore.handle_svg_info) {
+				//鼠标左键创建新线段
+				if (globalStore.handle_svg_info.info.props.point_position.val.length !== 1) {
+					//鼠标移动后的实时位置（相对于起始点，只在创建第一个点时记录了鼠标原始位置）
+					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 {
+					//第二个点，在鼠标没有移动的情况下，就是起始点
+					globalStore.handle_svg_info.info.props.point_position.val.push({
+						x: 0,
+						y: 0
+					})
+				}
+			}
 		} else if (globalStore.intention === EGlobalStoreIntention.Connection) {
 			//在连线的情况下，点击锚点，结束连线并绑定锚点
 			e.stopPropagation()

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

@@ -32,8 +32,12 @@
 	import { useConfigStore } from '@/stores/config'
 	import { fileRead, fileWrite } from '@/utils/file-read-write'
 	import { useEditPrivateStore } from '@/stores/system'
+	import { setEditorLoadTime } from '@/utils'
+
+	setEditorLoadTime()
 
 	//todo 优化自带组件使用体验
+	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
 	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
 		saveFile: false
 	})
@@ -41,13 +45,13 @@
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const configStore = useConfigStore(pinia)
 	const editPrivateStore = useEditPrivateStore(pinia)
+	const centerRef = ref()
 	const importJsonRef = ref<InstanceType<typeof ImportJson>>()
 	const visible_conf: IVisibleConf = reactive({
 		[EVisibleConfKey.ExportJson]: false,
 		[EVisibleConfKey.ImportJson]: false,
 		[EVisibleConfKey.ImportFile]: false
 	})
-	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
 	const changeVisible = (key: EVisibleConfKey, val: boolean) => {
 		visible_conf[key] = val
 	}
@@ -116,6 +120,10 @@
 		}
 	}
 
+	function onLineMouseUp() {
+		centerRef.value.onCanvasMouseUp()
+	}
+
 	defineExpose({
 		setGraphNodeJson
 	})
@@ -143,8 +151,8 @@
 				</el-aside>
 				<el-main class="middle main">
 					<div class="canvas-main-pc">
-						<Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler">
-							<center-panel />
+						<Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler" @onLineMouseUp="onLineMouseUp">
+							<center-panel ref="centerRef" />
 						</Vue3RulerTool>
 					</div>
 				</el-main>

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

@@ -156,13 +156,15 @@
 	<el-dialog v-model="open" title="使用说明" width="60%" class="guide-dialog">
 		<el-scrollbar max-height="60vh">
 			<div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
-			<div>鼠标按住左键可以框选，也可以按住ctrl+鼠标左键点图形进行多选</div>
+			<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>
-			<div>右键画布然后拖动即可，右侧面板‘图纸’栏可微调或重置位置</div>
+			<div>在画布空白区域按住右键可拖动画布，右侧面板‘图纸’栏可微调或重置位置</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>
-			<div>使用鼠标滚轮或者右侧面板‘图纸’栏可控制画布缩放</div>
+			<div>在画布空白区使用鼠标滚轮或者右侧面板‘图纸’栏可控制画布缩放</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>
 			<div>在标尺区域按住鼠标左键并拖动即可创建标尺辅助线，将标尺辅助线拖动到标尺区域即可删除标尺辅助线</div>

package/src/components/svg-viewer.vue

@@ -3,29 +3,34 @@
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'
-	import { getCommonClass, prosToVBind, setArrItemByID, stopEvent, valFormat } from '@/utils'
+	import {
+		componentsRegister,
+		getCommonClass,
+		preventDefault,
+		prosToVBind,
+		setArrItemByID,
+		setEditorLoadTime,
+		stopEvent,
+		valFormat
+	} from '@/utils'
 
 	import { EDoneJsonType, EEventAction, EEventType } from '@/config/types'
 	import ConnectionLine from '@/components/svg-editor/connection-line.vue'
 
-	import { vueComp } from '@/config'
 	import type { IDataModel } from '@/components/svg-editor/types'
 	import 'element-plus/dist/index.css'
 	import 'animate.css'
 
 	import { sub, close } from '@/utils/mqtt-net'
 
+	setEditorLoadTime()
+
 	const emit = defineEmits(['onMessage'])
-	//注册所有组件
-	const instance = getCurrentInstance()
-	Object.keys(vueComp).forEach((key: string) => {
-		if (!Object.keys(instance?.appContext?.components as any).includes(key)) {
-			instance?.appContext.app.component(key, vueComp[key])
-		}
-	})
 	const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
 		canvasDrag: true
 	})
+	const globalStore = useGlobalStore(pinia)
+	componentsRegister()
 	const preview_data = reactive(
 		props.data ?? {
 			layout_center: {
@@ -50,7 +55,6 @@
 			done_json: []
 		}
 	)
-	const globalStore = useGlobalStore(pinia)
 
 	const cursor_style = computed(() => (globalStore.intention == EGlobalStoreIntention.MoveCanvas ? 'grab' : 'default'))
 	const onCanvasMouseMove = (e: MouseEvent) => {
@@ -135,9 +139,6 @@
 			height: actual_bound.height * scale_y
 		}
 	}
-	const setNodeAttrByID = (id: string, attr: string, val: any) => {
-		return setArrItemByID(id, attr, val, preview_data.done_json)
-	}
 
 	const getStyle = (root: IDoneJson) => {
 		let t = false
@@ -241,6 +242,10 @@
 		}
 	}
 
+	const setNodeAttrByID = (id: string, attr: string, val: any) => {
+		return setArrItemByID(id, attr, val, preview_data.done_json)
+	}
+
 	onMounted(() => {
 		connectNet()
 	})
@@ -259,6 +264,7 @@
 		@mousemove="onCanvasMouseMove"
 		@mouseup="onCanvasMouseUp"
 		@mousewheel="onMousewheel"
+		@contextmenu="preventDefault"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -326,6 +332,7 @@
 								v-else-if="item.type === EDoneJsonType.Vue"
 								v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
 								:id="`foreign-object${item.id}`"
+								class="foreignObject"
 							>
 								<component
 									:is="item.tag"
@@ -356,24 +363,6 @@
 		cursor: v-bind('cursor_style');
 	}
 
-	.svg-item-none {
-		cursor: move;
-
-		&:hover {
-			outline: 1px solid #f8d032;
-		}
-	}
-
-	.svg-item-move {
-		cursor: move;
-		outline: 1px dashed rgb(149, 23, 222);
-	}
-
-	.svg-item-select {
-		cursor: move;
-		outline: 1px solid rgb(149, 23, 222);
-	}
-
 	.common-ani {
 		transform-box: fill-box;
 	}

package/src/components/vue3-ruler-tool.vue

@@ -2,7 +2,9 @@
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 	import { useConfigStore } from '@/stores/config'
+	import { preventDefault, stopEvent } from '@/utils'
 
+	const emit = defineEmits(['onLineMouseUp'])
 	const props = withDefaults(
 		defineProps<{
 			visible?: boolean
@@ -291,6 +293,10 @@
 		dragFlag = 'v'
 		dragLineId = id
 	}
+
+	const lineMouseUp = () => {
+		emit('onLineMouseUp')
+	}
 </script>
 
 <template>
@@ -317,6 +323,8 @@
 				:key="item.id"
 				:class="`vue-ruler-ref-line-${item.type}`"
 				@mousedown="handleDragLine(item)"
+				@mouseup="lineMouseUp"
+				@contextmenu="preventDefault"
 			/>
 		</section>
 		<div ref="content" class="vue-ruler-content" :style="contentStyle">
@@ -427,6 +435,7 @@
 		height: 4px;
 		cursor: n-resize;
 		border-top: 1px dashed #999;
+
 		span {
 			left: 30px;
 			top: 3px;
@@ -439,6 +448,7 @@
 		_height: 9999px;
 		cursor: w-resize;
 		border-left: 1px dashed #999;
+
 		span {
 			top: 30px;
 			left: 7px;