source: gs3-extensions/tabletop-dl/trunk/winbox-interact.js@ 37572

function dragRestrictionRect(x,y,interactable_elem)
{
    // This function effectively does the same as restrictEdges { outer: 'parent', ... }
    // but .... 
    // Upgraded to cope with the more complicated case where the interactable has
    // been rotated and scaled.  Without the extra checks, the 'outer' div that is
    // used for a rotated and scale interactable has is the one for the original element
    // prior to any scale or rotation applied to it (which is applied to .scale-element,
    // which is a child of the outer element)

    
    let elem = interactable_elem.element;
    let parent_elem = elem.parentElement;
    //console.log("parent elem:");
    //console.log(parent_elem);
    
    let parent_rect = parent_elem.getBoundingClientRect();
    let restrict_to_rect = {
    left:   parent_rect.left,
    right:  parent_rect.right,
    top:    parent_rect.top,
    bottom: parent_rect.bottom
    };
    
    
    let delta_xl = x - restrict_to_rect.left;
    let delta_xr = restrict_to_rect.right - x;
    let delta_yt = y - restrict_to_rect.top;
    let delta_yb = restrict_to_rect.bottom - y;
    
    let dragged_rect;
    
    let $dragged_elem = $(elem).find('.scale-element');
    if ($dragged_elem.length>0) {
    dragged_rect = $dragged_elem[0].getBoundingClientRect();
    }
    else {
    dragged_rect = elem.getBoundingClientRect();
    }
                
    //console.log(dragged_rect);
    //console.log("restrict to:");
    //console.log(restrict_to_rect);
    
    // test bounds of dragged_rect, to restrict_to_rect
    // factor in any overshoots in the encoded rect returned

    if ((dragged_rect.left >= restrict_to_rect.left) || (dragged_rect.right <= restrict_to_rect.right)) {
    // want to avoid situation where for dragged_rect both left and right are
    // outside of the restrict_to_rect
    
    if (dragged_rect.left < restrict_to_rect.left) {
        // encode how much the overshoot it
        restrict_to_rect.left += (restrict_to_rect.left - dragged_rect.left);
        
        // Now factor in the offset that comes from the supplied (x,y);         
        restrict_to_rect.left  += (x - parent_rect.left);
        restrict_to_rect.right += (x - parent_rect.left);
        
    }
    if (dragged_rect.right > restrict_to_rect.right) {
        // encode how much the overshoot it
        restrict_to_rect.right -= (dragged_rect.right - restrict_to_rect.right);
        
        // Now factor in the offset that comes from the supplied (x,y);         
        restrict_to_rect.left  -= (parent_rect.right - x) + 1;
        restrict_to_rect.right -= (parent_rect.right - x) + 1;

    }
    }
    if ((dragged_rect.top >= restrict_to_rect.top) || (dragged_rect.bottom <= restrict_to_rect.bottom)) {
    // want to avoid situation where for dragged_rect both left and right are
    // outside of the restrict_to_rect
            
    if (dragged_rect.top < restrict_to_rect.top) {
        // encode how much the overshoot it
        restrict_to_rect.top += (restrict_to_rect.top - dragged_rect.top);
        
        // Now factor in the offset that comes from the supplied (x,y);         
        restrict_to_rect.top    += (y - parent_rect.top);
        restrict_to_rect.bottom += (y - parent_rect.top);
    }
    if (dragged_rect.bottom > restrict_to_rect.bottom) {
        // encode how much the overshoot it
        restrict_to_rect.bottom -= (dragged_rect.bottom - restrict_to_rect.bottom);
        
        // Now factor in the offset that comes from the supplied (x,y);         
        restrict_to_rect.top    -= (parent_rect.bottom - y) + 1;
        restrict_to_rect.bottom -= (parent_rect.bottom - y) + 1;        
    }
    }
        
    return restrict_to_rect;
}
    
    
function dragMoveListener(event)
{
    var target = event.target
    
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
    
    // translate the element
    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
    
    // update the posiion attributes
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
}

function getCoreDraggableOptions()
{
    let core_draggable_options = {

    //listeners: { move: dragMoveListener },

    /*
      onstart: function(event) {
        let target = event.target;
    },

    */
    
    onmove: dragMoveListener,

    /*
    onend: function(event) {
        let target = event.target;
    },
    */
    
    
    modifiers: [
        interact.modifiers.restrict({       
        restriction: dragRestrictionRect,               
        endOnly: true
        }),
    ],
    
    inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
    }       
    };

    return core_draggable_options;
}

function getCoreResizableOptions()
{
    let core_resizable_options = {

    preserveAspectRatio: false,
    edges: { left: true, right: true, bottom: true, top: false },
        
    listeners: {

        moveNEWER_UNUSED: function (event) {
        let { x, y } = event.target.dataset
        
        x = (parseFloat(x) || 0) + event.deltaRect.left
        y = (parseFloat(y) || 0) + event.deltaRect.top
        
        Object.assign(event.target.style, {
            width: `${event.rect.width}px`,
            height: `${event.rect.height}px`,
            transform: `translate(${x}px, ${y}px)`
        })
        
        Object.assign(event.target.dataset, { x, y })
        },
        
        move (event) {
        var target = event.target
        var x = (parseFloat(target.getAttribute('data-x')) || 0)
        var y = (parseFloat(target.getAttribute('data-y')) || 0)
        //var x = (parseFloat(target.getAttribute('data-x')) || target.style.clientLeft)
        //var y = (parseFloat(target.getAttribute('data-y')) || target.style.clientTop)
        
        // update the element's style
        target.style.width = event.rect.width + 'px'
        target.style.height = event.rect.height + 'px'
        
        // translate when resizing from top or left edges
        x += event.deltaRect.left
        y += event.deltaRect.top
        
        target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
        
        //var target_new_x_org = target.clientLeft + event.deltaRect.left;
        //var target_new_y_org = target.clientTop  + event.deltaRect.top;

        //target.style.left = target_new_x_org + 'px';
        //target.style.top  = target_new_y_org + 'px';

        //target.style.left = x + 'px';
        //target.style.top  = y + 'px';

        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)
        
        }
    },
    
    modifiers: [
        // keep the edges inside the parent
        interact.modifiers.restrictEdges({
        outer: 'parent',
        endOnly: true
        }),
        
        // minimum size
        interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
        })
    ],
        
    inertia: false
    };

    return core_resizable_options;
    
}


//function getCoreGesturableOptions(elem,angleScale)
function getCoreGesturableOptions(elem)
{
    //let elem_angle_scale = {
    let angleScale = {
    angle: 0,
    scale: 1
    };
    
    let core_gesturable_options = {
    listeners: {
        start (event) {
        angleScale.angle -= event.angle;        
        },
        move (event) {
        
        let currentAngle = angleScale.angle + event.angle;
        let currentScale = angleScale.scale * event.scale;
        
        let $scale_elem = $(elem).find('.scale-element');
        
        $scale_elem.css(
            'transform',
            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
        );

        
        dragMoveListener(event);
        },
        end (event) {
        angleScale.angle = angleScale.angle + event.angle;
        angleScale.scale = angleScale.scale * event.scale;          
        }
    }
    };

    return core_gesturable_options;
}
    
    
// For a slightly different way to attach event listeners see
//  https://codepen.io/bxchang04/pen/XWmWbZQ

/*
$(document).ready(function() {

    let draggable_options = getCoreDraggableOptions();
    let resizable_options = getCoreResizableOptions();
    
    draggable_options.autoScroll =true;    
    
    interact('.resize-drag')
    .draggable(draggable_options)
    .resizable(resizable_options)

    var $drag_and_zoom_elems = $('.drag-and-zoom');

    $drag_and_zoom_elems.each(function(index) {

    let this_elem = this;

    
    //let this_angle_scale = {
    //    angle: 0,
    //    scale: 1
    //}
    
    
    let gdraggable_options = getCoreDraggableOptions();
    let gesturable_options = getCoreGesturableOptions(this_elem);//this_angle_scale);

    interact(this_elem)
        .gesturable(gesturable_options)
        .draggable(gdraggable_options);
    
    });
});
*/


$(document).ready(function() {

    let doc_url = "http://localhost:8383/greenstone3/library/collection/gs2mgdemo/document/HASHe3aae2159b0dda6553cee4";

    const gs_primary_bg_color = $('#gs-css-root-primary').css('background-color');
    
    $.ajax({
    url: doc_url,
    data: {
        "excerptid": "gs_content",
        "ed": "1"
    }
    })
    .done(function(html_result) {

        
        let win2 = new WinBox({
        id:    "my-winbox2",
        title: 'Document: Drag, Scale and Rotate',
        //class: [ "no-min", "no-max", "no-full", "no-resize", "no-move" ],
        class: [ "no-min", "no-max", "no-full" ],       
        x: 1000,
        y: 80,
        width: '900px',
        height: '600px',
        border: "0.3em",
        html: html_result
        });
        
        // user-select: none;
        // touch-action: none;
        
        let $win2 = $('#my-winbox2');
        let $scale_element_div = $('<div>')
        .attr("class","scale-element")
        .css("pointer-events","all")
            .css("position","relative")
            .css("width","100%")
            .css("height","100%")
        .css("background-color", gs_primary_bg_color);
        
        $scale_element_div.append($win2.children()).clone();
        
        $win2.empty().append($scale_element_div);
        
        $('#my-winbox2 .wb-body').addClass("winbox-info-window");
    
        
        let this_elem = document.getElementById('my-winbox2');

        /*
        let this_angle_scale = {
        angle: 0,
        scale: 1
        };
        */
        
        let gdraggable_options = getCoreDraggableOptions();
        let gesturable_options = getCoreGesturableOptions(this_elem/*,this_angle_scale*/);
        
        var my_winbox2 = interact('#my-winbox2')
        .gesturable(gesturable_options)
        .draggable(gdraggable_options);

        $('#my-winbox2').css("pointer-events","none");
        
    });
});