aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js2
-rw-r--r--js/panels/Timeline/Style.reel/Style.html7
-rw-r--r--js/panels/Timeline/Style.reel/Style.js662
3 files changed, 379 insertions, 292 deletions
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">[&nbsp;]</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
18var Montage = require("montage/core/core").Montage; 18var Montage = require("montage/core/core").Montage;
19var Component = require("montage/ui/component").Component; 19var Component = require("montage/ui/component").Component;
20var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
21
20 22
21var LayerStyle = exports.LayerStyle = Montage.create(Component, { 23var 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.application.ninja.colorController.addButton("chip", this._strokeColorCtrl);
357
358 this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
359
360 this.addedColorChips = true;
361 }
362
363 if (this.addedColorChips) {
364 this._fillColorCtrl.color(this._fill.colorMode, this._fill.color);
365 // this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color);
366 }
367
368
369
314 // TODO: set up color chip here. 370 // TODO: set up color chip here.
315 } else if (tweenable.tweener === "input"){ 371 } else if (tweenable.tweener === "input"){
316 this.editorInputContainer.classList.remove("hidden"); 372 this.editorInputContainer.classList.remove("hidden");
@@ -327,295 +383,321 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
327 /* === END: Controllers === */ 383 /* === END: Controllers === */
328 384
329 _myTweenables: { 385 _myTweenables: {
330 value: [ 386 value: [
331 { 387 {
332 "property" : "background-color", 388 "property" : "background-color",
333 "tweener" : "color", 389 "tweener" : "color",
334 "units" : "", 390 "units" : "",
335 "min" : "", 391 "min" : "",
336 "max" : "", 392 "max" : "",
337 "default" :"#FFFFFF" 393 "default" :"#FFFFFF",
338 }, 394 "colorType" :"fill"
339 { 395 },
340 "property" : "background-position-x", 396 {
341 "tweener" : "hottext", 397 "property" : "background-position-x",
342 "units" : "px", 398 "tweener" : "hottext",
343 "min" : -9999, 399 "units" : "px",
344 "max" : 9999, 400 "min" : -9999,
345 "default" : 0 401 "max" : 9999,
346 }, 402 "default" : 0
347 { 403 },
348 "property" : "background-position-y", 404 {
349 "tweener" : "hottext", 405 "property" : "background-position-y",
350 "units" : "px", 406 "tweener" : "hottext",
351 "min" : -9999, 407 "units" : "px",
352 "max" : 9999, 408 "min" : -9999,
353 "default" : 0 409 "max" : 9999,
354 }, 410 "default" : 0
355 { 411 },
356 "property" : "border-color", 412 {
357 "tweener" : "color", 413 "property" : "border-color",
358 "units" : "", 414 "tweener" : "color",
359 "min" : "", 415 "units" : "",
360 "max" : "", 416 "min" : "",
361 "default" : "#FFFFFF" 417 "max" : "",
362 }, 418 "default" : "#FFFFFF",
363 { 419 "colorType" : "stroke",
364 "property" : "border-width", 420 "strokePosition" : false
365 "tweener" : "hottext", 421 },
366 "units" : "px", 422 {
367 "min" : 0, 423 "property" : "border-width",
368 "max" : 9999, 424 "tweener" : "hottext",
369 "default" : 0 425 "units" : "px",
370 }, 426 "min" : 0,
371 { 427 "max" : 9999,
372 "property" : "border-bottom-color", 428 "default" : 0