diff options
Diffstat (limited to 'js/components/tools-properties')
-rwxr-xr-x | js/components/tools-properties/rect-properties.reel/rect-properties.html | 46 | ||||
-rwxr-xr-x | js/components/tools-properties/rect-properties.reel/rect-properties.js | 79 |
2 files changed, 72 insertions, 53 deletions
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html index 42746caa..a7bf6a7c 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.html +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html | |||
@@ -16,7 +16,17 @@ | |||
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "TLRadiusControl"}, | 17 | "element": {"#": "TLRadiusControl"}, |
18 | "acceptableUnits" : ["px", "pt", "%"] | 18 | "acceptableUnits" : ["px", "pt", "%"] |
19 | } | 19 | }, |
20 | "listeners": [ | ||
21 | { | ||
22 | "type": "change", | ||
23 | "listener": {"@": "owner"} | ||
24 | }, | ||
25 | { | ||
26 | "type": "changing", | ||
27 | "listener": {"@": "owner"} | ||
28 | } | ||
29 | ] | ||
20 | }, | 30 | }, |
21 | 31 | ||
22 | "hottext2": { | 32 | "hottext2": { |
@@ -25,7 +35,13 @@ | |||
25 | "element": {"#": "TRRadiusControl"}, | 35 | "element": {"#": "TRRadiusControl"}, |
26 | "acceptableUnits" : ["px", "pt", "%"], | 36 | "acceptableUnits" : ["px", "pt", "%"], |
27 | "enabled": false | 37 | "enabled": false |
28 | } | 38 | }, |
39 | "listeners": [ | ||
40 | { | ||
41 | "type": "change", | ||
42 | "listener": {"@": "owner"} | ||
43 | } | ||
44 | ] | ||
29 | }, | 45 | }, |
30 | 46 | ||
31 | "hottext3": { | 47 | "hottext3": { |
@@ -34,7 +50,13 @@ | |||
34 | "element": {"#": "BLRadiusControl"}, | 50 | "element": {"#": "BLRadiusControl"}, |
35 | "acceptableUnits" : ["px", "pt", "%"], | 51 | "acceptableUnits" : ["px", "pt", "%"], |
36 | "enabled": false | 52 | "enabled": false |
37 | } | 53 | }, |
54 | "listeners": [ | ||
55 | { | ||
56 | "type": "change", | ||
57 | "listener": {"@": "owner"} | ||
58 | } | ||
59 | ] | ||
38 | }, | 60 | }, |
39 | 61 | ||
40 | "hottext4": { | 62 | "hottext4": { |
@@ -43,7 +65,13 @@ | |||
43 | "element": {"#": "BRRadiusControl"}, | 65 | "element": {"#": "BRRadiusControl"}, |
44 | "acceptableUnits" : ["px", "pt", "%"], | 66 | "acceptableUnits" : ["px", "pt", "%"], |
45 | "enabled": false | 67 | "enabled": false |
46 | } | 68 | }, |
69 | "listeners": [ | ||
70 | { | ||
71 | "type": "change", | ||
72 | "listener": {"@": "owner"} | ||
73 | } | ||
74 | ] | ||
47 | }, | 75 | }, |
48 | 76 | ||
49 | "lockButton": { | 77 | "lockButton": { |
@@ -53,8 +81,14 @@ | |||
53 | "pressed": true, | 81 | "pressed": true, |
54 | "pressedClass": "lockUp", | 82 | "pressedClass": "lockUp", |
55 | "preventFocus": true, | 83 | "preventFocus": true, |
56 | "identifier": "ratio" | 84 | "identifier": "lockButton" |
57 | } | 85 | }, |
86 | "listeners": [ | ||
87 | { | ||
88 | "type": "action", | ||
89 | "listener": {"@": "owner"} | ||
90 | } | ||
91 | ] | ||
58 | }, | 92 | }, |
59 | 93 | ||
60 | "owner": { | 94 | "owner": { |
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js index c1cb3945..2f8ea4dd 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.js +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js | |||
@@ -19,12 +19,6 @@ exports.RectProperties = Montage.create(ToolProperties, { | |||
19 | 19 | ||
20 | _subPrepare: { | 20 | _subPrepare: { |
21 | value: function() { | 21 | value: function() { |
22 | this.lockButton.identifier = "lockButton"; | ||
23 | this.lockButton.addEventListener("action", this, false); | ||
24 | |||
25 | this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); | ||
26 | this._setCap([this.TLRadiusControl,this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); | ||
27 | |||
28 | } | 22 | } |
29 | }, | 23 | }, |
30 | 24 | ||
@@ -33,11 +27,8 @@ exports.RectProperties = Montage.create(ToolProperties, { | |||
33 | this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = !this.lockButton.pressed; | 27 | this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = !this.lockButton.pressed; |
34 | 28 | ||
35 | if(this.lockButton.pressed) { | 29 | if(this.lockButton.pressed) { |
36 | this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); | 30 | this._syncRadii(this.TLRadiusControl.value, this.TLRadiusControl.units); |
37 | } else { | ||
38 | this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); | ||
39 | } | 31 | } |
40 | |||
41 | } | 32 | } |
42 | }, | 33 | }, |
43 | 34 | ||
@@ -80,57 +71,51 @@ exports.RectProperties = Montage.create(ToolProperties, { | |||
80 | get: function() { return this.base._fillMaterial.value; } | 71 | get: function() { return this.base._fillMaterial.value; } |
81 | }, | 72 | }, |
82 | 73 | ||
83 | _setBindings: { | 74 | handleChanging: { |
84 | value: function(els) { | 75 | value: function(event) { |
85 | var that = this; | 76 | if(event.wasSetByCode) { |
86 | els.forEach(function(el) { | 77 | return; |
87 | Object.defineBinding(el, "value", { | 78 | } |
88 | boundObject: that.TLRadiusControl, | ||
89 | boundObjectPropertyPath: "value", | ||
90 | boundValueMutator: function(value) { | ||
91 | if (typeof value === "string") { | ||
92 | return parseFloat(value); | ||
93 | } | ||
94 | |||
95 | return value; | ||
96 | } | ||
97 | }); | ||
98 | |||
99 | Object.defineBinding(el, "units", { | ||
100 | boundObject: that.TLRadiusControl, | ||
101 | boundObjectPropertyPath: "units" | ||
102 | }); | ||
103 | }); | ||
104 | } | ||
105 | }, | ||
106 | 79 | ||
107 | _removeBindings: { | 80 | this._setBorderRadius(event); |
108 | value: function(els) { | ||
109 | els.forEach(function(el) { | ||
110 | Object.deleteBindings(el); | ||
111 | }); | ||
112 | } | 81 | } |
113 | }, | 82 | }, |
114 | 83 | ||
115 | _setCap: { | 84 | handleChange: { |
116 | value: function(els) { | 85 | value: function(event) { |
117 | var that = this; | 86 | if(event.wasSetByCode) { |
118 | els.forEach(function(el) { | 87 | return; |
119 | el.addEventListener("change", that, false); | 88 | } |
120 | }); | 89 | |
90 | this._setBorderRadius(event); | ||
121 | } | 91 | } |
122 | }, | 92 | }, |
123 | 93 | ||
124 | handleChange: { | 94 | _setBorderRadius: { |
125 | value: function(event) { | 95 | value: function(event) { |
126 | var hotTxt = event.currentTarget; | 96 | var hotTxt = event.currentTarget; |
127 | if(hotTxt.units === "%") { | 97 | if(hotTxt.units === "%") { |
128 | if(hotTxt.value > 50) { | 98 | if(hotTxt.value > 50) { |
129 | hotTxt.maxValue = 50; | 99 | hotTxt.maxValue = 50; |
130 | } | 100 | } |
131 | return hotTxt.value; | ||
132 | } | 101 | } |
133 | 102 | ||
103 | if(this.lockButton.pressed && (this.TLRadiusControl === hotTxt)) { | ||
104 | thi |