From 7655e32da5bcdf7b205afc1908c9b7bcc661b0d4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Sat, 2 Jun 2012 20:54:30 -0700 Subject: binding canvas Signed-off-by: Armen Kesablyan --- .../binding-hud-option.reel/binding-hud-option.js | 23 +++++++++++++ .../binding-hud.reel/binding-hud.css | 9 +++-- .../binding-hud.reel/binding-hud.html | 3 +- js/stage/binding-view.reel/binding-view.css | 7 ++++ js/stage/binding-view.reel/binding-view.js | 40 ++++++++++++++++++---- js/tools/bindingTool.js | 25 +++++++++++--- 6 files changed, 92 insertions(+), 15 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 58f4175e..07cbff11 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 @@ -14,5 +14,28 @@ var Montage = require("montage/core/core").Montage, exports.BindingHudOption = Montage.create(Component, { title: { value: "value" + }, + _bindings: { + value: [] + }, + + bindings: { + get: function() { + return this._bindings; + }, + set: function(val) { + this._bindings = val; + this.needsDraw = true; + } + }, + + draw: { + value:function() { + if(this.bindings.length > 0) { + this.element.classList.add("bound"); + } else { + this.element.classList.remove("bound"); + } + } } }); \ No newline at end of file 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 626706ed..34f14a5a 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 @@ -28,17 +28,20 @@ .bindingHud .hudRepetition { background: #555; - padding:1px 9px; line-height:16px; border:1px solid #000; box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; - min-width: 65px; + min-width: 80px; } .bindingHud .hudOption { position:relative; border-bottom:1px solid #505050; line-height:16px; + padding:1px 9px; +} +.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { + background-color:#44F; } .bindingHud .hudOption:last-child { @@ -47,7 +50,7 @@ .bindingHud .hudOption .connectorBubble { position: absolute; - right: -20px; + right: -11px; top: 2px; background: #555; border: 1px solid black; 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 1f3b181c..5e37cfc9 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 @@ -32,7 +32,8 @@ "element": {"#" : "hudOption"} }, "bindings": { - "title": {"<-": "@repeater.objectAtCurrentIteration.title"} + "title": {"<-": "@repeater.objectAtCurrentIteration.title"}, + "bindings": {"<-": "@repeater.objectAtCurrentIteration.bindings"} } }, "Title": { diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index 4fa7e10c..41514d7b 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css @@ -8,5 +8,12 @@ position: absolute; width:100%; height:100%; + z-index: 1; +} + +.bindingViewCanvas { + width:100%; + height:100%; + position:absolute; z-index: 2; } \ No newline at end of file diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 90e6a5e3..d17735b2 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -26,6 +26,12 @@ exports.BindingView = Montage.create(Component, { _bindingViewCanvas: { value:null }, + _canvas: { + value:null + }, + _context : { + value: null + }, //Public Objects hudRepeater: { value: null }, @@ -73,7 +79,9 @@ 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.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); } }, @@ -87,8 +95,9 @@ exports.BindingView = Montage.create(Component, { {"title":"Value", "bindings": [ {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} - ]}, - {"title": "Width"} + ] + }, + {"title": "Width", "bindings": []} ], "x": 20, "y": 20 @@ -96,28 +105,47 @@ exports.BindingView = Montage.create(Component, { { "title": "Checkbox1", "properties": [ - {"title":"Group"}, - {"title": "Value"} + {"title":"Group" , "bindings": []}, + {"title":"Value", + "bindings": [ + {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"} + ] + } ], "x": 120, "y": 120 } ]; + this.drawBlueLine(100,100,200,200) + } else { this.bindables = []; } + } }, drawBlueLine: { value: function(fromX,fromY,toX,toY) { + this._context.lineWidth = 4; // Set Line Thickness + this._context.strokeStyle = "#00F" + this._context.beginPath(); // Start Drawing Line + this._context.moveTo(fromX, fromY); + this._context.lineTo(toX, toY); + this._context.stroke(); } }, handleMousedown: { value: function(event) { - debugger; + + } + }, + + handleScroll: { + value: function() { + this.needsDraw = true; } }, diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index a467ed3e..6b541096 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -12,6 +12,18 @@ SelectionTool = require("js/tools/SelectionTool").SelectionTool; exports.BindingTool = Montage.create(ModifierToolBase, { drawingFeedback: { value: { mode: "Draw2D", type: "" } }, + _selectedComponent: { + value: null + }, + + selectedComponent: { + get:function() { + return this._selectedComponent; + }, + set: function(val) { + this._selectedComponent = val; + } + }, Configure: { value: function (doActivate) @@ -32,13 +44,13 @@ exports.BindingTool = Montage.create(ModifierToolBase, { HandleLeftButtonDown: { value: function(event) { NJevent("enableStageMove"); - this.application.ninja.stage.bindingView.handleMouseDown(event); + this.application.ninja.stage.bindingView.handleMousedown(event); } }, HandleMouseMove: { value: function(event) { - this.doDraw(event); + //this.doDraw(event); } }, @@ -56,11 +68,14 @@ exports.BindingTool = Montage.create(ModifierToolBase, { } else { this.doSelection(event); if (this.application.ninja.selectedElements.length !== 0 ) { - this.selectedElement = this.application.ninja.selectedElements[0]; + if(this.application.ninja.selectedElements[0].controller) { + this.selectedComponent = this.application.ninja.selectedElements[0].controller; + } } else { - this.selectedElement = null; + this.selectedComponent = null; } - this.application.ninja.stage.bindingView.selectedElement = this.selectedElement; + this.application.ninja.stage.bindingView.selectedElement = this.selectedComponent; + this.application.ninja.objectsController.currentObject = this.selectedComponent; this._isDrawing = false; } //this.endDraw(event); -- cgit v1.2.3