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