@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/README.md +118 -90
- package/dist/style.css +1 -1
- package/dist/vgce.js +10897 -10890
- package/dist/vgce.umd.cjs +33 -33
- package/package.json +1 -1
- package/src/assets/base.less +69 -68
- package/src/assets/variables.less +6 -6
- package/src/components/svg-editor/center-panel.vue +3 -2
- package/src/components/svg-editor/index.vue +7 -5
- package/src/components/svg-viewer.vue +7 -4
- package/src/utils/index.ts +3 -2
package/package.json
CHANGED
package/src/assets/base.less
CHANGED
@@ -3,112 +3,113 @@
|
|
3
3
|
*,
|
4
4
|
*::before,
|
5
5
|
*::after {
|
6
|
-
|
7
|
-
|
8
|
-
|
6
|
+
box-sizing: border-box;
|
7
|
+
margin: 0;
|
8
|
+
font-weight: normal;
|
9
9
|
}
|
10
10
|
|
11
11
|
body {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
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
|
-
|
31
|
-
|
32
|
-
|
31
|
+
.el-dialog__body {
|
32
|
+
padding: 0 !important;
|
33
|
+
}
|
33
34
|
}
|
34
35
|
|
35
36
|
.bt-Icon {
|
36
|
-
|
37
|
+
cursor: pointer;
|
37
38
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
39
|
+
&:hover {
|
40
|
+
opacity: 0.85;
|
41
|
+
background-color: #e8f9ff;
|
42
|
+
}
|
42
43
|
|
43
|
-
|
44
|
-
|
45
|
-
|
44
|
+
&.active {
|
45
|
+
background-color: #deffe4;
|
46
|
+
}
|
46
47
|
}
|
47
48
|
|
48
49
|
.icon-out {
|
49
|
-
|
50
|
+
fill: @iconOutColor;
|
50
51
|
}
|
51
52
|
|
52
53
|
.icon-in {
|
53
|
-
|
54
|
+
fill: @iconInColor;
|
54
55
|
}
|
55
56
|
|
56
57
|
.icon-middle {
|
57
|
-
|
58
|
+
fill: @iconMiddleColor;
|
58
59
|
}
|
59
60
|
|
60
|
-
.gray{
|
61
|
-
|
62
|
-
|
63
|
-
|
61
|
+
.gray {
|
62
|
+
.icon-out {
|
63
|
+
fill: #666;
|
64
|
+
}
|
64
65
|
|
65
|
-
|
66
|
-
|
67
|
-
|
66
|
+
.icon-in {
|
67
|
+
fill: #aaa;
|
68
|
+
}
|
68
69
|
|
69
|
-
|
70
|
-
|
71
|
-
|
70
|
+
.icon-middle {
|
71
|
+
fill: #777;
|
72
|
+
}
|
72
73
|
}
|
73
74
|
|
74
|
-
.active{
|
75
|
-
|
76
|
-
|
77
|
-
|
75
|
+
.active {
|
76
|
+
.icon-out {
|
77
|
+
fill: @activeIconOut;
|
78
|
+
}
|
78
79
|
|
79
|
-
|
80
|
-
|
81
|
-
|
80
|
+
.icon-in {
|
81
|
+
fill: @activeIconIn;
|
82
|
+
}
|
82
83
|
|
83
|
-
|
84
|
-
|
85
|
-
|
84
|
+
.icon-middle {
|
85
|
+
fill: @activeIconMiddle;
|
86
|
+
}
|
86
87
|
}
|
87
88
|
|
88
89
|
.icon-disable {
|
89
|
-
|
90
|
+
cursor: not-allowed;
|
90
91
|
}
|
91
92
|
|
92
93
|
.props-row {
|
93
|
-
|
94
|
+
margin-bottom: 0 !important;
|
94
95
|
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
96
|
+
.el-form-item__content,
|
97
|
+
.el-form-item__label {
|
98
|
+
color: #aaa;
|
99
|
+
}
|
99
100
|
}
|
100
101
|
|
101
102
|
.foreignObject {
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
103
|
+
> span {
|
104
|
+
/*解决span标签显示不完整的问题*/
|
105
|
+
position: relative;
|
106
|
+
bottom: 2px;
|
107
|
+
}
|
107
108
|
}
|
108
109
|
|
109
110
|
.tree-v {
|
110
|
-
|
111
|
-
|
112
|
-
|
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
|
4
|
-
@iconInColor
|
5
|
-
@iconMiddleColor
|
6
|
-
@activeIconOut
|
7
|
-
@activeIconIn
|
8
|
-
@activeIconMiddle
|
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
|
-
|
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(
|
42
|
-
saveFile
|
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(
|
30
|
-
canvasDrag
|
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: {
|
package/src/utils/index.ts
CHANGED
@@ -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
|
-
|
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
|
}
|