feat: 新增自定义svg组件

src/assets/svgs/custom-svg-text.svg

@@ -0,0 +1,5 @@
+<svg  class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+   <text x="250" y="700" font-family="Microsoft YaHei" font-size="505" >文</text>
+</svg>

src/components/webtopo-svgedit/components/center-panel/index.vue

@@ -49,7 +49,7 @@
             <use
               v-else-if="item.type === EDoneJsonType.File"
               :xlink:href="`#svg-${item.name}`"
-              :fill="item.props.fill.val"
+              v-bind="prosToVBind(item.props)"
               width="100"
               height="100"
               :id="item.id"
@@ -60,6 +60,20 @@
                 item.actual_bound.width / 2
               )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
             ></use>
+            <component
+              v-else-if="item.type === EDoneJsonType.CustomSvg"
+              :is="item.tag"
+              v-bind="prosToVBind(item.props)"
+              width="100"
+              height="100"
+              :id="item.id"
+              :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
+                item.actual_bound.y + item.actual_bound.height / 2
+              }) scale(${item.scale_x},${item.scale_y}) translate(${-(
+                item.actual_bound.x +
+                item.actual_bound.width / 2
+              )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
+            ></component>
             <line
               v-else-if="item.type === EDoneJsonType.StraightLine"
               :id="item.id"
@@ -135,7 +149,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, reactive } from 'vue';
+  import { computed, getCurrentInstance, reactive } from 'vue';
   import { useConfigStore } from '@/store/config';
   import { useGlobalStore } from '@/store/global';
   import {
@@ -145,7 +159,14 @@
     IDoneJson
   } from '@/store/global/types';
   import { useSvgEditLayoutStore } from '@/store/svgedit-layout';
-  import { getCenterPoint, randomString, getSvgNowPosition, setSvgActualInfo } from '@/utils';
+  import {
+    getCenterPoint,
+    randomString,
+    getSvgNowPosition,
+    setSvgActualInfo,
+    prosToVBind,
+    objectDeepClone
+  } from '@/utils';
   import {
     calculateBottom,
     calculateLeft,
@@ -158,10 +179,18 @@
   } from '@/utils/scale-core';
   import HandlePanel from '@/components/webtopo-svgedit/components/handle-panel/index.vue';
   import ConnectionPanel from '@/components/webtopo-svgedit/components/connection-panel/index.vue';
-  import { EDoneJsonType } from '@/config-center/types';
+  import { EDoneJsonType, IConfigItem } from '@/config-center/types';
   import ConnectionLine from '@/components/webtopo-svgedit/components/connection-line/index.vue';
   import { IVisiableInfo } from './types';
+  import { ComponentImport } from '@/config-center';
   // import HandlePanel from '../handle-panel/index.vue';
+  //注册所有组件
+  const instance = getCurrentInstance();
+  Object.keys(ComponentImport).forEach((key) => {
+    if (!Object.keys(instance?.appContext?.components as any).includes(key)) {
+      instance?.appContext.app.component(key, ComponentImport[key]);
+    }
+  });
   const globalStore = useGlobalStore();
   const configStore = useConfigStore();
   const svgEditLayoutStore = useSvgEditLayoutStore();
@@ -245,7 +274,7 @@
             y: 0
           }
         },
-        ...globalStore.create_svg_info
+        ...objectDeepClone<IConfigItem>(globalStore.create_svg_info)
       };
       globalStore.setHandleSvgInfo(done_item_json, globalStore.done_json.length);
       globalStore.setDoneJson(done_item_json);

src/components/webtopo-svgedit/components/custom-svg/custom-svg-text/index.vue

@@ -0,0 +1,32 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <text
+    x="50"
+    y="55"
+    :font-family="props.fontFamily"
+    :font-size="props.fontSize"
+    :fill="props.fill"
+    >{{ props.text }}</text
+  >
+</template>
+<script setup lang="ts">
+  // 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
+  const props = defineProps({
+    fontFamily: {
+      type: String,
+      default: ''
+    },
+    fontSize: {
+      type: Number,
+      default: 15
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    fill: {
+      type: String,
+      default: ''
+    }
+  });
+</script>

src/components/webtopo-svgedit/components/left-panel/index.vue

@@ -57,7 +57,7 @@
   const globalStore = useGlobalStore();
   const select_lib = ref('svg文件');
   const config_center = ref<IConfigComponentGroup[]>(globalStore.config_center.svg文件);
-  const activeNames = ref(['stateful', 'stateless', 'have_animation']);
+  const activeNames = ref(['stateful', 'stateless', 'have_animation', 'custom_svg_group']);
   const libChange = (val: any) => {
     config_center.value = [];
     config_center.value = val;

src/config-center/custom-svg/custom-svg-text/index.ts

@@ -0,0 +1,45 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '@/config-center/types';
+
+export const custom_svg_text: IConfigItem = {
+  name: 'custom-svg-text',
+  title: '文字',
+  tag: 'custom-svg-text',
+  type: EDoneJsonType.CustomSvg,
+  config: {
+    can_zoom: true,
+    have_anchor: true,
+    actual_rect: true
+  },
+  props: {
+    text: {
+      title: '文字内容',
+      type: EConfigItemPropsType.Input,
+      val: '文字'
+    },
+    fontFamily: {
+      title: '字体',
+      type: EConfigItemPropsType.Select,
+      val: 'Microsoft YaHei',
+      options: [
+        {
+          value: 'Microsoft YaHei',
+          label: '微软雅黑'
+        },
+        {
+          value: 'NSimSun',
+          label: '新宋体'
+        }
+      ]
+    },
+    fontSize: {
+      title: '文字大小',
+      type: EConfigItemPropsType.InputNumber,
+      val: 15
+    },
+    fill: {
+      title: '文字颜色',
+      type: EConfigItemPropsType.Color,
+      val: '#FFF200FF'
+    }
+  }
+};

src/config-center/custom-svg/index.ts

@@ -0,0 +1,8 @@
+import { IConfigComponentGroup } from '../types';
+import { custom_svg_text } from './custom-svg-text';
+
+export const custom_svg_group: IConfigComponentGroup = {
+  groupType: 'custom_svg_group',
+  title: '自定义svg',
+  list: [custom_svg_text]
+};

src/config-center/index.ts

@@ -1,9 +1,12 @@
 import { svgfile_config_center } from './svg-file';
-import { IConfigCenter } from './types';
+import { IComponentImport, IConfigCenter } from './types';
-
+import customSvgText from '@/components/webtopo-svgedit/components/custom-svg/custom-svg-text/index.vue';
 export const configCenter: IConfigCenter = {
   svg文件: svgfile_config_center,
   vue组件: [],
   自定义组件: [],
   图表: []
 };
+export const ComponentImport: IComponentImport = {
+  'custom-svg-text': customSvgText
+};

src/config-center/svg-file/index.ts

@@ -2,9 +2,11 @@ import { IConfigComponentGroup } from '../types';
 import { stateful_group } from './stateful';
 import { stateless_group } from './stateless';
 import { have_animation_group } from './have-animation';
+import { custom_svg_group } from '../custom-svg';
 
 export const svgfile_config_center: IConfigComponentGroup[] = Object.seal([
   stateful_group,
   stateless_group,
-  have_animation_group
+  have_animation_group,
+  custom_svg_group
 ]);

src/config-center/types.ts

@@ -22,6 +22,7 @@ export interface IConfigItem {
   type: EDoneJsonType;
   config: IDoneJsonConfig;
   animations?: IConfigItemProps;
+  tag?: any;
 }
 export interface IConfigItemProps {
   [key: string]: {
@@ -50,10 +51,14 @@ export enum EConfigItemPropsType {
 export enum EDoneJsonType {
   File = 'File',
   StraightLine = 'StraightLine',
-  ConnectionLine = 'ConnectionLine'
+  ConnectionLine = 'ConnectionLine',
+  CustomSvg = 'CustomSvg'
 }
 interface IDoneJsonConfig {
   can_zoom: boolean;
   have_anchor: boolean;
   actual_rect: boolean;
 }
+export interface IComponentImport {
+  [key: string]: any;
+}

src/utils/index.ts

@@ -1,4 +1,5 @@
 import { ELineBindAnchors } from '@/config-center/system/types';
+import type { IConfigItemProps } from '@/config-center/types';
 import type { IDoneJson } from '@/store/global/types';
 
 /**
@@ -230,3 +231,10 @@ export const setAfterRotationPointCoordinate = (item: IDoneJson) => {
     )
   };
 };
+export const prosToVBind = (props: IConfigItemProps) => {
+  let temp = {};
+  for (const key in props) {
+    temp = { ...temp, ...{ [key]: props[key].val } };
+  }
+  return temp;
+};