diff --git a/README.md b/README.md index 94f2072..41ee1df 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,20 @@ Work in progress. * [http://mrdoob.github.io/frame.js/editor/](http://mrdoob.github.io/frame.js/editor/) + _Keyboard Commands:_ + * Export project: **Command+E** / **Control+E** + * Toggle play/pause: **Space** + * Timeline backwards: **Left Arrow** + * Timeline forwards: **Right Arrow** + * Increase playback speed: **Up Arrow** + * Decrease playback speed: **Down Arrow** + * Add new Effect: **Double-click** + * Duplicate (with Effect selected): **Shift+D** / **D x2** + * Remove (with Effect selected): **X** / **Delete** + * Faster modifier (while traversing timeline or dragging Effect): **Hold Command** / **Hold Control** + * Slower modifier (while traversing timeline or dragging Effect): **Hold Shift** + * Snap-to-unit modifier (while traversing timeline or dragging Effect): **Hold Options** / **Hold Alt** + ### Examples * [http://mrdoob.github.io/frame.js/player/?file=../examples/html_colors.json](http://mrdoob.github.io/frame.js/player/?file=../examples/html_colors.json) diff --git a/editor/index.html b/editor/index.html index 8591a80..073e4f5 100755 --- a/editor/index.html +++ b/editor/index.html @@ -25,10 +25,12 @@ + + @@ -71,6 +73,8 @@ var menubar = new Menubar( editor ); document.body.appendChild( menubar.dom ); + var keyboard = new Keyboard( editor ); + // LocalStorage editor.signals.animationAdded.add( saveState ); @@ -108,55 +112,7 @@ } // Short-cuts - - document.addEventListener( 'keydown', function ( event ) { - - if ( event.metaKey || event.ctrlKey ) { - - switch ( event.keyCode ) { - case 83: // prevent CMD + S - event.preventDefault(); - break; - case 69: // CMD + E to export - event.preventDefault(); - editor.signals.exportState.dispatch(); - break; - } - - return; - - } - - switch ( event.keyCode ) { - - case 8: // prevent browser back - event.preventDefault(); - break; - case 32: - editor.player.isPlaying ? editor.stop() : editor.play(); - break; - case 37: - event.preventDefault(); - editor.setTime( editor.player.currentTime - editor.player.playbackRate ); - break; - case 39: - event.preventDefault(); - editor.setTime( editor.player.currentTime + editor.player.playbackRate ); - break; - case 38: - event.preventDefault(); - editor.speedUp(); - break; - case 40: - event.preventDefault(); - editor.speedDown(); - break; - case 83: - break; - - } - - } ); + // -- Moved to Keyboard.js // Drop diff --git a/editor/js/Keyboard.js b/editor/js/Keyboard.js new file mode 100644 index 0000000..4acd678 --- /dev/null +++ b/editor/js/Keyboard.js @@ -0,0 +1,243 @@ +/** + * @author therealtakeshi / https://therealtakeshi.com/ + */ + +var Keyboard = function ( editor ) { + + editor.keyboard = { + modIsDown: false, + shiftIsDown: false, + optionIsDown: false, + }; + + var useBasicKeyboard = false; + + if ( useBasicKeyboard || typeof Mousetrap !== 'function' ) { + document.addEventListener( 'keydown', function ( event ) { + + if ( event.metaKey || event.ctrlKey ) { + + switch ( event.keyCode ) { + case 83: // prevent CMD + S + event.preventDefault(); + break; + case 69: // CMD + E to export + event.preventDefault(); + editor.signals.exportState.dispatch(); + break; + } + + return; + + } + + switch ( event.keyCode ) { + + case 8: // prevent browser back + event.preventDefault(); + break; + case 32: + editor.player.isPlaying ? editor.stop() : editor.play(); + break; + case 37: + event.preventDefault(); + editor.setTime( editor.player.currentTime - editor.player.playbackRate ); + break; + case 39: + event.preventDefault(); + editor.setTime( editor.player.currentTime + editor.player.playbackRate ); + break; + case 38: + event.preventDefault(); + editor.speedUp(); + break; + case 40: + event.preventDefault(); + editor.speedDown(); + break; + case 83: + break; + + } + + } ); + } else { + /** + * Set up basic commands for export, play/pause, etc. + */ + + // Prevent save and browser back + Mousetrap.bind(['mod+s', 'backspace'], function() { + event.preventDefault(); + return false; + }); + + // CMD+/CTRL+E to Export + Mousetrap.bind('mod+e', function() { + event.preventDefault(); + editor.signals.exportState.dispatch(); + return false; + }); + + // Play/Pause + Mousetrap.bind('space', function() { + editor.player.isPlaying ? editor.stop() : editor.play(); + }); + + // Timeline back + Mousetrap.bind('left', function() { + event.preventDefault(); + editor.setTime( editor.player.currentTime - editor.player.playbackRate ); + }); + // Timeline forward + Mousetrap.bind('right', function() { + event.preventDefault(); + editor.setTime( editor.player.currentTime + editor.player.playbackRate ); + }); + + // Playback speed up + Mousetrap.bind('up', function() { + event.preventDefault(); + editor.speedUp(); + }); + // Playback speed down + Mousetrap.bind('down', function() { + event.preventDefault(); + editor.speedDown(); + }); + + /** + * Set up enhanced commands for finer control + */ + // Timeline fast-back + Mousetrap.bind('mod+left', function() { + event.preventDefault(); + editor.setTime( editor.player.currentTime - ( editor.player.playbackRate * 5 ) ); + }); + // Timeline fast-forward + Mousetrap.bind('mod+right', function() { + event.preventDefault(); + editor.setTime( editor.player.currentTime + ( editor.player.playbackRate * 5 ) ); + }); + // Timeline fine-back + Mousetrap.bind('shift+left', function() { + event.preventDefault(); + editor.setTime( editor.player.currentTime - ( editor.player.playbackRate / 100 ) ); + }); + // Timeline fine-forward + Mousetrap.bind('shift+right', function() { + event.preventDefault(); + editor.setTime( editor.player.currentTime + ( editor.player.playbackRate / 100 ) ); + }); + // Timeline unit-snap-back + Mousetrap.bind('option+left', function() { + event.preventDefault(); + + var newTime = Math.floor( editor.player.currentTime ); + if( newTime === editor.player.currentTime) { + newTime = editor.player.currentTime - 1; // editor.setTime handles cases where newTime < 0 + } + + editor.setTime( newTime ); + }); + // Timeline unit-snap-forward + Mousetrap.bind('option+right', function() { + event.preventDefault(); + + var newTime = Math.ceil( editor.player.currentTime ); + if( newTime === editor.player.currentTime) { + newTime = editor.player.currentTime + 1; + } + + editor.setTime( newTime ); + }); + + // Block fast modifier - single + Mousetrap.bind('mod', function() { + event.preventDefault(); + editor.keyboard.modIsDown = true; + }, 'keydown'); + Mousetrap.bind('mod', function() { + event.preventDefault(); + editor.keyboard.modIsDown = false; + }, 'keyup'); + + // Block fine modifier - single + Mousetrap.bind('shift', function() { + event.preventDefault(); + editor.keyboard.shiftIsDown = true; + }, 'keydown'); + Mousetrap.bind('shift', function() { + event.preventDefault(); + editor.keyboard.shiftIsDown = false; + }, 'keyup'); + + // Block snap modifier - single + Mousetrap.bind('option', function() { + event.preventDefault(); + editor.keyboard.optionIsDown = true; + }, 'keydown'); + Mousetrap.bind('option', function() { + event.preventDefault(); + editor.keyboard.optionIsDown = false; + }, 'keyup'); + + // Block fast+snap modifier - double + Mousetrap.bind(['mod+option', 'option+mod'], function() { + event.preventDefault(); + editor.keyboard.modIsDown = true; + editor.keyboard.optionIsDown = true; + }, 'keydown'); + Mousetrap.bind(['mod+option', 'option+mod'], function() { + event.preventDefault(); + editor.keyboard.modIsDown = false; + editor.keyboard.optionIsDown = false; + }, 'keyup'); + + // Block fine+snap modifier - double + Mousetrap.bind(['shift+option', 'option+shift'], function() { + event.preventDefault(); + editor.keyboard.shiftIsDown = true; + editor.keyboard.optionIsDown = true; + }, 'keydown'); + Mousetrap.bind(['shift+option', 'option+shift'], function() { + event.preventDefault(); + editor.keyboard.shiftIsDown = false; + editor.keyboard.optionIsDown = false; + }, 'keyup'); + + // Block duplicate + Mousetrap.bind(['shift+d', 'd d'], function() { + event.preventDefault(); + if ( editor.selected === null ) return; + + var selected = editor.selected; + + var offset = selected.end - selected.start; + + var animation = new FRAME.Animation( + selected.name, + selected.start + offset, + selected.end + offset, + selected.layer, + selected.effect + ); + + editor.addAnimation( animation ); + editor.selectAnimation( animation ); + }); + + // Block remove + Mousetrap.bind(['x', 'del'], function() { + event.preventDefault(); + if ( editor.selected === null ) return; + + editor.removeAnimation( editor.selected ); + editor.selectAnimation( null ); + }); + + } + + return this; + +}; diff --git a/editor/js/Timeline.Animations.js b/editor/js/Timeline.Animations.js index f3a3677..9ef247c 100755 --- a/editor/js/Timeline.Animations.js +++ b/editor/js/Timeline.Animations.js @@ -33,9 +33,25 @@ Timeline.Animations = function ( editor ) { function onMouseMove( event ) { movementX = event.movementX | event.webkitMovementX | event.mozMovementX | 0; + + // Keyboard modifiers for finer control + var modifiedScale = scale; + if ( editor.keyboard.shiftIsDown ) { + modifiedScale = 64; + } else if ( editor.keyboard.modIsDown ) { + modifiedScale = 8; + } + + animation.start += movementX / modifiedScale; + animation.end += movementX / modifiedScale; + + // Keyboard modifier for snapping to units - 10th/s + if ( editor.keyboard.optionIsDown ) { + var length = animation.end - animation.start; - animation.start += movementX / scale; - animation.end += movementX / scale; + animation.start = Math.round( animation.start * 10 ) / 10; + animation.end = Math.round( ( animation.start + length ) * 10 ) / 10; + } if ( animation.start < 0 ) { @@ -93,7 +109,20 @@ Timeline.Animations = function ( editor ) { movementX = event.movementX | event.webkitMovementX | event.mozMovementX | 0; - animation.start += movementX / scale; + // Keyboard modifiers for finer control + var modifiedScale = scale; + if ( editor.keyboard.shiftIsDown ) { + modifiedScale = 64; + } else if ( editor.keyboard.modIsDown ) { + modifiedScale = 8; + } + + animation.start += movementX / modifiedScale; + + // Keyboard modifier for snapping to units - 10th/s + if ( editor.keyboard.optionIsDown ) { + animation.start = Math.round( animation.start * 10 ) / 10; + } signals.animationModified.dispatch( animation ); @@ -139,7 +168,20 @@ Timeline.Animations = function ( editor ) { movementX = event.movementX | event.webkitMovementX | event.mozMovementX | 0; - animation.end += movementX / scale; + // Keyboard modifiers for finer control + var modifiedScale = scale; + if ( editor.keyboard.shiftIsDown ) { + modifiedScale = 64; + } else if ( editor.keyboard.modIsDown ) { + modifiedScale = 8; + } + + animation.end += movementX / modifiedScale; + + // Keyboard modifier for snapping to units - 10th/s + if ( editor.keyboard.optionIsDown ) { + animation.end = Math.round( animation.end * 10 ) / 10; + } signals.animationModified.dispatch( animation ); diff --git a/editor/js/libs/mousetrap/LICENSE b/editor/js/libs/mousetrap/LICENSE new file mode 100644 index 0000000..33bb7d2 --- /dev/null +++ b/editor/js/libs/mousetrap/LICENSE @@ -0,0 +1,193 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +--- Exceptions to the Apache 2.0 License ---- + +As an exception, if, as a result of your compiling your source code, portions +of this Software are embedded into an Object form of such source code, you +may redistribute such embedded portions in such Object form without complying +with the conditions of Sections 4(a), 4(b) and 4(d) of the License. + +In addition, if you combine or link compiled forms of this Software with +software that is licensed under the GPLv2 ("Combined Software") and if a +court of competent jurisdiction determines that the patent provision (Section +3), the indemnity provision (Section 9) or other Section of the License +conflicts with the conditions of the GPLv2, you may retroactively and +prospectively choose to deem waived or otherwise exclude such Section(s) of +the License, but only in their entirety and only with respect to the Combined +Software. diff --git a/editor/js/libs/mousetrap/mousetrap.min.js b/editor/js/libs/mousetrap/mousetrap.min.js new file mode 100644 index 0000000..105ae55 --- /dev/null +++ b/editor/js/libs/mousetrap/mousetrap.min.js @@ -0,0 +1,11 @@ +/* mousetrap v1.6.2 craig.is/killing/mice */ +(function(p,t,h){function u(a,b,d){a.addEventListener?a.addEventListener(b,d,!1):a.attachEvent("on"+b,d)}function y(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return m[a.which]?m[a.which]:q[a.which]?q[a.which]:String.fromCharCode(a.which).toLowerCase()}function E(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function v(a){return"shift"==a||"ctrl"==a||"alt"==a|| +"meta"==a}function z(a,b){var d,e=[];var c=a;"+"===c?c=["+"]:(c=c.replace(/\+{2}/g,"+plus"),c=c.split("+"));for(d=0;dh||m.hasOwnProperty(h)&&(n[m[h]]=h)}d=n[c]?"keydown":"keypress"}"keypress"==d&&e.length&&(d="keydown");return{key:k,modifiers:e,action:d}}function C(a,b){return null===a||a===t?!1:a===b?!0:C(a.parentNode,b)}function e(a){function b(a){a= +a||{};var b=!1,l;for(l in n)a[l]?b=!0:n[l]=0;b||(w=!1)}function d(a,b,r,g,F,e){var l,D=[],h=r.type;if(!f._callbacks[a])return[];"keyup"==h&&v(a)&&(b=[a]);for(l=0;l":".","?":"/","|":"\\"},A={option:"alt",command:"meta","return":"enter", +escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},n;for(h=1;20>h;++h)m[111+h]="f"+h;for(h=0;9>=h;++h)m[h+96]=h.toString();e.prototype.bind=function(a,b,d){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,d);return this};e.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};e.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};e.prototype.reset=function(){this._callbacks={}; +this._directMap={};return this};e.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||C(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};e.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};e.addKeycodes=function(a){for(var b in a)a.hasOwnProperty(b)&&(m[b]=a[b]);n=null};e.init=function(){var a=e(t),b;for(b in a)"_"!==b.charAt(0)&&(e[b]=function(b){return function(){return a[b].apply(a, +arguments)}}(b))};e.init();p.Mousetrap=e;"undefined"!==typeof module&&module.exports&&(module.exports=e);"function"===typeof define&&define.amd&&define(function(){return e})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);