@zhangqingcq/vgce 0.0.14 → 0.0.15

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

@@ -0,0 +1,342 @@
+<!-- 旋转缩放组件 -->
+<script lang="ts" setup>
+	import { pinia } from '@/hooks'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+	import { ref } from 'vue'
+	import { useGlobalStore } from '@/stores/global'
+	import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from '@/stores/global/types'
+	import type { IDoneJson } from '@/stores/global/types'
+	import { getCoordinateOffset } from '@/utils'
+
+	const props = defineProps<{ itemInfo: IDoneJson }>()
+	const globalStore = useGlobalStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+	const offset = ref(4)
+	const fill = ref('#4F80FF')
+	const angle_to_cursor = [
+		{
+			start: 338,
+			end: 23,
+			cursor: 'nw',
+			type: EScaleInfoType.TopLeft
+		},
+		{
+			start: 23,
+			end: 68,
+			cursor: 'n',
+			type: EScaleInfoType.TopCenter
+		},
+		{
+			start: 68,
+			end: 113,
+			cursor: 'ne',
+			type: EScaleInfoType.TopRight
+		},
+		{
+			start: 293,
+			end: 338,
+			cursor: 'w',
+			type: EScaleInfoType.Left
+		},
+		{
+			start: 113,
+			end: 158,
+			cursor: 'e',
+			type: EScaleInfoType.Right
+		},
+		{
+			start: 248,
+			end: 293,
+			cursor: 'sw',
+			type: EScaleInfoType.BottomLeft
+		},
+		{
+			start: 203,
+			end: 248,
+			cursor: 's',
+			type: EScaleInfoType.BottomCenter
+		},
+		{
+			start: 158,
+			end: 203,
+			cursor: 'se',
+			type: EScaleInfoType.BottomRight
+		}
+	]
+	const onHandleMouseDown = (type: EScaleInfoType, e: MouseEvent) => {
+		console.log('onHandleMouseDown', e)
+		const { clientX, clientY } = e
+		e.stopPropagation()
+		globalStore.intention = EGlobalStoreIntention.Zoom
+		globalStore.setMouseInfo({
+			state: EMouseInfoState.Down,
+			position_x: clientX - svgEditLayoutStore.center_offset.x,
+			position_y: clientY - svgEditLayoutStore.center_offset.y,
+			now_position_x: clientX - svgEditLayoutStore.center_offset.x,
+			now_position_y: clientY - svgEditLayoutStore.center_offset.y,
+			new_position_x: 0,
+			new_position_y: 0
+		})
+		globalStore.setScaleInfo({
+			type: type,
+			scale_times: {
+				x: props.itemInfo.scale_x,
+				y: props.itemInfo.scale_y
+			},
+			scale_item_info: {
+				x: props.itemInfo.x,
+				y: props.itemInfo.y
+			},
+			symmetric_point: {
+				x:
+					props.itemInfo.client.x +
+					Math.abs(clientX - svgEditLayoutStore.center_offset.x - props.itemInfo.client.x) *
+						(clientX - svgEditLayoutStore.center_offset.x < props.itemInfo.client.x ? 1 : -1),
+				y:
+					props.itemInfo.client.y +
+					Math.abs(clientY - svgEditLayoutStore.center_offset.y - props.itemInfo.client.y) *
+						(clientY - svgEditLayoutStore.center_offset.y < props.itemInfo.client.y ? 1 : -1)
+			}
+		})
+	}
+	const onRotateCircleMouseDown = (e: MouseEvent) => {
+		const { clientX, clientY } = e
+		e.stopPropagation()
+		globalStore.intention = EGlobalStoreIntention.Rotate
+		globalStore.rotate_info = {
+			angle: props.itemInfo.rotate
+		}
+		globalStore.setMouseInfo({
+			state: EMouseInfoState.Down,
+			position_x: clientX - svgEditLayoutStore.center_offset.x,
+			position_y: clientY - svgEditLayoutStore.center_offset.y,
+			now_position_x: clientX - svgEditLayoutStore.center_offset.x,
+			now_position_y: clientY - svgEditLayoutStore.center_offset.y,
+			new_position_x: 0,
+			new_position_y: 0
+		})
+	}
+	/**
+	 * 获取旋转之后的光标样式
+	 * @param init_angle 初始角度 360/8=45
+	 */
+	const getCursor = (init_angle: number) => {
+		const now_init_angle = (init_angle + props.itemInfo.rotate) % 360
+		const find_cursor = angle_to_cursor.find((f) => f.start <= now_init_angle && f.end > now_init_angle)
+		if (!find_cursor) {
+			return {
+				cursor: 'nw-resize',
+				type: EScaleInfoType.TopLeft
+			}
+		}
+		return {
+			cursor: find_cursor.cursor + '-resize',
+			type: find_cursor.type
+		}
+	}
+</script>
+
+<template>
+	<g style="vector-effect: non-scaling-stroke">
+		<rect
+			id="resize_tl"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(0).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="
+				props.itemInfo.actual_bound.x -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x)
+			"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.TopLeft, $event)"
+		>
+		</rect>
+		<circle
+			:cx="props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2"
+			:cy="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) -
+				24
+			"
+			:r="4"
+			class="rotate-circle"
+			@mousedown="onRotateCircleMouseDown"
+		/>
+		<line
+			:x1="props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2"
+			:y1="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			:x2="props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2"
+			:y2="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) -
+				20
+			"
+			:style="{ stroke: fill, 'stroke-width': 2 }"
+		/>
+		<rect
+			id="resize_tc"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(45).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2 - offset"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.TopCenter, $event)"
+		></rect>
+		<rect
+			id="resize_tr"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(90).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="
+				props.itemInfo.actual_bound.x +
+				props.itemInfo.actual_bound.width -
+				offset +
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x)
+			"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.TopRight, $event)"
+		></rect>
+		<rect
+			id="resize_l"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(315).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="
+				props.itemInfo.actual_bound.x -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x)
+			"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset +
+				(props.itemInfo.actual_bound.height * props.itemInfo.scale_y) / 2 -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.Left, $event)"
+		></rect>
+		<rect
+			id="resize_r"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(135).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="
+				props.itemInfo.actual_bound.x -
+				offset +
+				props.itemInfo.actual_bound.width +
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x)
+			"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset +
+				(props.itemInfo.actual_bound.height * props.itemInfo.scale_y) / 2 -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.Right, $event)"
+		></rect>
+		<rect
+			id="resize_bl"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(270).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="
+				props.itemInfo.actual_bound.x -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x)
+			"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset +
+				props.itemInfo.actual_bound.height * props.itemInfo.scale_y -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.BottomLeft, $event)"
+		></rect>
+		<rect
+			id="resize_bc"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(225).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="props.itemInfo.actual_bound.x - offset + props.itemInfo.actual_bound.width / 2"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset +
+				props.itemInfo.actual_bound.height +
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.BottomCenter, $event)"
+		></rect>
+		<rect
+			id="resize_br"
+			width="8"
+			height="8"
+			:fill="fill"
+			:style="{ cursor: getCursor(180).cursor, 'vector-effect': 'non-scaling-stroke' }"
+			pointer-events="all"
+			:x="
+				props.itemInfo.actual_bound.x -
+				offset +
+				props.itemInfo.actual_bound.width +
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x)
+			"
+			:y="
+				props.itemInfo.actual_bound.y -
+				offset +
+				props.itemInfo.actual_bound.height +
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y)
+			"
+			stroke="rgba(0,0,0,0)"
+			@mousedown="onHandleMouseDown(EScaleInfoType.BottomRight, $event)"
+		></rect>
+	</g>
+</template>
+
+<style scoped>
+	.rotate-circle {
+		stroke: v-bind('fill');
+		stroke-width: 1;
+		fill-opacity: 0;
+		cursor:
+			url('@/assets/icons/rotate.svg') 12 12,
+			auto;
+	}
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { VAceEditor } from 'vue3-ace-editor'
+	import '@/components/ace-edit'
+
+	import { useImportDataModel } from '@/hooks'
+	import { ElMessage } from 'element-plus'
+	const content = ref<string>('')
+
+	const setVal = (d: any) => {
+		content.value = d
+	}
+	const onImportJson = () => {
+		if (useImportDataModel(content.value)) {
+			ElMessage.success('导入成功')
+		}
+	}
+	defineExpose({
+		setVal,
+		onImportJson
+	})
+</script>
+
+<template>
+	<v-ace-editor
+		v-model:value="content"
+		lang="json"
+		theme="kr_theme"
+		style="height: 400px"
+		:options="{
+			useWorker: true,
+			enableBasicAutocompletion: true,
+			enableSnippets: true,
+			enableLiveAutocompletion: true
+		}"
+	/>
+</template>

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

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+	import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
+	import {
+		ElContainer,
+		ElHeader,
+		ElAside,
+		ElMain,
+		ElScrollbar,
+		ElDialog,
+		ElButton,
+		ElUpload,
+		ElMessage,
+		ElMessageBox
+	} from 'element-plus'
+	import 'element-plus/dist/index.css'
+	import 'animate.css'
+	import TopPanel from '@/components/svg-editor/top-panel/index.vue'
+	import LeftPanel from '@/components/svg-editor/left-panel/index.vue'
+	import CenterPanel from '@/components/svg-editor/center-panel/index.vue'
+	import RightPanel from '@/components/svg-editor/right-panel/index.vue'
+	import ExportJson from '@/components/svg-editor/export-json/index.vue'
+	import ImportJson from '@/components/svg-editor/import-json/index.vue'
+	import Vue3RulerTool from '@/components/vue3-ruler-tool/index.vue'
+	import { EVisibleConfKey } from '@/components/svg-editor/types'
+	import type { IVisibleConf, IDataModel } from '@/components/svg-editor/types'
+	import type { IConfig } from '@/config/types'
+	import { EGlobalStoreIntention } from '@/stores/global/types'
+	import type { IDoneJson } from '@/stores/global/types'
+	import { pinia } from '@/hooks'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+	import { useImportDataModel } from '@/hooks'
+	import { useGlobalStore } from '@/stores/global'
+	import { useConfigStore } from '@/stores/config'
+	import { fileRead, fileWrite } from '@/utils/file-read-write'
+
+	const props = withDefaults(defineProps<{ customToolbar?: IConfig; data?: string; saveFile?: boolean }>(), {
+		saveFile: false
+	})
+	const presetLine = ref([])
+	const input = (list: any) => {
+		presetLine.value = list
+	}
+	const globalStore = useGlobalStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+	const configStore = useConfigStore(pinia)
+	const importJsonRef = ref<InstanceType<typeof ImportJson>>()
+	const visible_conf: IVisibleConf = reactive({
+		[EVisibleConfKey.ExportJson]: false,
+		[EVisibleConfKey.ImportJson]: false,
+		[EVisibleConfKey.ImportFile]: false
+	})
+	const emits = defineEmits(['onReturn', 'onPreview', 'onSave'])
+	const changeVisible = (key: EVisibleConfKey, val: boolean) => {
+		visible_conf[key] = val
+	}
+
+	const onImportJson = ref()
+	onImportJson.value = () => {
+		importJsonRef.value!.onImportJson()
+		changeVisible(EVisibleConfKey.ImportJson, false)
+	}
+
+	const onImportFile = (f: File) => {
+		if (['text/plain', 'application/json'].indexOf(f.type) < 0) {
+			ElMessage.error('仅支持的格式：txt、json')
+			return false
+		}
+		fileRead(f).then((r) => {
+			importJsonRef.value!.setVal(r)
+			ElMessage.success('文件读取成功！')
+		})
+		return false
+	}
+	const setGraphNodeJson = (done_json: IDoneJson[]) => {
+		globalStore.setDoneJson(done_json)
+	}
+	onMounted(() => {
+		if (props.data) {
+			useImportDataModel(props.data)
+		} else {
+			globalStore.setDoneJson([])
+		}
+		globalStore.intention = EGlobalStoreIntention.None
+	})
+	defineExpose({
+		setGraphNodeJson
+	})
+
+	const { appContext } = getCurrentInstance()!
+
+	function save(d: IDataModel) {
+		if (props.saveFile) {
+			ElMessageBox.prompt('请输入文件名', '保存', { cancelButtonText: '取消', confirmButtonText: '保存' }, appContext)
+				.then((r: any) => {
+					fileWrite(d, r.value.trim())
+					emits('onSave', d)
+				})
+				.catch((e: any) => {
+					console.log(e)
+				})
+		} else {
+			emits('onSave', d)
+		}
+	}
+</script>
+<template>
+	<div>
+		<el-container>
+			<el-header class="top-el-header">
+				<top-panel
+					@change-visible="changeVisible"
+					@on-return="emits('onReturn')"
+					@on-preview="(val: IDataModel) => emits('onPreview', val)"
+					@on-save="save"
+				></top-panel>
+			</el-header>
+			<el-container class="middle">
+				<el-aside class="side-nav" :class="svgEditLayoutStore.left_nav ? 'show-nav' : 'hide-nav'">
+					<el-scrollbar class="el-scroll-pc">
+						<left-panel class="content-left" :custom-toolbar="props.customToolbar" />
+					</el-scrollbar>
+				</el-aside>
+				<el-main class="middle main">
+					<div class="canvas-main-pc">
+						<Vue3RulerTool
+							class="canvas-main-pc"
+							:value="presetLine"
+							:step-length="50"
+							:parent="true"
+							:is-scale-revise="false"
+							v-model:visible="configStore.svg.ruler"
+							@input="input"
+						>
+							<center-panel></center-panel>
+						</Vue3RulerTool>
+					</div>
+				</el-main>
+				<el-aside class="side-nav" :class="svgEditLayoutStore.right_nav ? 'show-nav' : 'hide-nav'">
+					<el-scrollbar class="el-scroll-pc">
+						<right-panel></right-panel>
+					</el-scrollbar>
+				</el-aside>
+			</el-container>
+		</el-container>
+		<el-dialog class="modal-full" v-model="visible_conf.ImportJson" title="导入数据" width="60%" destroy-on-close>
+			<import-json ref="importJsonRef"></import-json>
+			<template #footer>
+				<el-upload
+					:beforeUpload="onImportFile"
+					style="display: inline-flex; margin-right: 12px"
+					:multiple="false"
+					:show-file-list="false"
+					:limit="1"
+				>
+					<el-button @click="changeVisible(EVisibleConfKey.ImportFile, true)">读取文件</el-button>
+				</el-upload>
+				<el-button type="primary" @click="onImportJson">导入数据</el-button>
+			</template>
+		</el-dialog>
+		<el-dialog class="modal-full" v-model="visible_conf.ExportJson" title="导出" width="60%" destroy-on-close>
+			<export-json></export-json>
+		</el-dialog>
+	</div>
+</template>
+<style scoped lang="less">
+	@headerHeight: 45px;
+	.el-scroll-pc {
+		height: calc(100vh - @headerHeight - 1px);
+	}
+
+	.canvas-main-pc {
+		width: 100%;
+		height: 100%;
+		margin: 0 auto;
+	}
+
+	.middle {
+		height: calc(100vh - @headerHeight - 1px);
+
+		&.main {
+			margin: 0 5px;
+			background-color: #ffffff;
+			padding: 0 2px;
+		}
+
+		.side-nav {
+			@showLeftNavWidth: 260px;
+			@hideLeftNavWidth: 0;
+			position: relative;
+			overflow: inherit;
+			transition: all 0.5s;
+			// background-color: rgb(250, 251, 253);
+			box-shadow: 0 0 2px #dfcfcf;
+
+			.content-left {
+				overflow: hidden;
+				margin: 0 1vh;
+			}
+
+			&.show-nav {
+				flex: 0 0 @showLeftNavWidth;
+				min-width: @showLeftNavWidth;
+				max-width: @showLeftNavWidth;
+			}
+
+			&.hide-nav {
+				flex: 0 0 @hideLeftNavWidth;
+				min-width: @hideLeftNavWidth;
+				max-width: @hideLeftNavWidth;
+			}
+		}
+	}
+
+	.top-el-header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		box-shadow: 0 0 2px #dfcfcf;
+		margin-bottom: 1px;
+		height: @headerHeight;
+	}
+
+	.bottom-el-footer {
+		box-shadow: 0 -1px 0 0 #dfcfcf;
+		margin-top: 10px;
+	}
+
+	.contextMenu {
+		position: absolute;
+		z-index: 99999;
+		background: #ffffff;
+		padding: 5px 0;
+		margin: 0;
+		display: block;
+		border-radius: 5px;
+		box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
+
+		li {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+
+		.shortcut {
+			width: 115px;
+			text-align: right;
+			float: right;
+		}
+
+		p {
+			text-decoration: none;
+			display: block;
+			padding: 0 15px 1px 20px;
+			margin: 0;
+			user-select: none;
+			-webkit-user-select: none;
+		}
+
+		p:hover {
+			background-color: #0cf;
+			color: #ffffff;
+			cursor: default;
+		}
+
+		.disabled {
+			color: #999;
+		}
+
+		.disabled:hover {
+			color: #999;
+			background-color: transparent;
+		}
+
+		li.separator {
+			border-top: solid 1px #e3e3e3;
+			padding-top: 5px;
+			margin-top: 5px;
+		}
+	}
+</style>