From 01efeff045e7196bab37fc60f7030969ad650d6c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 21:14:17 -0800 Subject: Removed border special-casing from PI since the mediator now handles this generically. Updated mediator's set stroke routine to use the setColor routine. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 13 +++---------- js/panels/properties/content.reel/content.js | 7 ------- js/tools/FillTool.js | 20 +++++++++++++++++--- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 892ac2f2..9b13e703 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -144,10 +144,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, this.setProperty(el, "background-color", color.color.css); } } - else - { - this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); - } el.elementModel.fill = color; } else @@ -169,10 +165,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, this.setProperty(el, "border-color", color.color.css); } } - else - { - this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); - } el.elementModel.stroke = color; } } @@ -187,8 +179,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, setStroke: { value: function(el, stroke) { - var border = stroke.borderWidth + stroke.borderUnits + " " + stroke.borderStyle + " " + stroke.color.color.css; - this.application.ninja.stylesController.setElementStyle(el, "border", border); + this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits); + this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle); + this.setColor(el, stroke.color, false); } }, diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 34c38e70..6cb66071 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -198,7 +198,6 @@ exports.Content = Montage.create(Component, { this.application.ninja.colorController.colorModel.input = "fill"; } - debugger; if(currentValue) { if(currentValue.mode === "gradient") @@ -270,12 +269,6 @@ exports.Content = Montage.create(Component, { e.units ? newValue = e.value + e.units : newValue = e.value; - if(e.prop === "border-width") {// || e.prop === "border-style") { - ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi"); - } else if(e.prop === "border-style") { - ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi"); - } - ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi"); } diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index 477966da..fabcec69 100644 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -54,10 +54,24 @@ exports.FillTool = Montage.create(ModifierToolBase, { value: function(event) { this.isDrawing = true; - if(this._canColor) + if(this._canColor && this.application.ninja.selectedElements.length) { - var color = this.application.ninja.colorController.colorToolbar.fill; - ElementsMediator.setColor(this.application.ninja.selectedElements, color, true, "Change", "fillTool"); + var color = this.application.ninja.colorController.colorToolbar.fill, + colorInfo; + if(color && color.color) + { + colorInfo = { mode:color.colorMode, + color:color.color + }; + ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); + } + else + { + colorInfo = { mode:"nocolor", + color:color.color + }; + ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); + } } } } -- cgit v1.2.3 From 737169d194fc29c82ee784b561065f287e259f88 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 15:35:27 -0800 Subject: Fixing keyboard shortcut and tooltip for hand and 3d tools. Signed-off-by: Nivesh Rajbhandari --- js/data/tools-data.js | 6 +++--- js/mediators/keyboard-mediator.js | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/js/data/tools-data.js b/js/data/tools-data.js index 8ea84574..de965dbc 100644 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js @@ -37,7 +37,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "rotate3DProperties", "spriteSheet": true, "action": "Rotate3DTool", - "toolTip": "3D Rotate Object Tool", + "toolTip": "3D Rotate Object Tool (W)", "cursor": "auto", "lastInGroup": false, "container": false, @@ -48,7 +48,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "translate3DProperties", "spriteSheet": true, "action": "Translate3DTool", - "toolTip": "3D Translate Object Tool", + "toolTip": "3D Translate Object Tool (G)", "cursor": "auto", "lastInGroup": true, "container": false, @@ -206,7 +206,7 @@ exports.ToolsData = Montage.create(Montage, { "properties": "panProperties", "spriteSheet": true, "action": "PanTool", - "toolTip": "Pan Tool", + "toolTip": "Hand Tool (H)", "cursor": "url('images/tools/hand_down.png'), default", "lastInGroup": false, "container": false, diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 144932c0..a1fdead3 100644 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -178,6 +178,12 @@ exports.KeyboardMediator = Montage.create(Component, { return; } + if(evt.keyCode === Keyboard.H ) { + evt.preventDefault(); + this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[15]}); + return; + } + if(evt.keyCode === Keyboard.Z ) { evt.preventDefault(); this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[16]}); -- cgit v1.2.3 From db73f720b692d63b55f7c773579fe23336ec0486 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 16:40:08 -0800 Subject: Update PI when element is changed by one of the tools. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties/content.reel/content.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 3cedee6d..e2ea1374 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -97,8 +97,22 @@ exports.Content = Montage.create(Component, { value: function(event) { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { - this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); - this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); + // TODO - This should only update the properties that were changed. + var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); + this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); + this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); + this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + + if(this.threeD.inGlobalMode) + { + this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); + this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); + this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); + this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } }, -- cgit v1.2.3 From 854a6d1be334782c8e232601e6d562a11296e55a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 14:06:26 -0800 Subject: Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 34 ++++++++++++++++++++++- js/mediators/element-mediator.js | 6 ++-- js/panels/Color/colortoolbar.reel/colortoolbar.js | 8 +++--- js/stage/layout.js | 4 +++ 4 files changed, 44 insertions(+), 8 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index fd96af4d..fe617548 100644 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -71,6 +71,9 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { _selectionCtr : {value: null, writable: true }, + // Properties that require element planes to be updated + _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false }, + /////////////////////////////////////////////////////////////////////// // Property accessors /////////////////////////////////////////////////////////////////////// @@ -124,11 +127,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } }, + _shouldUpdatePlanes: { + value: function(props) { + if(!props) + { + return false; + } + else if (typeof props === "string") + { + return (this._updatePlaneProps.indexOf(props) !== -1); + } + + for (var p in props) + { + if(this._updatePlaneProps.indexOf(p) !== -1) + { + return true; + } + } + + return false; + } + }, + // TODO - Check why handleElementChange is being fired before handleAddElement handleElementChange: { value: function(event) { + if(!event.detail || !event.detail.data) + { + return; + } var els = event.detail.data.els; - if(els) + if(els && this._shouldUpdatePlanes(event.detail.data.prop)) { var len = els.length, i = 0, @@ -141,7 +171,9 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { el.elementModel.props3D.elementPlane.init(); } + this.application.ninja.stage.layout.draw(); this.drawWorkingPlane(); + this.draw3DCompass(); } } }, diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 1d0aef44..b2bc5355 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -425,7 +425,7 @@ exports.ElementMediator = Montage.create(NJComponent, { el.elementModel.controller["set3DProperties"](el, props, i, update3DModel); } - NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); + NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": "matrix", "value": props}, redraw: null}); } }, @@ -660,11 +660,11 @@ exports.ElementMediator = Montage.create(NJComponent, { if(isChanging) { - NJevent("elementChanging", {type : "setMatrix", source: null, data: {"el": el, "prop": "matrix", "value": mat}, redraw: null}); + NJevent("elementChanging", {type : "setMatrix", source: null, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); } else { - NJevent("elementChange", {type : "setMatrix", source: null, data: {"el": el, "prop": "matrix", "value": mat}, redraw: null}); + NJevent("elementChange", {type : "setMatrix", source: null, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); } } }, diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js index 10ae8b6e..6b8e476b 100644 --- a/js/panels/Color/colortoolbar.reel/colortoolbar.js +++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js @@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing stroke (stores color in mode use to select color) _stroke: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [0, 0, 0, 1]} + value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [0, 0, 0, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, { //Storing fill (stores color in mode use to select color) _fill: { enumerable: false, - value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: false, type: 'change'}, webGlColor: [1, 1, 1, 1]} + value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [1, 1, 1, 1]} }, //////////////////////////////////////////////////////////////////// // @@ -86,8 +86,8 @@ exports.ColorToolbar = Montage.create(Component, { this.application.ninja.colorController.addButton('chip', this.fill_btn); this.application.ninja.colorController.addButton('chip', this.stroke_btn); // - this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); - this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); + this.fill_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'}); + this.stroke_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'}); } }, //////////////////////////////////////////////////////////////////// diff --git a/js/stage/layout.js b/js/stage/layout.js index dd5be081..c369fc30 100644 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -74,6 +74,9 @@ exports.Layout = Montage.create(Component, { handleElementAdded: { value: function(event) { this.domTree.push(event.detail); + + this.draw(); + this.draw3DInfo(false); } }, @@ -82,6 +85,7 @@ exports.Layout = Montage.create(Component, { this.domTree.splice(this.domTree.indexOf(event.detail), 1); this.draw(); + this.draw3DInfo(false); } }, -- cgit v1.2.3 From 130c1d3bfeedfc50ab3481c7d8c2e83af224feac Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 14:06:26 -0800 Subject: Update grid and planes when elementChange event signifies the "matrix", "left", "top", "width" or "height" properties have changed. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index fe617548..08a27618 100644 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -168,7 +168,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { for(i=0; i < len; i++) { item = els[i]; el = item._element || item; - el.elementModel.props3D.elementPlane.init(); + if(el.elementModel.props3D.elementPlane) + { + el.elementModel.props3D.elementPlane.init(); + } } this.application.ninja.stage.layout.draw(); @@ -1097,7 +1100,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var tmpCanvas = this.application.ninja.stage.canvas; var tmpStage = this.application.ninja.currentDocument.documentRoot; this.viewUtils.pushViewportObj( tmpCanvas ); - var tmpStage = this.application.ninja.currentDocument.documentRoot; // save the source space object and set to the target object var saveSource = this._sourceSpaceElt; -- cgit v1.2.3 From d7ad2659d7ef8d0fffbb1cba8218061ebd516dd0 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 15:09:54 -0800 Subject: Handle delete of multiple objects. Also, have deletion go through the mediator so elementDeleted event is fired for SnapManager, DrawUtils, etc. to clean up after deleted element(s). Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 7 +++++++ js/mediators/element-mediator.js | 14 +++++++++----- js/stage/layout.js | 17 +++++------------ 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 08a27618..c07391db 100644 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -110,6 +110,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { this.eventManager.addEventListener("elementAdded", this, false); this.eventManager.addEventListener("elementDeleted", this, false); + this.eventManager.addEventListener("deleteSelection", this, false); this.eventManager.addEventListener("elementChange", this, false); } }, @@ -127,6 +128,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } }, + handleDeleteSelection: { + value: function(event) { + this.drawWorkingPlane(); + } + }, + _shouldUpdatePlanes: { value: function(props) { if(!props) diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index b2bc5355..992ac620 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -44,12 +44,16 @@ exports.ElementMediator = Montage.create(NJComponent, { this.deleteDelegate.handleDelete(); } else { // Add the Undo/Redo - var els = []; + var els = [], + len = this.application.ninja.selectedElements.length; - 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); + if(len) { + for(var i = 0; i --- js/tools/LineTool.js | 1 + js/tools/ShapeTool.js | 1 + 2 files changed, 2 insertions(+) diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index a0d5a182..17157f23 100644 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -99,6 +99,7 @@ exports.LineTool = Montage.create(ShapeTool, { } this.RenderShape(w, h, drawData.planeMat, drawData.midPt, canvas, slope, xAdj, yAdj); + NJevent("elementAdded", canvas); } this.endDraw(event); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 9a4399b4..4ccb7a8d 100644 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -83,6 +83,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { } } this.RenderShape(drawData.width, drawData.height, drawData.planeMat, drawData.midPt, canvas); + NJevent("elementAdded", canvas); } this.endDraw(event); -- cgit v1.2.3 From fd44b7c326acf413367667690e937709f03601e3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 3 Feb 2012 17:09:02 -0800 Subject: We were only updating the first custom section in the PI. Signed-off-by: Nivesh Rajbhandari --- js/data/pi/pi-data.js | 2 -- js/panels/properties/content.reel/content.js | 7 +++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 1f8870ca..dd75e255 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -288,7 +288,6 @@ exports.PiData = Montage.create( Montage, { type : "color", prop: "background", id : "fill", - prop : "fill", divider : true } ], @@ -462,7 +461,6 @@ exports.PiData = Montage.create( Montage, { type : "color", prop: "background", id : "fill", - prop : "fill", divider : true } ], diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js index 20dc308f..0088447a 100644 --- a/js/panels/properties/content.reel/content.js +++ b/js/panels/properties/content.reel/content.js @@ -197,8 +197,11 @@ exports.Content = Montage.create(Component, { if(control.type !== "color") { currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); - currentValue ? currentValue = currentValue : currentValue = control.defaultValue; - this.customSections[0].content.controls[control.id] = currentValue; + if(currentValue === null) + { + currentValue = control.defaultValue; + } + this.customSections[i].content.controls[control.id] = currentValue; } else { -- cgit v1.2.3 From 52b58508dfa20c996ddbcdda80f62154ed0a36c7 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 3 Feb 2012 23:50:16 -0800 Subject: IKNINJA-854 - removed cons and replaced it with var Signed-off-by: Valerio Virgillito --- js/mediators/drag-drop-mediator.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index 07e4a50c..aacb228c 100644 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -62,7 +62,7 @@ exports.DragDropMediator = Montage.create(Component, { handleDropEvent: { value: function(evt){ - var xferString, component; + var xferString, component, file, files, idx, len; this.baseX = evt.offsetX - this.application.ninja.stage.userContentLeft; this.baseY = evt.offsetY - this.application.ninja.stage.userContentTop; @@ -85,11 +85,8 @@ exports.DragDropMediator = Montage.create(Component, { return; } - var file; - const files = evt.dataTransfer.files; - var idx; - const len = files.length; - + files = evt.dataTransfer.files; + len = files.length; // Loop over all dragged files... for (idx = 0; idx < len; idx++) { -- cgit v1.2.3 From cbcc9dcadaf62b3b0aef380f022bf6c365785627 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 2 Feb 2012 10:36:05 -0800 Subject: Tree Controller - Initial add --- js/controllers/tree-controller.js | 219 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 js/controllers/tree-controller.js diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js new file mode 100644 index 00000000..45e4c4ba --- /dev/null +++ b/js/controllers/tree-controller.js @@ -0,0 +1,219 @@ +/* + 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. + */ +/** + @module montage/ui/controller/tree-controller + @requires montage/core/core + @requires montage/ui/controller/object-controller + @requires montage/core/event/mutable-event + */ +var Montage = require("montage").Montage, + ObjectController = require("montage/ui/controller/object-controller").ObjectController, + ArrayController = require("montage/ui/controller/array-controller").ArrayController, + MutableEvent = require("montage/core/event/mutable-event").MutableEvent; +/** + TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical + collection of objects, and managing user selection within that collection. + You can assign a TreeController instance as the contentProvider property for a TreeView object. + @class module:montage/ui/controller/tree-controller.TreeController + @classdesc + @extends module:montage/ui/controller/object-controller.ObjectController +*/ +var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { + + rootKey : { + value: null + }, + + branchKey : { + value: 'children' + }, + + _root : { + value : null + }, + root : { + get: function() { + return this._root; + }, + set: function(value) { + this._root = value; + + this.initArrayControllers(); + } + }, + + rootController: { + value: null + }, + + initArrayControllers : { + value: function() { + var self = this; + + ///// Declare function to initialize controller for each node + ///// that is a branch + + function initController(array, depth) { + var controller = Montage.create(ArrayController, { + content : { value: array }, + delegate : { value: self }, + isSelectionEnabled : { value: true }}); + + if(depth === 0) { + self.rootController = controller; + } + + self.branchControllers.push({ + depth : depth, + controller : controller + + }); + } + + ///// Recursive function that finds all branch nodes and initializes + ///// an array controller + + function walk(node, init, depth) { + var children = node[self.branchKey]; + + if(children) { + //init(children, depth); + + children.forEach(function(child) { + walk(child, init, ++depth); + }); + + node['treeNodeType'] = 'branch'; + } else { + node['treeNodeType'] = 'leaf'; + } + } + + walk(this._root, initController, 0); + + } + }, + + /** + @private + */ + _selectedIndexes: { + value: null, + enumerable: false + }, + + /** + Description TODO + @type {Function} + @default null + */ + selectedIndexes: { + get: function() { + + }, + set: function(value) { + + } + }, + + lazyLoad : { + value: false + }, + + branchControllers: { + value: [] + }, + + addBranchController : { + value: function(controller) { + if(this.delegate) { + controller.delegate = this.delegate; + } + + this.branchControllers.push(controller); + } + }, + + /** + @private + */ + _content: { + enumerable: false, + value: null + }, + /** + The content managed by the TreeController. + @type {Function} + @default {String} null + */ + content: { + get: function() { + return this._content; + }, + set: function(value) { + if (this._content === value) { + return; + } + + this._content = value; + + //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course + this.selectedObjects = null; + + if (this.rootKey) { + if (value[this.rootKey]) { + this.root = value[this.rootKey]; + } else { + console.log('No root key found in content data'); + } + } else { + this.root = value; + } + + + } + }, + + addObjects : { + value: function() { + + var objects = Array.prototype.slice.call(arguments), + i, + objectCount = objects.length, + selectedContentIndexes, firstIndex; + + for (i = 0; i < objectCount; i++) { + this.content.push(objects[i]); + } + + if (this.selectObjectsOnAddition) { + selectedContentIndexes = []; + firstIndex = this.content.length-objectCount; + for (i = 0; i < objectCount; i++) { + selectedContentIndexes[i] = firstIndex++; + } + this.selectedContentIndexes = selectedContentIndexes; + this.selectedObjects = objects; + } + + if (this.clearFilterFunctionOnAddition) { + this.filterFunction = null; + } + + if (this.automaticallyOrganizeObjects) { + this.organizeObjects(); + } + + } + }, + + insertChildBefore : { value : function() {} }, + + insertChildAfter : { value : function() {} } + + + +}); -- cgit v1.2.3 From 5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 2 Feb 2012 14:58:21 -0800 Subject: Tree Controller - Clean out unused code --- js/controllers/tree-controller.js | 48 ++++++--------------------------------- 1 file changed, 7 insertions(+), 41 deletions(-) diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js index 45e4c4ba..2b2e910c 100644 --- a/js/controllers/tree-controller.js +++ b/js/controllers/tree-controller.js @@ -53,37 +53,15 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / value: function() { var self = this; - ///// Declare function to initialize controller for each node - ///// that is a branch - - function initController(array, depth) { - var controller = Montage.create(ArrayController, { - content : { value: array }, - delegate : { value: self }, - isSelectionEnabled : { value: true }}); - - if(depth === 0) { - self.rootController = controller; - } - - self.branchControllers.push({ - depth : depth, - controller : controller - - }); - } - ///// Recursive function that finds all branch nodes and initializes - ///// an array controller + ///// sets the tree node type to "branch" or "leaf" function walk(node, init, depth) { - var children = node[self.branchKey]; - - if(children) { - //init(children, depth); + var branch = node[self.branchKey]; - children.forEach(function(child) { - walk(child, init, ++depth); + if(branch) { + branch.forEach(function(node) { + walk(node, init, ++depth); }); node['treeNodeType'] = 'branch'; @@ -92,7 +70,7 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / } } - walk(this._root, initController, 0); + walk(this._root, 0); } }, @@ -119,10 +97,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / } }, - lazyLoad : { - value: false - }, - branchControllers: { value: [] }, @@ -160,7 +134,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / this._content = value; - //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course this.selectedObjects = null; if (this.rootKey) { @@ -173,7 +146,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / this.root = value; } - } }, @@ -208,12 +180,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, / } } - }, - - insertChildBefore : { value : function() {} }, - - insertChildAfter : { value : function() {} } - - + } }); -- cgit v1.2.3 From 1b0c5c0e7ebf9dda95a624da546aaece268631ad Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 6 Feb 2012 10:59:51 -0800 Subject: Fixing format of for loop. Signed-off-by: Nivesh Rajbhandari --- js/mediators/element-mediator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 992ac620..c44e1cb5 100644 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -48,10 +48,10 @@ exports.ElementMediator = Montage.create(NJComponent, { len = this.application.ninja.selectedElements.length; if(len) { - for(var i = 0; i --- js/controllers/elements/shapes-controller.js | 1 + js/data/pi/pi-data.js | 30 ++++++++++++++++++++++++++++ js/models/shape-model.js | 1 + js/tools/LineTool.js | 1 + js/tools/OvalTool.js | 1 + js/tools/RectTool.js | 1 + 6 files changed, 35 insertions(+) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 5efbccd0..48072309 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -76,6 +76,7 @@ exports.ShapesController = Montage.create(CanvasController, { case "fillMaterial": case "border": case "background": + case "useWebGl": return this.getShapeProperty(el, p); default: return CanvasController.getProperty(el, p); diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index dd75e255..8ccf17cc 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -367,6 +367,16 @@ exports.PiData = Montage.create( Montage, { label: "Materials", Section: [ + [ + { + type: "checkbox", + id: "useWebGl", + prop: "useWebGl", + defaultValue: false, + value: "Use WebGL", + checked: false + } + ], [ { type: "dropdown", @@ -432,6 +442,16 @@ exports.PiData = Montage.create( Montage, { label: "Materials", Section: [ + [ + { + type: "checkbox", + id: "useWebGl", + prop: "useWebGl", + defaultValue: false, + value: "Use WebGL", + checked: false + } + ], [ { type: "dropdown", @@ -505,6 +525,16 @@ exports.PiData = Montage.create( Montage, { label: "Materials", Section: [ + [ + { + type: "checkbox", + id: "useWebGl", + prop: "useWebGl", + defaultValue: false, + value: "Use WebGL", + checked: false + } + ], [ { type: "dropdown", diff --git a/js/models/shape-model.js b/js/models/shape-model.js index b643a7b5..1175538f 100644 --- a/js/models/shape-model.js +++ b/js/models/shape-model.js @@ -10,6 +10,7 @@ var Montage = require("montage/core/core").Montage, exports.ShapeModel = Montage.create(Component, { shapeCount: { value: 0 }, + useWebGl: { value: false }, GLWorld: { value: null }, GLGeomObj: { value: null }, diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 17157f23..6a948fd8 100644 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -238,6 +238,7 @@ exports.LineTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = line; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 2fa5411b..446c6754 100644 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -95,6 +95,7 @@ exports.OvalTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = oval; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 94d80b53..6109ee4d 100644 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -117,6 +117,7 @@ exports.RectTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = rect; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { -- cgit v1.2.3 From 984d65c818969ea3bef57ade9cbf5fc50d9a2316 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 6 Feb 2012 11:43:01 -0800 Subject: Tree Components - Adding the tree components --- js/components/treeview/branch.reel/branch.css | 16 +++ js/components/treeview/branch.reel/branch.html | 142 ++++++++++++++++++++ js/components/treeview/branch.reel/branch.js | 48 +++++++ js/components/treeview/leaf.reel/leaf.css | 4 + js/components/treeview/leaf.reel/leaf.html | 38 ++++++ js/components/treeview/leaf.reel/leaf.js | 44 +++++++ .../treeview/ninja-branch.reel/ninja-branch.css | 34 +++++ .../treeview/ninja-branch.reel/ninja-branch.html | 145 +++++++++++++++++++++ .../treeview/ninja-branch.reel/ninja-branch.js | 131 +++++++++++++++++++ .../treeview/ninja-leaf.reel/ninja-leaf.css | 22 ++++ .../treeview/ninja-leaf.reel/ninja-leaf.html | 38 ++++++ .../treeview/ninja-leaf.reel/ninja-leaf.js | 41 ++++++ js/components/treeview/tree-node.js | 103 +++++++++++++++ js/components/treeview/treeview.reel/treeview.css | 3 + js/components/treeview/treeview.reel/treeview.html | 50 +++++++ js/components/treeview/treeview.reel/treeview.js | 129 ++++++++++++++++++ 16 files changed, 988 insertions(+) create mode 100644 js/components/treeview/branch.reel/branch.css create mode 100644 js/components/treeview/branch.reel/branch.html create mode 100644 js/components/treeview/branch.reel/branch.js create mode 100644 js/components/treeview/leaf.reel/leaf.css create mode 100644 js/components/treeview/leaf.reel/leaf.html create mode 100644 js/components/treeview/leaf.reel/leaf.js create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.css create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.html create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.js create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.css create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.html create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.js create mode 100644 js/components/treeview/tree-node.js create mode 100644 js/components/treeview/treeview.reel/treeview.css create mode 100644 js/components/treeview/treeview.reel/treeview.html create mode 100644 js/components/treeview/treeview.reel/treeview.js diff --git a/js/components/treeview/branch.reel/branch.css b/js/components/treeview/branch.reel/branch.css new file mode 100644 index 00000000..5998e0f0 --- /dev/null +++ b/js/components/treeview/branch.reel/branch.css @@ -0,0 +1,16 @@ +.treeRoot > .branch > ul { + margin-top: 0; +} +.branch > .branch-label { + font-weight: bold; + cursor: pointer; +} +.branch ul { + list-style: none; +} +.branch ul { + padding-left: 30px; +} +.branch .collapse { + display: none; +} \ No newline at end of file diff --git a/js/components/treeview/branch.reel/branch.html b/js/components/treeview/branch.reel/branch.html new file mode 100644 index 00000000..31a4cf18 --- /dev/null +++ b/js/components/treeview/branch.reel/branch.html @@ -0,0 +1,142 @@ + + + + + + + + +
+ + +
    +
  • +
+
+ + \ No newline at end of file diff --git a/js/components/treeview/branch.reel/branch.js b/js/components/treeview/branch.reel/branch.js new file mode 100644 index 00000000..892da71a --- /dev/null +++ b/js/components/treeview/branch.reel/branch.js @@ -0,0 +1,48 @@ +/* + 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").Montage, + Component = require("montage/ui/component").Component, + TreeNode = require("js/components/treeview/tree-node").TreeNode; + +var Branch = exports.Branch = Montage.create(TreeNode, { + hasTemplate:{ + value:true + }, + repetition:{ + value: null + }, + prepareForDraw : { + value: function() { + this.label._element.addEventListener('click', this, false); + + this.treeView.contentController.addBranchController(this.arrayController); + } + }, + draw:{ + value: function () { + + if (this.sourceObject[this.labelKey]) { + this._labelText = this.sourceObject[this.labelKey]; + } else { + console.log("Label key unknown"); + } + + } + }, + handleClick : { + value: function(e) { + e.preventDefault(); + this.toggleExpand(); + + } + }, + collapseClass : { + value: 'collapse' + } + + +}); diff --git a/js/components/treeview/leaf.reel/leaf.css b/js/components/treeview/leaf.reel/leaf.css new file mode 100644 index 00000000..fea5a2c4 --- /dev/null +++ b/js/components/treeview/leaf.reel/leaf.css @@ -0,0 +1,4 @@ +.leaf > .leaf-label { + opacity: 0.8; + cursor: pointer; +} \ No newline at end of file diff --git a/js/components/treeview/leaf.reel/leaf.html b/js/components/treeview/leaf.reel/leaf.html new file mode 100644 index 00000000..991a4323 --- /dev/null +++ b/js/components/treeview/leaf.reel/leaf.html @@ -0,0 +1,38 @@ + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/components/treeview/leaf.reel/leaf.js b/js/components/treeview/leaf.reel/leaf.js new file mode 100644 index 00000000..3a63f5ed --- /dev/null +++ b/js/components/treeview/leaf.reel/leaf.js @@ -0,0 +1,44 @@ +/* +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; + TreeNode = require("js/components/treeview/tree-node").TreeNode; + +exports.Leaf = Montage.create(TreeNode, { + hasTemplate: { + value: true + }, + deserializedFromTemplate : { + value: function() { + //console.log('Leaf deserialized.'); + } + }, + templateDidLoad : { + value: function() { + //debugger; + console.log('Leaf\'s template did load.'); + this.needsDraw = true; + } + }, + prepareForDraw: { + value : function() { + console.log('Leafs prepare for draw.', this.labelKey); + } + }, + draw : { + value : function() { + if(this.sourceObject[this.labelKey]) { + this._labelText = this.sourceObject[this.labelKey]; + } else { + console.log("Label key unknown"); + } + + } + } + + +}); diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css new file mode 100644 index 00000000..698fcd21 --- /dev/null +++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css @@ -0,0 +1,34 @@ +.treeRoot > .branch > ul { + margin-top: 0; +} +.branch ul { + list-style: none; + padding-left: 0; +} +.branch .nj-collapser { + -webkit-transition: height 0.14s cubic-bezier(.44,.19,0,.99); +} +.branch .branchCollapser ul { + width: 100%; +} +.treeRoot .branch .branch-label { + border-bottom: 1px solid #505050; + cursor: pointer; + padding: 3px 0 4px; + background-repeat: no-repeat; + background-position: 3px 2px; + box-shadow: 0 0 0 0 rgba(0,0,0,0); + font-weight: bold; + box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2); +} + +/* First Level */ +.branch .branch .branch-label { + padding-left: 25px; +} + +/* Second Level */ +.branch .branch .branch .branch-label { + padding-left: 45px; + background-position: 25px; +} \ No newline at end of file diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html new file mode 100644 index 00000000..6e239855 --- /dev/null +++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html @@ -0,0 +1,145 @@ + + + + + + + + +
+
+
+
    +
  • +
+
+ +
+ + \ No newline at end of file diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js new file mode 100644 index 00000000..6b9ebb10 --- /dev/null +++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js @@ -0,0 +1,131 @@ +/* + 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").Montage, + Component = require("montage/ui/component").Component, + TreeNode = require("js/components/treeview/tree-node").TreeNode; + +var Branch = exports.Branch = Montage.create(TreeNode, { + hasTemplate:{ + value:true + }, + repetition:{ + value: null + }, + prepareForDraw : { + value: function() { + this.collapser.removeAttribute('id'); + this.label._element.addEventListener('click', this, false); + + if(this.hideLabe