@zhangqingcq/vgce 0.0.24 → 0.0.26

package/package.json

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

package/src/components/config/index.ts

@@ -65,6 +65,11 @@ export const connection_line_system: ISystemStraightLine = {
 			type: EConfigItemPropsType.InputNumber,
 			val: 2
 		},
+		point_r: {
+			title: '节点半径',
+			type: EConfigItemPropsType.InputNumber,
+			val: 4
+		},
 		point_position: {
 			title: '点坐标',
 			type: EConfigItemPropsType.JsonEdit,

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

@@ -57,7 +57,8 @@
 	const ct: Record<string, any> = {
 		MoveCanvas: 'grab',
 		Rotate: "url('/src/assets/icons/rotate.svg'), auto",
-		Connection: 'crosshair'
+		Connection: 'crosshair',
+		SetConnectionLineNode: 'crosshair'
 	}
 	const cursor_style = computed(() => {
 		if (Object.keys(ct).indexOf(globalStore.intention) > -1) {
@@ -119,6 +120,7 @@
 	})
 
 	let groupMoved = false
+	let lineNodeMoved = false
 
 	const dropEvent = (e: Record<string, any>) => {
 		if (globalStore.intention == EGlobalStoreIntention.None) {
@@ -342,6 +344,7 @@
 			(globalStore.intention === EGlobalStoreIntention.Select || globalStore.intention === EGlobalStoreIntention.Move)
 		) {
 			//有选中组件 移动单个组件
+			//todo 对齐功能开发
 			globalStore.handle_svg_info.info.x = x
 
 			globalStore.handle_svg_info.info.y = y
@@ -559,8 +562,9 @@
 			const _y =
 				globalStore.mouse_info.new_position_y - globalStore.mouse_info.position_y - svgEditLayoutStore.center_offset.y
 			const brotherPoint = globalStore.handle_svg_info.info.props.point_position.val[l - 2]
-			let ox = brotherPoint.x < _x ? -5 : brotherPoint.x > _x ? 5 : 0
-			let oy = brotherPoint.y < _y ? -5 : brotherPoint.y > _y ? 5 : 0
+			const pr = globalStore.handle_svg_info?.info.props.point_r?.val + 2 || 4
+			let ox = brotherPoint.x < _x ? -pr : brotherPoint.x > _x ? pr : 0
+			let oy = brotherPoint.y < _y ? -pr : brotherPoint.y > _y ? pr : 0
 			if (e.ctrlKey) {
 				//画竖线
 				globalStore.handle_svg_info.info.props.point_position.val[l - 1] = {
@@ -580,17 +584,32 @@
 				}
 			}
 		} else if (globalStore.intention === EGlobalStoreIntention.SetConnectionLineNode && globalStore.handle_svg_info) {
+			if (
+				!lineNodeMoved &&
+				(globalStore.connection_line_node_info.point_index ===
+					globalStore.handle_svg_info.info.props.point_position.val.length - 1 ||
+					globalStore.connection_line_node_info.point_index === 0)
+			) {
+				lineNodeMoved = true
+			}
+			const l = globalStore.handle_svg_info?.info.props.point_position.val.length
+			const _x = getSvgNowPosition(
+				globalStore.mouse_info.position_x,
+				globalStore.mouse_info.new_position_x,
+				globalStore.connection_line_node_info.init_pos.x
+			)
+			const _y = getSvgNowPosition(
+				globalStore.mouse_info.position_y,
+				globalStore.mouse_info.new_position_y,
+				globalStore.connection_line_node_info.init_pos.y
+			)
+			const brotherPoint = globalStore.handle_svg_info.info.props.point_position.val[l - 2]
+			const pr = globalStore.handle_svg_info?.info.props.point_r?.val + 2 || 4
+			let ox = brotherPoint.x < _x ? -pr : brotherPoint.x > _x ? pr : 0
+			let oy = brotherPoint.y < _y ? -pr : brotherPoint.y > _y ? pr : 0
 			globalStore.handle_svg_info.info.props.point_position.val[globalStore.connection_line_node_info.point_index] = {
-				x: getSvgNowPosition(
-					globalStore.mouse_info.position_x,
-					globalStore.mouse_info.new_position_x,
-					globalStore.connection_line_node_info.init_pos.x
-				),
-				y: getSvgNowPosition(
-					globalStore.mouse_info.position_y,
-					globalStore.mouse_info.new_position_y,
-					globalStore.connection_line_node_info.init_pos.y
-				)
+				x: _x + ox,
+				y: _y + oy
 			}
 		}
 	}
@@ -631,6 +650,17 @@
 			globalStore.intention = EGlobalStoreIntention.None
 		} else if (globalStore.intention === EGlobalStoreIntention.Connection) {
 			return
+		} else if (globalStore.intention === EGlobalStoreIntention.SetConnectionLineNode) {
+			//解绑锚点
+			if (lineNodeMoved && globalStore.handle_svg_info?.info.bind_anchors) {
+				if (globalStore.connection_line_node_info.point_index === 0) {
+					globalStore.handle_svg_info.info.bind_anchors.start = null
+				} else {
+					globalStore.handle_svg_info.info.bind_anchors.end = null
+				}
+			}
+			globalStore.intention = EGlobalStoreIntention.None
+			lineNodeMoved = false
 		} else if (globalStore.intention === EGlobalStoreIntention.SelectArea) {
 			//框选
 			globalStore.setHandleSvgInfo(null)
@@ -654,7 +684,6 @@
 		contextMenuStore.display = false
 	}
 	const onCanvasMouseDown = (e: MouseEvent) => {
-		//todo 画横线或垂线
 		const { clientX, clientY } = e
 		if (globalStore.intention === EGlobalStoreIntention.Connection) {
 			if (!globalStore.handle_svg_info) {
@@ -1089,20 +1118,20 @@
 				/>
 			</g>
 		</svg>
-		<!-- 右键菜单 -->
-		<ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">
-			<li
-				v-for="(item, key) in contextMenuStore.info"
-				:key="item.title"
-				@click="contextMenuStore.onContextMenuClick(key)"
-			>
-				<p :class="item.enable ? '' : 'disabled'">
-					{{ item.title }}
-					<span class="shortcut">{{ item.hot_key }}</span>
-				</p>
-			</li>
-		</ul>
 	</div>
+	<!-- 右键菜单 -->
+	<ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">
+		<li
+			v-for="(item, key) in contextMenuStore.info"
+			:key="item.title"
+			@click="contextMenuStore.onContextMenuClick(key)"
+		>
+			<p :class="item.enable ? '' : 'disabled'">
+				{{ item.title }}
+				<span class="shortcut">{{ item.hot_key }}</span>
+			</p>
+		</li>
+	</ul>
 </template>
 
 <style lang="less" scoped>

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

@@ -117,7 +117,7 @@
 				:key="index"
 				:cx="item.x"
 				:cy="item.y"
-				r="6"
+				:r="props.itemInfo.props.point_r.val"
 				stroke-width="1"
 				:stroke="props.itemInfo.props.stroke.val"
 				fill="#fff"

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

@@ -73,11 +73,40 @@
 			getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
 			radius.value
 	)
+
+	const anchorUp = (e: any, type: ELineBindAnchors) => {
+		if (globalStore.intention === EGlobalStoreIntention.SetConnectionLineNode) {
+			//移动连线首尾节点，绑定锚点
+			e.stopPropagation()
+			if (globalStore.handle_svg_info?.info.bind_anchors && globalStore.connection_line_node_info) {
+				if (globalStore.connection_line_node_info.point_index === 0) {
+					globalStore.handle_svg_info.info.bind_anchors.start = {
+						type: type,
+						target_id: props.itemInfo.id
+					}
+				} else if (
+					globalStore.connection_line_node_info.point_index ===
+					globalStore.handle_svg_info.info.props.point_position.val.length - 1
+				) {
+					globalStore.handle_svg_info.info.bind_anchors.end = {
+						type: type,
+						target_id: props.itemInfo.id
+					}
+				}
+
+				globalStore.intention = EGlobalStoreIntention.None
+				globalStore.setHandleSvgInfo(null)
+				nextTick(function () {
+					moveAnchors(props.itemInfo)
+				})
+			}
+		}
+	}
 	const bindAnchor = (e: any, type: ELineBindAnchors) => {
 		if (globalStore.intention === EGlobalStoreIntention.None) {
 			createLine(e, type, props.itemInfo)
 		} else if (globalStore.intention === EGlobalStoreIntention.Connection) {
-			//点击锚上在连线的情况下点击结束连线并绑定锚点
+			//在连线的情况下，点击锚点，结束连线并绑定锚点
 			e.stopPropagation()
 			if (globalStore.handle_svg_info?.info.bind_anchors) {
 				globalStore.handle_svg_info.info.bind_anchors.end = {
@@ -102,19 +131,25 @@
 		stroke-width="2"
 		stroke="rgba(0,0,0,0)"
 	>
-		<g @mousedown="bindAnchor($event, ELineBindAnchors.TopCenter)">
+		<g
+			@mousedown="bindAnchor($event, ELineBindAnchors.TopCenter)"
+			@mouseup="anchorUp($event, ELineBindAnchors.TopCenter)"
+		>
 			<circle class="out-circle" :cx="cxT" :cy="cyT" :r="outRadius" fill-opacity=".3" />
 			<circle id="connection_tc" :cx="cxT" :cy="cyT" :r="radius" pointer-events="all" />
 		</g>
-		<g @mousedown="bindAnchor($event, ELineBindAnchors.Right)">
+		<g @mousedown="bindAnchor($event, ELineBindAnchors.Right)" @mouseup="anchorUp($event, ELineBindAnchors.Right)">
 			<circle class="out-circle" :cx="cxR" :cy="cyR" :r="outRadius" fill-opacity=".3" />
 			<circle id="connection_r" :cx="cxR" :cy="cyR" :r="radius" pointer-events="all" />
 		</g>
-		<g @mousedown="bindAnchor($event, ELineBindAnchors.BottomCenter)">
+		<g
+			@mousedown="bindAnchor($event, ELineBindAnchors.BottomCenter)"
+			@mouseup="anchorUp($event, ELineBindAnchors.BottomCenter)"
+		>
 			<circle class="out-circle" :cx="cxB" :cy="cyB" :r="outRadius" fill-opacity=".3" />
 			<circle id="connection_bc" :cx="cxB" :cy="cyB" :r="radius" pointer-events="all" />
 		</g>
-		<g @mousedown="bindAnchor($event, ELineBindAnchors.Left)">
+		<g @mousedown="bindAnchor($event, ELineBindAnchors.Left)" @mouseup="anchorUp($event, ELineBindAnchors.Left)">
 			<circle class="out-circle" :cx="cxL" :cy="cyL" :r="outRadius" fill-opacity=".3" />
 			<circle id="connection_l" :cx="cxL" :cy="cyL" :r="radius" :style="{ cursor: 'crosshair' }" pointer-events="all" />
 		</g>

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

@@ -219,11 +219,11 @@
 					<el-input v-model="globalStore.handle_svg_info!.info.id" />
 				</el-form-item>
 				<div
-					v-for="(e, k) in globalStore.handle_svg_info!.info.state"
+					v-for="(e, k) of globalStore.handle_svg_info!.info.state"
 					:key="'state' + String(k)"
 					v-if="globalStore.handle_svg_info!.info.state"
 				>
-					<el-form-item class="props-row" :label="String(k)" size="small"> {{ e?.default }}</el-form-item>
+					<el-form-item class="props-row" :label="String(k)" size="small"> {{ e!.default }}</el-form-item>
 
 					<el-form-item
 						v-if="k === 'OnOff'"
@@ -243,6 +243,26 @@
 					</el-form-item>
 				</div>
 				<dynamic-el-form-item :obj-info="globalStore.handle_svg_info!.info.props" code />
+				<el-form-item
+					:label="globalStore.handle_svg_info!.info.animations.type.title"
+					size="small"
+					v-if="globalStore.handle_svg_info!.info.animations"
+				>
+					<el-select v-model="globalStore.handle_svg_info!.info.animations.type.val" placeholder="Select" size="small">
+						<el-option
+							v-for="item in globalStore.handle_svg_info!.info.animations.type.options"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+						/>
+					</el-select>
+				</el-form-item>
+
+				<dynamic-el-form-item
+					:obj-info="globalStore.handle_svg_info!.info.animations"
+					v-if="globalStore.handle_svg_info!.info.animations?.type.val !== 'None'"
+					:hide="['type', 'repeatCount']"
+				/>
 				<bind-anchor
 					v-if="globalStore.handle_svg_info?.info.type === EDoneJsonType.ConnectionLine"
 					v-model="globalStore.handle_svg_info!.info!.bind_anchors!.start"

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

@@ -173,12 +173,30 @@
 			</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>画线的时候按住ctrl即可画竖线，按住shift即可画横线</div>
+			<div class="guide-text"
+				><p>
+					点击编辑器顶部连线按钮会进入连线状态，该状态下在画板点击鼠标左键即可开始画线，移动并再次点击左键创建新的节点，右键结束画线并退出连线状态；</p
+				>
+				<p>画线的时候按住ctrl即可画竖线，按住shift即可画横线</p></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 class="guide-text">
+				<p
+					>组件在未选中时，鼠标经过组件时会出现锚点，鼠标悬浮在锚点上时，会有交互样式，点击左键即可以锚点为起点创建连线；</p
+				>
+				<p>同样，在连线时鼠标经过锚点时，会出现锚点交互样式，点击左键即可以锚点为连线终点结束连线；</p>
+				<p>这两种情况下的连线会绑定组件上的锚点，如需解绑，参考下面的‘锚点解绑’；</p>
+				<p>同样，也可先画线，再选中连线绑定想要绑定的组件锚点（连线只有首尾节点可以绑定锚点）</p>
+			</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 style="padding-bottom: 14px">
-				若线段绑定了锚点，移动线段，绑定的锚点不会移动。若是想将线段整体移动，需要先选中线段，在右侧‘数据’栏里解除绑定
+			<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 style="padding-bottom: 14px"> 选中线段，在右侧‘数据’栏里解除绑定；或者鼠标左键拖拽连线上需要解绑的节点</div>
 		</el-scrollbar>
 	</el-dialog>
 </template>
@@ -197,6 +215,12 @@
 	.el-divider {
 		border-color: #f1f1f5;
 	}
+
+	.guide-text {
+		p {
+			line-height: 1.9;
+		}
+	}
 </style>
 <style lang="less">
 	.guide-dialog {

package/src/config/types.ts

@@ -80,7 +80,7 @@ interface IDoneJsonConfig {
 export interface IConfigItemState {
 	[k: keyof any]: {
 		title: string
-		default: false
+		default: any
 		props: { [key: string]: { openVal: any; closeVal: any } }
 	}
 }

package/src/stores/global/index.ts

@@ -1,6 +1,6 @@
 import { config } from '@/config'
 import type { IConfigItem } from '@/config/types'
-import { isOfType, objectDeepClone, setSvgActualInfo } from '@/utils'
+import { isOfType, objectDeepClone, setSvgActualInfo, unbindAnchors } from '@/utils'
 import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from './types'
 import type { IDoneJson, IGlobalStore, IMouseInfo, IScaleInfo } from './types'
 import { useHistoryRecord } from '@/hooks'
@@ -90,7 +90,9 @@ export const useGlobalStore = defineStore('global-store', {
 		},
 		spliceDoneJson(index: number) {
 			const globalStore = useGlobalStore()
-			globalStore.done_json.splice(index, 1)
+			const t = globalStore.done_json.splice(index, 1)
+			const item = t[0]
+			unbindAnchors(item.id)
 			useHistoryRecord(globalStore.done_json)
 		}
 	}

package/src/utils/index.ts

@@ -286,15 +286,39 @@ export const moveAnchors = (done_json: IDoneJson) => {
 		if (d.type === EDoneJsonType.ConnectionLine) {
 			if (d.bind_anchors?.start?.target_id === done_json.id) {
 				const a = getAnchorPosByAnchorType(d.bind_anchors.start.type, done_json)
-				d.props.point_position.val[0] = { x: a.x - d.x, y: a.y - d.y }
+				d.props.point_position.val[0] = {
+					x: a.x - d.x,
+					y: a.y - d.y
+				}
 			}
 			if (d.bind_anchors?.end?.target_id === done_json.id) {
 				const a = getAnchorPosByAnchorType(d.bind_anchors.end.type, done_json)
-				d.props.point_position.val[d.props.point_position.val.length - 1] = { x: a.x - d.x, y: a.y - d.y }
+				d.props.point_position.val[d.props.point_position.val.length - 1] = {
+					x: a.x - d.x,
+					y: a.y - d.y
+				}
 			}
 		}
 	}
 }
+/**
+ * 解绑连线的锚点
+ * @param id 被绑定的组件的id
+ */
+export const unbindAnchors = (id: string) => {
+	const globalStore = useGlobalStore(pinia)
+	for (let d of globalStore.done_json) {
+		if (d.type === EDoneJsonType.ConnectionLine) {
+			if (d.bind_anchors?.start?.target_id === id) {
+				d.bind_anchors.start = null
+			}
+			if (d.bind_anchors?.end?.target_id === id) {
+				d.bind_anchors.end = null
+			}
+		}
+	}
+}
+
 /**
  * 根据锚点类型获取锚点坐标
  * @param anchor_type
@@ -464,7 +488,10 @@ export const createLine = (e: MouseEvent, type?: ELineBindAnchors, itemInfo?: ID
 			width: 0,
 			height: 0
 		},
-		center_position: { x: 0, y: 0 },
+		center_position: {
+			x: 0,
+			y: 0
+		},
 		point_coordinate: {
 			tl: {
 				x: 0,