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

重构部分变量

Browse Source
2.0
咬轮猫 4 years ago
parent 022bf1dd80
commit b6e730772e
3 changed files with 527 additions and 513 deletions
Show Stats Download Patch File Download Diff File

1
src/components/DynamicTest.vue
Unescape Escape View File

@ -1,5 +1,4 @@
<template>
{{svg_color}}
<component :is="svgtype"
:svg_color= svg_color></component>
</template>

15
src/components/RightToolBar.vue
Unescape Escape View File

@ -23,24 +23,9 @@
<a-form-item label="大小">
<a-input-number v-model:value="selectSvgInfo.height" :min="1" :max="3000"/>
</a-form-item>
<a-form-item label="宽度">
<a-input-number v-model:value="selectSvgInfo.width" :min="1" :max="3000"/>
</a-form-item>
<a-form-item label="旋转">
<a-input-number v-model:value="selectSvgInfo.angle" :min="0" :max="360"/>
</a-form-item>
<a-form-item label="文本">
<a-input v-model:value="selectSvgInfo.svgText" placeholder="请输入文本" />
</a-form-item>
<a-form-item label="字体大小">
<a-input-number v-model:value="selectSvgInfo.fontSize" :min="1" :max="500"/>
</a-form-item>
<a-form-item label="表格行数">
<a-input-number v-model:value="selectSvgInfo.tableRowCount" :min="1" :max="500"/>
</a-form-item>
<a-form-item label="表格列数">
<a-input-number v-model:value="selectSvgInfo.tableColCount" :min="1" :max="500"/>
</a-form-item>
<a-form-item>
<a-button type="primary" class="btn-sure">
确定

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

@ -5,37 +5,69 @@
<a-layout>
<!-- {{tableDefaultData}} -->
<a-layout-header>
<a-button type="primary" @click="testD">导出数据</a-button>
<a-button type="primary" @click="testE">载入模板</a-button>
<a-button type="primary" @click="testH">预览</a-button>
<a-button type="primary"
@click="testD">导出数据</a-button>
<a-button type="primary"
@click="testE">载入模板</a-button>
<a-button type="primary"
@click="testH">预览</a-button>
</a-layout-header>
<span v-if="shrink" @click="fullScreen" class="icon-shrink svgfont">&#xe648;</span>
<span v-if="!shrink" @click="exitFullscreen" class="icon-shrink svgfont">&#xe62b;</span>
<span v-if="shrink"
@click="fullScreen"
class="icon-shrink svgfont">&#xe648;</span>
<span v-if="!shrink"
@click="exitFullscreen"
class="icon-shrink svgfont">&#xe62b;</span>
<a-layout class="pageMain">
<a-layout-sider class="leftNav">
<LeftToolBar :svgInfoData=svgInfoData></LeftToolBar>
</a-layout-sider>
<a-layout-content class="centerContain" :class="{ fixed: !shrink }">
<div class="canvas-content" id="canvas" @mousemove="MouseMove" @mousedown="MousedownCanvas" @mouseup="MouseupCanvas" @dblclick="DblClick" @mousewheel="MouseWheel">
<a-layout-content class="centerContain"
:class="{ fixed: !shrink }">
<div class="canvas-content"
id="canvas"
@mousemove="MouseMove"
@mousedown="MousedownCanvas"
@mouseup="MouseupCanvas"
@dblclick="DblClick"
@mousewheel="MouseWheel">
<!--拖动辅助线-->
<div id="guide-x"></div>
<div id="guide-y"></div>
<!-- 画布 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#000000" width="100%" height="100%">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="background-color:#000000"
width="100%"
height="100%">
<defs />
<filter x="0" y="0" width="1" height="1" id="solid">
<filter x="0"
y="0"
width="1"
height="1"
id="solid">
<feFlood flood-color="rgb(255,255,255)" />
<feComposite in="SourceGraphic" />
</filter>
<g style="cursor:pointer" v-for="(item,index) in svgLists" :key="item" :id=item.id @mousedown="MousedownSvg(item.id,index)" :title=item.title :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'" >
<DynamicTest :svg_color= item.svgColor :svgtype= item.type :svgInfoData= svgInfoData></DynamicTest>
<g style="cursor:pointer"
v-for="(item,index) in svgLists"
:key="item"
:id=item.id
@mousedown="MousedownSvg(item.id,index)"
:title=item.title
:transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')' +'scale('+item.height+')'">
<DynamicTest :svg_color=item.svgColor
:svgtype=item.type
:svgInfoData=svgInfoData></DynamicTest>
<!-- <SvgComponents :color= item.svgColor :width= item.width :type= item.type :tableData= item.tableData :fontSize= item.fontSize :svgText= item.svgText :editable= editable></SvgComponents> -->
</g>
</svg>
</div>
</a-layout-content>
<a-layout-sider class="rightNav">
<RightToolBar :svgInfo = selectSvgInfo @setTableAttr="setTableAttr"></RightToolBar>
<RightToolBar :svgInfo=selectSvgInfo
@setTableAttr="setTableAttr"></RightToolBar>
</a-layout-sider>
</a-layout>
</a-layout>
@ -54,8 +86,7 @@ export default {
return {
svgInfoData: [],//接口获取到的组件数据
shrink: true,//收缩状态 true收缩 false展开
svgLists:[
],
svgLists: [],//svg列表
//鼠标位置
mousePosition: {
positionX: '',
@ -64,24 +95,26 @@ export default {
//辅助线元素
guideX: '',
guideY: '',
CurrentlySelectedToolBarType:'',//选中的工具栏svg类型
CurrentlySelectedToolBarTypeName:'',//选中的工具栏svg类型名称
CurrentlySelectedToolBarTitle:'',//选中的工具栏svg标题
CurrentlySelectedToolBarColor:'',//选中的工具栏svg颜色
CurrentlySelectedToolBarHeight:'',//选中的工具栏svg高度
CurrentlySelectedToolBarFontSize:'',//选中的工具栏svg字体大小
CurrentlySelectedToolBarText:'',//选中的工具栏svg文字
CurrentlySelectedToolBarWidth:'',//选中的工具栏svg高度
CurrentlySelectedToolBarAngle:'',//选中的工具栏svg角度
moveSvgID:'',//要移动的svg
moveSvgIndex:0,
testvalue:0,
CurrentlySelectedToolBar: {
Type: '',//选中的工具栏svg类型
TypeName: '',//选中的工具栏svg类型名称
Title: '',//选中的工具栏svg标题
Color: '',//选中的工具栏svg颜色
Height: '',//选中的工具栏svg高度
FontSize: '',//选中的工具栏svg字体大小
Text: '',//选中的工具栏svg文字
Width: '',//选中的工具栏svg高度
Angle: '',//选中的工具栏svg角度
},
moveSvg: {
ID: '',//要移动的svg
Index: 0,
}
,
selectSvgInfo: '',
tableRowCount: 2,//表格默认行数
tableColCount: 2,//表格默认列数
tableDefaultData: [],
canvasZoom:70,//画布缩放百分比
userInfo:'',
editable: true
}
},
@ -138,7 +171,7 @@ export default {
if (e.offsetY == -1) {
return;
}
if(this.moveSvgID==''){
if (this.moveSvg.ID == '') {
return;
}
this.mousePosition.positionX = e.offsetX;
@ -149,7 +182,7 @@ export default {
if (this.mousePosition.positionY < 1) {
this.mousePosition.positionY = 10;
}
let svgID=this.svgLists[this.moveSvgIndex].id;
let svgID = this.svgLists[this.moveSvg.Index].id;
//排除当前元素剩下的所有svg元素的列表
let anyPositionList = this.svgLists.filter(function (list) {
return list.id != svgID
@ -158,8 +191,7 @@ export default {
let svgPositionX = this.mousePosition.positionX;
let svgPositionY = this.mousePosition.positionY;
let _this = this;
setTimeout(function()
{
setTimeout(function () {
//少于十个像素自动吸附
//从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
let exitsAdsorbX = anyPositionList.filter(function (list) {
@ -175,8 +207,8 @@ export default {
if (exitsAdsorbY.length > 0) {
svgPositionY = exitsAdsorbY[0].svgPositionY;
}
_this.svgLists[_this.moveSvgIndex].svgPositionX=svgPositionX;
_this.svgLists[_this.moveSvgIndex].svgPositionY=svgPositionY;
_this.svgLists[_this.moveSvg.Index].svgPositionX = svgPositionX;
_this.svgLists[_this.moveSvg.Index].svgPositionY = svgPositionY;
//从所有的x坐标列表中查当前坐标是否存在
let exitsNowX = anyPositionList.filter(function (list) {
return list.svgPositionX === svgPositionX
@ -208,11 +240,11 @@ export default {
MousedownSvg (id, index) {
global.CurrentlySelectedToolBarType = '';
global.CurrentlySelectedToolBarTitle = '';
this.CurrentlySelectedToolBarType='';
this.CurrentlySelectedToolBarTitle='';
this.CurrentlySelectedToolBar.Type = '';
this.CurrentlySelectedToolBar.Title = '';
//从数组里面根据index找到当前元素
this.moveSvgID=id;
this.moveSvgIndex=index;
this.moveSvg.ID = id;
this.moveSvg.Index = index;
this.selectSvgInfo = this.svgLists[index];
//获取所有g标签 将当前标签追加选中样式
let gAnyList = document.querySelectorAll('g');
@ -224,10 +256,10 @@ export default {
MouseupCanvas () {
this.guideX.style.display = 'none';
this.guideY.style.display = 'none';
if(this.CurrentlySelectedToolBarTitle!=''||this.CurrentlySelectedToolBarType!=''){
if (this.CurrentlySelectedToolBar.Title != '' || this.CurrentlySelectedToolBar.Type != '') {
return;
}
this.moveSvgID='';
this.moveSvg.ID = '';
},
MouseWheel (e) {
//获取当前选中组件
@ -308,23 +340,23 @@ export default {
_this.guideY = document.querySelector('#guide-y');//辅助线y轴
canvasdiv.addEventListener("dragover", function (e) {
e.preventDefault();
_this.CurrentlySelectedToolBarType=global.CurrentlySelectedToolBarType;
_this.CurrentlySelectedToolBarTitle=global.CurrentlySelectedToolBarTitle;
_this.CurrentlySelectedToolBarTypeName=global.CurrentlySelectedToolBarTypeName;
_this.CurrentlySelectedToolBarColor=global.CurrentlySelectedToolBarColor;
_this.CurrentlySelectedToolBarHeight=global.CurrentlySelectedToolBarHeight;
_this.CurrentlySelectedToolBarFontSize=global.CurrentlySelectedToolBarFontSize;
_this.CurrentlySelectedToolBarText=global.CurrentlySelectedToolBarText;
_this.CurrentlySelectedToolBarWidth=global.CurrentlySelectedToolBarWidth;
_this.CurrentlySelectedToolBarAngle=global.CurrentlySelectedToolBarAngle;
_this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType;
_this.CurrentlySelectedToolBar.Title = global.CurrentlySelectedToolBarTitle;
_this.CurrentlySelectedToolBar.TypeName = global.CurrentlySelectedToolBarTypeName;
_this.CurrentlySelectedToolBar.Color = global.CurrentlySelectedToolBarColor;
_this.CurrentlySelectedToolBar.Height = global.CurrentlySelectedToolBarHeight;
_this.CurrentlySelectedToolBar.FontSize = global.CurrentlySelectedToolBarFontSize;
_this.CurrentlySelectedToolBar.Text = global.CurrentlySelectedToolBarText;
_this.CurrentlySelectedToolBar.Width = global.CurrentlySelectedToolBarWidth;
_this.CurrentlySelectedToolBar.Angle = global.CurrentlySelectedToolBarAngle;
}, false);
canvasdiv.addEventListener("drop", function (e) {
e.preventDefault();
if(_this.CurrentlySelectedToolBarType==''){
if (_this.CurrentlySelectedToolBar.Type == '') {
return;
}
let tableData = [];
if(_this.CurrentlySelectedToolBarType=='TableSvg'){
if (_this.CurrentlySelectedToolBar.Type == 'TableSvg') {
for (let r = 0; r < _this.tableRowCount; r++) {
let tableColDataList = [];
for (let c = 0; c < _this.tableColCount; c++) {
@ -344,25 +376,24 @@ export default {
let svgItem = {
id: _this.$UCore.GenUUid(),
sort: 0,
title:_this.CurrentlySelectedToolBarTitle,
type:_this.CurrentlySelectedToolBarType,
typeName:_this.CurrentlySelectedToolBarTypeName,
svgColor:_this.CurrentlySelectedToolBarColor,
title: _this.CurrentlySelectedToolBar.Title,
type: _this.CurrentlySelectedToolBar.Type,
typeName: _this.CurrentlySelectedToolBar.TypeName,
svgColor: _this.CurrentlySelectedToolBar.Color,
svgPositionX: e.offsetX,
svgPositionY: e.offsetY,
height:_this.CurrentlySelectedToolBarHeight,
width:_this.CurrentlySelectedToolBarWidth,
fontSize:_this.CurrentlySelectedToolBarFontSize,
svgText:_this.CurrentlySelectedToolBarText,
height: 1,
width: _this.CurrentlySelectedToolBar.Width,
fontSize: _this.CurrentlySelectedToolBar.FontSize,
svgText: _this.CurrentlySelectedToolBar.Text,
tableRowCount: _this.tableRowCount,
tableColCount: _this.tableColCount,
tableData: tableData,
angle:_this.CurrentlySelectedToolBarAngle
angle: _this.CurrentlySelectedToolBar.Angle
//translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
};
_this.svgLists.push(svgItem);
setTimeout(function()
{
setTimeout(function () {
//获取所有g标签 将当前标签追加选中样式
let gAnyList = document.querySelectorAll('g');
gAnyList.forEach(g => {
@ -408,8 +439,7 @@ export default {
copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
_this.svgLists.push(copySvgInfo);
_this.selectSvgInfo = copySvgInfo;
setTimeout(function()
{
setTimeout(function () {
//获取所有g标签 将当前标签追加选中样式
let gAnyList = document.querySelectorAll('g');
gAnyList.forEach(g => {
@ -507,7 +537,6 @@ export default {
bottom: 0;
}
.canvas-content {
width: 1920px;
height: 1080px;
@ -550,13 +579,6 @@ export default {
z-index: 1111;
}
#components-layout .ant-layout-sider {
background: #fff;
color: rgb(167, 164, 164);
@ -568,7 +590,6 @@ export default {
width: 100%;
left: 0px;
top: 500px;
}
#guide-y {
@ -578,8 +599,6 @@ export default {
height: 100%;
left: 100px;
top: 0px;
}
#canvas {
-moz-user-select: none;
@ -598,10 +617,22 @@ export default {
transform-origin: left top;
overflow: auto;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-image: linear-gradient(
45deg,
#ccc 25%,
transparent 25%,
transparent 75%,
#ccc 75%,
#ccc
),
linear-gradient(
45deg,
#ccc 25%,
transparent 25%,
transparent 75%,
#ccc 75%,
#ccc
);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
@ -652,5 +683,4 @@ export default {
.topo-layer-view-selected {
outline: 1px solid #0cf;
}
</style>

Write Preview
Loading…
Cancel
Save