debug

src/components/editClass/persagy-edit/items/SBasePipeUninTool.ts

@@ -28,7 +28,7 @@ import { SGraphEdit, SBaseCirclePolylineEdit } from "@persagy-web/edit";
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { Marker } from "@persagy-web/big/lib";
-import { SColor,SPath, SFont, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
+import { SColor, SPath, SFont, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
 
 /**
  * 编辑基础管道接头类
@@ -39,11 +39,27 @@ export class SBasePipeUninTool extends SGraphEdit {
 
     ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //属性
+
     // 数据
     data: Marker;
     // 宽高
     width: number = 64;
+    // get width(): number {
+    //     return this._width;
+    // }
+    // set width(v: number) {
+    //     this._width = v
+    //     this.update();
+    // }
+
     height: number = 64;
+    // get height(): number {
+    //     return this._height;
+    // }
+    // set height(v: number) {
+    //     this._height = v
+    //     this.update();
+    // }
     // 轮廓点
     outLineTpye: any = {
         'wantou': 2,
@@ -52,7 +68,7 @@ export class SBasePipeUninTool extends SGraphEdit {
     }
 
     // 旋转角度
-    _angle:number = 0;
+    _angle: number = 0;
     get angle(): number {
         return this._angle;
     }
@@ -77,13 +93,13 @@ export class SBasePipeUninTool extends SGraphEdit {
     }
 
     /** 弧度 */
-    _radius:number = 0;
+    _radius: number = 0;
     get radius(): number {
         return this._radius;
     }
     set radius(v: number) {
         this._radius = v;
-        this.generatePath(this.outLineLine,v)
+        this.generatePath(this.outLineLine, v)
         this.update();
     }
 
@@ -106,6 +122,8 @@ export class SBasePipeUninTool extends SGraphEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
+        // this._resizeable = false;
+        // this.showSelect = false;
         this.initData(data);
     } // Constructor
 
@@ -115,16 +133,16 @@ export class SBasePipeUninTool extends SGraphEdit {
      * @param data Mark
      */
     initData(data: Marker) {
-        this.width = data.style.default.width ? data.style.default.width : 64;
-        this.height = data.style.default.height ? data.style.default.height : 64;
+        this.width = data.size?.width ? data.size?.width : 64;
+        this.height = data.size?.height ? data.size?.height : 64;
         this.moveTo(data.pos.x, data.pos.y);
         // 判断为几通管道
         this.computeUninNumber(this.outLineTpye[data.style.uninToolType]);
         this.zOrder = this.data.style.default.zorder ? this.data.style.default.zorder : this.zOrder;
-        // this.fillColor =  this.data.style.default.fillColor ?new SColor(this.data.style.default.fillColor) : this.fillColor;
-        this.angle = this.data.style.default.angle ? this.data.style.default.angle :0
-        this.radius  = this.data.style.default.radius ? this.data.style.default.radius :  this.radius  ;
-        this.lineWidth = this.data.style.default.lineWidth ? this.data.style.default.lineWidth : this.lineWidth ;
+        this.fillColor = this.data.style.default.fillColor ? new SColor(this.data.style.default.fillColor) : this.fillColor;
+        this.angle = this.data.style.default.angle ? this.data.style.default.angle : 0
+        this.radius = this.data.style.default.radius ? this.data.style.default.radius : this.radius;
+        this.lineWidth = this.data.style.default.lineWidth ? this.data.style.default.lineWidth : this.lineWidth;
 
         this.update()
     }
@@ -146,8 +164,14 @@ export class SBasePipeUninTool extends SGraphEdit {
      * @param newSize 新大小
      */
     resize(oldSize: SSize, newSize: SSize) {
-        this.width = newSize.width;
-        this.height = newSize.height;
+        if(this.angle == 90 || this.angle == 270){
+            this.width = newSize.height;
+            this.height = newSize.width;
+        }else{
+            this.width = newSize.width;
+            this.height = newSize.height;
+        }
+
         this.computeUninNumber(this.outLineTpye[this.data.style.uninToolType]);
         // this.outLine.pointList = this.outLineLine; //赋值轮廓
         this.update();
@@ -159,7 +183,11 @@ export class SBasePipeUninTool extends SGraphEdit {
      * @return 对象边界区域
      */
     boundingRect(): SRect {
-        return new SRect(0, 0, this.width, this.height);
+        if(this.angle == 90 || this.angle == 270){
+            return new SRect( -this.height/2,-this.width/2, this.height,this.width);
+        }else{
+            return new SRect(-this.width/2, -this.height/2, this.width, this.height);
+        }
     }
 
     /**
@@ -168,11 +196,11 @@ export class SBasePipeUninTool extends SGraphEdit {
      */
     computeUninNumber(type: number) {
         //  如果为二通
-        const topPoint = new SPoint(this.width / 2, 0);
-        const centerPoint = this.boundingRect().center();
-        const rightPoint = new SPoint(this.width, this.height / 2);
-        const leftPoint = new SPoint(0, this.height / 2);
-        const bottomPoint = new SPoint(this.width / 2, this.height)
+        const topPoint = new SPoint(0, -this.height/2);
+        const centerPoint = new SPoint(0,0)
+        const rightPoint = new SPoint(this.width/2, 0);
+        const leftPoint = new SPoint(-this.width/2, 0);
+        const bottomPoint = new SPoint(0, this.height/2)
         if (2 == type) {
             this.outLineLine = [topPoint, centerPoint, rightPoint];
         } else if (3 == type) {
@@ -180,7 +208,7 @@ export class SBasePipeUninTool extends SGraphEdit {
         } else if (4 == type) {
             this.outLineLine = [topPoint, centerPoint, rightPoint, leftPoint, centerPoint, bottomPoint];
         }
-        this.generatePath(this.outLineLine,this.radius)
+        this.generatePath(this.outLineLine, this.radius)
     }
 
 
@@ -242,6 +270,10 @@ export class SBasePipeUninTool extends SGraphEdit {
      */
     onDraw(painter: SPainter): void {
         super.onDraw(painter);
+        //设置旋转角度
+        if (this.angle != 0) {
+            painter.rotate(this.angle);
+        }
         const topPoint = this.outLineLine[0];
         const rightPoint = this.outLineLine[2];
         const leftPoint = this.outLineLine[3];
@@ -249,12 +281,6 @@ export class SBasePipeUninTool extends SGraphEdit {
         const pipeWidth = this.lineWidth;
         painter.pen.color = this.fillColor;
         painter.pen.lineWidth = this.lineWidth;
-        //设置旋转角度
-        if(this.angle != 0){
-            painter.rotate(this.angle);
-        }
-
-
         painter.drawPath(this.path);
         const lineWidth = this.lineWidth / 4;
         painter.pen.lineWidth = lineWidth;

src/components/editview/rightPropertyBar/BaseUnitPro.vue

@@ -2,6 +2,31 @@
 <template>
   <div class="base-pipe">
     <ul>
+      <!-- <li>
+        <div class="small-title">尺寸大小</div>
+        <div class="property">
+          <div>
+            <span>W</span>
+            <el-input
+              style="width: 74px; margin-left: 6px"
+              size="mini"
+              v-model="width"
+              @input="changeWidth"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+          <div>
+            <span>H</span>
+            <el-input
+              style="width: 74px; margin-left: 6px"
+              size="mini"
+              v-model="height"
+              @input="changeHeight"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+        </div>
+      </li> -->
       <li>
         <div class="small-title">属性</div>
         <div class="property">
@@ -17,7 +42,11 @@
             <span>颜色</span>
           </div>
           <div class="line-width">
-            <el-select v-model="angle"  @change="changeAngle" placeholder="请选择">
+            <el-select
+              v-model="angle"
+              @change="changeAngle"
+              placeholder="请选择"
+            >
               <el-option
                 v-for="item in angleList"
                 :key="item.value"
@@ -33,7 +62,7 @@
               style="width: 80px"
               v-model="linewidth"
               controls-position="right"
-              @change="changeWidth"
+              @change="changeLineWidth"
               size="mini"
               :min="1"
               :max="60"
@@ -69,11 +98,21 @@
 <script>
 import bus from "@/bus/bus";
 export default {
-  props: ["fillColor", "lineStyle", "lineWidth", "Radius","angles"],
+  props: [
+    "fillColor",
+    "lineStyle",
+    "lineWidth",
+    "Radius",
+    "angles",
+    "Width",
+    "Height",
+  ],
   data() {
     return {
       color: "",
       linewidth: "",
+      width:0,
+      height:0,
       corner: "1", // 默认直角
       radius: 0, // 圆角半径
       angleList: [
@@ -98,8 +137,14 @@ export default {
     };
   },
   methods: {
-    // 改变线宽
+    changeHeight(val) {
+      bus.$emit("updateStyle", "height", val);
+    },
     changeWidth(val) {
+      bus.$emit("updateStyle", "width", val);
+    },
+    // 改变线宽
+    changeLineWidth(val) {
       bus.$emit("updateStyle", "lineWidth", val);
     },
     // 改变颜色
@@ -117,10 +162,10 @@ export default {
       }
       bus.$emit("updateStyle", "radius", this.radius);
     },
-    changeAngle(val){
-      console.log('valval',val)
-        bus.$emit("updateStyle", "angle", val);
-    }
+    changeAngle(val) {
+      console.log("valval", val);
+      bus.$emit("updateStyle", "angle", val);
+    },
   },
   watch: {
     fillColor(val) {
@@ -139,6 +184,12 @@ export default {
     angles(val) {
       this.angle = val;
     },
+    Width(val) {
+      this.width = val;
+    },
+    Height(val) {
+      this.height = val;
+    },
   },
 };
 </script>

src/components/editview/rightPropertyBar/property.vue

@@ -67,6 +67,8 @@
     <BaseUnitPro
       :fillColor="fillColor"
       :lineWidth="lineWidth"
+      :Width="Width"
+      :Height="Height"
       :Radius="Radius"
       :angles="angles"
       v-show="itemType == 'BasePipeUninTool'"