database/ui-worker/ProcedureWorkerTimeline.ts

/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {ns2s, Rect, Render, RequestMessage} from "./ProcedureWorkerCommon.js";
import {CpuStruct} from "../../bean/CpuStruct.js";
import {ColorUtils} from "../../component/trace/base/ColorUtils.js";

//绘制时间轴
let timeRuler: TimeRuler | undefined;
let rangeRuler: RangeRuler | undefined;
let sportRuler: SportRuler | undefined;
let offsetTop: number = 0;
let offsetLeft: number = 0;

export class TimelineRender extends Render{
    render(req: RequestMessage, list: Array<any>, filter: Array<any>){
        timeline(req.canvas, req.context, req.startNS, req.endNS, req.totalNS, req.frame,
            req.params.keyPressCode, req.params.keyUpCode,
            req.params.mouseDown, req.params.mouseUp,
            req.params.mouseMove, req.params.mouseOut,
            req.params.offsetLeft, req.params.offsetTop,
            (a: any) => {
                //@ts-ignore
                self.postMessage({
                    id: "timeline",
                    type: "timeline-range-changed",
                    results: a,
                });
            }
        );
        // @ts-ignore
        self.postMessage({
            id: req.id,
            type: req.type,
            results: null,
        });
    }
}

// @ts-ignore
export function timeline(canvas: OffscreenCanvas, ctx: OffscreenCanvasRenderingContext2D, startNS: number, endNS: number, totalNS: number, frame: Rect, keyPressCode: any, keyUpCode: any, mouseDown: any, mouseUp: any, mouseMove: any, mouseOut: any, _offsetLeft: number, _offsetTop: number, changeHandler: Function) {
    offsetLeft = _offsetLeft;
    offsetTop = _offsetTop;
    if (timeRuler == undefined) {
        timeRuler = new TimeRuler(canvas, ctx, new Rect(0, 0, frame.width, 20), totalNS);
    }
    if (!sportRuler) {
        sportRuler = new SportRuler(canvas, ctx, new Rect(0, 100.5, frame.width, frame.height - 100));
    }
    if (!rangeRuler) {
        rangeRuler = new RangeRuler(canvas, ctx!, new Rect(0, 25, frame.width, 75), {
            startX: 0,
            endX: frame.width,
            startNS: 0,
            endNS: totalNS,
            totalNS: totalNS,
            xs: [],
            xsTxt: []
        }, (a) => {
            if (sportRuler) {
                sportRuler.range = a;
            }
            changeHandler(a);
        });
    }

    rangeRuler.frame.width = frame.width;
    sportRuler.frame.width = frame.width;
    timeRuler.frame.width = frame.width;
    if (keyPressCode) {
        rangeRuler.keyPress(keyPressCode);
    } else if (keyUpCode) {
        rangeRuler.keyUp(keyUpCode);
    } else if (mouseDown) {
        rangeRuler.mouseDown(mouseDown);
    } else if (mouseUp) {
        rangeRuler.mouseUp(mouseUp);
    } else if (mouseMove) {
        rangeRuler.mouseMove(mouseMove);
    } else if (mouseOut) {
        rangeRuler.mouseOut(mouseOut);
    } else {
        timeRuler.draw();
        rangeRuler.draw();
    }
}

export abstract class Graph {
    // @ts-ignore
    c: OffscreenCanvasRenderingContext2D;
    // @ts-ignore
    canvas: OffscreenCanvas | undefined | null;
    frame: Rect;

    // @ts-ignore
    protected constructor(canvas: OffscreenCanvas | undefined | null, c: OffscreenCanvasRenderingContext2D, frame: Rect) {
        this.canvas = canvas;
        this.frame = frame;
        this.c = c;
    }

    abstract draw(): void;
}

export class TimeRuler extends Graph {
    totalNS: number
    private stepSmall: number;
    private step: number;
    private stepNS: number;

    // @ts-ignore
    constructor(canvas: OffscreenCanvas | undefined | null, c: OffscreenCanvasRenderingContext2D, frame: Rect, totalNS: number = 10_000_000_000) {
        super(canvas, c, frame)
        this.totalNS = totalNS;
        this.step = this.frame.width / 10;
        this.stepSmall = this.frame.width / 100;
        this.stepNS = this.totalNS / 10;
    }

    draw() {
        this.step = this.frame.width / 10;
        this.stepSmall = this.frame.width / 100;
        this.stepNS = this.totalNS / 10;
        this.c.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height)
        this.c.beginPath();
        this.c.strokeStyle = "#999"
        this.c.lineWidth = 1;
        for (let i = 0; i <= 10; i++) {
            let x = Math.floor(i * this.step) + this.frame.x;
            this.c.moveTo(x, 0);
            this.c.lineTo(x, this.frame.height);
            if (i == 10) break;
            for (let j = 1; j < 10; j++) {
                this.c.moveTo(x + Math.floor(j * this.stepSmall), 0);
                this.c.lineTo(x + Math.floor(j * this.stepSmall), this.frame.height / 4);
            }
            this.c.fillStyle = '#999'
            this.c.fillText(`${ns2s(i * this.stepNS)}`, x + 5, this.frame.height - 1)
        }
        this.c.stroke();
        this.c.closePath();
    }
}

/**
 * SportRuler
 */
export class SportRuler extends Graph {
    public static rulerFlagObj: Flag | null = null;
    public flagList: Array<Flag> = [];
    public flagListIdx: number | null = null
    public obj = [{x: 3}, {x: 2}];
    lineColor: string | null = null;
    private rangeFlag = new Flag(0, 0, 0, 0, 0);
    private ruler_w = 1022;
    private _range: TimeRange = {} as TimeRange;

    // @ts-ignore
    constructor(canvas: OffscreenCanvas | undefined | null, c: OffscreenCanvasRenderingContext2D, frame: Rect) {
        super(canvas, c, frame)
    }

    get range(): TimeRange {
        return this._range;
    }

    set range(value: TimeRange) {
        this._range = value;
        this.draw()
    }

    modifyFlagList(type: string, flag: any = {}) {
        if (type == "amend") {
            if (flag.text && this.flagListIdx !== null) {
                this.flagList[this.flagListIdx].text = flag.text
            }
            if (flag.color && this.flagListIdx !== null) {
                this.flagList[this.flagListIdx].color = flag.color
            }
        } else if (type == "remove") {
            if (this.flagListIdx !== null) {
                this.flagList.splice(this.flagListIdx, 1)
            }
        }
        this.draw()
    }

    draw(): void {
        this.ruler_w = this.frame.width;
        this.c.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height)
        this.c.beginPath();
        this.lineColor = "#dadada";
        this.c.strokeStyle = this.lineColor //"#dadada"
        this.c.lineWidth = 1;
        this.c.moveTo(this.frame.x, this.frame.y)
        this.c.lineTo(this.frame.x + this.frame.width, this.frame.y)
        this.c.stroke();
        this.c.closePath();
        this.c.beginPath();
        this.c.lineWidth = 3;
        this.c.strokeStyle = "#999999"
        this.c.moveTo(this.frame.x, this.frame.y)
        this.c.lineTo(this.frame.x, this.frame.y + this.frame.height)
        this.c.stroke();
        this.c.closePath();
        this.c.beginPath();
        this.c.lineWidth = 1;
        this.c.strokeStyle = this.lineColor;//"#999999"
        this.c.fillStyle = '#999999'
        this.c.font = '8px sans-serif'
        this.range.xs?.forEach((it, i) => {
            this.c.moveTo(it, this.frame.y)
            this.c.lineTo(it, this.frame.y + this.frame.height)
            this.c.fillText(`+${this.range.xsTxt[i]}`, it + 3, this.frame.y + 12)
        })

        this.c.stroke();
        this.c.closePath();
    }

    // drawTheFlag
    drawTheFlag(x: number, color: string = "#999999", isFill: boolean = false, text: string = "") {
        this.c.beginPath();
        this.c.fillStyle = color;
        this.c.strokeStyle = color;
        this.c.moveTo(x, 125);
        this.c.lineTo(x + 10, 125);
        this.c.lineTo(x + 10, 127);
        this.c.lineTo(x + 18, 127);
        this.c.lineTo(x + 18, 137);
        this.c.lineTo(x + 10, 137);
        this.c.lineTo(x + 10, 135);
        this.c.lineTo(x + 2, 135);
        this.c.lineTo(x + 2, 143);
        this.c.lineTo(x, 143);
        this.c.closePath()
        if (isFill) {
            this.c.fill()
        }
        this.c.stroke();


        if (text !== "") {
            this.c.font = "10px Microsoft YaHei"
            const {width} = this.c.measureText(text);
            this.c.fillStyle = 'rgba(255, 255, 255, 0.8)'; //
            this.c.fillRect(x + 21, 132, width + 4, 12);
            this.c.fillStyle = "black";
            this.c.fillText(text, x + 23, 142);
            this.c.stroke();
        }
    }

    //随机生成十六位进制颜色
    randomRgbColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)]
        }
        return color;
    }

    //鼠标点击绘画旗子、点击旗子
    mouseUp(ev: MouseEvent) {
    }

    //选中的旗子
    onFlagRangeEvent(flagObj: Flag, idx: number) {
        SportRuler.rulerFlagObj = flagObj;
        this.flagListIdx = idx;
    }

    //鼠标移动 绘画旗子
    mouseMove(ev: MouseEvent) {
        let x = ev.offsetX - (offsetLeft || 0)
        let y = ev.offsetY - (offsetTop || 0)
        if (y >= 50 && y < 200) {
            this.draw()
            if (y >= 123 && y < 142 && x > 0) {
                let onFlagRange = this.flagList.findIndex((flagObj: Flag) => {
                    let flag_x = Math.round(this.ruler_w * (flagObj.time - this.range.startNS) / (this.range.endNS - this.range.startNS));
                    return (x >= flag_x && x <= flag_x + 18)
                });
            }
        }
    }
}

const markPadding = 5;

export class Mark extends Graph {
    name: string | undefined
    inspectionFrame: Rect
    private _isHover: boolean = false

    // @ts-ignore
    constructor(canvas: OffscreenCanvas | undefined | null, name: string, c: OffscreenCanvasRenderingContext2D, frame: Rect) {
        super(canvas, c, frame);
        this.name = name;
        this.inspectionFrame = new Rect(frame.x - markPadding, frame.y, frame.width + markPadding * 2, frame.height)
    }

    get isHover(): boolean {
        return this._isHover;
    }

    set isHover(value: boolean) {
        this._isHover = value;
    }

    draw(): void {
        this.c.beginPath();
        this.c.lineWidth = 7
        this.c.strokeStyle = '#999999'
        this.c.moveTo(this.frame.x, this.frame.y);
        this.c.lineTo(this.frame.x, this.frame.y + this.frame.height / 3)
        this.c.stroke();
        this.c.lineWidth = 1
        this.c.strokeStyle = '#999999'
        this.c.moveTo(this.frame.x, this.frame.y);
        this.c.lineTo(this.frame.x, this.frame.y + this.frame.height)
        this.c.stroke();
        this.c.closePath();
    }
}

export interface TimeRange {
    totalNS: number
    startX: number
    endX: number
    startNS: number
    endNS: number
    xs: Array<number>
    xsTxt: Array<string>
}

export class RangeRuler extends Graph {
    public rangeRect: Rect
    public markA: Mark
    public markB: Mark
    public range: TimeRange;
    mouseDownOffsetX = 0
    mouseDownMovingMarkX = 0
    movingMark: Mark | undefined | null;
    isMouseDown: boolean = false;
    isMovingRange: boolean = false;
    isNewRange: boolean = false;
    markAX: number = 0;
    markBX: number = 0;
    isPress: boolean = false
    pressFrameId: number = -1
    currentDuration: number = 0
    centerXPercentage: number = 0;
    animaStartTime: number | undefined
    animTime: number = 100;
    p: number = 800;
    private readonly notifyHandler: (r: TimeRange) => void;
    private scale: number = 0;
    //缩放级别
    private scales: Array<number> = [50, 100, 200, 500, 1_000, 2_000, 5_000, 10_000, 20_000, 50_000, 100_000, 200_000, 500_000,
        1_000_000, 2_000_000, 5_000_000, 10_000_000, 20_000_000, 50_000_000, 100_000_000, 200_000_000, 500_000_000,
        1_000_000_000, 2_000_000_000, 5_000_000_000, 10_000_000_000, 20_000_000_000, 50_000_000_000,
        100_000_000_000, 200_000_000_000, 500_000_000_000];
    private _cpuUsage: Array<{ cpu: number, ro: number, rate: number }> = []

    // @ts-ignore
    constructor(canvas: OffscreenCanvas | undefined | null, c: OffscreenCanvasRenderingContext2D, frame: Rect, range: TimeRange, notifyHandler: (r: TimeRange) => void) {
        super(canvas, c, frame)
        this.range = range;
        this.notifyHandler = notifyHandler;
        this.markA = new Mark(canvas, 'A', c, new Rect(range.startX, frame.y, 1, frame.height))
        this.markB = new Mark(canvas, 'B', c, new Rect(range.endX, frame.y, 1, frame.height))
        this.rangeRect = new Rect(range.startX, frame.y, range.endX - range.startX, frame.height)
    }

    set cpuUsage(value: Array<{ cpu: number, ro: number, rate: number }>) {
        this._cpuUsage = value
        this.draw();
    }

    drawCpuUsage() {
        let maxNum = Math.round(this._cpuUsage.length / 100)
        let miniHeight = Math.round(this.frame.height / CpuStruct.cpuCount);//每格高度
        let miniWidth = Math.ceil(this.frame.width / 100);//每格宽度
        for (let i = 0; i < this._cpuUsage.length; i++) {
            //cpu: 0, ro: 0, rate: 0.987620037556431
            let it = this._cpuUsage[i]
            this.c.fillStyle = ColorUtils.MD_PALETTE[it.cpu]
            this.c.globalAlpha = it.rate
            this.c.fillRect(this.frame.x + miniWidth * it.ro, this.frame.y + it.cpu * miniHeight, miniWidth, miniHeight)
        }
    }

    draw(discardNotify: boolean = false): void {
        this.c.clearRect(this.frame.x - markPadding, this.frame.y, this.frame.width + markPadding * 2, this.frame.height)
        this.c.beginPath();
        if (this._cpuUsage.length > 0) {
            this.drawCpuUsage()
            this.c.globalAlpha = 0;
        } else {
            this.c.globalAlpha = 1;
        }
        //绘制选中区域
        this.c.fillStyle = "#ffffff";
        this.rangeRect.x = this.markA.frame.x < this.markB.frame.x ? this.markA.frame.x : this.markB.frame.x
        this.rangeRect.width = Math.abs(this.markB.frame.x - this.markA.frame.x)
        this.c.fillRect(this.rangeRect.x, this.rangeRect.y, this.rangeRect.width, this.rangeRect.height)
        this.c.globalAlpha = 1;
        this.c.globalAlpha = .5;
        this.c.fillStyle = "#999999"
        this.c.fillRect(this.frame.x, this.frame.y, this.rangeRect.x, this.rangeRect.height)
        this.c.fillRect(this.rangeRect.x + this.rangeRect.width, this.frame.y, this.frame.width - this.rangeRect.width, this.rangeRect.height)
        this.c.globalAlpha = 1;
        this.c.closePath();
        this.markA.draw();
        this.markB.draw();
        if (this.notifyHandler) {
            this.range.startX = this.rangeRect.x
            this.range.endX = this.rangeRect.x + this.rangeRect.width
            this.range.startNS = this.range.startX * this.range.totalNS / (this.frame.width || 0)
            this.range.endNS = this.range.endX * this.range.totalNS / (this.frame.width || 0)
            let l20 = (this.range.endNS - this.range.startNS) / 20;
            let min = 0;
            let max = 0;
            let weight = 0;
            for (let index = 0; index < this.scales.length; index++) {
                if (this.scales[index] > l20) {
                    if (index > 0) {
                        min = this.scales[index - 1];
                    } else {
                        min = 0;
                    }
                    max = this.scales[index];
                    weight = (l20 - min) * 1.0 / (max - min);
                    if (weight > 0.243) {
                        this.scale = max;
                    } else {
                        this.scale = min;
                    }
                    break;
                }
            }
            if (this.scale == 0) {
                this.scale = this.scales[0];
            }
            let tmpNs = 0;
            let yu = this.range.startNS % this.scale;
            let realW = (this.scale * this.frame.width) / (this.range.endNS - this.range.startNS);
            let startX = 0;
            if (this.range.xs) {
                this.range.xs.length = 0
            } else {
                this.range.xs = []
            }
            if (this.range.xsTxt) {
                this.range.xsTxt.length = 0
            } else {
                this.range.xsTxt = []
            }
            if (yu != 0) {
                let firstNodeWidth = ((this.scale - yu) / this.scale * realW);
                startX += firstNodeWidth;
                tmpNs += yu;
                this.range.xs.push(startX)
                this.range.xsTxt.push(ns2s(tmpNs))
            }
            while (tmpNs < this.range.endNS - this.range.startNS) {
                startX += realW;
                tmpNs += this.scale;
                this.range.xs.push(startX)
                this.range.xsTxt.push(ns2s(tmpNs))
            }
            if (!discardNotify) {
                this.notifyHandler(this.range)
            }
        }
    }

    mouseDown(ev: MouseEvent) {
        let x = ev.offsetX - (offsetLeft || 0)
        let y = ev.offsetY - (offsetTop || 0)
        this.isMouseDown = true;
        this.mouseDownOffsetX = x;
        if (this.markA.isHover) {
            this.movingMark = this.markA;
            this.mouseDownMovingMarkX = this.movingMark.frame.x || 0
        } else if (this.markB.isHover) {
            this.movingMark = this.markB;
            this.mouseDownMovingMarkX = this.movingMark.frame.x || 0
        } else {
            this.movingMark = null;
        }
        if (this.rangeRect.containsWithPadding(x, y, 5, 0)) {
            this.isMovingRange = true;
            this.markAX = this.markA.frame.x;
            this.markBX = this.markB.frame.x;
        } else if (this.frame.containsWithMargin(x, y, 20, 0, 0, 0) && !this.rangeRect.containsWithMargin(x, y, 0, markPadding, 0, markPadding)) {
            this.isNewRange = true;
        }
    }

    mouseUp(ev: MouseEvent) {
        this.isMouseDown = false;
        this.isMovingRange = false;
        this.isNewRange = false;
        this.movingMark = null;
    }

    mouseMove(ev: MouseEvent) {
        let x = ev.offsetX - (offsetLeft || 0);
        let y = ev.offsetY - (offsetTop || 0)
        this.centerXPercentage = x / (this.frame.width || 0)
        if (this.centerXPercentage <= 0) {
            this.centerXPercentage = 0
        } else if (this.centerXPercentage >= 1) {
            this.centerXPercentage = 1
        }
        let maxX = this.frame.width || 0
        if (this.markA.inspectionFrame.contains(x, y)) {
            this.markA.isHover = true
        } else if (this.markB.inspectionFrame.contains(x, y)) {
            this.markB.isHover = true;
        } else {
            this.markA.isHover = false;
            this.markB.isHover = false;
        }
        if (this.movingMark) {
            let result = x - this.mouseDownOffsetX + this.mouseDownMovingMarkX;
            if (result >= 0 && result <= maxX) {
                this.movingMark.frame.x = result
            } else if (result < 0) {
                this.movingMark.frame.x = 0
            } else {
                this.movingMark.frame.x = maxX
            }
            this.movingMark.inspectionFrame.x = this.movingMark.frame.x - markPadding
            requestAnimationFrame(() => this.draw());
        }
        if (this.isMovingRange && this.isMouseDown) {
            let result = x - this.mouseDownOffsetX;
            let mA = result + this.markAX
            let mB = result + this.markBX
            if (mA >= 0 && mA <= maxX) {
                this.markA.frame.x = mA
            } else if (mA < 0) {
                this.markA.frame.x = 0
            } else {
                this.markA.frame.x = maxX
            }
            this.markA.inspectionFrame.x = this.markA.frame.x - markPadding
            if (mB >= 0 && mB <= maxX) {
                this.markB.frame.x = mB;
            } else if (mB < 0) {
                this.markB.frame.x = 0
            } else {
                this.markB.frame.x = maxX
            }
            this.markB.inspectionFrame.x = this.markB.frame.x - markPadding
            requestAnimationFrame(() => this.draw());
        } else if (this.isNewRange) {
            this.markA.frame.x = this.mouseDownOffsetX;
            this.markA.inspectionFrame.x = this.mouseDownOffsetX - markPadding;
            if (x >= 0 && x <= maxX) {
                this.markB.frame.x = x;
            } else if (x < 0) {
                this.markB.frame.x = 0;
            } else {
                this.markB.frame.x = maxX;
            }
            this.markB.inspectionFrame.x = this.markB.frame.x - markPadding;
            requestAnimationFrame(() => this.draw());
        }
    }

    mouseOut(ev: MouseEvent) {
        this.movingMark = null;
    }

    fillX() {
        if (this.range.startNS < 0) this.range.startNS = 0;
        if (this.range.endNS < 0) this.range.endNS = 0;
        if (this.range.endNS > this.range.totalNS) this.range.endNS = this.range.totalNS;
        if (this.range.startNS > this.range.totalNS) this.range.startNS = this.range.totalNS;
        this.range.startX = this.range.startNS * (this.frame.width || 0) / this.range.totalNS
        this.range.endX = this.range.endNS * (this.frame.width || 0) / this.range.totalNS
        this.markA.frame.x = this.range.startX
        this.markA.inspectionFrame.x = this.markA.frame.x - markPadding
        this.markB.frame.x = this.range.endX
        this.markB.inspectionFrame.x = this.markB.frame.x - markPadding
    }

    keyPress(ev: KeyboardEvent) {
        if (this.animaStartTime === undefined) {
            this.animaStartTime = new Date().getTime();
        }
        let startTime = new Date().getTime();
        let duration = (startTime - this.animaStartTime);
        if (duration < this.animTime) duration = this.animTime
        this.currentDuration = duration
        if (this.isPress) return
        this.isPress = true
        switch (ev.key.toLocaleLowerCase()) {
            case "w":
                let animW = () => {
                    if (this.scale === 50) return;
                    this.range.startNS += (this.centerXPercentage * this.currentDuration * 2 * this.scale / this.p);
                    this.range.endNS -= ((1 - this.centerXPercentage) * this.currentDuration * 2 * this.scale / this.p);
                    this.fillX();
                    this.draw();
                    this.pressFrameId = requestAnimationFrame(animW)
                }
                this.pressFrameId = requestAnimationFrame(animW)
                break;
            case "s":
                let animS = () => {
                    if (this.range.startNS <= 0 && this.range.endNS >= this.range.totalNS) return;
                    this.range.startNS -= (this.centerXPercentage * this.currentDuration * 2 * this.scale / this.p);
                    this.range.endNS += ((1 - this.centerXPercentage) * this.currentDuration * 2 * this.scale / this.p);
                    this.fillX();
                    this.draw();
                    this.pressFrameId = requestAnimationFrame(animS)
                }
                this.pressFrameId = requestAnimationFrame(animS)
                break;
            case "a":
                let animA = () => {
                    if (this.range.startNS == 0) return;
                    let s = this.scale / this.p * this.currentDuration;
                    this.range.startNS -= s;
                    this.range.endNS -= s;
                    this.fillX();
                    this.draw();
                    this.pressFrameId = requestAnimationFrame(animA)
                }
                this.pressFrameId = requestAnimationFrame(animA)
                break;
            case "d":
                let animD = () => {
                    if (this.range.endNS >= this.range.totalNS) return;
                    this.range.startNS += this.scale / this.p * this.currentDuration;
                    this.range.endNS += this.scale / this.p * this.currentDuration;
                    this.fillX();
                    this.draw();
                    this.pressFrameId = requestAnimationFrame(animD)
                }
                this.pressFrameId = requestAnimationFrame(animD)
                break;
        }
    }

    keyUp(ev: KeyboardEvent) {
        this.animaStartTime = undefined;
        this.isPress = false
        if (this.pressFrameId != -1) {
            cancelAnimationFrame(this.pressFrameId)
        }
        let startTime = new Date().getTime();
        switch (ev.key) {
            case "w":
                let animW = () => {
                    if (this.scale === 50) return;
                    let dur = (new Date().getTime() - startTime);
                    this.range.startNS += (this.centerXPercentage * 100 * this.scale / this.p);
                    this.range.endNS -= ((1 - this.centerXPercentage) * 100 * this.scale / this.p);
                    this.fillX();
                    this.draw();
                    if (dur < 300) {
                        requestAnimationFrame(animW)
                    }
                }
                requestAnimationFrame(animW)
                break;
            case "s":
                let animS = () => {
                    if (this.range.startNS <= 0 && this.range.endNS >= this.range.totalNS) return;
                    let dur = (new Date().getTime() - startTime);
                    this.range.startNS -= (this.centerXPercentage * 100 * this.scale / this.p);
                    this.range.endNS += ((1 - this.centerXPercentage) * 100 * this.scale / this.p);
                    this.fillX();
                    this.draw();
                    if (dur < 300) {
                        requestAnimationFrame(animS)
                    }
                }
                requestAnimationFrame(animS)
                break;
            case "a":
                let animA = () => {
                    if (this.range.startNS <= 0) return
                    let dur = (new Date().getTime() - startTime);
                    let s = this.scale * 80 / this.p;
                    this.range.startNS -= s;
                    this.range.endNS -= s;
                    this.fillX();
                    this.draw();
                    if (dur < 300) {
                        requestAnimationFrame(animA)
                    }
                }
                animA();
                break;
            case "d":
                let animD = () => {
                    if (this.range.endNS >= this.range.totalNS) return;
                    let dur = (new Date().getTime() - startTime);
                    let s = this.scale * 80 / this.p;
                    this.range.startNS += s;
                    this.range.endNS += s;
                    this.fillX();
                    this.draw();
                    if (dur < 300) {
                        requestAnimationFrame(animD)
                    }
                }
                animD();
                break;
        }
    }
}

export class Flag {
    x: number = 0
    y: number = 0
    width: number = 0
    height: number = 0
    time: number = 0
    color: string = ""
    selected: boolean = false
    text: string = ""

    constructor(x: number, y: number, width: number, height: number, time: number, color: string = "#999999", selected = false) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.time = time;
        this.color = color;
        this.selected = selected;
    }
}