From a4851d4169a9e33a202ce4fff431e59129276b45 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Sat, 19 Jan 2013 20:06:47 -0800 Subject: [PATCH] Tweaks for touch. --- css/main.css | 16 ++++++++-------- index.html | 23 +++++++++++------------ js/dragging.js | 33 +++++++++++++++++++++++++-------- js/main.js | 37 +++++++++++++++++++++++++++++++------ js/pointerevents.js | 6 ++++++ 5 files changed, 81 insertions(+), 34 deletions(-) create mode 100644 js/pointerevents.js diff --git a/css/main.css b/css/main.css index 6258494..b37c105 100644 --- a/css/main.css +++ b/css/main.css @@ -205,7 +205,7 @@ body { z-index: 100; } #output .node { - left: -11px; + left: -18px; margin-top: -11px; position: absolute; top: 50%; @@ -236,18 +236,18 @@ body { border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0, .5); cursor: pointer; - height: 22px; + height: 34px; position: relative; - width: 22px; + width: 34px; } .node span { border-radius: 50%; display: block; - height: 12px; + height: 24px; left: 5px; position: absolute; top: 5px; - width: 12px; + width: 24px; } .node-input span { background: #67a90d; @@ -292,14 +292,14 @@ body { /* Module nodes */ .module .node { position: absolute; - margin-top: -11px; + margin-top: -16px; top: 50%; } .module .node-input { - left: -11px; + left: -18px; } .module .node-output { - right: -11px; + right: -18px; } /* Module close */ diff --git a/index.html b/index.html index a7b8d9d..418b97e 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + Web Audio Playground @@ -11,6 +12,7 @@ + @@ -31,11 +33,11 @@ Add Audio Source
@@ -43,15 +45,12 @@ Add Module
diff --git a/js/dragging.js b/js/dragging.js index 0df0a53..9ee129f 100644 --- a/js/dragging.js +++ b/js/dragging.js @@ -5,6 +5,11 @@ dragObj.lastLit = null; // Node Dragging functions - these are used for dragging the audio modules, // like Destination or AudioSourceBuffer. +function skipDefault(event) { + if (event.target.tagName != "SELECT") + event.preventDefault(); +} + function startDraggingNode(event) { var el; var x, y; @@ -46,8 +51,11 @@ function startDraggingNode(event) { dragObj.elNode.style.zIndex = ++dragObj.zIndex; // Capture mousemove and mouseup events on the page. - document.addEventListener("mousemove", whileDraggingNode, true); - document.addEventListener("mouseup", stopDraggingNode, true); +// document.addEventListener("mousemove", skipDefault, true); +// document.addEventListener("mouseup", stopDraggingNode, true); + document.addEventListener( 'pointermove', whileDraggingNode, true ); + document.addEventListener( 'pointerup', stopDraggingNode, true ); + document.addEventListener( 'pointerleave', stopDraggingNode, true ); event.preventDefault(); } @@ -107,8 +115,11 @@ function whileDraggingNode(event) { function stopDraggingNode(event) { // Stop capturing mousemove and mouseup events. - document.removeEventListener("mousemove", whileDraggingNode, true); - document.removeEventListener("mouseup", stopDraggingNode, true); +// document.removeEventListener("mousemove", whileDraggingNode, true); +// document.removeEventListener("mouseup", stopDraggingNode, true); + document.removeEventListener( 'pointermove', whileDraggingNode, true ); + document.removeEventListener( 'pointerup', stopDraggingNode, true ); + document.removeEventListener( 'pointerleave', stopDraggingNode, true ); } // Connector Dragging functions - these are used for dragging the connectors @@ -164,8 +175,11 @@ function startDraggingConnector(event) { document.getElementById("svgCanvas").appendChild(shape); // Capture mousemove and mouseup events on the page. - document.addEventListener("mousemove", whileDraggingConnector, true); - document.addEventListener("mouseup", stopDraggingConnector, true); +// document.addEventListener("mousemove", whileDraggingConnector, true); +// document.addEventListener("mouseup", stopDraggingConnector, true); + document.addEventListener( 'pointermove', whileDraggingConnector, true ); + document.addEventListener( 'pointerup', stopDraggingConnector, true ); + document.addEventListener( 'pointerleave', stopDraggingConnector, true ); event.preventDefault(); event.stopPropagation(); } @@ -357,8 +371,11 @@ function disconnectNode( nodeElement ) { function stopDraggingConnector(event) { // Stop capturing mousemove and mouseup events. - document.removeEventListener("mousemove", whileDraggingConnector, true); - document.removeEventListener("mouseup", stopDraggingConnector, true); +// document.removeEventListener("mousemove", whileDraggingConnector, true); +// document.removeEventListener("mouseup", stopDraggingConnector, true); + document.removeEventListener( 'pointermove', whileDraggingConnector, true ); + document.removeEventListener( 'pointerup', stopDraggingConnector, true ); + document.removeEventListener( 'pointerleave', stopDraggingConnector, true ); if (dragObj.lastLit) { dragObj.lastLit.className = dragObj.lastLit.unlitClassname; diff --git a/js/main.js b/js/main.js index fa9e674..eeb2779 100644 --- a/js/main.js +++ b/js/main.js @@ -33,7 +33,8 @@ function createNewModule( nodeType, input, output ) { tempy = 100; e.setAttribute("audioNodeType", nodeType ); - e.onmousedown=startDraggingNode; + e.addEventListener("mousedown", skipDefault, false); + e.addEventListener( 'pointerdown', startDraggingNode, false ); var content = document.createElement("div"); content.className="content"; e.appendChild(content); @@ -45,7 +46,8 @@ function createNewModule( nodeType, input, output ) { if (input) { var i=document.createElement("div"); i.className="node node-input "; - i.onmousedown=startDraggingConnector; + i.addEventListener( "mousedown", skipDefault, true ); + i.addEventListener( 'pointerdown', startDraggingConnector, false ); i.innerHTML = " "; e.appendChild(i); e.inputs = i; @@ -54,7 +56,8 @@ function createNewModule( nodeType, input, output ) { if (output) { var i=document.createElement("div"); i.className="node node-output"; - i.onmousedown=startDraggingConnector; + i.addEventListener( "mousedown", skipDefault, true ); + i.addEventListener( 'pointerdown', startDraggingConnector, false ); i.innerHTML = " "; e.appendChild(i); e.outputs = i; @@ -466,6 +469,10 @@ function createDelay() { this.event.preventDefault(); } +function createAudioBufferSourceFromMenu(event) { + createAudioBufferSource(null); +} + function createAudioBufferSource( buffer ) { var module = createNewModule( "audiobuffersource", false, true ); @@ -849,6 +856,14 @@ function startLoadingSounds() { irHallRequest.send(); } +function setClickHandler( id, handler ) { + var el = document.getElementById( id ); + if (el) { + el.addEventListener( "mousedown", skipDefault, true ); + el.addEventListener( "pointerdown", handler, false ); + } +} + // Initialization function for the page. function init() { try { @@ -858,9 +873,6 @@ function init() { alert('Web Audio API is not supported in this browser.'); } - if (!audioContext.createOscillator) - alert('Oscillators not supported - you may need to run Chrome Canary.'); - initDragDropOfAudioFiles(); // set up page as a drop site for audio files startLoadingSounds(); @@ -869,6 +881,19 @@ function init() { var dest = document.getElementById("output"); dest.audioNode = audioContext.destination; // stringifyAudio(); + + setClickHandler( "cabs", createAudioBufferSourceFromMenu ); + setClickHandler( "cosc", createOscillator ); + setClickHandler( "cliv", createLiveInput ); + setClickHandler( "cbqf", createBiquadFilter ); + setClickHandler( "cdel", createDelay ); + setClickHandler( "cdyc", createDynamicsCompressor ); + setClickHandler( "cgai", createGain ); + setClickHandler( "ccon", createConvolver ); + setClickHandler( "cana", createAnalyser ); + +// if (navigator.userAgent.indexOf("Android") != -1) +// document.body.style.zoom = "2"; } window.addEventListener('load', init, false); diff --git a/js/pointerevents.js b/js/pointerevents.js new file mode 100644 index 0000000..8c2c5ca --- /dev/null +++ b/js/pointerevents.js @@ -0,0 +1,6 @@ +/*! + * Copyright 2012 The Toolkitchen Authors. All rights reserved. + * Use of this source code is governed by a BSD-style + * license that can be found in the LICENSE file. + */ +function PointerEvent(e,t){var n=document.createEvent("MouseEvent");return n.__proto__=PointerEvent.prototype,n.initPointerEvent(e,t),n}PointerEvent.prototype.__proto__=MouseEvent.prototype,PointerEvent.prototype.initPointerEvent=function(e,t){var n={bubbles:!1,cancelable:!1,view:null,detail:null,screenX:0,screenY:0,clientX:0,clientY:0,ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1,button:-1,buttons:null,which:0,relatedTarget:null,pointerId:-1,width:0,height:0,pressure:0,tiltX:0,tiltY:0,pointerType:"unavailable",hwTimestamp:0,isPrimary:!1};for(var r in t)r in n&&(n[r]=t[r]);var i;n.buttons!==null?i=n.buttons?n.button:-1:i=n.which?n.button:-1,Object.defineProperties(this,{pointerId:{value:n.pointerId,enumerable:!0},width:{value:n.width,enumerable:!0},height:{value:n.height,enumerable:!0},pressure:{value:n.pressure,enumerable:!0},tiltX:{value:n.tiltX,enumerable:!0},tiltY:{value:n.tiltY,enumerable:!0},pointerType:{value:n.pointerType,enumerable:!0},hwTimestamp:{value:n.hwTimestamp,enumerable:!0},isPrimary:{value:n.isPrimary,enumerable:!0}}),this.initMouseEvent(e,n.bubbles,n.cancelable,n.view,n.detail,n.screenX,n.screenY,n.clientX,n.clientY,n.ctrlKey,n.altKey,n.shiftKey,n.metaKey,i,n.relatedTarget)};var SideTable;typeof WeakMap!="undefined"?SideTable=WeakMap:(SideTable=function(e){this.name="__$"+e+"$__"},SideTable.prototype={set:function(e,t){Object.defineProperty(e,this.name,{value:t,writable:!0})},get:function(e){return e[this.name]}}),function(e){e=e||{},Function.prototype.bind||(Function.prototype.bind=function(t){var n=e.toArray(arguments,1),r=this;return function(){var i=e.toArray(arguments,0);return r.apply(t,n.concat(i))}}),e.toArray=function(e,t){return Array.prototype.slice.call(e,t||0)},window.__PointerEventShim__=e}(window.__PointerEventShim__),function(e){var t={pointers:[],addPointer:function(e){var t={id:e};return this.pointers.push(t),t},removePointer:function(e){var t=this.getPointerIndex(e);if(t>-1)return this.pointers.splice(t,1)[0]},getPointerById:function(e){return this.pointers[this.getPointerIndex(e)]},getPointerIndex:function(e){for(var t=0,n=this.pointers.length,r;t