examSystem-Anxin/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 } from 'pixi.js';
import { AxArrowConnector } from './axArrowConnector';

/**
 * 安信图片形状
 * 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;
    constructor(assetData: any, workingArea: WorkingAreaComponent) {
        super(assetData, workingArea);
        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-left
        this.upLeft = new PIXI.Sprite(this.pointTexture);
        this.upLeft.anchor.set(0.5);
        this.addChild(this.upLeft);
        this.upLeft.interactive = true;
        this.upLeft.visible = false;
        // up-right
        this.upRight = new PIXI.Sprite(this.pointTexture);
        this.upRight.anchor.set(0.5);
        this.addChild(this.upRight);
        this.upRight.interactive = true;
        this.upRight.visible = false;
        // down-left
        this.downLeft = new PIXI.Sprite(this.pointTexture);
        this.downLeft.anchor.set(0.5);
        this.addChild(this.downLeft);
        this.downLeft.interactive = true;
        this.downLeft.visible = false;
        // down-right
        this.downRight = new PIXI.Sprite(this.pointTexture);
        this.downRight.anchor.set(0.5);
        this.addChild(this.downRight);
        this.downRight.interactive = true;
        this.downRight.visible = false;
        ////



        if (this.assetData.CanConnect) {
            // connectPoint
            this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
            this.connectPoint.anchor.set(0.5);
            this.connectPoint.x = this.image.x;
            this.connectPoint.y = this.image.y;
            this.addChild(this.connectPoint);
            this.connectPoint.interactive = true;
            this.connectPoint
                .on('pointerdown', event => {
                    event.stopPropagation();
                    this.paintingPipeline(this.x, this.y);
                })
                .on('pointerover', event => {
                    this.setSelectionBox(true, this.connectPoint);
                })
                .on('pointerout', event => {
                    this.setSelectionBox(false);
                });   
            this.showConnectionPoint(false);
        }
        this.setItemScale(1 / this.workingArea.backgroundImage.scale.x);
    }
    // 设置选择框
    public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
        if (b) {
            this.selectionBox.lineStyle(2, 0x00EB00, 1);
            this.selectionBox.position = sprite.position;
            this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
        } else {
            this.selectionBox.clear();
        }
    }
    // 设置名称
    public setNameVisible(value: boolean, mode: GameMode) {
        if (this.assetData.GameMode === mode) {
            this.text.visible = value;
        }
    }
    // 显示连接点
    public showConnectionPoint(b: boolean) {
        this.connectPoint.visible = b;
    }
    /**
     * 设置点显示状态
     * @param value 显示状态
     */
    public setPointVisiable(value: boolean) {
        let 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) {
        let visible = this.upLeft.visible;
        this.setPointVisiable(false);
        
        super.drawBorder(scale);
        let 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);
    }
    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);
        }
    }
    paintingPipeline(x: number, y: number) {
        if (this.assetData.CanConnect) {
                    if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
                        if (this.workingArea.paintingShape === null) {
                            this.workingArea.previewLineSegment.visible = true;
                            this.workingArea.currentClickPoint.position =
                                new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
                            this.workingArea.paintPoints.push(new PIXI.Point(x, y));
                            const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
                            const list = [];
                            json.forEach(element => {
                                const property = new PropertyInfo(element);
                                list.push(property);
                            });
                            const tempData =  {
                                TemplateId: this.workingArea.canvasData.selectTemplateData.id,
                                CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
                                Pipelines: new Array(),
                                FloorId: this.workingArea.canvasData.selectStorey.id,
                                Angle: this.workingArea.canvasData.selectTemplateData.angle,
                                Color: this.workingArea.canvasData.selectTemplateData.color,
                                Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
                                FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
                                FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
                                FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
                                Height : 32,
                                Width : 32,
                                Id: ObjectID.default.generate(),
                                ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
                                InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
                                MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
                                Point: new PIXI.Point(0, 0),
                                Name : this.workingArea.canvasData.selectTemplateData.name,
                                PropertyInfos: list,
                                Border : this.workingArea.canvasData.selectTemplateData.border,
                                DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
                                Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
                                IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
                                GameMode: this.workingArea.canvasData.gameMode,
                                LinkedObjects: new Array(this.assetData.Id),
                                Tag: this.workingArea.canvasData.selectTemplateData.tag
                            };
                            this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true);
                            this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
                            this.workingArea.emit('createIcon', this.workingArea.paintingShape);
                        } else {
                            this.workingArea.previewLineSegment.visible = false;
                            this.workingArea.currentClickPoint.position =
                                new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
                            this.workingArea.paintPoints.push(new PIXI.Point(x, y));
                            this.workingArea.paintingShape.assetData.MultiPoint =
                                JSON.parse(JSON.stringify(this.workingArea.paintPoints));
                            this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
                            this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
                            this.workingArea.paintingShape.redraw();
                            this.workingArea.initPipelineData();
                        }
                    }
                }
    }
    // 刷新
    public refresh() {
        if (this.assetData.CanConnect) {

        }
        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;
        this.text.x = this.image.x;
        this.text.y = this.image.y - this.image.height / 2;
    }
}