diff options
Diffstat (limited to 'js/stage/binding-view.reel')
6 files changed, 107 insertions, 19 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 aa204be7..e177963f 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 | |||
@@ -40,7 +40,7 @@ | |||
40 | line-height:16px; | 40 | line-height:16px; |
41 | padding:1px 9px; | 41 | padding:1px 9px; |
42 | } | 42 | } |
43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble { | 43 | .hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { |
44 | background: #5e9eff; | 44 | background: #5e9eff; |
45 | display:block; | 45 | display:block; |
46 | } | 46 | } |
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 afa4cd47..38d2a2ec 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 | |||
@@ -35,6 +35,27 @@ | |||
35 | "bindings": { | 35 | "bindings": { |
36 | "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} | 36 | "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"} |
37 | } | 37 | } |
38 | }, | ||
39 | "resizer1": { | ||
40 | "prototype": "js/panels/resize-composer", | ||
41 | "properties": { | ||
42 | "element": {"#": "title"}, | ||
43 | "component": {"@": "owner"} | ||
44 | }, | ||
45 | "listeners": [ | ||
46 | { | ||
47 | "type": "resizeStart", | ||
48 | "listener": {"@": "owner"} | ||
49 | }, | ||
50 | { | ||
51 | "type": "resizeMove", | ||
52 | "listener": {"@": "owner"} | ||
53 | }, | ||
54 | { | ||
55 | "type": "resizeEnd", | ||
56 | "listener": {"@": "owner"} | ||
57 | } | ||
58 | ] | ||
38 | } | 59 | } |
39 | } | 60 | } |
40 | </script> | 61 | </script> |
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 acd072f9..5053d3bb 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 | |||
@@ -44,14 +44,75 @@ exports.BindingHud = Montage.create(Component, { | |||
44 | ] | 44 | ] |
45 | }, | 45 | }, |
46 | 46 | ||
47 | x: { | 47 | _isResizing: { |
48 | value: null | ||
49 | }, | ||
50 | |||
51 | _resizedX : { | ||
52 | value: 0 | ||
53 | }, | ||
54 | |||
55 | _resizedY: { | ||
56 | value: 0 | ||
57 | }, | ||
58 | |||
59 | handleResizeStart: { | ||
60 | value:function(e) { | ||
61 | this.isResizing = true; | ||
62 | this.x = parseInt(this.x); | ||
63 | this.y = parseInt(this.y); | ||
64 | this.needsDraw = true; | ||
65 | } | ||
66 | }, | ||
67 | |||
68 | handleResizeMove: { | ||
69 | value:function(e) { | ||
70 | this._resizedY = e._event.dY; | ||
71 | this._resizedX = e._event.dX; | ||
72 | this.needsDraw = true; | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | handleResizeEnd: { | ||
77 | value: function(e) { | ||
78 | this.x += this._resizedX; | ||
79 | this.y += this._resizedY; | ||
80 | this._resizedX = 0; | ||
81 | this._resizedY = 0; | ||
82 | this.isResizing = false; | ||
83 | this.needsDraw = true; | ||
84 | } | ||
85 | }, | ||
86 | |||
87 | _x: { | ||
48 | value: 20 | 88 | value: 20 |
49 | }, | 89 | }, |
50 | 90 | ||
51 | y: { | 91 | _y: { |
52 | value: 100 | 92 | value: 100 |
53 | }, | 93 | }, |
54 | 94 | ||
95 | x: { | ||
96 | get: function() { | ||
97 | return this._x; | ||
98 | }, | ||
99 | set: function(val) { | ||
100 | this._x = val; | ||
101 | console.log(this._x); | ||
102 | this.needsDraw = true; | ||
103 | } | ||
104 | }, | ||
105 | |||
106 | y: { | ||
107 | get: function() { | ||
108 | return this._y; | ||
109 | }, | ||
110 | set: function(val) { | ||
111 | this._y = val; | ||
112 | this.needsDraw = true; | ||
113 | } | ||
114 | }, | ||
115 | |||
55 | _title: { | 116 | _title: { |
56 | value: "default" | 117 | value: "default" |
57 | }, | 118 | }, |
@@ -81,8 +142,13 @@ exports.BindingHud = Montage.create(Component, { | |||
81 | draw: { | 142 | draw: { |
82 | value: function() { | 143 | value: function() { |
83 | this.titleElement.innerHTML = this.title; | 144 | this.titleElement.innerHTML = this.title; |
84 | this.element.style.top = this.y + "px"; | 145 | |
85 | this.element.style.left = this.x + "px"; | 146 | // if(this.isResizing) { |
147 | // this.timelineSplitter.collapsed = this.height - this._resizedHeight < 46; | ||
148 | // this.panelSplitter.collapsed = this.width - this._resizedWidth < 30; | ||
149 | // } | ||
150 | this.element.style.top = (this.y + this._resizedY) + "px"; | ||
151 | this.element.style.left = (this.x + this._resizedX) + "px"; | ||
86 | console.log("hud",this); | 152 | console.log("hud",this); |
87 | } | 153 | } |
88 | } | 154 | } |
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css index ff4f2510..7f5de0b8 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css | |||
@@ -7,8 +7,7 @@ | |||
7 | .bindingView { | 7 | .bindingView { |
8 | position: absolute; | 8 | position: absolute; |
9 | width:100%; | 9 | width:100%; |
10 | height:100%; | 10 | z-index: 12; |
11 | z-index: 6; | ||
12 | } | 11 | } |
13 | 12 | ||
14 | .hudRepeater { | 13 | .hudRepeater { |
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 90ef2286..4eea3cc4 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html | |||
@@ -37,17 +37,6 @@ | |||
37 | "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"} | 37 | "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"} |
38 | } | 38 | } |
39 | }, | 39 | }, |
40 | "translateComposer": { | ||
41 | "prototype": "montage/ui/composer/translate-composer", | ||
42 | "properties": { | ||
43 | "component": {"@": "owner"} | ||
44 | }, | ||
45 | "bindings": { | ||
46 | "element": {"<-": "@owner._element"}, | ||
47 | "translateX": {"->": "@owner.translateX"}, | ||
48 | "translateY": {"->": "@owner.translateY"} | ||
49 | } | ||
50 | }, | ||
51 | "nonVisualRepeater": { | 40 | "nonVisualRepeater": { |
52 | "prototype": "montage/ui/repetition.reel", | 41 | "prototype": "montage/ui/repetition.reel", |
53 | "properties": { | 42 | "properties": { |
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 900d2b24..b0df6df1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -13,6 +13,10 @@ var Montage = require("montage/core/core").Montage, | |||
13 | 13 | ||
14 | exports.BindingView = Montage.create(Component, { | 14 | exports.BindingView = Montage.create(Component, { |
15 | //private Properties | 15 | //private Properties |
16 | |||
17 | hudRepeater: { | ||
18 | value: null | ||
19 | }, | ||
16 | _selectedComponent: { | 20 | _selectedComponent: { |
17 | value: null | 21 | value: null |
18 | }, | 22 | }, |
@@ -98,7 +102,10 @@ exports.BindingView = Montage.create(Component, { | |||
98 | 102 | ||
99 | //Add the first component which is the selected one to have a hud | 103 | //Add the first component which is the selected one to have a hud |
100 | 104 | ||
101 | this.componentsList[this.selectedComponent.identifier] = {"component": this.selectedComponent, "properties": this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true)}; | 105 | this.componentsList[this.selectedComponent.identifier] = {"component": this.selectedComponent, properties:[] }; |
106 | this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { | ||
107 | this.componentsList[this.selected |