@zhangqingcq/vgce 0.0.23 → 0.0.25

package/package.json

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

package/src/assets/icons/add.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686279304877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12132" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384-384-172.8-384-384 172.8-384 384-384m0-64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z" p-id="12133"></path><path d="M320 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12134"></path><path d="M704 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12135"></path><path d="M512 320m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12136"></path><path d="M512 704m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12137"></path><path d="M320 480h384v64H320z" p-id="12138"></path><path d="M480 320h64v384h-64z" p-id="12139"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686279304877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12132" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path class="icon-out" d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384-384-172.8-384-384 172.8-384 384-384m0-64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z" p-id="12133"></path><path class="icon-in" d="M320 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12134"></path><path class="icon-in" d="M704 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12135"></path><path class="icon-in" d="M512 320m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12136"></path><path class="icon-in" d="M512 704m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12137"></path><path class="icon-in" d="M320 480h384v64H320z" p-id="12138"></path><path class="icon-in" d="M480 320h64v384h-64z" p-id="12139"></path></svg>

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

@@ -1089,20 +1089,20 @@
 				/>
 			</g>
 		</svg>
-		<!-- 右键菜单 -->
-		<ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">
-			<li
-				v-for="(item, key) in contextMenuStore.info"
-				:key="item.title"
-				@click="contextMenuStore.onContextMenuClick(key)"
-			>
-				<p :class="item.enable ? '' : 'disabled'">
-					{{ item.title }}
-					<span class="shortcut">{{ item.hot_key }}</span>
-				</p>
-			</li>
-		</ul>
 	</div>
+	<!-- 右键菜单 -->
+	<ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">
+		<li
+			v-for="(item, key) in contextMenuStore.info"
+			:key="item.title"
+			@click="contextMenuStore.onContextMenuClick(key)"
+		>
+			<p :class="item.enable ? '' : 'disabled'">
+				{{ item.title }}
+				<span class="shortcut">{{ item.hot_key }}</span>
+			</p>
+		</li>
+	</ul>
 </template>
 
 <style lang="less" scoped>

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

@@ -85,9 +85,24 @@
 
 	const { appContext } = getCurrentInstance()!
 
+	function onReturnClick(d: IDataModel) {
+		emits('onReturn', {
+			data: d,
+			isChange: editPrivateStore.getTopBtnUndoStatus
+		})
+	}
+
 	function save(d: IDataModel) {
 		if (props.saveFile) {
-			ElMessageBox.prompt('请输入文件名', '保存', { cancelButtonText: '取消', confirmButtonText: '保存' }, appContext)
+			ElMessageBox.prompt(
+				'请输入文件名',
+				'保存',
+				{
+					cancelButtonText: '取消',
+					confirmButtonText: '保存'
+				},
+				appContext
+			)
 				.then((r: any) => {
 					fileWrite(d, r.value.trim())
 					emits('onSave', d)
@@ -110,7 +125,7 @@
 			<el-header class="top-el-header">
 				<top-panel
 					@change-visible="changeVisible"
-					@on-return="emits('onReturn')"
+					@on-return="onReturnClick"
 					@on-preview="(val: IDataModel) => emits('onPreview', val)"
 					@on-save="save"
 				></top-panel>

package/src/components/svg-editor/right-panel/list.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-	import type { IAttrItem } from '@/config/types'
-	import { ElIcon, ElInput } from 'element-plus'
-	import SvgAnalysis from '@/components/svg-analysis/index.vue'
-
-	const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
-		modelValue: () => [
-			{
-				key: '',
-				val: ''
-			}
-		]
-	})
-	const emit = defineEmits(['update:modelValue'])
-
-	const value = computed({
-		get() {
-			return props.modelValue
-		},
-		set(val) {
-			emit('update:modelValue', val)
-		}
-	})
-
-	const addL = () => {
-		value.value.push({
-			key: '',
-			val: ''
-		})
-	}
-
-	const deleteL = (i: number) => {
-		value.value.splice(i, 1)
-	}
-</script>
-
-<template>
-	<div class="wall-l">
-		<div class="head-l">
-			<span>key</span>
-			<span>value</span>
-
-			<el-icon :size="16" class="bt-Icon" @click="addL">
-				<svg-analysis name="add" />
-			</el-icon>
-		</div>
-		<div class="row-l" v-for="(item, i) of value">
-			<el-input class="content-l" v-model="item.key" size="small" placeholder="key" />
-			<el-input class="content-l" v-model="item.val" size="small" placeholder="value" />
-
-			<el-icon :size="16" class="bt-Icon" @click="deleteL(i)">
-				<svg-analysis name="delete" />
-			</el-icon>
-		</div>
-	</div>
-</template>
-
-<style lang="less" scoped>
-	.wall-l {
-		background-color: #f3f6f9;
-		padding: 4px 5px 2px 5px;
-		border-radius: 4px;
-		.head-l {
-			display: flex;
-			align-items: center;
-
-			span {
-				display: inline-block;
-				width: 42%;
-				margin-right: 10px;
-				color: #666;
-			}
-		}
-
-		.row-l {
-			display: flex;
-			align-items: center;
-			padding-bottom: 6px;
-			.content-l {
-				width: 42%;
-				margin-right: 10px;
-			}
-		}
-	}
-</style>
+<script setup lang="ts">
+	import type { IAttrItem } from '@/config/types'
+	import { ElIcon, ElInput } from 'element-plus'
+	import SvgAnalysis from '@/components/svg-analysis/index.vue'
+
+	const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
+		modelValue: () => [
+			{
+				key: '',
+				val: ''
+			}
+		]
+	})
+	const emit = defineEmits(['update:modelValue'])
+
+	const value = computed({
+		get() {
+			return props.modelValue
+		},
+		set(val) {
+			emit('update:modelValue', val)
+		}
+	})
+
+	const addL = () => {
+		value.value.push({
+			key: '',
+			val: ''
+		})
+	}
+
+	const deleteL = (i: number) => {
+		value.value.splice(i, 1)
+	}
+</script>
+
+<template>
+	<div class="wall-l">
+		<div class="head-l">
+			<span>key</span>
+			<span>value</span>
+
+			<el-icon :size="16" class="bt-Icon" @click="addL">
+				<svg-analysis name="add" />
+			</el-icon>
+		</div>
+		<div class="row-l" v-for="(item, i) of value">
+			<el-input class="content-l" v-model="item.key" size="small" placeholder="key" />
+			<el-input class="content-l" v-model="item.val" size="small" placeholder="value" />
+
+			<el-icon :size="16" class="bt-Icon" @click="deleteL(i)">
+				<svg-analysis name="delete" />
+			</el-icon>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.wall-l {
+		background-color: #f5f8fb;
+		padding: 4px 5px 2px 5px;
+		border-radius: 4px;
+		.head-l {
+			display: flex;
+			align-items: center;
+
+			span {
+				display: inline-block;
+				width: 42%;
+				margin-right: 10px;
+				color: #666;
+			}
+		}
+
+		.row-l {
+			display: flex;
+			align-items: center;
+			padding-bottom: 6px;
+			.content-l {
+				width: 42%;
+				margin-right: 10px;
+			}
+		}
+	}
+</style>

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

@@ -9,8 +9,6 @@
 	import { EVisibleConfKey } from '../types'
 	import type { IDataModel } from '../types'
 	import { EGlobalStoreIntention } from '@/stores/global/types'
-	import { VAceEditor } from 'vue3-ace-editor'
-	import LeftPanel from '@/components/svg-editor/left-panel/index.vue'
 
 	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
 	const globalStore = useGlobalStore(pinia)
@@ -21,21 +19,14 @@
 		globalStore.done_json.length <= 0 || globalStore.setDoneJson([])
 		globalStore.intention = EGlobalStoreIntention.None
 	}
-	const onPreviewClick = () => {
-		const data_model: IDataModel = {
-			layout_center: svgEditLayoutStore.center_offset,
-			config: configStore.$state,
-			done_json: globalStore.done_json
-		}
-		emits('onPreview', data_model)
-	}
-	const onSaveClick = () => {
+
+	const dataBtnClick = (d: 'onReturn' | 'onPreview' | 'onSave') => {
 		const data_model: IDataModel = {
 			layout_center: svgEditLayoutStore.center_offset,
 			config: configStore.$state,
 			done_json: globalStore.done_json
 		}
-		emits('onSave', data_model)
+		emits(d, data_model)
 	}
 
 	const open = ref(false)
@@ -137,15 +128,15 @@
         </el-icon> -->
 			</div>
 			<div class="flex items-center mr-20px">
-				<el-icon title="返回" class="bt-Icon" :size="24" @click="emits('onReturn')">
+				<el-icon title="返回" class="bt-Icon" :size="24" @click="dataBtnClick('onReturn')">
 					<svg-analysis name="return" />
 				</el-icon>
 				<el-divider direction="vertical"></el-divider>
-				<el-icon title="保存" class="bt-Icon" :size="24" @click="onSaveClick">
+				<el-icon title="保存" class="bt-Icon" :size="24" @click="dataBtnClick('onSave')">
 					<svg-analysis name="save" />
 				</el-icon>
 				<el-divider direction="vertical"></el-divider>
-				<el-icon title="预览" class="bt-Icon" :size="22" @click="onPreviewClick">
+				<el-icon title="预览" class="bt-Icon" :size="22" @click="dataBtnClick('onPreview')">
 					<svg-analysis name="preview" />
 				</el-icon>
 			</div>
@@ -166,24 +157,24 @@
 		<el-scrollbar max-height="60vh">
 			<div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
 			<div>鼠标按住左键可以框选，也可以按住ctrl+鼠标左键点图形进行多选</div>
-			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">拖动画布</div>
 			<div>右键画布然后拖动即可，右侧面板‘图纸’栏可微调或重置位置</div>
-			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">画布缩放</div>
 			<div>使用鼠标滚轮或者右侧面板‘图纸’栏可控制画布缩放</div>
-			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">标尺辅助线</div>
 			<div>在标尺区域按住鼠标左键并拖动即可创建标尺辅助线，将标尺辅助线拖动到标尺区域即可删除标尺辅助线</div>
-			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">连线样式</div>
 			<div
-				>在右侧‘连线’栏可以统一配置连线样式，配置后先增加的线会应用新样式，之前的线样式不变，如需改变，可选中线手动更改或删除重画</div
-			>
-			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
+				>在右侧‘连线’栏可以统一配置连线样式，配置后先增加的线会应用新样式，之前的线样式不变，如需改变，可选中线手动更改或删除重画
+			</div>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">横线和竖线</div>
 			<div>画线的时候按住ctrl即可画竖线，按住shift即可画横线</div>
-			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
+			<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
 			<div class="font-bold mb-10px text-15px guide-title">线段选中</div>
 			<div style="padding-bottom: 14px">
 				若线段绑定了锚点，移动线段，绑定的锚点不会移动。若是想将线段整体移动，需要先选中线段，在右侧‘数据’栏里解除绑定
@@ -214,6 +205,7 @@
 			margin-right: 0;
 			padding-right: 16px;
 		}
+
 		.el-dialog__body {
 			padding-top: 0;
 			padding-bottom: 8px;

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

@@ -62,7 +62,6 @@
 			return
 		}
 		if (!props.canvasDrag) {
-			console.log(props.canvasDrag)
 			return
 		}
 		const { clientX, clientY } = e
@@ -139,6 +138,19 @@
 	const setNodeAttrByID = (id: string, attr: string, val: any) => {
 		return setArrItemByID(id, attr, val, preview_data.done_json)
 	}
+
+	const getStyle = (root: IDoneJson) => {
+		let t = false
+		if (root.events?.length > 0) {
+			for (let e of root.events) {
+				if (e.type === EEventType.Click) {
+					t = true
+					break
+				}
+			}
+		}
+		return { cursor: t ? 'pointer' : 'default' }
+	}
 	const eventHandle = (root: IDoneJson) => {
 		if (root.events?.length > 0) {
 			for (let e of root.events) {
@@ -263,6 +275,7 @@
 					:key="item.id"
 					:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
 					v-show="item.display"
+					:style="getStyle(item)"
 					@click="eventHandle(item)"
 				>
 					<g :class="`${getCommonClass(item)}`">

package/src/router.ts

@@ -12,11 +12,6 @@ const router = createRouter({
 			path: '/EditorS',
 			name: 'EditorS',
 			component: EditorS
-		},
-		{
-			path: '/Preview',
-			name: 'Preview',
-			component: () => import('@/views/Preview.vue')
 		}
 	]
 })

package/src/views/EditorS.vue

@@ -2,16 +2,20 @@
 	import SvgEditor from '@/components/svg-editor/index.vue'
 	import { useStore } from '@/stores/main'
 	import type { IDataModel } from '@/components/svg-editor/types'
+	import Preview from './Preview.vue'
 
-	const router = useRouter()
 	const store = useStore()
 
-	function preview(d: IDataModel) {
+	const previewShow = ref(false)
+	function previewHandle(d: IDataModel) {
 		store.data = d
-		router.push('/Preview')
+		nextTick(function () {
+			previewShow.value = true
+		})
 	}
 </script>
 
 <template>
-	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="preview" saveFile />
+	<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
+	<Preview v-if="previewShow" @back="previewShow = false" />
 </template>

package/src/views/Preview.vue

@@ -1,12 +1,38 @@
-<script setup lang="ts">
-	import SvgViewer from '@/components/svg-viewer/index.vue'
-	import { useStore } from '@/stores/main'
-
-	const store = useStore()
-</script>
-
-<template>
-	<svg-viewer :data="store.data" />
-</template>
-
-<style lang="less" scoped></style>
+<script setup lang="ts">
+	import SvgViewer from '@/components/svg-viewer/index.vue'
+	import { ElButton } from 'element-plus'
+	import { ArrowLeftBold } from '@element-plus/icons-vue'
+	import { useStore } from '@/stores/main'
+
+	const emit = defineEmits(['back'])
+	const store = useStore()
+
+	function back() {
+		emit('back')
+	}
+</script>
+
+<template>
+	<div class="previewPage">
+		<svg-viewer :data="store.data" />
+		<el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.previewPage {
+		position: fixed;
+		z-index: 1000;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+
+		.backBtn {
+			position: absolute;
+			top: 20px;
+			right: 30px;
+			z-index: 100;
+		}
+	}
+</style>