Browse Source

新增item模块

YaolongHan 6 years ago
parent
commit
fb1acf932b

+ 63 - 0
src/assets/graphy/SGraphy/dataType.ts

@@ -0,0 +1,63 @@
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+import { SGraphyPolygonItem } from './newItems/SGraphyPolygonItem'
+/**
+ * 接口类型
+ * @param
+ * 传入绘制地图参数的数据类型
+ */
+//path 和paths 的接口类型
+interface dataItemPath {
+    X: number,
+    Y: number,
+    Z: number
+}
+// 一个空间item中的数据类型 
+//包括ColumnList EquipmentList,VirtualWallList,WallList
+interface dataItem {
+    Id: string,
+    Path?: dataItemPath[],
+    PointList: dataItemPath[],
+    BimId?: string,
+    LocationPoint?: dataItemPath,
+    Name?: string,
+    Paths?: dataItemPath[][],
+}
+// 一个空间item中的接口类型 
+// 包括SpaceList
+interface dataSpaceItem {
+    Id: string,
+    // PointList: dataItemPath[],
+    BimId: string,
+    LocationPoint: dataItemPath,
+    Name: string,
+    Paths: dataItemPath[][],
+    id:string
+}
+// 传入的data 的接口类型 
+interface dataInterface {
+    ColumnList: dataItem[],  //柱体
+    EquipmentList: dataItem[], //设备
+    SpaceList: dataSpaceItem[], //空间
+    VirtualWallList: dataItem[], //虚拟墙
+    WallList: dataItem[],    //墙
+}
+//获取绑定空间的接口
+interface businessDataInterface {
+    id:string,
+    name:string,
+    children:string[],
+    isAdjacent:boolean,
+    isAbut:boolean
+}
+// 多边形传入的参数接口
+interface PolygonItemInterface {
+    parent:SGraphyPolygonItem|null //父类
+    space:dataSpaceItem,       //传入的item 参数
+    businessId?:string | null,  //绑定的业务id
+    isBusiness?:number,        //业务类型
+    fillColor?:SColor,         //填充颜色
+    color?:SColor,             //边框颜色
+    businessName?:string|null,  //业务名称
+    width?:number
+}
+export {dataItemPath,dataItem,dataSpaceItem,dataInterface,businessDataInterface,PolygonItemInterface}

+ 154 - 0
src/assets/graphy/SGraphy/mainScene.ts

@@ -0,0 +1,154 @@
+
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SGraphyPolygonItem } from './newItems/SGraphyPolygonItem'
+import { SGraphyScene, SMouseEvent } from "@sybotan-web/graphy";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface } from './dataType'   //传入参数的参数接口类型
+
+/**
+ * @name mainScene
+ * @time 2019-07.07;
+ * 添加所有item的场景到scene中
+ */
+
+export default class mainScene extends SGraphyScene {
+
+    data: dataInterface;
+
+    private _isShowSpace: boolean = true;  // 是否显示空间;
+    private _isShowWallList: boolean = true;  //是否展示墙体;
+    private _isShowEquipmentList: boolean = true; //是否展示设备;
+    private _isShowVrtualWallList: boolean = true; //是否展示虚拟墙
+
+
+    // 设置是否显示空间
+    get isShowSpace(): boolean {
+        return this._isShowSpace
+    }
+    set isShowSpace(b: boolean) {
+        this._isShowSpace = b
+    }
+
+    // 设置是否显示墙
+    get isShowWallList(): boolean {
+        return this._isShowWallList
+    }
+    set isShowWallList(b: boolean) {
+        this._isShowWallList = b
+    }
+
+    // 设置是否显示设备
+    get isShowEquipmentList(): boolean {
+        return this._isShowEquipmentList
+    }
+    set isShowEquipmentList(b: boolean) {
+        this._isShowEquipmentList = b
+    }
+
+    // 设置是否显示虚拟墙
+    get isShowVrtualWallList(): boolean {
+        return this._isShowVrtualWallList
+    }
+    set isShowVrtualWallList(b: boolean) {
+        this._isShowVrtualWallList = b
+    }
+
+    /**
+     * @param data 绘制空间地图得所有参数
+     */
+
+    constructor(data: dataInterface) {
+        super()
+        this.data = data;
+        this.addAllItemList(data);
+    }
+
+    // 以下是绘制方法
+
+    /** 
+     * 增添所有绘制item(地图);
+    */
+    addAllItemList(data: dataInterface) {
+        let space: dataSpaceItem[] = data.SpaceList;
+        this.addSpaceList(space) //绘制空间
+    }
+
+    /**
+     * 添加所有空间到scene 中
+     * @param space 空间list
+     */
+    addSpaceList(space: dataSpaceItem[]): void {
+        if (space && space.length) {
+            for (let i = 0; i < space.length; i++) {
+                if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
+                    this.addItem(this.constructeItem(
+                        {
+                            parent: null,
+                            space: space[i]
+                        }));
+                }
+            }
+            for (let i = 0; i < space.length; i++) {
+                if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !space[i].Paths[1]) {
+                    this.addItem(this.constructeItem(
+                        {
+                            parent: null,
+                            space: space[i]
+                        }));
+                }
+            }
+        }
+    }
+    // 绘制墙体
+    addWallList(): void {
+
+    }
+    // 绘制设备
+    addEquipmentList() {
+    }
+    // 绘制柱体
+    addColumnListList(): void {
+    }
+    // 绘制虚拟墙
+    addVrtualWallList(): void {
+    }
+    /**
+     * 产生item实例
+     */
+    constructeItem(PolygonItemInterfaceData: PolygonItemInterface): SGraphyPolygonItem {
+        return new SGraphyPolygonItem(PolygonItemInterfaceData)
+    }
+    // 鼠标交互类事件
+
+    // 点击
+    click(_this: any, fn: any): void {
+        this.root.children.forEach(item => {
+            item.connect("click", _this, fn);
+        });
+    }
+    // 双击
+    dbclick(_this: any, fn: any): void {
+        this.root.children.forEach(item => {
+            item.connect("doubleClick", _this, fn);
+        });
+    }
+    // 按下
+    mouseDown(_this: any, fn: any){
+        this.root.children.forEach(item => {
+            item.connect("mouseDown", _this, fn);
+        });
+    } 
+    //移动
+    mouseMove(_this: any, fn: any){
+        this.root.children.forEach(item => {
+            item.connect("mouseMove", _this, fn);
+        });
+    } 
+    // 点解结束
+    mouseUp(_this: any, fn: any){
+        this.root.children.forEach(item => {
+            item.connect("mouseUp", _this, fn);
+        });
+    } 
+
+} 

+ 65 - 0
src/assets/graphy/SGraphy/newItems/SGraphyCircleItem.ts

@@ -0,0 +1,65 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy';
+import { SRect, SSize } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 圆Item类
+ *
+ */
+export class SGraphyCircleItem extends SGraphyItem {
+    r: number;
+    fillColor: SColor = SColor.White;
+    color: SColor = SColor.Black;
+    width: number = 1;
+
+    /**
+     * 构造函数
+     *
+     * @param r          圆半径
+     * @param width      圆线的宽度
+     * @param color      圆线的颜色
+     * @param fillColor  圆填充的颜色
+     * @param parent    
+     */
+    constructor(
+        parent: SGraphyItem | null,
+        r: number,
+        fillColor: SColor = SColor.White,
+        color: SColor = SColor.Black,
+        width: number = 1
+    ) {
+        super(parent);
+        this.r = r;
+        this.color = color;
+        this.fillColor = fillColor;
+        this.width = width;
+    } // Constructor()
+
+    /**
+     * Item对象边界区域
+     * 
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        return new SRect(
+            -this.r,
+            -this.r,
+            2 * this.r,
+            2 * this.r
+        );
+    } // Function boundingRect()
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        // painter.pen = new SPen(new SColor("#FF0000"), 22);
+        painter.pen.color = this.color;
+        painter.brush.color = this.fillColor;
+        painter.drawCircle(0, 0, this.r);
+    }
+} // Class SGraphyCircleItem

+ 197 - 0
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.ts

@@ -0,0 +1,197 @@
+
+import { SGraphyItem, SMouseEvent } from '@sybotan-web/graphy'
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor, SFont } from "@sybotan-web/draw";
+import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface } from './../dataType'   //传入参数的参数接口类型
+/**
+ * 不规则多边形Item类
+ *
+ */
+export class SGraphyPolygonItem extends SGraphyItem {
+	pointArr: SPoint[];
+	fillColor: SColor = SColor.White;
+	color: SColor = SColor.Black;
+	width: number = 100;
+	businessId: string | null;
+	id: string | null;
+	centerOfGravityPoint: { x: number, y: number };
+	businessName: null | string | undefined;
+	isBusiness: number = 1;
+	// actived: boolean = false; 				//是否激活
+	/**
+	 * 构造函数
+	 *
+	 * @param pointArr									点坐标list
+	 * @param width											边框的宽度
+	 * @param color											边框的颜色
+	 * @param fillColor   							多边形填充的颜色 
+	 * @param businessId								空间id
+	 * @param businessName							空间名称
+	 * @param centerOfGravityPoint			 中心点
+	 * @param isBusiness						状态
+	 * @param parent    
+	 */
+	constructor(PolygonItemData: PolygonItemInterface) {
+		super(PolygonItemData.parent);
+		// 修改绘制路径格式
+		let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(item => {
+			return new SPoint(item.X, -item.Y)
+		});
+		this.pointArr = newSpacePaths;
+		// // 填充色
+		PolygonItemData.fillColor ? this.fillColor = PolygonItemData.fillColor : this.fillColor = SColor.White;
+		// 边框色
+		PolygonItemData.color ? this.color = PolygonItemData.color : this.color = SColor.Black;
+		//边框宽度
+		PolygonItemData.width ? this.width = PolygonItemData.width : this.width = this.scale*100;
+		//中心点
+		this.centerOfGravityPoint = {
+			x: PolygonItemData.space.LocationPoint.X,
+			y: PolygonItemData.space.LocationPoint.Y
+		};
+		//业务空间类型
+		PolygonItemData.isBusiness ? this.isBusiness = PolygonItemData.isBusiness : this.isBusiness = 1;
+		//业务空间id
+		PolygonItemData.businessId ? this.businessId = PolygonItemData.businessId : this.businessId = null;
+		//业务空间名称
+		this.businessName = PolygonItemData.space.Name;
+		// 空间id
+		this.id = PolygonItemData.space.id;
+	}
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+	boundingRect(): SRect {
+		let minX = this.pointArr[0].x;
+		let maxX = minX;
+		let minY = this.pointArr[0].y;
+		let maxY = minY;
+		for (let i = 1; i < this.pointArr.length; i++) {
+			if (this.pointArr[i].x < minX) {
+				minX = this.pointArr[i].x
+			}
+			if (this.pointArr[i].y < minY) {
+				minY = this.pointArr[i].y
+			}
+			if (this.pointArr[i].x > maxX) {
+				maxX = this.pointArr[i].x
+			}
+			if (this.pointArr[i].y > maxY) {
+				maxY = this.pointArr[i].y
+			}
+		}
+
+		return new SRect(
+			minX,
+			minY,
+			maxX - minX,
+			maxY - minY
+		);
+	} // Function boundingRect()
+
+	/**
+	 * 判断点是否在区域内
+	 * 
+	 * @param x 
+	 * @param y 
+	 */
+	contains(x: number, y: number): boolean {
+		let nCross = 0,
+			point = [x, y],
+			APoints = this.pointArr,
+			length = APoints.length,
+			p1, p2, i, xinters;
+		p1 = APoints[0];
+		for (i = 1; i <= length; i++) {
+			p2 = APoints[i % length];
+			if (
+				point[0] > Math.min(p1.x, p2.x) &&
+				point[0] <= Math.max(p1.x, p2.x)
+			) {
+				if (point[1] <= Math.max(p1.y, p2.y)) {
+					if (p1.x != p2.x) {
+						//计算位置信息
+						xinters = (point[0] - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
+						if (p1.y == p2.y || point[1] <= xinters) {
+							nCross++
+						}
+					}
+				}
+			}
+			p1 = p2;
+		}
+		return nCross % 2 === 1
+	}
+	/**
+	 * Item绘制操作
+	 *
+	 * @param   painter       painter对象
+	 * @param   rect          绘制区域
+	 */
+	onDraw(painter: SPainter, rect?: SRect): void {
+		if (this.pointArr.length) {
+			painter.pen.color = this.color;
+			painter.brush.color = this.fillColor;
+			painter.pen.lineWidth = this.width;
+			painter.drawPolygon(this.pointArr)
+			let text = ''
+			if (this.businessName || this.businessId) {
+				text = '👇   ' + this.businessName
+			} else {
+				text = '⬇️   ' + this.businessName
+			}
+			painter.font.size = this.scale*200;
+			painter.drawText(text, this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+		}
+	}
+	onClick(event: SMouseEvent): boolean {
+		this.$emit('click', { item: this, event: event });
+		return true;
+	} // Function onClick()
+	/**
+  * 鼠标双击事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+	onDoubleClick(event: SMouseEvent): boolean {
+		this.$emit('doubleClick', { item: this, event: event });
+		return true;
+	}
+	/**
+  * 鼠标按下事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+	onMouseDown(event: SMouseEvent): boolean {
+		this.$emit('mouseDown', { item: this, event: event });
+		return true;
+	} // Function onMouseDown()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+	onMouseMove(event: SMouseEvent): boolean {
+		this.$emit('mouseMove', { item: this, event: event });
+		return true;
+	} // Function onMouseMove()
+
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+	onMouseUp(event: SMouseEvent): boolean {
+		this.$emit('mouseUp', { item: this, event: event });
+		return true;
+	}
+
+} // Class SGraphyPolygonItem

+ 76 - 0
src/assets/graphy/SGraphy/newItems/SGraphyRectItem.ts

@@ -0,0 +1,76 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy'
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 矩形Item类
+ *
+ */
+export class SGraphyRectItem extends SGraphyItem {
+  startX: number;
+  startY: number;
+  width: number;
+  height: number;
+  fillColor: SColor = SColor.White;
+  color: SColor = SColor.Black;
+  isVirtual: boolean = false;
+	/**
+	 * 构造函数
+	 *
+	 * @param startX      线的起始x坐标
+   * @param startY      线的起始y坐标
+   * @param width       矩形的宽度
+   * @param height      矩形的宽度
+	 * @param color       矩形边框的颜色 
+	 * @param fillColor   矩形填充的颜色 
+	 * @param parent    
+   * @param isVirtual   是否为虚线
+	 */
+  constructor(
+    parent: SGraphyItem | null,
+    startX: number,
+    startY: number,
+    width: number,
+    height: number,
+    fillColor: SColor = SColor.White,
+    color: SColor = SColor.Black,
+    isVirtual: boolean = false
+  ) {
+    super(parent);
+    this.startX = startX
+    this.startY = startY
+    this.width = width;
+    this.height = height
+    this.color = color;
+    this.fillColor = fillColor;
+    this.isVirtual = isVirtual;
+  } // Constructor()
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+  boundingRect(): SRect {
+    return new SRect(
+      this.startX,
+      this.startY,
+      this.width,
+      this.height
+    );
+  } // Function boundingRect()
+
+	/**
+	 * Item绘制操作
+	 *
+	 * @param   painter       painter对象
+	 * @param   rect          绘制区域
+	 */
+  onDraw(painter: SPainter, rect?: SRect): void {
+    // painter.pen = new SPen(this.color, this.width);
+    painter.pen.color = this.color;
+    painter.brush.color = this.fillColor;
+    painter.drawRect(this.startX,this.startY,this.width,this.height)
+  }
+} // Class SGraphyRectItem

+ 89 - 0
src/assets/graphy/SGraphy/newItems/SGraphyWallItem.ts

@@ -0,0 +1,89 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy'
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 墙Item类
+ *
+ */
+export class SGraphyWallItem extends SGraphyItem {
+	pointArr: SPoint[];
+	isVirtual: boolean = false;
+	fillColor: SColor = SColor.White;
+	color: SColor = SColor.Black;
+	width: number = 1;
+	/**
+	 * 构造函数
+	 *
+	 * @param pointArr  		点坐标list
+	 * @param isVirtual 		墙类型(实体墙-虚拟墙)
+	 * @param color  				墙的颜色
+	 * @param fillColor  		墙的填充颜色
+	 * @param width   			墙的宽度
+	 * @param parent    
+	 */
+	constructor(
+		parent: SGraphyItem | null,
+		pointArr: SPoint[],
+		isVirtual: boolean = false,
+		fillColor: SColor = SColor.White,
+		color: SColor = SColor.Black,
+		width: number = 1,
+	) {
+		super(parent);
+		this.isVirtual = isVirtual;
+		this.pointArr = pointArr;
+		this.color = color;
+		this.fillColor = fillColor;
+		this.width = width;
+	} // Constructor()
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+	boundingRect(): SRect {
+		let minX = this.pointArr[0].x;
+		let maxX = minX;
+		let minY = this.pointArr[0].y;
+		let maxY = minY;
+		for (let i = 1; i < this.pointArr.length; i++) {
+			if (this.pointArr[i].x < minX) {
+				minX = this.pointArr[i].x
+			}
+			if (this.pointArr[i].y < minY) {
+				minY = this.pointArr[i].y
+			}
+			if (this.pointArr[i].x > maxX) {
+				maxX = this.pointArr[i].x
+			}
+			if (this.pointArr[i].y > maxY) {
+				maxY = this.pointArr[i].y
+			}
+		}
+
+		return new SRect(
+			minX,
+			minY,
+			maxX - minX,
+			maxY - minY
+		);
+	} // Function boundingRect()
+
+	/**
+	 * Item绘制操作
+	 *
+	 * @param   painter       painter对象
+	 * @param   rect          绘制区域
+	 */
+	onDraw(painter: SPainter, rect?: SRect): void {
+		if (this.pointArr.length) {
+			// painter.pen = new SPen(this.color, this.width);
+			painter.pen.color = this.color;
+			painter.brush.color = this.fillColor;
+			painter.drawPolyline(this.pointArr)
+		}
+	}
+} // Class SGraphyPolygonItem