danny
/
vue-webtopo-svgeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增了对vue组件的支持

Browse Source
Re-1.0
咬轮猫 3 years ago
parent 482b5e8fc5
commit 3e2265877d
13 changed files with 190 additions and 11 deletions
Show Stats Download Patch File Download Diff File

10
src/assets/svgs/el-button.svg
Unescape Escape View File

@ -0,0 +1,10 @@
<svg viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3587" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<path
d="M883.3 745H142.7c-41.9 0-76-34.1-76-76V351.6c0-41.9 34.1-76 76-76h740.6c41.9 0 76 34.1 76 76V669c0 41.9-34.1 76-76 76zM142.7 321.8c-16.4 0-29.8 13.3-29.8 29.8V669c0 16.4 13.3 29.8 29.8 29.8h740.6c16.4 0 29.8-13.3 29.8-29.8V351.6c0-16.4-13.3-29.8-29.8-29.8H142.7z"
fill="#7D7D7D"></path>
<path
d="M191.3 576c-10.1 0-13.9 0.1-19.6 0.4 0.8-5.7 1.1-10.2 1.1-19.4v-72.4c0-7-0.3-12.7-1.1-19 6.7 0.4 8.6 0.4 19.4 0.4h34.7c21.4 0 34 10.3 34 27.8 0 8.1-2.6 14.4-7.7 18.9-2.9 2.5-5.3 3.8-10.7 5.8 6.5 1.5 9.9 3 13.8 6.4 5.7 5 8.6 12.2 8.6 20.9 0 19-13.5 30.3-36.5 30.3h-36z m30.6-67.6c7 0 11.4-4.1 11.4-10.6s-4.1-10.2-11.6-10.2h-23v20.8h23.2z m-23.2 45.8H223c8.3 0 13.4-4.6 13.4-12.4 0-7.7-5-12.2-13.5-12.2h-24.2v24.6z m186.2-88.3c-0.8 5.7-1.1 10.4-1.1 20v45.5c0 30.2-18.1 47.2-50 47.2-16.4 0-29.8-4.6-37.7-13-7.7-8.2-11.6-19.7-11.6-34.5v-45.2c0-9.1-0.3-14.9-1.1-20H312c-0.8 4.9-1.1 10.2-1.1 20v45.5c0 16.7 7.5 24.6 23 24.6 15.9 0 23.4-7.9 23.4-24.6v-45.5c0-9.9-0.3-14-1.1-20h28.7z m79.2 90.1c0 7.9 0.3 13.8 1.1 20H436c0.8-6.2 1.1-11.6 1.1-20v-66.7h-15.6c-8.3 0-10.6 0.1-20 0.9V465c4.4 0.5 11.6 0.9 19.7 0.9H479c9.3 0 14.5-0.3 20.6-0.9v25.3c-6-0.7-11.1-0.9-20.6-0.9h-14.9V556z m108.8 0c0 7.9 0.3 13.8 1.1 20h-29.2c0.8-6.2 1.1-11.6 1.1-20v-66.7h-15.6c-8.3 0-10.6 0.1-20 0.9V465c4.4 0.5 11.6 0.9 19.7 0.9h57.9c9.3 0 14.5-0.3 20.6-0.9v25.3c-6-0.7-11.1-0.9-20.6-0.9H573V556z m155.8-35.6c0 34.9-21.3 58.1-53.4 58.1-32.4 0-53.3-22.6-53.3-57.7 0-34.9 20.9-57.3 53.4-57.3 32.6 0 53.3 22.3 53.3 56.9z m-27.5 0.3c0-21.4-9.8-34.4-25.8-34.4-16.1 0-26.1 13.1-26.1 34.4 0 21.6 9.9 34.9 26.1 34.9 16 0 25.8-13.2 25.8-34.9z m110.6-0.7c3.8 5.7 6.3 9.9 9.5 15.7-0.5-6.1-0.8-12.2-0.8-19.6V486c0-8.7-0.3-14-1.1-20.1h28.2c-0.8 6-1.1 11.5-1.1 20.1v70.2c0 8.1 0.4 14.2 1.1 19.7h-29c-2.4-5-5.4-9.9-9.9-16.8l-24.5-36.9c-3.6-5.3-5.8-9.3-9.5-16.3 0.7 6 0.9 13.2 0.9 19.7v29.6c0 9.1 0.3 14.9 1.1 20.6h-28.2c0.8-5.2 1.1-11 1.1-20.8v-69.6c0-7.7-0.3-13.6-1.1-19.7h28.7c1.3 3.6 4.2 8.9 9.4 16.5l25.2 37.8z"
fill="#7D7D7D"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

13
src/assets/svgs/el-tag.svg
Unescape Escape View File

@ -0,0 +1,13 @@
<svg viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4650" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<path
d="M767.1 292.6c-0.2-19-15.6-34.4-34.6-34.6l-202.2-2.5c-9.5-0.1-18.6 3.6-25.2 10.3l-35.4 35.4c48.4 138.5 72.4 282.3 42.1 433.8-1.7 10.4-3.9 21.1-6.4 31.9 6-1.5 11.7-4.4 16.3-9.1l237.6-237.6c6.7-6.7 10.4-15.8 10.3-25.2l-2.5-202.4zM664.3 429c-17.1 17.1-44.9 17.1-62 0s-17.1-44.9 0-62 44.9-17.1 62 0 17.2 44.8 0 62z"
fill="#FFDE55"></path>
<path
d="M779.6 292.5c-0.2-12.5-5.1-24.2-13.9-33.1-8.8-8.8-20.6-13.8-33.1-13.9L530.4 243c-12.7-0.1-25.2 4.9-34.2 13.9L258.6 494.6c-9 9-13.9 20.9-13.9 33.6 0 12.7 4.9 24.7 13.9 33.6l204.7 204.7c9 9 20.9 13.9 33.6 13.9 12.7 0 24.7-4.9 33.6-13.9l237.6-237.6c9-9 14.1-21.5 13.9-34.2l-2.4-202.2z m-29.1 218.7L512.9 748.8c-4.3 4.3-9.9 6.6-16 6.6-6 0-11.7-2.3-16-6.6L276.3 544.2c-4.3-4.3-6.6-9.9-6.6-16s2.3-11.7 6.6-16l237.6-237.6c4.2-4.2 10-6.6 16-6.6h0.3l202.2 2.5c12.4 0.2 22.2 9.9 22.3 22.3l2.5 202.2c0 6-2.4 11.9-6.7 16.2z"
fill=""></path>
<path
d="M593.5 358.1c-22 22-22 57.7 0 79.7 10.6 10.6 24.8 16.5 39.8 16.5s29.2-5.9 39.8-16.5c22-22 22-57.7 0-79.7-21.9-22-57.6-22-79.6 0z m62 62c-5.9 5.9-13.8 9.2-22.2 9.2s-16.2-3.3-22.2-9.2c-12.2-12.2-12.2-32.1 0-44.3 6.1-6.1 14.1-9.2 22.2-9.2 8 0 16.1 3.1 22.2 9.2 12.2 12.2 12.2 32.1 0 44.3z"
fill=""></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

20
src/components/webtopo-svgedit/components/center-panel/index.vue
Unescape Escape View File

@ -74,6 +74,26 @@
item.actual_bound.width / 2
)},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
></component>
<foreignObject
v-else-if="item.type === EDoneJsonType.Vue"
width="100"
height="100"
:id="`foreign-object${item.id}`"
>
<component
:is="item.tag"
v-bind="prosToVBind(item)"
: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)})`"
>{{ item.tag_slot }}</component
>
</foreignObject>
<line
v-else-if="item.type === EDoneJsonType.StraightLine"
:id="item.id"

8
src/components/webtopo-svgedit/components/left-panel/index.vue
Unescape Escape View File

@ -51,7 +51,13 @@
const globalStore = useGlobalStore();
const select_lib = ref('svg文件');
const config_center = ref<IConfigComponentGroup[]>(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;

7
src/components/webtopo-svgedit/components/right-panel/index.vue
Unescape Escape View File

@ -49,6 +49,13 @@
>
<el-switch v-model="globalStore.handle_svg_info.info.state.OnOff.default"></el-switch>
</el-form-item>
<el-form-item
label="文字插槽"
size="small"
v-if="globalStore.handle_svg_info.info.tag_slot"
>
<el-input v-model="globalStore.handle_svg_info.info.tag_slot" />
</el-form-item>
<dynamic-el-form-item
:obj-info="globalStore.handle_svg_info.info.props"
></dynamic-el-form-item>

10
src/config-center/index.ts
Unescape Escape View File

@ -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
};

2
src/config-center/svg-file/stateless/alternator/index.ts
Unescape Escape View File

@ -13,7 +13,7 @@ export const alternator_svg_file: IConfigItem = {
fill: {
title: '填充色',
type: EConfigItemPropsType.Color,
val: '#ff0000'
val: '#00ff00'
}
}
};

6
src/config-center/types.ts
Unescape Escape View File

@ -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;

48
src/config-center/vue/element-ui/button/index.ts
Unescape Escape View File

@ -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: '按钮'
};

9
src/config-center/vue/element-ui/index.ts
Unescape Escape View File

@ -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]
};

37
src/config-center/vue/element-ui/tag/index.ts
Unescape Escape View File

@ -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: '标签'
};

4
src/config-center/vue/index.ts
Unescape Escape View File

@ -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]);

27
src/utils/index.ts
Unescape Escape View File

@ -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());

Write Preview
Loading…
Cancel
Save