From f4df8204a57e1bc6021b651ebb2259f9931cf26f Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 22 May 2012 13:21:32 -0700 Subject: allow changes in the pen subtool in options to be seen by the pen tool code (can now select the pen plus, pen minus subtools) AND add keyboard shortcut for brush tool --- .../pen-properties.reel/pen-properties.js | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'js/components/tools-properties') 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 cd205e07..aba6cb61 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js @@ -9,6 +9,17 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { addedColorChips: { value: false }, + _penToolRadio: { value: null, enumerable: false }, + _penPlusRadio: { value: null, enumerable: false }, + _penMinusRadio: { value: null, enumerable: false }, + + _subPrepare: { + value: function() { + this._penToolRadio.addEventListener("click", this, false); + this._penPlusRadio.addEventListener("click", this, false); + this._penMinusRadio.addEventListener("click", this, false); + } + }, _fill: { enumerable: false, @@ -50,6 +61,23 @@ var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { } }, + _selectedSubtool: { + value: "pen", enumerable: false + }, + + selectedSubtool: { + get: function() { return this._selectedSubtool;}, + set: function(value) { this._selectedSubtool = value; } + }, + + handleClick: { + value: function(event) { + this._selectedSubtool = event._event.target.value; + console.log("handleClick changing pen tool subtool to "+this.selectedSubtool); + NJevent("penSubToolChange"); + } + }, + draw: { enumerable: false, value: function () { -- cgit v1.2.3 From e2ae637582b8e02125086201a64ee85761b01093 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 29 May 2012 14:24:47 -0700 Subject: More consistent local and global mouse coords which solves a bug with the Pen minus subtool not removing 1 anchor paths --- js/components/tools-properties/pen-properties.reel/pen-properties.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/components/tools-properties') 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 aba6cb61..c37359e1 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.js +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js @@ -73,7 +73,6 @@ var PenProperties = exports.PenProperties = Montage.create(ToolProperties, { handleClick: { value: function(event) { this._selectedSubtool = event._event.target.value; - console.log("handleClick changing pen tool subtool to "+this.selectedSubtool); NJevent("penSubToolChange"); } }, -- cgit v1.2.3 From d44f3196c925332dcaf45f7cf8c64e22a1994bb9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 4 Jun 2012 17:11:06 -0700 Subject: Fill and Ink-Bottle fixes. Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com> --- .../fill-properties.reel/fill-properties.html | 41 ++++++-- .../fill-properties.reel/fill-properties.js | 19 +--- .../ink-bottle-properties.css | 15 --- .../ink-bottle-properties.html | 116 +++++++++------------ .../ink-bottle-properties.js | 28 ++--- 5 files changed, 96 insertions(+), 123 deletions(-) (limited to 'js/components/tools-properties') diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html index 734966dc..ca447b8b 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -11,10 +11,35 @@ <script type="text/montage-serialization"> { - "_fillMaterialCB": { + "useFillColor": { + "prototype": "montage/ui/checkbox.reel", + "properties": { + "element": {"#": "useFillColor"}, + "identifier": "useFillColor", + "checked": true + } + }, + + "useWebGL": { + "prototype": "montage/ui/checkbox.reel", + "properties": { + "element": {"#": "useWebGL"}, + "identifier": "useWebGL", + "checked": false + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"}, + "capture": false + } + ] + }, + + "fillMaterial": { "prototype": "js/components/combobox.reel", "properties": { - "element": {"#": "fillMaterialCB"}, + "element": {"#": "fillMaterial"}, "labelField": "_name", "dataField": "_name" } @@ -24,11 +49,12 @@ "properties": { "element": {"#": "fillProperties"}, + "useFillColor": {"@": "useFillColor"}, "_fillColorCtrl": {"#": "fillColorCtrl"}, - "_useWebGL": {"#": "useWebGLCH"}, + "useWebGL": {"@": "useWebGL"}, "_materialsContainer": {"#": "materialsContainer"}, - "_fillMaterial": {"@": "_fillMaterialCB"} + "fillMaterial": {"@": "fillMaterial"} } } } @@ -38,16 +64,17 @@ <body> <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren"> + <input data-montage-id="useFillColor" type="checkbox" name="useFillColorControl" class="nj-skinned"/> <div class="toolColorChipIcon FillTool"></div> <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div> <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> - <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/> + <input data-montage-id="useWebGL" type="checkbox" name="useWebGLControl" class="nj-skinned"/> <label class="label">Use WebGL</label> - <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren"> + <div data-montage-id="materialsContainer" class="materialsContainerOptions toolOptionsFloatChildren" style="display:none;"> <label class="label">Material:</label> <div data-montage-id="fillIcon" class="toolColorChipIcon FillTool"></div> - <select data-montage-id="fillMaterialCB" class="nj-skinned"> + <select data-montage-id="fillMaterial" class="nj-skinned"> </select> </div> </div> diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js index ae136956..7331b375 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.js +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js @@ -10,7 +10,6 @@ var Montage = require("montage/core/core").Montage, var FillProperties = exports.FillProperties = Montage.create(ToolProperties, { - _use3D: { value: false }, addedColorChips: { value: false }, _fill: { @@ -59,29 +58,17 @@ var FillProperties = exports.FillProperties = Montage.create(ToolProperties, { _subPrepare: { value: function() { - Object.defineBinding(this._fillMaterial, "items", { + Object.defineBinding(this.fillMaterial, "items", { boundObject: this.application.ninja.appModel, boundObjectPropertyPath: "materials", oneway: false }); - - this.handleChange(null); - this._useWebGL.addEventListener("change", this, false); } }, - handleChange: { + handleAction: { value: function(event) { - if(this._useWebGL.checked) - { - this._use3D = true; - this._materialsContainer.style["display"] = ""; - } - else - { - this._use3D = false; - this._materialsContainer.style["display"] = "none"; - } + (this.useWebGL.checked) ? this._materialsContainer.style["display"] = "" : this._materialsContainer.style["display"] = "none"; } } }); \ No newline at end of file diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css index 3dba17b6..dae64eb3 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css @@ -8,18 +8,3 @@ .inkBottleOptions select.nj-skinned { margin-top: 2px; } - -.inkBottleOptions label.disabled { - color:#999999; -} - -.inkBottleOptions label.disabled:hover { - color:#999999; - background-color: transparent; - cursor:default; -} - -.inkBottleOptions div.disabled:hover { - background-color: transparent; - cursor:default; -} diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html index 3ac0b261..5620eed8 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html @@ -11,12 +11,21 @@ <script type="text/montage-serialization"> { - "borderWidthCh": { + "useStrokeColor": { "prototype": "montage/ui/checkbox.reel", "properties": { - "element": {"#": "useBorderWidthCh"}, - "identifier": "useBorderWidth", + "element": {"#": "useStrokeColor"}, + "identifier": "useStrokeColor", "checked": true + } + }, + + "useBorderWidth": { + "prototype": "montage/ui/checkbox.reel", + "properties": { + "element": {"#": "useBorderWidth"}, + "identifier": "useBorderWidth", + "checked": false }, "listeners": [ { @@ -27,31 +36,24 @@ ] }, - "borderWidthLabel": { - "prototype": "montage/ui/dynamic-text.reel", - "properties": { - "element": {"#": "borderWidthLabel"}, - "value": "Border:" - } - }, - - "borderWidthHT": { + "borderWidth": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { "element": {"#": "borderWidth"}, "minValue": 1, "maxValue": 100, "value": 1, - "acceptableUnits" : ["px", "pt"] + "acceptableUnits" : ["px", "pt"], + "enabled": false } }, - "borderStyleCh": { + "useBorderStyle": { "prototype": "montage/ui/checkbox.reel", "properties": { - "element": {"#": "useBorderStyleCh"}, + "element": {"#": "useBorderStyle"}, "identifier": "useBorderStyle", - "checked": true + "checked": false }, "listeners": [ { @@ -62,20 +64,12 @@ ] }, - "borderStyleLabel": { - "prototype": "montage/ui/dynamic-text.reel", - "properties": { - "element": {"#": "borderStyleLabel"}, - "value": "Style:" - } - }, - - "strokeSizeCh": { + "useStrokeSize": { "prototype": "montage/ui/checkbox.reel", "properties": { - "element": {"#": "useStrokeSizeCh"}, + "element": {"#": "useStrokeSize"}, "identifier": "useStrokeSize", - "checked": true + "checked": false }, "listeners": [ { @@ -86,15 +80,7 @@ ] }, - "strokeSizeLabel": { - "prototype": "montage/ui/dynamic-text.reel", - "properties": { - "element": {"#": "strokeSizeLabel"}, - "value": "Stroke:" - } - }, - - "strokeSizeHT": { + "strokeSize": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { "element": {"#": "strokeSize"}, @@ -102,16 +88,17 @@ "maxValue": 100, "value": 1, "decimalPlace": 10, - "acceptableUnits" : ["px", "pt"] + "acceptableUnits" : ["px", "pt"], + "enabled": false } }, - "webGlCh": { + "useWebGL": { "prototype": "montage/ui/checkbox.reel", "properties": { - "element": {"#": "useWebGLCHIB"}, - "identifier": "useWebGl", - "checked": true + "element": {"#": "useWebGL"}, + "identifier": "useWebGL", + "checked": false }, "listeners": [ { @@ -122,10 +109,10 @@ ] }, - "_strokeMaterialCB": { + "strokeMaterial": { "prototype": "js/components/combobox.reel", "properties": { - "element": {"#": "strokeMaterialIBCB"}, + "element": {"#": "strokeMaterial"}, "labelField": "_name", "dataField": "_name" } @@ -136,23 +123,21 @@ "properties": { "element": {"#": "inkBottleProperties"}, + "useStrokeColor": {"@": "useStrokeColor"}, "_strokeColorCtrl": {"#": "strokeColorCtrl"}, - "useBorderWidth": {"@": "borderWidthCh"}, - "borderWidthLabel": {"@": "borderWidthLabel"}, - "_borderWidth": {"@": "borderWidthHT"}, + "useBorderWidth": {"@": "useBorderWidth"}, + "borderWidth": {"@": "borderWidth"}, - "useBorderStyle": {"@": "borderStyleCh"}, - "borderStyleLabel": {"@": "borderStyleLabel"}, - "_borderStyle": {"#": "borderStyleCB"}, + "useBorderStyle": {"@": "useBorderStyle"}, + "borderStyle": {"#": "borderStyle"}, - "useStrokeSize": {"@": "strokeSizeCh"}, - "strokeSizeLabel": {"@": "strokeSizeLabel"}, - "_strokeSize": {"@": "strokeSizeHT"}, + "useStrokeSize": {"@": "useStrokeSize"}, + "strokeSize": {"@": "strokeSize"}, - "_useWebGL": {"@": "webGlCh"}, + "useWebGL": {"@": "useWebGL"}, "_materialsContainer": {"#": "materialsContainerIB"}, - "_strokeMaterial": {"@": "_strokeMaterialCB"} + "strokeMaterial": {"@": "strokeMaterial"} } } } @@ -163,16 +148,19 @@ <body> <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren"> <div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren"> + + <input data-montage-id="useStrokeColor" type="checkbox" name="useStrokeColor" class="nj-skinned" title="Apply stroke or border-color"/> <div class="toolColorChipIcon PencilTool"></div> <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div> <div class="nj-divider divider-vertical toolOptionsSpacer"> </div> - <input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/> - <label data-montage-id="borderWidthLabel" class="label"> Border:</label> + <input data-montage-id="useBorderWidth" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/> + <label class="label"> Border:</label> <div data-montage-id="borderWidth" class="label"></div> - <input data-montage-id="useBorderStyleCh" type="checkbox" name="useBorderStyleControl" class="nj-skinned" title="Apply border-style"/> - <label data-montage-id="borderStyleLabel" class="label"> Style:</label> - <select data-montage-id="borderStyleCB" class="nj-skinned"> + + <input data-montage-id="useBorderStyle" type="checkbox" name="useBorderStyleControl" class="nj-skinned" title="Apply border-style"/> + <label class="label"> Style:</label> + <select data-montage-id="borderStyle" class="nj-skinned" disabled="disabled"> <option value="none">none</option> <option value="solid" selected>solid</option> <option value="hidden">hidden</option> @@ -191,19 +179,19 @@ <div class="toolOptionsSpacer"> </div> <div data-montage-id="shapeInkOptions" class="toolOptionsFloatChildren"> - <input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/> - <label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label> + <input data-montage-id="useStrokeSize" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/> + <label class="label"> Stroke:</label> <div data-montage-id="strokeSize" class="label"></div> </div> <div data-montage-id="webGLInkOptions" class="toolOptionsFloatChildren"> - <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/> + <input data-montage-id="useWebGL" type="checkbox" name="useWebGLControl" class="nj-skinned"/> <label class="label"> Use WebGL</label> - <div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren"> + <div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren" style="display:none;"> <label class="label"> Materials:</label> <div data-montage-id="strokeIconIB" class="toolColorChipIcon PencilTool"></div> - <select data-montage-id="strokeMaterialIBCB" class="nj-skinned"></select> + <select data-montage-id="strokeMaterial" class="nj-skinned"></select> </div> </div> </div> diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js index 945df857..7affe581 100755 --- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js +++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js @@ -28,7 +28,7 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope } }, - draw: { + draw: { enumerable: false, value: function () { Object.getPrototypeOf(InkBottleProperties).draw.call(this); @@ -58,7 +58,7 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope _subPrepare: { value: function() { - Object.defineBinding(this._strokeMaterial, "items", { + Object.defineBinding(this.strokeMaterial, "items", { boundObject: this.application.ninja.appModel, boundObjectPropertyPath: "materials", oneway: false @@ -72,33 +72,19 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope val = event.currentTarget.identifier; switch(val) { case "useBorderWidth": - if(ch.checked) { - this.borderWidthLabel.element.classList.remove("disabled"); - this._borderWidth.enabled = true; - } else { - this.borderWidthLabel.element.classList.add("disabled"); - this._borderWidth.enabled = false; - } + this.borderWidth.enabled = ch.checked; break; case "useBorderStyle": if(ch.checked) { - this.borderStyleLabel.element.classList.remove("disabled"); - this._borderStyle.removeAttribute("disabled") + this.borderStyle.removeAttribute("disabled"); } else { - this.borderStyleLabel.element.classList.add("disabled"); - this._borderStyle.setAttribute("disabled", "disabled"); + this.borderStyle.setAttribute("disabled", "disabled"); } break; case "useStrokeSize": - if(ch.checked) { - this.strokeSizeLabel.element.classList.remove("disabled"); - this._strokeSize.enabled = true - } else { - this.strokeSizeLabel.element.classList.add("disabled"); - this._strokeSize.enabled = false; - } + this.strokeSize.enabled = ch.checked; break; - case "useWebGl": + case "useWebGL": (ch.checked) ? this._materialsContainer.style["display"] = "" : this._materialsContainer.style["display"] = "none"; break; } -- cgit v1.2.3