@zhangqingcq/vgce 0.0.32 → 0.1.0

package/package.json

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

package/src/assets/svgs/clock-a.svg

@@ -1,23 +1,23 @@
 <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-    <path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF"/>
+    <path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#B3A7FF"/>
     <path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF"/>
-    <path d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
-          fill="#2D416C">
-        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-45 512 512"
-                          to="315 512 512" dur="43200s" repeatCount="indefinite"/>
-    </path>
     <path d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
-          fill="#365087">
+          fill="#50E68E">
         <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45 512 512"
                           to="405 512 512" dur="3600s" repeatCount="indefinite"/>
     </path>
-    <path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087"/>
+    <path d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
+          fill="#9A36E7">
+        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-45 512 512"
+                          to="315 512 512" dur="43200s" repeatCount="indefinite"/>
+    </path>
+    <path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#F45AFC"/>
     <path d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
-          fill="#2D416C"/>
+          fill="#4942CF"/>
     <path d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
-          fill="#C11B16">
+          fill="#E83E24">
         <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="135 512 512"
                           to="495 512 512" dur="60s" repeatCount="indefinite"/>
     </path>
-    <path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#FFFFFF"/>
+    <path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#EBF257"/>
 </svg>

package/src/components/ace-edit.ts

@@ -1,27 +1,26 @@
 import ace from 'ace-builds'
-
-import themeUrl from 'ace-builds/src-noconflict/theme-github?url'
-ace.config.setModuleUrl('ace/theme/github', themeUrl)
+// import themeUrl from 'ace-builds/src-noconflict/theme-github?url'
+// ace.config.setModuleUrl('ace/theme/github', themeUrl)
 
 import themeUrl2 from 'ace-builds/src-noconflict/theme-kr_theme?url'
 ace.config.setModuleUrl('ace/theme/kr_theme', themeUrl2)
 
-import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'
-ace.config.setModuleUrl('ace/mode/base', workerBaseUrl)
+// import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'
+// ace.config.setModuleUrl('ace/mode/base', workerBaseUrl)
 
 import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url'
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'
 ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
-import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
-ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
-
-import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'
-ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
-import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'
-ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
-import snippetsJavascriptUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
-ace.config.setModuleUrl('ace/snippets/javascript', snippetsJavascriptUrl)
+// import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
+// ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
+//
+// import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'
+// ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
+// import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'
+// ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
+// import snippetsJavascriptUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
+// ace.config.setModuleUrl('ace/snippets/javascript', snippetsJavascriptUrl)
 
-import 'ace-builds/src-noconflict/ext-language_tools'
-ace.require('ace/ext/language_tools')
+// import 'ace-builds/src-noconflict/ext-language_tools'
+// ace.require('ace/ext/language_tools')

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

@@ -32,6 +32,9 @@
 	import { useConfigStore } from '@/stores/config'
 	import { fileRead, fileWrite } from '@/utils/file-read-write'
 	import { useEditPrivateStore } from '@/stores/system'
+	import { setEditorLoadTime } from '@/utils'
+
+	setEditorLoadTime()
 
 	//todo 优化自带组件使用体验
 	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
@@ -42,7 +45,6 @@
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const configStore = useConfigStore(pinia)
 	const editPrivateStore = useEditPrivateStore(pinia)
-
 	const centerRef = ref()
 	const importJsonRef = ref<InstanceType<typeof ImportJson>>()
 	const visible_conf: IVisibleConf = reactive({

package/src/components/svg-viewer.vue

@@ -9,6 +9,7 @@
 		preventDefault,
 		prosToVBind,
 		setArrItemByID,
+		setEditorLoadTime,
 		stopEvent,
 		valFormat
 	} from '@/utils'
@@ -22,6 +23,8 @@
 
 	import { sub, close } from '@/utils/mqtt-net'
 
+	setEditorLoadTime()
+
 	const emit = defineEmits(['onMessage'])
 	const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
 		canvasDrag: true

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

@@ -1,51 +1,74 @@
 <script lang="ts" setup>
-	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
-	const nowTime = ref(new Date())
-	const s = nowTime.value.getSeconds()
-	const m = nowTime.value.getMinutes()
-	const h = Math.floor((nowTime.value.getHours() + (m + s / 60) / 60) * 30)
+	const props = withDefaults(
+		defineProps<{
+			id: string
+			centerColor: string
+			secondsColor: string
+			circleColor: string
+			minutesColor: string
+			hoursColor: string
+			scaleColor: string
+			backgroundColor: string
+			borderColor: string
+		}>(),
+		{
+			id: '',
+			centerColor: '#EBF257',
+			secondsColor: '#E83E24',
+			circleColor: '#F45AFC',
+			minutesColor: '#50E68E',
+			hoursColor: '#9A36E7',
+			scaleColor: '#4942CF',
+			backgroundColor: '#ffffff',
+			borderColor: '#B3A7FF'
+		}
+	)
+	const nowTime = new Date(Number(window.sessionStorage.getItem('editorLoadTime') || '0'))
+	const s = nowTime.getSeconds() + 1
+	const m = nowTime.getMinutes()
+	const h = Math.floor((nowTime.getHours() + (m + s / 60) / 60) * 30)
 </script>
 <template>
 	<g :id="props.id">
 		<symbol :id="`${props.id}clock-a-n`" viewBox="0 0 1024 1024">
-			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF" />
-			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF" />
+			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" :fill="props.borderColor" />
+			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" :fill="props.backgroundColor" />
 			<path
-				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
-				fill="#2D416C"
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
+				:fill="props.minutesColor"
 			>
 				<animateTransform
 					attributeName="transform"
 					attributeType="XML"
 					type="rotate"
-					:from="`${-45 + h} 512.3 506.3`"
-					:to="`${315 + h} 512.3 506.3`"
-					dur="43200s"
+					:from="`${45 + m * 6} 512.3 506.3`"
+					:to="`${405 + m * 6} 512.3 506.3`"
+					dur="3600s"
 					repeatCount="indefinite"
 				/>
 			</path>
 			<path
-				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
-				fill="#365087"
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
+				:fill="props.hoursColor"
 			>
 				<animateTransform
 					attributeName="transform"
 					attributeType="XML"
 					type="rotate"
-					:from="`${45 + m * 6} 512.3 506.3`"
-					:to="`${405 + m * 6} 512.3 506.3`"
-					dur="3600s"
+					:from="`${-45 + h} 512.3 506.3`"
+					:to="`${315 + h} 512.3 506.3`"
+					dur="43200s"
 					repeatCount="indefinite"
 				/>
 			</path>
-			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087" />
+			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" :fill="props.circleColor" />
 			<path
 				d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
-				fill="#2D416C"
+				:fill="props.scaleColor"
 			/>
 			<path
 				d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
-				fill="#C11B16"
+				:fill="props.secondsColor"
 			>
 				<animateTransform
 					attributeName="transform"
@@ -57,7 +80,7 @@
 					repeatCount="indefinite"
 				/>
 			</path>
-			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#fff" />
+			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" :fill="props.centerColor" />
 		</symbol>
 		<use :xlink:href="`#${props.id}clock-a-n`" width="100" height="100" />
 	</g>

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

@@ -1,4 +1,4 @@
-import { EDoneJsonType } from '@/config/types'
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
 export const clock_a: IConfigItem = {
@@ -12,7 +12,48 @@ export const clock_a: IConfigItem = {
 		actual_rect: true
 	},
 	display: true,
-	props: {},
+	props: {
+		centerColor: {
+			title: '针顶颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#EBF257'
+		},
+		secondsColor: {
+			title: '秒针颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#E83E24'
+		},
+		circleColor: {
+			title: '针圈颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#F45AFC'
+		},
+		minutesColor: {
+			title: '分针颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#50E68E'
+		},
+		hoursColor: {
+			title: '时针颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#9A36E7'
+		},
+		scaleColor: {
+			title: '刻度颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#4942CF'
+		},
+		backgroundColor: {
+			title: '表盘颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#ffffff'
+		},
+		borderColor: {
+			title: '裱框颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#B3A7FF'
+		}
+	},
 	common_animations: {
 		val: '',
 		delay: 'delay-0s',

package/src/utils/index.ts

@@ -28,6 +28,11 @@ export function componentsRegister() {
 	}
 }
 
+export function setEditorLoadTime() {
+	//记录编辑器加载到浏览器的时间，有些组件需要用这个时间
+	window.sessionStorage.setItem('editorLoadTime', new Date().getTime().toString())
+}
+
 /**
  * 生成随机字符串
  * @param len 生成个数