@woosh/meep-engine/src/engine/animation/curve/editor/createSelectionBoxTool.js

Pure JavaScript game engine. Fully featured and production ready.

import Vector2 from "../../../../core/geom/Vector2.js";
import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
import {position_canvas_to_curve} from "../draw/position_canvas_to_curve.js";
import {applyActionSelection} from "../actionProcessorOperations/applyActionChange.js";
import {DragHandler} from "./DragHandler.js";

/**
 *
 * @param {KeyframeStateManager} keyframeStateManager
 * @param {CanvasView} graph
 * @param {AABB2} frame
 * @param {Vector2} margin
 * @param {function} fnUpdate
 * @param {ActionProcessor} actionProcessor
 * @param {keyframesContext} actionCTX
 * @returns {DragHandler}
 */
export function createSelectionBoxTool({
                                                      keyframeStateManager,
                                                      graph,
                                                      frame,
                                                      margin,
                                                      fnUpdate,
                                                      actionProcessor,
                                                      actionCTX
                                                  }) {
    const anchorPos = new Vector2();
    const targetPos = new Vector2();
    const selectionBox = new AABB2();

    const prevKeyframeList = keyframeStateManager.prevKeyframeList;
    const curKeyframeList = keyframeStateManager.curKeyframeList;
    const selectedKeyframes = keyframeStateManager.selectedKeyframes;
    const keyframeViews = keyframeStateManager.keyframeViews;

    /**
     *
     * @param {AABB2} box
     */
    function drawSelectionBox(box = new AABB2) {
        fnUpdate();
        const ctx = graph.context2d;
        ctx.fillStyle = 'none';
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#FFFF00';
        ctx.beginPath();
        ctx.rect(box.x0, box.y0, box.width, box.height);
        ctx.stroke();
    }

    return new DragHandler({
        dragStart(position) {
            // console.log("start drag")
            anchorPos.copy(position);
            targetPos.copy(position);
            selectionBox.set(0, 0, 0, 0);
        },
        drag(position,delta) {
            // console.log("dragging")
            targetPos.copy(position);

            const x0 = Math.min(targetPos.x, anchorPos.x);
            const x1 = Math.max(targetPos.x, anchorPos.x);
            const y0 = Math.min(targetPos.y, anchorPos.y);
            const y1 = Math.max(targetPos.y, anchorPos.y);

            selectionBox.set(x0, y0, x1, y1);
            drawSelectionBox(selectionBox);
        },
        dragEnd() {
            // console.log("end drag")
            prevKeyframeList.copy(selectedKeyframes);
            const startRange = position_canvas_to_curve(graph.size, frame, margin, selectionBox.x0, selectionBox.y0);
            const endRange = position_canvas_to_curve(graph.size, frame, margin, selectionBox.x1, selectionBox.y1);
            keyframeViews.forEach((marker_view, key) => {
                if (key.time >= startRange.x && key.time <= endRange.x
                    && key.value >= endRange.y && key.value <= startRange.y) {

                    if (!curKeyframeList.find(kf => kf === key)) {
                        curKeyframeList.add(key);
                    }
                }
            })
            if (!curKeyframeList.isEmpty()) {
                applyActionSelection('Selection', keyframeStateManager, actionProcessor, actionCTX);
            }
            else{
                //Clears the drawn selection box
                fnUpdate();
            }
        }
    });
}