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

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 },

    modifiers: [
        interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
        })
    ],  

    inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
    }       
    };

    return core_draggable_options;
}

function getCoreResizableOptions()
{
    let core_resizable_options = {
    
    edges: { left: true, right: true, bottom: true, top: true },
        
    listeners: {
        move (event) {
        var target = event.target
        var x = (parseFloat(target.getAttribute('data-x')) || 0)
        var y = (parseFloat(target.getAttribute('data-y')) || 0)
        
        // 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)'
        
        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)
        
        // var textEl = $(event.target).find('.interact-info-bar')[0];          
        // textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
        }
    },
    
    modifiers: [
        // keep the edges inside the parent
        interact.modifiers.restrictEdges({
        outer: 'parent'
        }),
        
        // minimum size
        interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
        })
    ],
        
    
    inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
    }       
    };

    return core_resizable_options;
    
}


function getCoreGesturableOptions(elem,angleScale)
{
    let core_gesturable_options = {
    
    listeners: {
        start (event) {
        angleScale.angle -= event.angle;
        },
        move (event) {
        let currentAngle = event.angle + angleScale.angle;
        let currentScale = event.scale * angleScale.scale;
        
        let scale_elem = $(elem).find('.scale-element')[0];
        
        scale_elem.style.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;
}
    
    
    
$(document).ready(function() {

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

    // still needed??
    //window.dragMoveListener = dragMoveListener


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

    $drag_and_zoom_elems.each(function(index) {

    let this_elem = this;

    /*
    let draggable_options = getCoreDraggableOptions();
    let angleScale = {
        angle: 0,
        scale: 1
    }

    */
    
    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);
        
    /*
    interact(this_elem)
        .gesturable({
        listeners: {
            start (event) {
            angleScale.angle -= event.angle     
            },
            move (event) {
            let currentAngle = event.angle + angleScale.angle
            let currentScale = event.scale * angleScale.scale

            let this_scale_elem = $(this_elem).find('.scale-element')[0];
            
            this_scale_elem.style.transform =           
                'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
            
            dragMoveListener(event)
            },
            end (event) {
            angleScale.angle = angleScale.angle + event.angle
            angleScale.scale = angleScale.scale * event.scale           
            }
        }
        })
        .draggable(draggable_options)
        
    */

    });
});


$(document).ready(function() {
    
    const win1 = new WinBox({
    id:    "my-winbox1",
    title: 'Winbox + Interact Example 1',
    x: 200,
    y: 200,
    width: '400px',
    height: '400px',
    border: "0.3em",
    background: "#29e",
    html: "<p style=\"padding: 8px; color: #000;\">This window can be dragged around and resized</p>"
    });
    
    let draggable_options = getCoreDraggableOptions();
    let resizable_options = getCoreResizableOptions();
    
    draggable_options.autoScroll = true;
    
    interact('#my-winbox1')
    .draggable(draggable_options)
    .resizable(resizable_options);



    const win2 = new WinBox({
    id:    "my-winbox2",
    title: 'Winbox + Interact Example 2',
    x: 800,
    y: 200,
    width: '500px',
    height: '300px',
    border: "0.3em",
    background: "#29e",
    html: "<p class=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
    });
    
    /*
    interact('#my-winbox2')
    .draggable(draggable_options)
    .resizable(resizable_options);
    */

    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);
    
    interact('#my-winbox2')
    .gesturable(gesturable_options)
    .draggable(gdraggable_options);
    
    
    /*
    interact('#my-winbox')
        .draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,
        
        listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,
            
            // call this function on every dragend event
            end (event) {
            var textEl = event.target.querySelector('p')
            
            textEl && (textEl.textContent =
                   'moved a distance of ' +
                   (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                          Math.pow(event.pageY - event.y0, 2) | 0))
                   .toFixed(2) + 'px')
            }
        }
        });
    */
    
});