image_editor.js revision 5821806d5e7f356e8fa4b058a389a808ea183019
15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * ImageEditor is the top level object that holds together and connects 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * everything needed for image editing. 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Viewport} viewport The viewport. 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageView} imageView The ImageView containing the images to edit. 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageEditor.Prompt} prompt Prompt instance. 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Object} DOMContainers Various DOM containers required for the editor. 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Array.<ImageEditor.Mode>} modes Available editor modes. 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} displayStringFunction String formatting function. 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)function ImageEditor( 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) viewport, imageView, prompt, DOMContainers, modes, displayStringFunction) { 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.rootContainer_ = DOMContainers.root; 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.container_ = DOMContainers.image; 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.modes_ = modes; 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displayStringFunction_ = displayStringFunction; 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.removeChildren(this.container_); 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var document = this.container_.ownerDocument; 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.viewport_ = viewport; 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.viewport_.sizeByFrame(this.container_); 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.buffer_ = new ImageBuffer(); 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.viewport_.addRepaintCallback(this.buffer_.draw.bind(this.buffer_)); 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.imageView_ = imageView; 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.imageView_.addContentCallback(this.onContentUpdate_.bind(this)); 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.buffer_.addOverlay(this.imageView_); 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.panControl_ = new ImageEditor.MouseControl( 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.rootContainer_, this.container_, this.getBuffer()); 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.panControl_.setDoubleTapCallback(this.onDoubleTap_.bind(this)); 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.mainToolbar_ = new ImageEditor.Toolbar( 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) DOMContainers.toolbar, displayStringFunction); 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.modeToolbar_ = new ImageEditor.Toolbar( 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) DOMContainers.mode, displayStringFunction, 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.onOptionsChange.bind(this)); 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_ = prompt; 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.createToolButtons(); 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_ = null; 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {boolean} True if no user commands are to be accepted. 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.isLocked = function() { 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return !this.commandQueue_ || this.commandQueue_.isBusy(); 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {boolean} True if the command queue is busy. 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.isBusy = function() { 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.commandQueue_ && this.commandQueue_.isBusy(); 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Reflect the locked state of the editor in the UI. 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} on True if locked. 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.lockUI = function(on) { 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(this.rootContainer_, 'locked', on); 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Report the tool use to the metrics subsystem. 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name Action name. 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.recordToolUse = function(name) { 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.metrics.recordEnum( 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.getMetricName('Tool'), name, this.actionNames_); 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Content update handler. 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.onContentUpdate_ = function() { 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i != this.modes_.length; i++) { 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var mode = this.modes_[i]; 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(mode.button_, 'disabled', !mode.isApplicable()); 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Open the editing session for a new image. 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} url Image url. 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} metadata Metadata. 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} effect Transition effect object. 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function(function)} saveFunction Image save function. 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} displayCallback Display callback. 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} loadCallback Load callback. 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.openSession = function( 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) url, metadata, effect, saveFunction, displayCallback, loadCallback) { 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.commandQueue_) 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) throw new Error('Session not closed'); 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockUI(true); 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var self = this; 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.imageView_.load( 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) url, metadata, effect, displayCallback, function(loadType, delay, error) { 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.lockUI(false); 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.commandQueue_ = new CommandQueue( 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.container_.ownerDocument, 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.imageView_.getCanvas(), 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) saveFunction); 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.commandQueue_.attachUI( 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.getImageView(), self.getPrompt(), self.lockUI.bind(self)); 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.updateUndoRedo(); 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) loadCallback(loadType, delay, error); 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }); 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Close the current image editing session. 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} callback Callback. 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.closeSession = function(callback) { 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.getPrompt().hide(); 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.imageView_.isLoading()) { 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.commandQueue_) 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) console.warn('Inconsistent image editor state'); 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.imageView_.cancelLoad(); 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockUI(false); 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) callback(); 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.commandQueue_) 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; // Session is already closing, ignore the callback. 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.executeWhenReady(callback); 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_ = null; 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Commit the current operation and execute the action. 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} callback Callback. 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.executeWhenReady = function(callback) { 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.commandQueue_) { 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveModeGently(); 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_.executeWhenReady(callback); 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.imageView_.isLoading()) 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) console.warn('Inconsistent image editor state'); 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) callback(); 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Undo the recently executed command. 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.undo = function() { 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.isLocked()) return; 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.recordToolUse('undo'); 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // First undo click should dismiss the uncommitted modifications. 1755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.currentMode_ && this.currentMode_.isUpdated()) { 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.reset(); 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.getPrompt().hide(); 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(false); 1825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_.undo(); 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateUndoRedo(); 1845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 1875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Redo the recently un-done command. 1885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.redo = function() { 1905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.isLocked()) return; 1915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.recordToolUse('redo'); 1925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.getPrompt().hide(); 1935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(false); 1945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_.redo(); 1955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateUndoRedo(); 1965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 1995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Update Undo/Redo buttons state. 2005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.updateUndoRedo = function() { 2025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var canUndo = this.commandQueue_ && this.commandQueue_.canUndo(); 2035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var canRedo = this.commandQueue_ && this.commandQueue_.canRedo(); 2045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(this.undoButton_, 'disabled', !canUndo); 2055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.redoButton_.hidden = !canRedo; 2065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 2075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {HTMLCanvasElement} The current image canvas. 2105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.getCanvas = function() { 2125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.getImageView().getCanvas(); 2135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 2145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {ImageBuffer} ImageBuffer instance. 2175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.getBuffer = function() { return this.buffer_ }; 2195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {ImageView} ImageView instance. 2225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.getImageView = function() { return this.imageView_ }; 2245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {Viewport} Viewport instance. 2275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.getViewport = function() { return this.viewport_ }; 2295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {ImageEditor.Prompt} Prompt instance. 2325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.getPrompt = function() { return this.prompt_ }; 2345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Handle the toolbar controls update. 2375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} options A map of options. 2385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.onOptionsChange = function(options) { 2405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.trace.resetTimer('update'); 2415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.currentMode_) { 2425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.update(options); 2435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.trace.reportTimer('update'); 2455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 2465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * ImageEditor.Mode represents a modal state dedicated to a specific operation. 2495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Inherits from ImageBuffer.Overlay to simplify the drawing of 2505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * mode-specific tools. 2515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name The mode name. 2525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 2535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode = function(name) { 2565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.name = name; 2575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.message_ = 'enter_when_done'; 2585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 2595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype = {__proto__: ImageBuffer.Overlay.prototype }; 2615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {Viewport} Viewport instance. 2645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.getViewport = function() { return this.viewport_ }; 2665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {ImageView} ImageView instance. 2695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.getImageView = function() { return this.imageView_ }; 2715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {string} The mode-specific message to be displayed when entering. 2745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.getMessage = function() { return this.message_ }; 2765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {boolean} True if the mode is applicable in the current context. 2795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.isApplicable = function() { return true }; 2815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Called once after creating the mode button. 2845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 2855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageEditor} editor The editor instance. 2865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} button The mode button. 2875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.bind = function(editor, button) { 2905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.editor_ = editor; 2915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.editor_.registerAction_(this.name); 2925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.button_ = button; 2935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.viewport_ = editor.getViewport(); 2945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.imageView_ = editor.getImageView(); 2955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 2965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 2985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Called before entering the mode. 2995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.setUp = function() { 3015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.editor_.getBuffer().addOverlay(this); 3025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updated_ = false; 3035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Create mode-specific controls here. 3075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageEditor.Toolbar} toolbar The toolbar to populate. 3085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.createTools = function(toolbar) {}; 3105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Called before exiting the mode. 3135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.cleanUpUI = function() { 3155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.editor_.getBuffer().removeOverlay(this); 3165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Called after exiting the mode. 3205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.cleanUpCaches = function() {}; 3225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Called when any of the controls changed its value. 3255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} options A map of options. 3265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.update = function(options) { 3285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.markUpdated(); 3295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Mark the editor mode as updated. 3335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.markUpdated = function() { 3355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updated_ = true; 3365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {boolean} True if the mode controls changed. 3405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.isUpdated = function() { return this.updated_ }; 3425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Resets the mode to a clean state. 3455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.prototype.reset = function() { 3475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.editor_.modeToolbar_.reset(); 3485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updated_ = false; 3495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * One-click editor tool, requires no interaction, just executes the command. 3535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name The mode name. 3545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Command} command The command to execute on click. 3555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 3565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.OneClick = function(name, command) { 3585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageEditor.Mode.call(this, name); 3595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.instant = true; 3605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.command_ = command; 3615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.OneClick.prototype = {__proto__: ImageEditor.Mode.prototype}; 3645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {Command} command 3675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Mode.OneClick.prototype.getCommand = function() { 3695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.command_; 3705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Register the action name. Required for metrics reporting. 3745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name Button name. 3755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 3765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.registerAction_ = function(name) { 3785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.actionNames_.push(name); 3795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 3805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 3825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Populate the toolbar. 3835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.createToolButtons = function() { 3855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.mainToolbar_.clear(); 3865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.actionNames_ = []; 3875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var self = this; 3895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function createButton(name, handler) { 3905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return self.mainToolbar_.addButton(name, handler, name); 3915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 3925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i != this.modes_.length; i++) { 3945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var mode = this.modes_[i]; 3955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) mode.bind(this, createButton(mode.name, this.enterMode.bind(this, mode))); 3965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 3975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.undoButton_ = createButton('undo', this.undo.bind(this)); 3985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.registerAction_('undo'); 3995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.redoButton_ = createButton('redo', this.redo.bind(this)); 4015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.registerAction_('redo'); 4025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 4035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 4055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {ImageEditor.Mode} The current mode. 4065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 4075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.getMode = function() { return this.currentMode_ }; 4085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 4105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The user clicked on the mode button. 4115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 4125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageEditor.Mode} mode The new mode. 4135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 4145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.enterMode = function(mode) { 4155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.isLocked()) return; 4165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.currentMode_ == mode) { 4185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Currently active editor tool clicked, commit if modified. 4195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(this.currentMode_.updated_); 4205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 4215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.recordToolUse(mode.name); 4245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveModeGently(); 4265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // The above call could have caused a commit which might have initiated 4275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // an asynchronous command execution. Wait for it to complete, then proceed 4285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // with the mode set up. 4295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_.executeWhenReady(this.setUpMode_.bind(this, mode)); 4305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 4315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 4335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Set up the new editing mode. 4345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 4355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageEditor.Mode} mode The mode. 4365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 4375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 4385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.setUpMode_ = function(mode) { 4395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentTool_ = mode.button_; 4405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(this.currentTool_, 'pressed', true); 4425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_ = mode; 4445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.setUp(); 4455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.currentMode_.instant) { // Instant tool. 4475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(true); 4485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 4495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.getPrompt().show(this.currentMode_.getMessage()); 4525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.modeToolbar_.clear(); 4545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.createTools(this.modeToolbar_); 4555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.modeToolbar_.show(true); 4565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 4575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 4595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The user clicked on 'OK' or 'Cancel' or on a different mode button. 4605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} commit True if commit is required. 4615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 4625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.leaveMode = function(commit) { 4635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.currentMode_) return; 4645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.currentMode_.instant) { 4665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.getPrompt().hide(); 4675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.modeToolbar_.show(false); 4705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.cleanUpUI(); 4725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (commit) { 4735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var self = this; 4745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var command = this.currentMode_.getCommand(); 4755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (command) { // Could be null if the user did not do anything. 4765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.commandQueue_.execute(command); 4775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateUndoRedo(); 4785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.cleanUpCaches(); 4815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_ = null; 4825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(this.currentTool_, 'pressed', false); 4845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentTool_ = null; 4855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 4865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 4885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Leave the mode, commit only if required by the current mode. 4895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 4905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.leaveModeGently = function() { 4915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(this.currentMode_ && 4925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.updated_ && 4935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.currentMode_.implicitCommit); 4945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 4955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 4975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Enter the editor mode with the given name. 4985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 4995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name Mode name. 5005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 5015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 5025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.enterModeByName_ = function(name) { 5035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i != this.modes_.length; i++) { 5045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var mode = this.modes_[i]; 5055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (mode.name == name) { 5065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!mode.button_.hasAttribute('disabled')) 5075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.enterMode(mode); 5085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 5095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) console.error('Mode "' + name + '" not found.'); 5125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 5135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 5155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Key down handler. 5165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} event The keydown event. 5175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {boolean} True if handled. 5185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 5195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.onKeyDown = function(event) { 5205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) switch (util.getKeyModifiers(event) + event.keyIdentifier) { 5215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'U+001B': // Escape 5225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'Enter': 5235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.getMode()) { 5245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(event.keyIdentifier == 'Enter'); 5255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 5285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'Ctrl-U+005A': // Ctrl+Z 5305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.commandQueue_.canUndo()) { 5315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.undo(); 5325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 5355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'Ctrl-U+0059': // Ctrl+Y 5375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.commandQueue_.canRedo()) { 5385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.redo(); 5395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 5425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'U+0041': // 'a' 5445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.enterModeByName_('autofix'); 5455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'U+0042': // 'b' 5485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.enterModeByName_('exposure'); 5495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'U+0043': // 'c' 5525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.enterModeByName_('crop'); 5535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'U+004C': // 'l' 5565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.enterModeByName_('rotate_left'); 5575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) case 'U+0052': // 'r' 5605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.enterModeByName_('rotate_right'); 5615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 5625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return false; 5655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 5665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 5685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Double tap handler. 5695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} x X coordinate of the event. 5705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} y Y coordinate of the event. 5715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 5725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 5735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.onDoubleTap_ = function(x, y) { 5745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.getMode()) { 5755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var action = this.buffer_.getDoubleTapAction(x, y); 5765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (action == ImageBuffer.DoubleTapAction.COMMIT) 5775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(true); 5785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else if (action == ImageBuffer.DoubleTapAction.CANCEL) 5795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.leaveMode(false); 5805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 5825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 5845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Hide the tools that overlap the given rectangular frame. 5855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 5865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Rect} frame Hide the tool that overlaps this rect. 5875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Rect} transparent But do not hide the tool that is completely inside 5885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * this rect. 5895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 5905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.prototype.hideOverlappingTools = function(frame, transparent) { 5915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var tools = this.rootContainer_.ownerDocument.querySelectorAll('.dimmable'); 5925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i != tools.length; i++) { 5935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var tool = tools[i]; 5945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var toolRect = tool.getBoundingClientRect(); 5955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(tool, 'dimmed', 5965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) (frame && frame.intersects(toolRect)) && 5975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) !(transparent && transparent.contains(toolRect))); 5985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 6005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * A helper object for panning the ImageBuffer. 6035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 6045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} rootContainer The top-level container. 6055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} container The container for mouse events. 6065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {ImageBuffer} buffer Image buffer. 6075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 6085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl = function(rootContainer, container, buffer) { 6105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.rootContainer_ = rootContainer; 6115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.container_ = container; 6125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.buffer_ = buffer; 6135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var handlers = { 6155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'touchstart': this.onTouchStart, 6165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'touchend': this.onTouchEnd, 6175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'touchcancel': this.onTouchCancel, 6185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'touchmove': this.onTouchMove, 6195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'mousedown': this.onMouseDown, 6215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'mouseup': this.onMouseUp, 6225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'mousemove': this.onMouseMove 6235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 6245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var eventName in handlers) { 6265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) container.addEventListener( 6275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) eventName, handlers[eventName].bind(this), false); 6285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 6295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 6305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Maximum movement for touch to be detected as a tap (in pixels). 6335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 6345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.MAX_MOVEMENT_FOR_TAP_ = 8; 6365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Maximum time for touch to be detected as a tap (in milliseconds). 6395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 6405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.MAX_TAP_DURATION_ = 500; 6425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Maximum distance from the first tap to the second tap to be considered 6455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * as a double tap. 6465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 6475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.MAX_DISTANCE_FOR_DOUBLE_TAP_ = 32; 6495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Maximum time for touch to be detected as a double tap (in milliseconds). 6525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 6535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.MAX_DOUBLE_TAP_DURATION_ = 1000; 6555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Convert the event position from the event object to client coordinates. 6585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 6595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {MouseEvent|Touch} e Pointer position. 6605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {object} A pair of x,y in client coordinates. 6615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 6625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.getPosition_ = function(e) { 6645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var clientRect = e.target.getBoundingClientRect(); 6655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return { 6665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) x: e.clientX - clientRect.left, 6675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) y: e.clientY - clientRect.top 6685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 6695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 6705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Returns touch position or null if there is more than one touch position. 6735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 6745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {TouchEvent} e Event. 6755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {object?} A pair of x,y in client coordinates. 6765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 6775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.getTouchPosition_ = function(e) { 6795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (e.targetTouches.length == 1) 6805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return ImageEditor.MouseControl.getPosition_(e.targetTouches[0]); 6815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 6825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return null; 6835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 6845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 6855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 6865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Touch start handler. 6875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {TouchEvent} e Event. 6885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 6895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onTouchStart = function(e) { 6905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var position = this.getTouchPosition_(e); 6915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (position) { 6925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.touchStartInfo_ = { 6935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) x: position.x, 6945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) y: position.y, 6955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) time: Date.now() 6965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 6975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_ = this.buffer_.getDragHandler(position.x, position.y, 6985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) true /* touch */); 6995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHappened_ = false; 7005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 7025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 7035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Touch end handler. 7065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {TouchEvent} e Event. 7075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onTouchEnd = function(e) { 7095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.dragHappened_ && Date.now() - this.touchStartInfo_.time <= 7105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageEditor.MouseControl.MAX_TAP_DURATION_) { 7115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.buffer_.onClick(this.touchStartInfo_.x, this.touchStartInfo_.y); 7125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.previousTouchStartInfo_ && 7135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) Date.now() - this.previousTouchStartInfo_.time < 7145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageEditor.MouseControl.MAX_DOUBLE_TAP_DURATION_) { 7155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var prevTouchCircle = new Circle( 7165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.previousTouchStartInfo_.x, 7175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.previousTouchStartInfo_.y, 7185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageEditor.MouseControl.MAX_DISTANCE_FOR_DOUBLE_TAP_); 7195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (prevTouchCircle.inside(this.touchStartInfo_.x, 7205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.touchStartInfo_.y)) { 7215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.doubleTapCallback_(this.touchStartInfo_.x, this.touchStartInfo_.y); 7225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.previousTouchStartInfo_ = this.touchStartInfo_; 7255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 7265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.previousTouchStartInfo_ = null; 7275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.onTouchCancel(e); 7295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 7305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 7315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Default double tap handler. 7345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} x X coordinate of the event. 7355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} y Y coordinate of the event. 7365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 7375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.doubleTapCallback_ = function(x, y) {}; 7395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Sets callback to be called when double tap detected. 7425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function(number, number)} callback New double tap callback. 7435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.setDoubleTapCallback = function(callback) { 7455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.doubleTapCallback_ = callback; 7465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 7475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Touch chancel handler. 7505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onTouchCancel = function() { 7525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_ = null; 7535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHappened_ = false; 7545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.touchStartInfo_ = null; 7555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockMouse_(false); 7565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 7575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Touch move handler. 7605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {TouchEvent} e Event. 7615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onTouchMove = function(e) { 7635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var position = this.getTouchPosition_(e); 7645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!position) 7655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 7665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.touchStartInfo_ && !this.dragHappened_) { 7685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var tapCircle = new Circle(this.touchStartInfo_.x, this.touchStartInfo_.y, 7695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageEditor.MouseControl.MAX_MOVEMENT_FOR_TAP_); 7705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHappened_ = !tapCircle.inside(position.x, position.y); 7715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.dragHandler_ && this.dragHappened_) { 7735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_(position.x, position.y); 7745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockMouse_(true); 7755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 7775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 7785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Mouse down handler. 7815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {MouseEvent} e Event. 7825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onMouseDown = function(e) { 7845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var position = ImageEditor.MouseControl.getPosition_(e); 7855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_ = this.buffer_.getDragHandler(position.x, position.y, 7875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) false /* mouse */); 7885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHappened_ = false; 7895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateCursor_(position); 7905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 7915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 7925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 7945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Mouse up handler. 7955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {MouseEvent} e Event. 7965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onMouseUp = function(e) { 7985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var position = ImageEditor.MouseControl.getPosition_(e); 7995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.dragHappened_) { 8015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.buffer_.onClick(position.x, position.y); 8025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 8035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_ = null; 8045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHappened_ = false; 8055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockMouse_(false); 8065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 8075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Mouse move handler. 8115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {MouseEvent} e Event. 8125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.onMouseMove = function(e) { 8145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var position = ImageEditor.MouseControl.getPosition_(e); 8155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.dragHandler_ && !e.which) { 8175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // mouseup must have happened while the mouse was outside our window. 8185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_ = null; 8195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockMouse_(false); 8205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 8215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateCursor_(position); 8235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.dragHandler_) { 8245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHandler_(position.x, position.y); 8255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.dragHappened_ = true; 8265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lockMouse_(true); 8275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 8285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 8295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Update the UI to reflect mouse drag state. 8335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} on True if dragging. 8345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 8355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.lockMouse_ = function(on) { 8375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.setAttribute(this.rootContainer_, 'mousedrag', on); 8385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Update the cursor. 8425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 8435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} position An object holding x and y properties. 8445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 8455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.MouseControl.prototype.updateCursor_ = function(position) { 8475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var oldCursor = this.container_.getAttribute('cursor'); 8485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var newCursor = this.buffer_.getCursorStyle( 8495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position.x, position.y, !!this.dragHandler_); 8505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (newCursor != oldCursor) // Avoid flicker. 8515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.container_.setAttribute('cursor', newCursor); 8525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * A toolbar for the ImageEditor. 8565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} parent The parent element. 8575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} displayStringFunction A string formatting function. 8585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} updateCallback The callback called when controls change. 8595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 8605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar = function(parent, displayStringFunction, updateCallback) { 8625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_ = parent; 8635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displayStringFunction_ = displayStringFunction; 8645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateCallback_ = updateCallback; 8655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Clear the toolbar. 8695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.clear = function() { 8715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ImageUtil.removeChildren(this.wrapper_); 8725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Create a control. 8765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} tagName The element tag name. 8775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {HTMLElement} The created control element. 8785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 8795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.create_ = function(tagName) { 8815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.wrapper_.ownerDocument.createElement(tagName); 8825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Add a control. 8865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} element The control to add. 8875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {HTMLElement} The added element. 8885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.add = function(element) { 8905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_.appendChild(element); 8915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return element; 8925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 8935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 8955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Add a text label. 8965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name Label name. 8975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {HTMLElement} The added label. 8985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.addLabel = function(name) { 9005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var label = this.create_('span'); 9015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) label.textContent = this.displayStringFunction_(name); 9025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.add(label); 9035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 9045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 9065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Add a button. 9075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name Button name. 9085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} handler onClick handler. 9095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} opt_class Extra class name. 9105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {HTMLElement} The added button. 9115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 9125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.addButton = function( 9135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) name, handler, opt_class) { 9145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var button = this.create_('div'); 9155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button.classList.add('button'); 9165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (opt_class) button.classList.add(opt_class); 9175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button.textContent = this.displayStringFunction_(name); 9185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button.addEventListener('click', handler, false); 9195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.add(button); 9205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 9215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 9235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Add a range control (scalar value picker). 9245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 9255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} name An option name. 9265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} min Min value of the option. 9275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} value Default value of the option. 9285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} max Max value of the options. 9295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} scale A number to multiply by when setting 9305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * min/value/max in DOM. 9315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} opt_showNumeric True if numeric value should be displayed. 9325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {HTMLElement} Range element. 9335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 9345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.addRange = function( 9355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) name, min, value, max, scale, opt_showNumeric) { 9365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var self = this; 9375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) scale = scale || 1; 9395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var range = this.create_('input'); 9415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.className = 'range'; 9435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.type = 'range'; 9445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.name = name; 9455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.min = Math.ceil(min * scale); 9465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.max = Math.floor(max * scale); 9475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var numeric = this.create_('div'); 9495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) numeric.className = 'numeric'; 9505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function mirror() { 9515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) numeric.textContent = Math.round(range.getValue() * scale) / scale; 9525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 9535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.setValue = function(newValue) { 9555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.value = Math.round(newValue * scale); 9565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) mirror(); 9575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 9585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.getValue = function() { 9605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return Number(range.value) / scale; 9615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 9625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.reset = function() { 9645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.setValue(value); 9655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 9665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.addEventListener('change', 9685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function() { 9695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) mirror(); 9705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.updateCallback_(self.getOptions()); 9715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 9725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) false); 9735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) range.setValue(value); 9755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var label = this.create_('div'); 9775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) label.textContent = this.displayStringFunction_(name); 9785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) label.className = 'label ' + name; 9795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.add(label); 9805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.add(range); 9815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (opt_showNumeric) this.add(numeric); 9825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return range; 9845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 9855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 9875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {object} options A map of options. 9885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 9895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.getOptions = function() { 9905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var values = {}; 9915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var child = this.wrapper_.firstChild; child; child = child.nextSibling) { 9925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (child.name) 9935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) values[child.name] = child.getValue(); 9945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 9955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return values; 9965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 9975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 9995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Reset the toolbar. 10005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.reset = function() { 10025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var child = this.wrapper_.firstChild; child; child = child.nextSibling) { 10035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (child.reset) child.reset(); 10045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 10055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 10085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Show/hide the toolbar. 10095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} on True if show. 10105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Toolbar.prototype.show = function(on) { 10125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.wrapper_.firstChild) 10135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; // Do not show empty toolbar; 10145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_.hidden = !on; 10165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** A prompt panel for the editor. 10195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 10205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} container Container element. 10215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} displayStringFunction A formatting function. 10225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt = function(container, displayStringFunction) { 10245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.container_ = container; 10255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displayStringFunction_ = displayStringFunction; 10265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 10295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Reset the prompt. 10305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt.prototype.reset = function() { 10325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.cancelTimer(); 10335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.wrapper_) { 10345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.container_.removeChild(this.wrapper_); 10355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_ = null; 10365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_ = null; 10375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 10385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 10415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Cancel the delayed action. 10425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt.prototype.cancelTimer = function() { 10445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.timer_) { 10455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) clearTimeout(this.timer_); 10465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.timer_ = null; 10475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 10485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 10515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Schedule the delayed action. 10525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {function} callback Callback. 10535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} timeout Timeout. 10545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt.prototype.setTimer = function(callback, timeout) { 10565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.cancelTimer(); 10575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var self = this; 10585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.timer_ = setTimeout(function() { 10595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) self.timer_ = null; 10605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) callback(); 10615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, timeout); 10625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 10655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Show the prompt. 10665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 10675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} text The prompt text. 10685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} timeout Timeout in ms. 10695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} formatArgs varArgs for the formatting fuction. 10705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt.prototype.show = function(text, timeout, formatArgs) { 10725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.showAt.apply(this, 10735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) ['center'].concat(Array.prototype.slice.call(arguments))); 10745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 10755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 10775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 10785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} pos The 'pos' attribute value. 10795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} text The prompt text. 10805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} timeout Timeout in ms. 10815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {object} formatArgs varArgs for the formatting fuction. 10825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 10835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt.prototype.showAt = function(pos, text, timeout, formatArgs) { 10845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.reset(); 10855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!text) return; 10865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var document = this.container_.ownerDocument; 10885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_ = document.createElement('div'); 10895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_.className = 'prompt-wrapper'; 10905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_.setAttribute('pos', pos); 10915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.container_.appendChild(this.wrapper_); 10925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_ = document.createElement('div'); 10945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_.className = 'prompt'; 10955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 10965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Create an extra wrapper which opacity can be manipulated separately. 10975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var tool = document.createElement('div'); 10985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) tool.className = 'dimmable'; 10995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.wrapper_.appendChild(tool); 11005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) tool.appendChild(this.prompt_); 11015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 11025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var args = [text].concat(Array.prototype.slice.call(arguments, 3)); 11035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_.textContent = this.displayStringFunction_.apply(null, args); 11045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 11055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var close = document.createElement('div'); 11065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) close.className = 'close'; 11075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) close.addEventListener('click', this.hide.bind(this)); 11085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_.appendChild(close); 11095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 11105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) setTimeout( 11115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_.setAttribute.bind(this.prompt_, 'state', 'fadein'), 0); 11125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 11135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (timeout) 11145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.setTimer(this.hide.bind(this), timeout); 11155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 11165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 11175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 11185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Hide the prompt. 11195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 11205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)ImageEditor.Prompt.prototype.hide = function() { 11215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.prompt_) return; 11225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.prompt_.setAttribute('state', 'fadeout'); 11235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Allow some time for the animation to play out. 11245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.setTimer(this.reset.bind(this), 500); 11255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1126