From 3e2265877dda068748f62d0e5ffcb1598e71ab15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com> Date: Sun, 15 Jan 2023 20:31:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BA=86=E5=AF=B9vue?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/el-button.svg | 10 ++++ src/assets/svgs/el-tag.svg | 13 +++++ .../components/center-panel/index.vue | 20 ++++++++ .../components/left-panel/index.vue | 8 +++- .../components/right-panel/index.vue | 7 +++ src/config-center/index.ts | 10 ++-- .../svg-file/stateless/alternator/index.ts | 2 +- src/config-center/types.ts | 6 ++- .../vue/element-ui/button/index.ts | 48 +++++++++++++++++++ src/config-center/vue/element-ui/index.ts | 9 ++++ src/config-center/vue/element-ui/tag/index.ts | 37 ++++++++++++++ src/config-center/vue/index.ts | 4 ++ src/utils/index.ts | 27 +++++++++-- 13 files changed, 190 insertions(+), 11 deletions(-) create mode 100644 src/assets/svgs/el-button.svg create mode 100644 src/assets/svgs/el-tag.svg create mode 100644 src/config-center/vue/element-ui/button/index.ts create mode 100644 src/config-center/vue/element-ui/index.ts create mode 100644 src/config-center/vue/element-ui/tag/index.ts create mode 100644 src/config-center/vue/index.ts diff --git a/src/assets/svgs/el-button.svg b/src/assets/svgs/el-button.svg new file mode 100644 index 0000000..ec1af84 --- /dev/null +++ b/src/assets/svgs/el-button.svg @@ -0,0 +1,10 @@ + + + + \ No newline at end of file diff --git a/src/assets/svgs/el-tag.svg b/src/assets/svgs/el-tag.svg new file mode 100644 index 0000000..e981826 --- /dev/null +++ b/src/assets/svgs/el-tag.svg @@ -0,0 +1,13 @@ + + + + + \ 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 a51a409..68d884b 100644 --- a/src/components/webtopo-svgedit/components/center-panel/index.vue +++ b/src/components/webtopo-svgedit/components/center-panel/index.vue @@ -74,6 +74,26 @@ item.actual_bound.width / 2 )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`" > + + {{ item.tag_slot }} + + (globalStore.config_center.svg文件); - const activeNames = ref(['stateful', 'stateless', 'have_animation', 'custom_svg_group']); + const activeNames = ref([ + 'stateful', + 'stateless', + 'have_animation', + 'custom_svg_group', + 'element-ui' + ]); const libChange = (val: any) => { config_center.value = []; config_center.value = val; diff --git a/src/components/webtopo-svgedit/components/right-panel/index.vue b/src/components/webtopo-svgedit/components/right-panel/index.vue index 8628b4f..89e3d95 100644 --- a/src/components/webtopo-svgedit/components/right-panel/index.vue +++ b/src/components/webtopo-svgedit/components/right-panel/index.vue @@ -49,6 +49,13 @@ > + + + diff --git a/src/config-center/index.ts b/src/config-center/index.ts index 1ac0f66..9e0973d 100644 --- a/src/config-center/index.ts +++ b/src/config-center/index.ts @@ -1,12 +1,14 @@ import { svgfile_config_center } from './svg-file'; import { IComponentImport, IConfigCenter } from './types'; import customSvgText from '@/components/webtopo-svgedit/components/custom-svg/custom-svg-text/index.vue'; +import { vue_config_center } from './vue'; +import { ElButton, ElTag } from 'element-plus'; export const configCenter: IConfigCenter = { svg文件: svgfile_config_center, - vue组件: [], - 自定义组件: [], - 图表: [] + vue组件: vue_config_center }; export const ComponentImport: IComponentImport = { - 'custom-svg-text': customSvgText + 'custom-svg-text': customSvgText, + 'el-button': ElButton, + 'el-tag': ElTag }; diff --git a/src/config-center/svg-file/stateless/alternator/index.ts b/src/config-center/svg-file/stateless/alternator/index.ts index e9a92a1..1e52e93 100644 --- a/src/config-center/svg-file/stateless/alternator/index.ts +++ b/src/config-center/svg-file/stateless/alternator/index.ts @@ -13,7 +13,7 @@ export const alternator_svg_file: IConfigItem = { fill: { title: '填充色', type: EConfigItemPropsType.Color, - val: '#ff0000' + val: '#00ff00' } } }; diff --git a/src/config-center/types.ts b/src/config-center/types.ts index f73ae48..d3f4514 100644 --- a/src/config-center/types.ts +++ b/src/config-center/types.ts @@ -24,13 +24,14 @@ export interface IConfigItem { animations?: IConfigItemProps; tag?: any; state?: IConfigItemState; //通过一个属性去控制多个属性就是有状态组件 + tag_slot?: string; } export interface IConfigItemProps { [key: string]: { title: string; type: EConfigItemPropsType; val: any; - options?: { value: any; label: string }[]; + options?: any; disabled?: boolean; }; } @@ -53,7 +54,8 @@ export enum EDoneJsonType { File = 'File', StraightLine = 'StraightLine', ConnectionLine = 'ConnectionLine', - CustomSvg = 'CustomSvg' + CustomSvg = 'CustomSvg', + Vue = 'Vue' } interface IDoneJsonConfig { can_zoom: boolean; diff --git a/src/config-center/vue/element-ui/button/index.ts b/src/config-center/vue/element-ui/button/index.ts new file mode 100644 index 0000000..e6c2ee2 --- /dev/null +++ b/src/config-center/vue/element-ui/button/index.ts @@ -0,0 +1,48 @@ +import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types'; + +export const el_button_vue: IConfigItem = { + name: 'el-button', + tag: 'el-button', + title: '按钮', + type: EDoneJsonType.Vue, + config: { + can_zoom: true, + have_anchor: true, + actual_rect: true + }, + props: { + size: { + title: '尺寸', + type: EConfigItemPropsType.Select, + val: 'default', + options: [ + { label: '大', value: 'large' }, + { label: '默认', value: 'default' }, + { label: '小', value: 'small' } + ] + }, + type: { + title: '类型', + type: EConfigItemPropsType.Select, + val: 'primary', + options: [ + { label: '主要按钮', value: 'primary' }, + { label: '成功按钮', value: 'success' }, + { label: '警告按钮', value: 'warning' }, + { label: '危险按钮', value: 'danger' }, + { label: '信息按钮', value: 'info' } + ] + }, + plain: { + title: '朴素按钮', + type: EConfigItemPropsType.Switch, + val: false + }, + text: { + title: '文字按钮', + type: EConfigItemPropsType.Switch, + val: false + } + }, + tag_slot: '按钮' +}; diff --git a/src/config-center/vue/element-ui/index.ts b/src/config-center/vue/element-ui/index.ts new file mode 100644 index 0000000..e244c54 --- /dev/null +++ b/src/config-center/vue/element-ui/index.ts @@ -0,0 +1,9 @@ +import { IConfigComponentGroup } from '@/config-center/types'; +import { el_button_vue } from './button'; +import { el_tag_vue } from './tag'; + +export const element_ui_group: IConfigComponentGroup = { + groupType: 'element-ui', + title: 'element-ui', + list: [el_button_vue, el_tag_vue] +}; diff --git a/src/config-center/vue/element-ui/tag/index.ts b/src/config-center/vue/element-ui/tag/index.ts new file mode 100644 index 0000000..d7b268c --- /dev/null +++ b/src/config-center/vue/element-ui/tag/index.ts @@ -0,0 +1,37 @@ +import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types'; + +export const el_tag_vue: IConfigItem = { + name: 'el-tag', + tag: 'el-tag', + title: '标签', + type: EDoneJsonType.Vue, + config: { + can_zoom: true, + have_anchor: true, + actual_rect: true + }, + props: { + type: { + title: '类型', + type: EConfigItemPropsType.Select, + val: 'success', + options: [ + { label: '成功', value: 'success' }, + { label: '警告', value: 'warning' }, + { label: '危险', value: 'danger' }, + { label: '信息', value: 'info' } + ] + }, + closable: { + title: '可关闭', + type: EConfigItemPropsType.Switch, + val: true + }, + 'disable-transitions': { + title: '渐变', + type: EConfigItemPropsType.Switch, + val: false + } + }, + tag_slot: '标签' +}; diff --git a/src/config-center/vue/index.ts b/src/config-center/vue/index.ts new file mode 100644 index 0000000..3380e38 --- /dev/null +++ b/src/config-center/vue/index.ts @@ -0,0 +1,4 @@ +import { IConfigComponentGroup } from '../types'; +import { element_ui_group } from './element-ui'; + +export const vue_config_center: IConfigComponentGroup[] = Object.seal([element_ui_group]); diff --git a/src/utils/index.ts b/src/utils/index.ts index dd9df0d..ce6e87c 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,5 @@ import { ELineBindAnchors } from '@/config-center/system/types'; -import { IConfigItem } from '@/config-center/types'; +import { EDoneJsonType, IConfigItem } from '@/config-center/types'; import type { IDoneJson } from '@/store/global/types'; /** @@ -122,8 +122,29 @@ export const setSvgActualInfo = (done_json: IDoneJson) => { const queryBbox = document.querySelector(`#${done_json.id}`); // const rectBBox = document.querySelector(`#rect${done_json.id}`); if (queryBbox) { - const BBox = (queryBbox as SVGGraphicsElement).getBBox(); - const { x, y, width, height } = BBox; + let x = 0, + y = 0, + width = 0, + height = 0; + if (done_json.type !== EDoneJsonType.Vue) { + const BBox = (queryBbox as SVGGraphicsElement).getBBox(); + x = BBox.x; + y = BBox.y; + (width = BBox.width), (height = BBox.height); + } else { + (width = (queryBbox as HTMLElement).offsetWidth), + (height = (queryBbox as HTMLElement).offsetHeight); + x = 50 - width / 2; + y = 50 - height / 2; + const foreignObjectBox = document.querySelector(`#foreign-object${done_json.id}`); + if (foreignObjectBox) { + foreignObjectBox.setAttribute('x', x.toString()); + foreignObjectBox.setAttribute('y', y.toString()); + foreignObjectBox.setAttribute('width', width.toString()); + foreignObjectBox.setAttribute('height', height.toString()); + } + } + // rectBBox.setAttribute('x', x.toString()); // rectBBox.setAttribute('y', y.toString()); // rectBBox.setAttribute('width', width.toString());