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"?> <?xml version="1.0" standalone="no"?>
<svg t="1658190759246" 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" p-id="2410" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> 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="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" p-id="2412"></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" p-id="2413"></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> </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" <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
xmlns="http://www.w3.org/2000/svg" p-id="1742" height="200">
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path
<rect width="150" height="300" x="437" y="362"/> 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> </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="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> 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> <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> <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> <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"> <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"?> <?xml version="1.0" standalone="no"?>
<svg t="1658198367300" 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" p-id="1547" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<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"></path>
<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"); } <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>
</style> <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>
</defs> <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.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.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.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 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>
<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>
</svg> </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 <use
v-else-if="item.type === EDoneJsonType.File" v-else-if="item.type === EDoneJsonType.File"
:xlink:href="`#svg-${item.name}`" :xlink:href="`#svg-${item.name}`"
v-bind="prosToVBind(item.props)" v-bind="prosToVBind(item)"
width="100" width="100"
height="100" height="100"
:id="item.id" :id="item.id"
@ -63,7 +63,7 @@
<component <component
v-else-if="item.type === EDoneJsonType.CustomSvg" v-else-if="item.type === EDoneJsonType.CustomSvg"
:is="item.tag" :is="item.tag"
v-bind="prosToVBind(item.props)" v-bind="prosToVBind(item)"
width="100" width="100"
height="100" height="100"
:id="item.id" :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"> <div class="flex component-item items-center ml-10px">
<el-icon :size="40" class="flex items-center"> <el-icon :size="40" class="flex items-center">
<svg-analysis <svg-analysis :name="svg_item.name" :props="prosToVBind(svg_item)"></svg-analysis>
:name="svg_item.name"
:props="handleIconProps(svg_item.props)"
></svg-analysis>
</el-icon> </el-icon>
<div>{{ svg_item.title }}</div> <div>{{ svg_item.title }}</div>
</div> </div>
@ -46,14 +43,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'; import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus';
import { import { IConfigComponentGroup, IConfigItem } from '@/config-center/types';
IConfigComponentGroup, import { useGlobalStore } from '@/store/global';
IConfigItem, import SvgAnalysis from '@/components/svg-analysis/index.vue';
IConfigItemProps import { EGlobalStoreIntention } from '@/store/global/types';
} from '../../../../config-center/types'; import { prosToVBind } from '@/utils';
import { useGlobalStore } from '../../../../store/global';
import SvgAnalysis from '../../../svg-analysis/index.vue';
import { EGlobalStoreIntention } from '../../../../store/global/types';
const globalStore = useGlobalStore(); const globalStore = useGlobalStore();
const select_lib = ref('svg文件'); const select_lib = ref('svg文件');
const config_center = ref<IConfigComponentGroup[]>(globalStore.config_center.svg文件); const config_center = ref<IConfigComponentGroup[]>(globalStore.config_center.svg文件);
@ -64,13 +58,7 @@
console.log(val, 71474); 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) => { const createBegin = (svg_item: IConfigItem) => {
globalStore.setCreateInfo(svg_item); 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-form-item label="y轴坐标" size="small">
<el-input-number v-model="globalStore.handle_svg_info.info.y"></el-input-number> <el-input-number v-model="globalStore.handle_svg_info.info.y"></el-input-number>
</el-form-item> </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 <dynamic-el-form-item
:obj-info="globalStore.handle_svg_info.info.props" :obj-info="globalStore.handle_svg_info.info.props"
></dynamic-el-form-item> ></dynamic-el-form-item>
@ -73,7 +80,8 @@
ElTabs, ElTabs,
ElTabPane, ElTabPane,
TabsPaneContext, TabsPaneContext,
ElInput ElInput,
ElSwitch
} from 'element-plus'; } from 'element-plus';
import { ref } from 'vue'; import { ref } from 'vue';
import { useConfigStore } from '@/store/config'; 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 = { export const circuit_breaker_svg_file: IConfigItem = {
name: 'circuit-breaker', name: 'circuit-breaker',
@ -9,21 +9,21 @@ export const circuit_breaker_svg_file: IConfigItem = {
have_anchor: true, have_anchor: true,
actual_rect: true actual_rect: true
}, },
props: { props: {},
fill: { state: {
OnOff: {
title: '开关', title: '开关',
type: EConfigItemPropsType.Select, default: false,
val: '#ff0000', props: {
options: [ fill: {
{ openVal: '#00ff00',
value: '#ff0000', closeVal: '#ff0000'
label: '关'
}, },
{ 'fill-opacity': {
value: '#00ff00', openVal: '0',
label: '开' closeVal: '1'
} }
] }
} }
} }
}; };

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

@ -23,6 +23,7 @@ export interface IConfigItem {
config: IDoneJsonConfig; config: IDoneJsonConfig;
animations?: IConfigItemProps; animations?: IConfigItemProps;
tag?: any; tag?: any;
state?: IConfigItemState; //通过一个属性去控制多个属性就是有状态组件
} }
export interface IConfigItemProps { export interface IConfigItemProps {
[key: string]: { [key: string]: {
@ -62,3 +63,10 @@ interface IDoneJsonConfig {
export interface IComponentImport { export interface IComponentImport {
[key: string]: any; [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 { 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'; 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 = {}; let temp = {};
for (const key in props) { if (item.state) {
temp = { ...temp, ...{ [key]: props[key].val } }; 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; return temp;
}; };

Write Preview
Loading…
Cancel
Save