@woosh/meep-engine/src/engine/animation/curve/draw/build_tangent_editor.js

Pure JavaScript game engine. Fully featured and production ready.

import EmptyView from "../../../../view/elements/EmptyView.js";

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {Keyframe} keyframe
 * @param {Vector2} size
 * @param {AABB2} frame
 * @param {Vector2} margin
 */
export function build_tangent_editor({
                                  ctx,
                                  keyframe,
                                  size,
                                  frame,
                                  margin
                              }) {

    const scale = 36;


    function build_handle() {

        const marker_size = 4;
        const marker = new EmptyView({
            css: {
                width: `${marker_size}px`,
                height: `${marker_size}px`,
                background: "#00ff00",
                border: "none",
                position: "absolute",
                top: `-${marker_size / 2}px`,
                left: `-${marker_size / 2}px`,
                pointerEvents: "auto"
            }
        });

        // add extra element for mouse event capture to make it easier to click on the marker
        const marker_hit_pad_size = 24;
        marker.addChild(new EmptyView({
            css: {
                opacity: 0,
                width: `${marker_hit_pad_size}px`,
                height: `${marker_hit_pad_size}px`,
                borderRadius: `${marker_hit_pad_size}px`,
                // background: 'rgba(255,0,0,0.2)',
                position: "absolute",
                top: `-${(marker_hit_pad_size - marker_size) / 2}px`,
                left: `-${(marker_hit_pad_size - marker_size) / 2}px`
            }
        }))

        return marker;
    }

    function build_tangent() {
        const view = new EmptyView({
            css: {
                position: "absolute",
                left: "0",
                top: "0",
                background: 'red'
            }
        });
        view.position.set(-0.5, -0.5);
        view.transformOrigin.set(0, 0.5);

        return view;
    }


    const handle_in = build_handle();
    const handle_out = build_handle();

    const tangent_in = build_tangent();

    const tangent_out = build_tangent();


    function update_positions() {
        tangent_in.size.set(scale, 1);
        const angle_in = Math.PI - Math.atan2(keyframe.inTangent, 1);
        tangent_in.rotation.set(angle_in);

        tangent_out.size.set(scale, 1);
        const angle_out = -Math.atan2(keyframe.outTangent, 1);
        tangent_out.rotation.set(angle_out);

        handle_in.position.set(
            Math.cos(angle_in) * scale, Math.sin(angle_in) * scale
        );

        handle_out.position.set(
            Math.cos(angle_out) * scale, Math.sin(angle_out) * scale
        );
    }

    const vContainer = new EmptyView({
        css: {
            position: 'absolute',
            left: 0,
            top: 0
        }
    });

    vContainer.addChild(handle_in);
    vContainer.addChild(handle_out);

    vContainer.addChild(tangent_in);
    vContainer.addChild(tangent_out);

    vContainer.on.linked.add(update_positions);

    return vContainer;
}