@zhangqingcq/vgce 0.0.19 → 0.0.21

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

@@ -8,6 +8,10 @@
 	const global_store = useGlobalStore(pinia)
 	const current_node_key = ref(global_store.handle_svg_info?.info.id || '')
 	const handleNodeClick = (data: IDoneJson) => {
+		for (let e of global_store.done_json) {
+			e.selected = false
+			e.old_position = { x: 0, y: 0 }
+		}
 		global_store.intention = EGlobalStoreIntention.Select
 		global_store.setHandleSvgInfo(data)
 	}

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

@@ -5,9 +5,13 @@
 	import { pinia } from '@/hooks'
 	import { useGlobalStore } from '@/stores/global'
 	import { EConfigAnimationsType } from '@/config/types'
+	import { useConfigStore } from '@/stores/config'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 
 	const props = withDefaults(defineProps<{ itemInfo: IDoneJson; pointVisible: boolean }>(), { pointVisible: false })
 	const globalStore = useGlobalStore(pinia)
+	const configStore = useConfigStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const setConnectionLineNode = (point_index: number, e: MouseEvent, x: number, y: number) => {
 		if (globalStore.intention === EGlobalStoreIntention.Connection) {
 			return
@@ -23,15 +27,15 @@
 			point_index: point_index
 		}
 		globalStore.intention = EGlobalStoreIntention.SetConnectionLineNode
-		globalStore.setMouseInfo({
+		globalStore.mouse_info = {
 			state: EMouseInfoState.Down,
-			position_x: clientX,
-			position_y: clientY,
-			now_position_x: clientX,
-			now_position_y: clientY,
+			position_x: Math.round((clientX - svgEditLayoutStore.canvasInfo.left) / configStore.svg.scale),
+			position_y: Math.round((clientY - svgEditLayoutStore.canvasInfo.top) / configStore.svg.scale),
+			now_position_x: 0,
+			now_position_y: 0,
 			new_position_x: 0,
 			new_position_y: 0
-		})
+		}
 	}
 </script>
 
@@ -47,7 +51,7 @@
 					: props.itemInfo.props.stroke.val
 			"
 			:stroke-width="props.itemInfo.props['stroke-width'].val"
-			style="cursor: move"
+			:style="{ cursor: globalStore.intention === EGlobalStoreIntention.Connection ? 'crosshair' : 'move' }"
 			stroke-dashoffset="0"
 			:stroke-dasharray="
 				props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
@@ -107,7 +111,7 @@
 			</animateMotion>
 		</circle>
 		<!-- 更改线段 -->
-		<g v-if="props.pointVisible">
+		<g>
 			<circle
 				v-for="(item, index) in props.itemInfo.props.point_position.val"
 				:key="index"

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

@@ -1,197 +1,137 @@
 <!-- 连线组件 -->
 <script lang="ts" setup>
-	import { straight_line_system } from '@/components/config'
 	import { ELineBindAnchors } from '@/components/config/types'
-	import type { ISystemStraightLine } from '@/components/config/types'
-	import { pinia } from '@/hooks'
-	import { useConfigStore } from '@/stores/config'
-	import { useGlobalStore } from '@/stores/global'
-	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'
-	import { getAnchorPosByAnchorType, getCoordinateOffset, objectDeepClone, randomString } from '@/utils'
+	import { EGlobalStoreIntention } from '@/stores/global/types'
+	import { createLine, getCoordinateOffset, moveAnchors } from '@/utils'
+	import { useGlobalStore } from '@/stores/global'
+	import { pinia } from '@/hooks'
 
-	const props = defineProps<{ itemInfo: IDoneJson }>()
-	const globalStore = useGlobalStore(pinia)
-	const configStore = useConfigStore(pinia)
+	const props = defineProps<{
+		itemInfo: IDoneJson
+	}>()
 	const offset = ref(4)
-	const fill = ref('#4F80FF')
+	const fill = ref('#ab712e')
 	const radius = ref(4)
-	/**
-	 * 点了连线
-	 * @param bind_anchor_type 绑定锚点类型
-	 * @param e
-	 */
-	const onConnectionMouseDown = (bind_anchor_type: ELineBindAnchors, e: MouseEvent) => {
-		e.preventDefault()
+	const outRadius = ref(12)
+	const globalStore = useGlobalStore(pinia)
 
-		const { clientX, clientY } = e
-		let create_line_info = objectDeepClone<ISystemStraightLine>(configStore.connection_line)
-		console.log('onConnectionMouseDown', configStore.connection_line, e)
-		//以后顶部可以选择连线是哪种 直线先不做
-		/*if (false) {
-		 create_line_info = straight_line_system
-		 }*/
-		create_line_info.bind_anchors.start = {
-			type: bind_anchor_type,
-			target_id: props.itemInfo.id
-		}
-		const { x, y } = getAnchorPosByAnchorType(bind_anchor_type, props.itemInfo)
-		const done_item_json = {
-			id: straight_line_system.name + randomString(),
-			x: x,
-			y: y,
-			client: {
-				x: clientX,
-				y: clientY
-			},
-			scale_x: 1,
-			scale_y: 1,
-			rotate: 0,
-			actual_bound: {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			},
-			point_coordinate: {
-				tl: {
-					x: 0,
-					y: 0
-				},
-				tc: {
-					x: 0,
-					y: 0
-				},
-				tr: {
-					x: 0,
-					y: 0
-				},
-				l: {
-					x: 0,
-					y: 0
-				},
-				r: {
-					x: 0,
-					y: 0
-				},
-				bl: {
-					x: 0,
-					y: 0
-				},
-				bc: {
-					x: 0,
-					y: 0
-				},
-				br: {
-					x: 0,
-					y: 0
+	const cxT = computed(
+		() => props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2 - offset.value + radius.value
+	)
+
+	const cyT = computed(
+		() =>
+			props.itemInfo.actual_bound.y -
+			offset.value -
+			getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
+			radius.value
+	)
+
+	const cxR = computed(
+		() =>
+			props.itemInfo.actual_bound.x -
+			offset.value +
+			props.itemInfo.actual_bound.width +
+			getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x) +
+			radius.value
+	)
+
+	const cyR = computed(
+		() =>
+			props.itemInfo.actual_bound.y -
+			offset.value +
+			(props.itemInfo.actual_bound.height * props.itemInfo.scale_y) / 2 -
+			getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
+			radius.value
+	)
+
+	const cxB = computed(
+		() => props.itemInfo.actual_bound.x - offset.value + props.itemInfo.actual_bound.width / 2 + radius.value
+	)
+	const cyB = computed(
+		() =>
+			props.itemInfo.actual_bound.y -
+			offset.value +
+			props.itemInfo.actual_bound.height +
+			getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
+			radius.value
+	)
+
+	const cxL = computed(
+		() =>
+			props.itemInfo.actual_bound.x -
+			offset.value -
+			getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x) +
+			radius.value
+	)
+	const cyL = computed(
+		() =>
+			props.itemInfo.actual_bound.y -
+			offset.value +
+			(props.itemInfo.actual_bound.height * props.itemInfo.scale_y) / 2 -
+			getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
+			radius.value
+	)
+	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 = {
+					type: type,
+					target_id: props.itemInfo.id
 				}
-			},
-			...create_line_info
+				globalStore.intention = EGlobalStoreIntention.None
+				globalStore.setHandleSvgInfo(null)
+				nextTick(function () {
+					moveAnchors(props.itemInfo)
+				})
+			}
 		}
-		done_item_json.props.point_position.val.push({
-			x: configStore.svg.svg_position_center.x,
-			y: configStore.svg.svg_position_center.y
-		})
-		globalStore.setHandleSvgInfo(done_item_json, globalStore.done_json.length)
-		globalStore.setDoneJson(done_item_json)
-
-		globalStore.intention = EGlobalStoreIntention.Connection
-		globalStore.setMouseInfo({
-			state: EMouseInfoState.Down,
-			position_x: clientX,
-			position_y: clientY,
-			now_position_x: clientX,
-			now_position_y: clientY,
-			new_position_x: 0,
-			new_position_y: 0
-		})
 	}
 </script>
 
 <template>
-	<g style="vector-effect: non-scaling-stroke">
-		<circle
-			id="connection_tc"
-			:cx="props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2 - offset + radius"
-			:cy="
-				props.itemInfo.actual_bound.y -
-				offset -
-				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
-				radius
-			"
-			:r="radius"
-			stroke="rgba(0,0,0,0)"
-			stroke-width="2"
-			:fill="fill"
-			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
-			pointer-events="all"
-			@mousedown="onConnectionMouseDown(ELineBindAnchors.TopCenter, $event)"
-		/>
-		<circle
-			id="connection_l"
-			:cx="
-				props.itemInfo.actual_bound.x -
-				offset -
-				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x) +
-				radius
-			"
-			:cy="
-				props.itemInfo.actual_bound.y -
-				offset +
-				(props.itemInfo.actual_bound.height * props.itemInfo.scale_y) / 2 -
-				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
-				radius
-			"
-			:r="radius"
-			stroke="rgba(0,0,0,0)"
-			stroke-width="2"
-			:fill="fill"
-			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
-			pointer-events="all"
-			@mousedown="onConnectionMouseDown(ELineBindAnchors.Left, $event)"
-		/>
-		<circle
-			id="connection_r"
-			:cx="
-				props.itemInfo.actual_bound.x -
-				offset +
-				props.itemInfo.actual_bound.width +
-				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x) +
-				radius
-			"
-			:cy="
-				props.itemInfo.actual_bound.y -
-				offset +
-				(props.itemInfo.actual_bound.height * props.itemInfo.scale_y) / 2 -
-				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
-				radius
-			"
-			:r="radius"
-			stroke="rgba(0,0,0,0)"
-			stroke-width="2"
-			:fill="fill"
-			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
-			pointer-events="all"
-			@mousedown="onConnectionMouseDown(ELineBindAnchors.Right, $event)"
-		/>
-		<circle
-			id="connection_bc"
-			:cx="props.itemInfo.actual_bound.x - offset + props.itemInfo.actual_bound.width / 2 + radius"
-			:cy="
-				props.itemInfo.actual_bound.y -
-				offset +
-				props.itemInfo.actual_bound.height +
-				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
-				radius
-			"
-			:r="radius"
-			stroke="rgba(0,0,0,0)"
-			stroke-width="2"
-			:fill="fill"
-			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
-			pointer-events="all"
-			@mousedown="onConnectionMouseDown(ELineBindAnchors.BottomCenter, $event)"
-		/>
+	<g
+		style="vector-effect: non-scaling-stroke"
+		class="connect-points"
+		:fill="fill"
+		stroke-width="2"
+		stroke="rgba(0,0,0,0)"
+	>
+		<g @mousedown="bindAnchor($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)">
+			<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)">
+			<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)">
+			<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>
 	</g>
 </template>
+<style lang="less" scoped>
+	.connect-points g {
+		cursor: crosshair;
+
+		&:hover {
+			.out-circle {
+				visibility: visible;
+			}
+		}
+
+		.out-circle {
+			visibility: hidden;
+		}
+	}
+</style>

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

@@ -6,12 +6,14 @@
 	import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'
 	import { getCoordinateOffset } from '@/utils'
+	import { useConfigStore } from '@/stores/config'
 
 	const props = defineProps<{ itemInfo: IDoneJson }>()
 	const globalStore = useGlobalStore(pinia)
+	const configStore = useConfigStore(pinia)
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const offset = ref(4)
-	const fill = ref('#4F80FF')
+	const fill = ref('#ab712e')
 	const angle_to_cursor = [
 		{
 			start: 338,
@@ -63,20 +65,26 @@
 		}
 	]
 	const onHandleMouseDown = (type: EScaleInfoType, e: MouseEvent) => {
-		console.log('onHandleMouseDown', e)
+		console.log('handMousedown', e)
 		const { clientX, clientY } = e
 		e.stopPropagation()
 		globalStore.intention = EGlobalStoreIntention.Zoom
-		globalStore.setMouseInfo({
+		const x = Math.round(
+			(clientX - svgEditLayoutStore.canvasInfo.left) / configStore.svg.scale - svgEditLayoutStore.center_offset.x
+		)
+		const y = Math.round(
+			(clientY - svgEditLayoutStore.canvasInfo.top) / configStore.svg.scale - svgEditLayoutStore.center_offset.y
+		)
+		globalStore.mouse_info = {
 			state: EMouseInfoState.Down,
-			position_x: clientX - svgEditLayoutStore.center_offset.x,
-			position_y: clientY - svgEditLayoutStore.center_offset.y,
-			now_position_x: clientX - svgEditLayoutStore.center_offset.x,
-			now_position_y: clientY - svgEditLayoutStore.center_offset.y,
+			position_x: x,
+			position_y: y,
+			now_position_x: x,
+			now_position_y: y,
 			new_position_x: 0,
 			new_position_y: 0
-		})
-		globalStore.setScaleInfo({
+		}
+		globalStore.scale_info = {
 			type: type,
 			scale_times: {
 				x: props.itemInfo.scale_x,
@@ -87,33 +95,33 @@
 				y: props.itemInfo.y
 			},
 			symmetric_point: {
-				x:
-					props.itemInfo.client.x +
-					Math.abs(clientX - svgEditLayoutStore.center_offset.x - props.itemInfo.client.x) *
-						(clientX - svgEditLayoutStore.center_offset.x < props.itemInfo.client.x ? 1 : -1),
-				y:
-					props.itemInfo.client.y +
-					Math.abs(clientY - svgEditLayoutStore.center_offset.y - props.itemInfo.client.y) *
-						(clientY - svgEditLayoutStore.center_offset.y < props.itemInfo.client.y ? 1 : -1)
+				x: x + Math.abs(x - props.itemInfo.center_position.x) * 2 * (x > props.itemInfo.center_position.x ? -1 : 1),
+				y: y + Math.abs(y - props.itemInfo.center_position.y) * 2 * (y > props.itemInfo.center_position.y ? -1 : 1)
 			}
-		})
+		}
 	}
 	const onRotateCircleMouseDown = (e: MouseEvent) => {
 		const { clientX, clientY } = e
+		const x = Math.round(
+			(clientX - svgEditLayoutStore.canvasInfo.left) / configStore.svg.scale - svgEditLayoutStore.center_offset.x
+		)
+		const y = Math.round(
+			(clientY - svgEditLayoutStore.canvasInfo.top) / configStore.svg.scale - svgEditLayoutStore.center_offset.y
+		)
 		e.stopPropagation()
 		globalStore.intention = EGlobalStoreIntention.Rotate
 		globalStore.rotate_info = {
 			angle: props.itemInfo.rotate
 		}
-		globalStore.setMouseInfo({
+		globalStore.mouse_info = {
 			state: EMouseInfoState.Down,
-			position_x: clientX - svgEditLayoutStore.center_offset.x,
-			position_y: clientY - svgEditLayoutStore.center_offset.y,
-			now_position_x: clientX - svgEditLayoutStore.center_offset.x,
-			now_position_y: clientY - svgEditLayoutStore.center_offset.y,
+			position_x: x,
+			position_y: y,
+			now_position_x: x,
+			now_position_y: y,
 			new_position_x: 0,
 			new_position_y: 0
-		})
+		}
 	}
 	/**
 	 * 获取旋转之后的光标样式

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

@@ -35,10 +35,6 @@
 	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
 		saveFile: false
 	})
-	const presetLine = ref([])
-	const input = (list: any) => {
-		presetLine.value = list
-	}
 	const globalStore = useGlobalStore(pinia)
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const configStore = useConfigStore(pinia)
@@ -114,27 +110,27 @@
 				></top-panel>
 			</el-header>
 			<el-container class="middle">
-				<el-aside class="side-nav" :class="svgEditLayoutStore.left_nav ? 'show-nav' : 'hide-nav'">
+				<el-aside
+					class="side-nav"
+					:class="svgEditLayoutStore.left_nav ? 'show-nav' : 'hide-nav'"
+					style="border-right: 1px solid #efefef"
+				>
 					<el-scrollbar class="el-scroll-pc">
 						<left-panel class="content-left" :custom-toolbar="props.customToolbar" />
 					</el-scrollbar>
 				</el-aside>
 				<el-main class="middle main">
 					<div class="canvas-main-pc">
-						<Vue3RulerTool
-							class="canvas-main-pc"
-							:value="presetLine"
-							:step-length="50"
-							:parent="true"
-							:is-scale-revise="false"
-							v-model:visible="configStore.svg.ruler"
-							@input="input"
-						>
-							<center-panel></center-panel>
+						<Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler">
+							<center-panel />
 						</Vue3RulerTool>
 					</div>
 				</el-main>
-				<el-aside class="side-nav" :class="svgEditLayoutStore.right_nav ? 'show-nav' : 'hide-nav'">
+				<el-aside
+					class="side-nav"
+					:class="svgEditLayoutStore.right_nav ? 'show-nav' : 'hide-nav'"
+					style="border-left: 1px solid #efefef"
+				>
 					<el-scrollbar class="el-scroll-pc">
 						<right-panel></right-panel>
 					</el-scrollbar>
@@ -177,9 +173,9 @@
 		height: calc(100vh - @headerHeight - 1px);
 
 		&.main {
-			margin: 0 5px;
 			background-color: #ffffff;
-			padding: 0 2px;
+			padding: 0;
+			overflow: hidden;
 		}
 
 		.side-nav {
@@ -188,8 +184,6 @@
 			position: relative;
 			overflow: inherit;
 			transition: all 0.5s;
-			// background-color: rgb(250, 251, 253);
-			box-shadow: 0 0 2px #dfcfcf;
 
 			.content-left {
 				overflow: hidden;
@@ -214,8 +208,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		box-shadow: 0 0 2px #dfcfcf;
-		margin-bottom: 1px;
+		border-bottom: 1px solid #efefef;
 		height: @headerHeight;
 	}
 

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

@@ -37,10 +37,10 @@
 </script>
 <template>
 	<div>
-		<el-collapse v-model="activeNames">
+		<el-collapse v-model="activeNames" style="border-top: none">
 			<el-collapse-item :name="item.groupType" v-for="item of left_tool_bar" :key="item.title">
 				<template #title>
-					<div style="font-weight: bold">{{ item.title }}</div>
+					<div>{{ item.title }}</div>
 				</template>
 				<div class="component-group flex flex-wrap">
 					<div