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

Pure JavaScript game engine. Fully featured and production ready.

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

export function createKeyframeMarker(){
    const markerSize = 8;
    const markerHitPadSize = 24;

    const markerView = createKeyframeMarkerView(markerSize)
    const markerHitboxView = createKeyframeMarkerHitboxView(markerHitPadSize, markerSize)

    return markerView.addChild(markerHitboxView)
}

function createKeyframeMarkerView(markerSize) {
    return new EmptyView({
        css: {
            width: `${markerSize}px`,
            height: `${markerSize}px`,
            background: "#00ff00",
            border: "none",
            position: "absolute",
            top: `-${markerSize / 2}px`,
            left: `-${markerSize / 2}px`,
            pointerEvents: "auto",
            borderRadius: `${markerSize}px`
        }
    });
}

function createKeyframeMarkerHitboxView(markerHitPadSize, markerSize) {
    return new EmptyView({
        css: {
            opacity: 100,
            width: `${markerHitPadSize}px`,
            height: `${markerHitPadSize}px`,
            borderRadius: `${markerHitPadSize}px`,
            // background: 'rgba(255,0,0,0.2)',
            position: "absolute",
            top: `-${(markerHitPadSize - markerSize) / 2}px`,
            left: `-${(markerHitPadSize - markerSize) / 2}px`
        }
    });
}