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

新增绘制组件

Browse Source
2.1
咬轮猫 4 years ago
parent c85ec3b037
commit f012fbfcac
8 changed files with 265 additions and 102 deletions
Show Stats Download Patch File Download Diff File

3
babel.config.js
Unescape Escape View File

@ -1,3 +1,6 @@
/*
* @Author: yaolunmao
*/
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'

38
public/InterfaceReturn.json
Unescape Escape View File

@ -1,22 +1,42 @@
[{
"type": "AlternatorSvg",
"title": "发电机",
"template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
"props": ["svg_color"],
"default_color":"#00FF00",
"template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
"props": ["prop_data"],
"default_attr":{
"color":"#FF0000"
},
"create_type":"draggable",
"priview_img":"/AlternatorSvg.png"
}, {
"type": "ArrowDownSvg",
"title": "箭头向下",
"template": "<polygon points=\"0,-8 5,0 10,-8\" :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
"props": ["svg_color"],
"default_color":"#00FF00",
"template": "<polygon points=\"0,-8 5,0 10,-8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
"props": ["prop_data"],
"default_attr":{
"color":"#FF0000"
},
"create_type":"draggable",
"priview_img":"/ArrowDownSvg.png"
}, {
"type": "ArrowUpSvg",
"title": "箭头向上",
"template": "<polygon points=\"0,8 5,0 10,8\" :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
"props": ["svg_color"],
"default_color":"#FF0000",
"template": "<polygon points=\"0,8 5,0 10,8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
"props": ["prop_data"],
"default_attr":{
"color":"#FF0000"
},
"create_type":"draggable",
"priview_img":"/ArrowUpSvg.png"
},
{
"type": "ConnLineSvg",
"title": "连接线",
"template": "<line x1=\"0\" y1=\"0\" :x2=\"(prop_data.mPoint.endX-prop_data.mPoint.startX)\" :y2=\"(prop_data.mPoint.endY-prop_data.mPoint.startY)\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
"props": ["prop_data"],
"default_attr":{
"color":"#FF0000"
},
"create_type":"click",
"priview_img":"/VerticalLineSvg.png"
}]

57
src/components/LeftToolBar.vue
Unescape Escape View File

@ -1,3 +1,4 @@
<template>
<div class="components-layout-left">
@ -5,25 +6,34 @@
<a-collapse v-model:activeKey="activeKey"
accordion>
<a-collapse-panel key="1"
header="基本形状">
header="拖动组件">
<ul class="svg-nav-list">
<li v-for="item in svgInfoData"
<li v-for="item in draggableComponentList"
:key="item">
<div class="title">{{item.title}}</div>
<img :title="item.title"
@mousedown="Mousedown(item.type,item.title,item.default_color)"
@mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
:src="item.priview_img"
draggable="true">
draggable="draggable">
</li>
</ul>
</a-collapse-panel>
<a-collapse-panel key="2"
header="拓扑图"
header="绘制组件"
:disabled="false">
<p>{{ text }}</p>
<ul class="svg-nav-list">
<li v-for="item in clickComponentList"
:key="item"
:class="$store.state.CurrentlySelectedToolBar.CreateType==item.create_type?'toolbar-selected':''">
<div class="title">{{item.title}}</div>
<img :title="item.title"
@mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
:src="item.priview_img">
</li>
</ul>
</a-collapse-panel>
<a-collapse-panel key="3"
header="物联网">
header="图表">
<p>{{ text }}</p>
</a-collapse-panel>
</a-collapse>
@ -35,17 +45,39 @@ export default {
data () {
return {
activeKey: ['1'],//当前激活的key
text: `这里是预留位置.`
text: `这里是预留位置.`,
draggableComponentList: [],//拖动组件
clickComponentList: [],//点击类型组件
};
},
watch: {
'svgInfoData': function (val) {
this.draggableComponentList = val.filter(m => {
return m.create_type == 'draggable'
});
this.clickComponentList = val.filter(m => {
return m.create_type == 'click'
});
},
},
methods: {
Mousedown (type, title, color) {
window.CurrentlySelectedToolBar = {
/**
* @description: 点击左侧工具栏触发函数
* @param {*} type
* @param {*} title
* @param {*} default_attr 属性默认值
* @param {*} create_type 组件创建方式
* @return {*}
*/
Mousedown (type, title, default_attr, create_type) {
let CurrentlySelectedToolBar = {
Type: type,//选中的工具栏svg类型
TypeName: title,//选中的工具栏svg类型名称
Title: title,//选中的工具栏svg标题
Color:color//选中的工具栏svg颜色
Color: default_attr.color,//选中的工具栏svg颜色
CreateType: create_type//选中工具栏的创建方式
};
this.$store.setCurrentlySelectedToolBarAction(CurrentlySelectedToolBar);
},
}
};
@ -128,4 +160,7 @@ export default {
}
}
}
.toolbar-selected {
outline: 1px solid #0cf;
}
</style>

10
src/components/SvgComponents.vue
Unescape Escape View File

@ -1,11 +1,14 @@
<!--
* @Author: yaolunmao
-->
<template>
<component :is="svgtype"
:svg_color= svg_color></component>
<component :is="component_prop.type"
:prop_data= component_prop></component>
</template>
<script>
let importComponents = {};
export default {
props: ['svgInfoData','svg_color','svgtype'],
props: ['svgInfoData','component_prop'],
data () {
return {
componentTag: ''
@ -17,7 +20,6 @@ export default {
},
created () {
this.svgInfoData.forEach(f => {
console.log(111);
let componentInfo = {
template: f.template,
props: f.props

5
src/main.js
Unescape Escape View File

@ -1,3 +1,6 @@
/*
* @Author: yaolunmao
*/
import { createApp } from 'vue/dist/vue.esm-bundler.js'
import Antd from 'ant-design-vue';
import App from './App.vue'
@ -6,8 +9,10 @@ import UCore from './util/UCore.js'
import './assets/css/index.css';
import router from './router';
import axios from 'axios';
import { store } from './store/store.js';
const app = createApp(App);
app.use(router);
app.config.globalProperties.$store = store;
app.config.globalProperties.$UCore = UCore;
app.config.globalProperties.$axios = axios;
app.use(Antd).mount('#app');

31
src/store/store.js
Unescape Escape View File

@ -0,0 +1,31 @@
/*
* @Author: yaolunmao
* 简单状态管理
*/
import {reactive } from 'vue';
export const store = {
state: reactive({
CurrentlySelectedToolBar : {
Type: '',//选中的工具栏svg类型
TypeName: '',//选中的工具栏svg类型名称
Title: '',//选中的工具栏svg标题
Color: '',//选中的工具栏svg颜色
CreateType: ''//选中工具栏的创建方式
}
}),
setCurrentlySelectedToolBarAction(newValue) {
this.state.CurrentlySelectedToolBar = newValue
},
clearCurrentlySelectedToolBarAction() {
this.state.CurrentlySelectedToolBar = {
Type: '',//选中的工具栏svg类型
TypeName: '',//选中的工具栏svg类型名称
Title: '',//选中的工具栏svg标题
Color: '',//选中的工具栏svg颜色
CreateType: ''//选中工具栏的创建方式
}
}
}

112
src/views/CircuitEdit.vue
Unescape Escape View File

@ -35,8 +35,13 @@
@click="testD">导出数据</a-button>
<a-button type="primary"
@click="testE">载入模板</a-button> -->
<a-button type="danger">当前为2.1版本</a-button>
<a-button type="primary"
@click="testH">预览</a-button>
@click="testH"
style="margin-left:20px">预览</a-button>
<a style="margin-left:20px">
<a-button type="primary"
style="margin-left:20px"
@ -48,6 +53,10 @@
href="https://svgv1.yaolunmao.top">
<a-button type="primary">1.0版本</a-button>
</a>
<a style="margin-left:20px"
href="https://svgv2.yaolunmao.top">
<a-button type="primary">2.0版本</a-button>
</a>
<a style="margin-left:20px"
href="https://svgedit.yaolunmao.top">
<a-button type="primary">在线绘图</a-button>
@ -105,8 +114,7 @@
@mousedown="MousedownSvg(item.id,index,item.svgPositionX,item.svgPositionY,$event)"
:title=item.title
:transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')' +'scale('+item.size+')'">
<SvgComponents :svg_color=item.svgColor
:svgtype=item.type
<SvgComponents :component_prop=item
:svgInfoData=svgInfoData></SvgComponents>
</g>
</svg>
@ -153,14 +161,15 @@ export default {
selectSvg: {
ID: '',//要移动的svg
Index: 0,
mouseStatus: 0, // 鼠标状态 1按下； 0弹起
mPositionX: 0,//选中svg时鼠标的x轴坐标
mPositionY: 0,//选中svg时鼠标的y轴坐标
pointX: 0,//选中svg时svg的x轴坐标
pointY: 0,//选中svg时svg的y轴坐标
}
,
mouseStatus: 0, // 鼠标状态 1按下； 0弹起
selectSvgInfo: '',
clickType: '',//鼠标点击行为
tableRowCount: 2,//表格默认行数
tableColCount: 2,//表格默认列数
tableDefaultData: []
@ -182,12 +191,14 @@ export default {
MouseMove (e) {
let _this = this;
if (this.selectSvg.mouseStatus == 0) {
if (this.clickType == 'draggable') {
if (this.mouseStatus == 0) {
return;
}
const { clientX, clientY } = e
let svgID = this.svgLists[this.selectSvg.Index].id;
// let svgID = this.svgLists[this.selectSvg.Index].id;
let svgID = this.selectSvg.ID;
//排除当前元素剩下的所有svg元素的列表
let anyPositionList = this.svgLists.filter(function (list) {
return list.id != svgID
@ -238,34 +249,86 @@ export default {
_this.guideX.style.display = 'none';
}
}, 1);
}
else if (this.clickType == 'click') {
if (this.mouseStatus == 0) {
return;
}
this.selectSvgInfo.mPoint.endX = e.offsetX;
this.selectSvgInfo.mPoint.endY = e.offsetY;
}
},
MousedownCanvas (e) {
//console.log('点击了画布');
console.log('当前鼠标位置',e.clientX,e.clientY)
if (this.clickType == 'draggable') {
return;
}
if (this.$store.state.CurrentlySelectedToolBar && this.$store.state.CurrentlySelectedToolBar.CreateType == 'click') {
//根据类型和鼠标位置创建组件
let svg_id = this.$UCore.GenUUid()
let svgItem = {
id: svg_id,
title: this.$store.state.CurrentlySelectedToolBar.Title,
type: this.$store.state.CurrentlySelectedToolBar.Type,
typeName: this.$store.state.CurrentlySelectedToolBar.TypeName,
svgColor: this.$store.state.CurrentlySelectedToolBar.Color,
svgPositionX: e.offsetX,
svgPositionY: e.offsetY,
mPoint: {
startX: e.offsetX,
startY: e.offsetY,
endX: e.offsetX,
endY: e.offsetY
},
size: 1,
angle: 0
//translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
};
this.svgLists.push(svgItem);
this.selectSvgInfo = svgItem;
this.mouseStatus = 1;
this.clickType = 'click';
}
},
MousedownSvg (id, index, pointX, pointY, e) {
window.CurrentlySelectedToolBar.Type = '';
window.CurrentlySelectedToolBar.Title = '';
this.$store.clearCurrentlySelectedToolBarAction();
//从数组里面根据index找到当前元素
this.selectSvg.ID = id;
this.selectSvg.Index = index;
this.selectSvg.mouseStatus = 1;
this.selectSvg.mPositionX = e.offsetX;
this.selectSvg.mPositionY = e.offsetY;
this.mouseStatus = 1;
this.selectSvg.mPositionX = e.clientX;
this.selectSvg.mPositionY = e.clientY;
this.selectSvg.pointX = pointX;
this.selectSvg.pointY = pointY;
this.selectSvgInfo = this.svgLists[index];
this.clickType = 'draggable';
},
MouseupCanvas () {
this.guideX.style.display = 'none';
this.guideY.style.display = 'none';
if (window.CurrentlySelectedToolBar.Title != '' || window.CurrentlySelectedToolBar.Type != '') {
if (this.mouseStatus == 0) {
return;
}
this.guideX.style.display = 'none';
this.guideY.style.display = 'none';
// if (this.$store.state.CurrentlySelectedToolBar.Type != '') {
// return;
// }
// this.selectSvg.ID = '';
this.selectSvg.mouseStatus = 0;
this.mouseStatus = 0;
// this.clickType = '';
if (this.clickType == 'draggable') {
this.clickType = '';
}
if (this.clickType == 'click') {
if (this.selectSvgInfo.mPoint.startX == this.selectSvgInfo.mPoint.endX && this.selectSvgInfo.mPoint.startY == this.selectSvgInfo.mPoint.endY) {
//根据当前id找到当前元素的index
let selectSvgIndex = this.svgLists.indexOf(this.svgLists.filter(f => f.id == this.selectSvgInfo.id)[0]);
this.svgLists.splice(selectSvgIndex, 1);
this.selectSvg = {};
this.selectSvgInfo = {};
}
}
// this.$store.state.CurrentlySelectedToolBar = {};
},
MouseWheel (e) {
//获取当前选中组件
@ -284,6 +347,7 @@ export default {
},
DblClick () {
this.selectSvgInfo = '';
this.$store.clearCurrentlySelectedToolBarAction();
},
testD () {
console.log(JSON.stringify(this.svgLists));
@ -344,16 +408,16 @@ export default {
}, false);
canvasdiv.addEventListener("drop", function (e) {
e.preventDefault();
if (window.CurrentlySelectedToolBar.Type == '') {
if (_this.$store.state.CurrentlySelectedToolBar.Type == '' || _this.$store.state.CurrentlySelectedToolBar.CreateType != 'draggable') {
return;
}
//根据类型和鼠标位置创建组件
let svgItem = {
id: _this.$UCore.GenUUid(),
title: window.CurrentlySelectedToolBar.Title,
type: window.CurrentlySelectedToolBar.Type,
typeName: window.CurrentlySelectedToolBar.TypeName,
svgColor: window.CurrentlySelectedToolBar.Color,
title: _this.$store.state.CurrentlySelectedToolBar.Title,
type: _this.$store.state.CurrentlySelectedToolBar.Type,
typeName: _this.$store.state.CurrentlySelectedToolBar.TypeName,
svgColor: _this.$store.state.CurrentlySelectedToolBar.Color,
svgPositionX: e.offsetX,
svgPositionY: e.offsetY,
size: 1,
@ -413,7 +477,7 @@ export default {
this.$axios.get('/InterfaceReturn.json')
.then(function (response) {
_this.svgInfoData = response.data;
console.log(response.data);
// console.log(response.data);
})
.catch(function (error) {
console.log(error);

3
src/vue.config.js
Unescape Escape View File

@ -0,0 +1,3 @@
module.exports = {
productionSourceMap: false,
}
Write Preview
Loading…
Cancel
Save