@zhangqingcq/vgce 0.0.14 → 0.0.16

package/src/stores/global/index.ts

@@ -0,0 +1,109 @@
+import { defineStore } from 'pinia'
+import { nextTick } from 'vue'
+import { config } from '@/config'
+import type { IConfigItem } from '@/config/types'
+import { isOfType, objectDeepClone, setSvgActualInfo } from '@/utils'
+import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from './types'
+import type { IDoneJson, IGlobalStore, IMouseInfo, IScaleInfo } from './types'
+import { useHistoryRecord } from '@/hooks'
+
+/**
+ * 全局共享状态
+ */
+export const useGlobalStore = defineStore('global-store', {
+	state: (): IGlobalStore => {
+		return {
+			config_center: config,
+			intention: EGlobalStoreIntention.None,
+			create_svg_info: null,
+			done_json: [],
+			mouse_info: {
+				state: EMouseInfoState.Up,
+				position_x: 0,
+				position_y: 0,
+				now_position_x: 0,
+				now_position_y: 0,
+				new_position_x: 0,
+				new_position_y: 0
+			},
+			handle_svg_info: null,
+			scale_info: {
+				type: EScaleInfoType.None,
+				scale_times: {
+					x: 1,
+					y: 1
+				},
+				scale_item_info: {
+					x: 0,
+					y: 0
+				},
+				symmetric_point: {
+					x: 0,
+					y: 0
+				}
+			},
+			rotate_info: {
+				angle: 0
+			},
+			connection_line_node_info: {
+				init_pos: {
+					x: 0,
+					y: 0
+				},
+				point_index: 0
+			}
+		}
+	},
+	getters: {},
+	actions: {
+		setCreateInfo(create_svg_info: IConfigItem | null) {
+			this.intention = EGlobalStoreIntention.Create
+			this.create_svg_info = create_svg_info
+		},
+		setDoneJson(done_json: IDoneJson[] | IDoneJson) {
+			// 有id的组件
+			if (isOfType(done_json, 'id')) {
+				this.done_json.push(done_json)
+				nextTick(() => {
+					// 设置组件在画布中的属性（位置和宽高）
+					setSvgActualInfo(done_json)
+				})
+			} else {
+				this.done_json = objectDeepClone<IDoneJson[]>(done_json)
+			}
+			nextTick(() => {
+				//压入历史操作记录
+				useHistoryRecord(objectDeepClone<IDoneJson[]>(this.done_json))
+			})
+		},
+		setMouseInfo(mouse_info: IMouseInfo) {
+			this.mouse_info = mouse_info
+		},
+		setHandleSvgInfo(info: IDoneJson | null, index?: number) {
+			let current_index = index
+			if (info) {
+				if (!current_index && current_index != 0) {
+					//如果索引没传 在这根据id查出索引
+					current_index = this.done_json.findIndex((f) => f.id === info.id) ?? -1
+				}
+				this.handle_svg_info = {
+					info: info,
+					index: current_index
+				}
+			} else {
+				this.handle_svg_info = info
+			}
+		},
+		setScaleInfo(info: IScaleInfo) {
+			this.scale_info = info
+		},
+		spliceDoneJson(index: number) {
+			const globalStore = useGlobalStore()
+			globalStore.done_json.splice(index, 1)
+			useHistoryRecord(globalStore.done_json)
+		}
+	}
+})
+// useGlobalStore().$subscribe((mutation, state) => {
+//   console.log(mutation, state, 102);
+// });

package/src/stores/global/types.ts

@@ -0,0 +1,115 @@
+import type { IConfig, IConfigItem } from '@/config/types'
+
+export interface IGlobalStore {
+	config_center: IConfig
+	intention: EGlobalStoreIntention
+	create_svg_info: IConfigItem | null
+	done_json: IDoneJson[]
+	mouse_info: IMouseInfo
+	handle_svg_info: IHandleSvgInfo | null
+	scale_info: IScaleInfo
+	rotate_info: IRotateInfo
+	connection_line_node_info: IConnectionLineNodeInfo
+}
+export interface IDoneJson extends IConfigItem {
+	id: string
+	x: number
+	y: number
+	client: ICoordinate
+	scale_x: number
+	scale_y: number
+	rotate: number
+	actual_bound: {
+		x: number
+		y: number
+		width: number
+		height: number
+	}
+	point_coordinate: {
+		tl: ICoordinate
+		tc: ICoordinate
+		tr: ICoordinate
+		l: ICoordinate
+		r: ICoordinate
+		bl: ICoordinate
+		bc: ICoordinate
+		br: ICoordinate
+	}
+}
+export enum EGlobalStoreIntention {
+	None = 'None',
+	Create = 'Create',
+	Move = 'Move',
+	MoveCanvas = 'MoveCanvas',
+	Select = 'Select',
+	Zoom = 'Zoom',
+	Rotate = 'Rotate',
+	Connection = 'Connection',
+	SetConnectionLineNode = 'SetConnectionLineNode',
+	ContextMenu = 'ContextMenu'
+}
+export interface IMouseInfo {
+	state: EMouseInfoState
+	position_x: number //鼠标指针坐标
+	position_y: number
+	now_position_x: number //当前目标的坐标
+	now_position_y: number
+	new_position_x: number //移动之后目标的坐标
+	new_position_y: number
+}
+export enum EMouseInfoState {
+	Down = 'Down',
+	Up = 'Up'
+}
+export interface IHandleSvgInfo {
+	info: IDoneJson
+	index: number
+}
+/**
+ * 缩放信息
+ */
+export interface IScaleInfo {
+	type: EScaleInfoType
+	scale_times: {
+		//点击缩放时当前组件的缩放倍数
+		x: number
+		y: number
+	}
+	scale_item_info: {
+		x: number
+		y: number
+	}
+	symmetric_point: {
+		//缩放前缩放手柄对应组件中心坐标的对称点坐标
+		x: number
+		y: number
+	}
+}
+/**
+ * 旋转信息
+ */
+export interface IRotateInfo {
+	angle: number
+}
+export enum EScaleInfoType {
+	None = '',
+	TopLeft = 'TopLeft',
+	TopCenter = 'TopCenter',
+	TopRight = 'TopRight',
+	Left = 'Left',
+	Right = 'Right',
+	BottomLeft = 'BottomLeft',
+	BottomCenter = 'BottomCenter',
+	BottomRight = 'BottomRight'
+}
+export interface ICoordinate {
+	x: number
+	y: number
+}
+export interface IConnectionLineNodeInfo {
+	init_pos: {
+		x: number
+		y: number
+	}
+	point_index: number
+}

package/src/stores/main.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useStore = defineStore('main', () => {
+	const data = ref()
+
+	return {
+		data
+	}
+})

package/src/stores/svg-edit-layout/index.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import type { ISvgEditLayoutStore } from './types'
+/**
+ * 编辑器布局状态
+ */
+export const useSvgEditLayoutStore = defineStore('svg-edit-layout-store', {
+	state: (): ISvgEditLayoutStore => {
+		return {
+			left_nav: true,
+			right_nav: true,
+			center_offset: {
+				x: 0,
+				y: 0
+			}
+		}
+	}
+})

package/src/stores/svg-edit-layout/types.ts

@@ -0,0 +1,8 @@
+export interface ISvgEditLayoutStore {
+	left_nav: boolean
+	right_nav: boolean
+	center_offset: {
+		x: number
+		y: number
+	}
+}

package/src/stores/system/index.ts

@@ -0,0 +1,174 @@
+import { objectDeepClone, randomString } from '@/utils'
+import { defineStore } from 'pinia'
+import { useGlobalStore } from '../global'
+import type { IDoneJson } from '../global/types'
+import { EGlobalStoreIntention } from '../global/types'
+import type { ContextMenuStoreState, EditPrivateStoreState } from './types'
+import { EContextMenuInfoType } from './types'
+import { useHistoryRecord } from '@/hooks'
+
+/**
+ * 编辑器私有状态
+ */
+export const useEditPrivateStore = defineStore('edit-private-store', {
+	state: (): EditPrivateStoreState => {
+		return {
+			old_done_components: [], //记录预览之前的组件数据
+			history_doneComponent: [],
+			history_now_index: 0,
+			is_record_history: true, //是否需要记录当前状态，如果是操作的历史记录，则不需要记录
+			max_record_times: 10
+		}
+	},
+	getters: {
+		getTopBtnUndoStatus(state) {
+			return state.history_now_index >= 1
+		},
+		getTopBtnRedoStatus(state) {
+			return state.history_now_index + 1 != state.history_doneComponent.length
+		}
+	},
+	actions: {
+		topUndoBtnClick() {
+			console.log('撤销')
+			if (this.history_now_index < 1) {
+				return
+			}
+			const global_store = useGlobalStore()
+			// select_component_info.value = {};
+			this.is_record_history = false
+			this.history_now_index -= 1
+			global_store.setDoneJson(this.history_doneComponent[this.history_now_index])
+		},
+		topRedoBtnClick() {
+			console.log('重做')
+			if (this.history_now_index + 1 == this.history_doneComponent.length) {
+				return
+			}
+			const global_store = useGlobalStore()
+			this.is_record_history = false
+			this.history_now_index += 1
+			global_store.setDoneJson(this.history_doneComponent[this.history_now_index])
+		}
+	}
+})
+export const useContextMenuStore = defineStore('context-menu-store', {
+	state: (): ContextMenuStoreState => {
+		return {
+			display: false,
+			info: {
+				[EContextMenuInfoType.Copy]: {
+					title: '复制',
+					hot_key: 'Ctrl+C',
+					enable: true
+				},
+				[EContextMenuInfoType.Delete]: {
+					title: '删除',
+					hot_key: 'Delete',
+					enable: true
+				},
+				[EContextMenuInfoType.MoveUpTopLevel]: {
+					title: '置于顶层',
+					hot_key: 'Ctrl+→',
+					enable: true
+				},
+				[EContextMenuInfoType.MoveDownTopLevel]: {
+					title: '置于底层',
+					hot_key: 'Ctrl+←',
+					enable: true
+				},
+				[EContextMenuInfoType.MoveUpOneLevel]: {
+					title: '置于上一层',
+					hot_key: 'Ctrl+↑',
+					enable: true
+				},
+				[EContextMenuInfoType.MoveDownOneLevel]: {
+					title: '置于下一层',
+					hot_key: 'Ctrl+↓',
+					enable: true
+				}
+			}
+		}
+	},
+	actions: {
+		onContextMenuClick(type: keyof typeof EContextMenuInfoType) {
+			const globalStore = useGlobalStore()
+			if (!globalStore.handle_svg_info) {
+				return
+			}
+			globalStore.intention = EGlobalStoreIntention.Select
+			switch (type) {
+				case EContextMenuInfoType.Copy:
+					const temp_item = objectDeepClone<IDoneJson>(globalStore.handle_svg_info.info)
+					temp_item.id = temp_item.name + randomString()
+					temp_item.title += '-copy'
+					temp_item.x += 10
+					temp_item.y += 10
+					globalStore.setDoneJson(temp_item)
+					this.display = false
+					globalStore.setHandleSvgInfo(temp_item, globalStore.done_json.length)
+					break
+				case EContextMenuInfoType.Delete:
+					globalStore.spliceDoneJson(globalStore.handle_svg_info.index)
+					this.display = false
+					globalStore.setHandleSvgInfo(null)
+					globalStore.intention = EGlobalStoreIntention.None
+					break
+				case EContextMenuInfoType.MoveUpOneLevel:
+					if (
+						globalStore.done_json.length === 1 ||
+						globalStore.handle_svg_info.index === globalStore.done_json.length - 1
+					) {
+						return
+					}
+					const temp_up_one = globalStore.handle_svg_info.info
+					globalStore.done_json[globalStore.handle_svg_info.index] =
+						globalStore.done_json[globalStore.handle_svg_info.index + 1]
+					globalStore.done_json[globalStore.handle_svg_info.index + 1] = temp_up_one
+					useHistoryRecord(globalStore.done_json)
+					this.display = false
+					globalStore.setHandleSvgInfo(temp_up_one, globalStore.handle_svg_info.index + 1)
+					break
+				case EContextMenuInfoType.MoveDownOneLevel:
+					if (globalStore.done_json.length === 1 || globalStore.handle_svg_info.index === 0) {
+						return
+					}
+					const temp_down_one = globalStore.handle_svg_info.info
+					globalStore.done_json[globalStore.handle_svg_info.index] =
+						globalStore.done_json[globalStore.handle_svg_info.index - 1]
+					globalStore.done_json[globalStore.handle_svg_info.index - 1] = temp_down_one
+					useHistoryRecord(globalStore.done_json)
+					this.display = false
+					globalStore.setHandleSvgInfo(temp_down_one, globalStore.handle_svg_info.index - 1)
+					break
+				case EContextMenuInfoType.MoveDownTopLevel:
+					if (globalStore.done_json.length === 1 || globalStore.handle_svg_info.index === 0) {
+						return
+					}
+					const temp_down_top = globalStore.handle_svg_info.info
+					globalStore.done_json.splice(globalStore.handle_svg_info.index, 1)
+					globalStore.done_json.unshift(temp_down_top)
+					useHistoryRecord(globalStore.done_json)
+					this.display = false
+					globalStore.setHandleSvgInfo(temp_down_top, 0)
+					break
+				case EContextMenuInfoType.MoveUpTopLevel:
+					if (
+						globalStore.done_json.length === 1 ||
+						globalStore.handle_svg_info.index === globalStore.done_json.length
+					) {
+						return
+					}
+					const temp_up_top = globalStore.handle_svg_info.info
+					globalStore.done_json.splice(globalStore.handle_svg_info.index, 1)
+					globalStore.done_json.push(temp_up_top)
+					useHistoryRecord(globalStore.done_json)
+					this.display = false
+					globalStore.setHandleSvgInfo(temp_up_top, globalStore.done_json.length - 1)
+					break
+				default:
+					break
+			}
+		}
+	}
+})

package/src/stores/system/types.ts

@@ -0,0 +1,43 @@
+import type { IDoneJson } from '../global/types'
+
+export interface EditPrivateStoreState {
+	old_done_components: IDoneJson[]
+	history_doneComponent: IDoneJson[][]
+	history_now_index: number
+	is_record_history: boolean
+	max_record_times: number
+}
+export interface ContextMenuStoreState {
+	display: boolean
+	info: {
+		[key in EContextMenuInfoType]: IContextMenuInfo
+	}
+}
+export interface IContextMenuInfo {
+	title: string
+	hot_key: string
+	enable: boolean
+}
+export enum EContextMenuInfoType {
+	Copy = 'Copy',
+	Delete = 'Delete',
+	MoveUpOneLevel = 'MoveUpOneLevel',
+	MoveDownOneLevel = 'MoveDownOneLevel',
+	MoveUpTopLevel = 'MoveUpTopLevel',
+	MoveDownTopLevel = 'MoveDownTopLevel'
+}
+
+export enum EShortcutKeyType {
+	Copy = 'Copy',
+	Delete = 'Delete',
+	MoveUpOneLevel = 'MoveUpOneLevel',
+	MoveDownOneLevel = 'MoveDownOneLevel',
+	MoveUpTopLevel = 'MoveUpTopLevel',
+	MoveDownTopLevel = 'MoveDownTopLevel',
+	Redo = 'Redo',
+	Undo = 'Undo',
+	MoveUp = 'MoveUp',
+	MoveDown = 'MoveDown',
+	MoveLeft = 'MoveLeft',
+	MoveRight = 'MoveRight'
+}