volume-visualization/static/js/threeJsHelper/src/Helpers/Zoom/ZoomHelper.js

var ZoomHelper = function() {
    var navigationPlaneHorLabel = $('#navigation-plane-hor-label'),
        navigationPlaneVerLabel = $('#navigation-plane-ver-label'),
        navigationSliderLabel = $('#navigation-slider-label'),
        zoomStatus = $('#zoom-status'),
        zoomInButton = $('input#zoomin'),
        zoomOutButton = $('input#zoomout'),
        navigationPlane = $('div#navigation-plane'),
        navigationPlaneParent = navigationPlane.parent(),
        navigationSlider = $('div#navigation-slider'),
        navigationSliderParent = navigationSlider.parent(),
        displayTimestamp = null,
        planeOrientation = {
            ver: new Orientation(Axis.Y, OffsetTo.LEFT),
            hor: new Orientation(Axis.X, OffsetTo.TOP),
            direction: VolumeFaceDirection.BACK,
            orientation: VolumeFaceOrientation.XY
        },
        sliderOrientation = {axis: new Orientation(Axis.Z, OffsetTo.TOP) },
        zoomedIn,
        zoomedInfoArray = {
            dimension: Array(3),
            offset: Array(3)
        },
        oldZoomedInfos = [];

    var lastExecutionTime = Date.now();
    // adjust navigation related navigations
    $container.on('animation', function() {
        determineAxisLabels();
        determinePlanePosition();
        determineSliderPosition();
    });

    // one has to press ctrl AND alt while clicking
    $container.on('click', 'canvas', function(event){
        event.stopPropagation();
        event.preventDefault();

        // keyboard shortcut activated or button zoom in pressed before?
        if((event.ctrlKey == false || event.altKey == false)
           && !zoomInActivated) {
            return;
        }

        var mouseX = ( (event.clientX - $canvas.offset().left)  / ($canvas.width())  ) * 2 - 1,
            mouseY = - ( (event.clientY - $canvas.offset().top) / ($canvas.height()) ) * 2 + 1;

        var vector = new THREE.Vector3( mouseX, mouseY, camera.near);

        vector = vector.unproject( camera );

        var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

        var intersects = raycaster.intersectObjects( [frontBox] );

        if(intersects.length > 0) {
            if(!handleZoomStatus(true)) {
                return false;
            }

            var intersect = intersects[0],
                point = intersect.point;

            var geometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );

            var material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color( 0xaaaaaa ),
                opacity: 0.3
            });

            mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = point.x;
            mesh.position.y = point.y;
            mesh.position.z = point.z;
            scene.add(mesh);
            intersectCubes[intersectCubes.length] = mesh;
            intersectCubesTimeStamps[intersectCubesTimeStamps.length] = Date.now();

            var realPoint = point.clone();
            getSubvolume(point, false, 'zoomIn', false);
        }


    });

    function getSubvolume(realPoint, alreadyTranslated, zoomAction, sameDepth, fromDraggable) {
        var requestedRes = typeof(window.requestedSize)=="undefined" ? config.defaultSize : requestedSize;

        if(alreadyTranslated == undefined || !alreadyTranslated) {
            realPoint = realPoint.applyMatrix4((new THREE.Matrix4).makeRotationX(Math.PI / -2));
            // retranslate the point into original position beginning from 0,0,0
            realPoint.add(new THREE.Vector3(0.5, 0.5, 0.5));
        }

        volumePointArray = realPoint.toArray();

        var processingUrl = IPE.util.buildUrl('volumes/' + volumeId + '/processing/sub/');
        $.each(volumePointArray, function(index, value) {
            dimWidth = null;

            // have to decide, whether we in zoomed in or zoomed out status
            if(zoomedInfo == undefined || zoomedInfo == null || fromDraggable) {
                if(index == 0) {
                    dimWidth = textureInfo.originalSize.sizex;
                } else if(index == 1) {
                    dimWidth = textureInfo.originalSize.sizey;
                } else {
                    dimWidth = textureInfo.originalSize.sizez;
                }
            } else {
                if(index < 2) {
                    dimWidth = zoomedInfo.dimension.xywidth;
                } else {
                    dimWidth = zoomedInfo.numberOfSlices;
                }
            }
            value *= dimWidth;
            // due to interpolation algorithm, we had to rotate the whole cube, that it matches
            // the display of imagej
            // so we have to map the current pointer values to the real volume values
            // but only for the y and z direction --> the x direction is all right
            if(index > 0) {
                value = dimWidth - value;
            }

            if(!fromDraggable && zoomedInfo) {
                if(index == 0) {
                    value = value + zoomedInfo.dimension.xmin;
                } else if(index == 1) {
                    value = value + zoomedInfo.dimension.ymin;
                } else {
                    value = value + zoomedInfo.dimension.zmin;
                }
            }

            value = Math.floor(value);
            volumePointArray[index] = value;
            processingUrl += value + '/';
        });

        frameNumber = imgInfo.frameFrom + currentTexture;

        processingUrl += frameNumber + '/';

        depth = 1;
        if(zoomAction == 'zoomIn') {
            if(zoomedInfo != null){
                if(sameDepth) {
                    depth = zoomedInfo.depth;
                } else {
                    depth = zoomedInfo.depth + 1;
                }
            }
        } else if(zoomAction == 'zoomOut') {
            if(zoomedInfo.depth > 1) {
                depth = zoomedInfo.depth - 1;
            }
        }

        while(oldZoomedInfos.length > 0
              && oldZoomedInfos.last().zoomedInfo.depth >= depth)
        {
            oldZoomedInfos.pop();
        }

        processingUrl += depth + '/';
        processingUrl += requestedRes + '/';

        $.ajax({
            url: processingUrl,
            success: function(data) {
                var available = false;
                var availableTestCounter = 0;
                zoomedInfo = data;
                oldZoomedInfos.push({
                    point: realPoint,
                    translated: true,
                    zoomedInfo: zoomedInfo
                });

                // this function is called recursive by the settimeout statement
                availableTest = function() {
                    $.ajax({
                        url: IPE.util.buildUrl('volumes/' + volumeId + '/processing/sprite/' + zoomedInfo.spriteId + '/available/'),
                        success: function(data) {
                            available = data.available;
                        },
                        dataType: 'json',
                        async: false
                    });

                    if(available) {
                        // subvolume available: fetch it
                        fetchSubVolume(zoomAction);
                    } else if(availableTestCounter < 80) {
                        // abort condition not reached --> try again
                        setTimeout(availableTest, 500);
                        availableTestCounter++;
                    } else {
                        oldZoomedInfos.pop();
                        // abort condition reached --> error handling
                        $(document).trigger('zoomActionFinished', { zoomAction: zoomAction, error: true });
                    }
                };
                setTimeout(availableTest, 500);
            },
            dataType: 'json',
            async: true,
            error: function(data) {
                helper.displayMessage('Sorry, an error occured during processing zoom', true, null, 2500);
            }
        });
    };

    var fetchSubVolume = function(zoomAction) {
        imageSrc = IPE.util.buildUrl('volumes/' + volumeId + '/processing/sprite/' + zoomedInfo.spriteId + '/show/');

        var image = new Image();
        var texture = initTexture(new THREE.Texture(image));

        image.onload = function() {

            materialScreen.uniforms.numberOfSlices.value = zoomedInfo.numberOfSlices;
            materialScreen.uniforms.numberOfSlices.needsupdate = true;
            materialScreen.uniforms.slicesOverX.value = zoomedInfo.slicesOverX;
            materialScreen.uniforms.slicesOverX.needsUpdate = true;
            materialScreen.uniforms.slicesOverY.value = zoomedInfo.slicesOverY;
            materialScreen.uniforms.slicesOverY.needsUpdate = true;
            materialScreen.uniforms.numberOfSprites.value = 1;
            materialScreen.uniforms.numberOfSprites.needsUpdate = true;
            materialScreen.uniforms.slicesPerSprite.value = zoomedInfo.numberOfSlices;
            materialScreen.uniforms.slicesPerSprite.needsUpdate = true;

            updateTexture([texture]);

            zoomedVolumeDimension.xmin = zoomedInfo.dimension.xmin;
            zoomedVolumeDimension.xmax = zoomedInfo.dimension.xmin + zoomedInfo.dimension.xywidth - 1;
            zoomedVolumeDimension.ymin = zoomedInfo.dimension.ymin;
            zoomedVolumeDimension.ymax = zoomedInfo.dimension.ymin + zoomedInfo.dimension.xywidth - 1;
            zoomedVolumeDimension.zmin = zoomedInfo.dimension.zmin;
            zoomedVolumeDimension.zmax = zoomedInfo.dimension.zmin + zoomedInfo.numberOfSlices - 1;

            originalVolumeDimension = currentVolumeDimension;
            originalDimension = currentDimension;

            currentVolumeDimension = zoomedVolumeDimension;

            repositionLayerSliders();

            $(document).trigger('zoomActionFinished', {
                zoomAction: zoomAction, textureNumber: frameNumber
            });
        }

        image.src = imageSrc;
    };

    $container.on('contextmenu', function(event){
        if(event.ctrlKey == false) {
            return;
        }

        if(event.altKey == false) {
            return;
        }

        if(!handleZoomStatus(false)) {
            return false;
        }

        return zoomOut();
    });


    function zoomOut() {
        currentZoomPoint = oldZoomedInfos.pop().point;
        if(oldZoomedInfos.length > 0) {
            // using the current point to get a new subvolume
            getSubvolume(currentZoomPoint, true, 'zoomOut', true);
            return false;
        }
        else
        {
            zoomedInfo = null;

            materialScreen.uniforms.numberOfSlices.value = textureInfo.info.numberOfSlices;
            materialScreen.uniforms.numberOfSlices.needsupdate = true;
            materialScreen.uniforms.slicesOverX.value = textureInfo.info.slicesOverX;
            materialScreen.uniforms.slicesOverX.needsUpdate = true;
            materialScreen.uniforms.slicesOverY.value = textureInfo.info.slicesOverY;
            materialScreen.uniforms.slicesOverY.needsUpdate = true;
            materialScreen.uniforms.numberOfSprites.value = imgInfo.numberOfSprites;
            materialScreen.uniforms.numberOfSprites.needsUpdate = true;
            materialScreen.uniforms.slicesPerSprite.value = imgInfo.slicesPerSprite;
            materialScreen.uniforms.slicesPerSprite.needsUpdate = true;

            updateTexture();

            currentVolumeDimension = originalVolumeDimension;
            currentDimension = originalDimension;

            repositionLayerSliders();
        }

        $(document).trigger('zoomActionFinished', {
            zoomAction: 'zoomOut'
        });

        return false;
    }

    function zoomInAllowed() {
        return !zoomedIn || zoomedInfo.dimension.xywidth > 300;
    }

    /**
    * return: procceed or not
    */
    function handleZoomStatus(zoomIn) {
        zoomInButton.removeClass('red');
        zoomInActivated = false;

        if(zoomIn && !zoomInAllowed()) {
            return false;
        } else if(!zoomIn && !zoomedIn) {
            return false;
        }

        waitDiv.removeClass('hidden');

        displayMessage = zoomIn ? 'Generating zoomed subvolume, please wait a moment' : 'Zooming out';
        helper.displayMessage(displayMessage);
        displayTimestamp = Date.now();

        return true;
    }

    // general function to disable stuff like messages etc.
    $(document).on('zoomActionFinished', function(e, params) {
        zoomedIn = zoomedInfo != null;

        timeout = 2000 - (Date.now() - displayTimestamp);
        if(timeout < 0) {
            timeout = 0;
        }
        helper.fadeoutMessage(null, timeout);

        zoomedStatusText = '';
        if(zoomedIn) {
            zoomStatus.addClass('green-background');
            zoomedStatusText = 'zoomed in';

            $.each($('.res-link'), function(index, value) {
                $(value).addClass('disabled');
            });

            if(zoomedInfo.dimension.xywidth <= 300) {
                zoomInButton.prop('disabled', true);
            }
        } else {
            zoomStatus.removeClass('green-background');
            zoomedStatusText = 'zoomed out';

            if(params.error) {
                errorMessage = 'Error during subvolume generation - zoomed out again';
                helper.displayMessage(errorMessage, true, null, 5000);
            }

            $.each($('.res-link'), function(index, value) {
                $(value).removeClass('disabled');
            });

            zoomInButton.prop('disabled', false);
        }

        zoomStatus.html(zoomedStatusText);
        waitDiv.addClass('hidden');
    });

    // draggable related stuff
    // TODO for multilevel zooming
    $(document).on('zoomActionFinished', function(e, params) {

        zoomedIn = zoomedInfo != null;

        if(zoomedIn) {
            zoomedInfoArray.offset[Axis.X] = zoomedVolumeDimension.xmin;
            zoomedInfoArray.offset[Axis.Y] = zoomedVolumeDimension.ymin;
            zoomedInfoArray.offset[Axis.Z] = zoomedVolumeDimension.zmin;

            zoomedInfoArray.dimension[Axis.X] = zoomedInfo.dimension.xywidth;
            zoomedInfoArray.dimension[Axis.Y] = zoomedInfo.dimension.xywidth;
            zoomedInfoArray.dimension[Axis.Z] = zoomedInfo.numberOfSlices;
        } else {
            navigationPlane.hide();
            navigationPlaneParent.removeClass('white');

            navigationSlider.hide();
            navigationSliderParent.removeClass('white');
        }

        navigationPlane.removeClass('no-pos-set');
        navigationSlider.removeClass('no-pos-set');
    });

    navigationPlane.draggable({
        containment: '#navigation-plane-container',
        scroll: false,
        stop: function() {
            zoomedDraggableChanged();
        }
    });

    navigationSlider.draggable({
        containment: '#navigation-slider-container',
        scroll: false,
        stop: function() {
            zoomedDraggableChanged();
        }
    });


    function zoomedDraggableChanged() {
        waitDiv.removeClass('hidden');
        var planeWidthHalf = navigationPlane.width() / 2,
            planeHeightHalf = navigationPlane.height() / 2,
            planeOffsetLeft = navigationPlane.offset().left - navigationPlaneParent.offset().left - 1,
            planeOffsetTop = navigationPlane.offset().top - navigationPlaneParent.offset().top - 1,

            sliderHeightHalf = navigationSlider.height() / 2,
            sliderOffsetTop = navigationSlider.offset().top - navigationSliderParent.offset().top - 1,
            orientation = planeOrientation.orientation,
            direction = planeOrientation.direction;


        // set correct border values due to messure errors
        if(planeOffsetLeft < 0) {
            planeOffsetLeft = 0;
        } else if(planeOffsetLeft > navigationPlaneParent.width() - navigationPlane.width()) {
            planeOffsetLeft = navigationPlaneParent.width() - navigationPlane.width();
        }

        if(planeOffsetTop < 0) {
            planeOffsetTop = 0;
        } else if(planeOffsetTop > navigationPlaneParent.height() - navigationPlane.height()) {
            planeOffsetTop = navigationPlaneParent.height() - navigationPlane.height();
        }

        if(sliderOffsetTop < 0) {
            sliderOffsetTop = 0;
        } else if(sliderOffsetTop > navigationSliderParent.height() - navigationSlider.height()) {
            sliderOffsetTop = navigationSliderParent.height() - navigationSlider.height();
        }

        planeOffsetLeft = planeOffsetLeft + planeWidthHalf;
        planeOffsetTop = planeOffsetTop + planeHeightHalf;
        sliderOffsetTop = sliderOffsetTop + sliderHeightHalf;

        horAxis = planeOrientation.hor.axis;
        verAxis = planeOrientation.ver.axis;

        pointAsArray = Array(3);

        pointAsArray[horAxis] = planeOffsetLeft / navigationPlaneParent.width();
        pointAsArray[verAxis] = planeOffsetTop / navigationPlaneParent.height();

        /*if(planeOrientation.direction == VolumeFaceDirection.BACK) {
            pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
        } else if(planeOrientation.orientation == VolumeFaceOrientation.XZ) {
            pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
        }*/
        if((planeOrientation.orientation == VolumeFaceOrientation.XY
            && planeOrientation.direction == VolumeFaceDirection.BACK)
           || (planeOrientation.orientation == VolumeFaceOrientation.YZ
            && planeOrientation.direction == VolumeFaceDirection.BACK)
           || (planeOrientation.orientation == VolumeFaceOrientation.XZ
            && planeOrientation.direction == VolumeFaceDirection.BACK)) {

            pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
        }

        pointAsArray[sliderOrientation.axis] = sliderOffsetTop / navigationSliderParent.height();

        /*if((sliderOrientation.axis == Axis.Z
            && planeOrientation.direction == VolumeFaceDirection.FRONT)
           || (sliderOrientation.axis == Axis.Y
            && planeOrientation.direction == VolumeFaceDirection.FRONT)
           || (sliderOrientation.axis == Axis.X
            && planeOrientation.direction == VolumeFaceDirection.BACK)) {

            pointAsArray[sliderOrientation.axis] = 1.0 - pointAsArray[sliderOrientation.axis];
        }*/

        if((sliderOrientation.axis == Axis.X
            && planeOrientation.direction == VolumeFaceDirection.FRONT)
            || (sliderOrientation.axis == Axis.Y
            && planeOrientation.direction == VolumeFaceDirection.BACK)
            || (sliderOrientation.axis == Axis.Z
            && planeOrientation.direction == VolumeFaceDirection.BACK)) {

            pointAsArray[sliderOrientation.axis] = 1.0 - pointAsArray[sliderOrientation.axis];
        }

        point = new THREE.Vector3(pointAsArray[0], pointAsArray[1], pointAsArray[2]);

        getSubvolume(point, true, 'zoomIn', true, true);
    };

    var zoomInActivated = false;
    zoomInButton.on('click', function() {
        zoomInActivated = !zoomInActivated;

        if(zoomInActivated) {
            $(this).addClass('red');
        } else {
            $(this).removeClass('red');
        }
    });

    zoomOutButton.on('click', function() {
        zoomInButton.removeClass('red');

        if(!handleZoomStatus(false)) {
            return false;
        }

        return zoomOut();
    });

    function determineAxisLabels() {
        if(Date.now() - lastExecutionTime > 100) {
            var lookAtVector = new THREE.Vector3(0,0, -1);
            lookAtVector.applyQuaternion(camera.quaternion);

            xIterator = -0.4;
            yIterator = -0.4;
            facesIntersect = {};
            interSectStartingPoint = new THREE.Vector3(xIterator, yIterator, camera.near);
            for(xIterator = -0.4; xIterator <= 0.4; xIterator += 0.2) {
                for(yIterator = -0.4; yIterator <= 0.4; yIterator += 0.2) {
                    interSectStartingPoint.x = xIterator;
                    interSectStartingPoint.y = yIterator;


                    vector = interSectStartingPoint.unproject( camera );

                    var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

                    var intersects = raycaster.intersectObjects( [frontBox] );

                    if(intersects.length > 0) {
                        var intersect = intersects[0],
                            point = intersect.point,
                            face = intersect.face,
                            faceObject = determineVolumeFace(face.normal),
                            faceIdent = faceObject.getIdentifier();
                            alreadyAdded = Object.keys(facesIntersect).indexOf(faceIdent) >= 0;

                        if(alreadyAdded) {
                            facesIntersect[faceIdent].count++;
                        } else {
                            facesIntersect[faceIdent] = { faceObject: faceObject, count: 1};
                        }
                    }
                }
            }

            frontFace = { count: 0 };
            for(faceIdent in facesIntersect) {
                if(facesIntersect[faceIdent].count > frontFace.count) {
                    frontFace = facesIntersect[faceIdent];
                }
            }

            if(frontFace.faceObject != undefined) {
                volumeFace = frontFace.faceObject;

                axisOfNaviation = volumeFace.getAxisOfNaviation();

                planeOrientation = axisOfNaviation.plane;
                planeOrientation.hor.offsetTo = OffsetTo.LEFT;
                planeOrientation.ver.offsetTo = OffsetTo.TOP;
                planeOrientation.direction = volumeFace.direction;
                planeOrientation.orientation = volumeFace.orientation;

                sliderOrientation = axisOfNaviation.slider;
                sliderOrientation.offsetTo = OffsetTo.TOP;

                navigationPlaneHorLabel.html(planeOrientation.hor.getLabel());
                navigationPlaneVerLabel.html(planeOrientation.ver.getLabel());
                navigationSliderLabel.html(sliderOrientation.getLabel());
            }

            lastExecutionTime = Date.now();
        }
    }

    function determinePlanePosition() {
        if(!zoomedIn) {
            return;
        }

        if(navigationPlane.hasClass('ui-draggable-dragging')
          || navigationPlane.hasClass('no-pos-set')) {
            navigationPlane.addClass('no-pos-set');
            return;
        }

        horAxis = planeOrientation.hor.axis;
        verAxis = planeOrientation.ver.axis;

        planeRelativeX = navigationPlaneParent.width() / originalSizeArray[horAxis];
        planeRelativeY = navigationPlaneParent.height() / originalSizeArray[verAxis];

        planeWidth = planeRelativeX * zoomedInfoArray.dimension[horAxis];
        planeHeight = planeRelativeY * zoomedInfoArray.dimension[verAxis];

        planeWidth = Math.ceil(planeWidth);
        planeHeight = Math.ceil(planeHeight);

        planeOffsetLeft = zoomedInfoArray.offset[horAxis] * planeRelativeX;
        if((planeOrientation.direction == VolumeFaceDirection.BACK
            && planeOrientation.orientation == VolumeFaceOrientation.XZ)
           || (planeOrientation.direction == VolumeFaceDirection.FRONT
              && planeOrientation.orientation == VolumeFaceOrientation.YZ)) {

            planeOffsetLeft = navigationPlaneParent.width() - (planeOffsetLeft + navigationPlane.width());
        }

        planeOffsetTop = zoomedInfoArray.offset[verAxis] * planeRelativeY;
        if(planeOrientation.orientation == VolumeFaceOrientation.XZ
            || planeOrientation.orientation == VolumeFaceOrientation.YZ){

            planeOffsetTop = navigationPlaneParent.height() - (planeOffsetTop + navigationPlane.height());
        }

        navigationPlane.css({
            'top': planeOffsetTop + 'px',
            'left' : planeOffsetLeft + 'px',
            'width': planeWidth + 'px',
            'height': planeHeight + 'px'
        });

        navigationPlane.show();
        navigationPlaneParent.addClass('white');
    }

    function determineSliderPosition() {
        if(!zoomedIn) {
            return;
        }

        if(navigationSlider.hasClass('ui-draggable-dragging')
          || navigationSlider.hasClass('no-pos-set')) {
            navigationSlider.addClass('no-pos-set');
            return;
        }

        sliderRelative = navigationSliderParent.height() / originalSizeArray[sliderOrientation.axis];
        sliderOffsetTop = zoomedInfoArray.offset[sliderOrientation.axis] * sliderRelative;

        sliderHeight = Math.ceil(sliderRelative * zoomedInfoArray.dimension[sliderOrientation.axis]);

        if(planeOrientation.direction == VolumeFaceDirection.FRONT) {
            sliderOffsetTop = navigationSliderParent.height() - (navigationSlider.height() + sliderOffsetTop);
        }

        navigationSlider.css({
            'top': sliderOffsetTop + 'px',
            'height': sliderHeight + 'px'
        });

        navigationSlider.show();
        navigationSliderParent.addClass('white');
    }
};

function radToDeg(rad) {
    return rad * 180 / Math.PI;
}