diff options
Diffstat (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js')
-rwxr-xr-x | js/panels/color/colorpanelbase.reel/colorpanelbase.js | 160 |
1 files changed, 48 insertions, 112 deletions
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 7071f590..26d4932f 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js | |||
@@ -23,41 +23,28 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
23 | //////////////////////////////////////////////////////////////////// | 23 | //////////////////////////////////////////////////////////////////// |
24 | //Storing ColorPanel sliders mode | 24 | //Storing ColorPanel sliders mode |
25 | _panelMode: { | 25 | _panelMode: { |
26 | enumerable: false, | 26 | value: 'rgb' |
27 | value: 'rgb' | ||
28 | }, | 27 | }, |
29 | //////////////////////////////////////////////////////////////////// | 28 | //////////////////////////////////////////////////////////////////// |
30 | //Storing ColorPanel sliders mode | 29 | //Storing ColorPanel sliders mode |
31 | panelMode: { | 30 | panelMode: { |
32 | enumerable: true, | 31 | get: function () {return this._panelMode;}, |
33 | get: function () { | 32 | set: function (value) {if (value !== this._panelMode)this._panelMode = value;} |
34 | return this._panelMode; | ||
35 | }, | ||
36 | set: function (value) { | ||
37 | if (value !== this._panelMode) { | ||
38 | this._panelMode = value; | ||
39 | } | ||
40 | } | ||
41 | }, | 33 | }, |
42 | //////////////////////////////////////////////////////////////////// | 34 | //////////////////////////////////////////////////////////////////// |
43 | // | 35 | // |
44 | _colorBar: { | 36 | _colorBar: { |
45 | enumerable: false, | ||
46 | value: null | 37 | value: null |
47 | }, | 38 | }, |
48 | //////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////// |
49 | //Storing color manager | 40 | //Storing color manager |
50 | _colorManager: { | 41 | _colorManager: { |
51 | enumerable: false, | ||
52 | value: null | 42 | value: null |
53 | }, | 43 | }, |
54 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
55 | // | 45 | // |
56 | colorManager: { | 46 | colorManager: { |
57 | enumerable: true, | 47 | get: function () {return this._colorManager;}, |
58 | get: function () { | ||
59 | return this._colorManager; | ||
60 | }, | ||
61 | set: function (value) { | 48 | set: function (value) { |
62 | if (value !== this._colorManager) { | 49 | if (value !== this._colorManager) { |
63 | this._colorManager = value; | 50 | this._colorManager = value; |
@@ -72,60 +59,41 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
72 | //////////////////////////////////////////////////////////////////// | 59 | //////////////////////////////////////////////////////////////////// |
73 | //Color Panel Container | 60 | //Color Panel Container |
74 | _container: { | 61 | _container: { |
75 | enumerable: false, | ||
76 | value: null | 62 | value: null |
77 | }, | 63 | }, |
78 | //////////////////////////////////////////////////////////////////// | 64 | //////////////////////////////////////////////////////////////////// |
79 | // | 65 | // |
80 | _combo: { | 66 | _combo: { |
81 | enumerable: false, | ||
82 | value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}] | 67 | value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}] |
83 | }, | 68 | }, |
84 | //////////////////////////////////////////////////////////////////// | 69 | //////////////////////////////////////////////////////////////////// |
85 | // | 70 | // |
86 | _buttons: { | 71 | _buttons: { |
87 | enumerable: false, | ||
88 | value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] } | 72 | value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] } |
89 | }, | 73 | }, |
90 | //////////////////////////////////////////////////////////////////// | 74 | //////////////////////////////////////////////////////////////////// |
91 | // | 75 | // |
92 | historyCache: { | 76 | historyCache: { |
93 | enumerable: false, | ||
94 | value: { current: null, previous: null } | 77 | value: { current: null, previous: null } |
95 | }, | 78 | }, |
96 | //////////////////////////////////////////////////////////////////// | 79 | //////////////////////////////////////////////////////////////////// |
97 | // | 80 | // |
98 | colorChipProps: { | 81 | colorChipProps: { |
99 | enumerable: true, | ||
100 | value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false } | 82 | value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false } |
101 | }, | 83 | }, |
102 | //////////////////////////////////////////////////////////////////// | 84 | //////////////////////////////////////////////////////////////////// |
103 | // | 85 | // |
104 | currentChip: { | 86 | currentChip: { |
105 | enumerable: true, | ||
106 | value: null | 87 | value: null |
107 | }, | 88 | }, |
108 | //////////////////////////////////////////////////////////////////// | 89 | //////////////////////////////////////////////////////////////////// |
109 | // | 90 | // |
110 | previousInput: { | 91 | previousInput: { |
111 | enumerable: true, | ||
112 | value: null | 92 | value: null |
113 | }, | 93 | }, |
114 | //////////////////////////////////////////////////////////////////// | 94 | //////////////////////////////////////////////////////////////////// |
115 | //Setting up elements/components | 95 | // |
116 | prepareForDraw: { | ||
117 | enumerable: false, | ||
118 | value: function () { | ||
119 | //TODO: Remove temporary hack, color history should be initilized | ||
120 | this.addEventListener('firstDraw', this, false); | ||
121 | this.application.ninja.colorController.colorView = this; | ||
122 | this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}]; | ||
123 | this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}]; | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | handleFirstDraw: { | 96 | handleFirstDraw: { |
128 | enumerable: true, | ||
129 | value: function (e) { | 97 | value: function (e) { |
130 | // | 98 | // |
131 | this.applyDefaultColors(); | 99 | this.applyDefaultColors(); |
@@ -137,33 +105,42 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
137 | this.application.ninja.colorController.colorPanelDrawn = true; | 105 | this.application.ninja.colorController.colorPanelDrawn = true; |
138 | } | 106 | } |
139 | }, | 107 | }, |
140 | 108 | //////////////////////////////////////////////////////////////////// | |
109 | //Setting up elements/components | ||
110 | prepareForDraw: { | ||
111 | value: function () { | ||
112 | //TODO: Remove temporary hack, color history should be initilized | ||
113 | this.addEventListener('firstDraw', this, false); | ||
114 | this.application.ninja.colorController.colorView = this; | ||
115 | this.colorManager.colorHistory.fill = [{ m: 'nocolor', c: {}, a: 1}]; | ||
116 | this.colorManager.colorHistory.stroke = [{ m: 'nocolor', c: {}, a: 1}]; | ||
117 | } | ||
118 | }, | ||
141 | //////////////////////////////////////////////////////////////////// | 119 | //////////////////////////////////////////////////////////////////// |
142 | //Assigning values and binding | 120 | //Assigning values and binding |
143 | willDraw: { | 121 | willDraw: { |
144 | enumerable: false, | ||
145 | value: function () { | 122 | value: function () { |
146 | //////////////////////////////////////////////////////////// | 123 | //////////////////////////////////////////////////////////// |
147 | //TODO: remove ID dependencies | 124 | //Creating slider/hottext components |
148 | createCombo(this._combo[0], "cp_slider1", "cp_hottext1", true, this.element); | 125 | createCombo(this._combo[0], this.slider1, this.hottext1, true); |
149 | createCombo(this._combo[1], "cp_slider2", "cp_hottext2", true, this.element); | 126 | createCombo(this._combo[1], this.slider2, this.hottext2, true); |
150 | createCombo(this._combo[2], "cp_slider3", "cp_hottext3", true, this.element); | 127 | createCombo(this._combo[2], this.slider3, this.hottext3, true); |
151 | createCombo(this._combo[3], "cp_slider4", "cp_hottext4", false, this.element); | 128 | createCombo(this._combo[3], this.slider4, this.hottext4, false); |
152 | //////////////////////////////////////////////////////////// | 129 | //////////////////////////////////////////////////////////// |
153 | //Function to create slider/hottext combination | 130 | //Function to create slider/hottext combination |
154 | function createCombo(c, slid, htid, color, e) { | 131 | function createCombo(c, sldr, htxt, color) { |
155 | //Only creating, not drawing | 132 | //Only creating, not drawing |
156 | c.slider = Slider.create(); | 133 | c.slider = Slider.create(); |
157 | c.hottext = HotText.create(); | 134 | c.hottext = HotText.create(); |
158 | c.slider.element = e.getElementsByClassName(slid)[0]; | 135 | c.slider.element = sldr; |
159 | c.hottext.element = e.getElementsByClassName(htid)[0]; | 136 | c.hottext.element = htxt; |
160 | c.slider.changesColor = c.hottext.changesColor = color; | 137 | c.slider.changesColor = c.hottext.changesColor = color; |
161 | c.slider.cInputType = 'slider'; | 138 | c.slider.cInputType = 'slider'; |
162 | c.slider.cInputType = 'hottext'; | 139 | c.slider.cInputType = 'hottext'; |
163 | //Binding Hottext to Slider | 140 | //Binding Hottext to Slider |
164 | Object.defineBinding(c.hottext, "value", { | 141 | Object.defineBinding(c.hottext, "value", { |
165 | boundObject: c.slider, | 142 | boundObject: c.slider, |
166 | boundObjectPropertyPath: "_value", //TODO: Check if needed | 143 | boundObjectPropertyPath: "value", //TODO: Check if needed |
167 | oneway: false, | 144 | oneway: false, |
168 | boundValueMutator: function (value) { | 145 | boundValueMutator: function (value) { |