@zhangqingcq/vgce 0.0.13 → 0.0.15

package/src/hooks.ts

@@ -0,0 +1,47 @@
+import type { IDataModel } from '@/components/svg-editor/types'
+import { createPinia } from 'pinia'
+import { useConfigStore } from '@/stores/config'
+import { useGlobalStore } from '@/stores/global'
+import type { IDoneJson } from '@/stores/global/types'
+import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+import { useEditPrivateStore } from '@/stores/system'
+
+import { ElMessage } from 'element-plus'
+
+export const pinia = createPinia()
+
+export const useHistoryRecord = (done_json: IDoneJson[]) => {
+	const edit_private_store = useEditPrivateStore()
+	if (edit_private_store.is_record_history) {
+		if (edit_private_store.history_now_index + 1 < edit_private_store.history_doneComponent.length) {
+			edit_private_store.history_doneComponent.splice(edit_private_store.history_now_index + 1)
+		}
+		edit_private_store.history_doneComponent.push(done_json)
+		edit_private_store.history_now_index = edit_private_store.history_doneComponent.length - 1
+		if (edit_private_store.history_doneComponent.length > edit_private_store.max_record_times) {
+			edit_private_store.history_doneComponent.shift()
+			edit_private_store.history_now_index = edit_private_store.history_doneComponent.length - 1
+		}
+	}
+	edit_private_store.is_record_history = true
+}
+export const useImportDataModel = (model_str: string) => {
+	try {
+		const json: IDataModel = JSON.parse(model_str)
+		if (!json.config || !json.layout_center || !json.done_json) {
+			ElMessage.error('请导入正确的数据模型！')
+			return false
+		}
+		const globalStore = useGlobalStore(pinia)
+		const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+		const configStore = useConfigStore(pinia)
+		configStore.$state = json.config
+		svgEditLayoutStore.center_offset = json.layout_center
+		globalStore.setDoneJson(json.done_json)
+		return true
+	} catch (error) {
+		ElMessage.error('请导入正确的数据模型！')
+		console.error(error)
+		return false
+	}
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @description 库vgce入口
+ * @author Ricky email:zhangqingcq@foxmail.com
+ * @created 2023.07.10
+ */
+
+import 'virtual:windi.css'
+import 'virtual:svg-icons-register'
+import './assets/main.less'
+
+import SvgEditor from '@/components/svg-editor/index.vue'
+import SvgViewer from '@/components/svg-viewer/index.vue'
+
+export { SvgEditor, SvgViewer }

package/src/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { pinia } from '@/hooks'
+
+import App from './App.vue'
+import router from './router'
+import 'virtual:windi.css'
+import 'virtual:svg-icons-register'
+import './assets/main.less'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(pinia)
+
+app.mount('#app')

package/src/router.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import EditorS from '@/views/EditorS.vue'
+
+const router = createRouter({
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: '/',
+			redirect: '/EditorS'
+		},
+		{
+			path: '/EditorS',
+			name: 'EditorS',
+			component: EditorS
+		},
+		{
+			path: '/Preview',
+			name: 'Preview',
+			component: () => import('@/views/Preview.vue')
+		}
+	]
+})
+
+export default router

package/src/stores/config/index.ts

@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+import { objectDeepClone } from '@/utils'
+import { connection_line_system } from '@/components/config'
+
+let l = localStorage.getItem('svg-editor-config')
+let s: any
+let t: any
+
+if (l) {
+	let b = JSON.parse(l)
+	t = b.connection_line
+	s = b.svg
+} else {
+	t = objectDeepClone(connection_line_system)
+	s = {
+		background_color: '#fff',
+		scale: 1,
+		position_center: {
+			x: -333,
+			y: -113
+		},
+		svg_position_center: {
+			x: 50,
+			y: 50
+		},
+		grid: true,
+		ruler: true
+	}
+}
+
+/**
+ * 配置文件
+ */
+export const useConfigStore = defineStore('config-store', {
+	state: () => {
+		return {
+			svg: s,
+			connection_line: t,
+			net: { mqtt: { url: '', user: '', pwd: '', topics: '' } }
+		}
+	},
+	getters: {},
+	actions: {}
+})

package/src/stores/config/types.ts

@@ -0,0 +1,27 @@
+export interface IPositionCenter {
+	svg: IPositionCenterSvg
+}
+
+export interface IPositionCenterSvg {
+	background_color: string
+	scale: number
+	position_center: {
+		x: number
+		y: number
+	}
+	svg_position_center: {
+		x: number
+		y: number
+	}
+	grid: boolean
+	ruler: boolean
+}
+
+export interface INet {
+	mqtt: {
+		url: string
+		user: string
+		pwd: string
+		topics: string
+	}
+}

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'
+}