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

Pure JavaScript game engine. Fully featured and production ready.

/**
 *
 * @param {KeyframeStateManager} keyframeStateManager
 * @param {Keyframe} keyframe
 * @param {EmptyView} vTangentEditor
 * @param {View} marker
 */
export function updateMarkerVisual(keyframeStateManager, keyframe, vTangentEditor, marker) {
    const markerView = keyframeStateManager.keyframeViews.get(keyframe);
    const markerColour = getKeyframeMarkerColour(keyframeStateManager, keyframe);

    updateTangentMarker(keyframeStateManager, keyframe, markerView, vTangentEditor)

    marker.css({
        background: markerColour
    });
}

/**
 * Acquire the pre-defined colour for marker(keyframe) based on the keyframe selection state
 * @param {KeyframeStateManager} keyframeStateManager
 * @param {Keyframe} keyframe
 * @returns {string}
 */
function getKeyframeMarkerColour(keyframeStateManager, keyframe) {
    const activeKeyframe = keyframeStateManager.observedActiveKeyframe;
    const selectedKeyframes = keyframeStateManager.selectedKeyframes;

    if (activeKeyframe.get() === keyframe) {
        return '#FFFFFF'
    } else if (selectedKeyframes.find(kf => kf === keyframe)) {
        return '#B700FFFF'
    } else {
        return '#00ff00'
    }
}

function updateTangentMarker(keyframeStateManager, keyframe, markerView, vTangentEditor) {
    const activeKeyframe = keyframeStateManager.observedActiveKeyframe;
    const selectedKeyframes = keyframeStateManager.selectedKeyframes;

    if (activeKeyframe.get() === keyframe) {
        if (!markerView.hasChild(vTangentEditor))
            markerView.addChild(vTangentEditor);
    } else if (selectedKeyframes.find(kf => kf === keyframe)) { //Todo remove if covered by else condition
        if (markerView.hasChild(vTangentEditor))
            markerView.removeChild(vTangentEditor);
    } else {
        if (markerView.hasChild(vTangentEditor))
            markerView.removeChild(vTangentEditor);
    }
}