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">
确定 确定

544
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"
<defs/> xmlns="http://www.w3.org/2000/svg"
<filter x="0" y="0" width="1" height="1" id="solid"> xmlns:xlink="http://www.w3.org/1999/xlink"
<feFlood flood-color="rgb(255,255,255)"/> style="background-color:#000000"
<feComposite in="SourceGraphic"/> width="100%"
height="100%">
<defs />
<filter x="0"
y="0"
width="1"
height="1"
id="solid">
<feFlood flood-color="rgb(255,255,255)" />
<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>
@ -49,45 +81,46 @@ import RightToolBar from '@/components/RightToolBar.vue';
import global from '@/global/global.js';//全局变量 import global from '@/global/global.js';//全局变量
import DynamicTest from '@/components/DynamicTest.vue'; import DynamicTest from '@/components/DynamicTest.vue';
export default { export default {
components: { LeftToolBar,RightToolBar,DynamicTest}, components: { LeftToolBar, RightToolBar, DynamicTest },
data(){ data () {
return{ return {
svgInfoData:[],//接口获取到的组件数据 svgInfoData: [],//接口获取到的组件数据
shrink:true,//收缩状态 true收缩 false展开 shrink: true,//收缩状态 true收缩 false展开
svgLists:[ svgLists: [],//svg列表
],
//鼠标位置 //鼠标位置
mousePosition:{ mousePosition: {
positionX:'', positionX: '',
positiony:'' positiony: ''
}, },
//辅助线元素 //辅助线元素
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: {
selectSvgInfo:'', ID: '',//要移动的svg
tableRowCount:2,//表格默认行数 Index: 0,
tableColCount:2,//表格默认列数 }
tableDefaultData:[], ,
canvasZoom:70,//画布缩放百分比 selectSvgInfo: '',
userInfo:'', tableRowCount: 2,//表格默认行数
editable:true tableColCount: 2,//表格默认列数
tableDefaultData: [],
editable: true
} }
}, },
methods:{ methods: {
// 全屏 // 全屏
fullScreen() { fullScreen () {
let _this = this let _this = this
this.shrink = !this.shrink this.shrink = !this.shrink
let element = document.documentElement; let element = document.documentElement;
@ -101,12 +134,12 @@ export default {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} }
// 监听全屏后esc事件 // 监听全屏后esc事件
window.onresize = function() { window.onresize = function () {
if (!checkFull()) { if (!checkFull()) {
_this.shrink = !_this.shrink _this.shrink = !_this.shrink
} }
} }
function checkFull() { function checkFull () {
var isFull = var isFull =
document.fullscreenElement || document.fullscreenElement ||
document.mozFullScreenElement || document.mozFullScreenElement ||
@ -116,7 +149,7 @@ export default {
} }
}, },
//退出全屏 //退出全屏
exitFullscreen() { exitFullscreen () {
// this.shrink = !this.shrink // this.shrink = !this.shrink
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
@ -128,137 +161,136 @@ export default {
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} }
}, },
MouseMove(e){ MouseMove (e) {
if(e.offsetX==-1){ if (e.offsetX == -1) {
return; return;
} }
if(e.target.nodeName=='INPUT'){ if (e.target.nodeName == 'INPUT') {
return; return;
} }
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;
this.mousePosition.positionY=e.offsetY; this.mousePosition.positionY = e.offsetY;
if(this.mousePosition.positionX<1){ if (this.mousePosition.positionX < 1) {
this.mousePosition.positionX=10; this.mousePosition.positionX = 10;
} }
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
}); });
//将要移动的元素坐标设备为鼠标坐标 //将要移动的元素坐标设备为鼠标坐标
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) {
return -10<(list.svgPositionX-svgPositionX)&&(list.svgPositionX-svgPositionX)<10 return -10 < (list.svgPositionX - svgPositionX) && (list.svgPositionX - svgPositionX) < 10
}); });
if(exitsAdsorbX.length>0){ if (exitsAdsorbX.length > 0) {
svgPositionX=exitsAdsorbX[0].svgPositionX; svgPositionX = exitsAdsorbX[0].svgPositionX;
} }
//y轴相同 横向坐标自动吸附 //y轴相同 横向坐标自动吸附
let exitsAdsorbY=anyPositionList.filter(function(list){ let exitsAdsorbY = anyPositionList.filter(function (list) {
return -10<(list.svgPositionY-svgPositionY)&&(list.svgPositionY-svgPositionY)<10 return -10 < (list.svgPositionY - svgPositionY) && (list.svgPositionY - svgPositionY) < 10
}); });
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
}); });
if(exitsNowX.length>0){ if (exitsNowX.length > 0) {
_this.guideY.style.setProperty('left',svgPositionX-1+'px'); _this.guideY.style.setProperty('left', svgPositionX - 1 + 'px');
_this.guideY.style.display='inline'; _this.guideY.style.display = 'inline';
} }
else{ else {
_this.guideY.style.display='none'; _this.guideY.style.display = 'none';
} }
//从所有的y坐标列表中查当前坐标是否存在 //从所有的y坐标列表中查当前坐标是否存在
let exitsNowY=anyPositionList.filter(function(list){ let exitsNowY = anyPositionList.filter(function (list) {
return list.svgPositionY===svgPositionY return list.svgPositionY === svgPositionY
}); });
if(exitsNowY.length>0){ if (exitsNowY.length > 0) {
_this.guideX.style.setProperty('top',svgPositionY+'px'); _this.guideX.style.setProperty('top', svgPositionY + 'px');
_this.guideX.style.display='inline'; _this.guideX.style.display = 'inline';
} }
else{ else {
_this.guideX.style.display='none'; _this.guideX.style.display = 'none';
} }
},1); }, 1);
}, },
MousedownCanvas(){ MousedownCanvas () {
//console.log('点击了画布'); //console.log('点击了画布');
}, },
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');
gAnyList.forEach(g=>{ gAnyList.forEach(g => {
g.classList.remove("topo-layer-view-selected") g.classList.remove("topo-layer-view-selected")
}); });
document.getElementById(id).classList.add("topo-layer-view-selected"); document.getElementById(id).classList.add("topo-layer-view-selected");
}, },
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) {
//获取当前选中组件 //获取当前选中组件
let selectSvgInfo= this.selectSvgInfo; let selectSvgInfo = this.selectSvgInfo;
if(selectSvgInfo==undefined||selectSvgInfo==null||selectSvgInfo==''){ if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == '') {
return; return;
} }
e.preventDefault(); e.preventDefault();
//判断滚轮方向 -100是往上滑 100是下滑 //判断滚轮方向 -100是往上滑 100是下滑
let svgZoom=e.deltaY=="-100"?"5":"-5"; let svgZoom = e.deltaY == "-100" ? "5" : "-5";
selectSvgInfo.height+=parseInt(svgZoom); selectSvgInfo.height += parseInt(svgZoom);
if(selectSvgInfo.height<1){ if (selectSvgInfo.height < 1) {
selectSvgInfo.height=1; selectSvgInfo.height = 1;
} }
}, },
DblClick(){ DblClick () {
//获取所有g标签 清除所有选中样式 //获取所有g标签 清除所有选中样式
let gAnyList=document.querySelectorAll('g'); let gAnyList = document.querySelectorAll('g');
gAnyList.forEach(g=>{ gAnyList.forEach(g => {
g.classList.remove("topo-layer-view-selected") g.classList.remove("topo-layer-view-selected")
}); });
this.selectSvgInfo=''; this.selectSvgInfo = '';
}, },
testD(){ testD () {
console.log(JSON.stringify(this.svgLists)); console.log(JSON.stringify(this.svgLists));
alert(JSON.stringify(this.svgLists)); alert(JSON.stringify(this.svgLists));
}, },
testE(){ testE () {
this.svgLists=global.AnalogData; this.svgLists = global.AnalogData;
}, },
testH(){ testH () {
localStorage.setItem('svginfo', JSON.stringify(this.svgLists)); localStorage.setItem('svginfo', JSON.stringify(this.svgLists));
this.$router.push({ this.$router.push({
path: "/CircuitPreview", path: "/CircuitPreview",
@ -266,120 +298,119 @@ export default {
}); });
}, },
//设置表格属性 //设置表格属性
setTableAttr(id,rowCount,colCount){ setTableAttr (id, rowCount, colCount) {
//根据当前id找到当前表格的index //根据当前id找到当前表格的index
let tableIndex=this.svgLists.indexOf(this.svgLists.filter(f=>f.id==id)[0]); let tableIndex = this.svgLists.indexOf(this.svgLists.filter(f => f.id == id)[0]);
if(tableIndex==-1){ if (tableIndex == -1) {
return; return;
} }
let svgType=this.svgLists.filter(f=>f.id==id)[0].type; let svgType = this.svgLists.filter(f => f.id == id)[0].type;
if(svgType!='TableSvg'){ if (svgType != 'TableSvg') {
return; return;
} }
let tableData=[]; let tableData = [];
for(let r=0;r<rowCount;r++){ for (let r = 0; r < rowCount; r++) {
let tableColDataList=[]; let tableColDataList = [];
for(let c=0;c<colCount;c++){ for (let c = 0; c < colCount; c++) {
if(this.svgLists[tableIndex].tableData.length>=r+1&&this.svgLists[tableIndex].tableData[r].cols.length>=c+1){ if (this.svgLists[tableIndex].tableData.length >= r + 1 && this.svgLists[tableIndex].tableData[r].cols.length >= c + 1) {
tableColDataList.push(this.svgLists[tableIndex].tableData[r].cols[c]); tableColDataList.push(this.svgLists[tableIndex].tableData[r].cols[c]);
} }
else{ else {
let tableColData={ let tableColData = {
"id": this.$UCore.GenUUid(), "id": this.$UCore.GenUUid(),
"val": `${r+1}行${c+1}列` "val": `${r + 1}行${c + 1}列`
} }
tableColDataList.push(tableColData); tableColDataList.push(tableColData);
} }
} }
let tableRowData={ let tableRowData = {
"cols":tableColDataList "cols": tableColDataList
}; };
tableData.push(tableRowData) tableData.push(tableRowData)
} }
this.svgLists[tableIndex].tableData=tableData; this.svgLists[tableIndex].tableData = tableData;
} }
}, },
mounted(){ mounted () {
let _this=this; let _this = this;
let canvasdiv=document.querySelector('#canvas'); let canvasdiv = document.querySelector('#canvas');
_this.guideX=document.querySelector('#guide-x');//辅助线x轴 _this.guideX = document.querySelector('#guide-x');//辅助线x轴
_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++) {
let tableColData={ let tableColData = {
"id": _this.$UCore.GenUUid(), "id": _this.$UCore.GenUUid(),
"val": `${r+1}行${c+1}列` "val": `${r + 1}行${c + 1}列`
} }
tableColDataList.push(tableColData); tableColDataList.push(tableColData);
} }
let tableRowData={ let tableRowData = {
"cols":tableColDataList "cols": tableColDataList
}; };
tableData.push(tableRowData) tableData.push(tableRowData)
} }
} }
//根据类型和鼠标位置创建组件 //根据类型和鼠标位置创建组件
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 => {
g.classList.remove("topo-layer-view-selected") g.classList.remove("topo-layer-view-selected")
}); });
document.getElementById(svgItem.id).classList.add("topo-layer-view-selected"); document.getElementById(svgItem.id).classList.add("topo-layer-view-selected");
_this.selectSvgInfo=svgItem; _this.selectSvgInfo = svgItem;
},100); }, 100);
}, false); }, false);
}, },
created(){ created () {
let _this=this; let _this = this;
//当前页面监视键盘输入 //当前页面监视键盘输入
document.onkeydown = function(e) { document.onkeydown = function (e) {
//获取当前选中组件 //获取当前选中组件
let selectSvgInfo= _this.selectSvgInfo; let selectSvgInfo = _this.selectSvgInfo;
if(selectSvgInfo==undefined||selectSvgInfo==null||selectSvgInfo==''){ if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == '') {
return; return;
} }
//事件对象兼容 //事件对象兼容
@ -387,50 +418,49 @@ export default {
//键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40 //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
if (e1 && e1.keyCode == 37) { if (e1 && e1.keyCode == 37) {
e.preventDefault(); e.preventDefault();
selectSvgInfo.svgPositionX-=1; selectSvgInfo.svgPositionX -= 1;
} else if (e1 && e1.keyCode == 38) { } else if (e1 && e1.keyCode == 38) {
e.preventDefault(); e.preventDefault();
selectSvgInfo.svgPositionY-=1; selectSvgInfo.svgPositionY -= 1;
} else if (e1 && e1.keyCode == 39) { } else if (e1 && e1.keyCode == 39) {
e.preventDefault(); e.preventDefault();
selectSvgInfo.svgPositionX+=1; selectSvgInfo.svgPositionX += 1;
} else if (e1 && e1.keyCode == 40) { } else if (e1 && e1.keyCode == 40) {
e.preventDefault(); e.preventDefault();
selectSvgInfo.svgPositionY+=1; selectSvgInfo.svgPositionY += 1;
} }
//ctrl c //ctrl c
else if (e1 && e1.ctrlKey&&e1.keyCode == 67) { else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
e.preventDefault(); e.preventDefault();
let copySvgInfoStr=JSON.stringify(selectSvgInfo); let copySvgInfoStr = JSON.stringify(selectSvgInfo);
let copySvgInfo=JSON.parse(copySvgInfoStr); let copySvgInfo = JSON.parse(copySvgInfoStr);
copySvgInfo.id=_this.$UCore.GenUUid(); copySvgInfo.id = _this.$UCore.GenUUid();
copySvgInfo.svgPositionX=selectSvgInfo.svgPositionX+10; copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
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 => {
g.classList.remove("topo-layer-view-selected") g.classList.remove("topo-layer-view-selected")
}); });
document.getElementById(copySvgInfo.id).classList.add("topo-layer-view-selected"); document.getElementById(copySvgInfo.id).classList.add("topo-layer-view-selected");
},100); }, 100);
} }
//deleted //deleted
else if (e1 &&e1.keyCode == 46) { else if (e1 && e1.keyCode == 46) {
e.preventDefault(); e.preventDefault();
//根据当前id找到当前元素的index //根据当前id找到当前元素的index
let selectSvgIndex=_this.svgLists.indexOf(_this.svgLists.filter(f=>f.id==selectSvgInfo.id)[0]); let selectSvgIndex = _this.svgLists.indexOf(_this.svgLists.filter(f => f.id == selectSvgInfo.id)[0]);
_this.svgLists.splice(selectSvgIndex,1); _this.svgLists.splice(selectSvgIndex, 1);
} }
} }
//请求接口获取组件 //请求接口获取组件
this.$axios.get('/InterfaceReturn.json') this.$axios.get('/InterfaceReturn.json')
.then(function (response) { .then(function (response) {
_this.svgInfoData=response.data; _this.svgInfoData = response.data;
console.log(response.data); console.log(response.data);
}) })
.catch(function (error) { .catch(function (error) {
@ -447,16 +477,16 @@ export default {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
::-webkit-scrollbar-track{ ::-webkit-scrollbar-track {
border-radius: 10px; border-radius: 10px;
background-color: #f2f2f2; background-color: #f2f2f2;
box-shadow: 1px 1px 5px #333 inset; box-shadow: 1px 1px 5px #333 inset;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color:#444; background-color: #444;
} }
#components-layout .ant-layout-header{ #components-layout .ant-layout-header {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -468,7 +498,7 @@ export default {
z-index: 2; z-index: 2;
box-shadow: 1px 1px 5px #ddd; box-shadow: 1px 1px 5px #ddd;
} }
.pageMain{ .pageMain {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -476,7 +506,7 @@ export default {
bottom: 0; bottom: 0;
overflow: auto; overflow: auto;
} }
.leftNav{ .leftNav {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -487,7 +517,7 @@ export default {
z-index: 1; z-index: 1;
overflow: auto; overflow: auto;
} }
.centerContain{ .centerContain {
position: absolute; position: absolute;
left: 260px; left: 260px;
right: 300px; right: 300px;
@ -499,7 +529,7 @@ export default {
transition: all 0.3s; transition: all 0.3s;
z-index: 111; z-index: 111;
&.fixed{ &.fixed {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -507,22 +537,21 @@ export default {
bottom: 0; bottom: 0;
} }
.canvas-content {
.canvas-content{
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
} }
.btns-content{ .btns-content {
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
right: 320px; right: 320px;
left: 280px; left: 280px;
button{ button {
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.rightNav{ .rightNav {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -533,14 +562,14 @@ export default {
z-index: 1; z-index: 1;
overflow: auto; overflow: auto;
} }
.icon-shrink{ .icon-shrink {
position: fixed; position: fixed;
right: 20px; right: 20px;
top: 5px; top: 5px;
font-size: 24px; font-size: 24px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
background:#1890ff ; background: #1890ff;
width: 38px; width: 38px;
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
@ -550,38 +579,28 @@ 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);
} }
#guide-x{ #guide-x {
display: none; display: none;
position: absolute; position: absolute;
border-top: 1px dashed #55f; border-top: 1px dashed #55f;
width: 100%; width: 100%;
left: 0px; left: 0px;
top: 500px; top: 500px;
} }
#guide-y{ #guide-y {
display: none; display: none;
position: absolute; position: absolute;
border-left: 1px dashed #55f; border-left: 1px dashed #55f;
height: 100%; height: 100%;
left: 100px; left: 100px;
top: 0px; top: 0px;
} }
#canvas{ #canvas {
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -598,14 +617,26 @@ 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;
} }
.resize-left-top { .resize-left-top {
position: absolute; position: absolute;
height: 10px; height: 10px;
width: 10px; width: 10px;
@ -614,9 +645,9 @@ export default {
left: -5px; left: -5px;
top: -5px; top: -5px;
cursor: nwse-resize; cursor: nwse-resize;
} }
.resize-left-bottom { .resize-left-bottom {
position: absolute; position: absolute;
height: 10px; height: 10px;
width: 10px; width: 10px;
@ -625,9 +656,9 @@ export default {
left: -5px; left: -5px;
bottom: -5px; bottom: -5px;
cursor: nesw-resize; cursor: nesw-resize;
} }
.resize-right-top { .resize-right-top {
position: absolute; position: absolute;
height: 10px; height: 10px;
width: 10px; width: 10px;
@ -636,9 +667,9 @@ export default {
right: -5px; right: -5px;
top: -5px; top: -5px;
cursor: nesw-resize; cursor: nesw-resize;
} }
.resize-right-bottom { .resize-right-bottom {
position: absolute; position: absolute;
height: 10px; height: 10px;
width: 10px; width: 10px;
@ -647,10 +678,9 @@ export default {
right: -5px; right: -5px;
bottom: -5px; bottom: -5px;
cursor: nwse-resize; cursor: nwse-resize;
} }
.topo-layer-view-selected { .topo-layer-view-selected {
outline: 1px solid #0cf; outline: 1px solid #0cf;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save