@zhangqingcq/vgce 0.0.32 → 0.0.33

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/vgce.js +115 -61
  3. package/dist/vgce.umd.cjs +13 -13
  4. package/package.json +1 -1
  5. package/src/assets/svgs/clock-a.svg +11 -11
  6. package/src/components/svg-editor/index.vue +3 -1
  7. package/src/components/svg-viewer.vue +3 -0
  8. package/src/config/files/clock-a.vue +44 -21
  9. package/src/config/svg/custom/clock-a.ts +43 -2
  10. package/src/utils/index.ts +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangqingcq/vgce",
3
- "version": "0.0.32",
3
+ "version": "0.0.33",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/assets/svgs/clock-a.svg CHANGED
@@ -1,23 +1,23 @@
1
1
  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
2
- <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"/>
2
+ <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"/>
3
3
  <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"/>
4
- <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"
5
- fill="#2D416C">
6
- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-45 512 512"
7
- to="315 512 512" dur="43200s" repeatCount="indefinite"/>
8
- </path>
9
4
  <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"
10
- fill="#365087">
5
+ fill="#50E68E">
11
6
  <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45 512 512"
12
7
  to="405 512 512" dur="3600s" repeatCount="indefinite"/>
13
8
  </path>
14
- <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"/>
9
+ <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"
10
+ fill="#9A36E7">
11
+ <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-45 512 512"
12
+ to="315 512 512" dur="43200s" repeatCount="indefinite"/>
13
+ </path>
14
+ <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"/>
15
15
  <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"
16
- fill="#2D416C"/>
16
+ fill="#4942CF"/>
17
17
  <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"
18
- fill="#C11B16">
18
+ fill="#E83E24">
19
19
  <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="135 512 512"
20
20
  to="495 512 512" dur="60s" repeatCount="indefinite"/>
21
21
  </path>
22
- <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"/>
22
+ <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"/>
23
23
  </svg>
package/src/components/svg-editor/index.vue CHANGED
@@ -32,6 +32,9 @@
32
32
  import { useConfigStore } from '@/stores/config'
33
33
  import { fileRead, fileWrite } from '@/utils/file-read-write'
34
34
  import { useEditPrivateStore } from '@/stores/system'
35
+ import { setEditorLoadTime } from '@/utils'
36
+
37
+ setEditorLoadTime()
35
38
 
36
39
  //todo 优化自带组件使用体验
37
40
  const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
@@ -42,7 +45,6 @@
42
45
  const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
43
46
  const configStore = useConfigStore(pinia)
44
47
  const editPrivateStore = useEditPrivateStore(pinia)
45
-
46
48
  const centerRef = ref()
47
49
  const importJsonRef = ref<InstanceType<typeof ImportJson>>()
48
50
  const visible_conf: IVisibleConf = reactive({
package/src/components/svg-viewer.vue CHANGED
@@ -9,6 +9,7 @@
9
9
  preventDefault,
10
10
  prosToVBind,
11
11
  setArrItemByID,
12
+ setEditorLoadTime,
12
13
  stopEvent,
13
14
  valFormat
14
15
  } from '@/utils'
@@ -22,6 +23,8 @@
22
23
 
23
24
  import { sub, close } from '@/utils/mqtt-net'
24
25
 
26
+ setEditorLoadTime()
27
+
25
28
  const emit = defineEmits(['onMessage'])
26
29
  const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
27
30
  canvasDrag: true
package/src/config/files/clock-a.vue CHANGED
@@ -1,51 +1,74 @@
1
1
  <script lang="ts" setup>
2
- const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
3
- const nowTime = ref(new Date())
4
- const s = nowTime.value.getSeconds()
5
- const m = nowTime.value.getMinutes()
6
- const h = Math.floor((nowTime.value.getHours() + (m + s / 60) / 60) * 30)
2
+ const props = withDefaults(
3
+ defineProps<{
4
+ id: string
5
+ centerColor: string
6
+ secondsColor: string
7
+ circleColor: string
8
+ minutesColor: string
9
+ hoursColor: string
10
+ scaleColor: string
11
+ backgroundColor: string
12
+ borderColor: string
13
+ }>(),
14
+ {
15
+ id: '',
16
+ centerColor: '#EBF257',
17
+ secondsColor: '#E83E24',
18
+ circleColor: '#F45AFC',
19
+ minutesColor: '#50E68E',
20
+ hoursColor: '#9A36E7',
21
+ scaleColor: '#4942CF',
22
+ backgroundColor: '#ffffff',
23
+ borderColor: '#B3A7FF'
24
+ }
25
+ )
26
+ const nowTime = new Date(Number(window.sessionStorage.getItem('editorLoadTime') || '0'))
27
+ const s = nowTime.getSeconds() + 1
28
+ const m = nowTime.getMinutes()
29
+ const h = Math.floor((nowTime.getHours() + (m + s / 60) / 60) * 30)
7
30
  </script>
8
31
  <template>
9
32
  <g :id="props.id">
10
33
  <symbol :id="`${props.id}clock-a-n`" viewBox="0 0 1024 1024">
11
- <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" />
12
- <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" />
34
+ <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" />
35
+ <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" />
13
36
  <path
14
- 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"
15
- fill="#2D416C"
37
+ 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"
38
+ :fill="props.minutesColor"
16
39
  >
17
40
  <animateTransform
18
41
  attributeName="transform"
19
42
  attributeType="XML"
20
43
  type="rotate"
21
- :from="`${-45 + h} 512.3 506.3`"
22
- :to="`${315 + h} 512.3 506.3`"
23
- dur="43200s"
44
+ :from="`${45 + m * 6} 512.3 506.3`"
45
+ :to="`${405 + m * 6} 512.3 506.3`"
46
+ dur="3600s"
24
47
  repeatCount="indefinite"
25
48
  />
26
49
  </path>
27
50
  <path
28
- 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"
29
- fill="#365087"
51
+ 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"
52
+ :fill="props.hoursColor"
30
53
  >
31
54
  <animateTransform
32
55
  attributeName="transform"
33
56
  attributeType="XML"
34
57
  type="rotate"
35
- :from="`${45 + m * 6} 512.3 506.3`"
36
- :to="`${405 + m * 6} 512.3 506.3`"
37
- dur="3600s"
58
+ :from="`${-45 + h} 512.3 506.3`"
59
+ :to="`${315 + h} 512.3 506.3`"
60
+ dur="43200s"
38
61
  repeatCount="indefinite"
39
62
  />
40
63
  </path>
41
- <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" />
64
+ <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" />
42
65
  <path
43
66
  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"
44
- fill="#2D416C"
67
+ :fill="props.scaleColor"
45
68
  />
46
69
  <path
47
70
  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"
48
- fill="#C11B16"
71
+ :fill="props.secondsColor"
49
72
  >
50
73
  <animateTransform
51
74
  attributeName="transform"
@@ -57,7 +80,7 @@
57
80
  repeatCount="indefinite"
58
81
  />
59
82
  </path>
60
- <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" />
83
+ <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" />
61
84
  </symbol>
62
85
  <use :xlink:href="`#${props.id}clock-a-n`" width="100" height="100" />
63
86
  </g>
package/src/config/svg/custom/clock-a.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { EDoneJsonType } from '@/config/types'
1
+ import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
2
2
  import type { IConfigItem } from '@/config/types'
3
3
 
4
4
  export const clock_a: IConfigItem = {
@@ -12,7 +12,48 @@ export const clock_a: IConfigItem = {
12
12
  actual_rect: true
13
13
  },
14
14
  display: true,
15
- props: {},
15
+ props: {
16
+ centerColor: {
17
+ title: '针顶颜色',
18
+ type: EConfigItemPropsType.Color,
19
+ val: '#EBF257'
20
+ },
21
+ secondsColor: {
22
+ title: '秒针颜色',
23
+ type: EConfigItemPropsType.Color,
24
+ val: '#E83E24'
25
+ },
26
+ circleColor: {
27
+ title: '针圈颜色',
28
+ type: EConfigItemPropsType.Color,
29
+ val: '#F45AFC'
30
+ },
31
+ minutesColor: {
32
+ title: '分针颜色',
33
+ type: EConfigItemPropsType.Color,
34
+ val: '#50E68E'
35
+ },
36
+ hoursColor: {
37
+ title: '时针颜色',
38
+ type: EConfigItemPropsType.Color,
39
+ val: '#9A36E7'
40
+ },
41
+ scaleColor: {
42
+ title: '刻度颜色',
43
+ type: EConfigItemPropsType.Color,
44
+ val: '#4942CF'
45
+ },
46
+ backgroundColor: {
47
+ title: '表盘颜色',
48
+ type: EConfigItemPropsType.Color,
49
+ val: '#ffffff'
50
+ },
51
+ borderColor: {
52
+ title: '裱框颜色',
53
+ type: EConfigItemPropsType.Color,
54
+ val: '#B3A7FF'
55
+ }
56
+ },
16
57
  common_animations: {
17
58
  val: '',
18
59
  delay: 'delay-0s',
package/src/utils/index.ts CHANGED
@@ -28,6 +28,11 @@ export function componentsRegister() {
28
28
  }
29
29
  }
30
30
 
31
+ export function setEditorLoadTime() {
32
+ //记录编辑器加载到浏览器的时间，有些组件需要用这个时间
33
+ window.sessionStorage.setItem('editorLoadTime', new Date().getTime().toString())
34
+ }
35
+
31
36
  /**
32
37
  * 生成随机字符串
33
38
  * @param len 生成个数