volume-visualization/static/js/threeJsHelper/src/Helpers/TransferHelper.js

var TransferHelper = function() {
    var me = this,
        changed = false,
        canvas = document.getElementById('transfer-function'),
        $canvas = $(canvas),
        context = canvas.getContext('2d'),
        hiddenCanvas = document.getElementById('hidden-transfer'),
        hiddenContext = hiddenCanvas.getContext('2d'),
        transferSpanHolder = $('#transfer-span-holder'),
        transfer = $('#transfer'),
        disabled = true,
        handles = $('span.transfer'),
        $standardTf = $('img#standard-tf').get(0),
        offsetLeft = {
            blue: 0,
            turquois: 0.25,
            green: 0.5,
            orange: 0.75,
            red: 1
        },
        colorCodes = {
            blue: '#0000FF',
            turquois: '#00FFFF',
            green: '#00FF00',
            orange: '#FFFF00',
            red: '#FF0000'
        },
        opacities = Array(255);

    //black values are disabled defaultly
    opacities[0] = 0;
    for(counter = 0; counter < opacities.length; counter++) {
        opacities[counter] = 255;
        if (counter <= minGray) {
            opacities[counter] = 0;
        }
    }

    $('input#toggle-transfer').on('click', function() {
        if(disabled) {
            enableTransferFunction();
        } else {
            disableTransferFunction();
        }
    });

    var getOffsetLeft = function() {
        return transfer.offset().left - transfer.parent().offset().left;
    }

    var removePxOffString = function(str) {
        return parseInt(str.replace('px', ''));
    }

    var updateGradient = function() {
        // Create gradient

        var grd = context.createLinearGradient(0,0,255,0);

        $.each(handles, function(index, value) {
            var $value = $(value),
                colorName = $value.attr('color'),
                colorOffsetLeft = offsetLeft[colorName],
                colorCode = colorCodes[colorName];

            grd.addColorStop(colorOffsetLeft, colorCode);
        });
        // Fill with gradient
        context.fillStyle = grd;
        context.fillRect(0,0,255, 10);

        applyOpacities();

        changed = true;
    };

    var applyOpacities = function() {
        var imageData = context.getImageData(0, 0, 255, 1),
            data = imageData.data;

        for(counter = 0; counter < opacities.length; counter++) {
            data[(counter * 4) + 3] = opacities[counter];
        }

        hiddenContext.putImageData(imageData, 0, 0, 0, 0, 255, 1);
    }

    var updateHandlePosition = function(element) {
        var colorLeft = removePxOffString($(element).css('left')) - getOffsetLeft(),
            colorOffsetLeft = colorLeft / $canvas.width(),
            colorName = $(element).attr('color');

        if(colorOffsetLeft > 1.0) {
            colorOffsetLeft = 1.0;
        }
        if(colorOffsetLeft < 0.0) {
            colorOffsetLeft = 0.0;
        }
        offsetLeft[colorName] = colorOffsetLeft;
        updateGradient();
    };

    var enableTransferFunction = function() {
        $.each(handles, function(index, value) {
            var $value = $(value),
                colorName = $value.attr('color'),
                colorOffsetLeft = offsetLeft[colorName],
                colorLeft = getOffsetLeft() + ($canvas.width() * colorOffsetLeft),
                colorCode = colorCodes[colorName];

            $value.css({left: colorLeft, 'background-color': colorCode });
            $(value).draggable({
                containment: '#transfer-span-holder',
                scroll: false,
                axis: 'x',
                cursor: "crosshair",
                stop: function() {
                    updateHandlePosition(this);
                },
                drag: function() {
                    updateHandlePosition(this);
                }
            });
        });

        showHandles();
        updateGradient();
        disabled = false;
    };

    var disableTransferFunction = function() {
        context.drawImage($standardTf, 0, 0, 255, 10);
        applyOpacities();
        hideHandles();
        disabled = true;
        changed = true;
    };

    var showHandles = function() {
        $.each(handles, function(index, value) {
            $(value).removeClass('hidden');
        });
    };

    var hideHandles = function() {
        $.each(handles, function(index, value) {
            $(value).addClass('hidden');
        });
    };

    disableTransferFunction();

    $(document).on('opacityChanged', function(e, params) {
        if(params != undefined && params.opacities != undefined) {
            opacities = params.opacities;
            applyOpacities();
            changed = true;
        }
    });

    $(document).on('opacityBordersChanged', function(e, params) {
        var minGray = 0,
            maxGray = 255;

        if(params != undefined && params.minGray != undefined && params.maxGray != undefined) {
            minGray = params.minGray;
            maxGray = params.maxGray;

            for(counter = 0; counter < 255; counter++) {
                var opacity = 255;
                if(counter < minGray || counter > maxGray) {
                    opacity = 1;
                }
                opacities[counter] = opacity;
            }

            applyOpacities();
            changed = true;
        }
    });

    return {
        transferFunctionChanged : function() {
            return changed;
        },

        getCurrentTransferFunction : function() {
            changed = false;
            return hiddenContext.getImageData(0, 0, 255, 1);
        }
    };
}