Changeset 37561


Ignore:
Timestamp:
2023-03-24T16:41:53+13:00 (13 months ago)
Author:
davidb
Message:

Restict now works correctly with scaled and rotated window

File:
1 edited

Legend:

Unmodified
Added
Removed

  • gs3-extensions/tabletop-dl/trunk/tabletop-interact.js

    r37559 r37561  
    22function dragMoveListener(event)
    33{
    4   var target = event.target
    5   // keep the dragged position in the data-x/data-y attributes
    6   var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    7   var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
    8 
    9   // translate the element
    10   target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
    11 
    12   // update the posiion attributes
    13   target.setAttribute('data-x', x)
    14   target.setAttribute('data-y', y)
     4    var target = event.target
     5   
     6    // keep the dragged position in the data-x/data-y attributes
     7    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
     8    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
     9   
     10    // translate the element
     11    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
     12   
     13    // update the posiion attributes
     14    target.setAttribute('data-x', x)
     15    target.setAttribute('data-y', y)
    1516}
    1617
    … …  
    2122    listeners: { move: dragMoveListener },
    2223
     24    /*
    2325    modifiers: [
    2426        interact.modifiers.restrictRect({
    … …  
    2729        })
    2830    ], 
    29 
     31    */
     32   
     33    modifiers: [
     34        interact.modifiers.restrict({       
     35        restriction: function(x,y,interactable_elem) {
     36            console.log(`Called draggable restriction function with: x=${x}, y=${y}`);
     37
     38            let elem = interactable_elem.element;
     39            let parent_elem = elem.parentElement;
     40            //console.log("parent elem:");
     41            //console.log(parent_elem);
     42
     43            let parent_rect = parent_elem.getBoundingClientRect();
     44            let restrict_to_rect = {
     45            left:   parent_rect.left,
     46            right:  parent_rect.right,
     47            top:    parent_rect.top,
     48            bottom: parent_rect.bottom
     49            };
     50
     51
     52            let delta_xl = x - restrict_to_rect.left;
     53            let delta_xr = restrict_to_rect.right - x;
     54            let delta_yt = y - restrict_to_rect.top;
     55            let delta_yb = restrict_to_rect.bottom - y;
     56           
     57            let dragged_rect;
     58
     59            let $dragged_elem = $(elem).find('.scale-element');
     60            if ($dragged_elem.length>0) {
     61            dragged_rect = $dragged_elem[0].getBoundingClientRect();
     62            }
     63            else {
     64            dragged_rect = elem.getBoundingClientRect();
     65            }
     66
     67           
     68            //let delta_xl = x - dragged_rect.left;
     69            //let delta_xr = dragged_rect.right - x;
     70            //let delta_yt = y - dragged_rect.top;
     71            //let delta_yb = dragged_rect.bottom - y;
     72
     73            console.log(dragged_rect);
     74            console.log("restrict to:");
     75            console.log(restrict_to_rect);
     76           
     77            // test bounds of dragged_rect, to restrict_to_rect
     78            // factor in any overshoots in the encoded rect returned
     79
     80            if ((dragged_rect.left >= restrict_to_rect.left) || (dragged_rect.right <= restrict_to_rect.right)) {
     81                // want to avoid situation where for dragged_rect both left and right are
     82                // outside of the restrict_to_rect
     83               
     84                if (dragged_rect.left < restrict_to_rect.left) {
     85                // encode how much the overshoot it
     86                restrict_to_rect.left += (restrict_to_rect.left - dragged_rect.left);
     87               
     88                // Now factor in the offset that comes from the supplied (x,y);         
     89                restrict_to_rect.left  += (x - parent_rect.left);
     90                restrict_to_rect.right += (x - parent_rect.left);
     91               
     92                }
     93                if (dragged_rect.right > restrict_to_rect.right) {
     94                // encode how much the overshoot it
     95                restrict_to_rect.right -= (dragged_rect.right - restrict_to_rect.right);
     96               
     97                // Now factor in the offset that comes from the supplied (x,y);         
     98                restrict_to_rect.left  -= (parent_rect.right - x) + 1;
     99                restrict_to_rect.right -= (parent_rect.right - x) + 1;
     100
     101                }
     102            }
     103            if ((dragged_rect.top >= restrict_to_rect.top) || (dragged_rect.bottom <= restrict_to_rect.bottom)) {
     104                // want to avoid situation where for dragged_rect both left and right are
     105                // outside of the restrict_to_rect
     106           
     107            if (dragged_rect.top < restrict_to_rect.top) {
     108                // encode how much the overshoot it
     109                restrict_to_rect.top += (restrict_to_rect.top - dragged_rect.top);
     110               
     111                // Now factor in the offset that comes from the supplied (x,y);         
     112                restrict_to_rect.top    += (y - parent_rect.top);
     113                restrict_to_rect.bottom += (y - parent_rect.top);
     114            }
     115            if (dragged_rect.bottom > restrict_to_rect.bottom) {
     116                // encode how much the overshoot it
     117                restrict_to_rect.bottom -= (dragged_rect.bottom - restrict_to_rect.bottom);
     118           
     119                // Now factor in the offset that comes from the supplied (x,y);         
     120            restrict_to_rect.top    -= (parent_rect.bottom - y) + 1;
     121                restrict_to_rect.bottom -= (parent_rect.bottom - y) + 1;
     122               
     123            }
     124            }
     125
     126            //restrict_to_rect.x = restrict_to_rect.left;
     127            //restrict_to_rect.width = restrict_to_rect.right - restrict_to_rect.left + 1;
     128
     129            //restrict_to_rect.y = restrict_to_rect.top;
     130            //restrict_to_rect.height = restrict_to_rect.bottom - restrict_to_rect.top + 1;
     131           
     132            console.log(`Returning for (${x},${y}) as delta [xl<->xr],[yt,<->yb] [(${delta_xl}<->${delta_xr}],[${delta_yt})<->${delta_yb}]`);
     133            console.log(restrict_to_rect);
     134               
     135            return restrict_to_rect;
     136        },
     137
     138       
     139        endOnly: true
     140        }),
     141    ],
     142   
    30143    inertia: {
    31144            resistance: 6,
    … …  
    93206        target.setAttribute('data-y', y)
    94207       
    95         // var textEl = $(event.target).find('.interact-info-bar')[0];         
    96         // textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
    97208        }
    98209    },
    … …  
    101212        // keep the edges inside the parent
    102213        interact.modifiers.restrictEdges({
    103         outer: 'parent'
     214        outer: 'parent',
     215        endOnly: true
    104216        }),
    105217       
    … …  
    111223       
    112224    inertia: false
    113    
    114     /*inertia: {
    115             resistance: 6,
    116             //minSpeed: 20,
    117             //endSpeed: 10,
    118             smoothEndDuration: 500,
    119             allowResume: true
    120     }*/     
    121225    };
    122226
    … …  
    135239        },
    136240        move (event) {
    137         let currentAngle = event.angle + angleScale.angle;
    138         let currentScale = event.scale * angleScale.scale;
    139        
    140         //let scale_elem = $(elem).find('.scale-element')[0];
    141        
    142         //scale_elem.style.transform =         
    143         //    'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';
    144 
     241        let currentAngle = angleScale.angle + event.angle;
     242        let currentScale = angleScale.scale * event.scale;
     243       
    145244        let $scale_elem = $(elem).find('.scale-element');
    146245       
    … …  
    164263   
    165264   
    166    
     265// For a slightly different way to attach event listeners see
     266//  https://codepen.io/bxchang04/pen/XWmWbZQ
     267
    167268$(document).ready(function() {
    168269
    … …  
    176277    .resizable(resizable_options)
    177278
    178     // still needed??
    179     //window.dragMoveListener = dragMoveListener
    180 
    181 
    182279    var $drag_and_zoom_elems = $('.drag-and-zoom');
    183280
    … …  
    185282
    186283    let this_elem = this;
    187 
    188     /*
    189     let draggable_options = getCoreDraggableOptions();
    190     let angleScale = {
    191         angle: 0,
    192         scale: 1
    193     }
    194 
    195     */
    196284   
    197285    let this_angle_scale = {
    … …  
    199287        scale: 1
    200288    }
    201 
    202289   
    203290    let gdraggable_options = getCoreDraggableOptions();
    … …  
    207294        .gesturable(gesturable_options)
    208295        .draggable(gdraggable_options);
    209        
    210     /*
    211     interact(this_elem)
    212         .gesturable({
    213         listeners: {
    214             start (event) {
    215             angleScale.angle -= event.angle     
    216             },
    217             move (event) {
    218             let currentAngle = event.angle + angleScale.angle
    219             let currentScale = event.scale * angleScale.scale
    220 
    221             let this_scale_elem = $(this_elem).find('.scale-element')[0];
    222            
    223             this_scale_elem.style.transform =           
    224                 'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
    225            
    226             dragMoveListener(event)
    227             },
    228             end (event) {
    229             angleScale.angle = angleScale.angle + event.angle
    230             angleScale.scale = angleScale.scale * event.scale           
    231             }
    232         }
    233         })
    234         .draggable(draggable_options)
    235        
    236     */
    237 
     296   
    238297    });
    239298});
    … …  
    242301$(document).ready(function() {
    243302
     303    let home_url = "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks";
     304   
    244305    $.ajax({
    245     url: "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks"
     306    url: home_url
    246307    })
    247308    .done(function(data) {
    … …  
    320381   
    321382       
    322         //
    323         //  interact('#my-winbox2')
    324         //  .draggable(draggable_options)
    325         //  .resizable(resizable_options);
    326         //
    327        
    328383        let this_elem = document.getElementById('my-winbox2');
    329384       
    … …  
    342397       
    343398    });
    344 
    345 
    346     /*
    347     interact('#my-winbox')
    348         .draggable({
    349         // enable inertial throwing
    350         inertia: true,
    351         // keep the element within the area of it's parent
    352         modifiers: [
    353             interact.modifiers.restrictRect({
    354             restriction: 'parent',
    355             endOnly: true
    356             })
    357         ],
    358         // enable autoScroll
    359         autoScroll: true,
    360        
    361         listeners: {
    362             // call this function on every dragmove event
    363             move: dragMoveListener,
    364            
    365             // call this function on every dragend event
    366             end (event) {
    367             var textEl = event.target.querySelector('p')
    368            
    369             textEl && (textEl.textContent =
    370                    'moved a distance of ' +
    371                    (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    372                           Math.pow(event.pageY - event.y0, 2) | 0))
    373                    .toFixed(2) + 'px')
    374             }
    375         }
    376         });
    377     */
    378399   
    379400});
Note: See TracChangeset for help on using the changeset viewer.