|
@@ -8,18 +8,38 @@
|
|
|
<div class="property">
|
|
|
<div class="color-box">
|
|
|
<div class="cololorSelect">
|
|
|
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
|
|
|
+ <el-color-picker
|
|
|
+ show-alpha
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="strokeColor"
|
|
|
+ ></el-color-picker>
|
|
|
</div>
|
|
|
<span>颜色</span>
|
|
|
</div>
|
|
|
<div class="line-width">
|
|
|
- <el-input-number style="width: 80px" v-model="linewidth" controls-position="right" @change="changeWidth" size="mini" :min="1" :max="20"
|
|
|
- :maxlength="100"></el-input-number>
|
|
|
+ <el-input-number
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="lineWidth"
|
|
|
+ controls-position="right"
|
|
|
+ size="mini"
|
|
|
+ :min="1"
|
|
|
+ :max="20"
|
|
|
+ :maxlength="100"
|
|
|
+ ></el-input-number>
|
|
|
<span>线宽</span>
|
|
|
</div>
|
|
|
<div class="line-width">
|
|
|
- <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
|
|
|
- <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
|
|
|
+ <a-select
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="lineStyle"
|
|
|
+ :default-value="borderLineOption[0].id"
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ v-for="item in borderLineOption"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.src"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
<img :src="item.src" alt width="60" />
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
@@ -30,14 +50,20 @@
|
|
|
<li>
|
|
|
<div class="small-title">拐角</div>
|
|
|
<div>
|
|
|
- <el-radio-group v-model="corner" @change="changeRadio">
|
|
|
+ <el-radio-group v-model="corner">
|
|
|
<el-radio label="1">直角</el-radio>
|
|
|
<el-radio label="2">圆角</el-radio>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
- <div style="margin-top: 10px;" v-if="corner=='2'">
|
|
|
+ <div style="margin-top: 10px" v-if="corner == '2'">
|
|
|
<label for="radius">设置圆角半径: </label>
|
|
|
- <el-input-number v-model="radius" controls-position="right" size="mini" @change="changeCornerRaduis" :min="0" :step-strictly="true"></el-input-number>
|
|
|
+ <el-input-number
|
|
|
+ v-model="radius"
|
|
|
+ controls-position="right"
|
|
|
+ size="mini"
|
|
|
+ :min="0"
|
|
|
+ :step-strictly="true"
|
|
|
+ ></el-input-number>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -45,13 +71,13 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus/bus";
|
|
|
+import { SLineStyle } from "@persagy-web/graph";
|
|
|
+import {SColor} from "@persagy-web/draw"
|
|
|
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
|
|
|
export default {
|
|
|
- props: ["strokeColor", "lineStyle", "lineWidth", "Radius"],
|
|
|
+ props: ["Pipe"],
|
|
|
data() {
|
|
|
return {
|
|
|
- color: "",
|
|
|
- linewidth: "",
|
|
|
- linestyle: "",
|
|
|
borderLineOption: [
|
|
|
{
|
|
|
id: "Solid",
|
|
@@ -63,54 +89,74 @@ export default {
|
|
|
},
|
|
|
{},
|
|
|
],
|
|
|
- corner: '1', // 默认直角
|
|
|
- radius: 0, // 圆角半径
|
|
|
+ corner: "1", // 默认直角
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // 改变线宽
|
|
|
- changeWidth(val) {
|
|
|
- bus.$emit("updateStyle", "lineWidth", val);
|
|
|
- },
|
|
|
- // 改变颜色
|
|
|
- changeColor(val) {
|
|
|
- bus.$emit("updateStyle", "strokeColor", val);
|
|
|
- },
|
|
|
- // 改变线样式
|
|
|
- changeLineStyle(val) {
|
|
|
- bus.$emit("updateStyle", "lineStyle", val);
|
|
|
- },
|
|
|
- // 改变箭头样式
|
|
|
- changeArrowType(dir) {
|
|
|
- bus.$emit("updateStyle", dir, this[dir]);
|
|
|
- },
|
|
|
- // 改变拐角半径
|
|
|
- changeCornerRaduis(val) {
|
|
|
- bus.$emit("updateStyle", 'radius', this.radius);
|
|
|
- },
|
|
|
- // 拐角类型变化
|
|
|
- changeRadio() {
|
|
|
- if (this.corner == '1') {
|
|
|
- this.radius = 0;
|
|
|
- }
|
|
|
- bus.$emit("updateStyle", 'radius', this.radius);
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
- watch: {
|
|
|
- strokeColor(val) {
|
|
|
- this.color = val;
|
|
|
+ computed: {
|
|
|
+ /**
|
|
|
+ * 边框颜色
|
|
|
+ */
|
|
|
+ strokeColor: {
|
|
|
+ get: function () {
|
|
|
+ return this.Pipe.strokeColor.toRgba();
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const colorList = rgbaNum(val);
|
|
|
+ const oldV = this.Pipe.color;
|
|
|
+ const newV = new SColor(
|
|
|
+ Number(colorList[0]),
|
|
|
+ Number(colorList[1]),
|
|
|
+ Number(colorList[2]),
|
|
|
+ colorList[3] * 255
|
|
|
+ );
|
|
|
+ this.Pipe.strokeColor = newV;
|
|
|
+ bus.$emit("undoAttr", this.Pipe, "strokeColor", oldV, newV);
|
|
|
+ },
|
|
|
},
|
|
|
- lineWidth(val) {
|
|
|
- this.linewidth = val;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 边框宽度
|
|
|
+ */
|
|
|
+ lineWidth: {
|
|
|
+ get: function () {
|
|
|
+ return this.Pipe.lineWidth;
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const oldV = this.Pipe.lineWidth
|
|
|
+ this.Pipe.lineWidth = val;
|
|
|
+ bus.$emit("undoAttr", this.Pipe, "lineWidth", oldV, val);
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- lineStyle(val) {
|
|
|
- this.linestyle = val;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 线样式
|
|
|
+ */
|
|
|
+ lineStyle: {
|
|
|
+ get: function () {
|
|
|
+ return this.borderLineOption[this.Pipe.lineStyle].id;
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const oldV = this.Pipe.lineStyle
|
|
|
+ this.Pipe.lineStyle = SLineStyle[val];
|
|
|
+ bus.$emit("undoAttr", this.Pipe, "lineStyle", oldV, SLineStyle[val]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ // 线类型
|
|
|
+ radius: {
|
|
|
+ get: function () {
|
|
|
+ return this.Pipe.radius;
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const oldV = this.Pipe.radius
|
|
|
+ this.Pipe.radius = val;
|
|
|
+ bus.$emit("undoAttr", this.Pipe, "radius", oldV, val);
|
|
|
+ },
|
|
|
},
|
|
|
- Radius(val) {
|
|
|
- console.log(val);
|
|
|
- this.corner = val > 0 ? "2" : "1"
|
|
|
- this.radius = val;
|
|
|
- }
|
|
|
},
|
|
|
};
|
|
|
</script>
|