diff --git a/src/assets/svgs/custom-svg-text.svg b/src/assets/svgs/custom-svg-text.svg new file mode 100644 index 0000000..ccc7b57 --- /dev/null +++ b/src/assets/svgs/custom-svg-text.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/components/webtopo-svgedit/components/center-panel/index.vue b/src/components/webtopo-svgedit/components/center-panel/index.vue index fbb802b..cf4f24a 100644 --- a/src/components/webtopo-svgedit/components/center-panel/index.vue +++ b/src/components/webtopo-svgedit/components/center-panel/index.vue @@ -49,7 +49,7 @@ + diff --git a/src/components/webtopo-svgedit/components/left-panel/index.vue b/src/components/webtopo-svgedit/components/left-panel/index.vue index cdda771..389571a 100644 --- a/src/components/webtopo-svgedit/components/left-panel/index.vue +++ b/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(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; diff --git a/src/config-center/custom-svg/custom-svg-text/index.ts b/src/config-center/custom-svg/custom-svg-text/index.ts new file mode 100644 index 0000000..59a6f66 --- /dev/null +++ b/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' + } + } +}; diff --git a/src/config-center/custom-svg/index.ts b/src/config-center/custom-svg/index.ts new file mode 100644 index 0000000..4e23fcb --- /dev/null +++ b/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] +}; diff --git a/src/config-center/index.ts b/src/config-center/index.ts index 5e8e0c3..1ac0f66 100644 --- a/src/config-center/index.ts +++ b/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 +}; diff --git a/src/config-center/svg-file/index.ts b/src/config-center/svg-file/index.ts index b793020..5651279 100644 --- a/src/config-center/svg-file/index.ts +++ b/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 ]); diff --git a/src/config-center/types.ts b/src/config-center/types.ts index 66659f2..5845e6b 100644 --- a/src/config-center/types.ts +++ b/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; +} diff --git a/src/utils/index.ts b/src/utils/index.ts index 8c958f3..eadb717 100644 --- a/src/utils/index.ts +++ b/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; +};