@woosh/meep-engine/src/engine/animation/curve/editor/createPanTool.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 {DragHandler} from "./DragHandler.js";
import {position_canvas_to_curve} from "../draw/position_canvas_to_curve.js";

/**
 *
 * @param {CanvasView} graph
 * @param {AABB2} frame
 * @param {Vector2} margin
 * @param {function} fnUpdate
 * @returns {DragHandler}
 */
export function createPanTool({
                                                      graph,
                                                      frame,
                                                      margin,
                                                      fnUpdate,
                                                  }) {

    return new DragHandler({
        dragStart(position) {
            // console.log("start pan");
        },
        drag(position,delta) {
            // console.log("panning");
            const newPosition = position.clone();
            const lastPosition = position.clone().add(delta);

            const newCord = position_canvas_to_curve(graph.size, frame, margin, newPosition.x, newPosition.y);
            const lastCord = position_canvas_to_curve(graph.size, frame, margin, lastPosition.x, lastPosition.y);
            const deltaCord = newCord.clone().sub(lastCord);

            frame.move(deltaCord.x,deltaCord.y);
            fnUpdate();
        },
        dragEnd() {
            // console.log("end pan");
        }
    });
}