Changeset 37538 for gs3-extensions


Ignore:
Timestamp:
2023-03-18T00:09:16+13:00 (13 months ago)
Author:
davidb
Message:

'Development of winbox combined with interact.js to the point where basic rotation and zooming is working

Location:
gs3-extensions/tabletop-dl/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r37467 r37538  
    11
    2 function dragMoveListener (event) {
     2function dragMoveListener(event)
     3{
    34  var target = event.target
    45  // keep the dragged position in the data-x/data-y attributes
    … …  
    1415}
    1516
    16 
     17function getCoreDraggableOptions()
     18{
     19    let core_draggable_options = {
     20
     21    listeners: { move: dragMoveListener },
     22
     23    modifiers: [
     24        interact.modifiers.restrictRect({
     25        restriction: 'parent',
     26        endOnly: true
     27        })
     28    ], 
     29
     30    inertia: {
     31            resistance: 6,
     32            //minSpeed: 20,
     33            //endSpeed: 10,
     34            smoothEndDuration: 500,
     35            allowResume: true
     36    }       
     37    };
     38
     39    return core_draggable_options;
     40}
     41
     42function getCoreResizableOptions()
     43{
     44    let core_resizable_options = {
     45   
     46    edges: { left: true, right: true, bottom: true, top: true },
     47       
     48    listeners: {
     49        move (event) {
     50        var target = event.target
     51        var x = (parseFloat(target.getAttribute('data-x')) || 0)
     52        var y = (parseFloat(target.getAttribute('data-y')) || 0)
     53       
     54        // update the element's style
     55        target.style.width = event.rect.width + 'px'
     56        target.style.height = event.rect.height + 'px'
     57       
     58        // translate when resizing from top or left edges
     59        x += event.deltaRect.left
     60        y += event.deltaRect.top
     61       
     62        target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
     63       
     64        target.setAttribute('data-x', x)
     65        target.setAttribute('data-y', y)
     66       
     67        // var textEl = $(event.target).find('.interact-info-bar')[0];         
     68        // textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
     69        }
     70    },
     71   
     72    modifiers: [
     73        // keep the edges inside the parent
     74        interact.modifiers.restrictEdges({
     75        outer: 'parent'
     76        }),
     77       
     78        // minimum size
     79        interact.modifiers.restrictSize({
     80        min: { width: 100, height: 50 }
     81        })
     82    ],
     83       
     84   
     85    inertia: {
     86            resistance: 6,
     87            //minSpeed: 20,
     88            //endSpeed: 10,
     89            smoothEndDuration: 500,
     90            allowResume: true
     91    }       
     92    };
     93
     94    return core_resizable_options;
     95   
     96}
     97
     98
     99function getCoreGesturableOptions(elem,angleScale)
     100{
     101    let core_gesturable_options = {
     102   
     103    listeners: {
     104        start (event) {
     105        angleScale.angle -= event.angle;
     106        },
     107        move (event) {
     108        let currentAngle = event.angle + angleScale.angle;
     109        let currentScale = event.scale * angleScale.scale;
     110       
     111        let scale_elem = $(elem).find('.scale-element')[0];
     112       
     113        scale_elem.style.transform =           
     114            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';
     115       
     116        dragMoveListener(event);
     117        },
     118        end (event) {
     119        angleScale.angle = angleScale.angle + event.angle;
     120        angleScale.scale = angleScale.scale * event.scale;         
     121        }
     122    }
     123    };
     124
     125    return core_gesturable_options;
     126}
     127   
     128   
     129   
    17130$(document).ready(function() {
    18131
     132    let draggable_options = getCoreDraggableOptions();
     133    let resizable_options = getCoreResizableOptions();
     134   
     135    draggable_options.autoScroll =true;   
    19136   
    20137    interact('.resize-drag')
    21     .draggable({
    22         // enable inertial throwing
    23         inertia: true,
    24         // keep the element within the area of it's parent
    25         modifiers: [
    26         interact.modifiers.restrictRect({
    27             restriction: 'parent',
    28             endOnly: true
    29         })
    30         ],
    31         // enable autoScroll
    32         autoScroll: true,
    33        
    34         listeners: {
    35         // call this function on every dragmove event
    36         move: dragMoveListener,
    37        
    38         // call this function on every dragend event
    39         end (event) {
    40             //var textEl = event.target.querySelector('p')
    41             var textEl = $(event.target).find('.interact-info-bar')[0];
    42            
    43             textEl && (textEl.textContent =
    44                    'Moved a distance of: ' +
    45                    (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    46                       Math.pow(event.pageY - event.y0, 2) | 0))
    47                    .toFixed(0) + ' pixels')
    48         }
    49         }
    50     })
    51     .resizable({
    52         // resize from all edges and corners
    53         edges: { left: true, right: true, bottom: true, top: true },
    54        
    55         listeners: {
    56         move (event) {
    57             var target = event.target
    58             var x = (parseFloat(target.getAttribute('data-x')) || 0)
    59             var y = (parseFloat(target.getAttribute('data-y')) || 0)
    60            
    61             // update the element's style
    62             target.style.width = event.rect.width + 'px'
    63             target.style.height = event.rect.height + 'px'
    64            
    65             // translate when resizing from top or left edges
    66             x += event.deltaRect.left
    67             y += event.deltaRect.top
    68            
    69             target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
    70            
    71             target.setAttribute('data-x', x)
    72             target.setAttribute('data-y', y)
    73 
    74             var textEl = $(event.target).find('.interact-info-bar')[0];         
    75             textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
    76         }
    77         },
    78         modifiers: [
    79         // keep the edges inside the parent
    80         interact.modifiers.restrictEdges({
    81             outer: 'parent'
    82         }),
    83        
    84         // minimum size
    85         interact.modifiers.restrictSize({
    86             min: { width: 100, height: 50 }
    87         })
    88         ],
    89        
    90         inertia: true
    91     });
    92 
    93 /*
    94   .draggable({
    95     listeners: { move: window.dragMoveListener },
    96     inertia: true,
    97     modifiers: [
    98       interact.modifiers.restrictRect({
    99         restriction: 'parent',
    100         endOnly: true
    101       })
    102     ]
    103   })
    104 */
    105 
    106 
    107     // this function is used later in the resizing and gesture demos
    108     window.dragMoveListener = dragMoveListener
     138    .draggable(draggable_options)
     139    .resizable(resizable_options)
     140
     141    // still needed??
     142    //window.dragMoveListener = dragMoveListener
    109143
    110144
    … …  
    114148
    115149    let this_elem = this;
    116     let $this_elem = $(this_elem);
    117    
     150
     151    /*
     152    let draggable_options = getCoreDraggableOptions();
    118153    let angleScale = {
    119154        angle: 0,
    120155        scale: 1
    121156    }
    122     let gestureArea = document.getElementById('gesture-area')
    123     let scaleElement = document.getElementById('scale-element')
    124     //let resetTimeout
    125 
    126 
    127     //let gesture_areas_col = interact('.drag-and-zoom');
    128     //console.log(gesture_areas_col);
    129    
    130     //let gesture_area = interact(gestureArea)
    131     //console.log(gesture_area);
    132    
    133     // interact(gestureArea)
    134     //gesture_area
    135     //gesture_areas_col
     157
     158    */
     159   
     160    let this_angle_scale = {
     161        angle: 0,
     162        scale: 1
     163    }
     164
     165   
     166    let gdraggable_options = getCoreDraggableOptions();
     167    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
     168
     169    interact(this_elem)
     170        .gesturable(gesturable_options)
     171        .draggable(gdraggable_options);
     172       
     173    /*
    136174    interact(this_elem)
    137175        .gesturable({
    138176        listeners: {
    139177            start (event) {
    140             angleScale.angle -= event.angle
    141            
    142             //clearTimeout(resetTimeout)
    143             //scaleElement.classList.remove('reset')
     178            angleScale.angle -= event.angle     
    144179            },
    145180            move (event) {
    146             // document.body.appendChild(new Text(event.scale))
    147181            let currentAngle = event.angle + angleScale.angle
    148182            let currentScale = event.scale * angleScale.scale
    149             //console.log(this);
    150            
    151             //scaleElement.style.transform =
     183
    152184            let this_scale_elem = $(this_elem).find('.scale-element')[0];
    153185           
    … …  
    155187                'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
    156188           
    157             // uses the dragMoveListener from the draggable demo above
    158189            dragMoveListener(event)
    159190            },
    160191            end (event) {
    161192            angleScale.angle = angleScale.angle + event.angle
    162             angleScale.scale = angleScale.scale * event.scale
    163            
    164             //resetTimeout = setTimeout(reset, 1000)
    165             //scaleElement.classList.add('reset')
     193            angleScale.scale = angleScale.scale * event.scale           
    166194            }
    167195        }
    168196        })
    169    
    170         .draggable({
    171         inertia: true,
    172         modifiers: [
    173             interact.modifiers.restrictRect({
    174             restriction: 'parent',
    175             endOnly: true
    176             })
    177         ],
    178         listeners: { move: dragMoveListener }
    179         })
    180 
    181 /*
    182 
     197        .draggable(draggable_options)
     198       
     199    */
     200
     201    });
     202});
     203
     204
     205$(document).ready(function() {
     206   
     207    const win1 = new WinBox({
     208    id:    "my-winbox1",
     209    title: 'Winbox + Interact Example 1',
     210    x: 200,
     211    y: 200,
     212    width: '400px',
     213    height: '400px',
     214    border: "0.3em",
     215    background: "#29e",
     216    html: "<p style=\"padding: 8px; color: #000;\">This window can be dragged around and resized</p>"
     217    });
     218   
     219    let draggable_options = getCoreDraggableOptions();
     220    let resizable_options = getCoreResizableOptions();
     221   
     222    draggable_options.autoScroll = true;
     223   
     224    interact('#my-winbox1')
     225    .draggable(draggable_options)
     226    .resizable(resizable_options);
     227
     228
     229
     230    const win2 = new WinBox({
     231    id:    "my-winbox2",
     232    title: 'Winbox + Interact Example 2',
     233    x: 800,
     234    y: 200,
     235    width: '500px',
     236    height: '300px',
     237    border: "0.3em",
     238    background: "#29e",
     239    html: "<p class=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
     240    });
     241   
     242    /*
     243    interact('#my-winbox2')
     244    .draggable(draggable_options)
     245    .resizable(resizable_options);
     246    */
     247
     248    let this_elem = document.getElementById('my-winbox2');
     249   
     250    let this_angle_scale = {
     251    angle: 0,
     252    scale: 1
     253    }
     254   
     255   
     256    let gdraggable_options = getCoreDraggableOptions();
     257    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
     258   
     259    interact('#my-winbox2')
     260    .gesturable(gesturable_options)
     261    .draggable(gdraggable_options);
     262   
     263   
     264    /*
     265    interact('#my-winbox')
    183266        .draggable({
    184267        // enable inertial throwing
    … …  
    209292            }
    210293        }
    211         })
    212    
    213         .resizable({
    214         // resize from all edges and corners
    215         edges: { left: true, right: true, bottom: true, top: true },
    216        
    217         listeners: {
    218             move (event) {
    219             var target = event.target;
    220             var x = (parseFloat(target.getAttribute('data-x')) || 0)
    221             var y = (parseFloat(target.getAttribute('data-y')) || 0)
    222            
    223             // update the element's style
    224             target.style.width = event.rect.width + 'px'
    225             target.style.height = event.rect.height + 'px'
    226            
    227             // translate when resizing from top or left edges
    228             x += event.deltaRect.left
    229             y += event.deltaRect.top
    230            
    231             target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
    232            
    233             target.setAttribute('data-x', x)
    234             target.setAttribute('data-y', y)
    235             target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
    236             }
    237         },
    238         modifiers: [
    239             // keep the edges inside the parent
    240             interact.modifiers.restrictEdges({
    241             outer: 'parent'
    242             }),
    243            
    244             // minimum size
    245             interact.modifiers.restrictSize({
    246             min: { width: 100, height: 50 }
    247             })
    248         ],
    249        
    250         inertia: true
    251294        });
    252 
    253         */
    254     });
    255    
    256 
    257 /*
    258 function reset () {
    259   scaleElement.style.transform = 'scale(1)'
    260 
    261   angleScale.angle = 0
    262   angleScale.scale = 1
    263 }
    264 */
    265 
    266 
    267 
     295    */
     296   
    268297});

  • gs3-extensions/tabletop-dl/trunk/tabletop.html

    r37533 r37538  
    1818    <script src="winbox-dist/js/winbox.min.js"></script>
    1919    -->
    20     <link rel="stylesheet" href="src/winbox-with-interactjs/dist/css/winbox.min.css">
    21     <script src="src/winbox-with-interactjs/dist/js/winbox.min.js"></script>
     20    <link rel="stylesheet" href="winbox-with-interactjs-dist/css/winbox.min.css">
     21    <script src="winbox-with-interactjs-dist/js/winbox.min.js"></script>
    2222   
    2323    <script src="interactjs-dist/interact.min.js"></script>
    … …  
    100100  </body>
    101101  <script>
    102     /*
    103     function gsToggleHeader()
    104     {
    105     $('#gs-header').slideToggle();
    106     }
    107     */
     102
    108103    $(document).ready(function() {
    109104    $("#gs-control-bar").width("100%").hide();
    … …  
    115110    });
    116111
    117 
    118     const win = new WinBox({
    119         id:    "my-winbox",
    120         title: 'My Window2',
    121         width: '400px',
    122         height: '400px',
    123     });
    124 
    125     interact('#my-winbox')
    126         .draggable({
    127         // enable inertial throwing
    128         inertia: true,
    129         // keep the element within the area of it's parent
    130         modifiers: [
    131             interact.modifiers.restrictRect({
    132             restriction: 'parent',
    133             endOnly: true
    134             })
    135         ],
    136         // enable autoScroll
    137         autoScroll: true,
    138        
    139         listeners: {
    140             // call this function on every dragmove event
    141             move: dragMoveListener,
    142            
    143             // call this function on every dragend event
    144             end (event) {
    145             var textEl = event.target.querySelector('p')
    146            
    147             textEl && (textEl.textContent =
    148                    'moved a distance of ' +
    149                    (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    150                           Math.pow(event.pageY - event.y0, 2) | 0))
    151                    .toFixed(2) + 'px')
    152             }
    153         }
    154         });
    155 
    156112    });
    157113   
    158114  </script>
     115
    159116</html>
Note: See TracChangeset for help on using the changeset viewer.