|
@@ -1,275 +1,21 @@
|
|
|
<!-- 电路图编辑器页面 -->
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div id="components-layout">
|
|
|
- <a-layout>
|
|
|
- <!-- {{tableDefaultData}} -->
|
|
|
- <span v-if="!shrink" @click="exitFullscreen" class="icon-shrink svgfont"
|
|
|
- ></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"
|
|
|
- >
|
|
|
- <!--拖动辅助线-->
|
|
|
- <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: rgba(0, 244, 253, 0.1);
|
|
|
- border: 1px solid rgba(0, 244, 253, 0.1);
|
|
|
- "
|
|
|
- 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>
|
|
|
- <g
|
|
|
- style="cursor: pointer"
|
|
|
- v-for="(item, index) in svgLists"
|
|
|
- :key="item"
|
|
|
- :id="item.id"
|
|
|
- :type="item.type"
|
|
|
- @mousedown="
|
|
|
- MousedownSvg(
|
|
|
- item.id,
|
|
|
- index,
|
|
|
- item.svgPositionX,
|
|
|
- item.svgPositionY,
|
|
|
- $event
|
|
|
- )
|
|
|
- "
|
|
|
- :title="item.title"
|
|
|
- :transform="
|
|
|
- 'translate(' +
|
|
|
- item.svgPositionX +
|
|
|
- ',' +
|
|
|
- item.svgPositionY +
|
|
|
- ')' +
|
|
|
- 'rotate(' +
|
|
|
- item.angle +
|
|
|
- ')'
|
|
|
- "
|
|
|
- >
|
|
|
- <SvgComponents
|
|
|
- :svg_color="item.svgColor"
|
|
|
- :svgInfoData="svgInfoData"
|
|
|
- :svgtype="item.type"
|
|
|
- :stroke-width="item.width"
|
|
|
- :text="item.svgText"
|
|
|
- :font-size="item.fontSize"
|
|
|
- :height="item.height"
|
|
|
- ></SvgComponents>
|
|
|
- </g>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- </a-layout-content>
|
|
|
- <!-- <a-layout-sider class="rightNav">
|
|
|
- <RightToolBar
|
|
|
- :svgInfo="selectSvgInfo"
|
|
|
- @setTableAttr="setTableAttr"
|
|
|
- ></RightToolBar>
|
|
|
- </a-layout-sider> -->
|
|
|
- </a-layout>
|
|
|
- </a-layout>
|
|
|
- </div>
|
|
|
+ <div id="components-layout"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-// import LeftToolBar from "@/components/LeftToolBar.vue";
|
|
|
-// import RightToolBar from "@/components/RightToolBar.vue";
|
|
|
-// import SvgComponents from '@/components/SvgComponents.vue';
|
|
|
-import global from "@/global/global.js"; //全局变量
|
|
|
-import SvgComponents from "@/components/SvgComponents.vue";
|
|
|
-// import api from "../api/content/CircuitEdit";
|
|
|
+import api from "@/api/site/systemImg";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
export default {
|
|
|
- components: { SvgComponents }, //LeftToolBar, RightToolBar,
|
|
|
data() {
|
|
|
return {
|
|
|
svgInfoData: [], //接口获取到的组件数据
|
|
|
- shrink: true, //收缩状态 true收缩 false展开
|
|
|
svgLists: [], //svg列表
|
|
|
- //鼠标位置
|
|
|
- mousePosition: {
|
|
|
- positionX: "",
|
|
|
- positiony: "",
|
|
|
- },
|
|
|
- //辅助线元素
|
|
|
- guideX: "",
|
|
|
- guideY: "",
|
|
|
- CurrentlySelectedToolBar: {
|
|
|
- Type: "", //选中的工具栏svg类型
|
|
|
- TypeName: "", //选中的工具栏svg类型名称
|
|
|
- Title: "", //选中的工具栏svg标题
|
|
|
- Color: "", //选中的工具栏svg颜色
|
|
|
- },
|
|
|
- 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轴坐标
|
|
|
- },
|
|
|
- selectSvgInfo: "",
|
|
|
- tableRowCount: 2, //表格默认行数
|
|
|
- tableColCount: 2, //表格默认列数
|
|
|
- tableDefaultData: [],
|
|
|
AnalogData: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- MouseMove(e) {
|
|
|
- let _this = this;
|
|
|
-
|
|
|
- if (this.selectSvg.mouseStatus == 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- const { clientX, clientY } = e;
|
|
|
-
|
|
|
- let svgID = this.svgLists[this.selectSvg.Index].id;
|
|
|
- //排除当前元素剩下的所有svg元素的列表
|
|
|
- let anyPositionList = this.svgLists.filter(function (list) {
|
|
|
- return list.id != svgID;
|
|
|
- });
|
|
|
- //将要移动的元素坐标设备为鼠标坐标
|
|
|
- let svgPositionX = this.selectSvg.pointX;
|
|
|
- let svgPositionY = this.selectSvg.pointY;
|
|
|
- svgPositionX += clientX - this.selectSvg.mPositionX;
|
|
|
- svgPositionY += clientY - this.selectSvg.mPositionY;
|
|
|
- setTimeout(function () {
|
|
|
- //少于十个像素自动吸附
|
|
|
- //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
|
|
|
- let exitsAdsorbX = anyPositionList.filter(function (list) {
|
|
|
- return (
|
|
|
- -10 < list.svgPositionX - svgPositionX &&
|
|
|
- list.svgPositionX - svgPositionX < 10
|
|
|
- );
|
|
|
- });
|
|
|
- if (exitsAdsorbX.length > 0) {
|
|
|
- svgPositionX = exitsAdsorbX[0].svgPositionX;
|
|
|
- }
|
|
|
- //y轴相同 横向坐标自动吸附
|
|
|
- let exitsAdsorbY = anyPositionList.filter(function (list) {
|
|
|
- return (
|
|
|
- -10 < list.svgPositionY - svgPositionY &&
|
|
|
- list.svgPositionY - svgPositionY < 10
|
|
|
- );
|
|
|
- });
|
|
|
- if (exitsAdsorbY.length > 0) {
|
|
|
- svgPositionY = exitsAdsorbY[0].svgPositionY;
|
|
|
- }
|
|
|
- _this.svgLists[_this.selectSvg.Index].svgPositionX = svgPositionX;
|
|
|
- _this.svgLists[_this.selectSvg.Index].svgPositionY = svgPositionY;
|
|
|
- //从所有的x坐标列表中查当前坐标是否存在
|
|
|
- let exitsNowX = anyPositionList.filter(function (list) {
|
|
|
- return list.svgPositionX === svgPositionX;
|
|
|
- });
|
|
|
- if (exitsNowX.length > 0) {
|
|
|
- _this.guideY.style.setProperty("left", svgPositionX - 1 + "px");
|
|
|
- _this.guideY.style.display = "inline";
|
|
|
- } else {
|
|
|
- _this.guideY.style.display = "none";
|
|
|
- }
|
|
|
- //从所有的y坐标列表中查当前坐标是否存在
|
|
|
- let exitsNowY = anyPositionList.filter(function (list) {
|
|
|
- return list.svgPositionY === svgPositionY;
|
|
|
- });
|
|
|
- if (exitsNowY.length > 0) {
|
|
|
- _this.guideX.style.setProperty("top", svgPositionY + "px");
|
|
|
- _this.guideX.style.display = "inline";
|
|
|
- } else {
|
|
|
- _this.guideX.style.display = "none";
|
|
|
- }
|
|
|
- }, 1);
|
|
|
- },
|
|
|
- MousedownCanvas() {
|
|
|
- //console.log('点击了画布');
|
|
|
- },
|
|
|
- MousedownSvg(id, index, pointX, pointY, e) {
|
|
|
- this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType =
|
|
|
- "";
|
|
|
- this.CurrentlySelectedToolBar.Title =
|
|
|
- global.CurrentlySelectedToolBarTitle = "";
|
|
|
- //从数组里面根据index找到当前元素
|
|
|
- this.selectSvg.ID = id;
|
|
|
- this.selectSvg.Index = index;
|
|
|
- this.selectSvg.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];
|
|
|
-
|
|
|
- //获取所有g标签 将当前标签追加选中样式
|
|
|
- let gAnyList = document.querySelectorAll("g");
|
|
|
- gAnyList.forEach((g) => {
|
|
|
- g.classList.remove("topo-layer-view-selected");
|
|
|
- });
|
|
|
- document.getElementById(id).classList.add("topo-layer-view-selected");
|
|
|
- },
|
|
|
- MouseupCanvas() {
|
|
|
- this.guideX.style.display = "none";
|
|
|
- this.guideY.style.display = "none";
|
|
|
- if (
|
|
|
- this.CurrentlySelectedToolBar.Title != "" ||
|
|
|
- this.CurrentlySelectedToolBar.Type != ""
|
|
|
- ) {
|
|
|
- return;
|
|
|
- }
|
|
|
- // this.selectSvg.ID = '';
|
|
|
- this.selectSvg.mouseStatus = 0;
|
|
|
- },
|
|
|
- MouseWheel(e) {
|
|
|
- //获取当前选中组件
|
|
|
- let selectSvgInfo = this.selectSvgInfo;
|
|
|
- if (
|
|
|
- selectSvgInfo == undefined ||
|
|
|
- selectSvgInfo == null ||
|
|
|
- selectSvgInfo == ""
|
|
|
- ) {
|
|
|
- return;
|
|
|
- }
|
|
|
- e.preventDefault();
|
|
|
- //判断滚轮方向 -100是往上滑 100是下滑
|
|
|
- let svgZoom = e.deltaY < 0 ? 0.1 : -0.1;
|
|
|
- console.log(e.deltaY);
|
|
|
- selectSvgInfo.size += svgZoom;
|
|
|
- selectSvgInfo.size = parseFloat(selectSvgInfo.size.toFixed(1));
|
|
|
- if (selectSvgInfo.size < 1) {
|
|
|
- selectSvgInfo.size = 1;
|
|
|
- }
|
|
|
- },
|
|
|
- DblClick() {
|
|
|
- //获取所有g标签 清除所有选中样式
|
|
|
- let gAnyList = document.querySelectorAll("g");
|
|
|
- gAnyList.forEach((g) => {
|
|
|
- g.classList.remove("topo-layer-view-selected");
|
|
|
- });
|
|
|
- this.selectSvgInfo = "";
|
|
|
- },
|
|
|
- testD() {
|
|
|
- // console.log(JSON.stringify(this.svgLists));
|
|
|
- alert(JSON.stringify(this.svgLists));
|
|
|
- },
|
|
|
testE() {
|
|
|
this.svgLists = this.AnalogData;
|
|
|
},
|
|
@@ -280,89 +26,6 @@ export default {
|
|
|
name: "power_diagram",
|
|
|
});
|
|
|
},
|
|
|
- //设置表格属性
|
|
|
- setTableAttr(id, rowCount, colCount) {
|
|
|
- //根据当前id找到当前表格的index
|
|
|
- let tableIndex = this.svgLists.indexOf(
|
|
|
- this.svgLists.filter((f) => f.id == id)[0]
|
|
|
- );
|
|
|
- if (tableIndex == -1) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let svgType = this.svgLists.filter((f) => f.id == id)[0].type;
|
|
|
- if (svgType != "TableSvg") {
|
|
|
- return;
|
|
|
- }
|
|
|
- let tableData = [];
|
|
|
- for (let r = 0; r < rowCount; r++) {
|
|
|
- let tableColDataList = [];
|
|
|
- for (let c = 0; c < colCount; c++) {
|
|
|
- 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]
|
|
|
- );
|
|
|
- } else {
|
|
|
- let tableColData = {
|
|
|
- id: this.$UCore.GenUUid(),
|
|
|
- val: `${r + 1}行${c + 1}列`,
|
|
|
- };
|
|
|
- tableColDataList.push(tableColData);
|
|
|
- }
|
|
|
- }
|
|
|
- let tableRowData = {
|
|
|
- cols: tableColDataList,
|
|
|
- };
|
|
|
- tableData.push(tableRowData);
|
|
|
- }
|
|
|
- // console.log(tableData)
|
|
|
- this.svgLists[tableIndex].tableData = tableData;
|
|
|
- // console.log(this.svgLists[tableIndex].tableData)
|
|
|
- let gAnyList = document.querySelectorAll("foreignObject");
|
|
|
- // window.onload = function () {
|
|
|
- // var tdArr = document.getElementById('tablebox').firstElementChild;
|
|
|
- // for (var i = 0; i < data.length; i++) {
|
|
|
- // var tr = document.createElement("tr");
|
|
|
- // tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
|
|
|
- // tdArr.appendChild(tr)
|
|
|
- // }
|
|
|
- // };
|
|
|
- var html = `
|
|
|
- <div id='divtable' class='svgfont' data-v-025fdfb6=''></div>
|
|
|
- <table border='0' cellpadding='0' cellspacing='0' style='pointer-events: none;'>
|
|
|
- <tr data-v-025fdfb6=''>
|
|
|
- <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
- <div class='add-tag' data-v-025fdfb6=''>
|
|
|
- <span data-v-025fdfb6=''>1行1列</span>
|
|
|
- <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
- <div class='add-tag' data-v-025fdfb6=''>
|
|
|
- <span data-v-025fdfb6=''>1行2列</span>
|
|
|
- <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr data-v-025fdfb6=''>
|
|
|
- <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
- <div class='add-tag' data-v-025fdfb6=''>
|
|
|
- <span data-v-025fdfb6=''>2行1列</span>
|
|
|
- <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td class='tdsvg' data-v-025fdfb6=''>
|
|
|
- <div class='add-tag' data-v-025fdfb6=''>
|
|
|
- <span data-v-025fdfb6=''>2行2列</span>
|
|
|
- <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>`;
|
|
|
- gAnyList[0].innerHTML = html;
|
|
|
- },
|
|
|
},
|
|
|
mounted() {
|
|
|
let _this = this;
|
|
@@ -371,85 +34,11 @@ export default {
|
|
|
.get(window.PLATFROM_CONFIG.ione)
|
|
|
.then(function (response) {
|
|
|
_this.AnalogData = response.data;
|
|
|
- console.log(response);
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
|
|
|
- let canvasdiv = document.querySelector("#canvas");
|
|
|
- _this.guideX = document.querySelector("#guide-x"); //辅助线x轴
|
|
|
- _this.guideY = document.querySelector("#guide-y"); //辅助线y轴
|
|
|
- canvasdiv.addEventListener(
|
|
|
- "dragover",
|
|
|
- function (e) {
|
|
|
- e.preventDefault();
|
|
|
- _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.Width =
|
|
|
- global.CurrentlySelectedToolBarWidth;
|
|
|
- _this.CurrentlySelectedToolBar.SvgText =
|
|
|
- global.CurrentlySelectedToolBarSvgText;
|
|
|
- _this.CurrentlySelectedToolBar.FontSize =
|
|
|
- global.CurrentlySelectedToolBarFontSize;
|
|
|
- _this.CurrentlySelectedToolBar.TableData =
|
|
|
- global.CurrentlySelectedToolBarTableData;
|
|
|
- },
|
|
|
- false
|
|
|
- );
|
|
|
- canvasdiv.addEventListener(
|
|
|
- "drop",
|
|
|
- function (e) {
|
|
|
- e.preventDefault();
|
|
|
- if (_this.CurrentlySelectedToolBar.Type == "") {
|
|
|
- return;
|
|
|
- }
|
|
|
- //根据类型和鼠标位置创建组件
|
|
|
- console.log(_this.CurrentlySelectedToolBar.Type);
|
|
|
-
|
|
|
- let svgItem = {
|
|
|
- id: _this.$UCore.GenUUid(),
|
|
|
- title: _this.CurrentlySelectedToolBar.Title,
|
|
|
- type: _this.CurrentlySelectedToolBar.Type,
|
|
|
- typeName: _this.CurrentlySelectedToolBar.TypeName,
|
|
|
- svgColor: _this.CurrentlySelectedToolBar.Color,
|
|
|
- svgPositionX: e.offsetX,
|
|
|
- svgPositionY: e.offsetY,
|
|
|
- // size: 1,
|
|
|
- height: _this.CurrentlySelectedToolBar.Height,
|
|
|
- width: _this.CurrentlySelectedToolBar.Width,
|
|
|
- svgText: _this.CurrentlySelectedToolBar.SvgText,
|
|
|
- fontSize: _this.CurrentlySelectedToolBar.FontSize,
|
|
|
- tableRowCount: _this.tableRowCount,
|
|
|
- tableColCount: _this.tableColCount,
|
|
|
- tableData: _this.CurrentlySelectedToolBar.TableData,
|
|
|
- angle: 0,
|
|
|
- //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
|
|
|
- };
|
|
|
- _this.svgLists.push(svgItem);
|
|
|
- setTimeout(function () {
|
|
|
- //获取所有g标签 将当前标签追加选中样式
|
|
|
- let gAnyList = document.querySelectorAll("g");
|
|
|
- console.log(gAnyList);
|
|
|
- gAnyList.forEach((g) => {
|
|
|
- g.classList.remove("topo-layer-view-selected");
|
|
|
- });
|
|
|
- document
|
|
|
- .getElementById(svgItem.id)
|
|
|
- .classList.add("topo-layer-view-selected");
|
|
|
- _this.selectSvgInfo = svgItem;
|
|
|
- }, 100);
|
|
|
- },
|
|
|
- false
|
|
|
- );
|
|
|
setTimeout(() => {
|
|
|
this.testE();
|
|
|
this.testH();
|
|
@@ -457,6 +46,19 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
let _this = this;
|
|
|
+// _this.$store.state.siteId
|
|
|
+ api
|
|
|
+ .gethookupComponentBasics({
|
|
|
+ siteId: 1,
|
|
|
+ })
|
|
|
+ .then((requset) => {
|
|
|
+ if (requset.status === "SUCCESS") {
|
|
|
+ console.log(requset.data)
|
|
|
+ // this.svgInfoData = requset.data;
|
|
|
+ } else {
|
|
|
+ ElMessage.error(requset.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
//请求接口获取组件
|
|
|
this.$axios
|
|
|
.get(window.PLATFROM_CONFIG.Interface)
|
|
@@ -466,64 +68,6 @@ export default {
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
- //当前页面监视键盘输入
|
|
|
- document.onkeydown = function (e) {
|
|
|
- //获取当前选中组件
|
|
|
- let selectSvgInfo = _this.selectSvgInfo;
|
|
|
- if (
|
|
|
- selectSvgInfo == undefined ||
|
|
|
- selectSvgInfo == null ||
|
|
|
- selectSvgInfo == ""
|
|
|
- ) {
|
|
|
- return;
|
|
|
- }
|
|
|
- //事件对象兼容
|
|
|
- let e1 = e || window.event || arguments.callee.caller.arguments[0];
|
|
|
- //键盘按键判断:左箭头-37;上箭头-38;右箭头-39;下箭头-40
|
|
|
- if (e1 && e1.keyCode == 37) {
|
|
|
- e.preventDefault();
|
|
|
- selectSvgInfo.svgPositionX -= 1;
|
|
|
- } else if (e1 && e1.keyCode == 38) {
|
|
|
- e.preventDefault();
|
|
|
- selectSvgInfo.svgPositionY -= 1;
|
|
|
- } else if (e1 && e1.keyCode == 39) {
|
|
|
- e.preventDefault();
|
|
|
- selectSvgInfo.svgPositionX += 1;
|
|
|
- } else if (e1 && e1.keyCode == 40) {
|
|
|
- e.preventDefault();
|
|
|
- selectSvgInfo.svgPositionY += 1;
|
|
|
- }
|
|
|
- //ctrl c
|
|
|
- else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
|
|
|
- e.preventDefault();
|
|
|
- let copySvgInfoStr = JSON.stringify(selectSvgInfo);
|
|
|
- let copySvgInfo = JSON.parse(copySvgInfoStr);
|
|
|
- copySvgInfo.id = _this.$UCore.GenUUid();
|
|
|
- copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
|
|
|
- copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
|
|
|
- _this.svgLists.push(copySvgInfo);
|
|
|
- _this.selectSvgInfo = copySvgInfo;
|
|
|
- setTimeout(function () {
|
|
|
- //获取所有g标签 将当前标签追加选中样式
|
|
|
- let gAnyList = document.querySelectorAll("g");
|
|
|
- gAnyList.forEach((g) => {
|
|
|
- g.classList.remove("topo-layer-view-selected");
|
|
|
- });
|
|
|
- document
|
|
|
- .getElementById(copySvgInfo.id)
|
|
|
- .classList.add("topo-layer-view-selected");
|
|
|
- }, 100);
|
|
|
- }
|
|
|
- //deleted
|
|
|
- else if (e1 && e1.keyCode == 46) {
|
|
|
- e.preventDefault();
|
|
|
- //根据当前id找到当前元素的index
|
|
|
- let selectSvgIndex = _this.svgLists.indexOf(
|
|
|
- _this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]
|
|
|
- );
|
|
|
- _this.svgLists.splice(selectSvgIndex, 1);
|
|
|
- }
|
|
|
- };
|
|
|
},
|
|
|
};
|
|
|
</script>
|