@zhangqingcq/vgce 0.0.30 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.0.30",
+  "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,
@@ -16,7 +17,8 @@
 		prosToVBind,
 		randomString,
 		resetHandlePointOld,
-		setSvgActualInfo
+		setSvgActualInfo,
+		stopEvent
 	} from '@/utils'
 	import {
 		calculateBottom,
@@ -34,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> = {
@@ -209,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
@@ -940,6 +937,8 @@
 			}
 		})
 	})
+
+	defineExpose({ onCanvasMouseUp })
 </script>
 
 <template>
@@ -982,6 +981,7 @@
 					:key="item.id"
 					:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
 					v-show="item.display"
+					@mousewheel="stopEvent"
 				>
 					<g :class="`${getCommonClass(item)}`">
 						<g
@@ -1085,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
@@ -1134,6 +1138,8 @@
 </template>
 
 <style lang="less" scoped>
+	@import '@/assets/variables';
+
 	.canvas {
 		width: 100%;
 		height: 100%;
@@ -1166,14 +1172,6 @@
 		outline: 1px solid rgb(222, 69, 23);
 	}
 
-	.foreignObject {
-		> span {
-			/*解决span标签显示不完整的问题*/
-			position: relative;
-			bottom: 2px;
-		}
-	}
-
 	.contextMenu {
 		position: fixed;
 		z-index: 99999;
@@ -1206,7 +1204,7 @@
 		}
 
 		p:hover {
-			background-color: #0cf;
+			background-color: @listActiveColor;
 			color: #ffffff;
 			cursor: default;
 		}
@@ -1218,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, 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
@@ -226,12 +224,6 @@
 		}
 	}
 
-	onMounted(() => {
-		connectNet()
-	})
-
-	onBeforeUnmount(close)
-
 	const connectNet = () => {
 		const m = preview_data.config.net.mqtt
 		if (m && m.url && m.user && m.pwd && m.topics) {
@@ -247,6 +239,16 @@
 		}
 	}
 
+	const setNodeAttrByID = (id: string, attr: string, val: any) => {
+		return setArrItemByID(id, attr, val, preview_data.done_json)
+	}
+
+	onMounted(() => {
+		connectNet()
+	})
+
+	onBeforeUnmount(close)
+
 	defineExpose({
 		setNodeAttrByID
 	})
@@ -259,6 +261,7 @@
 		@mousemove="onCanvasMouseMove"
 		@mouseup="onCanvasMouseUp"
 		@mousewheel="onMousewheel"
+		@contextmenu="preventDefault"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -278,6 +281,10 @@
 					v-show="item.display"
 					:style="getStyle(item)"
 					@click="eventHandle(item, EEventType.Click)"
+					@mousedown="stopEvent"
+					@mousemove="stopEvent"
+					@mouseup="stopEvent"
+					@mousewheel="stopEvent"
 				>
 					<g :class="`${getCommonClass(item)}`">
 						<g
@@ -322,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"
@@ -352,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/config/types.ts

@@ -1,15 +1,7 @@
-/**
- * 组件分组数据格式
- * @property {string} groupType 组件分组类型
- * @property {string} title 组件分组标题
- * @property {Array} list 分组包含的组件项列表
- * @export
- * @interface IConfigComponentGroup
- */
 export interface IConfigComponentGroup {
-	groupType: string
-	title: string
-	list: Array<IConfigItem>
+	groupType: string //组件分组类型
+	title: string //组件分组标题
+	list: Array<IConfigItem> //分组包含的组件项列表
 }
 
 export type IConfig = IConfigComponentGroup[]

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

@@ -79,6 +79,11 @@ export const common_table: IConfigItem = {
 			type: EConfigItemPropsType.InputNumber,
 			val: 200
 		},
+		maxHeight: {
+			title: '最大高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 200
+		},
 		stripe: {
 			title: '斑马纹',
 			type: EConfigItemPropsType.Switch,

package/src/stores/system/index.ts

@@ -99,7 +99,7 @@ export const useContextMenuStore = defineStore('context-menu-store', {
 			switch (type) {
 				case EContextMenuInfoType.Copy:
 					const temp_item = objectDeepClone<IDoneJson>(globalStore.handle_svg_info.info)
-					temp_item.id = temp_item.name + randomString()
+					temp_item.id = randomString()
 					temp_item.title += '-copy'
 					temp_item.x += 10
 					temp_item.y += 10