ShangHaiAcquisitionPlatform/src/app/working-area/model/axLegend.ts

import { Sprite, Texture, Text, Graphics, Point } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';
import { AxShape } from './axShape';

/**
 * 安信图例形状
 */
export class AxLegend extends AxShape {
    // 数据
    public shapeMap: Map<string, Legend> = new Map<string, Legend>();
    pen: Graphics = new Graphics();
    // up: Sprite = new Sprite(this.pointTexture);
    // down: Sprite= new Sprite(this.pointTexture);
    // left: Sprite= new Sprite(this.pointTexture);
    // right: Sprite= new Sprite(this.pointTexture);
    upLeft: Sprite = new Sprite(this.pointTexture);
    upRight: Sprite = new Sprite(this.pointTexture);
    downLeft: Sprite = new Sprite(this.pointTexture);
    downRight: Sprite = new Sprite(this.pointTexture);
    /**
     *
     */
    constructor(assetData: any, workingArea: WorkingAreaComponent, shapeMap: Map<string, Legend>) {
        super(assetData, workingArea);
        this.angle = -this.workingArea.backgroundImage.angle;
        this.name = this.assetData.Id;
        this.pivot.set(this.assetData.PivotX, this.assetData.PivotY);
        this.x = this.assetData.Point.x;
        this.y = this.assetData.Point.y;
        this.scale.set(this.assetData.Scale);
        this.shapeMap = shapeMap;
        this.createPoint();
        this.refresh();
        this.sortableChildren = true;
        this.pen.zIndex = -1;
    }
    // 添加数据
    public addItem(item: Legend) {
        if (this.shapeMap.has(item.Name)) {
            this.shapeMap.get(item.Name).Count++;
            this.shapeMap.get(item.Name).Index++;
        } else {
            this.shapeMap.set(item.Name, item);
        }
        this.refresh();
    }
    // 删除数据
    public deleteItem(item: Legend) {
        if (this.shapeMap.has(item.Name)) {
            this.shapeMap.get(item.Name).Count--;
            if (this.shapeMap.get(item.Name).Count === 0) {
                this.shapeMap.delete(item.Name);
            }
        }
        this.refresh();
    }
    // 刷新
    refresh() {
        this.removeChildren();
        let index = 1;
        const offset = 25;
        let number = Number(this.assetData.PropertyInfos[0].PropertyValue);
        const width = 300;
        const height = 50;
        for (let i = 0; i < number; i++) {
            if (i >= this.shapeMap.size) { break; }
            const x = width * i;
            const textImage = new Text('图例', {
                fontSize: 20,
                fill: ['#0000ff'],
            });
            textImage.anchor.set(0.5);
            textImage.x = x;
            textImage.y = 0;
            this.addChild(textImage);

            const textName = new Text('名称' + ' 【数量】', {
                fontSize: 20,
                fill: ['#0000ff'],
            });
            textName.anchor.set(0, 0.5);
            textName.x = x + 32 + offset;
            textName.y = 0;
            this.addChild(textName);
        }
        for (const item of this.shapeMap.values()) {
            const x = index % number === 0 ? (number - 1) * width : (index % number - 1) * width;
            const y = Math.ceil(index / number) * height;
            const image: Sprite = Sprite.from(item.ImageUrl);
            image.width = 32;
            image.height = 32;
            image.anchor.set(0.5);
            image.x = x;
            image.y = y;
            this.addChild(image);

            const textName = new Text(item.Name + ' 【' + item.Count.toString() + '】', {
                fontSize: 20,
            });
            textName.anchor.set(0, 0.5);
            textName.x = x + image.width / 2 + offset;
            textName.y = y;
            this.addChild(textName);
            index++;
        }
        if (this.shapeMap.size > 0) {
            const rect = this.getLocalBounds();
            this.pen.clear();
            this.pen.beginFill(0xffffff, 1);
            this.pen.lineStyle(3, 0x000000);
            this.pen.moveTo(rect.left - offset, rect.top - offset);
            this.pen.lineTo(rect.right + offset, rect.top - offset);
            this.pen.lineTo(rect.right + offset, rect.bottom + offset);
            this.pen.lineTo(rect.left - offset, rect.bottom + offset);
            this.pen.closePath();
            this.pen.endFill();
        }
        this.addChild(this.pen);
        // 添加border
        this.addChild(this.border);
        // 添加控制点
        this.addChild(this.upLeft);
        this.addChild(this.upRight);
        this.addChild(this.downLeft);
        this.addChild(this.downRight);


        this.angle = -this.workingArea.backgroundImage.angle;
        this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
    }
    public createPoint() {
        // this.addChild(this.upLeft);
        this.upLeft.anchor.set(0.5);
        this.upLeft.interactive = true;
        this.upLeft.visible = false;
        this.upLeft
            .on('pointerdown', event => {
                event.stopPropagation();
                event.currentTarget.data = event.data;
                event.currentTarget.alpha = 0.5;
                event.currentTarget.dragging = true;

                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);

                const pointStart = this.position;
                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position));

                const delX = pointEnd.x - pointStart.x;
                const delY = pointEnd.y - pointStart.y;

                this.pivot.set(this.downRight.x, this.downRight.y);

                this.position.x += delX;
                this.position.y += delY;

                this.assetData.PivotX = this.pivot.x;
                this.assetData.PivotY = this.pivot.y;
                this.assetData.Point = new Point(this.x, this.y);
            })
            .on('pointerup', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointerupoutside', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointermove', event => {
                if (event.currentTarget.dragging) {
                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
                    const startPos = this.position;
                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
                    const width = (endPos.x - startPos.x);
                    const height = (endPos.y - startPos.y);
                    const scaleX = width / (this.width / this.scale.x);
                    const scaleY = height / (this.width / this.scale.x);
                    const angle = Math.abs(this.angle);
                    console.log(angle);
                    if (angle === 0) {
                        this.scale.set(-scaleX);
                    } else if (angle === 90) {
                        this.scale.set(scaleY);
                    } else if (angle === 180) {
                        this.scale.set(scaleX);
                    } else if (angle === 270) {
                        this.scale.set(-scaleY);
                    }
                    this.assetData.Scale = this.scale.x;
                }
            })
            .on('rightclick', event => {
                this.border.visible = false;
            });
        // this.addChild(this.upRight);
        this.upRight.anchor.set(0.5);
        this.upRight.interactive = true;
        this.upRight.visible = false;
        this.upRight
            .on('pointerdown', event => {
                event.stopPropagation();
                event.currentTarget.data = event.data;
                event.currentTarget.alpha = 0.5;
                event.currentTarget.dragging = true;

                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);

                const pointStart = this.position;
                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position));

                const delX = pointEnd.x - pointStart.x;
                const delY = pointEnd.y - pointStart.y;

                this.pivot.set(this.downLeft.x, this.downLeft.y);

                this.position.x += delX;
                this.position.y += delY;

                this.assetData.PivotX = this.pivot.x;
                this.assetData.PivotY = this.pivot.y;
                this.assetData.Point = new Point(this.x, this.y);
            })
            .on('pointerup', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointerupoutside', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointermove', event => {
                if (event.currentTarget.dragging) {
                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
                    const startPos = this.position;
                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
                    const width = (endPos.x - startPos.x);
                    const height = (endPos.y - startPos.y);
                    const scaleX = width / (this.width / this.scale.x);
                    const scaleY = height / (this.width / this.scale.x);
                    const angle = Math.abs(this.angle);
                    console.log(angle);
                    if (angle === 0) {
                        this.scale.set(scaleX);
                    } else if (angle === 90) {
                        this.scale.set(-scaleY);
                    } else if (angle === 180) {
                        this.scale.set(-scaleX);
                    } else if (angle === 270) {
                        this.scale.set(scaleY);
                    }
                    this.assetData.Scale = this.scale.x;
                }
            })
            .on('rightclick', event => {
                this.border.visible = false;
            });
        // this.addChild(this.downLeft);
        this.downLeft.anchor.set(0.5);
        this.downLeft.interactive = true;
        this.downLeft.visible = false;
        this.downLeft
            .on('pointerdown', event => {
                event.stopPropagation();
                event.currentTarget.data = event.data;
                event.currentTarget.alpha = 0.5;
                event.currentTarget.dragging = true;

                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);

                const pointStart = this.position;
                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position));

                const delX = pointEnd.x - pointStart.x;
                const delY = pointEnd.y - pointStart.y;

                this.pivot.set(this.upRight.x, this.upRight.y);

                this.position.x += delX;
                this.position.y += delY;

                this.assetData.PivotX = this.pivot.x;
                this.assetData.PivotY = this.pivot.y;
                this.assetData.Point = new Point(this.x, this.y);
            })
            .on('pointerup', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointerupoutside', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointermove', event => {
                if (event.currentTarget.dragging) {
                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
                    const startPos = this.position;
                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
                    const width = (endPos.x - startPos.x);
                    const height = (endPos.y - startPos.y);
                    const scaleX = width / (this.width / this.scale.x);
                    const scaleY = height / (this.width / this.scale.x);
                    const angle = Math.abs(this.angle);
                    console.log(angle);
                    if (angle === 0) {
                        this.scale.set(-scaleX);
                    } else if (angle === 90) {
                        this.scale.set(scaleY);
                    } else if (angle === 180) {
                        this.scale.set(scaleX);
                    } else if (angle === 270) {
                        this.scale.set(-scaleY);
                    }
                    this.assetData.Scale = this.scale.x;
                }
            })
            .on('rightclick', event => {
                this.border.visible = false;
            });
        // this.addChild(this.downRight);
        this.downRight.anchor.set(0.5);
        this.downRight.interactive = true;
        this.downRight.visible = false;
        this.downRight
            .on('pointerdown', event => {
                event.stopPropagation();
                event.currentTarget.data = event.data;
                event.currentTarget.alpha = 0.5;
                event.currentTarget.dragging = true;

                event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);

                const pointStart = this.position;
                const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position));

                const delX = pointEnd.x - pointStart.x;
                const delY = pointEnd.y - pointStart.y;

                this.pivot.set(this.upLeft.x, this.upLeft.y);

                this.position.x += delX;
                this.position.y += delY;

                this.assetData.PivotX = this.pivot.x;
                this.assetData.PivotY = this.pivot.y;
                this.assetData.Point = new Point(this.x, this.y);
            })
            .on('pointerup', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointerupoutside', event => {
                if (event.currentTarget.dragging) {
                    event.currentTarget.alpha = 1;
                    event.currentTarget.dragging = false;
                    event.currentTarget.data = null;
                }
            })
            .on('pointermove', event => {
                if (event.currentTarget.dragging) {
                    const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
                    const startPos = this.position;
                    const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition));
                    const width = (endPos.x - startPos.x);
                    const height = (endPos.y - startPos.y);
                    const scaleX = width / (this.width / this.scale.x);
                    const scaleY = height / (this.width / this.scale.x);
                    const angle = Math.abs(this.angle);
                    console.log(angle);
                    if (angle === 0) {
                        this.scale.set(scaleX);
                    } else if (angle === 90) {
                        this.scale.set(-scaleY);
                    } else if (angle === 180) {
                        this.scale.set(-scaleX);
                    } else if (angle === 270) {
                        this.scale.set(scaleY);
                    }
                    this.assetData.Scale = this.scale.x;
                }
            })
            .on('rightclick', event => {
                this.border.visible = false;
            });
    }
    /**
     * 设置点显示状态
     * @param value 显示状态
     */
    public setPointVisiable(value: boolean) {
        const rect = this.getLocalBounds();
        this.upLeft.x = rect.left;
        this.upLeft.y = rect.top;
        this.upRight.x = rect.right;
        this.upRight.y = rect.top;
        this.downLeft.x = rect.left;
        this.downLeft.y = rect.bottom;
        this.downRight.x = rect.right;
        this.downRight.y = rect.bottom;
        this.upLeft.visible = value;
        this.upRight.visible = value;
        this.downLeft.visible = value;
        this.downRight.visible = value;
    }
    /**
     *
     * @param scale 绘制边框
     */
    public drawBorder(scale: number) {
        const visible = this.upLeft.visible;
        this.setPointVisiable(false);

        super.drawBorder(scale);
        const rect = this.getLocalBounds();
        this.upLeft.x = rect.left;
        this.upLeft.y = rect.top;
        this.upRight.x = rect.right;
        this.upRight.y = rect.top;
        this.downLeft.x = rect.left;
        this.downLeft.y = rect.bottom;
        this.downRight.x = rect.right;
        this.downRight.y = rect.bottom;
        this.setPointVisiable(visible);
    }
}

export class Legend {
    public Name: string;
    public ImageUrl: string;
    public Count: number;
    public Index: number;
    /**
     *
     */
    constructor(name: string, imageUrl: string, count: number) {
        this.Name = name;
        this.ImageUrl = imageUrl;
        this.Count = count;
        this.Index = 1;
    }
}