@zhangqingcq/vgce 0.0.20 → 0.0.22

package/src/config/files/clock-a.vue

@@ -1,64 +1,64 @@
-<script lang="ts" setup>
-	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
-	const nowTime = ref(new Date())
-	const s = nowTime.value.getSeconds()
-	const m = nowTime.value.getMinutes()
-	const h = Math.floor((nowTime.value.getHours() + (m + s / 60) / 60) * 30)
-</script>
-<template>
-	<g :id="props.id">
-		<symbol :id="`${props.id}clock-a-n`" viewBox="0 0 1024 1024">
-			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF" />
-			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF" />
-			<path
-				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
-				fill="#2D416C"
-			>
-				<animateTransform
-					attributeName="transform"
-					attributeType="XML"
-					type="rotate"
-					:from="`${-45 + h} 512.3 506.3`"
-					:to="`${315 + h} 512.3 506.3`"
-					dur="43200s"
-					repeatCount="indefinite"
-				/>
-			</path>
-			<path
-				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
-				fill="#365087"
-			>
-				<animateTransform
-					attributeName="transform"
-					attributeType="XML"
-					type="rotate"
-					:from="`${45 + m * 6} 512.3 506.3`"
-					:to="`${405 + m * 6} 512.3 506.3`"
-					dur="3600s"
-					repeatCount="indefinite"
-				/>
-			</path>
-			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087" />
-			<path
-				d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
-				fill="#2D416C"
-			/>
-			<path
-				d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
-				fill="#C11B16"
-			>
-				<animateTransform
-					attributeName="transform"
-					attributeType="XML"
-					type="rotate"
-					:from="`${135.5 + s * 6} 512.3 506.3`"
-					:to="`${495.5 + s * 6} 512.3 506.3`"
-					dur="60s"
-					repeatCount="indefinite"
-				/>
-			</path>
-			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#fff" />
-		</symbol>
-		<use :xlink:href="`#${props.id}clock-a-n`" width="200" height="200" />
-	</g>
-</template>
+<script lang="ts" setup>
+	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
+	const nowTime = ref(new Date())
+	const s = nowTime.value.getSeconds()
+	const m = nowTime.value.getMinutes()
+	const h = Math.floor((nowTime.value.getHours() + (m + s / 60) / 60) * 30)
+</script>
+<template>
+	<g :id="props.id">
+		<symbol :id="`${props.id}clock-a-n`" viewBox="0 0 1024 1024">
+			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF" />
+			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF" />
+			<path
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
+				fill="#2D416C"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					:from="`${-45 + h} 512.3 506.3`"
+					:to="`${315 + h} 512.3 506.3`"
+					dur="43200s"
+					repeatCount="indefinite"
+				/>
+			</path>
+			<path
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
+				fill="#365087"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					:from="`${45 + m * 6} 512.3 506.3`"
+					:to="`${405 + m * 6} 512.3 506.3`"
+					dur="3600s"
+					repeatCount="indefinite"
+				/>
+			</path>
+			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087" />
+			<path
+				d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
+				fill="#2D416C"
+			/>
+			<path
+				d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
+				fill="#C11B16"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					:from="`${135.5 + s * 6} 512.3 506.3`"
+					:to="`${495.5 + s * 6} 512.3 506.3`"
+					dur="60s"
+					repeatCount="indefinite"
+				/>
+			</path>
+			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#fff" />
+		</symbol>
+		<use :xlink:href="`#${props.id}clock-a-n`" width="100" height="100" />
+	</g>
+</template>

package/src/config/svg/animation/index.ts

@@ -3,6 +3,6 @@ import { reservoir } from './reservoir'
 
 export const animation_group: IConfigComponentGroup = {
 	groupType: 'have_animation',
-	title: '动画图标',
+	title: '动画SVG',
 	list: [reservoir]
 }

package/src/config/svg/custom/svg-text.ts

@@ -15,8 +15,8 @@ export const svg_text: IConfigItem = {
 	props: {
 		text: {
 			title: '文字内容',
-			type: EConfigItemPropsType.Input,
-			val: '文字'
+			type: EConfigItemPropsType.Textarea,
+			val: '文字内容'
 		},
 		fontFamily: {
 			title: '字体',

package/src/config/svg/stateful/index.ts

@@ -3,6 +3,6 @@ import { circuit_breaker_svg_file } from './circuit-breaker'
 
 export const stateful_group: IConfigComponentGroup = {
 	groupType: 'stateful',
-	title: '状态图标',
+	title: '状态SVG',
 	list: [circuit_breaker_svg_file]
 }

package/src/config/svg/stateless/index.ts

@@ -2,9 +2,10 @@ import type { IConfigComponentGroup } from '@/config/types'
 import { alternator_svg_file } from './alternator'
 import { svg_house } from './house'
 import { svg_bot_2 } from './bot-2'
+import { sheet_border } from './sheet-border'
 
 export const stateless_group: IConfigComponentGroup = {
 	groupType: 'stateless',
-	title: '静态图标',
-	list: [alternator_svg_file, svg_house, svg_bot_2]
+	title: '静态SVG',
+	list: [alternator_svg_file, svg_house, svg_bot_2, sheet_border]
 }

package/src/config/svg/stateless/sheet-border.ts

@@ -0,0 +1,22 @@
+import { EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const sheet_border: IConfigItem = {
+	name: 'sheet-border',
+	title: '田字格',
+	type: EDoneJsonType.File,
+	display: true,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	props: {},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/types.ts

@@ -55,6 +55,7 @@ export enum EConfigAnimationsType {
 
 export enum EConfigItemPropsType {
 	Input = 'Input',
+	Textarea = 'Textarea',
 	Color = 'Color',
 	InputNumber = 'InputNumber',
 	Switch = 'Switch', //此类型option默认索引0为关闭

package/src/stores/config/index.ts

@@ -14,15 +14,8 @@ if (l) {
 	s = {
 		background_color: '#fff',
 		scale: 1,
-		position_center: {
-			x: -333,
-			y: -113
-		},
-		svg_position_center: {
-			x: 50,
-			y: 50
-		},
 		grid: true,
+		grid_color: '#ebebeb',
 		ruler: true
 	}
 }

package/src/stores/config/types.ts

@@ -5,14 +5,6 @@ export interface IPositionCenter {
 export interface IPositionCenterSvg {
 	background_color: string
 	scale: number
-	position_center: {
-		x: number
-		y: number
-	}
-	svg_position_center: {
-		x: number
-		y: number
-	}
 	grid: boolean
 	ruler: boolean
 }

package/src/stores/global/index.ts

@@ -52,7 +52,6 @@ export const useGlobalStore = defineStore('global-store', {
 			}
 		}
 	},
-	getters: {},
 	actions: {
 		setCreateInfo(create_svg_info: IConfigItem | null) {
 			this.intention = EGlobalStoreIntention.Create
@@ -74,9 +73,6 @@ export const useGlobalStore = defineStore('global-store', {
 				useHistoryRecord(objectDeepClone<IDoneJson[]>(this.done_json))
 			})
 		},
-		setMouseInfo(mouse_info: IMouseInfo) {
-			this.mouse_info = mouse_info
-		},
 		setHandleSvgInfo(info: IDoneJson | null, index?: number) {
 			let current_index = index
 			if (info) {
@@ -92,9 +88,6 @@ export const useGlobalStore = defineStore('global-store', {
 				this.handle_svg_info = info
 			}
 		},
-		setScaleInfo(info: IScaleInfo) {
-			this.scale_info = info
-		},
 		spliceDoneJson(index: number) {
 			const globalStore = useGlobalStore()
 			globalStore.done_json.splice(index, 1)
@@ -102,6 +95,3 @@ export const useGlobalStore = defineStore('global-store', {
 		}
 	}
 })
-// useGlobalStore().$subscribe((mutation, state) => {
-//   console.log(mutation, state, 102);
-// });

package/src/stores/global/types.ts

@@ -1,4 +1,5 @@
 import type { IConfig, IConfigItem } from '@/config/types'
+import type { IBindAnchors } from '@/components/config/types'
 
 export interface IGlobalStore {
 	config_center: IConfig
@@ -11,6 +12,18 @@ export interface IGlobalStore {
 	rotate_info: IRotateInfo
 	connection_line_node_info: IConnectionLineNodeInfo
 }
+
+export interface IPointCoordinate {
+	tl: ICoordinate
+	tc: ICoordinate
+	tr: ICoordinate
+	l: ICoordinate
+	r: ICoordinate
+	bl: ICoordinate
+	bc: ICoordinate
+	br: ICoordinate
+}
+
 export interface IDoneJson extends IConfigItem {
 	id: string
 	x: number
@@ -25,29 +38,32 @@ export interface IDoneJson extends IConfigItem {
 		width: number
 		height: number
 	}
-	point_coordinate: {
-		tl: ICoordinate
-		tc: ICoordinate
-		tr: ICoordinate
-		l: ICoordinate
-		r: ICoordinate
-		bl: ICoordinate
-		bc: ICoordinate
-		br: ICoordinate
+	point_coordinate: IPointCoordinate
+	point_coordinate_old?: IPointCoordinate
+	selected?: boolean
+	old_position?: { x: number; y: number }
+	center_position: { x: number; y: number }
+	bind_anchors?: {
+		start: IBindAnchors | null
+		end: IBindAnchors | null
 	}
 }
+
 export enum EGlobalStoreIntention {
 	None = 'None',
 	Create = 'Create',
 	Move = 'Move',
+	GroupMove = 'GroupMove',
 	MoveCanvas = 'MoveCanvas',
 	Select = 'Select',
 	Zoom = 'Zoom',
 	Rotate = 'Rotate',
 	Connection = 'Connection',
 	SetConnectionLineNode = 'SetConnectionLineNode',
-	ContextMenu = 'ContextMenu'
+	ContextMenu = 'ContextMenu',
+	SelectArea = 'SelectArea'
 }
+
 export interface IMouseInfo {
 	state: EMouseInfoState
 	position_x: number //鼠标指针坐标
@@ -57,14 +73,17 @@ export interface IMouseInfo {
 	new_position_x: number //移动之后目标的坐标
 	new_position_y: number
 }
+
 export enum EMouseInfoState {
 	Down = 'Down',
 	Up = 'Up'
 }
+
 export interface IHandleSvgInfo {
 	info: IDoneJson
 	index: number
 }
+
 /**
  * 缩放信息
  */
@@ -85,12 +104,14 @@ export interface IScaleInfo {
 		y: number
 	}
 }
+
 /**
  * 旋转信息
  */
 export interface IRotateInfo {
 	angle: number
 }
+
 export enum EScaleInfoType {
 	None = '',
 	TopLeft = 'TopLeft',
@@ -102,10 +123,12 @@ export enum EScaleInfoType {
 	BottomCenter = 'BottomCenter',
 	BottomRight = 'BottomRight'
 }
+
 export interface ICoordinate {
 	x: number
 	y: number
 }
+
 export interface IConnectionLineNodeInfo {
 	init_pos: {
 		x: number

package/src/stores/svg-edit-layout/index.ts

@@ -1,4 +1,5 @@
 import type { ISvgEditLayoutStore } from './types'
+
 /**
  * 编辑器布局状态
  */
@@ -10,6 +11,12 @@ export const useSvgEditLayoutStore = defineStore('svg-edit-layout-store', {
 			center_offset: {
 				x: 0,
 				y: 0
+			},
+			canvasInfo: {
+				with: 0,
+				height: 0,
+				top: 0,
+				left: 0
 			}
 		}
 	}

package/src/stores/svg-edit-layout/types.ts

@@ -5,4 +5,5 @@ export interface ISvgEditLayoutStore {
 		x: number
 		y: number
 	}
+	canvasInfo: { with: number; height: number; top: number; left: number }
 }