Merge pull request #1134 from waterbearlang/1133_scroll_while_dragging

fix scroll and move output

css/app.css

@@ -43,6 +43,12 @@ body > header > h1{
     line-height: 34px;
 }
 
+body > output{
+    flex: 0 0 24px;
+    background: #EFEDEA;
+    color: #111111;
+}
+
 .menu{
     flex: 0 0 34px;
     background-color: #666666;
@@ -182,6 +188,7 @@ sidebar.trashcan:after{
 wb-workspace > wb-contains{
     border: 2px inset #CCC;
     position: relative;
+    padding-bottom: 16px;
 }
 
 wb-contains:empty::before{

css/widget.css

@@ -73,7 +73,6 @@ wb-workspace{
     display: flex;
     flex-direction: column;
     flex: 2 1;
-    overflow-x: auto;
 }
 
 wb-workspace > header{
@@ -90,7 +89,7 @@ wb-workspace > wb-locals{
 
 wb-workspace > wb-contains{
     flex: 3 1;
-    overflow-y: auto;
+    overflow: auto;
 }
 
 @keyframes slidey-stripes {

js/block.js

@@ -15,6 +15,7 @@
 'use strict';
     var elem = dom.html;
     var workspace = dom.find(document.body, 'wb-workspace');
+    var scriptspace = dom.find(document.body, 'wb-workspace > wb-contains');
     var selectedType = 'null';
     var BLOCK_MENU = document.querySelector('sidebar');
 
@@ -825,13 +826,36 @@ function startDragBlock(evt){
     }
     if (dragStart === 'script'){
         origTarget.classList.add('hide');
-        dom.child(origTarget.parentElement, 'input, select').classList.remove('hide');
+        var siblingInput = dom.child(origTarget.parentElement, 'input, select');
+        if (siblingInput){
+            siblingInput.classList.remove('hide');
+        }
     }
     dragTarget.classList.add('dragging');
     dragTarget.style.left = (evt.pageX - 15) + 'px';
     dragTarget.style.top = (evt.pageY - 15) + 'px';
 }
 
+
+function checkForScroll(evt){
+    requestAnimationFrame(checkForScroll);
+    if (!dragTarget){ return; }
+    var x = Event.pointerX;
+    var y = Event.pointerY;
+    var rect = scriptspace.getBoundingClientRect();
+    if (x < rect.left){
+        scriptspace.scrollLeft -= 5;
+    }else if (x > rect.right){
+        scriptspace.scrollLeft += 5;
+    }
+    if (y < rect.top){
+        scriptspace.scrollTop -= 5;
+    }else if (y > rect.bottom){
+        scriptspace.scrollTop += 5;
+    }
+    console.log('bottom: %s, scrollTop: %s, y: %s', rect.bottom, scriptspace.scrollTop, y);
+}
+
 function dragBlock(evt){
     if (!dragTarget){ return; }
     evt.preventDefault();
@@ -1088,6 +1112,9 @@ Event.on(document.body, 'editor:dragging', null, dragBlock);
 Event.on(document.body, 'editor:drag-end', null, endDragBlock);
 Event.on(document.body, 'editor:drag-cancel', null, cancelDragBlock);
 
+requestAnimationFrame(checkForScroll);
+
+
 Event.on(workspace, 'editor:input', 'input', resizeInputOnChange);
 Event.on(workspace, 'editor:input', 'input, select', changeValueOnInputChange);
 

js/event.js

@@ -216,6 +216,7 @@
                 }else{
                     evt.invalid = true;
                     evt.invalidReason = 'Multiple touches present';
+                    console.log('multiple touches');
                     return evt;
                 }
                 evt.target = touch.target;

playground.html

@@ -1087,7 +1087,6 @@ <h1>Waterbear with Custom Elements</h1>
             <wb-splitter></wb-splitter>
             <wb-workspace>
                 <header>Workspace</header>
-                <output class="feedback"></output>
                 <wb-contains></wb-contains>
             </wb-workspace>
         </wb-workbox>
@@ -1128,6 +1127,7 @@ <h1>Waterbear Tutorials</h1>
         </wb-displaybox>
         </wb-vbox>
     </wb-hbox>
+    <output class="feedback"></output>
     <svg class="sekrit-svg"><text class="resize-tester"></text></svg>
     <!-- polyfill for custom elements -->
     <script src="lib/ajax.js"></script>