From a0daa3668883c8c35ce277b60509a3a3dcf303b2 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 24 Apr 2012 11:42:42 -0700
Subject: Allow users to toggle application of stroke and border settings when
 using the ink bottle tool.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../ink-bottle-properties.css                      |  24 ++++
 .../ink-bottle-properties.html                     | 137 ++++++++++++++++++---
 .../ink-bottle-properties.js                       |  49 +++++---
 js/controllers/elements/element-controller.js      |  16 ++-
 js/controllers/elements/shapes-controller.js       |  20 ++-
 js/tools/InkBottleTool.js                          |  22 ++--
 6 files changed, 215 insertions(+), 53 deletions(-)

(limited to 'js')

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 7f1b0f7f..a926a0b4 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
@@ -4,3 +4,27 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+.inkBottleProperties input[type="checkbox"].nj-skinned {
+    float:left;
+    margin-top:5px;
+}
+
+.inkBottleProperties select.nj-skinned {
+    float:left;
+    margin:2px 5px 0 0;
+}
+
+.inkBottleProperties label.disabled {
+    color:#999999;
+}
+
+.inkBottleProperties label.disabled:hover {
+    color:#999999;
+    background-color: transparent;
+    cursor:default;
+}
+
+.inkBottleProperties div.disabled:hover {
+    background-color: transparent;
+    cursor:default;
+}
\ No newline at end of file
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 1602e793..81facc49 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,6 +11,30 @@
 
         <script type="text/montage-serialization">
         {
+            "borderWidthCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useBorderWidthCh"},
+                    "identifier": "useBorderWidth",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "borderWidthLabel": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "borderWidthLabel"},
+                    "value": "Border:"
+                }
+            },
+
             "borderWidthHT": {
                 "module": "js/components/hottextunit.reel",
                 "name": "HotTextUnit",
@@ -23,6 +47,54 @@
                 }
             },
 
+            "borderStyleCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useBorderStyleCh"},
+                    "identifier": "useBorderStyle",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "borderStyleLabel": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "borderStyleLabel"},
+                    "value": "Style:"
+                }
+            },
+
+            "strokeSizeCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useStrokeSizeCh"},
+                    "identifier": "useStrokeSize",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "strokeSizeLabel": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "strokeSizeLabel"},
+                    "value": "Stroke:"
+                }
+            },
+
             "strokeSizeHT": {
                 "module": "js/components/hottextunit.reel",
                 "name": "HotTextUnit",
@@ -36,6 +108,22 @@
                 }
             },
 
+            "webGlCh": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useWebGLCHIB"},
+                    "identifier": "useWebGl",
+                    "checked": true
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
             "_strokeMaterialCB": {
                 "module": "js/components/combobox.reel",
                 "name": "Combobox",
@@ -52,12 +140,19 @@
                 "properties": {
                     "element": {"#": "inkBottleProperties"},
 
+                    "useBorderWidth": {"@": "borderWidthCh"},
+                    "borderWidthLabel": {"@": "borderWidthLabel"},
                     "_borderWidth": {"@": "borderWidthHT"},
+
+                    "useBorderStyle": {"@": "borderStyleCh"},
+                    "borderStyleLabel": {"@": "borderStyleLabel"},
                     "_borderStyle": {"#": "borderStyleCB"},
 
+                    "useStrokeSize": {"@": "strokeSizeCh"},
+                    "strokeSizeLabel": {"@": "strokeSizeLabel"},
                     "_strokeSize": {"@": "strokeSizeHT"},
 
-                    "_useWebGL": {"#": "useWebGLCHIB"},
+                    "_useWebGL": {"@": "webGlCh"},
                     "_materialsContainer": {"#": "materialsContainerIB"},
                     "_strokeMaterial": {"@": "_strokeMaterialCB"}
                 }
@@ -68,13 +163,15 @@
     </head>
 
     <body>
-        <div id="inkBottleProperties" class="subToolHolderPanel">
+        <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleProperties">
 
-            <div id="bordersContainer" class="leftLabel" style="padding-top: 3px;">
-                <label class="label"> Border:</label>
-                <div id="borderWidth" class="label"></div>
-                <label class="label"> Style:</label>
-                <select id="borderStyleCB" class="nj-skinned">
+            <div data-montage-id="elementInkOptions" class="leftLabel" style="padding-top: 3px;">
+                <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>
+                <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">
                     <option value="none">none</option>
                     <option value="solid" selected>solid</option>
                     <option value="hidden">hidden</option>
@@ -88,18 +185,26 @@
                 </select>
             </div>
 
-            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
-                <label class="label"> Stroke:</label>
-                <div id="strokeSize" class="label"></div>
+            <div class="nj-divider divider-vertical" style="margin:8px 20px; float: left;">&nbsp;</div>
+
+            <div data-montage-id="shapeInkOptions" class="leftLabel" style="margin-top: 5px;">
+                <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>
+                <div data-montage-id="strokeSize" class="label"></div>
             </div>
 
-            <label class="label subOption"><input id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/> Use WebGL</label>
+            <div data-montage-id="webGLInkOptions" class="leftLabel">
+                <label class="label">
+                    <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
+                    <label class="label"> Use WebGL</label>
+                </label>
 
-            <div id="materialsContainerIB" class="leftLabel" style="padding-top: 3px;">
-                <label class="label"> Materials:</label>
-                <div id="strokeIconIB" class="pencilToolUp" style="float: left;"></div>
-                <select id="strokeMaterialIBCB" class="nj-skinned">
-                </select>
+                <div data-montage-id="materialsContainerIB" class="leftLabel">
+                    <label class="label"> Materials:</label>
+                    <div data-montage-id="strokeIconIB" class="pencilToolUp" style="float: left; margin: 0 2px 0 5px;"></div>
+                    <select data-montage-id="strokeMaterialIBCB" class="nj-skinned">
+                    </select>
+                </div>
             </div>
         </div>
     </body>
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 e3ffc359..6d5c46f6 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
@@ -10,8 +10,6 @@ var Montage = require("montage/core/core").Montage,
 
 exports.InkBottleProperties = Montage.create(ToolProperties, {
 
-    _use3D:    { value: false },
-
     _subPrepare: {
         value: function() {
             Object.defineBinding(this._strokeMaterial, "items", {
@@ -19,23 +17,44 @@ exports.InkBottleProperties = Montage.create(ToolProperties, {
                 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";
+            var ch = event.currentTarget,
+                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;
+                    }
+                    break;
+                case "useBorderStyle":
+                    if(ch.checked) {
+                        this.borderStyleLabel.element.classList.remove("disabled");
+                        this._borderStyle.removeAttribute("disabled")
+                    } else {
+                        this.borderStyleLabel.element.classList.add("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;
+                    }
+                    break;
+                case "useWebGl":
+                    (ch.checked) ? this._materialsContainer.style["display"] = "" : this._materialsContainer.style["display"] = "none";
+                    break;
             }
         }
     }
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 35a543ac..452d09f1 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -152,16 +152,24 @@ exports.ElementController = Montage.create(Component, {
                             this.setProperty(el, "border-image", color.color.css);
                             this.setProperty(el, "border-color", "none");
                             if(color.borderInfo) {
-                                this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
-                                this.setProperty(el, "border-style", color.borderInfo.borderStyle);
+                                if(color.borderInfo.borderWidth) {
+                                    this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
+                                }
+                                if(color.borderInfo.borderStyle) {
+                                    this.setProperty(el, "border-style", color.borderInfo.borderStyle);
+                                }
                             }
                             break;
                         default:
                             this.setProperty(el, "border-image", "none");
                             this.setProperty(el, "border-color", color.color.css);
                             if(color.borderInfo) {
-                                this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
-                                this.setProperty(el, "border-style", color.borderInfo.borderStyle);
+                                if(color.borderInfo.borderWidth) {
+                                    this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits);
+                                }
+                                if(color.borderInfo.borderStyle) {
+                                    this.setProperty(el, "border-style", color.borderInfo.borderStyle);
+                                }
                             }
                     }
                 }
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index e9dde5fc..3ada5f82 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -20,8 +20,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                 color;
             switch(p) {
                 case "strokeSize":
-                    // TODO - For now, just handling px units.
                     this.setShapeProperty(el, "strokeSize", value);
+                    var strokeInfo = value.split(" ");
+                    val = this.GetValueInPixels(strokeInfo[0], strokeInfo[1]);
+
                     // TODO - For now, just handle Line, Rectangle and Oval. Eventually, move this into each class's
                     // setStrokeWidth code like SubPath and BrushStroke do.
                     var geomType = el.elementModel.shapeModel.GLGeomObj.geomType();
@@ -527,16 +529,6 @@ exports.ShapesController = Montage.create(CanvasController, {
             }
             else
             {
-                // Support for ink-bottle tool
-                if(color.strokeInfo)
-                {
-                    var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize,
-                                                            color.strokeInfo.strokeUnits);
-                    el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth);
-                    this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " "
-                                                                + color.strokeInfo.strokeUnits);
-                }
-
                 if(mode)
                 {
                     switch (mode) {
@@ -559,6 +551,12 @@ exports.ShapesController = Montage.create(CanvasController, {
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
                     }
                 }
+
+                // Support for ink-bottle tool
+                if(color.strokeInfo)
+                {
+                    this.setProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " + color.strokeInfo.strokeUnits);
+                }
             }
             el.elementModel.shapeModel.GLWorld.render();
             this.application.ninja.documentController.activeDocument.needsSave = true;
diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js
index 95c2e71d..960c19fa 100755
--- a/js/tools/InkBottleTool.js
+++ b/js/tools/InkBottleTool.js
@@ -84,14 +84,22 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, {
                                 };
                 }
 
-                colorInfo.borderInfo = { borderStyle:this.options._borderStyle.value,
-                                         borderWidth:this.options._borderWidth.value,
-                                         borderUnits:this.options._borderWidth.units
-                                       };
+                if(this.options.useBorderWidth.checked || this.options.useBorderStyle.checked) {
+                    colorInfo.borderInfo = {};
+                    if(this.options.useBorderWidth.checked) {
+                        colorInfo.borderInfo.borderWidth = this.options._borderWidth.value;
+                        colorInfo.borderInfo.borderUnits = this.options._borderWidth.units;
+                    }
+                    if(this.options.useBorderStyle.checked) {
+                        colorInfo.borderInfo.borderStyle = this.options._borderStyle.value;
+                    }
+                }
 
-                colorInfo.strokeInfo = { strokeSize:this.options._strokeSize.value,
-                                         strokeUnits:this.options._strokeSize.units
-                                       };
+                if(this.options.useStrokeSize.checked) {
+                    colorInfo.strokeInfo = {};
+                    colorInfo.strokeInfo.strokeSize = this.options._strokeSize.value;
+                    colorInfo.strokeInfo.strokeUnits = this.options._strokeSize.units;
+                }
 
                 ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, false, "Change", "inkBottleTool");
             }
-- 
cgit v1.2.3