@zhangqingcq/vgce 0.1.14 → 0.1.16

package/package.json

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

package/src/assets/base.less

@@ -109,7 +109,39 @@ body {
 
 .tree-v {
 	--el-color-primary-light-9: @listActiveColor;
+
 	&.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
 		color: #fff;
 	}
 }
+
+.coverLayer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+}
+
+.can-not-select {
+	user-select: none;
+}
+
+.canvasInfoTxt {
+	color: #bbb;
+	position: absolute;
+	left: 20px;
+	bottom: 10px;
+	font-size: 12px;
+
+	.icoP {
+		margin-left: 10px;
+		position: relative;
+		top: 2px;
+		cursor: pointer;
+
+		&:hover {
+			color: @activeIconOut;
+		}
+	}
+}

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

@@ -18,7 +18,8 @@
 		randomString,
 		resetHandlePointOld,
 		setSvgActualInfo,
-		stopEvent
+		getZoomPosition,
+		myFixed
 	} from '@/utils'
 	import {
 		calculateBottom,
@@ -494,10 +495,10 @@
 			//算出缩放倍数
 			if (globalStore.handle_svg_info && new_length.width > 0 && new_length.height > 0) {
 				const scale_x = !new_length.is_old_width
-					? parseFloat((new_length.width / globalStore.handle_svg_info.info.actual_bound.width).toFixed(3))
+					? myFixed(new_length.width / globalStore.handle_svg_info.info.actual_bound.width, 3)
 					: 1
 				const scale_y = !new_length.is_old_height
-					? parseFloat((new_length.height / globalStore.handle_svg_info.info.actual_bound.height).toFixed(3))
+					? myFixed(new_length.height / globalStore.handle_svg_info.info.actual_bound.height, 3)
 					: 1
 				const newCenterPoint = getCenterPoint(curPosition, globalStore.scale_info.symmetric_point)
 				if (
@@ -549,8 +550,9 @@
 						globalStore.handle_svg_info.info.x
 				) /
 				(Math.PI / 180)
-			globalStore.handle_svg_info.info.rotate = parseFloat(
-				(globalStore.rotate_info.angle + rotateDegreeAfter - rotateDegreeBefore).toFixed(2)
+			globalStore.handle_svg_info.info.rotate = myFixed(
+				globalStore.rotate_info.angle + rotateDegreeAfter - rotateDegreeBefore,
+				2
 			)
 		} else if (globalStore.intention === EGlobalStoreIntention.Connection && globalStore.handle_svg_info) {
 			//鼠标移动的实时位置（相对于连线起始点，只在创建第一个点时记录了鼠标原始位置）
@@ -766,9 +768,11 @@
 	function onMousewheel(e: any) {
 		if (e?.wheelDelta) {
 			if (e.wheelDelta > 0) {
-				configStore.svg.scale = parseFloat((configStore.svg.scale + 0.1).toFixed(1))
-			} else {
-				configStore.svg.scale = parseFloat((configStore.svg.scale - 0.1).toFixed(1))
+				configStore.svg.scale = myFixed(configStore.svg.scale + 0.1, 1)
+				getZoomPosition(e, configStore.svg.scale, svgEditLayoutStore.center_offset, true)
+			} else if (configStore.svg.scale > 0.1) {
+				configStore.svg.scale = myFixed(configStore.svg.scale - 0.1, 1)
+				getZoomPosition(e, configStore.svg.scale, svgEditLayoutStore.center_offset, false)
 			}
 		}
 	}
@@ -817,10 +821,10 @@
 		scale_y: number
 	) => {
 		return {
-			x: parseFloat((actual_bound.x - (actual_bound.width / 2) * scale_x + actual_bound.width / 2).toFixed(1)),
-			y: parseFloat((actual_bound.y - (actual_bound.height / 2) * scale_y + actual_bound.height / 2).toFixed(1)),
-			width: parseFloat((actual_bound.width * scale_x).toFixed(1)),
-			height: parseFloat((actual_bound.height * scale_y).toFixed(1))
+			x: myFixed(actual_bound.x - (actual_bound.width / 2) * scale_x + actual_bound.width / 2, 1),
+			y: myFixed(actual_bound.y - (actual_bound.height / 2) * scale_y + actual_bound.height / 2, 1),
+			width: myFixed(actual_bound.width * scale_x, 1),
+			height: myFixed(actual_bound.height * scale_y, 1)
 		}
 	}
 	const onHandleKeyDown = (e: KeyboardEvent) => {
@@ -959,7 +963,7 @@
 		@mousewheel="onMousewheel"
 	>
 		<slot name="background" />
-		<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0">
+		<div class="coverLayer">
 			<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 				<defs>
 					<pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
@@ -980,7 +984,6 @@
 						:key="item.id"
 						:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
 						v-show="item.display"
-						@mousewheel="stopEvent"
 					>
 						<g :class="`${getCommonClass(item)}`">
 							<g

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

@@ -313,7 +313,8 @@
 						<el-form-item label="行为" size="small">
 							<el-select v-model="item.action" @change="addEventList($event, item)">
 								<el-option value="ChangeAttr" label="改变属性" />
-								<el-option value="JavaScript" label="执行JavaScript" />
+								<el-option value="JavaScript" label="执行 JavaScript" />
+								<el-option value="Emit" label="emit 事件" />
 							</el-select>
 						</el-form-item>
 

package/src/components/svg-viewer.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 	import { pinia } from '@/hooks'
+	import { ElIcon } from 'element-plus'
+	import { Aim } from '@element-plus/icons-vue'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'
 	import {
 		componentsRegister,
 		getCommonClass,
+		getZoomPosition,
+		myFixed,
 		preventDefault,
 		prosToVBind,
 		setArrItemByID,
@@ -25,11 +29,12 @@
 
 	setEditorLoadTime()
 
-	const emit = defineEmits(['onMessage'])
+	const emit = defineEmits(['onMessage', 'onEvent'])
 	const props = withDefaults(
-		defineProps<{ vueComp?: Record<string, any>; data?: IDataModel; canvasDrag?: boolean }>(),
+		defineProps<{ vueComp?: Record<string, any>; data?: IDataModel; canvasDrag?: boolean; showCanvasInfo?: boolean }>(),
 		{
-			canvasDrag: true
+			canvasDrag: true,
+			showCanvasInfo: true
 		}
 	)
 	const globalStore = useGlobalStore(pinia)
@@ -72,14 +77,18 @@
 			return
 		}
 		const { clientX, clientY } = e
-		globalStore.mouse_info.new_position_x =
-			globalStore.mouse_info.now_position_x + clientX - globalStore.mouse_info.position_x
-		globalStore.mouse_info.new_position_y =
-			globalStore.mouse_info.now_position_y + clientY - globalStore.mouse_info.position_y
+		globalStore.mouse_info.new_position_x = Math.round(clientX / preview_data.config.svg.scale)
+		globalStore.mouse_info.new_position_y = Math.round(clientY / preview_data.config.svg.scale)
+		const x = Math.round(
+			globalStore.mouse_info.new_position_x - globalStore.mouse_info.position_x + globalStore.mouse_info.now_position_x
+		)
+		const y = Math.round(
+			globalStore.mouse_info.new_position_y - globalStore.mouse_info.position_y + globalStore.mouse_info.now_position_y
+		)
 		if (globalStore.intention == EGlobalStoreIntention.MoveCanvas) {
 			//移动画布
-			preview_data.layout_center.x = globalStore.mouse_info.new_position_x
-			preview_data.layout_center.y = globalStore.mouse_info.new_position_y
+			preview_data.layout_center.x = x
+			preview_data.layout_center.y = y
 		}
 	}
 	const onCanvasMouseUp = () => {
@@ -106,21 +115,23 @@
 		globalStore.intention = EGlobalStoreIntention.MoveCanvas
 		globalStore.mouse_info = {
 			state: EMouseInfoState.Down,
-			position_x: clientX,
-			position_y: clientY,
+			position_x: Math.round(clientX / preview_data.config.svg.scale),
+			position_y: Math.round(clientY / preview_data.config.svg.scale),
 			now_position_x: preview_data.layout_center.x,
 			now_position_y: preview_data.layout_center.y,
-			new_position_x: preview_data.layout_center.x,
-			new_position_y: preview_data.layout_center.y
+			new_position_x: 0,
+			new_position_y: 0
 		}
 	}
 
 	function onMousewheel(e: any) {
 		if (e?.wheelDelta) {
 			if (e.wheelDelta > 0) {
-				preview_data.config.svg.scale = parseFloat((preview_data.config.svg.scale + 0.1).toFixed(1))
+				preview_data.config.svg.scale = myFixed(preview_data.config.svg.scale + 0.1, 1)
+				getZoomPosition(e, preview_data.config.svg.scale, preview_data.layout_center, true)
 			} else {
-				preview_data.config.svg.scale = parseFloat((preview_data.config.svg.scale - 0.1).toFixed(1))
+				preview_data.config.svg.scale = myFixed(preview_data.config.svg.scale - 0.1, 1)
+				getZoomPosition(e, preview_data.config.svg.scale, preview_data.layout_center, false)
 			}
 		}
 	}
@@ -156,7 +167,6 @@
 		return { cursor: t ? 'pointer' : 'default' }
 	}
 	const eventHandle = (root: IDoneJson, type: EEventType) => {
-		console.log(root.events, type)
 		if (root.events?.length > 0) {
 			for (let e of root.events) {
 				if (e.type === type) {
@@ -204,6 +214,28 @@
 					} else if (e.action === EEventAction.JavaScript) {
 						const t = new Function(e.scripts)
 						t()
+					} else if (e.action === EEventAction.Emit) {
+						const _k: Array<keyof IDoneJson> = [
+							'id',
+							'name',
+							'common_animations',
+							'display',
+							'props',
+							'title',
+							'type',
+							'x',
+							'y'
+						]
+						const _r: Record<string, any> = {}
+						_k.forEach((x) => {
+							if (root?.hasOwnProperty?.(x)) {
+								_r[x] = root[x]
+							}
+						})
+						emit('onEvent', {
+							event: e,
+							target: _r
+						})
 					}
 				}
 			}
@@ -230,6 +262,13 @@
 		}
 	}
 
+	const resetCanvas = () => {
+		preview_data.layout_center = {
+			x: 0,
+			y: 0
+		}
+	}
+
 	const connectNet = () => {
 		const m = preview_data.config.net.mqtt
 		if (m && m.url && m.user && m.pwd && m.topics) {
@@ -240,12 +279,12 @@
 				//用户拿到消息后可以配合setNodeAttrByID方法更新界面
 				//setNodeAttrByID的参数id可以在传给本组件的props.data（用户传进来的，自然知道值是多少）里done_json找到
 				/*如何找到指定组件的两种方案：
-				1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id（必须保证唯一），然后调用setNodeAttrByID改变组件属性。
-				2.如果不想改动id（避免因不能保证手动改过的id唯一性导致编辑器功能异常），可以在config里给想要改变的组件的配置文件的props里增加一个字段，
-				如deviceCode(svg-text的配置文件里有被注释的例子)，然后在编辑组态时，给对应组件填上对应的deviceCode（这样deviceCode就和组件id实现
-				了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode在done_json
-				找到组件的id（可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里，这样在需要id时可直接在计算出的对象凭借deviceCode
-				直接取到），即可用setNodeAttrByID改变组件属性*/
+				 1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id（必须保证唯一），然后调用setNodeAttrByID改变组件属性。
+				 2.如果不想改动id（避免因不能保证手动改过的id唯一性导致编辑器功能异常），可以在config里给想要改变的组件的配置文件的props里增加一个字段，
+				 如deviceCode(svg-text的配置文件里有被注释的例子)，然后在编辑组态时，给对应组件填上对应的deviceCode（这样deviceCode就和组件id实现
+				 了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode在done_json
+				 找到组件的id（可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里，这样在需要id时可直接在计算出的对象凭借deviceCode
+				 直接取到），即可用setNodeAttrByID改变组件属性*/
 				emit('onMessage', {
 					topics,
 					message
@@ -287,12 +326,12 @@
 		@contextmenu="preventDefault"
 	>
 		<slot name="background" />
-		<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0">
+		<div class="coverLayer">
 			<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 				<g
-					:transform="`translate(${preview_data.layout_center.x},${preview_data.layout_center.y})rotate(${0})scale(${
-						preview_data.config.svg.scale
-					})`"
+					:transform="`translate(${preview_data.layout_center.x * preview_data.config.svg.scale},${
+						preview_data.layout_center.y * preview_data.config.svg.scale
+					})rotate(${0})scale(${preview_data.config.svg.scale})`"
 				>
 					<g
 						v-for="item in preview_data.done_json"
@@ -304,7 +343,6 @@
 						@mousedown="stopEvent"
 						@mousemove="stopEvent"
 						@mouseup="stopEvent"
-						@mousewheel="stopEvent"
 					>
 						<g :class="`${getCommonClass(item)}`">
 							<g
@@ -371,6 +409,15 @@
 				</g>
 			</svg>
 		</div>
+
+		<div class="can-not-select canvasInfoTxt" v-show="showCanvasInfo"
+			>缩放倍数：{{ preview_data.config.svg.scale }}倍，画布位置：{{ myFixed(preview_data.layout_center.x, 2) }}，{{
+				myFixed(preview_data.layout_center.y, 2)
+			}}
+			<el-icon class="icoP" :size="14" @click="resetCanvas" title="重置位置">
+				<Aim />
+			</el-icon>
+		</div>
 	</div>
 </template>
 

package/src/components/vue3-ruler-tool.vue

@@ -2,7 +2,7 @@
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 	import { useConfigStore } from '@/stores/config'
-	import { preventDefault, stopEvent } from '@/utils'
+	import { myFixed, preventDefault } from '@/utils'
 
 	const emit = defineEmits(['onLineMouseUp'])
 	const props = withDefaults(
@@ -144,12 +144,12 @@
 		if (array.length === 0) {
 			for (let i = 0; i < length; i += props.stepLength) {
 				if (i % props.stepLength === 0) {
-					array.push({ id: Number((i / configStore.svg.scale - start).toFixed(0)) })
+					array.push({ id: myFixed(i / configStore.svg.scale - start, 0) })
 				}
 			}
 		} else {
 			array.forEach((e, i) => {
-				e.id = Number(((i * props.stepLength) / configStore.svg.scale - start).toFixed(0))
+				e.id = myFixed((i * props.stepLength) / configStore.svg.scale - start, 0)
 			})
 		}
 	}
@@ -311,10 +311,14 @@
 				<span v-for="(item, index) in yScale" :style="{ top: index * stepLength + 'px' }" class="n">{{ item.id }}</span>
 			</div>
 			<div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h"
-				><span>{{ Math.round((verticalDottedTop - rulerHeight) / configStore.svg.scale) }}</span></div
+				><span>{{
+					Math.round((verticalDottedTop - rulerHeight) / configStore.svg.scale - svgEditLayoutStore.center_offset.y)
+				}}</span></div
 			>
 			<div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v"
-				><span>{{ Math.round((horizontalDottedLeft - rulerWidth) / configStore.svg.scale) }}</span></div
+				><span>{{
+					Math.round((horizontalDottedLeft - rulerWidth) / configStore.svg.scale - svgEditLayoutStore.center_offset.x)
+				}}</span></div
 			>
 			<div
 				v-for="item in lineList"

package/src/config/types.ts

@@ -80,6 +80,7 @@ export enum EEventType {
 export enum EEventAction {
 	ChangeAttr = 'ChangeAttr',
 	JavaScript = 'JavaScript',
+	Emit = 'Emit',
 	Null = ''
 }
 

package/src/utils/index.ts

@@ -18,6 +18,10 @@ export const preventDefault = (e: any) => {
 	e.preventDefault()
 }
 
+export const myFixed = (d: number, n: number) => {
+	return Number(d.toFixed(n))
+}
+
 export function componentsRegister(data?: Record<string, any>) {
 	//注册所有组件
 	const instance = getCurrentInstance()
@@ -95,19 +99,17 @@ export const calculateRotatedPointCoordinate = (
 	 */
 
 	return {
-		x: parseFloat(
-			(
-				(point.x - center.x) * Math.cos(angleToRadian(rotate)) -
+		x: myFixed(
+			(point.x - center.x) * Math.cos(angleToRadian(rotate)) -
 				(point.y - center.y) * Math.sin(angleToRadian(rotate)) +
-				center.x
-			).toFixed(1)
+				center.x,
+			1
 		),
-		y: parseFloat(
-			(
-				(point.x - center.x) * Math.sin(angleToRadian(rotate)) +
+		y: myFixed(
+			(point.x - center.x) * Math.sin(angleToRadian(rotate)) +
 				(point.y - center.y) * Math.cos(angleToRadian(rotate)) +
-				center.y
-			).toFixed(1)
+				center.y,
+			1
 		)
 	}
 }
@@ -190,10 +192,10 @@ export const setSvgActualInfo = (done_json: IDoneJson, resize?: boolean) => {
 			}
 		} else {
 			const BBox = (queryBbox as SVGGraphicsElement).getBBox()
-			x = parseFloat(BBox.x.toFixed(0))
-			y = parseFloat(BBox.y.toFixed(0))
-			width = parseFloat(BBox.width.toFixed(0))
-			height = parseFloat(BBox.height.toFixed(0))
+			x = myFixed(BBox.x, 0)
+			y = myFixed(BBox.y, 0)
+			width = myFixed(BBox.width, 0)
+			height = myFixed(BBox.height, 0)
 		}
 		if (
 			rectBBox &&
@@ -568,3 +570,19 @@ export const createLine = (e: MouseEvent, type?: ELineBindAnchors, itemInfo?: ID
 		new_position_y: 0
 	}
 }
+
+export const getZoomPosition = (e: Record<string, any>, scale: any, center: Record<string, any>, isAdd: boolean) => {
+	/*鼠标位置*/
+	const offsetX = e.layerX
+	const offsetY = e.layerY
+	/*上次的画布位置*/
+	const tx = center.x
+	const ty = center.y
+	/*上次的scale*/
+	const ts = myFixed(isAdd ? scale - 0.1 : scale + 0.1, 1)
+	/*画布在没有缩放的时候移动位置*/
+	const lx = myFixed(tx + (offsetX * (ts - 1)) / ts, 1)
+	const ly = myFixed(ty + (offsetY * (ts - 1)) / ts, 1)
+	center.x = myFixed(lx / scale - ((offsetX - lx) * (scale - 1)) / scale, 2)
+	center.y = myFixed(ly / scale - ((offsetY - ly) * (scale - 1)) / scale, 2)
+}

package/src/views/Preview.vue

@@ -15,7 +15,7 @@
 <template>
 	<div class="previewPage">
 		<svg-viewer :data="store.data" />
-		<el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
+		<el-button type="text" @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
 	</div>
 </template>
 

package/types/index.d.ts

@@ -8,6 +8,7 @@ import { DefineComponent } from 'vue'
 export declare const SvgEditor: DefineComponent<{
 	data?: string
 	customToolbar?: any[]
+	vueComp?: Record<string, any>
 	saveFile?: boolean
 	onOnPreview?: (d: Record<string, any>) => void
 	onOnSave?: (d: Record<string, any>) => void
@@ -15,11 +16,14 @@ export declare const SvgEditor: DefineComponent<{
 }>
 export declare const SvgViewer: DefineComponent<{
 	data?: Record<string, any>
+	vueComp?: Record<string, any>
 	canvasDrag?: boolean
-	onOnMessage?: (d: { topics: string, message: string }) => void
+	showCanvasInfo?: boolean
+	onOnMessage?: (d: { topics: string; message: string }) => void
+	onOnEvent?: (d: { event: Record<string, any>; target: Record<string, any> }) => void
 }>
 
 export default {
 	SvgEditor,
 	SvgViewer
-}
+}