From 67a47e519fcf5d6ebd701aee09efd5e32c0aa208 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 26 Jun 2012 15:15:59 -0700 Subject: Binding Hud Not rendering at correct x and y Signed-off-by: Armen Kesablyan --- .../binding-view.reel/binding-hud.reel/binding-hud.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 9918b06d..85e4b87b 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -73,12 +73,7 @@ exports.BindingHud = Montage.create(Component, { this.title = icon.name; this.x = iconOffsets.x; this.y = iconOffsets.y - 80; - } else { - this.title = val.identifier; - this.x = val.element.offsetLeft; - this.y = val.element.offsetTop; } - this.needsDraw = true; } @@ -202,6 +197,12 @@ exports.BindingHud = Montage.create(Component, { this.scrollUp.style.display = "block"; this.scrollDown.style.display = "block"; } + var isOffStage = this.application.ninja.objectsController.isOffStageObject(this.userComponent); + if(!isOffStage) { + this.title = this.userComponent.identifier; + this.x = this.userComponent.element.offsetLeft; + this.y = this.userComponent.element.offsetTop; + } } }, @@ -289,6 +290,12 @@ exports.BindingHud = Montage.create(Component, { } }, + willDraw: { + value: function() { + + } + }, + draw: { value: function() { this.titleElement.innerHTML = this.title; -- cgit v1.2.3 From ec6759f9821a5647905617e3992fdda1cea390ef Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 26 Jun 2012 17:17:43 -0700 Subject: Binding View - Hide in Live Preview Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.js | 2 ++ js/stage/binding-view.reel/binding-view.js | 8 +------- js/tools/bindingTool.js | 2 ++ 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index f1825b9a..0b7748e5 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -519,10 +519,12 @@ exports.Ninja = Montage.create(Component, { // background = "#000000"; // overflow = "hidden"; transitionStopRule = "nj-css-garbage-selector"; + this.stage.bindingView.hide = true; } else { // background = "#808080"; // overflow = "visible"; transitionStopRule = "*" + this.stage.bindingView.hide = false; } // TODO: Remove marker for old template: NINJA-STAGE-REWORK diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 1fc4d583..94c84d02 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -198,7 +198,7 @@ exports.BindingView = Montage.create(Component, { } }, - _hide : { value: null }, + _hide : { value: true }, hide : { get : function() { return this._hide; }, set : function(value) { @@ -247,12 +247,6 @@ exports.BindingView = Montage.create(Component, { } }, - didDraw: { - value: function() { - - } - }, - drawLine: { value: function(fromX,fromY,toX,toY, color, width) { if(width === null) width = 1; diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 1e1c9e5b..3f8e960f 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -33,6 +33,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { { NJevent("enableStageMove"); this.application.ninja.workspaceMode = "binding"; + this.application.ninja.stage.bindingView.hide = false; if (this.application.ninja.selectedElements.length !== 0 ) { if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") { this.selectedComponent = this.application.ninja.selectedElements[0].controller; @@ -47,6 +48,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { NJevent("disableStageMove"); this.application.ninja.workspaceMode = "default"; this.selectedComponent = null; + this.application.ninja.stage.bindingView.hide = true; } } -- cgit v1.2.3 From 8cd463b321d082770a4300756b6664bb7a519c93 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 27 Jun 2012 10:30:12 -0700 Subject: Binding HUD - Show promoted PI properties at top of list --- js/controllers/objects-controller.js | 4 +- .../binding-hud.reel/binding-hud.js | 46 +++++++++++++++++++--- js/stage/binding-view.reel/binding-view.html | 6 ++- 3 files changed, 47 insertions(+), 9 deletions(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 6557c14e..f6d400f4 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -150,9 +150,9 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, { var properties = []; for(var key in object) { - if(object.hasOwnProperty(key)) { + //if(object.hasOwnProperty(key)) { properties.push(key); - } + //} } if(excludeUnderscoreProperties) { diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 9918b06d..0f1b99c9 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -45,7 +45,10 @@ exports.BindingHud = Montage.create(Component, { optionsRepeater: { value: null }, - + panelData : { + value: null, + serializable: true + }, _userComponent: { value: null }, userComponent: { get: function() { @@ -59,7 +62,7 @@ exports.BindingHud = Montage.create(Component, { isOffStage, icon, iconOffsets; this._userComponent = val; - this.properties = controller.getPropertiesFromObject(val, true); + this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true); controller.getObjectBindings(this.userComponent).forEach(function(obj) { this.boundProperties.push(obj.sourceObjectPropertyPath); @@ -84,6 +87,37 @@ exports.BindingHud = Montage.create(Component, { } }, + getPropertyList : { + value: function(component) { + var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); + + var objectName, promotedProperties; + + if(this.userComponent._montage_metadata) { + objectName = this.userComponent._montage_metadata.objectName; + + if(this.panelData && this.panelData[objectName + 'Pi']) { + + promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) { + return item[0].prop; + }); + + //// Remove promoted properties from current position in array + props = props.filter(function(prop) { + return promotedProperties.indexOf(prop) === -1; + }); + + //// Add them at the top + + props = promotedProperties.concat(props); + + } + } + + return props; + } + }, + properties: { value: [] }, _isResizing: { @@ -248,11 +282,11 @@ exports.BindingHud = Montage.create(Component, { if(direction === "down") { this.scrollInterval = setInterval(function() { this.optionsRepeater.element.scrollTop += 3; - }.bind(this), 50); + }.bind(this), 20); } else { this.scrollInterval = setInterval(function() { this.optionsRepeater.element.scrollTop -= 3; - }.bind(this), 50); + }.bind(this), 20); } } } @@ -267,11 +301,11 @@ exports.BindingHud = Montage.create(Component, { //e._event.target.parentElement.controller.currentScrollDirection = "down"; this.scrollInterval = setInterval(function() { self.optionsRepeater.element.scrollTop += 3; - }, 50); + }, 20); } else { this.scrollInterval = setInterval(function() { self.optionsRepeater.element.scrollTop -= 3; - }, 50); + }, 20); } } } diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 9eb338d8..b6c5ff40 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -37,7 +37,8 @@ "hud": { "prototype": "js/stage/binding-view.reel/binding-hud.reel", "properties": { - "element": {"#" : "hud"} + "element": {"#" : "hud"}, + "panelData": {"@": "panelData"} }, "bindings": { "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"} @@ -48,6 +49,9 @@ "listener": {"@": "owner"} } ] + }, + "panelData": { + "object": "js/data/pi/pi-data[PiData]" } } -- cgit v1.2.3 From 230a1a2f2848c27edf7d01f8d3a5585c8d0d4ac9 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 27 Jun 2012 15:29:23 -0700 Subject: Binding HUD - CSS Update --- .../binding-hud.reel/binding-hud.css | 24 ++++++++++------------ 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index 680f9183..5818eca8 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css @@ -6,14 +6,12 @@ .bindingHud { position: absolute; - background: rgba(0, 0, 0, 0.85); - /*padding: 0px;*/ + background: rgba(24, 24, 24, 0.85); color: #C4C4C4; font-size: 11px; - box-shadow: inset 0px 0px 0px 0px #CCC; + box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); border-radius: 6px; - padding: 3px 1px 1px; - border:1px solid #000; + padding: 3px 8px; text-shadow: 1px 1px 0px #000; } @@ -58,35 +56,35 @@ .bindingHud .hudOption .connectorBubble { position: absolute; - right: 5px; + right: 2px; top: 3px; border-radius: 50%; width: 10px; height: 10px; border-left: 0px; display: block; - background-color: #313131; - box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242; + background-color: #353535; + box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666; } .splitter.scrollArea { background-color: transparent; - background-size: 12%; + background-size: 10%; background-position-y: 2px; display: none; height:11px; text-align: center; } .splitter.scrollAreaTop { - border-top: 1px solid #353535; - box-shadow: 0 -1px 0 0 #141414; + border-bottom: 1px solid #141414; + box-shadow: 0 1px 0 0 #525252; } .splitter.scrollAreaBottom { -webkit-transform: rotate(180deg); border-top-left-radius: 6px; border-top-right-radius: 6px; - border-bottom: 1px solid #353535; + border-bottom: 1px solid #525252; box-shadow: 0 1px 0 0 #141414; margin-top: 4px; } @@ -95,7 +93,7 @@ opacity: 0.5; } .splitter.scrollArea:hover:not(.disabled) { - background-color: #252525; + background-color: #303030; } -- cgit v1.2.3 From e1f83a2c603bf9ddb74889f7ba5b697bb474edaa Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 28 Jun 2012 11:00:18 -0700 Subject: Binding HUD - Updated CSS for hud and promoted/bound properties. --- .../binding-hud-option.reel/binding-hud-option.js | 30 ++++++++++++++++++++-- .../binding-hud.reel/binding-hud.css | 16 +++++++++--- .../binding-hud.reel/binding-hud.html | 3 ++- .../binding-hud.reel/binding-hud.js | 16 +++++++++--- 4 files changed, 55 insertions(+), 10 deletions(-) diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js index fb0fd57e..a7fbb297 100755 --- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js +++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js @@ -26,8 +26,28 @@ exports.BindingHudOption = Montage.create(Component, { } }, - bound: { - value: false + _promoted : { value: null }, + promoted : { + get : function() { return this._promoted; }, + set : function(value) { + if(value === this._promoted) { return; } + + this._promoted = value; + + this.needsDraw = true; + } + }, + + _bound : { value: null }, + bound : { + get : function() { return this._bound; }, + set : function(value) { + if(value === this._bound) { return; } + + this._bound = value; + + this.needsDraw = true; + } }, prepareForDraw: { @@ -47,6 +67,12 @@ exports.BindingHudOption = Montage.create(Component, { } else { this.element.classList.remove("bound"); } + + if(this.promoted || this.bound) { + this.element.classList.add("promoted"); + } else { + this.element.classList.remove("promoted"); + } // if(this.bindings.length > 0) { // this.element.classList.add("bound"); // } else { diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index 5818eca8..1536c706 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css @@ -11,7 +11,7 @@ font-size: 11px; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); border-radius: 6px; - padding: 3px 8px; + padding: 3px; text-shadow: 1px 1px 0px #000; } @@ -29,6 +29,8 @@ /*background: rgba(0, 0, 0, 0.3);*/ line-height:16px; /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/ + padding-top: 4px; + margin: 0 5px; min-width: 80px; } @@ -38,7 +40,10 @@ line-height:16px; padding:1px 25px 1px 8px; } - +.bindingHud .hudOption.promoted { + color: #FFF; + font-weight: bold; +} .bindingHud .hudOption .connectorBubble:hover { background-color: #1B52A7; box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747; @@ -94,8 +99,13 @@ } .splitter.scrollArea:hover:not(.disabled) { background-color: #303030; + border-bottom: 1px solid #252525; + box-shadow: 0 1px 0 0 #3F3F3F; +} +.splitter.scrollAreaBottom:hover:not(.disabled) { + border-bottom: 1px solid #3F3F3F; + box-shadow: 0 1px 0 0 #252525; } - .hudRepetition { overflow: hidden; diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 7bb888d5..f7e1a1d2 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html @@ -36,7 +36,8 @@ "element": {"#" : "hudOption"} }, "bindings": { - "title": {"<-": "@repeater.objectAtCurrentIteration"} + "title": {"<-": "@repeater.objectAtCurrentIteration.property"}, + "promoted": {"<-": "@repeater.objectAtCurrentIteration.promoted"} } }, "resizer1": { diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 0f1b99c9..a62fe78d 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -89,9 +89,17 @@ exports.BindingHud = Montage.create(Component, { getPropertyList : { value: function(component) { - var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); - - var objectName, promotedProperties; + var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true), + promotedProperties = [], + objectName; + + ///// Mapper - property to property object + function propertyMapper(property) { + return { + property: property, + promoted: promotedProperties.indexOf(property) !== -1 + } + } if(this.userComponent._montage_metadata) { objectName = this.userComponent._montage_metadata.objectName; @@ -114,7 +122,7 @@ exports.BindingHud = Montage.create(Component, { } } - return props; + return props.map(propertyMapper); } }, -- cgit v1.2.3 From e25474df5116a7e336933a1d1d17ff11a0ef9786 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 28 Jun 2012 11:17:28 -0700 Subject: Fixing the button for the shape pi Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.css | 12 ++++++++---- js/panels/properties.reel/sections/custom.reel/custom.js | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index d1aa750a..ce5145d0 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -314,11 +314,13 @@ input label { width:45px; } -.propertiesPanel div.montage-button:disabled { +/*.propertiesPanel div.montage-button:disabled {*/ +.propertiesPanel div[type=button]:disabled { opacity: 0.4; } -.propertiesPanel div.montage-button { +/*.propertiesPanel div.montage-button {*/ +.propertiesPanel div[type=button] { font-size: 9px; cursor: pointer; display: block; @@ -336,10 +338,12 @@ input label { height: 14px; } -.propertiesPanel div.montage-button:active { +/*.propertiesPanel div.montage-button:active {*/ +.propertiesPanel div[type=button]:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); } -.propertiesPanel div.montage-button:hover { +/*.propertiesPanel div.montage-button:hover {*/ +.propertiesPanel div[type=button]:hover { -webkit-box-shadow: 0px 0px 3px #b4b4b4; } \ No newline at end of file diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 9c31cf45..84e89334 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -20,7 +20,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox; var TextField = require("js/components/textfield.reel").TextField; var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox; var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; -var Button = require("montage/ui/button.reel").Button; +var Button = require("montage/ui/native/button.reel").Button; exports.CustomSection = Montage.create(Component, { -- cgit v1.2.3 From 12b8f40d5593d55e1fe64e4bef2ac3bc6709f6ff Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 28 Jun 2012 11:24:41 -0700 Subject: removing some comments Signed-off-by: Valerio Virgillito --- js/panels/properties.reel/properties.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index ce5145d0..786eb57a 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css @@ -314,12 +314,10 @@ input label { width:45px; } -/*.propertiesPanel div.montage-button:disabled {*/ .propertiesPanel div[type=button]:disabled { opacity: 0.4; } -/*.propertiesPanel div.montage-button {*/ .propertiesPanel div[type=button] { font-size: 9px; cursor: pointer; @@ -338,12 +336,10 @@ input label { height: 14px; } -/*.propertiesPanel div.montage-button:active {*/ .propertiesPanel div[type=button]:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); } -/*.propertiesPanel div.montage-button:hover {*/ .propertiesPanel div[type=button]:hover { -webkit-box-shadow: 0px 0px 3px #b4b4b4; } \ No newline at end of file -- cgit v1.2.3 From 9add37d85a9d90541daae8ad5316388c4d9a9da4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 28 Jun 2012 13:21:11 -0700 Subject: Binding View - Bug fix After save corrupts doom and breaks binding view Signed-off-by: Armen Kesablyan --- .../binding-hud.reel/binding-hud.js | 70 ++++++++++------------ js/stage/binding-view.reel/binding-view.html | 2 +- js/stage/binding-view.reel/binding-view.js | 26 ++++---- js/tools/bindingTool.js | 18 +++--- 4 files changed, 55 insertions(+), 61 deletions(-) diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 6b802cb0..58cf197f 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -10,6 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.BindingHud = Montage.create(Component, { scrollUp: { @@ -49,10 +50,10 @@ exports.BindingHud = Montage.create(Component, { value: null, serializable: true }, - _userComponent: { value: null }, - userComponent: { + _userElement: { value: null }, + userElement: { get: function() { - return this._userComponent; + return this._userElement; }, set: function(val) { if(!val) { return; } @@ -61,14 +62,14 @@ exports.BindingHud = Montage.create(Component, { bindingView = this.parentComponent.parentComponent, isOffStage, icon, iconOffsets; - this._userComponent = val; - this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true); + this._userElement = val; + this.properties = this.getPropertyList(val.controller); //controller.getPropertiesFromObject(val, true); - controller.getObjectBindings(this.userComponent).forEach(function(obj) { + controller.getObjectBindings(this._userElement.controller).forEach(function(obj) { this.boundProperties.push(obj.sourceObjectPropertyPath); }, this); - isOffStage = controller.isOffStageObject(val); + isOffStage = controller.isOffStageObject(val.controller); if(isOffStage) { icon = bindingView.getOffStageIcon(val); @@ -76,9 +77,14 @@ exports.BindingHud = Montage.create(Component, { this.title = icon.name; this.x = iconOffsets.x; this.y = iconOffsets.y - 80; + } else { + this.title = this._userElement.controller.identifier; + this.x = this._userElement.offsetLeft; + this.y = this._userElement.offsetTop; +// this.x = parseInt(ElementsMediator.getProperty(val, "left")); +// this.y = parseInt(ElementsMediator.getProperty(val, "top")); } this.needsDraw = true; - } }, @@ -88,8 +94,8 @@ exports.BindingHud = Montage.create(Component, { var objectName, promotedProperties; - if(this.userComponent._montage_metadata) { - objectName = this.userComponent._montage_metadata.objectName; + if(this.userElement.controller._montage_metadata) { + objectName = this.userElement.controller._montage_metadata.objectName; if(this.panelData && this.panelData[objectName + 'Pi']) { @@ -231,12 +237,6 @@ exports.BindingHud = Montage.create(Component, { this.scrollUp.style.display = "block"; this.scrollDown.style.display = "block"; } - var isOffStage = this.application.ninja.objectsController.isOffStageObject(this.userComponent); - if(!isOffStage) { - this.title = this.userComponent.identifier; - this.x = this.userComponent.element.offsetLeft; - this.y = this.userComponent.element.offsetTop; - } } }, @@ -295,22 +295,17 @@ exports.BindingHud = Montage.create(Component, { handleMouseover: { value: function(e) { + if(this.scrollSpace < this.properties.length) { if (this.scrollInterval === null) { if (e._event.target.classList.contains("scrollAreaBottom")) { - self = e._event.target.parentElement.controller; - //e._event.target.parentElement.controller.currentScrollDirection = "down"; - this.scrollInterval = setInterval(function() { - self.optionsRepeater.element.scrollTop += 3; - }, 20); + this.currentScrollDirection = "down"; } else { - this.scrollInterval = setInterval(function() { - self.optionsRepeater.element.scrollTop -= 3; - }, 20); + this.currentScrollDirection = "up"; } } } - //this.needsDraw = true; + this.needsDraw = true; } }, @@ -324,25 +319,24 @@ exports.BindingHud = Montage.create(Component, { } }, - willDraw: { + draw: { value: function() { - } - }, + if(this.currentScrollDirection !== null) { + this.scrollInterval = setInterval(function() { + if(this.currentScrollDirection === "down") { + this.optionsRepeater.element.scrollTop += 3; + } else { + this.optionsRepeater.element.scrollTop -= 3; + } + }.bind(this), 20); + } else { + clearInterval(this.scrollInterval); + } - draw: { - value: function() { this.titleElement.innerHTML = this.title; this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; - -// if(this.currentScrollDirection !== null) { -// if(this.currentScrollDirection === "up") { -// this.optionsRepeater.element.scrollTop -= 18; -// } else { -// this.optionsRepeater.element.scrollTop += 18; -// } -// } } }, didDraw: { diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index b6c5ff40..c8da1e7e 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -41,7 +41,7 @@ "panelData": {"@": "panelData"} }, "bindings": { - "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"} + "userElement": {"<-": "@hudRepeater.objectAtCurrentIteration"} }, "listeners": [ { diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 94c84d02..ee44758c 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -97,20 +97,20 @@ exports.BindingView = Montage.create(Component, { } }, - _selectedComponent: { value: null }, - selectedComponent: { + _selectedElement: { value: null }, + selectedElement: { get: function() { - return this._selectedComponent; + return this._selectedElement; }, set: function(val) { this.boundComponents = []; - if(this._selectedComponent !== val) { + if(this._selectedElement !== val) { this.clearCanvas(); - this._selectedComponent = val; - if(this._selectedComponent !== null) { - this.application.ninja.objectsController.currentObject = this.selectedComponent; - if (this.selectedComponent !== null) { - this.boundComponents.push(this.selectedComponent); + this._selectedElement = val; + if(this._selectedElement !== null) { + this.application.ninja.objectsController.currentObject = this._selectedElement.controller; + if (this._selectedElement !== null) { + this.boundComponents.push(this._selectedElement); } } this.needsDraw = true; @@ -219,12 +219,12 @@ exports.BindingView = Montage.create(Component, { this.element.style.removeProperty('display'); this.element.style.width = this.width + "px"; this.element.style.height = this.height + "px"; - if(this.selectedComponent !== null && typeof(this.selectedComponent) !== "undefined") { + if(this._selectedElement !== null && typeof(this._selectedElement) !== "undefined") { this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; this.clearCanvas(); for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { - this.drawLine(this.hudRepeater.objects[i].element.offsetLeft,this.hudRepeater.objects[i].element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3, "#CCC", 2); + this.drawLine(this.hudRepeater.objects[i].offsetLeft,this.hudRepeater.objects[i].offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +1, this.hudRepeater.childComponents[i].element.offsetTop +1, "#CCC", 2); } if(this._isDrawingConnection) { if (this.hudRepeater.childComponents.length > 1) { @@ -341,7 +341,7 @@ exports.BindingView = Montage.create(Component, { if(this._isDrawingConnection && !overHud) { //NOTE : Continue This content. mouse over select var obj = this.application.ninja.stage.getElement(event, true); - if (obj && obj.controller !== this.selectedComponent) + if (obj && obj !== this.selectedElement) { if (!obj.controller || obj === null) { @@ -363,7 +363,7 @@ exports.BindingView = Montage.create(Component, { } this._targetedElement = obj; this._targetedElement.classList.add("active-element-outline"); - this.boundComponents.push(this._targetedElement.controller); + this.boundComponents.push(this._targetedElement); } } } diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 3f8e960f..3704a451 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -12,17 +12,17 @@ SelectionTool = require("js/tools/SelectionTool").SelectionTool; exports.BindingTool = Montage.create(ModifierToolBase, { drawingFeedback: { value: { mode: "Draw2D", type: "" } }, - _selectedComponent: { + _selectedElement: { value: null }, - selectedComponent: { + selectedElement: { get:function() { - return this._selectedComponent; + return this._selectedElement; }, set: function(val) { - this._selectedComponent = val; - this.application.ninja.stage.bindingView.selectedComponent = val; + this._selectedElement = val; + this.application.ninja.stage.bindingView.selectedElement = val; } }, @@ -36,7 +36,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, { this.application.ninja.stage.bindingView.hide = false; if (this.application.ninja.selectedElements.length !== 0 ) { if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") { - this.selectedComponent = this.application.ninja.selectedElements[0].controller; + this.selectedElement = this.application.ninja.selectedElements[0]; } else { this.selectedComponent = null; } @@ -87,12 +87,12 @@ exports.BindingTool = Montage.create(ModifierToolBase, { this.doSelection(event); if (this.application.ninja.selectedElements.length !== 0 ) { if(this.application.ninja.selectedElements[0].controller) { - this.selectedComponent = this.application.ninja.selectedElements[0].controller; + this.selectedElement = this.application.ninja.selectedElements[0]; } else { - this.selectedComponent = null; + this.selectedElement = null; } } else { - this.selectedComponent = null; + this.selectedElement = null; } this._isDrawing = false; } -- cgit v1.2.3 From cd563af62e937f49406caca55549cd72b13ee228 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 28 Jun 2012 15:48:31 -0700 Subject: Binding View - Multi document bug : cleared object bindings when current document is changed Signed-off-by: Armen Kesablyan --- js/controllers/objects-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index f6d400f4..6ca869ba 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -27,7 +27,7 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, { setTimeout(function() { this.bindToModelObjects(); }.bind(this), 1000); - + this.currentObjectBindings = []; this._currentDocument = doc; }, enumerable : false -- cgit v1.2.3 From c5204cc96a08413d48bd8148034189b6f710ade9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 28 Jun 2012 16:24:24 -0700 Subject: Changing the livePreview button to do a chromePreview and keeping the canvas when doing a timeline play Signed-off-by: Valerio Virgillito --- js/components/layout/stage-mode.reel/stage-mode.js | 12 ++++++------ js/ninja.reel/ninja.html | 2 +- js/ninja.reel/ninja.js | 14 ++------------ 3 files changed, 9 insertions(+), 19 deletions(-) diff --git a/js/components/layout/stage-mode.reel/stage-mode.js b/js/components/layout/stage-mode.reel/stage-mode.js index cb42276b..b772d688 100755 --- a/js/components/layout/stage-mode.reel/stage-mode.js +++ b/js/components/layout/stage-mode.reel/stage-mode.js @@ -9,17 +9,17 @@ var Montage = require("montage/core/core").Montage, exports.StageMode = Montage.create(Component, { - _livePreview: { + _chromePreview: { value: null }, - livePreview: { + chromePreview: { get: function() { - return this._livePreview; + return this._chromePreview; }, set: function(value) { - if(value !== this._livePreview) { - this._livePreview = value; + if(value !== this._chromePreview) { + this._chromePreview = value; this.needsDraw = true; } } @@ -46,7 +46,7 @@ exports.StageMode = Montage.create(Component, { handleClick: { value: function(event) { - this.livePreview = !this.livePreview; + this.chromePreview = !this.chromePreview; } } }); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 5429e7d0..1ebf8413 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -163,7 +163,7 @@ "element": {"#": "stageMode"} }, "bindings" : { - "livePreview": {"<->": "@appModel.livePreview"} + "chromePreview": {"<->": "@appModel.chromePreview"} } }, diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 859268a0..e325316b 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -511,25 +511,15 @@ exports.Ninja = Montage.create(Component, { executeLivePreview: { value: function() { - var background, overflow, transitionStopRule; - this.stage.hideCanvas(this.appModel.livePreview); + var transitionStopRule; +// this.stage.hideCanvas(this.appModel.livePreview); - // TODO: Remove marker for old template: NINJA-STAGE-REWORK if(this.appModel.livePreview) { -// background = "#000000"; -// overflow = "hidden"; transitionStopRule = "nj-css-garbage-selector"; } else { -// background = "#808080"; -// overflow = "visible"; transitionStopRule = "*" } - // TODO: Remove marker for old template: NINJA-STAGE-REWORK -// this.currentDocument.model.documentRoot.elementModel.controller.setProperty(this.currentDocument.model.documentRoot, "body-background", background); -// this.currentDocument.model.documentRoot.elementModel.controller.setProperty(this.currentDocument.model.documentRoot, "overflow", overflow); -// this.currentDocument.model.documentRoot.elementModel.controller.changeSelector(this.currentDocument.model.documentRoot, "transitionStopRule", transitionStopRule); - this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = transitionStopRule; this._toggleWebGlAnimation(this.appModel.livePreview); -- cgit v1.2.3 From d6c7aa97651c259612636df6ae9063229a56d48f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 28 Jun 2012 16:52:01 -0700 Subject: Presets/CSS Panel - Update css panel with preset class. --- js/controllers/presets-controller.js | 20 ++++++++++++++++++++ js/panels/CSSPanel/css-shorthand-map.js | 11 ++++++++++- js/panels/css-panel/styles-view-delegate.js | 22 +++++++++++++++++----- 3 files changed, 47 insertions(+), 6 deletions(-) diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 4c177189..65a56a74 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -53,6 +53,8 @@ exports.PresetsController = Montage.create(Component, { //// TODO: replace this hack when webkit supports transitionStart event (see above) window.clearTimeout(el.njTimeout); + this._dispatchChange(); + el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } @@ -107,6 +109,10 @@ exports.PresetsController = Montage.create(Component, { } }, this); + if(!useTransition) { + this._dispatchChange(); + } + } }, @@ -126,5 +132,19 @@ exports.PresetsController = Montage.create(Component, { return keysString; } + }, + + _dispatchChange : { + value: function(property, value) { + this.application.ninja.stage.updatedStage = true; + NJevent('elementChange', { + type : 'presetChange', + data: { + "prop": property, + "value": value + }, + redraw: null + }); + } } }); \ No newline at end of file diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js index d469e2a1..e38627f7 100755 --- a/js/panels/CSSPanel/css-shorthand-map.js +++ b/js/panels/CSSPanel/css-shorthand-map.js @@ -68,7 +68,15 @@ exports.CSS_SHORTHAND_MAP = { 'padding-left' : ['padding'], 'padding-right' : ['padding'], 'padding-top' : ['padding'], - + + '-webkit-animation-name' : ['-webkit-animation'], + '-webkit-animation-duration' : ['-webkit-animation'], + '-webkit-animation-timing-function' : ['-webkit-animation'], + '-webkit-animation-delay' : ['-webkit-animation'], + '-webkit-animation-iteration-count' : ['-webkit-animation'], + '-webkit-animation-direction' : ['-webkit-animation'], + '-webkit-animation-fill-mode' : ['-webkit-animation'], + '-webkit-transition-property' : ['-webkit-transition'], '-webkit-transition-duration' : ['-webkit-transition'], '-webkit-transition-timing-function' : ['-webkit-transition'], @@ -91,6 +99,7 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = { 'list' : ["list-style-type", "list-style-image", "list-style-position"], 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], + '-webkit-animation': ["webkit-animation-name", "webkit-animation-duration", "webkit-animation-timing-function", "webkit-animation-delay", "webkit-animation-iteration-count", "webkit-animation-direction", "webkit-animation-fill-mode"], '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", "-webkit-transition-timing-function", "-webkit-transition-delay"] }; \ No newline at end of file diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index a7c1f0d9..4f41ff12 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -171,7 +171,8 @@ exports.StylesViewDelegate = Montage.create(Component, { }, handlePropertyChange : { value: function(rule, property, value, oldProperty, style) { - var browserValue; + var declaration = style.parentComponent.parentComponent, + browserValue; if(style.editingNewStyle) { if(property === '') { @@ -187,14 +188,17 @@ exports.StylesViewDelegate = Montage.create(Component, { if(property === '') { style.deleting = true; - style.parentComponent.parentComponent.removeStyle(style.source); - this._dispatchChange(oldProperty, browserValue); + declaration.removeStyle(style.source); + this._dispatchChange(oldProperty); return false; } // now add new property browserValue = this.stylesController.setStyle(rule, property, value); + //// Update the css text so it knows when to update + declaration.cssText = rule.style.cssText; + ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); @@ -203,13 +207,18 @@ exports.StylesViewDelegate = Montage.create(Component, { }, handleValueChange : { value: function(rule, property, value, style) { - var browserValue, units; + var declaration = style.parentComponent.parentComponent, + browserValue, units; if(value === '') { ///// Remove old property style.deleting = true; this.stylesController.deleteStyle(rule, property); - style.parentComponent.parentComponent.removeStyle(style.source); + declaration.removeStyle(style.source); + + //// Update the css text so it knows when to update + declaration.cssText = rule.style.cssText; + this._dispatchChange(property, browserValue); return false; } @@ -218,6 +227,9 @@ exports.StylesViewDelegate = Montage.create(Component, { browserValue = this.stylesController.setStyle(rule, property, value); style.browserValue = browserValue; + //// Update the css text so it knows when to update + declaration.cssText = rule.style.cssText; + ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); -- cgit v1.2.3