|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <div class="edit-line">
|
|
|
+ <div class="btn-list">
|
|
|
+ <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
|
|
|
+ <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start">
|
|
|
+ <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
|
|
|
+ size="small"
|
|
|
+ @click="deleteItem"
|
|
|
+ >删除</el-button>
|
|
|
+ <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
|
|
|
+ <el-button
|
|
|
+ :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
|
|
|
+ size="small"
|
|
|
+ @click="eqDrawLine"
|
|
|
+ >垂直水平划线</el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="left">
|
|
|
+ <canvas id="edit_line" width="700" height="460" tabindex="0" />
|
|
|
+ </div>
|
|
|
+ <div class="line-property">
|
|
|
+ <el-card shadow="always">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>属性修改</span>
|
|
|
+ </div>
|
|
|
+ <div class="always-item">
|
|
|
+ <span>线宽:</span>
|
|
|
+ <el-input-number
|
|
|
+ size="small"
|
|
|
+ v-model="lineWidth"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ :min="1"
|
|
|
+ :max="50"
|
|
|
+ ></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="always-item">
|
|
|
+ <span>线类型:</span>
|
|
|
+ <el-select
|
|
|
+ style="width:130px"
|
|
|
+ size="small"
|
|
|
+ v-model="lineType"
|
|
|
+ @change="changeType"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="always-item">
|
|
|
+ <span>线颜色:</span>
|
|
|
+ <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
|
|
|
+import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
|
|
|
+import { SPoint } from "@persagy-web/draw/";
|
|
|
+import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
|
|
|
+import { hexify } from "./../../../../public/until/rgbaUtil";
|
|
|
+//注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
|
|
|
+export default {
|
|
|
+ name: "editLine",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scene: null,
|
|
|
+ view: null,
|
|
|
+ isCreated: false, //是否创建完成
|
|
|
+ cmdStatus: "", //选中状态
|
|
|
+ lineItem: null, //存放创建的Item
|
|
|
+ lineWidth: 1,
|
|
|
+ lineColor: "",
|
|
|
+ lineType: "",
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "Solid",
|
|
|
+ label: "实线"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Dashed",
|
|
|
+ label: "虚线"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Dotted",
|
|
|
+ label: "点"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.view = new SGraphView("edit_line");
|
|
|
+ this.scene = new SGraphScene();
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ create() {
|
|
|
+ this.cmdStatus = "create";
|
|
|
+ this.scene.root.children = [];
|
|
|
+ this.lineItem = new EditLineItem(null, []);
|
|
|
+ this.lineItem.status = SItemStatus.Create;
|
|
|
+ this.lineItem.connect("finishCreated", this, this.finishCreated);
|
|
|
+ this.scene.addItem(this.lineItem);
|
|
|
+ this.scene.grabItem = this.lineItem;
|
|
|
+ this.view.update();
|
|
|
+ },
|
|
|
+ deleteItem() {
|
|
|
+ this.cmdStatus = "";
|
|
|
+ this.scene.removeItem(this.lineItem);
|
|
|
+ this.lineItem = null;
|
|
|
+ this.view.update();
|
|
|
+ },
|
|
|
+ edit() {
|
|
|
+ if (this.lineItem) {
|
|
|
+ if (this.lineItem.status == SItemStatus.Normal) {
|
|
|
+ this.scene.grabItem = this.lineItem;
|
|
|
+ this.lineItem.status = SItemStatus.Edit;
|
|
|
+ this.cmdStatus = "edit";
|
|
|
+ } else {
|
|
|
+ this.lineItem.status = SItemStatus.Normal;
|
|
|
+ this.scene.grabItem = null;
|
|
|
+ this.cmdStatus = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ eqDrawLine() {
|
|
|
+ this.cmdStatus = "eqDrawLine";
|
|
|
+ this.scene.root.children = [];
|
|
|
+ this.lineItem = new EditLineItem(null, []);
|
|
|
+ this.lineItem.verAndLeve = true;
|
|
|
+ this.lineItem.status = SItemStatus.Create;
|
|
|
+ this.lineItem.connect("finishCreated", this, this.finishCreated);
|
|
|
+ this.scene.addItem(this.lineItem);
|
|
|
+ this.scene.grabItem = this.lineItem;
|
|
|
+ this.view.update();
|
|
|
+ },
|
|
|
+ // 改变线宽属性
|
|
|
+ changeLineWidth(val) {
|
|
|
+ if (this.lineItem) {
|
|
|
+ this.lineWidth = val;
|
|
|
+ this.lineItem.lineWidth = val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 改变颜色
|
|
|
+ changeColor(val) {
|
|
|
+ if (this.lineItem) {
|
|
|
+ this.lineColor = hexify(val);
|
|
|
+ this.lineItem.strokeColor = this.lineColor;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //改变线得类型
|
|
|
+ changeType(val) {
|
|
|
+ if (this.lineItem) {
|
|
|
+ this.lineItem.lineStyle = SLineStyle[val];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 完成创建后的回调
|
|
|
+ finishCreated() {
|
|
|
+ this.cmdStatus = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ lineItem(val) {
|
|
|
+ if (val) {
|
|
|
+ this.lineWidth = val.lineWidth; // 线宽
|
|
|
+ this.lineStyle = val.lineStyle; // 线条样式
|
|
|
+ this.lineColor = val.strokeColor.value; // 线条填充色
|
|
|
+ this.lineType = this.options[val.lineStyle].value;
|
|
|
+ } else {
|
|
|
+ this.lineWidth = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.edit-line {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .left {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .line-property {
|
|
|
+ width: 300px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .always{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .always-item {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .heightLight {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #c6e2ff;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|