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

feat: 有状态组件demo

Browse Source
Re-1.0
咬轮猫 3 years ago
parent d9fe506c43
commit cd4d6cd99d
11 changed files with 85 additions and 62 deletions
Show Stats Download Patch File Download Diff File

10
src/assets/svgs/alternator.svg
Unescape Escape View File

@ -1,8 +1,8 @@
<?xml version="1.0" standalone="no"?>
<svg t="1658190759246" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2410"
<svg 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">
<path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z" p-id="2411"></path>
<path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z" p-id="2412"></path>
<path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z" p-id="2413"></path>
<path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z"></path>
<path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z"></path>
<path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

14
src/assets/svgs/circuit-breaker.svg
Unescape Escape View File

@ -1,5 +1,11 @@
<svg t="1658207779084" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1742"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<rect width="150" height="300" x="437" y="362"/>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
height="200">
<path
d="M600.7,404.1v-16.7c0-13-5.5-25.9-16.4-33.3l-54.8-44.5c-5.5-5.6-9.1-13-9.1-20.4v-66.7c0-13-11-24.1-23.7-24.1
H260.9c-12.8,0-23.7,11.1-23.7,24.1v607.5c0,13,11,24.1,23.7,24.1h235.7c12.8,0,23.7-11.1,23.7-24.1v-35.2c0-14.8,11-25.9,25.6-25.9
h12.8c23.7,0,43.8-20.4,43.8-44.5V656c62.1-7.4,111.4-61.1,111.4-125.9c0-29.6-9.1-57.4-27.4-77.8
C675.4,430,626.2,407.8,600.7,404.1z M576.9,726.4h-1.8c0,9.3-7.3,18.5-18.3,18.5H544c-27.4,0-51.2,24.1-51.2,51.9v33.3H262.7V378.2
h124.2v231.5c0,7.4,5.5,13,12.8,13s12.8-5.6,12.8-13V365.2c0-7.4-5.5-13-12.8-13h-137V224.4h232v64.8c0,16.7,7.3,31.5,20.1,40.7
l54.8,44.5c3.7,3.7,7.3,9.3,7.3,13V726.4z M600.7,630.1V430c49.3,5.6,85.9,48.2,85.9,100C686.5,581.9,648.2,624.5,600.7,630.1z" fill-opacity="1"/>
<polygon points="854.5,400.6 693.6,461.2 703,490.5 863.9,430"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 257 B

After

Width:  |  Height:  |  Size: 970 B

2
src/assets/svgs/custom-svg-text.svg
Unescape Escape View File

@ -1,4 +1,4 @@
<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
<svg 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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 258 B

After

Width:  |  Height:  |  Size: 244 B

2
src/assets/svgs/reservoir.svg
Unescape Escape View File

@ -1,4 +1,4 @@
<svg t="1673619783393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5654" width="200" height="200">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="0" y="155" width="1000" height="600" fill="#000000" stroke="#FFFFFF" stroke-width="4"></rect>
<line x1="80" y1="150" x2="920" y2="150" stroke="#000000" stroke-width="90"></line>
<rect transform="rotate(180,500,360)" x="20" y="0" width="960" height="400">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 518 B

After

Width:  |  Height:  |  Size: 477 B

20
src/assets/svgs/traction-transformer.svg
Unescape Escape View File

@ -1,15 +1,11 @@
<?xml version="1.0" standalone="no"?>
<svg t="1658198367300" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1547"
<svg 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">
<defs>
<style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style>
</defs>
<path d="M500.181333 308.757333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z" p-id="1548"></path>
<path d="M500.181333 478.741333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z" p-id="1549"></path>
<path d="M500.266667 234.666667a9.557333 9.557333 0 0 1 9.557333 9.557333v54.869333a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.848A9.557333 9.557333 0 0 1 500.266667 234.666667z" p-id="1550"></path>
<path d="M500.266667 715.349333a9.557333 9.557333 0 0 1 9.557333 9.557334v54.890666a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.869333a9.557333 9.557333 0 0 1 9.557334-9.578667z" p-id="1551"></path>
<path d="M500.266667 446.357333a10.666667 10.666667 0 0 1-10.218667-6.186666l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186667 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186667l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z" p-id="1552"></path>
<path d="M500.266667 681.024a10.666667 10.666667 0 0 1-10.218667-6.186667l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186666 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186666l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z" p-id="1553"></path>
<path d="M500.181333 308.757333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z"></path>
<path d="M500.181333 478.741333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z"></path>
<path d="M500.266667 234.666667a9.557333 9.557333 0 0 1 9.557333 9.557333v54.869333a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.848A9.557333 9.557333 0 0 1 500.266667 234.666667z"></path>
<path d="M500.266667 715.349333a9.557333 9.557333 0 0 1 9.557333 9.557334v54.890666a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.869333a9.557333 9.557333 0 0 1 9.557334-9.578667z"></path>
<path d="M500.266667 446.357333a10.666667 10.666667 0 0 1-10.218667-6.186666l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186667 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186667l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z"></path>
<path d="M500.266667 681.024a10.666667 10.666667 0 0 1-10.218667-6.186667l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186666 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186666l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

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

@ -49,7 +49,7 @@
<use
v-else-if="item.type === EDoneJsonType.File"
:xlink:href="`#svg-${item.name}`"
v-bind="prosToVBind(item.props)"
v-bind="prosToVBind(item)"
width="100"
height="100"
:id="item.id"
@ -63,7 +63,7 @@
<component
v-else-if="item.type === EDoneJsonType.CustomSvg"
:is="item.tag"
v-bind="prosToVBind(item.props)"
v-bind="prosToVBind(item)"
width="100"
height="100"
:id="item.id"

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

@ -29,10 +29,7 @@
>
<div class="flex component-item items-center ml-10px">
<el-icon :size="40" class="flex items-center">
<svg-analysis
:name="svg_item.name"
:props="handleIconProps(svg_item.props)"
></svg-analysis>
<svg-analysis :name="svg_item.name" :props="prosToVBind(svg_item)"></svg-analysis>
</el-icon>
<div>{{ svg_item.title }}</div>
</div>
@ -46,14 +43,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus';
import {
IConfigComponentGroup,
IConfigItem,
IConfigItemProps
} from '../../../../config-center/types';
import { useGlobalStore } from '../../../../store/global';
import SvgAnalysis from '../../../svg-analysis/index.vue';
import { EGlobalStoreIntention } from '../../../../store/global/types';
import { IConfigComponentGroup, IConfigItem } from '@/config-center/types';
import { useGlobalStore } from '@/store/global';
import SvgAnalysis from '@/components/svg-analysis/index.vue';
import { EGlobalStoreIntention } from '@/store/global/types';
import { prosToVBind } from '@/utils';
const globalStore = useGlobalStore();
const select_lib = ref('svg文件');
const config_center = ref<IConfigComponentGroup[]>(globalStore.config_center.svg文件);
@ -64,13 +58,7 @@
console.log(val, 71474);
};
const handleIconProps = (svg_item_props: IConfigItemProps) => {
let temp = {};
for (const key in svg_item_props) {
temp = { ...temp, ...{ [key]: svg_item_props[key].val } };
}
return temp;
};
const createBegin = (svg_item: IConfigItem) => {
globalStore.setCreateInfo(svg_item);
};

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

@ -42,6 +42,13 @@
<el-form-item label="y轴坐标" size="small">
<el-input-number v-model="globalStore.handle_svg_info.info.y"></el-input-number>
</el-form-item>
<el-form-item
:label="globalStore.handle_svg_info.info.state?.OnOff.title"
size="small"
v-if="globalStore.handle_svg_info.info.state?.OnOff"
>
<el-switch v-model="globalStore.handle_svg_info.info.state.OnOff.default"></el-switch>
</el-form-item>
<dynamic-el-form-item
:obj-info="globalStore.handle_svg_info.info.props"
></dynamic-el-form-item>
@ -73,7 +80,8 @@
ElTabs,
ElTabPane,
TabsPaneContext,
ElInput
ElInput,
ElSwitch
} from 'element-plus';
import { ref } from 'vue';
import { useConfigStore } from '@/store/config';

26
src/config-center/svg-file/stateful/circuit-breaker/index.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types';
import { EDoneJsonType, IConfigItem } from '@/config-center/types';
export const circuit_breaker_svg_file: IConfigItem = {
name: 'circuit-breaker',
@ -9,21 +9,21 @@ export const circuit_breaker_svg_file: IConfigItem = {
have_anchor: true,
actual_rect: true
},
props: {
fill: {
props: {},
state: {
OnOff: {
title: '开关',
type: EConfigItemPropsType.Select,
val: '#ff0000',
options: [
{
value: '#ff0000',
label: '关'
default: false,
props: {
fill: {
openVal: '#00ff00',
closeVal: '#ff0000'
},
{
value: '#00ff00',
label: '开'
'fill-opacity': {
openVal: '0',
closeVal: '1'
}
]
}
}
}
};

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

@ -23,6 +23,7 @@ export interface IConfigItem {
config: IDoneJsonConfig;
animations?: IConfigItemProps;
tag?: any;
state?: IConfigItemState; //通过一个属性去控制多个属性就是有状态组件
}
export interface IConfigItemProps {
[key: string]: {
@ -62,3 +63,10 @@ interface IDoneJsonConfig {
export interface IComponentImport {
[key: string]: any;
}
export interface IConfigItemState {
OnOff?: {
title: string;
default: false;
props: { [key: string]: { openVal: any; closeVal: any } };
};
}

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

@ -1,5 +1,5 @@
import { ELineBindAnchors } from '@/config-center/system/types';
import type { IConfigItemProps } from '@/config-center/types';
import { IConfigItem } from '@/config-center/types';
import type { IDoneJson } from '@/store/global/types';
/**
@ -231,10 +231,27 @@ export const setAfterRotationPointCoordinate = (item: IDoneJson) => {
)
};
};
export const prosToVBind = (props: IConfigItemProps) => {
export const prosToVBind = (item: IConfigItem) => {
let temp = {};
for (const key in props) {
temp = { ...temp, ...{ [key]: props[key].val } };
if (item.state) {
for (const key in item.state) {
if (key === 'OnOff') {
for (const on_off_key in item.state[key]?.props) {
temp = {
...temp,
...{
[on_off_key]: item.state[key]?.default
? item.state[key]?.props[on_off_key].openVal
: item.state[key]?.props[on_off_key].closeVal
}
};
}
}
}
}
for (const key in item.props) {
temp = { ...temp, ...{ [key]: item.props[key].val } };
}
return temp;
};

Write Preview
Loading…
Cancel
Save