@zhangqingcq/vgce 0.1.29 → 0.1.31

package/package.json

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

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

@@ -11,15 +11,15 @@
 		getCenterPoint,
 		getCommonClass,
 		getSvgNowPosition,
+		getZoomPosition,
 		moveAnchors,
 		moveHandlePoint,
+		myFixed,
 		objectDeepClone,
 		prosToVBind,
 		randomString,
 		resetHandlePointOld,
-		setSvgActualInfo,
-		getZoomPosition,
-		myFixed
+		setSvgActualInfo
 	} from '@/utils'
 	import {
 		calculateBottom,
@@ -33,8 +33,7 @@
 	} from '@/utils/scale-core'
 	import HandlePanel from '@/components/svg-editor/handle-panel.vue'
 	import ConnectionPanel from '@/components/svg-editor/connection-panel.vue'
-	import type { IConfigItem } from '@/config/types'
-	import { EDoneJsonType } from '@/config/types'
+	import { EDoneJsonType, type IConfigItem } from '@/config/types'
 	import ConnectionLine from '@/components/svg-editor/connection-line.vue'
 	import type { IVisibleInfo } from '../config'
 	import { useContextMenuStore, useEditPrivateStore } from '@/stores/system'
@@ -207,11 +206,15 @@
 		canvasRef.value?.focus()
 		if (globalStore.intention === EGlobalStoreIntention.Connection) {
 			e.stopPropagation()
+			if (!globalStore.handle_svg_info) {
+				//空白地方画线
+				createLine(e)
+			}
 			if (globalStore.handle_svg_info) {
 				if (e.button === 0) {
 					//鼠标左键创建新线段
 					const l = globalStore.handle_svg_info.info.props.point_position.val
-					if (l.length > 1 && l[0].x !== l[1].x && l[0].y !== l[1].y) {
+					if (l.length !== 1 && select_item?.type !== EDoneJsonType.ConnectionLine) {
 						//鼠标移动后的实时位置（相对于起始点，只在创建第一个点时记录了鼠标原始位置）
 						l.push({
 							x:
@@ -223,6 +226,12 @@
 								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 (e.button === 2) {
 					//鼠标右键结束线段绘制

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

@@ -105,6 +105,7 @@
 		}
 	}
 	const bindAnchor = (e: any, type: ELineBindAnchors) => {
+		e.stopPropagation()
 		if (globalStore.intention === EGlobalStoreIntention.None) {
 			createLine(e, type, props.itemInfo)
 			if (globalStore.handle_svg_info) {

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

@@ -67,7 +67,6 @@
 
 	const canZoom = computed(() => props.itemInfo.config.can_zoom)
 	const onHandleMouseDown = (type: EScaleInfoType, e: MouseEvent) => {
-		console.log('handMousedown', e)
 		const { clientX, clientY } = e
 		e.stopPropagation()
 		globalStore.intention = EGlobalStoreIntention.Zoom

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

@@ -36,6 +36,11 @@
 		set(v: any) {
 			globalStore.intention = v ? EGlobalStoreIntention.Connection : EGlobalStoreIntention.None
 			if (v) {
+				globalStore.done_json.forEach((e: Record<string, any>) => {
+					if (e?.selected) {
+						e.selected = false
+					}
+				})
 				globalStore.setHandleSvgInfo(null)
 			}
 		}
@@ -157,16 +162,16 @@
 		<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>
 			<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 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/config/vue/component/common-table.ts

@@ -19,7 +19,7 @@ const t: IConfigItem = {
 			val: [
 				{
 					prop: 'date',
-					label: '第一列',
+					label: '序号',
 					width: '120px',
 					fixed: false,
 					sortable: false,
@@ -27,7 +27,7 @@ const t: IConfigItem = {
 				},
 				{
 					prop: 'name',
-					label: '第二列',
+					label: '名字',
 					width: '120px',
 					fixed: false,
 					sortable: false,
@@ -35,7 +35,7 @@ const t: IConfigItem = {
 				},
 				{
 					prop: 'address',
-					label: '第三列测试',
+					label: '年龄',
 					width: '280px',
 					fixed: false,
 					sortable: false,
@@ -48,31 +48,31 @@ const t: IConfigItem = {
 			type: EConfigItemPropsType.JsonEdit,
 			val: [
 				{
-					date: '2016-05-03',
-					name: 'Tom',
-					address: 'No. 189, Grove St, Los Angeles'
+					date: '1',
+					name: 'Jack',
+					address: '34'
 				},
 				{
-					date: '2016-05-02',
-					name: 'Tom',
-					address: 'No. 189, Grove St, Los Angeles'
+					date: '2',
+					name: 'Marry',
+					address: '18'
 				},
 				{
-					date: '2016-05-04',
-					name: 'Tom',
-					address: 'No. 189, Grove St, Los Angeles'
+					date: '3',
+					name: 'Lee',
+					address: '23'
 				},
 				{
-					date: '2016-05-01',
-					name: 'Tom',
-					address: 'No. 189, Grove St, Los Angeles'
+					date: '4',
+					name: 'Steve',
+					address: '31'
 				}
 			]
 		},
 		width: {
 			title: '宽度',
 			type: EConfigItemPropsType.InputNumber,
-			val: 500
+			val: 350
 		},
 		height: {
 			title: '高度',

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

@@ -28,24 +28,24 @@ const t: IConfigItem = {
 			type: EConfigItemPropsType.JsonEdit,
 			val: [
 				{
-					value: 1048,
-					name: '办公楼A'
+					value: 998,
+					name: '20岁以下'
 				},
 				{
-					value: 735,
-					name: '办公楼B'
+					value: 546,
+					name: '20-40岁'
 				},
 				{
-					value: 580,
-					name: '保安室'
+					value: 354,
+					name: '40-60岁'
 				},
 				{
-					value: 484,
-					name: '地下车库'
+					value: 421,
+					name: '60-70岁'
 				},
 				{
-					value: 300,
-					name: '食堂'
+					value: 607,
+					name: '70岁以上'
 				}
 			]
 		}

package/src/stores/system/index.ts

@@ -29,7 +29,6 @@ export const useEditPrivateStore = defineStore('edit-private-store', {
 	},
 	actions: {
 		topUndoBtnClick() {
-			console.log('撤销')
 			if (this.history_now_index < 1) {
 				return
 			}
@@ -40,7 +39,6 @@ export const useEditPrivateStore = defineStore('edit-private-store', {
 			global_store.setDoneJson(this.history_doneComponent[this.history_now_index])
 		},
 		topRedoBtnClick() {
-			console.log('重做')
 			if (this.history_now_index + 1 == this.history_doneComponent.length) {
 				return
 			}