@zhangqingcq/vgce 0.0.14 → 0.0.16

package/src/config/types.ts

@@ -0,0 +1,126 @@
+/**
+ * 组件分组数据格式
+ * @property {string} groupType 组件分组类型
+ * @property {string} title 组件分组标题
+ * @property {Array} list 分组包含的组件项列表
+ * @export
+ * @interface IConfigComponentGroup
+ */
+export interface IConfigComponentGroup {
+	groupType: string
+	title: string
+	list: Array<IConfigItem>
+}
+
+export type IConfig = IConfigComponentGroup[]
+
+export interface IConfigItem {
+	name: string
+	title: string
+	display: boolean
+	props: IConfigItemProps
+	type: EDoneJsonType
+	config: IDoneJsonConfig
+	common_animations?: IAnimations
+	animations?: IConfigItemProps //自定义动画效果
+	tag?: any
+	state?: IConfigItemState //通过一个属性去控制多个属性就是有状态组件
+	tag_slot?: string
+	events: Array<IEventsItem>
+}
+
+export interface IAnimations {
+	val: string
+	delay: string
+	speed: string
+	repeat: string
+}
+
+export interface IConfigItemProps {
+	[key: string]: {
+		title: string
+		type: EConfigItemPropsType
+		val: any
+		options?: any
+		disabled?: boolean
+	}
+}
+
+export enum EConfigAnimationsType {
+	None = 'None',
+	Electricity = 'Electricity', //电流效果
+	WaterDrop = 'WaterDrop', //水珠
+	Track = 'Track' //轨迹
+}
+
+export enum EConfigItemPropsType {
+	Input = 'Input',
+	Color = 'Color',
+	InputNumber = 'InputNumber',
+	Switch = 'Switch', //此类型option默认索引0为关闭
+	JsonEdit = 'JsonEdit',
+	Select = 'Select'
+}
+
+export enum EDoneJsonType {
+	File = 'File',
+	StraightLine = 'StraightLine',
+	ConnectionLine = 'ConnectionLine',
+	CustomSvg = 'CustomSvg',
+	Vue = 'Vue'
+}
+
+interface IDoneJsonConfig {
+	can_zoom: boolean
+	have_anchor: boolean
+	actual_rect: boolean
+}
+
+export interface IConfigItemState {
+	OnOff?: {
+		title: string
+		default: false
+		props: { [key: string]: { openVal: any; closeVal: any } }
+	}
+}
+
+export enum EEventType {
+	Click = 'Click',
+	Change = 'Change',
+	Null = ''
+}
+
+export enum EEventAction {
+	ChangeAttr = 'ChangeAttr',
+	JavaScript = 'JavaScript',
+	Null = ''
+}
+
+export enum EConditionType {
+	None = 'None',
+	Relation = 'Relation'
+}
+
+export interface IAttrItem {
+	key: string
+	val: string
+}
+
+export interface ICondition {
+	type: EConditionType
+	Relation?: {
+		key: string
+		relation: string
+		val: string
+		val2?: string
+	}
+}
+
+export interface IEventsItem {
+	type: EEventType
+	action: EEventAction
+	target: string
+	attrs?: IAttrItem[]
+	scripts: string
+	condition?: ICondition
+}

package/src/config/vue/component/button.ts

@@ -0,0 +1,57 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const el_button: IConfigItem = {
+	name: 'el-button',
+	tag: 'el-button',
+	title: '按钮',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		size: {
+			title: '尺寸',
+			type: EConfigItemPropsType.Select,
+			val: 'default',
+			options: [
+				{ label: '大', value: 'large' },
+				{ label: '默认', value: 'default' },
+				{ label: '小', value: 'small' }
+			]
+		},
+		type: {
+			title: '类型',
+			type: EConfigItemPropsType.Select,
+			val: 'primary',
+			options: [
+				{ label: '主要按钮', value: 'primary' },
+				{ label: '成功按钮', value: 'success' },
+				{ label: '警告按钮', value: 'warning' },
+				{ label: '危险按钮', value: 'danger' },
+				{ label: '信息按钮', value: 'info' }
+			]
+		},
+		plain: {
+			title: '朴素按钮',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		},
+		text: {
+			title: '文字按钮',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		}
+	},
+	tag_slot: '按钮',
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/vue/component/common-table.ts

@@ -0,0 +1,124 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const common_table: IConfigItem = {
+	name: 'common-table',
+	title: '通用表格',
+	tag: 'common-table',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		'col-config': {
+			title: '列配置',
+			type: EConfigItemPropsType.JsonEdit,
+			val: [
+				{
+					prop: 'date',
+					label: '第一列',
+					width: '120px',
+					fixed: false,
+					sortable: false,
+					'show-overflow-tooltip': false
+				},
+				{
+					prop: 'name',
+					label: '第二列',
+					width: '120px',
+					fixed: false,
+					sortable: false,
+					'show-overflow-tooltip': false
+				},
+				{
+					prop: 'address',
+					label: '第三列测试',
+					width: '280px',
+					fixed: false,
+					sortable: false,
+					'show-overflow-tooltip': false
+				}
+			]
+		},
+		data: {
+			title: '表格数据',
+			type: EConfigItemPropsType.JsonEdit,
+			val: [
+				{
+					date: '2016-05-03',
+					name: 'Tom',
+					address: 'No. 189, Grove St, Los Angeles'
+				},
+				{
+					date: '2016-05-02',
+					name: 'Tom',
+					address: 'No. 189, Grove St, Los Angeles'
+				},
+				{
+					date: '2016-05-04',
+					name: 'Tom',
+					address: 'No. 189, Grove St, Los Angeles'
+				},
+				{
+					date: '2016-05-01',
+					name: 'Tom',
+					address: 'No. 189, Grove St, Los Angeles'
+				}
+			]
+		},
+		height: {
+			title: '高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: null
+		},
+		'max-height': {
+			title: '最大高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: null
+		},
+		stripe: {
+			title: '斑马纹',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		},
+		border: {
+			title: '纵向边框',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		},
+		size: {
+			title: '尺寸',
+			type: EConfigItemPropsType.Select,
+			val: 'default',
+			options: [
+				{
+					label: '大',
+					value: 'large'
+				},
+				{
+					label: '默认',
+					value: 'default'
+				},
+				{
+					label: '小',
+					value: 'small'
+				}
+			]
+		},
+		fit: {
+			title: '列宽自撑开',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/vue/component/index.ts

@@ -0,0 +1,13 @@
+import type { IConfigComponentGroup } from '@/config/types'
+
+import { el_button } from './button'
+import { common_table } from './common-table'
+import { now_time } from './now-time'
+import { el_tag } from './tag'
+import { progress_a } from './progress'
+
+export const components: IConfigComponentGroup = {
+	groupType: 'custom-vue',
+	title: 'VUE组件',
+	list: [el_button, progress_a, common_table, now_time, el_tag]
+}

package/src/config/vue/component/now-time.ts

@@ -0,0 +1,29 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const now_time: IConfigItem = {
+	name: 'now-time',
+	title: '当前时间',
+	tag: 'now-time',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: true,
+		have_anchor: false,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		fontColor: {
+			title: '文字颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#000000'
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/vue/component/progress.ts

@@ -0,0 +1,29 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const progress_a: IConfigItem = {
+	name: 'progress-a',
+	tag: 'progress-a',
+	title: '进度条',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		percentage: {
+			title: '进度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 10
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/vue/component/tag.ts

@@ -0,0 +1,46 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const el_tag: IConfigItem = {
+	name: 'el-tag',
+	tag: 'el-tag',
+	title: '标签',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		type: {
+			title: '类型',
+			type: EConfigItemPropsType.Select,
+			val: 'success',
+			options: [
+				{ label: '成功', value: 'success' },
+				{ label: '警告', value: 'warning' },
+				{ label: '危险', value: 'danger' },
+				{ label: '信息', value: 'info' }
+			]
+		},
+		closable: {
+			title: '可关闭',
+			type: EConfigItemPropsType.Switch,
+			val: true
+		},
+		'disable-transitions': {
+			title: '渐变',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		}
+	},
+	tag_slot: '标签',
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/vue/echarts/index.ts

@@ -0,0 +1,8 @@
+import type { IConfigComponentGroup } from '@/config/types'
+import { pie_charts } from './pie-charts'
+
+export const echarts_group: IConfigComponentGroup = {
+	groupType: 'echarts',
+	title: '图表',
+	list: [pie_charts]
+}

package/src/config/vue/echarts/pie-charts.ts

@@ -0,0 +1,60 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const pie_charts: IConfigItem = {
+	name: 'pie-charts',
+	tag: 'pie-charts',
+	title: '饼图',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		title: {
+			title: '标题',
+			type: EConfigItemPropsType.Input,
+			val: '默认标题'
+		},
+		seriesName: {
+			title: '详情',
+			type: EConfigItemPropsType.Input,
+			val: '详情标题'
+		},
+		seriesData: {
+			title: 'legendData',
+			type: EConfigItemPropsType.JsonEdit,
+			val: [
+				{
+					value: 1048,
+					name: '办公楼A'
+				},
+				{
+					value: 735,
+					name: '办公楼B'
+				},
+				{
+					value: 580,
+					name: '保安室'
+				},
+				{
+					value: 484,
+					name: '地下车库'
+				},
+				{
+					value: 300,
+					name: '食堂'
+				}
+			]
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/vue/index.ts

@@ -0,0 +1,5 @@
+import type { IConfigComponentGroup } from '../types'
+import { components } from './component'
+import { echarts_group } from './echarts'
+
+export const vue_config: IConfigComponentGroup[] = Object.seal([components, echarts_group])

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