@zhangqingcq/vgce 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangqingcq/vgce",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -3,112 +3,113 @@
3
3
  *,
4
4
  *::before,
5
5
  *::after {
6
- box-sizing: border-box;
7
- margin: 0;
8
- font-weight: normal;
6
+ box-sizing: border-box;
7
+ margin: 0;
8
+ font-weight: normal;
9
9
  }
10
10
 
11
11
  body {
12
- font-family: Inter,
13
- -apple-system,
14
- BlinkMacSystemFont,
15
- 'Segoe UI',
16
- Roboto,
17
- Oxygen,
18
- Ubuntu,
19
- Cantarell,
20
- 'Fira Sans',
21
- 'Droid Sans',
22
- 'Helvetica Neue',
23
- sans-serif;
24
- text-rendering: optimizeLegibility;
25
- -webkit-font-smoothing: antialiased;
26
- -moz-osx-font-smoothing: grayscale;
12
+ font-family:
13
+ Inter,
14
+ -apple-system,
15
+ BlinkMacSystemFont,
16
+ 'Segoe UI',
17
+ Roboto,
18
+ Oxygen,
19
+ Ubuntu,
20
+ Cantarell,
21
+ 'Fira Sans',
22
+ 'Droid Sans',
23
+ 'Helvetica Neue',
24
+ sans-serif;
25
+ text-rendering: optimizeLegibility;
26
+ -webkit-font-smoothing: antialiased;
27
+ -moz-osx-font-smoothing: grayscale;
27
28
  }
28
29
 
29
30
  .modal-full {
30
- .el-dialog__body {
31
- padding: 0 !important;
32
- }
31
+ .el-dialog__body {
32
+ padding: 0 !important;
33
+ }
33
34
  }
34
35
 
35
36
  .bt-Icon {
36
- cursor: pointer;
37
+ cursor: pointer;
37
38
 
38
- &:hover {
39
- opacity: .85;
40
- background-color: #e8f9ff;
41
- }
39
+ &:hover {
40
+ opacity: 0.85;
41
+ background-color: #e8f9ff;
42
+ }
42
43
 
43
- &.active{
44
- background-color: #deffe4;
45
- }
44
+ &.active {
45
+ background-color: #deffe4;
46
+ }
46
47
  }
47
48
 
48
49
  .icon-out {
49
- fill: @iconOutColor;
50
+ fill: @iconOutColor;
50
51
  }
51
52
 
52
53
  .icon-in {
53
- fill: @iconInColor;
54
+ fill: @iconInColor;
54
55
  }
55
56
 
56
57
  .icon-middle {
57
- fill: @iconMiddleColor;
58
+ fill: @iconMiddleColor;
58
59
  }
59
60
 
60
- .gray{
61
- .icon-out {
62
- fill: #666;
63
- }
61
+ .gray {
62
+ .icon-out {
63
+ fill: #666;
64
+ }
64
65
 
65
- .icon-in {
66
- fill: #aaa;
67
- }
66
+ .icon-in {
67
+ fill: #aaa;
68
+ }
68
69
 
69
- .icon-middle {
70
- fill: #777;
71
- }
70
+ .icon-middle {
71
+ fill: #777;
72
+ }
72
73
  }
73
74
 
74
- .active{
75
- .icon-out {
76
- fill: @activeIconOut;
77
- }
75
+ .active {
76
+ .icon-out {
77
+ fill: @activeIconOut;
78
+ }
78
79
 
79
- .icon-in {
80
- fill: @activeIconIn;
81
- }
80
+ .icon-in {
81
+ fill: @activeIconIn;
82
+ }
82
83
 
83
- .icon-middle {
84
- fill: @activeIconMiddle;
85
- }
84
+ .icon-middle {
85
+ fill: @activeIconMiddle;
86
+ }
86
87
  }
87
88
 
88
89
  .icon-disable {
89
- cursor: not-allowed;
90
+ cursor: not-allowed;
90
91
  }
91
92
 
92
93
  .props-row {
93
- margin-bottom: 0 !important;
94
+ margin-bottom: 0 !important;
94
95
 
95
- .el-form-item__content,
96
- .el-form-item__label {
97
- color: #aaa;
98
- }
96
+ .el-form-item__content,
97
+ .el-form-item__label {
98
+ color: #aaa;
99
+ }
99
100
  }
100
101
 
101
102
  .foreignObject {
102
- > span {
103
- /*解决span标签显示不完整的问题*/
104
- position: relative;
105
- bottom: 2px;
106
- }
103
+ > span {
104
+ /*解决span标签显示不完整的问题*/
105
+ position: relative;
106
+ bottom: 2px;
107
+ }
107
108
  }
108
109
 
109
110
  .tree-v {
110
- --el-color-primary-light-9: @listActiveColor;
111
- &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
112
- color: #fff;
113
- }
114
- }
111
+ --el-color-primary-light-9: @listActiveColor;
112
+ &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
113
+ color: #fff;
114
+ }
115
+ }
@@ -1,8 +1,8 @@
1
1
  //颜色
2
2
  @listActiveColor: #6ab4ff;
3
- @iconOutColor:#5fadff;
4
- @iconInColor:#9EEFD9;
5
- @iconMiddleColor:#33DEB4;
6
- @activeIconOut:#008fff;
7
- @activeIconIn:#44fac9;
8
- @activeIconMiddle:#00ffc0;
3
+ @iconOutColor: #5fadff;
4
+ @iconInColor: #9eefd9;
5
+ @iconMiddleColor: #33deb4;
6
+ @activeIconOut: #008fff;
7
+ @activeIconIn: #44fac9;
8
+ @activeIconMiddle: #00ffc0;
@@ -38,7 +38,6 @@
38
38
  import type { IVisibleInfo } from '../config'
39
39
  import { useContextMenuStore, useEditPrivateStore } from '@/stores/system'
40
40
  import { EContextMenuInfoType } from '@/stores/system/types'
41
- import ImportJson from '@/components/svg-editor/import-json.vue'
42
41
 
43
42
  const globalStore = useGlobalStore(pinia)
44
43
  const configStore = useConfigStore(pinia)
@@ -46,7 +45,9 @@
46
45
  const editPrivateStore = useEditPrivateStore(pinia)
47
46
  const contextMenuStore = useContextMenuStore(pinia)
48
47
 
49
- componentsRegister()
48
+ const props = defineProps<{ vueComp?: Record<string, any> }>()
49
+
50
+ componentsRegister(props.vueComp)
50
51
  const contextMenuRef = ref<HTMLElement>()
51
52
  const canvasRef = ref<HTMLElement>()
52
53
  const ct: Record<string, any> = {
@@ -36,11 +36,13 @@
36
36
 
37
37
  setEditorLoadTime()
38
38
 
39
- //todo 优化自带组件使用体验
40
39
  const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
41
- const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
42
- saveFile: false
43
- })
40
+ const props = withDefaults(
41
+ defineProps<{ customToolbar?: IConfig; vueComp?: Record<string, any>; data?: string; saveFile?: boolean }>(),
42
+ {
43
+ saveFile: false
44
+ }
45
+ )
44
46
  const globalStore = useGlobalStore(pinia)
45
47
  const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
46
48
  const configStore = useConfigStore(pinia)
@@ -152,7 +154,7 @@
152
154
  <el-main class="middle main">
153
155
  <div class="canvas-main-pc">
154
156
  <Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler" @onLineMouseUp="onLineMouseUp">
155
- <center-panel ref="centerRef" />
157
+ <center-panel ref="centerRef" :vueComp="props.vueComp" />
156
158
  </Vue3RulerTool>
157
159
  </div>
158
160
  </el-main>
@@ -26,11 +26,14 @@
26
26
  setEditorLoadTime()
27
27
 
28
28
  const emit = defineEmits(['onMessage'])
29
- const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
30
- canvasDrag: true
31
- })
29
+ const props = withDefaults(
30
+ defineProps<{ vueComp?: Record<string, any>; data?: IDataModel; canvasDrag?: boolean }>(),
31
+ {
32
+ canvasDrag: true
33
+ }
34
+ )
32
35
  const globalStore = useGlobalStore(pinia)
33
- componentsRegister()
36
+ componentsRegister(props.vueComp)
34
37
  const preview_data = reactive(
35
38
  props.data ?? {
36
39
  layout_center: {
@@ -18,10 +18,11 @@ export const preventDefault = (e: any) => {
18
18
  e.preventDefault()
19
19
  }
20
20
 
21
- export function componentsRegister() {
21
+ export function componentsRegister(data?: Record<string, any>) {
22
22
  //注册所有组件
23
23
  const instance = getCurrentInstance()
24
- for (let key in vueComp) {
24
+ const t = data ? Object.assign(vueComp, data) : vueComp
25
+ for (let key in t) {
25
26
  if (!instance?.appContext?.components.hasOwnProperty(key) && vueComp.hasOwnProperty(key)) {
26
27
  instance?.appContext?.app.component(key, vueComp[key])
27
28
  }