diff options
Diffstat (limited to 'js/components/tools-properties/shape-properties.reel')
3 files changed, 136 insertions, 25 deletions
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css index 0441c1cf..6efa615c 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css | |||
@@ -2,4 +2,24 @@ | |||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ \ No newline at end of file | 5 | </copyright> */ |
6 | |||
7 | .optionsShapeTool { | ||
8 | padding: 6px; | ||
9 | } | ||
10 | |||
11 | .optionsShapeTool > * { | ||
12 | float:left; | ||
13 | } | ||
14 | |||
15 | .optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl { | ||
16 | width: 20px; | ||
17 | height: 18px; | ||
18 | margin: 2px 6px; | ||
19 | } | ||
20 | |||
21 | .optionsShapeTool .colorCtrlIcon { | ||
22 | width: 20px; | ||
23 | height: 20px; | ||
24 | background-color: rgb(54, 54, 54); | ||
25 | } \ No newline at end of file | ||
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html index 117664a3..d3faab75 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html | |||
@@ -36,6 +36,7 @@ | |||
36 | } | 36 | } |
37 | }, | 37 | }, |
38 | 38 | ||
39 | |||
39 | "_strokeSize1": { | 40 | "_strokeSize1": { |
40 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", | 41 | "prototype": "js/components/hottextunit.reel[HotTextUnit]", |
41 | "properties": { | 42 | "properties": { |
@@ -108,6 +109,10 @@ | |||
108 | "_materialLabel": {"#": "materialLabel"}, | 109 | "_materialLabel": {"#": "materialLabel"}, |
109 | "_strokeIcon": {"#": "strokeIcon"}, | 110 | "_strokeIcon": {"#": "strokeIcon"}, |
110 | 111 | ||
112 | "_fillColorCtrlIcon": {"#": "fillColorCtrlIcon"}, | ||
113 | "_fillColorCtrl": {"#": "fillColorCtrl"}, | ||
114 | "_strokeColorCtrl": {"#": "strokeColorCtrl"}, | ||
115 | |||
111 | "_strokeSize": {"@": "_strokeSize1"}, | 116 | "_strokeSize": {"@": "_strokeSize1"}, |
112 | "ovalProperties": {"@": "ovalProperties1"}, | 117 | "ovalProperties": {"@": "ovalProperties1"}, |
113 | "rectProperties": {"@": "rectProperties1"}, | 118 | "rectProperties": {"@": "rectProperties1"}, |
@@ -121,20 +126,23 @@ | |||
121 | 126 | ||
122 | } | 127 | } |
123 | } | 128 | } |
124 | </script> | 129 | </script> |
125 | 130 | ||
126 | 131 | ||
127 | </head> | 132 | </head> |
128 | 133 | ||
129 | <body> | 134 | <body> |
130 | <div id="shapeProperties" class="subToolHolderPanel"> | 135 | <div id="shapeProperties" class="subToolHolderPanel optionsShapeTool"> |
131 | <div id="shapeToolsList"> | 136 | <div id="shapeToolsList"> |
132 | <div id="toolbutton"></div> | 137 | <div id="toolbutton"></div> |
133 | </div> | 138 | </div> |
139 | <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div> | ||
140 | <div data-montage-id="fillColorCtrl" class="fillColorCtrl"></div> | ||
141 | <div class="colorCtrlIcon PencilTool"></div> | ||
142 | <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div> | ||
134 | 143 | ||
135 | <label class="label">Stroke:</label> | 144 | <label class="label">Stroke:</label> |
136 | <div id="strokeControl" class="label"></div> | 145 | <div id="strokeControl" class="label"></div> |
137 | |||
138 | <div id="customProperties"> | 146 | <div id="customProperties"> |
139 | <div id="ovalProperties" class="label"></div> | 147 | <div id="ovalProperties" class="label"></div> |
140 | <div id="rectProperties" class="label"></div> | 148 | <div id="rectProperties" class="label"></div> |
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 79567453..74875544 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js | |||
@@ -8,12 +8,75 @@ var Montage = require("montage/core/core").Montage, | |||
8 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, | 8 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, |
9 | ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 9 | ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
10 | 10 | ||
11 | exports.ShapeProperties = Montage.create(ToolProperties, { | 11 | var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { |
12 | toolsData: { value: null }, | 12 | toolsData: { value: null }, |
13 | _use3D: { value: false }, | 13 | _use3D: { value: false }, |
14 | addedColorChips: { value: false }, | ||
15 | |||
16 | _fill: { | ||
17 | enumerable: false, | ||
18 | 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] } | ||
19 | //this._fillColorCtrl.color('nocolor', null); | ||
20 | }, | ||
21 | |||
22 | _stroke: { | ||
23 | enumerable: false, | ||
24 | 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] } | ||
25 | }, | ||
26 | |||
27 | stroke: { | ||
28 | enumerable: true, | ||
29 | get: function () { | ||
30 | return this._stroke; | ||
31 | }, | ||
32 | set: function (value) { | ||
33 | if (value !== this._stroke) { | ||
34 | this._stroke = value; | ||
35 | } | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | fill: { | ||
40 | enumerable: true, | ||
41 | get: function () { | ||
42 | return this._fill; | ||
43 | }, | ||
44 | set: function (value) { | ||
45 | if (value !== this._fill) { | ||
46 | this._fill = value; | ||
47 | } | ||
48 | } | ||
49 | }, | ||
50 | |||
51 | draw: { | ||
52 | enumerable: false, | ||
53 | value: function () { | ||
54 | Object.getPrototypeOf(ShapeProperties).draw.call(this); | ||
55 | |||
56 | if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) { | ||
57 | // setup fill color | ||
58 | this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
59 | this.application.ninja.colorController.addButton("chip", this._fillColorCtrl); | ||
60 | |||
61 | // setup stroke color | ||
62 | this._strokeColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 }; | ||
63 | this.application.ninja.colorController.addButton("chip", this._strokeColorCtrl); | ||
64 | |||
65 | this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false); | ||
66 | this._strokeColorCtrl.addEventListener("change", this.handleStrokeColorChange.bind(this), false); | ||
67 | |||
68 | this.addedColorChips = true; | ||
69 | } | ||
70 | |||
71 | if (this.addedColorChips) { | ||
72 | this._fillColorCtrl.color(this._fill.colorMode, this._fill.color); | ||
73 | this._strokeColorCtrl.color(this._stroke.colorMode, this._stroke.color); | ||
74 | } | ||
75 | } | ||
76 | }, | ||
14 | 77 | ||
15 | _subPrepare: { | 78 | _subPrepare: { |
16 | value: function() { | 79 | value: function () { |
17 | this.rectProperties.visible = true; | 80 | this.rectProperties.visible = true; |
18 | 81 | ||
19 | Object.defineBinding(this._strokeMaterial, "items", { | 82 | Object.defineBinding(this._strokeMaterial, "items", { |
@@ -33,21 +96,32 @@ exports.ShapeProperties = Montage.create(ToolProperties, { | |||
33 | } | 96 | } |
34 | }, | 97 | }, |
35 | 98 | ||
36 | _selectedSubTool: { value: null, enumerable: false}, | 99 | _selectedSubTool: { value: null, enumerable: false }, |
37 | 100 | ||
38 | selectedSubTool : { | 101 | selectedSubTool: { |
39 | get: function() { return this._selectedSubTool;}, | 102 | get: function () { return this._selectedSubTool; }, |
40 | set: function(value) { | 103 | set: function (value) { |
41 | if(value) { | 104 | if (value) { |
42 |