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

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


$(document).ready(function() {

    
    interact('.resize-drag')
    .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')
            var textEl = $(event.target).find('.interact-info-bar')[0];
            
            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(0) + ' pixels')
        }
        }
    })
    .resizable({
        // resize from all edges and corners
        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: true
    });

/*
  .draggable({
    listeners: { move: window.dragMoveListener },
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  })
*/


    // this function is used later in the resizing and gesture demos
    window.dragMoveListener = dragMoveListener


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

    $drag_and_zoom_elems.each(function(index) {

    let this_elem = this;
    let $this_elem = $(this_elem);
    
    let angleScale = {
        angle: 0,
        scale: 1
    }
    let gestureArea = document.getElementById('gesture-area')
    let scaleElement = document.getElementById('scale-element')
    //let resetTimeout


    //let gesture_areas_col = interact('.drag-and-zoom');
    //console.log(gesture_areas_col);
    
    //let gesture_area = interact(gestureArea)
    //console.log(gesture_area);
    
    // interact(gestureArea)
    //gesture_area
    //gesture_areas_col
    interact(this_elem)
        .gesturable({
        listeners: {
            start (event) {
            angleScale.angle -= event.angle
            
            //clearTimeout(resetTimeout)
            //scaleElement.classList.remove('reset')
            },
            move (event) {
            // document.body.appendChild(new Text(event.scale))
            let currentAngle = event.angle + angleScale.angle
            let currentScale = event.scale * angleScale.scale
            //console.log(this);
            
            //scaleElement.style.transform =
            let this_scale_elem = $(this_elem).find('.scale-element')[0];
            
            this_scale_elem.style.transform =           
                'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
            
            // uses the dragMoveListener from the draggable demo above
            dragMoveListener(event)
            },
            end (event) {
            angleScale.angle = angleScale.angle + event.angle
            angleScale.scale = angleScale.scale * event.scale
            
            //resetTimeout = setTimeout(reset, 1000)
            //scaleElement.classList.add('reset')
            }
        }
        })
    
        .draggable({
        inertia: true,
        modifiers: [
            interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
            })
        ],
        listeners: { move: dragMoveListener }
        })

/*

        .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')
            }
        }
        })
    
        .resizable({
        // resize from all edges and corners
        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)
            target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
            }
        },
        modifiers: [
            // keep the edges inside the parent
            interact.modifiers.restrictEdges({
            outer: 'parent'
            }),
            
            // minimum size
            interact.modifiers.restrictSize({
            min: { width: 100, height: 50 }
            })
        ],
        
        inertia: true
        });

        */
    });
    

/*
function reset () {
  scaleElement.style.transform = 'scale(1)'

  angleScale.angle = 0
  angleScale.scale = 1
}
*/



});