persagy-web-doc/docs/.vuepress/components/tuopu/items/EagleView.ts

import { SGraphView } from "@persagy-web/graph";
import { SMouseButton, SMouseEvent } from "@persagy-web/base/";
import { SPoint, SColor, SPainter, SRect } from "@persagy-web/draw/lib";
export class EagleView extends SGraphView {
    // 记录左键按下位置
    private _leftKeyPos: SPoint = new SPoint();
    // 可视区域即 大图中展示的区域 在 标准视图中的位置及大小
    // 可视区域宽度
    _rectW: number = 200;
    get rectW(): number {
        return this._rectW;
    }
    set rectW(v: number) {
        this._rectW = v;
        this.update()
    }
    // 可视区域高度
    _rectH: number = 100;
    get rectH(): number {
        return this._rectH;
    }
    set rectH(v: number) {
        this._rectH = v;
        this.update()
    }
    // 可视区域中心点
    rectC: SPoint = new SPoint(100, 100);
    // 可视区域描述的矩形
    rect: SRect = new SRect();
    // 鼠标按下的点是否在区域内
    inRect: boolean = false;

    /**
     * 鼠标按下事件
     *
     * @param event       事件参数
     */
    protected onMouseDown(event: MouseEvent): void {
        let se = new SMouseEvent(event);
        // 判断是否在可视区域内
        if (this.rect.contains(event.offsetX, event.offsetY)) {
            this.inRect = true;
        }
        // 设置可视区域中心点
        this.rectC.x = event.offsetX;
        this.rectC.y = event.offsetY;
        this.update();
        // 按下鼠标左键
        if (se.buttons & SMouseButton.LeftButton) {
            this._leftKeyPos.x = se.x;
            this._leftKeyPos.y = se.y;
        }
        // 将事件对象中的坐标转为场景坐标,并抛出事件
        // @ts-ignore
        const ev = this.toSceneMotionEvent(event);
        this.$emit('viewMouseMove', ev);
    }

    /**
     * 鼠标移动事件
     *
     * @param event       事件参数
     */
    protected onMouseMove(event: MouseEvent): void {
        // 按下的点如果在可视区域内,则执行移动可视区域方法
        if (this.inRect) {
            this.rectC.x = event.offsetX;
            this.rectC.y = event.offsetY;
            // @ts-ignore
            const ev = this.toSceneMotionEvent(event);
            this.$emit('viewMouseMove', ev);
            this.update();
        }
    }

    /**
     * 鼠标抬起事件
     *
     * @param event       事件参数
     */
    protected onMouseUp(event: MouseEvent): void {
        // 按键抬起时 初始化值
        this.inRect = false;
    }
    /**
     * 绘制前景
     *
     * @param painter 绘制对象
     */
    protected drawForeground(painter: SPainter): void {
        // 设置画笔,画刷样式
        painter.pen.color = new SColor('#efb42f');
        painter.pen.lineWidth = 2;
        painter.brush.color = new SColor('#efb42f38');
        // 绘制可视区域
        this.rect = new SRect(this.rectC.x - this.rectW / 2, this.rectC.y - this.rectH / 2, this.rectW, this.rectH);
        painter.drawRect(this.rect);
    }
}