<template>
    <div>
        <el-button @click="show">展示</el-button>
        <el-button @click="create">创建</el-button>
        <el-button @click="edit">编辑</el-button>
        <canvas id="editLine" width="740" height="400"  tabindex="0" />
    </div>
</template>
<script lang='ts'>
    import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/";
    import {SMouseEvent} from "@saga-web/base/";
    import {SColor, SLine, SPainter, SPoint, SRect} from "@saga-web/draw";
    import {SRelationState} from "@saga-web/big/lib/enums/SRelationState";
    import {SMathUtil} from "@saga-web/big/lib/utils/SMathUtil";

    /**
     * 直线item
     *
     * */

    class SLineItem extends SGraphItem {
        /** 线段   */
        line: SPoint[] = [];
        /** 是否完成绘制  */
        _status: SRelationState = SRelationState.Create;
        get status(): SRelationState {
            return this._status;
        }
        set status(v: SRelationState) {
            this._status = v;
            this.update();
        }
        /** 线条颜色    */
        _strokeColor: string = "#000000";
        get strokeColor(): string {
            return this._strokeColor;
        }
        set strokeColor(v: string) {
            this._strokeColor = v;
            this.update();
        }
        /** 填充色 */
        _fillColor: string = "#2196f3";
        get fillColor(): string {
            return this._fillColor;
        }
        set fillColor(v: string) {
            this._fillColor = v;
            this.update();
        }
        /** 线条宽度    */
        _lineWidth: number = 1;
        get lineWidth(): number {
            return this._lineWidth;
        }
        set lineWidth(v: number) {
            this._lineWidth = v;
            this.update();
        }
        /** 拖动灵敏度   */
        dis: number = 10;
        /** 拖动灵敏度   */
        sceneDis: number = 10;

        /**
         * 构造函数
         *
         * @param   parent  父级
         * @param   line    坐标集合
         * */
        constructor(parent: SGraphItem | null, line: SPoint[]);

        /**
         * 构造函数
         *
         * @param   parent  父级
         * @param   point   第一个点坐标
         * */
        constructor(parent: SGraphItem | null, point: SPoint);

        /**
         * 构造函数
         *
         * @param   parent  父级
         * @param   l       坐标集合|第一个点坐标
         * */
        constructor(parent: SGraphItem | null, l: SPoint | SPoint[]) {
            super(parent);
            if (l instanceof SPoint) {
                this.line.push(l);
            } else {
                this.line = l;
            }
        }

        /**
         * 鼠标按下事件
         *
         * @param   event   鼠标事件
         * @return  是否处理事件
         * */
        onMouseDown(event: SMouseEvent): boolean {
            console.log(this);
            if (this.status == SRelationState.Normal) {
                return super.onMouseDown(event);
            } else if (this.status == SRelationState.Edit) {
            } else if (this.status == SRelationState.Create) {

            }
            this.$emit("mousedown");
            return true;
        } // Function onMouseDown()

        /**
         * 鼠标移动事件
         *
         * @param   event   鼠标事件
         * @return  是否处理事件
         * */
        onMouseMove(event: SMouseEvent): boolean {
            if (this.status == SRelationState.Create) {

                return true;
            } else {
                return super.onMouseMove(event);
            }
        } // Function onMouseMove()

        /**
         * 鼠标移动事件
         *
         * @param   event   鼠标事件
         * @return  是否处理事件
         * */
        onMouseUp(event: SMouseEvent): boolean {
            // if (this.status == SRelationState.Create) {
            //     this.status = SRelationState.Edit;
            //     return true;
            // } else {
                return super.onMouseUp(event);
            // }
        } // Function onMouseUp()

        /**
         * 判断点是否在区域内
         *
         * @param   x
         * @param   y
         * @return  true-是
         */
        contains(x: number, y: number): boolean {
            if (this.line.length == 2) {
                let p = new SPoint(x, y);
                if (
                    SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1])).MinDis <
                    this.dis
                ) {
                    return true;
                }
            }
            return false;
        } // Function contains()

        /**
         * Item对象边界区域
         *
         * @return	SRect
         */
        boundingRect(): SRect {
            if (this.line.length == 2) {
                let x: number = this.line[0].x > this.line[1].x ? this.line[1].x : this.line[0].x;
                let y: number = this.line[0].x > this.line[1].x ? this.line[1].y : this.line[0].y;
                let width: number = Math.abs(this.line[0].x - this.line[1].x);
                let height: number = Math.abs(this.line[0].y - this.line[1].y);
                return new SRect(
                    x,
                    y,
                    width,
                    height
                );
            } else {
                return new SRect();
            }
        } // Function boundingRect()

        /**
         * Item绘制操作
         *
         * @param   painter painter对象
         */
        onDraw(painter: SPainter): void {
            this.sceneDis = painter.toPx(this.dis);
            painter.pen.lineWidth = painter.toPx(this.lineWidth);
            painter.pen.color = new SColor(this.strokeColor);
            if (this.p1 instanceof SPoint && this.p2 instanceof SPoint) {
                // 绘制外轮廓
                painter.brush.color = SColor.Transparent;
                painter.pen.color = new SColor("#128eee");
                painter.drawRect(this.boundingRect());

                // 绘制基本图形
                painter.pen.color = new SColor(this.strokeColor);// 需注释
                painter.drawLine(this.p1, this.p2);

                // 编辑态
                if (this.status == SRelationState.Edit) {
                    painter.brush.color = SColor.White;

                    // painter.brush.color = new SColor(this.fillColor);

                    painter.drawCircle(this.p1.x, this.p1.y, painter.toPx(5));

                    painter.drawCircle(this.p2.x, this.p2.y, painter.toPx(5));
                }
            }
        } // Function onDraw()
    } // Class SLineItem

    export default {
        data() {
            return {
                scene: null,
                view: null
            };
        },
        mounted(): void {
            this.view = new SGraphView("editLine");
        },
        methods: {
            show() {
                const scene = new SGraphScene();
                this.view.scene = scene;
                const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
                const lineItem = new SLineItem(null, line);
                lineItem.status = SRelationState.Normal;
                scene.addItem(lineItem);
                this.view.fitSceneToView();
            },
            create() {
                const scene = new SGraphScene();
                this.view.scene = scene;
                const lineItem = new SLineItem(null, [] );
                lineItem.status = SRelationState.Create;
                scene.addItem(lineItem);
                scene.grabItem = lineItem;
                this.view.fitSceneToView();
            },
            edit() {

            }
        }
    };
</script>