diff options
Diffstat (limited to 'js/components/tools-properties/pen-properties.reel')
-rwxr-xr-x | js/components/tools-properties/pen-properties.reel/pen-properties.html | 25 | ||||
-rwxr-xr-x | js/components/tools-properties/pen-properties.reel/pen-properties.js | 83 |
2 files changed, 101 insertions, 7 deletions
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index e835f69d..e720eb84 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html | |||
@@ -28,21 +28,36 @@ | |||
28 | "prototype": "js/components/tools-properties/pen-properties.reel", | 28 | "prototype": "js/components/tools-properties/pen-properties.reel", |
29 | "properties": { | 29 | "properties": { |
30 | "element": {"#": "penProperties"}, | 30 | "element": {"#": "penProperties"}, |
31 | |||
32 | "_penToolRadio": {"#": "penTool"}, | ||
33 | "_penPlusRadio": {"#": "penPlus"}, | ||
34 | "_penMinusRadio": {"#": "penMinus"}, | ||
35 | |||
36 | "_fillColorCtrl": {"#": "fillColorCtrl"}, | ||
37 | "_strokeColorCtrl": {"#": "strokeColorCtrl"}, | ||
31 | "_strokeSize": {"@": "strokeSizeHT"} | 38 | "_strokeSize": {"@": "strokeSizeHT"} |
32 | } | 39 | } |
33 | } | 40 | } |
34 | } | 41 | } |
35 | </script> | 42 | </script> |
36 | 43 | ||
37 | </head> | 44 | </head> |
38 | 45 | ||
39 | <body> | 46 | <body> |
40 | <div data-montage-id="penProperties" class="subToolHolderPanel"> | 47 | <div data-montage-id="penProperties" class="subToolHolderPanel toolOptionsFloatChildren optionsPenTool"> |
41 | <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;"> | 48 | <input type="radio" data-montage-id="penTool" class="toolOptsRadioButton penToolIcon" title="Pen Tool" name="penSubtoolRadios" value="pen" checked/> |
49 | <input type="radio" data-montage-id="penPlus" class="toolOptsRadioButton penPlusToolIcon" title="Pen Plus" name="penSubtoolRadios" value="penPlus"/> | ||
50 | <input type="radio" data-montage-id="penMinus" class="toolOptsRadioButton penMinusToolIcon toolOptionsSpacer" title="Pen Minus" name="penSubtoolRadios" value="penMinus"/> | ||
51 | <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> | ||
52 | |||
53 | <div class="toolColorChipIcon PencilTool"></div> | ||
54 | <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div> | ||
55 | <div class="toolColorChipIcon FillTool"></div> | ||
56 | <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> | ||
57 | <div class="nj-divider divider-vertical"> </div> | ||
42 | <label class="label"> Stroke:</label> | 58 | <label class="label"> Stroke:</label> |
43 | <div id="strokeSize" class="label"></div> | 59 | <div data-montage-id="strokeSize" class="label"></div> |
44 | </div> | 60 | </div> |
45 | </div> | ||
46 | </body> | 61 | </body> |
47 | 62 | ||
48 | </html> \ No newline at end of file | 63 | </html> \ No newline at end of file |
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js index b57f9a6f..cd205e07 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js | |||
@@ -7,8 +7,87 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 8 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
9 | 9 | ||
10 | exports.PenProperties = Montage.create(ToolProperties, { | 10 | var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { |
11 | addedColorChips: { value: false }, | ||
12 | |||
13 | _fill: { | ||
14 | enumerable: false, | ||
15 | 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] } | ||
16 | }, | ||
17 | |||
18 | _stroke: { | ||
19 | enumerable: false, | ||
20 | value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] } | ||
21 | }, | ||
22 | |||
23 | stroke: { | ||
24 | enumerable: true, | ||
25 | get: function () { | ||
26 | return this._stroke; | ||
27 | }, | ||
28 | set: function (value) { | ||
29 | if (value !== this._stroke) { | ||
30 | this._stroke = value; | ||
31 | } | ||
32 | } | ||
33 | }, | ||
34 | |||
35 | fill: { | ||
36 | enumerable: true, | ||
37 | get: function () { | ||
38 | return this._fill; | ||
39 | }, | ||
40 | set: function (value) { | ||
41 | if (value !== this._fill) { | ||
42 | this._fill = value; | ||
43 | } | ||
44 | } | ||
45 | }, | ||
46 | |||
11 | strokeSize: { | 47 | strokeSize: { |
12 | get: function() { return this._strokeSize; } | 48 | get: function () { |
49 | return this._strokeSize; | ||
50 | } | ||
51 | }, | ||
52 | |||
53 | draw: { | ||
54 | enumerable: false, | ||
55 | value: function () { | ||
56 | Object.getPrototypeOf(PenProperties).draw.call(this); | ||
57 | |||
58 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
59 | // setup fill color | ||
60 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
61 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
62 | |||
63 | // setup stroke color | ||
64 | this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
65 | this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); | ||
66 | |||
67 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
68 | this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); | ||
69 | |||
70 | this.addedColorChips = true; | ||
71 | } | ||
72 | |||
73 | if (this.addedColorChips) { | ||
74 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | ||
75 | this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); | ||
76 | } | ||
77 | } | ||
78 | }, | ||
79 | |||
80 | handleFillColorChange: { | ||
81 | value: function (e) { | ||
82 | this.fill = e._event; | ||
83 | this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); | ||
84 | } | ||
85 | }, | ||
86 | |||
87 | handleStrokeColorChange: { | ||
88 | value: function (e) { | ||
89 | this.stroke = e._event; | ||
90 | this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color); | ||
91 | } | ||
13 | } | 92 | } |
14 | }); \ No newline at end of file | 93 | }); \ No newline at end of file |