@zhangqingcq/vgce 0.1.8 → 0.1.9

package/package.json

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

package/src/assets/svgs/text-box.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723449312323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4279" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M938.666667 955.733333h-85.333334a17.066667 17.066667 0 0 1-17.066666-17.066666v-17.066667H187.733333v17.066667a17.066667 17.066667 0 0 1-17.066666 17.066666H85.333333a17.066667 17.066667 0 0 1-17.066666-17.066666v-85.333334a17.066667 17.066667 0 0 1 17.066666-17.066666h17.066667V187.733333H85.333333a17.066667 17.066667 0 0 1-17.066666-17.066666V85.333333a17.066667 17.066667 0 0 1 17.066666-17.066666h85.333334a17.066667 17.066667 0 0 1 17.066666 17.066666v17.066667h648.533334V85.333333a17.066667 17.066667 0 0 1 17.066666-17.066666h85.333334a17.066667 17.066667 0 0 1 17.066666 17.066666v85.333334a17.066667 17.066667 0 0 1-17.066666 17.066666h-17.066667v648.533334h17.066667a17.066667 17.066667 0 0 1 17.066666 17.066666v85.333334a17.066667 17.066667 0 0 1-17.066666 17.066666z m-68.266667-34.133333h51.2v-51.2h-51.2v51.2zM102.4 921.6h51.2v-51.2H102.4v51.2z m85.333333-34.133333h648.533334v-34.133334a17.066667 17.066667 0 0 1 17.066666-17.066666h34.133334V187.733333h-34.133334a17.066667 17.066667 0 0 1-17.066666-17.066666V136.533333H187.733333v34.133334a17.066667 17.066667 0 0 1-17.066666 17.066666H136.533333v648.533334h34.133334a17.066667 17.066667 0 0 1 17.066666 17.066666v34.133334zM904.533333 153.6h17.066667V102.4h-51.2v51.2h34.133333zM119.466667 153.6h34.133333V102.4H102.4v51.2h17.066667z" p-id="4280"></path></svg>

package/src/config/files/text-box.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	const props = withDefaults(
+		defineProps<{
+			width: number
+			height: number
+			bgColor: string
+			bgOpacity: number
+			borderColor: string
+			borderWidth: number
+			borderRadius: number
+			borderOpacity: number
+		}>(),
+		{
+			width: 250,
+			height: 150,
+			bgColor: '#ffffff',
+			bgOpacity: 50,
+			borderColor: '#000000',
+			borderWidth: 1,
+			borderRadius: 5,
+			borderOpacity: 100
+		}
+	)
+	const styleOut = computed(() => {
+		return {
+			width: (props.width > 0 ? props.width : 0) + 'px',
+			height: (props.height > 0 ? props.height : 0) + 'px',
+			borderRadius: (props.borderRadius > 0 ? props.borderRadius : 0) + 'px'
+		}
+	})
+	const styleBorder = computed(() => {
+		return {
+			border: `${props.borderWidth > 0 ? props.borderWidth : 0}px solid ${props.borderColor}`,
+			borderRadius: (props.borderRadius > 0 ? props.borderRadius : 0) + 'px',
+			opacity: (props.borderOpacity > 0 ? (props.borderOpacity < 100 ? props.borderOpacity : 100) : 0) / 100
+		}
+	})
+	const styleM = computed(() => {
+		return {
+			backgroundColor: props.bgColor,
+			opacity: (props.bgOpacity > 0 ? (props.bgOpacity < 100 ? props.bgOpacity : 100) : 0) / 100,
+			borderRadius: props.borderRadius + 'px'
+		}
+	})
+</script>
+
+<template>
+	<div class="outM" :style="styleOut">
+		<div class="wallI" :style="styleM"></div>
+		<div class="borderB" :style="styleBorder"></div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.outM {
+		position: relative;
+	}
+
+	.borderB,
+	.wallI {
+		height: 100%;
+	}
+
+	.borderB {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		left: 0;
+	}
+</style>

package/src/config/index.ts

@@ -1,6 +1,6 @@
 import type { IConfig } from './types'
-import { svg_config } from './svg'
-import { vue_config } from './vue'
+import svg_config from './svg'
+import vue_config from './vue'
 
 import { ElButton, ElTag } from 'element-plus'
 import Progress from '@/config/files/progress.vue'
@@ -11,6 +11,7 @@ import NowTime from '@/config/files/now-time.vue'
 import PieCharts from '@/config/files/pie-charts.vue'
 import LightA from '@/config/files/light-a.vue'
 import ClockA from '@/config/files/clock-a.vue'
+import TextBox from '@/config/files/text-box.vue'
 
 export const vueComp: Record<string, any> = {
 	'svg-text': SvgText,
@@ -22,7 +23,8 @@ export const vueComp: Record<string, any> = {
 	'switch-r': SwitchR,
 	'now-time': NowTime,
 	'light-a': LightA,
-	'clock-a': ClockA
+	'clock-a': ClockA,
+	'text-box': TextBox
 }
 
 export const config: IConfig = [...svg_config, ...vue_config]

package/src/config/svg/animation/index.ts

@@ -1,8 +1,9 @@
 import type { IConfigComponentGroup } from '../../types'
-import { thermometer } from './thermometer'
+import thermometer from './thermometer'
 
-export const animation_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'have_animation',
 	title: '动画SVG',
 	list: [thermometer]
 }
+export default t

package/src/config/svg/animation/thermometer.ts

@@ -1,6 +1,6 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
-export const thermometer: IConfigItem = {
+const t: IConfigItem = {
 	name: 'thermometer',
 	title: '温度计',
 	type: EDoneJsonType.File,
@@ -19,3 +19,4 @@ export const thermometer: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/custom/clock-a.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const clock_a: IConfigItem = {
+const t: IConfigItem = {
 	name: 'clock-a',
 	title: '时钟',
 	tag: 'clock-a',
@@ -62,3 +62,4 @@ export const clock_a: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/custom/index.ts

@@ -1,11 +1,12 @@
 import type { IConfigComponentGroup } from '../../types'
-import { svg_text } from './svg-text'
-import { switch_r } from './switch-r'
-import { light_a } from '@/config/svg/custom/light'
-import { clock_a } from '@/config/svg/custom/clock-a'
+import svg_text from './svg-text'
+import switch_r from './switch-r'
+import light_a from '@/config/svg/custom/light'
+import clock_a from '@/config/svg/custom/clock-a'
 
-export const custom_svg_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'custom_svg_group',
 	title: 'SVG组件',
 	list: [svg_text, switch_r, light_a, clock_a]
 }
+export default t

package/src/config/svg/custom/light.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const light_a: IConfigItem = {
+const t: IConfigItem = {
 	name: 'light',
 	tag: 'light-a',
 	title: '灯',
@@ -37,3 +37,4 @@ export const light_a: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/custom/svg-text.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_text: IConfigItem = {
+const t: IConfigItem = {
 	name: 'svg-text',
 	title: '文字',
 	tag: 'svg-text',
@@ -81,3 +81,4 @@ export const svg_text: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/custom/switch-r.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const switch_r: IConfigItem = {
+const t: IConfigItem = {
 	name: 'switch-r',
 	title: '开关',
 	tag: 'switch-r',
@@ -27,3 +27,4 @@ export const switch_r: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/index.ts

@@ -1,12 +1,8 @@
 import type { IConfigComponentGroup } from '../types'
-import { stateful_group } from './stateful'
-import { stateless_group } from './stateless'
-import { animation_group } from './animation'
-import { custom_svg_group } from './custom'
+import stateful_group from './stateful'
+import stateless_group from './stateless'
+import animation_group from './animation'
+import custom_svg_group from './custom'
 
-export const svg_config: IConfigComponentGroup[] = Object.seal([
-	stateless_group,
-	stateful_group,
-	animation_group,
-	custom_svg_group
-])
+const t: IConfigComponentGroup[] = Object.seal([stateless_group, stateful_group, animation_group, custom_svg_group])
+export default t

package/src/config/svg/stateful/alert-light.ts

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_alert_light: IConfigItem = {
+const t: IConfigItem = {
 	name: 'alert-light',
 	title: '警示灯',
 	type: EDoneJsonType.File,
@@ -31,3 +31,4 @@ export const svg_alert_light: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/stateful/index.ts

@@ -1,8 +1,9 @@
 import type { IConfigComponentGroup } from '../../types'
-import { svg_alert_light } from './alert-light'
+import svg_alert_light from './alert-light'
 
-export const stateful_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'stateful',
 	title: '状态SVG',
 	list: [svg_alert_light]
 }
+export default t

package/src/config/svg/stateless/bot-2.ts

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_bot_2: IConfigItem = {
+const t: IConfigItem = {
 	name: 'bot-2',
 	title: '2号机',
 	type: EDoneJsonType.File,
@@ -31,3 +31,4 @@ export const svg_bot_2: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/stateless/bot-9.ts

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_bot_9: IConfigItem = {
+const t: IConfigItem = {
 	name: 'bot-9',
 	title: '9号机',
 	type: EDoneJsonType.File,
@@ -20,3 +20,4 @@ export const svg_bot_9: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/stateless/hamburger.ts

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_hamburger: IConfigItem = {
+const t: IConfigItem = {
 	name: 'hamburger',
 	title: '汉堡',
 	type: EDoneJsonType.File,
@@ -20,3 +20,4 @@ export const svg_hamburger: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/stateless/hotpot.ts

@@ -1,7 +1,7 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_hotpot: IConfigItem = {
+const t: IConfigItem = {
 	name: 'hotpot',
 	title: '火锅',
 	type: EDoneJsonType.File,
@@ -20,3 +20,4 @@ export const svg_hotpot: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/svg/stateless/index.ts

@@ -1,11 +1,12 @@
 import type { IConfigComponentGroup } from '@/config/types'
-import { svg_bot_2 } from './bot-2'
-import { svg_bot_9 } from './bot-9'
-import { svg_hotpot } from './hotpot'
-import { svg_hamburger } from './hamburger'
+import svg_bot_2 from './bot-2'
+import svg_bot_9 from './bot-9'
+import svg_hotpot from './hotpot'
+import svg_hamburger from './hamburger'
 
-export const stateless_group: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'stateless',
 	title: '静态SVG',
 	list: [svg_hamburger, svg_hotpot, svg_bot_2, svg_bot_9]
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const el_button: IConfigItem = {
+const t: IConfigItem = {
 	name: 'el-button',
 	tag: 'el-button',
 	title: '按钮',
@@ -55,3 +55,4 @@ export const el_button: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const common_table: IConfigItem = {
+const t: IConfigItem = {
 	name: 'common-table',
 	title: '通用表格',
 	tag: 'common-table',
@@ -127,3 +127,4 @@ export const common_table: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,13 +1,15 @@
 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'
+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'
+import textBox from './text-box'
 
-export const components: IConfigComponentGroup = {
+const t: IConfigComponentGroup = {
 	groupType: 'custom-vue',
 	title: 'VUE组件',
-	list: [el_button, progress_a, common_table, now_time, el_tag]
+	list: [el_button, progress_a, common_table, now_time, el_tag, textBox]
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const now_time: IConfigItem = {
+const t: IConfigItem = {
 	name: 'now-time',
 	title: '当前时间',
 	tag: 'now-time',
@@ -61,3 +61,4 @@ export const now_time: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const progress_a: IConfigItem = {
+const t: IConfigItem = {
 	name: 'progress-a',
 	tag: 'progress-a',
 	title: '进度条',
@@ -27,3 +27,4 @@ export const progress_a: IConfigItem = {
 	},
 	events: []
 }
+export default t

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const el_tag: IConfigItem = {
+const t: IConfigItem = {
 	name: 'el-tag',
 	tag: 'el-tag',
 	title: '标签',
@@ -44,3 +44,4 @@ export const el_tag: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/component/text-box.ts

@@ -0,0 +1,66 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+const t: IConfigItem = {
+	name: 'text-box',
+	title: '文字背景框',
+	tag: 'text-box',
+	type: EDoneJsonType.Vue,
+	config: {
+		can_zoom: false,
+		have_anchor: false,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		width: {
+			title: '宽度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 250
+		},
+		height: {
+			title: '高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 150
+		},
+		bgColor: {
+			title: '背景颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#000000'
+		},
+		bgOpacity: {
+			title: '背景透明度(%)',
+			type: EConfigItemPropsType.InputNumber,
+			val: 1
+		},
+		borderColor: {
+			title: '边框颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#cccccc'
+		},
+		borderWidth: {
+			title: '边框宽度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 1
+		},
+		borderRadius: {
+			title: '边框圆角',
+			type: EConfigItemPropsType.InputNumber,
+			val: 5
+		},
+		borderOpacity: {
+			title: '边框透明度(%)',
+			type: EConfigItemPropsType.InputNumber,
+			val: 100
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}
+
+export default t

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

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

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

@@ -1,7 +1,7 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const pie_charts: IConfigItem = {
+const t: IConfigItem = {
 	name: 'pie-charts',
 	tag: 'pie-charts',
 	title: '饼图',
@@ -58,3 +58,4 @@ export const pie_charts: IConfigItem = {
 	},
 	events: []
 }
+export default t

package/src/config/vue/index.ts

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