Changeset 37561 for gs3-extensions
- Timestamp:
- 2023-03-24T16:41:53+13:00 (13 months ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/tabletop-dl/trunk/tabletop-interact.js
r37559 r37561 2 2 function dragMoveListener(event) 3 3 { 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) 15 16 } 16 17 … … 21 22 listeners: { move: dragMoveListener }, 22 23 24 /* 23 25 modifiers: [ 24 26 interact.modifiers.restrictRect({ … … 27 29 }) 28 30 ], 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 30 143 inertia: { 31 144 resistance: 6, … … 93 206 target.setAttribute('data-y', y) 94 207 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"97 208 } 98 209 }, … … 101 212 // keep the edges inside the parent 102 213 interact.modifiers.restrictEdges({ 103 outer: 'parent' 214 outer: 'parent', 215 endOnly: true 104 216 }), 105 217 … … 111 223 112 224 inertia: false 113 114 /*inertia: {115 resistance: 6,116 //minSpeed: 20,117 //endSpeed: 10,118 smoothEndDuration: 500,119 allowResume: true120 }*/121 225 }; 122 226 … … 135 239 }, 136 240 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 145 244 let $scale_elem = $(elem).find('.scale-element'); 146 245 … … 164 263 165 264 166 265 // For a slightly different way to attach event listeners see 266 // https://codepen.io/bxchang04/pen/XWmWbZQ 267 167 268 $(document).ready(function() { 168 269 … … 176 277 .resizable(resizable_options) 177 278 178 // still needed??179 //window.dragMoveListener = dragMoveListener180 181 182 279 var $drag_and_zoom_elems = $('.drag-and-zoom'); 183 280 … … 185 282 186 283 let this_elem = this; 187 188 /*189 let draggable_options = getCoreDraggableOptions();190 let angleScale = {191 angle: 0,192 scale: 1193 }194 195 */196 284 197 285 let this_angle_scale = { … … 199 287 scale: 1 200 288 } 201 202 289 203 290 let gdraggable_options = getCoreDraggableOptions(); … … 207 294 .gesturable(gesturable_options) 208 295 .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 238 297 }); 239 298 }); … … 242 301 $(document).ready(function() { 243 302 303 let home_url = "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks"; 304 244 305 $.ajax({ 245 url: "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks"306 url: home_url 246 307 }) 247 308 .done(function(data) { … … 320 381 321 382 322 //323 // interact('#my-winbox2')324 // .draggable(draggable_options)325 // .resizable(resizable_options);326 //327 328 383 let this_elem = document.getElementById('my-winbox2'); 329 384 … … 342 397 343 398 }); 344 345 346 /*347 interact('#my-winbox')348 .draggable({349 // enable inertial throwing350 inertia: true,351 // keep the element within the area of it's parent352 modifiers: [353 interact.modifiers.restrictRect({354 restriction: 'parent',355 endOnly: true356 })357 ],358 // enable autoScroll359 autoScroll: true,360 361 listeners: {362 // call this function on every dragmove event363 move: dragMoveListener,364 365 // call this function on every dragend event366 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 */378 399 379 400 });
Note:
See TracChangeset
for help on using the changeset viewer.