Commit d82ef947 authored by Laureline Nevin's avatar Laureline Nevin ⌨️
Browse files

Improved Ctrl/Shift key responsivity while resizing export window

parent caaeb9cb

src/app.ts

+38 −15
Changes for src/app.ts: 38 added lines, 15 removed lines.
Original line number Diff line number Diff line
@@ -851,7 +851,11 @@ export class App { 
                // Side

                setMinMax(qy === 1 ? 0 : 1);

                if (keepRatio) {

                    const newSize = Math.max(1, (wh[1 - (qy === 1 ? 0 : 1)] * (xyMax[qy === 1 ? 0 : 1] - xyMin[qy === 1 ? 0 : 1])) / wh[qy === 1 ? 0 : 1]);

                    const newSize = Math.max(

                        1,

                        (wh[1 - (qy === 1 ? 0 : 1)] * (xyMax[qy === 1 ? 0 : 1] - xyMin[qy === 1 ? 0 : 1])) /

                            wh[qy === 1 ? 0 : 1],

                    );

                    xyMin[1 - (qy === 1 ? 0 : 1)] += Math.floor((wh[1 - (qy === 1 ? 0 : 1)] - newSize) / 2);

                    xyMax[1 - (qy === 1 ? 0 : 1)] = xyMin[1 - (qy === 1 ? 0 : 1)] + Math.ceil(newSize);

                }
@@ -881,8 +885,26 @@ export class App { 
    }



    private bindPointerEvents() {

        let lastMoveEvent: PointerEvent | null = null;

        const onPointerEvent = (ev: PointerEvent | WheelEvent) => {

        const EVENT_FIELDS = [

            'type',

            'clientX',

            'clientY',

            'shiftKey',

            'ctrlKey',

            'buttons',

            'button',

            'isPrimary',

            'pointerId',

            'target',

            'preventDefault',

            'stopPropagation',

        ] as const;

        type PointerEventData = {

            [key in (typeof EVENT_FIELDS)[number]]: PointerEvent[key];

        };

        let lastMoveEvent: PointerEventData | null = null;

        lastMoveEvent = new PointerEvent('pointerleave');

        const onPointerEvent = (ev: PointerEventData | WheelEvent) => {

            const viewport = this.state.viewport!;

            const pointerState = this.rx.pointerState;

            if (!this.source) return;
@@ -957,7 +979,15 @@ export class App { 
                    pos[1] >= exPar.innerGrab.y ? (pos[1] >= exPar.innerGrab.y2 ? 2 : 1) : 0,

                ];

            };

            if (ev instanceof PointerEvent && ev.type === 'pointerdown') {

            if (ev instanceof WheelEvent) {

                if (ev.type !== 'wheel') throw new Error();

                const SCROLL_FACTOR = 1.01;

                if (this.state.pointerState.dragging || ev.currentTarget === canvas) {

                    ev.stopPropagation();

                    const delta = (-Math.min(Math.max(Math.abs(ev.deltaY), 10), 50) * Math.sign(ev.deltaY)) / 10;

                    viewport.zoomAround(Math.pow(SCROLL_FACTOR, delta), evpos);

                }

            } else if (ev.type === 'pointerdown') {

                if (pointerState.dragging || !ev.isPrimary || ev.button !== 0) return;

                if (!highlight()) {

                    pointerState.dragging = true;
@@ -978,7 +1008,7 @@ export class App { 
                    doUpdate();

                    window.addEventListener('wheel', onPointerEvent, { passive: false });

                }

            } else if (ev instanceof PointerEvent && (ev.type === 'pointerup' || ev.type === 'pointerleave')) {

            } else if (ev.type === 'pointerup' || ev.type === 'pointerleave') {

                if (!pointerState.dragging || !ev.isPrimary || ev.button !== 0) return;

                lastMoveEvent = null;

                doUpdate();
@@ -988,7 +1018,7 @@ export class App { 
                this.rx.cursor = this.getQuadrantCursor(pointerState.exportWindowHover);

                canvas.setPointerCapture(ev.pointerId);

                window.removeEventListener('wheel', onPointerEvent);

            } else if (ev instanceof PointerEvent && ev.type === 'pointermove')

            } else if (ev.type === 'pointermove')

                if (pointerState.dragging) {

                    lastMoveEvent = ev;

                    doUpdate();
@@ -1005,14 +1035,7 @@ export class App { 
                        this.requestRender();

                    }

                }

            else if (ev instanceof WheelEvent && ev.type === 'wheel') {

                const SCROLL_FACTOR = 1.01;

                if (this.state.pointerState.dragging || ev.currentTarget === canvas) {

                    ev.stopPropagation();

                    const delta = (-Math.min(Math.max(Math.abs(ev.deltaY), 10), 50) * Math.sign(ev.deltaY)) / 10;

                    viewport.zoomAround(Math.pow(SCROLL_FACTOR, delta), evpos);

                }

            } else throw new Error('Unknown event type');

            else throw new Error('Unknown event type');

            ev.preventDefault();

            ev.stopPropagation();

        };
@@ -1022,7 +1045,7 @@ export class App { 
                ev.preventDefault();

                ev.stopPropagation();

                let data: any = {};

                for (const key in lastMoveEvent) data[key] = (lastMoveEvent as any)[key];

                for (const key of EVENT_FIELDS) data[key] = lastMoveEvent[key];



                data.shiftKey = ev.shiftKey;

                data.ctrlKey = ev.ctrlKey;