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