@zhangqingcq/vgce 0.1.7 → 0.1.8

package/package.json

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

package/src/assets/base.less

@@ -3,112 +3,113 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
+	box-sizing: border-box;
+	margin: 0;
+	font-weight: normal;
 }
 
 body {
-  font-family: Inter,
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  Oxygen,
-  Ubuntu,
-  Cantarell,
-  'Fira Sans',
-  'Droid Sans',
-  'Helvetica Neue',
-  sans-serif;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	font-family:
+		Inter,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		'Fira Sans',
+		'Droid Sans',
+		'Helvetica Neue',
+		sans-serif;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 .modal-full {
-  .el-dialog__body {
-    padding: 0 !important;
-  }
+	.el-dialog__body {
+		padding: 0 !important;
+	}
 }
 
 .bt-Icon {
-  cursor: pointer;
+	cursor: pointer;
 
-  &:hover {
-    opacity: .85;
-    background-color: #e8f9ff;
-  }
+	&:hover {
+		opacity: 0.85;
+		background-color: #e8f9ff;
+	}
 
-  &.active{
-    background-color: #deffe4;
-  }
+	&.active {
+		background-color: #deffe4;
+	}
 }
 
 .icon-out {
-  fill: @iconOutColor;
+	fill: @iconOutColor;
 }
 
 .icon-in {
-  fill: @iconInColor;
+	fill: @iconInColor;
 }
 
 .icon-middle {
-  fill: @iconMiddleColor;
+	fill: @iconMiddleColor;
 }
 
-.gray{
-  .icon-out {
-    fill: #666;
-  }
+.gray {
+	.icon-out {
+		fill: #666;
+	}
 
-  .icon-in {
-    fill: #aaa;
-  }
+	.icon-in {
+		fill: #aaa;
+	}
 
-  .icon-middle {
-    fill: #777;
-  }
+	.icon-middle {
+		fill: #777;
+	}
 }
 
-.active{
-  .icon-out {
-    fill: @activeIconOut;
-  }
+.active {
+	.icon-out {
+		fill: @activeIconOut;
+	}
 
-  .icon-in {
-    fill: @activeIconIn;
-  }
+	.icon-in {
+		fill: @activeIconIn;
+	}
 
-  .icon-middle {
-    fill: @activeIconMiddle;
-  }
+	.icon-middle {
+		fill: @activeIconMiddle;
+	}
 }
 
 .icon-disable {
-  cursor: not-allowed;
+	cursor: not-allowed;
 }
 
 .props-row {
-  margin-bottom: 0 !important;
+	margin-bottom: 0 !important;
 
-  .el-form-item__content,
-  .el-form-item__label {
-    color: #aaa;
-  }
+	.el-form-item__content,
+	.el-form-item__label {
+		color: #aaa;
+	}
 }
 
 .foreignObject {
-  > span {
-    /*解决span标签显示不完整的问题*/
-    position: relative;
-    bottom: 2px;
-  }
+	> span {
+		/*解决span标签显示不完整的问题*/
+		position: relative;
+		bottom: 2px;
+	}
 }
 
 .tree-v {
-  --el-color-primary-light-9: @listActiveColor;
-  &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
-    color: #fff;
-  }
-}
+	--el-color-primary-light-9: @listActiveColor;
+	&.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+		color: #fff;
+	}
+}

package/src/assets/variables.less

@@ -1,8 +1,8 @@
 //颜色
 @listActiveColor: #6ab4ff;
-@iconOutColor:#5fadff;
-@iconInColor:#9EEFD9;
-@iconMiddleColor:#33DEB4;
-@activeIconOut:#008fff;
-@activeIconIn:#44fac9;
-@activeIconMiddle:#00ffc0;
+@iconOutColor: #5fadff;
+@iconInColor: #9eefd9;
+@iconMiddleColor: #33deb4;
+@activeIconOut: #008fff;
+@activeIconIn: #44fac9;
+@activeIconMiddle: #00ffc0;

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

@@ -38,7 +38,6 @@
 	import type { IVisibleInfo } from '../config'
 	import { useContextMenuStore, useEditPrivateStore } from '@/stores/system'
 	import { EContextMenuInfoType } from '@/stores/system/types'
-	import ImportJson from '@/components/svg-editor/import-json.vue'
 
 	const globalStore = useGlobalStore(pinia)
 	const configStore = useConfigStore(pinia)
@@ -46,7 +45,9 @@
 	const editPrivateStore = useEditPrivateStore(pinia)
 	const contextMenuStore = useContextMenuStore(pinia)
 
-	componentsRegister()
+	const props = defineProps<{ vueComp?: Record<string, any> }>()
+
+	componentsRegister(props.vueComp)
 	const contextMenuRef = ref<HTMLElement>()
 	const canvasRef = ref<HTMLElement>()
 	const ct: Record<string, any> = {

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

@@ -36,11 +36,13 @@
 
 	setEditorLoadTime()
 
-	//todo 优化自带组件使用体验
 	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
-	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
-		saveFile: false
-	})
+	const props = withDefaults(
+		defineProps<{ customToolbar?: IConfig; vueComp?: Record<string, any>; data?: string; saveFile?: boolean }>(),
+		{
+			saveFile: false
+		}
+	)
 	const globalStore = useGlobalStore(pinia)
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const configStore = useConfigStore(pinia)
@@ -152,7 +154,7 @@
 				<el-main class="middle main">
 					<div class="canvas-main-pc">
 						<Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler" @onLineMouseUp="onLineMouseUp">
-							<center-panel ref="centerRef" />
+							<center-panel ref="centerRef" :vueComp="props.vueComp" />
 						</Vue3RulerTool>
 					</div>
 				</el-main>

package/src/components/svg-viewer.vue

@@ -26,11 +26,14 @@
 	setEditorLoadTime()
 
 	const emit = defineEmits(['onMessage'])
-	const props = withDefaults(defineProps<{ data?: IDataModel; canvasDrag?: boolean }>(), {
-		canvasDrag: true
-	})
+	const props = withDefaults(
+		defineProps<{ vueComp?: Record<string, any>; data?: IDataModel; canvasDrag?: boolean }>(),
+		{
+			canvasDrag: true
+		}
+	)
 	const globalStore = useGlobalStore(pinia)
-	componentsRegister()
+	componentsRegister(props.vueComp)
 	const preview_data = reactive(
 		props.data ?? {
 			layout_center: {

package/src/utils/index.ts

@@ -18,10 +18,11 @@ export const preventDefault = (e: any) => {
 	e.preventDefault()
 }
 
-export function componentsRegister() {
+export function componentsRegister(data?: Record<string, any>) {
 	//注册所有组件
 	const instance = getCurrentInstance()
-	for (let key in vueComp) {
+	const t = data ? Object.assign(vueComp, data) : vueComp
+	for (let key in t) {
 		if (!instance?.appContext?.components.hasOwnProperty(key) && vueComp.hasOwnProperty(key)) {
 			instance?.appContext?.app.component(key, vueComp[key])
 		}