@zhangqingcq/vgce 0.0.19 → 0.0.21

package/src/utils/index.ts

@@ -1,7 +1,14 @@
+import type { ISystemStraightLine } from '@/components/config/types'
 import { ELineBindAnchors } from '@/components/config/types'
+import type { ICondition, IConfigItem } from '@/config/types'
 import { EDoneJsonType } from '@/config/types'
-import type { IConfigItem } from '@/config/types'
-import type { IDoneJson } from '@/stores/global/types'
+import type { ICoordinate, IDoneJson, IPointCoordinate } from '@/stores/global/types'
+import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
+import { straight_line_system } from '@/components/config'
+import { useGlobalStore } from '@/stores/global'
+import { pinia } from '@/hooks'
+import { useConfigStore } from '@/stores/config'
+import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 
 /**
  * 生成随机字符串
@@ -42,10 +49,10 @@ export const angleToRadian = (angle: number) => {
 }
 /**
  * 计算根据圆心旋转后的点的坐标
- * @param   {Object}  point  旋转前的点坐标
- * @param   {Object}  center 旋转中心
- * @param   {Number}  rotate 旋转的角度
- * @return  {Object}         旋转后的坐标
+ * @param    point  旋转前的点坐标
+ * @param    center 旋转中心
+ * @param     rotate 旋转的角度
+ * @return         旋转后的坐标
  * https://www.zhihu.com/question/67425734/answer/252724399 旋转矩阵公式
  */
 export const calculateRotatedPointCoordinate = (
@@ -64,14 +71,20 @@ export const calculateRotatedPointCoordinate = (
 	 */
 
 	return {
-		x:
-			(point.x - center.x) * Math.cos(angleToRadian(rotate)) -
-			(point.y - center.y) * Math.sin(angleToRadian(rotate)) +
-			center.x,
-		y:
-			(point.x - center.x) * Math.sin(angleToRadian(rotate)) +
-			(point.y - center.y) * Math.cos(angleToRadian(rotate)) +
-			center.y
+		x: parseFloat(
+			(
+				(point.x - center.x) * Math.cos(angleToRadian(rotate)) -
+				(point.y - center.y) * Math.sin(angleToRadian(rotate)) +
+				center.x
+			).toFixed(1)
+		),
+		y: parseFloat(
+			(
+				(point.x - center.x) * Math.sin(angleToRadian(rotate)) +
+				(point.y - center.y) * Math.cos(angleToRadian(rotate)) +
+				center.y
+			).toFixed(1)
+		)
 	}
 }
 // 求两点之间的中点坐标
@@ -99,9 +112,9 @@ export const positionArrToPath = (position_arr: { x: number; y: number }[]) => {
 }
 /**
  * 获取相对于svg最新的坐标
- * @param init_pos 相对于页面的初始坐标
- * @param finally_pos 相对于页面的最终坐标
- * @param svg_init_pos 相对于svg的初始坐标
+ * @param init_pos 原中心坐标
+ * @param finally_pos 新中心坐标
+ * @param svg_init_pos 在画布中的的原坐标
  * @returns svg最新的坐标
  */
 export const getSvgNowPosition = (init_pos: number, finally_pos: number, svg_init_pos: number) => {
@@ -113,7 +126,7 @@ export const getSvgNowPosition = (init_pos: number, finally_pos: number, svg_ini
  * @param default_val
  * @returns
  */
-export const objectDeepClone = <T>(object: object, default_val: any = {}) => {
+export const objectDeepClone = <T>(object: Record<keyof any, any>, default_val: any = {}) => {
 	if (!object) {
 		return default_val as T
 	}
@@ -134,11 +147,10 @@ export const setSvgActualInfo = (done_json: IDoneJson, resize?: boolean) => {
 			height = 0
 		if (done_json.type !== EDoneJsonType.Vue) {
 			const BBox = (queryBbox as SVGGraphicsElement).getBBox()
-			console.log(BBox)
-			x = BBox.x
-			y = BBox.y
-			width = BBox.width
-			height = BBox.height
+			x = parseFloat(BBox.x.toFixed(0))
+			y = parseFloat(BBox.y.toFixed(0))
+			width = parseFloat(BBox.width.toFixed(0))
+			height = parseFloat(BBox.height.toFixed(0))
 		} else {
 			width = (queryBbox as HTMLElement).offsetWidth
 			height = (queryBbox as HTMLElement).offsetHeight
@@ -187,41 +199,100 @@ export const setSvgActualInfo = (done_json: IDoneJson, resize?: boolean) => {
 				height
 			}
 		}
+		done_json.center_position = {
+			x: done_json.x + done_json.actual_bound.x + width / 2,
+			y: done_json.y + done_json.actual_bound.y + height / 2
+		}
 		done_json.point_coordinate.tl = {
-			x: done_json.x - (width * done_json.scale_x) / 2,
-			y: done_json.y - (height * done_json.scale_y) / 2
+			x: done_json.center_position.x - (width * done_json.scale_x) / 2,
+			y: done_json.center_position.y - (height * done_json.scale_y) / 2
 		}
 		done_json.point_coordinate.tc = {
-			x: done_json.x,
-			y: done_json.y - (height * done_json.scale_y) / 2
+			x: done_json.center_position.x,
+			y: done_json.center_position.y - (height * done_json.scale_y) / 2
 		}
 		done_json.point_coordinate.tr = {
-			x: done_json.x + (width * done_json.scale_x) / 2,
-			y: done_json.y - (height * done_json.scale_y) / 2
+			x: done_json.center_position.x + (width * done_json.scale_x) / 2,
+			y: done_json.center_position.y - (height * done_json.scale_y) / 2
 		}
 		done_json.point_coordinate.l = {
-			x: done_json.x - (width * done_json.scale_x) / 2,
-			y: done_json.y
+			x: done_json.center_position.x - (width * done_json.scale_x) / 2,
+			y: done_json.center_position.y
 		}
 		done_json.point_coordinate.r = {
-			x: done_json.x + (width * done_json.scale_x) / 2,
-			y: done_json.y
+			x: done_json.center_position.x + (width * done_json.scale_x) / 2,
+			y: done_json.center_position.y
 		}
 		done_json.point_coordinate.bl = {
-			x: done_json.x - (width * done_json.scale_x) / 2,
-			y: done_json.y + (height * done_json.scale_y) / 2
+			x: done_json.center_position.x - (width * done_json.scale_x) / 2,
+			y: done_json.center_position.y + (height * done_json.scale_y) / 2
 		}
 		done_json.point_coordinate.bc = {
-			x: done_json.x,
-			y: done_json.y + (height * done_json.scale_y) / 2
+			x: done_json.center_position.x,
+			y: done_json.center_position.y + (height * done_json.scale_y) / 2
 		}
 		done_json.point_coordinate.br = {
-			x: done_json.x + (width * done_json.scale_x) / 2,
-			y: done_json.y + (height * done_json.scale_y) / 2
+			x: done_json.center_position.x + (width * done_json.scale_x) / 2,
+			y: done_json.center_position.y + (height * done_json.scale_y) / 2
 		}
 		if (done_json.rotate !== 0) {
 			setAfterRotationPointCoordinate(done_json)
 		}
+		moveAnchors(done_json)
+	}
+}
+/**
+ * 重置旧八点坐标
+ * @param done_json
+ */
+export const resetHandlePointOld = (done_json: IDoneJson) => {
+	for (const k of Object.keys(done_json.point_coordinate)) {
+		if (done_json.point_coordinate_old) {
+			done_json.point_coordinate_old[k as keyof IPointCoordinate].x = 0
+			done_json.point_coordinate_old[k as keyof IPointCoordinate].y = 0
+		}
+	}
+}
+
+/**
+ * 移动八点坐标
+ * @param done_json 当前组件
+ * @param x x轴移动量
+ * @param y y轴移动量
+ */
+export const moveHandlePoint = (done_json: IDoneJson, x?: number, y?: number) => {
+	const globalStore = useGlobalStore(pinia)
+	const _x = x ?? globalStore.mouse_info.new_position_x - globalStore.mouse_info.position_x
+	const _y = y ?? globalStore.mouse_info.new_position_y - globalStore.mouse_info.position_y
+	for (const k of Object.keys(done_json.point_coordinate)) {
+		if (x !== undefined && y !== undefined) {
+			done_json.point_coordinate[k as keyof IPointCoordinate].x += _x
+			done_json.point_coordinate[k as keyof IPointCoordinate].y += _y
+		} else if (done_json.point_coordinate_old) {
+			done_json.point_coordinate[k as keyof IPointCoordinate].x =
+				done_json.point_coordinate_old[k as keyof IPointCoordinate].x + _x
+			done_json.point_coordinate[k as keyof IPointCoordinate].y =
+				done_json.point_coordinate_old[k as keyof IPointCoordinate].y + _y
+		}
+	}
+}
+/**
+ * 移动绑定锚点的线
+ * @param done_json
+ */
+export const moveAnchors = (done_json: IDoneJson) => {
+	const globalStore = useGlobalStore(pinia)
+	for (let d of globalStore.done_json) {
+		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 }
+			}
+			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 }
+			}
+		}
 	}
 }
 /**
@@ -247,70 +318,14 @@ export const getAnchorPosByAnchorType = (anchor_type: ELineBindAnchors, done_jso
  */
 export const setAfterRotationPointCoordinate = (item: IDoneJson) => {
 	item.point_coordinate = {
-		tl: calculateRotatedPointCoordinate(
-			item.point_coordinate.tl,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		tc: calculateRotatedPointCoordinate(
-			item.point_coordinate.tc,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		tr: calculateRotatedPointCoordinate(
-			item.point_coordinate.tr,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		l: calculateRotatedPointCoordinate(
-			item.point_coordinate.l,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		r: calculateRotatedPointCoordinate(
-			item.point_coordinate.r,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		bl: calculateRotatedPointCoordinate(
-			item.point_coordinate.bl,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		bc: calculateRotatedPointCoordinate(
-			item.point_coordinate.bc,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		),
-		br: calculateRotatedPointCoordinate(
-			item.point_coordinate.br,
-			{
-				x: item.x,
-				y: item.y
-			},
-			item.rotate
-		)
+		tl: calculateRotatedPointCoordinate(item.point_coordinate.tl, item.center_position, item.rotate),
+		tc: calculateRotatedPointCoordinate(item.point_coordinate.tc, item.center_position, item.rotate),
+		tr: calculateRotatedPointCoordinate(item.point_coordinate.tr, item.center_position, item.rotate),
+		l: calculateRotatedPointCoordinate(item.point_coordinate.l, item.center_position, item.rotate),
+		r: calculateRotatedPointCoordinate(item.point_coordinate.r, item.center_position, item.rotate),
+		bl: calculateRotatedPointCoordinate(item.point_coordinate.bl, item.center_position, item.rotate),
+		bc: calculateRotatedPointCoordinate(item.point_coordinate.bc, item.center_position, item.rotate),
+		br: calculateRotatedPointCoordinate(item.point_coordinate.br, item.center_position, item.rotate)
 	}
 }
 
@@ -395,3 +410,112 @@ export const valFormat = (v: any) => {
 	}
 	return v
 }
+/**
+ * 创建连线
+ * @param e 事件对象
+ * @param type 锚点位置
+ * @param itemInfo 被绑定组件
+ */
+export const createLine = (e: MouseEvent, type?: ELineBindAnchors, itemInfo?: IDoneJson) => {
+	e.preventDefault()
+
+	const globalStore = useGlobalStore(pinia)
+	const configStore = useConfigStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+
+	const { clientX, clientY } = e
+	let create_line_info = objectDeepClone<ISystemStraightLine>(configStore.connection_line)
+	//以后顶部可以选择连线是哪种 直线先不做
+	/*if (false) {
+	 create_line_info = straight_line_system
+	 }*/
+	let x: number = 0
+	let y: number = 0
+	if (type && itemInfo) {
+		create_line_info.bind_anchors.start = {
+			type: type,
+			target_id: itemInfo.id
+		}
+		let t = getAnchorPosByAnchorType(type, itemInfo)
+		x = t.x
+		y = t.y
+	} else {
+		x = Math.round(
+			(clientX - svgEditLayoutStore.canvasInfo.left) / configStore.svg.scale - svgEditLayoutStore.center_offset.x
+		)
+		y = Math.round(
+			(clientY - svgEditLayoutStore.canvasInfo.top) / configStore.svg.scale - svgEditLayoutStore.center_offset.y
+		)
+	}
+	const done_item_json = {
+		id: straight_line_system.name + randomString(),
+		x: x,
+		y: y,
+		client: {
+			x: x,
+			y: y
+		},
+		scale_x: 1,
+		scale_y: 1,
+		rotate: 0,
+		actual_bound: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		center_position: { x: 0, y: 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
+			}
+		},
+		...create_line_info
+	}
+	done_item_json.props.point_position.val.push({
+		x: 0,
+		y: 0
+	})
+	globalStore.setDoneJson(done_item_json)
+	globalStore.setHandleSvgInfo(done_item_json, globalStore.done_json.length - 1)
+
+	globalStore.intention = EGlobalStoreIntention.Connection
+	globalStore.mouse_info = {
+		state: EMouseInfoState.Down,
+		position_x: x,
+		position_y: y,
+		now_position_x: x,
+		now_position_y: y,
+		new_position_x: 0,
+		new_position_y: 0
+	}
+}

package/src/utils/scale-core.ts

@@ -115,6 +115,7 @@ export const calculateTop = (
  * @param curPosition 按住的缩放按钮的坐标
  * @param symmetricPoint 缩放前对称点的坐标
  * @param rotate 旋转角度
+ * @param curPoint
  * @returns
  */
 export const calculateRight = (

package/src/views/EditorS.vue

@@ -13,5 +13,5 @@
 </script>
 
 <template>
-	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="preview" />
+	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="preview" saveFile />
 </template>

package/types/index.d.ts

@@ -4,19 +4,17 @@
  * @created 2023.07.10
  */
 import { DefineComponent } from 'vue'
-import type { IConfig } from '../src/config/types'
-import type { IDataModel } from '../src/components/svg-editor/types'
 
 export declare const SvgEditor: DefineComponent<{
 	data?: string
-	customToolbar?: IConfig
+	customToolbar?: any[]
 	saveFile?: boolean
-	onOnPreview?: (d: IDataModel) => void
-	onOnSave?: (d: IDataModel) => void
+	onOnPreview?: (d: Record<string, any>) => void
+	onOnSave?: (d: Record<string, any>) => void
 	onOnReturn?: () => void
 }>
 export declare const SvgViewer: DefineComponent<{
-	data?: IDataModel
+	data?: Record<string, any>
 	canvasDrag?: boolean
 	onOnMessage?: (d: { topics: string, message: string }) => void
 }>