Index: /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js	(revision 37537)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop-interact.js	(revision 37538)
@@ -1,4 +1,5 @@
 
-function dragMoveListener (event) {
+function dragMoveListener(event)
+{
   var target = event.target
   // keep the dragged position in the data-x/data-y attributes
@@ -14,97 +15,130 @@
 }
 
-
+function getCoreDraggableOptions()
+{
+    let core_draggable_options = {
+
+	listeners: { move: dragMoveListener },
+
+	modifiers: [
+	    interact.modifiers.restrictRect({
+		restriction: 'parent',
+		endOnly: true
+	    })
+	],	
+
+	inertia: {
+            resistance: 6,
+            //minSpeed: 20,
+            //endSpeed: 10,
+            smoothEndDuration: 500,
+            allowResume: true
+	}		
+    };
+
+    return core_draggable_options;
+}
+
+function getCoreResizableOptions()
+{
+    let core_resizable_options = {
+	
+	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: {
+            resistance: 6,
+            //minSpeed: 20,
+            //endSpeed: 10,
+            smoothEndDuration: 500,
+            allowResume: true
+	}		
+    };
+
+    return core_resizable_options;
+    
+}
+
+
+function getCoreGesturableOptions(elem,angleScale)
+{
+    let core_gesturable_options = {
+	
+	listeners: {
+	    start (event) {
+		angleScale.angle -= event.angle;
+	    },
+	    move (event) {
+		let currentAngle = event.angle + angleScale.angle;
+		let currentScale = event.scale * angleScale.scale;
+		
+		let scale_elem = $(elem).find('.scale-element')[0];
+		
+		scale_elem.style.transform =			
+		    'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';
+		
+		dragMoveListener(event);
+	    },
+	    end (event) {
+		angleScale.angle = angleScale.angle + event.angle;
+		angleScale.scale = angleScale.scale * event.scale;			
+	    }
+	}
+    };
+
+    return core_gesturable_options;
+}
+    
+    
+    
 $(document).ready(function() {
 
+    let draggable_options = getCoreDraggableOptions();
+    let resizable_options = getCoreResizableOptions();
+    
+    draggable_options.autoScroll =true;    
     
     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
+	.draggable(draggable_options)
+	.resizable(resizable_options)
+
+    // still needed??
+    //window.dragMoveListener = dragMoveListener
 
 
@@ -114,40 +148,38 @@
 
 	let this_elem = this;
-	let $this_elem = $(this_elem);
-	
+
+	/*
+	let draggable_options = getCoreDraggableOptions();
 	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
+
+	*/
+	
+	let this_angle_scale = {
+	    angle: 0,
+	    scale: 1
+	}
+
+	
+	let gdraggable_options = getCoreDraggableOptions();
+	let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
+
+	interact(this_elem)
+	    .gesturable(gesturable_options)
+	    .draggable(gdraggable_options);
+		
+	/*
 	interact(this_elem)
 	    .gesturable({
 		listeners: {
 		    start (event) {
-			angleScale.angle -= event.angle
-			
-			//clearTimeout(resetTimeout)
-			//scaleElement.classList.remove('reset')
+			angleScale.angle -= event.angle		
 		    },
 		    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];
 			
@@ -155,30 +187,81 @@
 			    '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')
+			angleScale.scale = angleScale.scale * event.scale			
 		    }
 		}
 	    })
-	
-	    .draggable({
-		inertia: true,
-		modifiers: [
-		    interact.modifiers.restrictRect({
-			restriction: 'parent',
-			endOnly: true
-		    })
-		],
-		listeners: { move: dragMoveListener }
-	    })
-
-/*
-
+	    .draggable(draggable_options)
+	    
+	*/
+
+    });
+});
+
+
+$(document).ready(function() {
+    
+    const win1 = new WinBox({
+	id:    "my-winbox1",
+	title: 'Winbox + Interact Example 1',
+	x: 200,
+	y: 200,
+	width: '400px',
+	height: '400px',
+	border: "0.3em",
+	background: "#29e",
+	html: "<p style=\"padding: 8px; color: #000;\">This window can be dragged around and resized</p>"
+    });
+    
+    let draggable_options = getCoreDraggableOptions();
+    let resizable_options = getCoreResizableOptions();
+    
+    draggable_options.autoScroll = true;
+	
+    interact('#my-winbox1')
+	.draggable(draggable_options)
+	.resizable(resizable_options);
+
+
+
+    const win2 = new WinBox({
+	id:    "my-winbox2",
+	title: 'Winbox + Interact Example 2',
+	x: 800,
+	y: 200,
+	width: '500px',
+	height: '300px',
+	border: "0.3em",
+	background: "#29e",
+	html: "<p class=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
+    });
+    
+    /*
+    interact('#my-winbox2')
+	.draggable(draggable_options)
+	.resizable(resizable_options);
+    */
+
+    let this_elem = document.getElementById('my-winbox2');
+    
+    let this_angle_scale = {
+	angle: 0,
+	scale: 1
+    }
+    
+    
+    let gdraggable_options = getCoreDraggableOptions();
+    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
+    
+    interact('#my-winbox2')
+	.gesturable(gesturable_options)
+	.draggable(gdraggable_options);
+    
+    
+	/*
+	interact('#my-winbox')
 	    .draggable({
 		// enable inertial throwing
@@ -209,60 +292,6 @@
 		    }
 		}
-	    })
-	
-	    .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
-}
-*/
-
-
-
+	*/
+	
 });
Index: /gs3-extensions/tabletop-dl/trunk/tabletop.html
===================================================================
--- /gs3-extensions/tabletop-dl/trunk/tabletop.html	(revision 37537)
+++ /gs3-extensions/tabletop-dl/trunk/tabletop.html	(revision 37538)
@@ -18,6 +18,6 @@
     <script src="winbox-dist/js/winbox.min.js"></script>
     -->
-    <link rel="stylesheet" href="src/winbox-with-interactjs/dist/css/winbox.min.css">
-    <script src="src/winbox-with-interactjs/dist/js/winbox.min.js"></script>
+    <link rel="stylesheet" href="winbox-with-interactjs-dist/css/winbox.min.css">
+    <script src="winbox-with-interactjs-dist/js/winbox.min.js"></script>
     
     <script src="interactjs-dist/interact.min.js"></script>
@@ -100,10 +100,5 @@
   </body>
   <script>
-    /*
-    function gsToggleHeader()
-    {
-	$('#gs-header').slideToggle();
-    }
-    */
+
     $(document).ready(function() {
 	$("#gs-control-bar").width("100%").hide();
@@ -115,45 +110,7 @@
 	});
 
-
-	const win = new WinBox({
-	    id:    "my-winbox",
-	    title: 'My Window2',
-	    width: '400px',
-	    height: '400px',
-	});
-
-	interact('#my-winbox')
-	    .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')
-		    }
-		}
-	    });
-
     });
     
   </script>
+
 </html>
