@zhangqingcq/vgce 0.0.31 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "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/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

@@ -34,6 +34,7 @@
 	import { useEditPrivateStore } from '@/stores/system'
 
 	//todo 优化自带组件使用体验
+	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
 	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
 		saveFile: false
 	})
@@ -41,13 +42,14 @@
 	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 +118,10 @@
 		}
 	}
 
+	function onLineMouseUp() {
+		centerRef.value.onCanvasMouseUp()
+	}
+
 	defineExpose({
 		setGraphNodeJson
 	})
@@ -143,8 +149,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,12 +3,19 @@
 	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,
+		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'
@@ -16,16 +23,11 @@
 	import { sub, close } from '@/utils/mqtt-net'
 
 	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 +52,6 @@
 			done_json: []
 		}
 	)
-	const globalStore = useGlobalStore(pinia)
 
 	const cursor_style = computed(() => (globalStore.intention == EGlobalStoreIntention.MoveCanvas ? 'grab' : 'default'))
 	const onCanvasMouseMove = (e: MouseEvent) => {
@@ -135,9 +136,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 +239,10 @@
 		}
 	}
 
+	const setNodeAttrByID = (id: string, attr: string, val: any) => {
+		return setArrItemByID(id, attr, val, preview_data.done_json)
+	}
+
 	onMounted(() => {
 		connectNet()
 	})
@@ -259,6 +261,7 @@
 		@mousemove="onCanvasMouseMove"
 		@mouseup="onCanvasMouseUp"
 		@mousewheel="onMousewheel"
+		@contextmenu="preventDefault"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -326,6 +329,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 +360,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;

package/src/utils/index.ts

@@ -4,16 +4,29 @@ import type { IConfigItem } from '@/config/types'
 import { EDoneJsonType } from '@/config/types'
 import type { IDoneJson, IPointCoordinate } from '@/stores/global/types'
 import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
-import { straight_line_system } from '@/components/config'
 import { useGlobalStore } from '@/stores/global'
 import { pinia } from '@/hooks'
 import { useConfigStore } from '@/stores/config'
 import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 import { kebabCase } from 'lodash-es'
+import { vueComp } from '@/config'
 
 export const stopEvent = (e: any) => {
 	e.stopPropagation()
 }
+export const preventDefault = (e: any) => {
+	e.preventDefault()
+}
+
+export function componentsRegister() {
+	//注册所有组件
+	const instance = getCurrentInstance()
+	for (let key in vueComp) {
+		if (!instance?.appContext?.components.hasOwnProperty(key) && vueComp.hasOwnProperty(key)) {
+			instance?.appContext?.app.component(key, vueComp[key])
+		}
+	}
+}
 
 /**
  * 生成随机字符串