@zhangqingcq/vgce 0.1.7 → 0.1.9

package/package.json

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

package/src/assets/base.less

@@ -3,112 +3,113 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
+	box-sizing: border-box;
+	margin: 0;
+	font-weight: normal;
 }
 
 body {
-  font-family: Inter,
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  Oxygen,
-  Ubuntu,
-  Cantarell,
-  'Fira Sans',
-  'Droid Sans',
-  'Helvetica Neue',
-  sans-serif;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	font-family:
+		Inter,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		'Fira Sans',
+		'Droid Sans',
+		'Helvetica Neue',
+		sans-serif;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 .modal-full {
-  .el-dialog__body {
-    padding: 0 !important;
-  }
+	.el-dialog__body {
+		padding: 0 !important;
+	}
 }
 
 .bt-Icon {
-  cursor: pointer;
+	cursor: pointer;
 
-  &:hover {
-    opacity: .85;
-    background-color: #e8f9ff;
-  }
+	&:hover {
+		opacity: 0.85;
+		background-color: #e8f9ff;
+	}
 
-  &.active{
-    background-color: #deffe4;
-  }
+	&.active {
+		background-color: #deffe4;
+	}
 }
 
 .icon-out {
-  fill: @iconOutColor;
+	fill: @iconOutColor;
 }
 
 .icon-in {
-  fill: @iconInColor;
+	fill: @iconInColor;
 }
 
 .icon-middle {
-  fill: @iconMiddleColor;
+	fill: @iconMiddleColor;
 }
 
-.gray{
-  .icon-out {
-    fill: #666;
-  }
+.gray {
+	.icon-out {
+		fill: #666;
+	}
 
-  .icon-in {
-    fill: #aaa;
-  }
+	.icon-in {
+		fill: #aaa;
+	}
 
-  .icon-middle {
-    fill: #777;
-  }
+	.icon-middle {
+		fill: #777;
+	}
 }
 
-.active{
-  .icon-out {
-    fill: @activeIconOut;
-  }
+.active {
+	.icon-out {
+		fill: @activeIconOut;
+	}
 
-  .icon-in {
-    fill: @activeIconIn;
-  }
+	.icon-in {
+		fill: @activeIconIn;
+	}
 
-  .icon-middle {
-    fill: @activeIconMiddle;
-  }
+	.icon-middle {
+		fill: @activeIconMiddle;
+	}
 }
 
 .icon-disable {
-  cursor: not-allowed;
+	cursor: not-allowed;
 }
 
 .props-row {
-  margin-bottom: 0 !important;
+	margin-bottom: 0 !important;
 
-  .el-form-item__content,
-  .el-form-item__label {
-    color: #aaa;
-  }
+	.el-form-item__content,
+	.el-form-item__label {
+		color: #aaa;
+	}
 }
 
 .foreignObject {
-  > span {
-    /*解决span标签显示不完整的问题*/
-    position: relative;
-    bottom: 2px;
-  }
+	> span {
+		/*解决span标签显示不完整的问题*/
+		position: relative;
+		bottom: 2px;
+	}
 }
 
 .tree-v {
-  --el-color-primary-light-9: @listActiveColor;
-  &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
-    color: #fff;
-  }
-}
+	--el-color-primary-light-9: @listActiveColor;
+	&.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+		color: #fff;
+	}
+}

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/assets/variables.less

@@ -1,8 +1,8 @@
 //颜色
 @listActiveColor: #6ab4ff;
-@iconOutColor:#5fadff;
-@iconInColor:#9EEFD9;
-@iconMiddleColor:#33DEB4;
-@activeIconOut:#008fff;
-@activeIconIn:#44fac9;
-@activeIconMiddle:#00ffc0;
+@iconOutColor: #5fadff;
+@iconInColor: #9eefd9;
+@iconMiddleColor: #33deb4;
+@activeIconOut: #008fff;
+@activeIconIn: #44fac9;
+@activeIconMiddle: #00ffc0;

package/src/components/svg-editor/center-panel.vue

@@ -38,7 +38,6 @@
 	import type { IVisibleInfo } from '../config'
 	import { useContextMenuStore, useEditPrivateStore } from '@/stores/system'
 	import { EContextMenuInfoType } from '@/stores/system/types'
-	import ImportJson from '@/components/svg-editor/import-json.vue'
 
 	const globalStore = useGlobalStore(pinia)
 	const configStore = useConfigStore(pinia)
@@ -46,7 +45,9 @@
 	const editPrivateStore = useEditPrivateStore(pinia)
 	const contextMenuStore = useContextMenuStore(pinia)
 
-	componentsRegister()
+	const props = defineProps<{ vueComp?: Record<string, any> }>()
+
+	componentsRegister(props.vueComp)
 	const contextMenuRef = ref<HTMLElement>()
 	const canvasRef = ref<HTMLElement>()
 	const ct: Record<string, any> = {

package/src/components/svg-editor/index.vue

@@ -36,11 +36,13 @@
 
 	setEditorLoadTime()
 
-	//todo 优化自带组件使用体验
 	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
-	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
-		saveFile: false
-	})
+	const props = withDefaults(
+		defineProps<{ customToolbar?: IConfig; vueComp?: Record<string, any>; data?: string; saveFile?: boolean }>(),
+		{
+			saveFile: false
+		}
+	)
 	const globalStore = useGlobalStore(pinia)
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const configStore = useConfigStore(pinia)
@@ -152,7 +154,7 @@
 				<el-main class="middle main">
 					<div class="canvas-main-pc">
 						<Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler" @onLineMouseUp="onLineMouseUp">
-							<center-panel ref="centerRef" />
+							<center-panel ref="centerRef" :vueComp="props.vueComp" />
 						</Vue3RulerTool>
 					</div>
 				</el-main>

package/src/components/svg-viewer.vue

@@ -26,11 +26,14 @@
 	setEditorLoadTime()
 
 	const emit = defineEmits(['onMessage'])
-	const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
-		canvasDrag: true
-	})
+	const props = withDefaults(
+		defineProps<{ vueComp?: Record<string, any>; data?: IDataModel; canvasDrag?: boolean }>(),
+		{
+			canvasDrag: true
+		}
+	)
 	const globalStore = useGlobalStore(pinia)
-	componentsRegister()
+	componentsRegister(props.vueComp)
 	const preview_data = reactive(
 		props.data ?? {
 			layout_center: {

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