@zhangqingcq/vgce 0.0.13 → 0.0.15

package/src/components/svg-editor/center-panel/types.ts

@@ -0,0 +1,11 @@
+import type { IDoneJson } from '@/stores/global/types'
+
+export interface IVisibleInfo {
+	handle_panel: boolean
+	connection_panel: boolean
+	connection_line: boolean
+	select_item: {
+		info: null | IDoneJson
+		index: number
+	}
+}

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

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import { pinia } from '@/hooks'
+	import { useGlobalStore } from '@/stores/global'
+	import { ElTree } from 'element-plus'
+	import { EGlobalStoreIntention } from '@/stores/global/types'
+	import type { IDoneJson } from '@/stores/global/types'
+
+	const global_store = useGlobalStore(pinia)
+	const current_node_key = ref(global_store.handle_svg_info?.info.id || '')
+	const handleNodeClick = (data: IDoneJson) => {
+		global_store.intention = EGlobalStoreIntention.Select
+		global_store.setHandleSvgInfo(data)
+	}
+
+	const defaultProps = {
+		children: 'children',
+		label: 'title'
+	}
+</script>
+
+<template>
+	<el-tree
+		:data="global_store.done_json"
+		:props="defaultProps"
+		@node-click="handleNodeClick"
+		:default-expand-all="true"
+		:expand-on-click-node="false"
+		:highlight-current="true"
+		node-key="id"
+		:current-node-key="current_node_key"
+	/>
+</template>

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

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+	import { EMouseInfoState, EGlobalStoreIntention } from '@/stores/global/types'
+	import type { IDoneJson } from '@/stores/global/types'
+	import { positionArrToPath } from '@/utils'
+	import { pinia } from '@/hooks'
+	import { useGlobalStore } from '@/stores/global'
+	import { EConfigAnimationsType } from '@/config/types'
+
+	const props = withDefaults(defineProps<{ itemInfo: IDoneJson; pointVisible: boolean }>(), { pointVisible: false })
+	const globalStore = useGlobalStore(pinia)
+	const setConnectionLineNode = (point_index: number, e: MouseEvent, x: number, y: number) => {
+		if (globalStore.intention === EGlobalStoreIntention.Connection) {
+			return
+		}
+		globalStore.setHandleSvgInfo(props.itemInfo)
+		const { clientX, clientY } = e
+		e.stopPropagation()
+		globalStore.connection_line_node_info = {
+			init_pos: {
+				x,
+				y
+			},
+			point_index: point_index
+		}
+		globalStore.intention = EGlobalStoreIntention.SetConnectionLineNode
+		globalStore.setMouseInfo({
+			state: EMouseInfoState.Down,
+			position_x: clientX,
+			position_y: clientY,
+			now_position_x: clientX,
+			now_position_y: clientY,
+			new_position_x: 0,
+			new_position_y: 0
+		})
+	}
+</script>
+
+<template>
+	<g>
+		<path
+			:id="props.itemInfo.id"
+			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
+			fill="none"
+			:stroke="
+				props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
+					? props.itemInfo.animations.color.val
+					: props.itemInfo.props.stroke.val
+			"
+			:stroke-width="props.itemInfo.props['stroke-width'].val"
+			style="cursor: move"
+			stroke-dashoffset="0"
+			:stroke-dasharray="
+				props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
+					? props.itemInfo.props['stroke-width'].val * 3
+					: 0
+			"
+		>
+			<animate
+				v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity"
+				attributeName="stroke-dashoffset"
+				:from="props.itemInfo.animations.reverse.val ? 0 : 1000"
+				:to="props.itemInfo.animations.reverse.val ? 1000 : 0"
+				:dur="`${props.itemInfo.animations.dur.val}s`"
+				:repeatCount="props.itemInfo.animations.repeatCount.val"
+			/>
+		</path>
+		<!-- 水珠 -->
+		<path
+			v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.WaterDrop"
+			:d="positionArrToPath(props.itemInfo.props.point_position.val)"
+			fill="none"
+			fill-opacity="0"
+			:stroke="props.itemInfo.animations.color.val"
+			:stroke-width="props.itemInfo.props['stroke-width'].val"
+			:stroke-dasharray="props.itemInfo.props['stroke-width'].val * 3"
+			stroke-dashoffset="0"
+			stroke-linecap="round"
+		>
+			<animate
+				attributeName="stroke-dashoffset"
+				:from="props.itemInfo.animations.reverse.val ? 0 : 1000"
+				:to="props.itemInfo.animations.reverse.val ? 1000 : 0"
+				:dur="`${props.itemInfo.animations.dur.val}s`"
+				:repeatCount="props.itemInfo.animations.repeatCount.val"
+				fill="freeze"
+			/>
+		</path>
+		<!-- 轨迹 -->
+		<circle
+			v-else-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Track"
+			cx="0"
+			cy="0"
+			:r="props.itemInfo.props['stroke-width'].val * 2"
+			:fill="props.itemInfo.animations.color.val"
+		>
+			<animateMotion
+				:path="
+					positionArrToPath(
+						props.itemInfo.animations.reverse.val
+							? [...props.itemInfo.props.point_position.val].reverse()
+							: props.itemInfo.props.point_position.val
+					)
+				"
+				:dur="`${props.itemInfo.animations.dur.val}s`"
+				:repeatCount="props.itemInfo.animations.repeatCount.val"
+			>
+			</animateMotion>
+		</circle>
+		<!-- 更改线段 -->
+		<g v-if="props.pointVisible">
+			<circle
+				v-for="(item, index) in props.itemInfo.props.point_position.val"
+				:key="index"
+				:cx="item.x"
+				:cy="item.y"
+				r="6"
+				stroke-width="1"
+				:stroke="props.itemInfo.props.stroke.val"
+				fill="#fff"
+				style="cursor: pointer"
+				@mousedown="setConnectionLineNode(index, $event, item.x, item.y)"
+			/>
+		</g>
+	</g>
+</template>

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

@@ -0,0 +1,198 @@
+<!-- 连线组件 -->
+<script lang="ts" setup>
+	import { straight_line_system } from '@/components/config'
+	import { ELineBindAnchors } from '@/components/config/types'
+	import type { ISystemStraightLine } from '@/components/config/types'
+	import { pinia } from '@/hooks'
+	import { useConfigStore } from '@/stores/config'
+	import { ref } from 'vue'
+	import { useGlobalStore } from '@/stores/global'
+	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
+	import type { IDoneJson } from '@/stores/global/types'
+	import { getAnchorPosByAnchorType, getCoordinateOffset, objectDeepClone, randomString } from '@/utils'
+
+	const props = defineProps<{ itemInfo: IDoneJson }>()
+	const globalStore = useGlobalStore(pinia)
+	const configStore = useConfigStore(pinia)
+	const offset = ref(4)
+	const fill = ref('#4F80FF')
+	const radius = ref(4)
+	/**
+	 * 点了连线
+	 * @param bind_anchor_type 绑定锚点类型
+	 * @param e
+	 */
+	const onConnectionMouseDown = (bind_anchor_type: ELineBindAnchors, e: MouseEvent) => {
+		e.preventDefault()
+
+		const { clientX, clientY } = e
+		let create_line_info = objectDeepClone<ISystemStraightLine>(configStore.connection_line)
+		console.log('onConnectionMouseDown', configStore.connection_line, e)
+		//以后顶部可以选择连线是哪种 直线先不做
+		/*if (false) {
+		 create_line_info = straight_line_system
+		 }*/
+		create_line_info.bind_anchors.start = {
+			type: bind_anchor_type,
+			target_id: props.itemInfo.id
+		}
+		const { x, y } = getAnchorPosByAnchorType(bind_anchor_type, props.itemInfo)
+		const done_item_json = {
+			id: straight_line_system.name + randomString(),
+			x: x,
+			y: y,
+			client: {
+				x: clientX,
+				y: clientY
+			},
+			scale_x: 1,
+			scale_y: 1,
+			rotate: 0,
+			actual_bound: {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			},
+			point_coordinate: {
+				tl: {
+					x: 0,
+					y: 0
+				},
+				tc: {
+					x: 0,
+					y: 0
+				},
+				tr: {
+					x: 0,
+					y: 0
+				},
+				l: {
+					x: 0,
+					y: 0
+				},
+				r: {
+					x: 0,
+					y: 0
+				},
+				bl: {
+					x: 0,
+					y: 0
+				},
+				bc: {
+					x: 0,
+					y: 0
+				},
+				br: {
+					x: 0,
+					y: 0
+				}
+			},
+			...create_line_info
+		}
+		done_item_json.props.point_position.val.push({
+			x: configStore.svg.svg_position_center.x,
+			y: configStore.svg.svg_position_center.y
+		})
+		globalStore.setHandleSvgInfo(done_item_json, globalStore.done_json.length)
+		globalStore.setDoneJson(done_item_json)
+
+		globalStore.intention = EGlobalStoreIntention.Connection
+		globalStore.setMouseInfo({
+			state: EMouseInfoState.Down,
+			position_x: clientX,
+			position_y: clientY,
+			now_position_x: clientX,
+			now_position_y: clientY,
+			new_position_x: 0,
+			new_position_y: 0
+		})
+	}
+</script>
+
+<template>
+	<g style="vector-effect: non-scaling-stroke">
+		<circle
+			id="connection_tc"
+			:cx="props.itemInfo.actual_bound.x + props.itemInfo.actual_bound.width / 2 - offset + radius"
+			:cy="
+				props.itemInfo.actual_bound.y -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
+				radius
+			"
+			:r="radius"
+			stroke="rgba(0,0,0,0)"
+			stroke-width="2"
+			:fill="fill"
+			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
+			pointer-events="all"
+			@mousedown="onConnectionMouseDown(ELineBindAnchors.TopCenter, $event)"
+		/>
+		<circle
+			id="connection_l"
+			:cx="
+				props.itemInfo.actual_bound.x -
+				offset -
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x) +
+				radius
+			"
+			:cy="
+				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) +
+				radius
+			"
+			:r="radius"
+			stroke="rgba(0,0,0,0)"
+			stroke-width="2"
+			:fill="fill"
+			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
+			pointer-events="all"
+			@mousedown="onConnectionMouseDown(ELineBindAnchors.Left, $event)"
+		/>
+		<circle
+			id="connection_r"
+			:cx="
+				props.itemInfo.actual_bound.x -
+				offset +
+				props.itemInfo.actual_bound.width +
+				getCoordinateOffset(props.itemInfo.actual_bound.width, props.itemInfo.scale_x) +
+				radius
+			"
+			:cy="
+				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) +
+				radius
+			"
+			:r="radius"
+			stroke="rgba(0,0,0,0)"
+			stroke-width="2"
+			:fill="fill"
+			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
+			pointer-events="all"
+			@mousedown="onConnectionMouseDown(ELineBindAnchors.Right, $event)"
+		/>
+		<circle
+			id="connection_bc"
+			:cx="props.itemInfo.actual_bound.x - offset + props.itemInfo.actual_bound.width / 2 + radius"
+			:cy="
+				props.itemInfo.actual_bound.y -
+				offset +
+				props.itemInfo.actual_bound.height +
+				getCoordinateOffset(props.itemInfo.actual_bound.height, props.itemInfo.scale_y) +
+				radius
+			"
+			:r="radius"
+			stroke="rgba(0,0,0,0)"
+			stroke-width="2"
+			:fill="fill"
+			:style="{ 'vector-effect': 'non-scaling-stroke', cursor: 'pointer' }"
+			pointer-events="all"
+			@mousedown="onConnectionMouseDown(ELineBindAnchors.BottomCenter, $event)"
+		/>
+	</g>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+	import { onMounted, ref } from 'vue'
+	import { VAceEditor } from 'vue3-ace-editor'
+	import '@/components/ace-edit'
+	import { pinia } from '@/hooks'
+	import { useGlobalStore } from '@/stores/global'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+	import { useConfigStore } from '@/stores/config'
+	import type { IDataModel } from '@/components/svg-editor/types'
+	const content = ref('')
+	const globalStore = useGlobalStore(pinia)
+	const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+	const configStore = useConfigStore(pinia)
+	onMounted(() => {
+		const export_json: IDataModel = {
+			layout_center: svgEditLayoutStore.center_offset,
+			config: configStore.$state,
+			done_json: globalStore.done_json
+		}
+		content.value = JSON.stringify(export_json, null, 2)
+	})
+</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>