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

import { WorkingAreaComponent } from '../working-area.component';
import * as ObjectID from 'bson-objectid';
import { GameMode } from './gameMode';
import { PaintMode } from './paintModel';
import * as PIXI from 'pixi.js';
import { PropertyInfo } from './PropertyInfo';
import { AxShape } from './axShape';
import { Sprite, Point, Rectangle } from 'pixi.js';
import { AxArrowConnector } from './axArrowConnector';
import { AxMessageSystem } from './axMessageSystem';
import { EVENT_IMAGE_RESIZE } from './events';

/**
 * 安信图片形状
 * AxImageShape
 */
export class AxImageShape extends AxShape {
    // connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
    style = new PIXI.TextStyle({
        fontFamily: 'Arial',
        fontSize: 18,
        fontStyle: 'normal',
        fontWeight: 'bold',
        fill: ['#000000'],
        stroke: '#ffffff',
        strokeThickness: 3,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 3,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 1,
        wordWrap: false,
        wordWrapWidth: 100,
    });


    text = new PIXI.Text(this.assetData.Name
        + '\r\n'
        + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);

    image: PIXI.Sprite;
    selectionBox = new PIXI.Graphics();

    connectPoint: Sprite;

    up: PIXI.Sprite;
    down: PIXI.Sprite;
    left: PIXI.Sprite;
    right: PIXI.Sprite;
    upLeft: PIXI.Sprite;
    upRight: PIXI.Sprite;
    downLeft: PIXI.Sprite;
    downRight: PIXI.Sprite;

    upDrag: boolean = false;
    downDrag: boolean = false;
    leftDrag: boolean = false;
    rightDrag: boolean = false;
    upLeftDrag: boolean = false;
    upRightDrag: boolean = false;
    downLeftDrag: boolean = false;
    downRightDrag: boolean = false;

    constructor(assetData: any, workingArea: WorkingAreaComponent) {
        super(assetData, workingArea);
        this.angle = -this.workingArea.backgroundImage.angle;
        this.x = this.assetData.Point.x;
        this.y = this.assetData.Point.y;
        this.name = this.assetData.Id;
        this.image = PIXI.Sprite.from(this.assetData.ImageUrl);
        this.image.angle = this.assetData.Angle;

        this.image.x = 0;
        this.image.y = 0;
        this.image.width = this.assetData.Width;
        this.image.height = this.assetData.Height;
        this.image.alpha = 1;
        this.image.anchor.set(0.5);
        this.text.x = this.image.x;
        this.text.y = this.image.y - this.image.height / 2;
        this.text.anchor.set(0.5, 1);
        this.text.visible = this.showName;
        this.addChild(this.text);
        this.addChild(this.image);
        this.addChild(this.selectionBox);

        // up
        this.up = new PIXI.Sprite(this.pointTexture);
        this.up.cursor = 'ns-resize';
        this.up.anchor.set(0.5);
        this.addChild(this.up);
        this.up.interactive = true;
        this.up.on('pointerdown', event => {
            this.upDrag = true;
            this.image.anchor.set(0.5, 1);
            this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
            event.stopPropagation();
        });
        this.up.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.upDrag) {
                var pos = this.toLocal(event.data.global);
                var dY = Math.abs(pos.y - this.image.y);
                this.assetData.Height = Math.abs(dY);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.up.on('pointerup', event => {
            if (this.upDrag) {
                this.upDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
            }
        });
        this.up.on('pointerupoutside', event => {
            if (this.upDrag) {
                this.upDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
            }
        });
        this.up.visible = false;
        // down
        this.down = new PIXI.Sprite(this.pointTexture);
        this.down.cursor = 'ns-resize';
        this.down.anchor.set(0.5);
        this.addChild(this.down);
        this.down.interactive = true;
        this.down.on('pointerdown', event => {
            this.downDrag = true;
            this.image.anchor.set(0.5, 0);
            this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2));
            event.stopPropagation();
        });
        this.down.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.downDrag) {
                var pos = this.toLocal(event.data.global);
                var dY = Math.abs(pos.y - this.image.y);
                this.assetData.Height = Math.abs(dY);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.down.on('pointerup', event => {
            if (this.downDrag) {
                this.downDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
            }
        });
        this.down.on('pointerupoutside', event => {
            if (this.downDrag) {
                this.downDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2));
            }
        });
        this.down.visible = false;
        // left
        this.left = new PIXI.Sprite(this.pointTexture);
        this.left.cursor = 'ew-resize';
        this.left.anchor.set(0.5);
        this.addChild(this.left);
        this.left.interactive = true;
        this.left.on('pointerdown', event => {
            this.leftDrag = true;
            this.image.anchor.set(1, 0.5);
            this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
            event.stopPropagation();
        });
        this.left.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.leftDrag) {
                var pos = this.toLocal(event.data.global);
                var dX = Math.abs(pos.x - this.image.x);
                this.assetData.Width = Math.abs(dX);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.left.on('pointerup', event => {
            if (this.leftDrag) {
                this.leftDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
            }
        });
        this.left.on('pointerupoutside', event => {
            if (this.leftDrag) {
                this.leftDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
            }
        });
        this.left.visible = false;
        // right
        this.right = new PIXI.Sprite(this.pointTexture);
        this.right.cursor = 'ew-resize';
        this.right.anchor.set(0.5);
        this.addChild(this.right);
        this.right.interactive = true;
        this.right.on('pointerdown', event => {
            this.rightDrag = true;
            this.image.anchor.set(0, 0.5);
            this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y);
            event.stopPropagation();
        });
        this.right.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.rightDrag) {
                var pos = this.toLocal(event.data.global);
                var dX = Math.abs(pos.x - this.image.x);
                this.assetData.Width = Math.abs(dX);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.right.on('pointerup', event => {
            if (this.rightDrag) {
                this.rightDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
            }
        });
        this.right.on('pointerupoutside', event => {
            if (this.rightDrag) {
                this.rightDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y);
            }
        });
        this.right.visible = false;
        // up-left
        this.upLeft = new PIXI.Sprite(this.pointTexture);
        this.upLeft.cursor = 'nwse-resize';
        this.upLeft.anchor.set(0.5);
        this.addChild(this.upLeft);
        this.upLeft.interactive = true;
        this.upLeft.on('pointerdown', event => {
            this.upLeftDrag = true;
            this.image.anchor.set(1);
            this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
            event.stopPropagation();
        });
        this.upLeft.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.upLeftDrag) {
                var pos = this.toLocal(event.data.global);
                var dX = Math.abs(pos.x - this.image.x);
                var dY = Math.abs(pos.y - this.image.y);
                var result = dX > dY ? dX : dY;
                this.assetData.Width = Math.abs(result);
                this.assetData.Height = Math.abs(result);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.upLeft.on('pointerup', event => {
            if (this.upLeftDrag) {
                this.upLeftDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
            }
        });
        this.upLeft.on('pointerupoutside', event => {
            if (this.upLeftDrag) {
                this.upLeftDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
            }
        });
        this.upLeft.visible = false;
        // up-right
        this.upRight = new PIXI.Sprite(this.pointTexture);
        this.upRight.cursor = 'nesw-resize';
        this.upRight.anchor.set(0.5);
        this.addChild(this.upRight);
        this.upRight.interactive = true;
        this.upRight.on('pointerdown', event => {
            this.upRightDrag = true;
            this.image.anchor.set(0, 1);
            this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
            event.stopPropagation();
        });
        this.upRight.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.upRightDrag) {
                var pos = this.toLocal(event.data.global);
                var dX = Math.abs(pos.x - this.image.x);
                var dY = Math.abs(pos.y - this.image.y);
                var result = dX > dY ? dX : dY;
                this.assetData.Width = Math.abs(result);
                this.assetData.Height = Math.abs(result);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.upRight.on('pointerup', event => {
            if (this.upRightDrag) {
                this.upRightDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
            }
        });
        this.upRight.on('pointerupoutside', event => {
            if (this.upRightDrag) {
                this.upRightDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
            }
        });
        this.upRight.visible = false;
        // down-left
        this.downLeft = new PIXI.Sprite(this.pointTexture);
        this.downLeft.cursor = 'nesw-resize';
        this.downLeft.anchor.set(0.5);
        this.addChild(this.downLeft);
        this.downLeft.interactive = true;
        this.downLeft.on('pointerdown', event => {
            this.downLeftDrag = true;
            this.image.anchor.set(1, 0);
            this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2));
            event.stopPropagation();
        });
        this.downLeft.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.downLeftDrag) {
                var pos = this.toLocal(event.data.global);
                var dX = Math.abs(pos.x - this.image.x);
                var dY = Math.abs(pos.y - this.image.y);
                var result = dX > dY ? dX : dY;
                this.assetData.Width = Math.abs(result);
                this.assetData.Height = Math.abs(result);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.downLeft.on('pointerup', event => {
            if (this.downLeftDrag) {
                this.downLeftDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
            }
        });
        this.downLeft.on('pointerupoutside', event => {
            if (this.downLeftDrag) {
                this.downLeftDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2));
            }
        });
        this.downLeft.visible = false;
        // down-right
        this.downRight = new PIXI.Sprite(this.pointTexture);
        this.downRight.cursor = 'nwse-resize';
        this.downRight.anchor.set(0.5);
        this.addChild(this.downRight);
        this.downRight.interactive = true;
        this.downRight.on('pointerdown', event => {
            this.downRightDrag = true;
            this.image.anchor.set(0, 0);
            this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
            event.stopPropagation();
        });
        this.downRight.on('pointermove', event => {
            // 移动时调整形状大小，然后重绘边框
            // 检查右下角距离鼠标的位置，
            if (this.downRightDrag) {
                var pos = this.toLocal(event.data.global);
                var dX = Math.abs(pos.x - this.image.x);
                var dY = Math.abs(pos.y - this.image.y);
                var result = dX > dY ? dX : dY;
                this.assetData.Width = Math.abs(result);
                this.assetData.Height = Math.abs(result);
                this.refresh();
                AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
            }

        });
        this.downRight.on('pointerup', event => {
            if (this.downRightDrag) {
                this.downRightDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
            }
        });
        this.downRight.on('pointerupoutside', event => {
            if (this.downRightDrag) {
                this.downRightDrag = false;
                this.image.anchor.set(0.5);
                this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
            }
        });
        this.downRight.visible = false;
        ////
        this.setItemScale(1 / this.workingArea.backgroundImage.scale.x);
    }
    // 设置名称
    public setNameVisible(value: boolean, mode: GameMode) {
        if (this.assetData.GameMode === mode) {
            this.text.visible = value;
        }
    }
    /**
     * 设置点显示状态
     * @param value 显示状态
     */
    public setPointVisiable(value: boolean) {
        const rect = this.getLocalBounds();
        this.up.x = rect.right - rect.width / 2;
        this.up.y = rect.top;
        this.down.x = rect.right - rect.width / 2;
        this.down.y = rect.bottom;
        this.left.x = rect.left;
        this.left.y = rect.bottom - rect.height / 2;
        this.right.x = rect.right;
        this.right.y = rect.bottom - rect.height / 2;
        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.up.visible = value;
        this.down.visible = value;
        this.left.visible = value;
        this.right.visible = value;
        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.up.x = rect.right - rect.width / 2;
        this.up.y = rect.top;
        this.down.x = rect.right - rect.width / 2;
        this.down.y = rect.bottom;
        this.left.x = rect.left;
        this.left.y = rect.bottom - rect.height / 2;
        this.right.x = rect.right;
        this.right.y = rect.bottom - rect.height / 2;
        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);
    }
    public setItemScale(scale: number) {
        if (this.assetData.FixedSize) {
            this.scale.set(scale);
        } else {
            // this.text.scale.set(scale);
            this.upLeft.scale.set(scale);
            this.upRight.scale.set(scale);
            this.downLeft.scale.set(scale);
            this.downRight.scale.set(scale);
            this.up.scale.set(scale);
            this.down.scale.set(scale);
            this.left.scale.set(scale);
            this.right.scale.set(scale);
        }
    }
    // 刷新
    public refresh() {
        this.image.width = this.assetData.Width;
        this.image.height = this.assetData.Height;
        this.image.angle = this.assetData.Angle;
        this.text.text = this.assetData.Name
            + '\r\n'
            + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;


        if (this.image.anchor.x == 0) {
            if (this.image.anchor.y == 0) {
                this.text.x = this.image.x + this.image.width / 2;
                this.text.y = this.image.y;
            } else if (this.image.anchor.y == 0.5) {
                this.text.x = this.image.x + this.image.width / 2;
                this.text.y = this.image.y - this.image.height / 2;
            } else if (this.image.anchor.y == 1) {
                this.text.x = this.image.x + this.image.width / 2;
                this.text.y = this.image.y - this.image.height;
            }

        } else if (this.image.anchor.x == 0.5) {
            if (this.image.anchor.y == 0) {
                this.text.x = this.image.x;
                this.text.y = this.image.y;
            } else if (this.image.anchor.y == 0.5) {

            } else if (this.image.anchor.y == 1) {
                this.text.x = this.image.x;
                this.text.y = this.image.y - this.image.height;
            }
        } else if (this.image.anchor.x == 1) {
            if (this.image.anchor.y == 0) {
                this.text.x = this.image.x - this.image.width / 2;
                this.text.y = this.image.y;
            } else if (this.image.anchor.y == 0.5) {
                this.text.x = this.image.x - this.image.width / 2;
                this.text.y = this.image.y - this.image.height / 2;
            } else if (this.image.anchor.y == 1) {
                this.text.x = this.image.x - this.image.width / 2;
                this.text.y = this.image.y - this.image.height;
            }
        }
        this.angle = -this.workingArea.backgroundImage.angle;
        this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
    }
}