@zhangqingcq/vgce 0.1.4 → 0.1.6

package/package.json

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

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

@@ -1005,9 +1005,9 @@
 							<use
 								v-else-if="item.type === EDoneJsonType.File"
 								:xlink:href="`#svg-${item.name}`"
-								v-bind="prosToVBind(item)"
-								width="100"
-								height="100"
+								v-bind="prosToVBind(item, ['height', 'width'])"
+								:width="item.props?.width?.val ?? 100"
+								:height="item.props?.height?.val ?? 100"
 								:id="item.id"
 								:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
 									item.actual_bound.y + item.actual_bound.height / 2
@@ -1019,9 +1019,9 @@
 							<component
 								v-else-if="item.type === EDoneJsonType.CustomSvg"
 								:is="item.tag"
-								v-bind="prosToVBind(item)"
-								width="100"
-								height="100"
+								v-bind="prosToVBind(item, ['height', 'width'])"
+								:width="item.props?.width?.val ?? 100"
+								:height="item.props?.height?.val ?? 100"
 								:id="item.id"
 								@resize="resizeBox"
 								:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${

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

@@ -1,5 +1,6 @@
 <!--左侧工具栏-->
 <script lang="ts" setup>
+	import { isEmpty } from 'lodash-es'
 	import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
 	import type { IConfig, IConfigItem } from '@/config/types'
 	import { pinia } from '@/hooks'
@@ -23,7 +24,16 @@
 		'echarts'
 	])
 	const createBegin = (svg_item: IConfigItem) => {
-		globalStore.setCreateInfo(svg_item)
+		globalStore.setCreateInfo(sortProps(svg_item))
+	}
+
+	const sortProps = (svg_item: IConfigItem): IConfigItem => {
+		if (svg_item?.props && !isEmpty(svg_item.props)) {
+			Object.keys(svg_item.props).forEach((k, i) => {
+				svg_item.props[k].sort = String(i)
+			})
+		}
+		return svg_item
 	}
 	const dragEndEvent = (e: DragEvent) => {
 		//拖动时记录拖动的svg信息

package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue

@@ -21,6 +21,38 @@
 		code: false
 	})
 
+	const _objInfo = computed(() => {
+		const keys: Record<string, any> = {}
+		let l = 0
+		let t = []
+		for (let k of Object.keys(props.objInfo)) {
+			const s = props.objInfo[k]?.sort
+			if (s) {
+				const _s = Number(s)
+				if (_s > l) {
+					l = _s
+				}
+			}
+			if (s) {
+				keys[s] = k
+			} else {
+				return Object.keys(props.objInfo).map((k) => ({
+					...props.objInfo[k],
+					_key: k
+				}))
+			}
+		}
+
+		for (let i = 0; i < l + 1; i++) {
+			const _i = String(i)
+			t.push({
+				...props.objInfo[keys[_i]],
+				_key: keys[_i]
+			})
+		}
+		return t
+	})
+
 	function propsChangeHandle(e: any) {
 		let t: any = window.setTimeout(function () {
 			emit('change', e)
@@ -31,19 +63,19 @@
 </script>
 
 <template>
-	<div v-for="(attr_item, key) in props.objInfo" :key="key">
+	<div v-for="attr_item in _objInfo" :key="attr_item._key">
 		<!--表单项上显示的灰色值-->
 		<el-form-item v-if="props.code" class="props-row" size="small">
 			<template #label>
 				<el-tooltip
-					:content="String(key)"
-					v-if="getStringWidth(String(key)) > 78"
+					:content="String(attr_item._key)"
+					v-if="getStringWidth(String(attr_item._key)) > 78"
 					placement="left"
 					popper-class="props-popper"
 				>
-					<div class="one-row-txt" style="width: 78px">{{ key }}</div>
+					<div class="one-row-txt" style="width: 78px">{{ attr_item._key }}</div>
 				</el-tooltip>
-				<span v-else>{{ key }}</span>
+				<span v-else>{{ attr_item._key }}</span>
 			</template>
 			<el-tooltip
 				:content="JSON.stringify(attr_item.val)"
@@ -56,10 +88,10 @@
 			<span v-else>{{ attr_item.val }}</span>
 		</el-form-item>
 		<!--props-->
-		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(key)) < 0">
+		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(attr_item._key)) < 0">
 			<el-select
 				v-if="attr_item.type === EConfigItemPropsType.Select"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				placeholder="Select"
 				size="small"
 				:disabled="Boolean(attr_item?.disabled)"
@@ -69,19 +101,19 @@
 			</el-select>
 			<el-input-number
 				v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Input"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Textarea"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				autosize
 				type="textarea"
 				:disabled="Boolean(attr_item?.disabled)"
@@ -89,19 +121,19 @@
 			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-switch
 				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<code-edit-modal
 				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@close="propsChangeHandle"
 			/>
@@ -119,8 +151,4 @@
 	.props-popper {
 		max-width: 350px;
 	}
-	sdf {
-		color: rgb(245, 247, 250);
-		background-color: rgb(92, 184, 122);
-	}
 </style>

package/src/components/svg-viewer.vue

@@ -318,9 +318,9 @@
 							<use
 								v-else-if="item.type === EDoneJsonType.File"
 								:xlink:href="`#svg-${item.name}`"
-								v-bind="prosToVBind(item)"
-								width="100"
-								height="100"
+								v-bind="prosToVBind(item, ['height', 'width'])"
+								:width="item.props?.width?.val ?? 100"
+								:height="item.props?.height?.val ?? 100"
 								:id="item.id"
 								:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
 									item.actual_bound.y + item.actual_bound.height / 2
@@ -332,9 +332,9 @@
 							<component
 								v-else-if="item.type === EDoneJsonType.CustomSvg"
 								:is="item.tag"
-								v-bind="prosToVBind(item)"
-								width="100"
-								height="100"
+								v-bind="prosToVBind(item, ['height', 'width'])"
+								:width="item.props?.width?.val ?? 100"
+								:height="item.props?.height?.val ?? 100"
 								:id="item.id"
 								@on-change="eventHandle(item, EEventType.Change)"
 								:transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${

package/src/config/files/light-a.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-	const props = withDefaults(defineProps<{ id: string; isOpen: boolean }>(), {
+	const props = withDefaults(defineProps<{ id: string; isOpen: boolean; height?: number; width?: number }>(), {
 		id: '',
-		isOpen: false
+		isOpen: false,
+		height: 100,
+		width: 100
 	})
 
 	const emit = defineEmits(['onChange'])
@@ -65,6 +67,6 @@
 				fill="#CEEFF6"
 			/>
 		</symbol>
-		<use :xlink:href="`#${props.id}light-121`" width="100" height="100" />
+		<use :xlink:href="`#${props.id}light-121`" :width="width" :height="height" />
 	</g>
 </template>

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

@@ -1,4 +1,4 @@
-import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 export const thermometer: IConfigItem = {
 	name: 'thermometer',

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

@@ -49,7 +49,7 @@ export const clock_a: IConfigItem = {
 			val: '#ffffff'
 		},
 		borderColor: {
-			title: '裱框颜色',
+			title: '表框颜色',
 			type: EConfigItemPropsType.Color,
 			val: '#B3A7FF'
 		}

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

@@ -13,6 +13,16 @@ export const light_a: IConfigItem = {
 	},
 	display: true,
 	props: {
+		height: {
+			title: '高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 60
+		},
+		width: {
+			title: '宽度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 50
+		},
 		isOpen: {
 			title: '开关',
 			type: EConfigItemPropsType.Switch,

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

@@ -1,4 +1,4 @@
-import { EDoneJsonType } from '@/config/types'
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
 export const svg_bot_2: IConfigItem = {
@@ -11,7 +11,18 @@ export const svg_bot_2: IConfigItem = {
 		have_anchor: true,
 		actual_rect: true
 	},
-	props: {},
+	props: {
+		height: {
+			title: '高度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 150
+		},
+		width: {
+			title: '宽度',
+			type: EConfigItemPropsType.InputNumber,
+			val: 120
+		}
+	},
 	common_animations: {
 		val: '',
 		delay: 'delay-0s',

package/src/config/types.ts

@@ -36,6 +36,7 @@ export interface IConfigItemProps {
 		val: any
 		options?: any
 		disabled?: boolean
+		sort?: string
 	}
 }
 

package/src/utils/mqtt-net.ts

@@ -3,7 +3,7 @@ import type { MqttClient, PacketCallback } from 'mqtt'
 
 let client: MqttClient
 
-export const sub = (url: string, user: string, pwd: string, topics: string, callback: Function) => {
+export const sub = (url: string, user: string, pwd: string, topics: string, callback: any) => {
 	const _url = url.trim()
 	if (!/^wss?:\/\/.*$/.test(_url)) {
 		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')