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> <template>
{{svg_color}}
<component :is="svgtype" <component :is="svgtype"
:svg_color= svg_color></component> :svg_color= svg_color></component>
</template> </template>

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

@ -23,24 +23,9 @@
<a-form-item label="大小"> <a-form-item label="大小">
<a-input-number v-model:value="selectSvgInfo.height" :min="1" :max="3000"/> <a-input-number v-model:value="selectSvgInfo.height" :min="1" :max="3000"/>
</a-form-item> </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-form-item label="旋转">
<a-input-number v-model:value="selectSvgInfo.angle" :min="0" :max="360"/> <a-input-number v-model:value="selectSvgInfo.angle" :min="0" :max="360"/>
</a-form-item> </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-form-item>
<a-button type="primary" class="btn-sure"> <a-button type="primary" class="btn-sure">
确定 确定

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

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

Write Preview
Loading…
Cancel
Save