From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- js/mediators/drag-drop-mediator.js | 172 ++++++++++ js/mediators/element-mediator.js | 677 +++++++++++++++++++++++++++++++++++++ js/mediators/keyboard-mediator.js | 240 +++++++++++++ js/mediators/mouse-mediator.js | 31 ++ 4 files changed, 1120 insertions(+) create mode 100644 js/mediators/drag-drop-mediator.js create mode 100644 js/mediators/element-mediator.js create mode 100644 js/mediators/keyboard-mediator.js create mode 100644 js/mediators/mouse-mediator.js (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js new file mode 100644 index 00000000..07e4a50c --- /dev/null +++ b/js/mediators/drag-drop-mediator.js @@ -0,0 +1,172 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + NJUtils = require("js/lib/NJUtils").NJUtils; + +exports.DragDropMediator = Montage.create(Component, { + dropTarget: { + value: null, + writable: true + }, + + baseX: { + value: null, + writable: true + }, + + baseY: { + value: null, + writable: true + }, + + deserializedFromTemplate: { + value: function() { + this.eventManager.addEventListener("appLoaded", this, false); + } + }, + + handleAppLoaded: { + value: function() { + this.dropTarget = this.application.ninja.stage.drawingCanvas; + + this.dropTarget.addEventListener("dragover", this, false); + this.dropTarget.addEventListener("dragend", this, false); + this.dropTarget.addEventListener("drop", this, false); + } + }, + + handleEvent: { + value: function(event){ + event.preventDefault(); + event.stopImmediatePropagation(); + + switch(event.type) { + case "dragover": + return false; + case "dragend": + return false; + case "drop": + this.handleDropEvent(event); + break; + default: + console.log("Default"); + break; + } + } + }, + + handleDropEvent: { + value: function(evt){ + var xferString, component; + + this.baseX = evt.offsetX - this.application.ninja.stage.userContentLeft; + this.baseY = evt.offsetY - this.application.ninja.stage.userContentTop; + + xferString = evt.dataTransfer.getData("text/plain"); + if(xferString) { + + if(xferString.lastIndexOf("-Component") !== -1) { + component = xferString.substring(0, xferString.lastIndexOf("-Component")); + NJevent( "executeAddComponent", { "component": component, "dropX": this.baseX, "dropY": this.baseY }); +// ComponentPanelModule.ComponentsPanelBase.addComponentToStage(componentStr.substring(0, compInd), this.baseX, this.baseY); + } + return; + } + + // Verify that browser supports FileReader API. + if (typeof(window.FileReader) === "undefined") { + alert("File API and FileReader APIs are not supported."); + // Exit function since there isn't anything else we can do. + return; + } + + var file; + const files = evt.dataTransfer.files; + var idx; + const len = files.length; + + + // Loop over all dragged files... + for (idx = 0; idx < len; idx++) { + file = files[idx]; + // Only do anything if the current file is an image (or has an image mime-type. + if (file.type.match("^image/")) { + var reader = new FileReader(); + // Create a LoadHandler to access each outer file var + reader.onload = this.createLoadHandler(file, this.baseX, this.baseY); + + if(file.type.match("^image/svg\\+xml")) {// this is SVG + reader.readAsText(file); + } else{ + reader.readAsDataURL(file); + } + + } + } + + return false; + } + }, + + createLoadHandler: { + value: function(file, baseX, baseY) { + return function(evt2) { + var domElem = null; + + if(file.type.match("^image/svg\\+xml")){ // this is an SVG file + var tempElem = document.createElement("div"); + tempElem.innerHTML = evt2.currentTarget.result; + domElem = tempElem.children[0]; + + NJUtils.makeElementModel(domElem, "SVG", "block"); + } else { // treat as a regular image + domElem = NJUtils.makeNJElement("image", "Image", "block"); + domElem.src = evt2.currentTarget.result; + } + + + // Not sure we need an ID for the image + /* + // Use the Image filename if valid for the id + var filename = file.fileName.substr(0, file.fileName.lastIndexOf('.')) || file.fileName; + filename = filename.replace(/ /g,"_"); + + + if(this.isValidFilename(filename)) { + //domElem.id = filename; + } else { + //domElem.id = DocumentControllerModule.DocumentController.CreateElementID(img.tagName); + } + */ + + var rules = { + 'position': 'absolute', + 'top' : baseY + 'px', + 'left' : baseX + 'px', + '-webkit-transform-style' : 'preserve-3d', + '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' + }; + + NJevent("elementAdding", {el: domElem, data:rules}); + }; + } + }, + + isValidFilename: { + value: function(id){ + if(id && id !== "") { + var regexID = /^([a-zA-Z])+([a-zA-Z0-9_\.\:\-])+/; + return(regexID.test(id)) + } else { + return false; + } + } + } + + +}); diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js new file mode 100644 index 00000000..91b09475 --- /dev/null +++ b/js/mediators/element-mediator.js @@ -0,0 +1,677 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, + NJComponent = require("js/lib/nj-base").NJComponent; + +var ElementController = require("js/controllers/elements/element-controller").ElementController, + Command = require("js/controllers/undo-controller").Command, + GroupCommand = require("js/controllers/undo-controller").GroupCommand, + NJUtils = require("js/lib/NJUtils").NJUtils; + +exports.ElementMediator = Montage.create(NJComponent, { + + deleteDelegate: { + value: null + }, + + deserializedFromTemplate: { + value: function () { + this.eventManager.addEventListener("elementAdding", this, false); + this.eventManager.addEventListener("deleting", this, false); + } + }, + + // TODO use the specific controller to be able to subclass the functionality + handleElementAdding: { + value: function(event) { + /* + var cmd = ElementControllerCommands.addElementCommand(event.detail.el, event.detail.data); + NJevent("sendToUndo", cmd); + cmd.execute(); + */ + this.addElement(event.detail.el, event.detail.data); + + } + }, + + handleDeleting: { + value: function(event) { + if(this.deleteDelegate && (typeof this.deleteDelegate.handleDelete === 'function')) { + this.deleteDelegate.handleDelete(); + } else { + // Add the Undo/Redo + var els = []; + + if(this.application.ninja.selectedElements.length > 0) { + for(var i=0, item; item = this.application.ninja.selectedElements[i]; i++) { + ElementController.removeElement(item._element); + els.push(item._element); + } + + NJevent( "deleteSelection", els ); + } + } + } + }, + + addElement: { + value: function(el, rules, noEvent) { + var command = Montage.create(Command, { + _el: { value: el }, + _rules: { value: rules }, + _noEvent: { value: noEvent }, + + description: { value: "Adding Element"}, + + receiver: { value: this}, + + execute: { + value: function() { + this.receiver._addElement(this._el, this._rules, this._noEvent); + return this._el; + } + }, + + unexecute: { + value: function() { + this.receiver._removeElement(this._el, this._rules, this._noEvent); + return this._el; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(); + } + }, + + _addElement: { + value: function(el, rules, noEvent) { + ElementController.addElement(el, rules); + if(!noEvent) NJevent("elementAdded", el); + } + }, + + _removeElement: { + value: function(el, rules) { + ElementController.removeElement(el, rules); + NJevent("elementDeleted", el); + } + }, + + getNJProperty: { + value: function(el, p) { + if(el.elementModel) { + if(el.elementModel.hasOwnProperty(p)) { + return el.elementModel[p]; + } else { + console.log("Element Model does not have ", p); + } + } else { + console.log("Element has no Model -- Create one"); + } + } + }, + + getProperty: { + value: function(el, prop, valueMutator) { + if(!el.elementModel) { + console.log("Element has no Model -> One should have been created"); + NJUtils.makeElementModel(el, "Div", "block"); + } + + if(valueMutator && typeof valueMutator === "function") { + return valueMutator(el.elementModel.controller["getProperty"](el, prop)); + } else { + return el.elementModel.controller["getProperty"](el, prop, valueMutator); + } + } + }, + + getShapeProperty: { + value: function(el, prop) { + if(!el.elementModel) { + console.log("Element has no Model -> One should have been created"); + NJUtils.makeElementModel(el, "Canvas", "block", true); + } + + return el.elementModel.controller["getShapeProperty"](el, prop); + } + }, + + setShapeProperty: { + value: function(el, prop, value) { + if(!el.elementModel) { + console.log("Element has no Model -> One should have been created"); + NJUtils.makeElementModel(el, "Canvas", "block", true); + } + + return el.elementModel.controller["setShapeProperty"](el, prop, value); + } + }, + + /** + Set a property change command for an element or array of elements + @param els: Array of elements. Can contain 1 or more elements + @param p: Property to set + @param value: Value to be set. This is an array of values corresponding to the array of elements + @param eventType: Change/Changing. Will be passed to the dispatched event + @param source: String for the source object making the call + @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated + @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline + */ + setAttribute: { + value: function(el, att, value, eventType, source, currentValue) { + + if(eventType === "Changing") { + this._setAttribute(el, att, value, eventType, source); + } else { + // Calculate currentValue if not found for each element + if(currentValue === null) { + console.log("Here"); + var item = el._element || el; + currentValue = item.getAttribute(att); + } + + var command = Montage.create(Command, { + _el: { value: el }, + _att: { value: att }, + _value: { value: value }, + _previous: { value: currentValue }, + _eventType: { value: eventType}, + _source: { value: "undo-redo"}, + description: { value: "Set Attribute"}, + receiver: { value: this}, + + execute: { + value: function(senderObject) { + if(senderObject) this._source = senderObject; + this.receiver._setAttribute(this._el, this._att, this._value, this._eventType, this._source); + this._source = "undo-redo"; + return ""; + } + }, + + unexecute: { + value: function() { + this.receiver._setAttribute(this._el, this._att, this._previous, this._eventType, this._source); + return ""; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(source); + } + + } + }, + + _setAttribute: { + value: function(el, att, value, eventType, source) { + var item = el._element || el; + + item.elementModel.controller["setAttribute"](item, att, value); + + NJevent("attribute" + eventType, {type : "setAttribute", source: source, data: {"els": el, "prop": att, "value": value}, redraw: null}); + } + }, + + + + /** + Set a property change command for an element or array of elements + @param els: Array of elements. Can contain 1 or more elements + @param p: Property to set + @param value: Value to be set. This is an array of values corresponding to the array of elements + @param eventType: Change/Changing. Will be passed to the dispatched event + @param source: String for the source object making the call + @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated + @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline + */ + setProperty: { + value: function(els, p, value, eventType, source, currentValue, stageRedraw) { + if(eventType === "Changing") { + this._setProperty(els, p, value, eventType, source); + } else { + // Calculate currentValue if not found for each element + if(!currentValue) { + var that = this; + currentValue = els.map(function(item) { + return that.getProperty((item._element || item), p); + }); + } + + var command = Montage.create(Command, { + _els: { value: els }, + _p: { value: p }, + _value: { value: value }, + _previous: { value: currentValue }, + _eventType: { value: eventType}, + _source: { value: "undo-redo"}, + description: { value: "Set Property"}, + receiver: { value: this}, + + execute: { + value: function(senderObject) { + if(senderObject) this._source = senderObject; + this.receiver._setProperty(this._els, this._p, this._value, this._eventType, this._source); + this._source = "undo-redo"; + return ""; + } + }, + + unexecute: { + value: function() { + this.receiver._setProperty(this._els, this._p, this._previous, this._eventType, this._source); + return ""; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(source); + } + + } + }, + + _setProperty: { + value: function(els, p, value, eventType, source) { + var el; + + for(var i=0, item; item = els[i]; i++) { + el = item._element || item; + el.elementModel.controller["setProperty"](el, p, value[i]); + } + + NJevent("element" + eventType, {type : "setProperty", source: source, data: {"els": els, "prop": p, "value": value}, redraw: null}); + } + }, + + /** + Set a property change command for an element or array of elements + @param els: Array of elements. Can contain 1 or more elements + @param props: Property/ies object containing both the value and property + @param eventType: Change/Changing. Will be passed to the dispatched event + @param source: String for the source object making the call + @param currentProps *OPTIONAL*: current properties objects array. If not found it will be calculated + @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline + */ + setProperties: { + value: function(els, props, eventType, source, currentProps, stageRedraw) { + if(eventType === "Changing") { + this._setProperties(els, props, eventType, source); + } else { + var command = Montage.create(Command, { + _els: { value: els }, + _props: { value: props }, + _previous: { value: currentProps }, + _eventType: { value: eventType}, + _source: { value: "undo-redo"}, + description: { value: "Set Properties"}, + receiver: { value: this}, + + execute: { + value: function(senderObject) { + if(senderObject) this._source = senderObject; + this.receiver._setProperties(this._els, this._props, this._eventType, this._source); + this._source = "undo-redo"; + return ""; + } + }, + + unexecute: { + value: function() { + this.receiver._setProperties(this._els, this._previous, this._eventType, this._source); + return ""; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(source); + } + } + }, + + _setProperties: { + value: function(els, props, eventType, source) { + var el, propsArray; + + for(var i=0, item; item = els[i]; i++) { + el = item._element || item; + el.elementModel.controller["setProperties"](el, props, i); + } + + NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); + } + }, + + /** + Set a property change command for an element or array of elements + @param els: Array of elements. Can contain 1 or more elements + @param props: Property/ies object containing both the value and property + @param eventType: Change/Changing. Will be passed to the dispatched event + @param source: String for the source object making the call + @param currentProps *OPTIONAL*: current properties objects array. If not found it will be calculated + @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline + */ + set3DProperties: { + value: function(els, props, eventType, source, currentProps, stageRedraw) { + if(eventType === "Changing") { + this._set3DProperties(els, props, eventType, source); + } else { + // Calculate currentProps if not found for each element + if(!currentProps) { + var that = this; + currentProps = els.map(function(item) { + return that.get3DProperties(item); + }); + } + + var command = Montage.create(Command, { + _els: { value: els }, + _props: { value: props }, + _previous: { value: currentProps }, + _eventType: { value: eventType}, + _source: { value: "undo-redo"}, + description: { value: "Set 3D Properties"}, + receiver: { value: this}, + + execute: { + value: function(senderObject) { + if(senderObject) this._source = senderObject; + this.receiver._set3DProperties(this._els, this._props, this._eventType, this._source); + this._source = "undo-redo"; + return ""; + } + }, + + unexecute: { + value: function() { + this.receiver._set3DProperties(this._els, this._previous, this._eventType, this._source); + return ""; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(source); + } + } + }, + + _set3DProperties: { + value: function(els, props, eventType, source) { + var el, + update3DModel = false; + + if(eventType === "Change") + { + update3DModel = true; + } + for(var i=0, item; item = els[i]; i++) { + el = item._element || item; + el.elementModel.controller["set3DProperties"](el, props, i, update3DModel); + } + + NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); + } + }, + + + //-------------------------------------------------------------------------------------------------------- + // Routines to get/set color + // for now just return the bg/fill color + getColor: { + value: function(el, isFill) { + if(!el.elementModel) { + NJUtils.makeElementModel(el, "Div", "block"); + } + return el.elementModel.controller["getColor"](el, isFill); + } + }, + + /** + Set a property change command for an element or array of elements + @param els: Array of elements. Can contain 1 or more elements + @param value: Value to be set. This is the color + @param isFill: Specifies if setting fill (background) or stroke (border) + @param eventType: Change/Changing. Will be passed to the dispatched event + @param source: String for the source object making the call + @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated + @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline + */ + setColor: { + value: function(els, value, isFill, eventType, source, currentValue, stageRedraw) { + + if(eventType === "Changing") { + this._setColor(els, value, isFill, eventType, source); + } else { + // Calculate currentValue if not found for each element + if(!currentValue) { + var that = this; + currentValue = els.map(function(item) { + return that.getColor(item._element); + }); + } + + var command = Montage.create(Command, { + _els: { value: els }, + _value: { value: value }, + _isFill: { value: isFill }, + _previous: { value: currentValue }, + _eventType: { value: eventType}, + _source: { value: "undo-redo"}, + description: { value: "Set Color"}, + receiver: { value: this}, + + execute: { + value: function(senderObject) { + if(senderObject) this._source = senderObject; + this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source); + this._source = "undo-redo"; + return ""; + } + }, + + unexecute: { + value: function() { + this.receiver._setColor(this._els, this._previous, this._isFill, this._eventType, this._source); + return ""; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(source); + } + + } + }, + + _setColor: { + value: function(els, value, isFill, eventType, source) { + var el; + + for(var i=0, item; item = els[i]; i++) { + el = item._element || item; + el.elementModel.controller["setColor"](el, value, isFill); + } + + NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null}); + } + }, + + + + getStroke: { + value: function(el) { + if(!el.elementModel) { + NJUtils.makeElementModel(el, "Div", "block"); + } + return el.elementModel.controller["getStroke"](el); + } + }, + + + /** + Set a property change command for an element or array of elements + @param els: Array of elements. Can contain 1 or more elements + @param value: Value to be set. This is the stroke info + @param eventType: Change/Changing. Will be passed to the dispatched event + @param source: String for the source object making the call + @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated + @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline + */ + setStroke: { + value: function(els, value, eventType, source, currentValue, stageRedraw) { + + if(eventType === "Changing") { + this._setStroke(els, value, isFill, eventType, source); + } else { + // Calculate currentValue if not found for each element + if(!currentValue) { + var that = this; + currentValue = els.map(function(item) { + return that.getStroke(item._element); + }); + } + + var command = Montage.create(Command, { + _els: { value: els }, + _value: { value: value }, + _previous: { value: currentValue }, + _eventType: { value: eventType}, + _source: { value: "undo-redo"}, + description: { value: "Set Color"}, + receiver: { value: this}, + + execute: { + value: function(senderObject) { + if(senderObject) this._source = senderObject; + this.receiver._setStroke(this._els, this._value, this._eventType, this._source); + this._source = "undo-redo"; + return ""; + } + }, + + unexecute: { + value: function() { + this.receiver._setStroke(this._els, this._previous, this._eventType, this._source); + return ""; + } + } + }); + + NJevent("sendToUndo", command); + command.execute(source); + } + + } + }, + + _setStroke: { + value: function(els, value, eventType, source) { + var el; + + for(var i=0, item; item = els[i]; i++) { + el = item._element || item; + el.elementModel.controller["setStroke"](el, value); + } + + NJevent("element" + eventType, {type : "setStroke", source: source, data: {"els": els, "prop": "stroke", "value": value}, redraw: null}); + } + }, + + + //-------------------------------------------------------------------------------------------------------- + // Routines to get/set 3D properties + get3DProperty: { + value: function(el, prop) { + if(!el.elementModel) { + NJUtils.makeElementModel2(el); + } + return el.elementModel.controller["get3DProperty"](el, prop); + } + }, + + get3DProperties: { + value: function(el) { + if(!el.elementModel) { + NJUtils.makeElementModel2(el); + } +// var mat = this.getMatrix(el); +// var dist = this.getPerspectiveDist(el); + var mat = el.elementModel.controller["getMatrix"](el); + var dist = el.elementModel.controller["getPerspectiveDist"](el); + return {mat:mat, dist:dist}; + } + }, + + getMatrix: { + value: function(el) { + if(!el.elementModel) { + NJUtils.makeElementModel2(el); + } + return el.elementModel.controller["getMatrix"](el); + } + }, + + getPerspectiveDist: { + value: function(el) { + if(!el.elementModel) { + NJUtils.makeElementModel2(el); + } + return el.elementModel.controller["getPerspectiveDist"](el); + } + }, + + getPerspectiveMode: { + value: function(el) + { + return this.getProperty(el, "-webkit-transform-style"); + } + }, + + setMatrix: { + value: function(el, mat, isChanging) { + var dist = el.elementModel.controller["getPerspectiveDist"](el); + el.elementModel.controller["set3DProperties"](el, [{mat:mat, dist:dist}], 0, !isChanging); + + if(isChanging) + { + NJevent("elementChanging", {type : "setMatrix", source: null, data: {"el": el, "prop": "matrix", "value": mat}, redraw: null}); + } + else + { + NJevent("elementChange", {type : "setMatrix", source: null, data: {"el": el, "prop": "matrix", "value": mat}, redraw: null}); + } + } + }, + + has3D: { + value: function(el) { + var str = this.getProperty(el, "-webkit-transform"); + if (str && str.length) + { + return true; + } + else + { + return false; + } + } + } + + + + + //-------------------------------------------------------------------------------------------------------- + +}); \ No newline at end of file diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js new file mode 100644 index 00000000..144932c0 --- /dev/null +++ b/js/mediators/keyboard-mediator.js @@ -0,0 +1,240 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +// The following class is responsible for listening for keydown events. + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +// Put the keyboard constants in the global scope. +var Keyboard = exports.Keyboard = { + BACKSPACE:8, + TAB:9, + ENTER:13, + SHIFT:16, + ALT:18, + DELETE:46, + LEFT:37, + UP:38, + RIGHT:39, + DOWN:40, + ESCAPE: 27, + SPACE: 32, + + A:65, + B:66, + C:67, + D:68, + E:69, + F:70, + G:71, + H:72, + I:73, + J:74, + K:75, + L:76, + M:77, + N:78, + O:79, + P:80, + Q:81, + R:82, + S:83, + T:84, + U:85, + V:86, + W:87, + X:88, + Y:89, + Z:90, + PLUS:187, + MINUS:189 +}; + +exports.KeyboardMediator = Montage.create(Component, { + + deserializedFromTemplate: { + value: function() { + this.eventManager.addEventListener("appLoaded", this, false); + } + }, + + handleAppLoaded: { + value: function() { + document.addEventListener("keydown", this, false); + document.addEventListener("keyup", this, false); + + this.addEventListener("change@appModel.livePreview", this.handleLivePreview, false); + } + }, + + handleLivePreview: { + value: function() { + if(this.appModel.livePreview) { + document.removeEventListener("keydown", this, false); + document.removeEventListener("keyup", this, false); + } else { + document.addEventListener("keydown", this, false); + document.addEventListener("keyup", this, false); + } + } + }, + + handleKeydown: { + value: function(evt) { + if(document.activeElement.nodeName !== "BODY") { + // Don't do anything if an input or other control is focused + return; + } + + // Disable defaults for the Arrow Keys + if((evt.keyCode == Keyboard.LEFT) || (evt.keyCode == Keyboard.RIGHT) || (evt.keyCode == Keyboard.UP) || (evt.keyCode == Keyboard.DOWN)) { + evt.preventDefault(); + } + + // Check DELETE OR BACKSPACE + if((evt.keyCode == Keyboard.BACKSPACE) || (evt.keyCode == Keyboard.DELETE)) { + evt.stopImmediatePropagation(); + evt.preventDefault(); + NJevent("deleting"); + return; + } + + // Check if cmd+z/ctrl+z for Undo (Windows/Mac) + if ((evt.keyCode == Keyboard.Z) && (evt.ctrlKey || evt.metaKey) && !evt.shiftKey) { + NJevent("executeUndo"); + //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); + return; + } + + // Check if cmd+shift+z for Redo (Mac) + if ((evt.keyCode == Keyboard.Z) && evt.metaKey && evt.shiftKey) { + NJevent("executeRedo"); + //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); + return; + } + + // Check if ctrl+y for Redo (Windows) + if ((evt.keyCode == Keyboard.Y) && evt.ctrlKey) { + NJevent("executeRedo"); + //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); + return; + } + + // Shortcut for Selection Tool is V + if(evt.keyCode === Keyboard.V) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[0]}); + return; + } + + // Shortcut for Tag Tool is D + if(evt.keyCode === Keyboard.D){ + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[4]}); + return; + } + + // Shortcut for Rotate Tool is W + if(evt.keyCode === Keyboard.W){ + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[2]}); + return; + } + + // Shortcut for Translate Tool is G + if(evt.keyCode === Keyboard.G){ + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[3]}); + return; + } + + // Shortcut for Rectangle Tool is R + // unless the user is pressing the command key. + // If the user is pressing the command key, they want to refresh the browser. + if((evt.keyCode === Keyboard.R) && !evt.metaKey) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[7]}); + this.application.ninja.handleSelectSubTool({"detail": this.application.ninja.toolsData.defaultToolsData[7].subtools[1]}); + return; + } + + // Shortcut for Oval Tool is O + if(evt.keyCode === Keyboard.O) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[7]}); + this.application.ninja.handleSelectSubTool({"detail": this.application.ninja.toolsData.defaultToolsData[7].subtools[0]}); + return; + } + + // Shortcut for Line Tool is L + if(evt.keyCode === Keyboard.L ) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[7]}); + this.application.ninja.handleSelectSubTool({"detail": this.application.ninja.toolsData.defaultToolsData[7].subtools[2]}); + return; + } + + if(evt.keyCode === Keyboard.Z ) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[16]}); + return; + } + + // Check if cmd+a/ctrl+a for Select All + if((evt.keyCode == Keyboard.A) && (evt.ctrlKey || evt.metaKey)) { + NJevent("selectAll"); + return; + } + + if(evt.keyCode === Keyboard.ESCAPE){//ESC key + //console.log("ESC key pressed"); + if(this.application.ninja.toolsData) this.application.ninja.toolsData.selectedToolInstance.HandleEscape(evt); + //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); + } + + if(this.application.ninja.toolsData) this.application.ninja.toolsData.selectedToolInstance.HandleKeyPress(evt); + + } + }, + + handleKeyup: { + value: function(evt) { + if(document.activeElement.nodeName !== "BODY") { + // Don't do anything if an input or other control is focused + return; + } + + if(this.application.ninja.toolsData) this.application.ninja.toolsData.selectedToolInstance.HandleKeyUp(evt); + } + }, + + _handleKeydown: { + value: function(evt) { + + // Check if cmd-shift-+/ctrl-shift-+ for toggling snapping + if(evt.shiftKey && (evt.ctrlKey || evt.metaKey) && (evt.keyCode === 187)) + { + MainMenuModule.MenuActionManager.toggleSnapping("snap", !DocumentManagerModule.DocumentManager.activeDocument.snapping); + evt.preventDefault(); + return; + } + + if(evt.keyCode === Keyboard.PLUS && (evt.metaKey||evt.ctrlKey)) { + evt.preventDefault(); + this._toolsList.action("zoomIn", evt); + return; + } + + if(evt.keyCode === Keyboard.MINUS && (evt.metaKey || evt.ctrlKey)) { + evt.preventDefault(); + this._toolsList.action("zoomOut", evt); + return; + } + + } + } +}); diff --git a/js/mediators/mouse-mediator.js b/js/mediators/mouse-mediator.js new file mode 100644 index 00000000..cef6c6c4 --- /dev/null +++ b/js/mediators/mouse-mediator.js @@ -0,0 +1,31 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, + NJComponent = require("js/lib/nj-base").NJComponent; + +exports.MouseMediator = Montage.create( NJComponent, { + hasTemplate: { + value: false + }, + + deserializedFromTemplate: { + value: function() { + document.addEventListener("mouseup", this, false); + } + }, + + handleMouseup: { + value: function(event) { + + if(event._event.target.id !== "drawingCanvas") { + NJevent( "appMouseUp"); + } + + return true; + } + } +}); -- cgit v1.2.3