diff options
-rwxr-xr-x | js/controllers/elements/element-controller.js | 10 | ||||
-rwxr-xr-x | js/mediators/element-mediator.js | 11 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 2 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.html | 7 | ||||
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 662 |
5 files changed, 392 insertions, 300 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 675176e9..db1d5e49 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -148,7 +148,7 @@ exports.ElementController = Montage.create(Component, { | |||
148 | }, | 148 | }, |
149 | 149 | ||
150 | setColor: { | 150 | setColor: { |
151 | value: function(el, color, isFill) { | 151 | value: function(el, color, isFill,borderSide) { |
152 | var mode = color.mode; | 152 | var mode = color.mode; |
153 | 153 | ||
154 | if(isFill) { | 154 | if(isFill) { |
@@ -191,8 +191,12 @@ exports.ElementController = Montage.create(Component, { | |||
191 | } | 191 | } |
192 | break; | 192 | break; |
193 | default: | 193 | default: |
194 | this.setProperty(el, "border-image", "none"); | 194 | if(borderSide){ |
195 | this.setProperty(el, "border-color", color.color.css); | 195 | this.setProperty(el,"border-"+borderSide+"-color",color.color.css); |
196 | }else{ | ||
197 | this.setProperty(el, "border-image", "none"); | ||
198 | this.setProperty(el, "border-color", color.color.css); | ||
199 | } | ||
196 | if(color.borderInfo) { | 200 | if(color.borderInfo) { |
197 | if(color.borderInfo.borderWidth) { | 201 | if(color.borderInfo.borderWidth) { |
198 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); | 202 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); |
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 7d5040ef..6449a625 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js | |||
@@ -315,10 +315,10 @@ exports.ElementMediator = Montage.create(Component, { | |||
315 | @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline | 315 | @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline |
316 | */ | 316 | */ |
317 | setColor: { | 317 | setColor: { |
318 | value: function(els, value, isFill, eventType, source, currentValue) { | 318 | value: function(els, value, isFill, eventType, source, currentValue,borderSide) { |
319 | 319 | ||
320 | if(eventType === "Changing") { | 320 | if(eventType === "Changing") { |
321 | this._setColor(els, value, isFill, eventType, source); | 321 | this._setColor(els, value, isFill, eventType, source,borderSide); |
322 | } else { | 322 | } else { |
323 | // Calculate currentValue if not found for each element | 323 | // Calculate currentValue if not found for each element |
324 | if(!currentValue) { | 324 | if(!currentValue) { |
@@ -337,11 +337,12 @@ exports.ElementMediator = Montage.create(Component, { | |||
337 | _source: { value: "undo-redo"}, | 337 | _source: { value: "undo-redo"}, |
338 | description: { value: "Set Color"}, | 338 | description: { value: "Set Color"}, |
339 | receiver: { value: this}, | 339 | receiver: { value: this}, |
340 | _borderSide: { value: borderSide}, | ||
340 | 341 | ||
341 | execute: { | 342 | execute: { |
342 | value: function(senderObject) { | 343 | value: function(senderObject) { |
343 | if(senderObject) this._source = senderObject; | 344 | if(senderObject) this._source = senderObject; |
344 | this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source); | 345 | this.receiver._setColor(this._els, this._value, this._isFill, this._eventType, this._source,this._borderSide); |
345 | this._source = "undo-redo"; | 346 | this._source = "undo-redo"; |
346 | return ""; | 347 | return ""; |
347 | } | 348 | } |
@@ -363,9 +364,9 @@ exports.ElementMediator = Montage.create(Component, { | |||
363 | }, | 364 | }, |
364 | 365 | ||
365 | _setColor: { | 366 | _setColor: { |
366 | value: function(els, value, isFill, eventType, source) { | 367 | value: function(els, value, isFill, eventType, source,borderSide) { |
367 | for(var i=0, item; item = els[i]; i++) { | 368 | for(var i=0, item; item = els[i]; i++) { |
368 | item.elementModel.controller["setColor"](item, value, isFill); | 369 | item.elementModel.controller["setColor"](item, value, isFill,borderSide); |
369 | } | 370 | } |
370 | 371 | ||
371 | NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null}); | 372 | NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null}); |
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 77db9b64..a96b206f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -625,6 +625,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
625 | newStyle.editorProperty = styleProperty; | 625 | newStyle.editorProperty = styleProperty; |
626 | newEvent.layerEventType = "restoreStyle"; | 626 | newEvent.layerEventType = "restoreStyle"; |
627 | newEvent.trackEditorProperty = styleProperty; | 627 | newEvent.trackEditorProperty = styleProperty; |
628 | newEvent.trackEditorProperty = styleProperty; | ||
628 | } | 629 | } |
629 | newStyle.editorValue = ""; | 630 | newStyle.editorValue = ""; |
630 | newStyle.ruleTweener = false; | 631 | newStyle.ruleTweener = false; |
@@ -744,6 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
744 | this.triggerOutgoingBinding(); | 745 | this.triggerOutgoingBinding(); |
745 | 746 | ||
746 | this.addStyle(); | 747 | this.addStyle(); |
748 | |||
747 | } | 749 | } |
748 | }, | 750 | }, |
749 | handleDeleteStyleClick: { | 751 | handleDeleteStyleClick: { |
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html index 5be159c3..cdc355e7 100644 --- a/js/panels/Timeline/Style.reel/Style.html +++ b/js/panels/Timeline/Style.reel/Style.html | |||
@@ -19,7 +19,8 @@ | |||
19 | "styleProperty" : {"#": "container-property"}, | 19 | "styleProperty" : {"#": "container-property"}, |
20 | "valueEditorHottext" : {"@":"hottextunit"}, | 20 | "valueEditorHottext" : {"@":"hottextunit"}, |
21 | "dtextProperty" : {"@":"dtext1"}, | 21 | "dtextProperty" : {"@":"dtext1"}, |
22 | "myHintable" : {"@" :"hintable"} | 22 | "myHintable" : {"@" :"hintable"}, |
23 | "_fillColorCtrl": {"#": "fillColorCtrl"} | ||
23 | } | 24 | } |
24 | }, | 25 | }, |
25 | "dtext1" : { | 26 | "dtext1" : { |
@@ -78,7 +79,9 @@ | |||
78 | <div data-montage-id="value-editor-hottext"></div> | 79 | <div data-montage-id="value-editor-hottext"></div> |
79 | </div> | 80 | </div> |
80 | <div class="cell-value value-editor editor-color hidden"> | 81 | <div class="cell-value value-editor editor-color hidden"> |
81 | <div data-montage-id="value-editor-color">[ ]</div> | 82 | <div data-montage-id="value-editor-color"> |
83 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> | ||
84 | </div> | ||
82 | </div> | 85 | </div> |
83 | <div class="cell-value value-editor editor-input hidden"> | 86 | <div class="cell-value value-editor editor-input hidden"> |
84 | <!-- <div data-montage-id="value-editor-input"></div> --> | 87 | <!-- <div data-montage-id="value-editor-input"></div> --> |
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index fa848cc0..102e9f25 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -17,6 +17,8 @@ | |||
17 | 17 | ||
18 | var Montage = require("montage/core/core").Montage; | 18 | var Montage = require("montage/core/core").Montage; |
19 | var Component = require("montage/ui/component").Component; | 19 | var Component = require("montage/ui/component").Component; |
20 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator | ||
21 | |||
20 | 22 | ||
21 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | 23 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { |
22 | 24 | ||
@@ -169,7 +171,27 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
169 | this.needsDraw = true; | 171 | this.needsDraw = true; |
170 | } | 172 | } |
171 | }, | 173 | }, |
172 | 174 | ||
175 | addedColorChips: | ||
176 | { value: false }, | ||
177 | |||
178 | _fill: { | ||
179 | enumerable: false, | ||
180 | value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } | ||
181 | }, | ||
182 | |||
183 | fill: { | ||
184 | enumerable: true, | ||
185 | get: function () { | ||
186 | return this._fill; | ||
187 | }, | ||
188 | set: function (value) { | ||
189 | if (value !== this._fill) { | ||
190 | this._fill = value; | ||
191 | } | ||
192 | } | ||
193 | }, | ||
194 | |||
173 | handleMousedown: { | 195 | handleMousedown: { |
174 | value: function(event) { | 196 | value: function(event) { |
175 | this.isActive = true; | 197 | this.isActive = true; |
@@ -196,6 +218,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
196 | } else { | 218 | } else { |
197 | this.element.classList.remove("style-selected"); | 219 | this.element.classList.remove("style-selected"); |
198 | } | 220 | } |
221 | |||
222 | |||
199 | } | 223 | } |
200 | }, | 224 | }, |
201 | didDraw: { | 225 | didDraw: { |
@@ -311,6 +335,38 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { | |||
311 | this.editorInputContainer.classList.add("hidden"); | 335 | this.editorInputContainer.classList.add("hidden"); |
312 | this.editorColorContainer.classList.remove("hidden"); | 336 | this.editorColorContainer.classList.remove("hidden"); |
313 | this.editorHottextContainer.classList.add("hidden"); | 337 | this.editorHottextContainer.classList.add("hidden"); |
338 | |||
339 | if(tweenable.colorType === "fill"){ | ||
340 | this._isFill = true; | ||
341 | }else{ | ||
342 | if(tweenable.colorType === "stroke"){ | ||
343 | this._isFill = false; | ||
344 | this._borderSide = tweenable.strokePosition | ||
345 | } | ||
346 | |||
347 | } | ||
348 | |||
349 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
350 | // setup fill color | ||
351 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
352 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
353 | |||
354 | // setup stroke color | ||
355 | // this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
356 | // this.appl |