Changeset 37568

Timestamp:

2023-03-25T22:18:10+13:00 (13 months ago)

Author:

davidb

Message:

Improvements to interaction with scalable/rotatable windows: restricts to the actual size of the scaled/rotated window; ignores pointer events that fall outside of the scaled/rotated window

File:

• gs3-extensions/tabletop-dl/trunk/tabletop-interact.js (modified) (11 diffs)

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

@@ -1 +1 @@
 
+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)
 {
@@ -20 +116 @@
     let core_draggable_options = {
 
-    listeners: { move: dragMoveListener },
+    //listeners: { move: dragMoveListener },
 
     /*
-    modifiers: [
-        interact.modifiers.restrictRect({
-        restriction: 'parent',
-        endOnly: true
-        })
-    ],  
+      onstart: function(event) {
+        let target = event.target;
+    },
+
     */
+    
+    onmove: dragMoveListener,
+
+    /*
+    onend: function(event) {
+        let target = event.target;
+    },
+    */
+    
     
     modifiers: [
         interact.modifiers.restrict({       
-        restriction: function(x,y,interactable_elem) {
-            console.log(`Called draggable restriction function with: x=${x}, y=${y}`);
+        restriction: dragRestrictionRect,
+        
+/*
+        function(x,y,interactable_elem) {
+            //console.log(`!!! Called draggable restriction function with: x=${x}, y=${y}`);
 
             let elem = interactable_elem.element;
@@ -70 +176 @@
             //let delta_yt = y - dragged_rect.top;
             //let delta_yb = dragged_rect.bottom - y;
-
-            console.log(dragged_rect);
-            console.log("restrict to:");
-            console.log(restrict_to_rect);
+            
+            //console.log(dragged_rect);
+            //console.log("restrict to:");
+            //console.log(restrict_to_rect);
             
             // test bounds of dragged_rect, to restrict_to_rect
@@ -130 +236 @@
             //restrict_to_rect.height = restrict_to_rect.bottom - restrict_to_rect.top + 1;
             
-            console.log(`Returning for (${x},${y}) as delta [xl<->xr],[yt,<->yb] [(${delta_xl}<->${delta_xr}],[${delta_yt})<->${delta_yb}]`);
-            console.log(restrict_to_rect);
+            //console.log(`Returning for (${x},${y}) as delta [xl<->xr],[yt,<->yb] [(${delta_xl}<->${delta_xr}],[${delta_yt})<->${delta_yb}]`);
+            //console.log(restrict_to_rect);
                 
             return restrict_to_rect;
-        },
-
+            },*/        
         
         endOnly: true
@@ -233 +338 @@
 {
     let core_gesturable_options = {
-    
     listeners: {
         start (event) {
-        angleScale.angle -= event.angle;
+        angleScale.angle -= event.angle;        
         },
         move (event) {
+        
         let currentAngle = angleScale.angle + event.angle;
         let currentScale = angleScale.scale * event.scale;
@@ -336 +441 @@
 
 
-
-
     let doc_url = "http://localhost:8383/greenstone3/library/collection/gs2mgdemo/document/HASHe3aae2159b0dda6553cee4";
 
@@ -350 +453 @@
 
         
-        const win2 = new WinBox({
+        let win2 = new WinBox({
         id:    "my-winbox2",
         title: 'Winbox + Interact Example: Drag, Scale and Rotate',
@@ -358 +461 @@
         height: '600px',
         border: "0.3em",
-        //background: "#29e",
-        //html: "<p>Some Sample Text</p>"
         html: html_result
         });
@@ -369 +470 @@
         let $scale_element_div = $('<div>')
         .attr("class","scale-element")
+        .css("pointer-events","all")
             .css("position","relative")
             .css("width","100%")
@@ -386 +488 @@
         angle: 0,
         scale: 1
-        }
+        };
         
         
@@ -392 +494 @@
         let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
         
-        interact('#my-winbox2')
+        var my_winbox2 = interact('#my-winbox2')
         .gesturable(gesturable_options)
         .draggable(gdraggable_options);
+
+        $('#my-winbox2').css("pointer-events","none");
         
     });
-    
 });