From 60e9ea67e0f6d0cf167b6d5068e2e01db5f67966 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 14 Jun 2012 15:00:18 -0700 Subject: Binding-Huds draw to component Signed-off-by: Armen Kesablyan --- .../binding-hud-option.reel/binding-hud-option.js | 6 ++++++ .../binding-hud.reel/binding-hud.js | 5 +++-- js/stage/binding-view.reel/binding-view.html | 8 ++++++- js/stage/binding-view.reel/binding-view.js | 25 ++++++++++++++++------ 4 files changed, 35 insertions(+), 9 deletions(-) (limited to 'js/stage') 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 3eda272c..6db86a78 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 @@ -51,6 +51,12 @@ exports.BindingHudOption = Montage.create(Component, { } }, + prepareForDraw: { + value: function() { + // Set Up Listener for click and propagate up to Binding View + } + }, + draw: { value:function() { if(this.bound) { 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 5053d3bb..4260a66c 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 @@ -62,6 +62,7 @@ exports.BindingHud = Montage.create(Component, { this.x = parseInt(this.x); this.y = parseInt(this.y); this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -70,6 +71,7 @@ exports.BindingHud = Montage.create(Component, { this._resizedY = e._event.dY; this._resizedX = e._event.dX; this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -81,6 +83,7 @@ exports.BindingHud = Montage.create(Component, { this._resizedY = 0; this.isResizing = false; this.needsDraw = true; + this.parentComponent.parentComponent.needsDraw = true; } }, @@ -98,7 +101,6 @@ exports.BindingHud = Montage.create(Component, { }, set: function(val) { this._x = val; - console.log(this._x); this.needsDraw = true; } }, @@ -149,7 +151,6 @@ exports.BindingHud = Montage.create(Component, { // } this.element.style.top = (this.y + this._resizedY) + "px"; this.element.style.left = (this.x + this._resizedX) + "px"; - console.log("hud",this); } } }); \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 8abddbee..c7520132 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -35,7 +35,13 @@ }, "bindings": { "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"} - } + }, + "listeners": [ + { + "type": "resizeMove", + "listener": {"@": "owner"} + } + ] }, "nonVisualRepeater": { "prototype": "montage/ui/repetition.reel", diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index b0df6df1..58a4cf06 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -94,6 +94,9 @@ exports.BindingView = Montage.create(Component, { return this._selectedComponent; }, set: function(val) { + if(this._selectedComponent !== val) { + this.bindables = []; + this.clearCanvas(); this._selectedComponent = val; if(this._selectedComponent !== null) { this.application.ninja.objectsController.currentObject = this.selectedComponent; @@ -128,9 +131,17 @@ exports.BindingView = Montage.create(Component, { //Get Properties of Elements in bindings; } - this.needsDraw = true; + this.needsDraw = true; + } } }, + + handleResizeMove: { + value: function(e) { + console.log(e); + } + }, + bindables: { get: function() { return this._bindables; @@ -169,8 +180,8 @@ exports.BindingView = Montage.create(Component, { //Montage Draw Cycle prepareForDraw: { value: function() { - //this._canvas = this.application.ninja.stage.drawingCanvas; - this._context = this._canvas.getContext('2d'); + this._canvas = this.application.ninja.stage.drawingCanvas; + this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); } }, @@ -181,8 +192,9 @@ exports.BindingView = Montage.create(Component, { this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; this.clearCanvas(); - this.drawBlueLine(110,53,210,173); - + for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { + this.drawBlueLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft, this.hudRepeater.childComponents[i].element.offsetTop); + } } else { this.bindables = []; this.clearCanvas(); @@ -200,7 +212,7 @@ exports.BindingView = Montage.create(Component, { drawBlueLine: { value: function(fromX,fromY,toX,toY) { this._context.lineWidth = 4; // Set Line Thickness - this._context.strokeStyle = "#5e9eff" + //this._context.strokeStyle = "#5e9eff"; this._context.beginPath(); // Start Drawing Line this._context.moveTo(fromX, fromY); @@ -211,6 +223,7 @@ exports.BindingView = Montage.create(Component, { clearCanvas: { value: function() { + debugger; this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight); } }, -- cgit v1.2.3