cutting down Factory by creating a addComponentsGetterSetter method which all component attrs will use

2025-09-18 18:27:58 +08:00 · 2014-01-08 23:13:50 -08:00
parent 01306af86b
commit f73baa1a4e
7 changed files with 138 additions and 184 deletions
--- a/src/Container.js
+++ b/src/Container.js
@@ -306,7 +306,7 @@
    Kinetic.Container.prototype.get = Kinetic.Container.prototype.find;

    // add getters setters
-    Kinetic.Factory.addBoxGetterSetter(Kinetic.Container, 'clip');
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container, 'clip', ['x', 'y', 'width', 'height']);
    /**
     * get/set clip
     * @method
@@ -331,6 +331,7 @@
     * });
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipX');
    /**
     * get/set clip x
     * @name clipX
@@ -346,6 +347,7 @@
     * container.clipX(10);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipY');
    /**
     * get/set clip y
     * @name clipY
@@ -361,6 +363,7 @@
     * container.clipY(10);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipWidth');
    /**
     * get/set clip width
     * @name clipWidth
@@ -376,6 +379,7 @@
     * container.clipWidth(100);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipHeight');
    /**
     * get/set clip height
     * @name clipHeight
--- a/src/Factory.js
+++ b/src/Factory.js
@@ -42,52 +42,93 @@
        Y = 'y';

    Kinetic.Factory = {
-        // getter setter adders
        addGetterSetter: function(constructor, attr, def) {
            this.addGetter(constructor, attr, def);
            this.addSetter(constructor, attr);
            this.addOverloadedGetterSetter(constructor, attr);
        },
-        addPointGetterSetter: function(constructor, attr, def) {
-            this.addPointGetter(constructor, attr, def);
-            this.addPointSetter(constructor, attr);
-            this.addOverloadedGetterSetter(constructor, attr);
+        addGetter: function(constructor, attr, def) {
+            var that = this,
+                method = GET + Kinetic.Util._capitalize(attr);

-            // add invdividual component getters and setters
-            this.addGetter(constructor, attr + UPPER_X, def);
-            this.addGetter(constructor, attr + UPPER_Y, def);
-            this.addSetter(constructor, attr + UPPER_X);
-            this.addSetter(constructor, attr + UPPER_Y);
-
-            this.addOverloadedGetterSetter(constructor, attr + UPPER_X);
-            this.addOverloadedGetterSetter(constructor, attr + UPPER_Y);
+            constructor.prototype[method] = function() {
+                var val = this.attrs[attr];
+                return val === undefined ? def : val;
+            };
        },
-        addBoxGetterSetter: function(constructor, attr, def) {
-            this.addBoxGetter(constructor, attr, def);
-            this.addBoxSetter(constructor, attr);
-            this.addOverloadedGetterSetter(constructor, attr);
+        addSetter: function(constructor, attr) {
+            var method = SET + Kinetic.Util._capitalize(attr);

-            // add invdividual component getters and setters
-            this.addGetter(constructor, attr + UPPER_X, def);
-            this.addGetter(constructor, attr + UPPER_Y, def);
-            this.addGetter(constructor, attr + UPPER_WIDTH, def);
-            this.addGetter(constructor, attr + UPPER_HEIGHT, def);
-
-            this.addSetter(constructor, attr + UPPER_X);
-            this.addSetter(constructor, attr + UPPER_Y);
-            this.addSetter(constructor, attr + UPPER_WIDTH);
-            this.addSetter(constructor, attr + UPPER_HEIGHT);
-
-            this.addOverloadedGetterSetter(constructor, attr + UPPER_X);
-            this.addOverloadedGetterSetter(constructor, attr + UPPER_Y);
-            this.addOverloadedGetterSetter(constructor, attr + UPPER_WIDTH);
-            this.addOverloadedGetterSetter(constructor, attr + UPPER_HEIGHT);
+            constructor.prototype[method] = function(val) {
+                this._setAttr(attr, val); 
+                return this;  
+            };
        },
-        addPointsGetterSetter: function(constructor, attr) {
-            this.addPointsGetter(constructor, attr);
-            this.addPointsSetter(constructor, attr);
+        addComponentsGetterSetter: function(constructor, attr, components) {
+            var len = components.length,
+                capitalize = Kinetic.Util._capitalize,
+                getter = GET + capitalize(attr), 
+                setter = SET + capitalize(attr),
+                n, component;
+
+            // getter
+            constructor.prototype[getter] = function() {
+                var ret = {};
+
+                for (n=0; n<len; n++) {
+                    component = components[n];
+                    ret[component] = this.getAttr(attr + capitalize(component));
+                }
+
+                return ret;
+            };
+
+            // setter
+            constructor.prototype[setter] = function(val) {
+                var oldVal = this.attrs[attr],
+                    key;
+
+                for (key in val) {
+                    this._setAttr(attr + capitalize(key), val[key]); 
+                }
+
+                this._fireChangeEvent(attr, oldVal, val);
+                
+                return this;  
+            };
+
            this.addOverloadedGetterSetter(constructor, attr);
        },
+        addOverloadedGetterSetter: function(constructor, attr) {
+            var that = this,
+                capitalizedAttr = Kinetic.Util._capitalize(attr),
+                setter = SET + capitalizedAttr,
+                getter = GET + capitalizedAttr;
+
+            constructor.prototype[attr] = function() {
+                // setting
+                if (arguments.length) {
+                    this[setter](arguments[0]);
+                    return this;
+                }
+                // getting
+                else {
+                    return this[getter]();
+                }
+            }
+        },
+
+
+
+
+
+
+
+
+
+
+
+
        addColorGetterSetter: function(constructor, attr) {
            this.addGetter(constructor, attr);
            this.addSetter(constructor, attr);
@@ -132,50 +173,7 @@
                return this[prefix + RGB]()[c];
            };
        },
-        addPointsGetter: function(constructor, attr) {
-            var that = this,
-                method = GET + Kinetic.Util._capitalize(attr);

-            constructor.prototype[method] = function() {
-                var val = this.attrs[attr];
-                return val === undefined ? [] : val;
-            };
-        },
-        addGetter: function(constructor, attr, def) {
-            var that = this,
-                method = GET + Kinetic.Util._capitalize(attr);
-
-            constructor.prototype[method] = function() {
-                var val = this.attrs[attr];
-                return val === undefined ? def : val;
-            };
-        },
-        addPointGetter: function(constructor, attr) {
-            var that = this,
-                baseMethod = GET + Kinetic.Util._capitalize(attr);
-
-            constructor.prototype[baseMethod] = function() {
-                var that = this;
-                return {
-                    x: that[baseMethod + UPPER_X](),
-                    y: that[baseMethod + UPPER_Y]()
-                };
-            };
-        },
-        addBoxGetter: function(constructor, attr) {
-            var that = this,
-                baseMethod = GET + Kinetic.Util._capitalize(attr);
-
-            constructor.prototype[baseMethod] = function() {
-                var that = this;
-                return {
-                    x: that[baseMethod + UPPER_X](),
-                    y: that[baseMethod + UPPER_Y](),
-                    width: that[baseMethod + UPPER_WIDTH](),
-                    height: that[baseMethod + UPPER_HEIGHT]()
-                };
-            };
-        },

        // setter adders
        addColorRGBSetter: function(constructor, attr) {
@@ -201,21 +199,7 @@
                return this;
            };
        },
-        addPointsSetter: function(constructor, attr) {
-            var method = SET + Kinetic.Util._capitalize(attr);
-            constructor.prototype[method] = function(val) {
-                this._setAttr('points', val);
-                return this;
-            };
-        },
-        addSetter: function(constructor, attr) {
-            var method = SET + Kinetic.Util._capitalize(attr);

-            constructor.prototype[method] = function(val) {
-                this._setAttr(attr, val); 
-                return this;  
-            };
-        },
        addFilterSetter: function(constructor, attr) {
            var method = SET + Kinetic.Util._capitalize(attr);

@@ -224,81 +208,6 @@
                this._filterUpToDate = false;
                return this;  
            };
-        },
-        addPointSetter: function(constructor, attr) {
-            var that = this,
-                baseMethod = SET + Kinetic.Util._capitalize(attr);
-
-            constructor.prototype[baseMethod] = function(pos) {
-                var oldVal = this.attrs[attr],
-                    x = 0,
-                    y = 0;
-
-                if (pos) {
-                  x = pos.x;
-                  y = pos.y;
-
-                  if (x !== undefined) {
-                    this[baseMethod + UPPER_X](x);
-                  }
-                  if (y !== undefined) {
-                    this[baseMethod + UPPER_Y](y);
-                  }
-                  this._fireChangeEvent(attr, oldVal, pos);
-                }
-
-                return this;
-            };
-        },
-        addBoxSetter: function(constructor, attr) {
-            var that = this,
-                baseMethod = SET + Kinetic.Util._capitalize(attr);
-
-            constructor.prototype[baseMethod] = function(box) {
-                var oldVal = this.attrs[attr],
-                    x, y, width, height;
-
-                if (box) {
-                  x = box.x;
-                  y = box.y;
-                  width = box.width;
-                  height = box.height;
-
-                  if (x !== undefined) {
-                    this[baseMethod + UPPER_X](x);
-                  }
-                  if (y !== undefined) {
-                    this[baseMethod + UPPER_Y](y);
-                  }
-                  if (width !== undefined) {
-                    this[baseMethod + UPPER_WIDTH](width);
-                  }
-                  if (height !== undefined) {
-                    this[baseMethod + UPPER_HEIGHT](height);
-                  }
-                  this._fireChangeEvent(attr, oldVal, box);
-                }
-
-                return this;
-            };
-        },
-        addOverloadedGetterSetter: function(constructor, attr) {
-            var that = this,
-                capitalizedAttr = Kinetic.Util._capitalize(attr),
-                setter = SET + capitalizedAttr,
-                getter = GET + capitalizedAttr;
-
-            constructor.prototype[attr] = function() {
-                // setting
-                if (arguments.length) {
-                    this[setter](arguments[0]);
-                    return this;
-                }
-                // getting
-                else {
-                    return this[getter]();
-                }
-            }
        }
    };
 })();
--- a/src/Node.js
+++ b/src/Node.js
@@ -1638,7 +1638,7 @@
     * node.rotation(45);
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'scale', ['x', 'y']);

    /**
     * get/set scale
@@ -1660,6 +1660,8 @@
     * });
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scaleX', 1);
+
    /**
     * get/set scale x
     * @name scaleX
@@ -1675,6 +1677,8 @@
     * node.scaleX(2);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scaleY', 1);
+
    /**
     * get/set scale y
     * @name scaleY
@@ -1690,7 +1694,7 @@
     * node.scaleY(2);
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'skew', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'skew', ['x', 'y']);

    /**
     * get/set skew
@@ -1712,6 +1716,8 @@
     * });
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'skewX', 0);
+
    /**
     * get/set skew x
     * @name skewX
@@ -1727,6 +1733,8 @@
     * node.skewX(3);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'skewY', 0);
+
    /**
     * get/set skew y
     * @name skewY
@@ -1742,7 +1750,7 @@
     * node.skewY(3);
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'center', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'center', ['x', 'y']);

    /**
     * get/set center.  A node's center defines the position and rotation point
@@ -1763,6 +1771,8 @@
     * });
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerX', 0);
+
    /**
     * get/set center x
     * @name centerX
@@ -1777,6 +1787,8 @@
     * node.centerX(3);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerY', 0);
+
    /**
     * get/set center y
     * @name centerY
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -619,7 +619,7 @@
     * @returns {Number}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'shadowOffset', ['x', 'y']);

    /**
     * set shadow offset
@@ -638,6 +638,7 @@
     * });
     */

+    
    /**
     * get shadow offset
     * @name getShadowOffset
@@ -646,6 +647,8 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOffsetX', 0);
+
     /**
     * set shadow offset x
     * @name setShadowOffsetX
@@ -663,6 +666,8 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOffsetY', 0);
+
     /**
     * set shadow offset y
     * @name setShadowOffsetY
@@ -1040,7 +1045,7 @@
     * @returns {String}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillPatternOffset', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillPatternOffset', ['x', 'y']);

    /**
     * set fill pattern offset
@@ -1067,6 +1072,7 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternOffsetX', 0);
    /**
     * set fill pattern offset x
     * @name setFillPatternOffsetX
@@ -1084,6 +1090,7 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternOffsetY', 0);
    /**
     * set fill pattern offset y
     * @name setFillPatternOffsetY
@@ -1101,7 +1108,7 @@
     * @returns {Number}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillPatternScale', 1);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillPatternScale', ['x', 'y']);

    /**
     * set fill pattern scale
@@ -1128,6 +1135,8 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternScaleX', 1);
+
    /**
     * set fill pattern scale x
     * @name setFillPatternScaleX
@@ -1145,6 +1154,7 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternScaleY', 1);
    /**
     * set fill pattern scale y
     * @name setFillPatternScaleY
@@ -1162,7 +1172,7 @@
     * @returns {Number}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint', ['x', 'y']);

    /**
     * set fill linear gradient start point
@@ -1189,6 +1199,7 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPointX', 0);
    /**
     * set fill linear gradient start point x
     * @name setFillLinearGradientStartPointX
@@ -1206,6 +1217,7 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPointY', 0);
    /**
     * set fill linear gradient start point y
     * @name setFillLinearGradientStartPointY
@@ -1223,7 +1235,7 @@
     * @returns {Number}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint', ['x', 'y']);

    /**
     * set fill linear gradient end point
@@ -1248,6 +1260,7 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPointX', 0);
    /**
     * set fill linear gradient end point x
     * @name setFillLinearGradientEndPointX
@@ -1265,6 +1278,7 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPointY', 0);
    /**
     * set fill linear gradient end point y
     * @name setFillLinearGradientEndPointY
@@ -1282,7 +1296,7 @@
     * @returns {Number}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint', ['x', 'y']);

    /**
     * set fill radial gradient start point
@@ -1309,6 +1323,8 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPointX', 0);
+
    /**
     * set fill radial gradient start point x
     * @name setFillRadialGradientStartPointX
@@ -1326,6 +1342,8 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPointY', 0);
+
    /**
     * set fill radial gradient start point y
     * @name setFillRadialGradientStartPointY
@@ -1343,7 +1361,7 @@
     * @returns {Number}
     */

-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint', ['x', 'y']);

    /**
     * set fill radial gradient end point
@@ -1370,6 +1388,8 @@
     * @returns {Object}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPointX', 0);
+
     /**
     * set fill radial gradient end point x
     * @name setFillRadialGradientEndPointX
@@ -1387,6 +1407,8 @@
     * @returns {Number}
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPointY', 0);
+
    /**
     * set fill radial gradient end point y
     * @name setFillRadialGradientEndPointY
--- a/src/shapes/Ellipse.js
+++ b/src/shapes/Ellipse.js
@@ -64,7 +64,7 @@
    Kinetic.Util.extend(Kinetic.Ellipse, Kinetic.Shape);

    // add getters setters
-    Kinetic.Factory.addPointGetterSetter(Kinetic.Ellipse, 'radius', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Ellipse, 'radius', ['x', 'y']);

    /**
     * get/set radius
@@ -86,6 +86,7 @@
     * });
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Ellipse, 'radiusX', 0);
    /**
     * get/set radius x
     * @name setRadiusX
@@ -101,6 +102,7 @@
     * ellipse.radiusX(200);
     */

+    Kinetic.Factory.addGetterSetter(Kinetic.Ellipse, 'radiusY', 0);
    /**
     * get/set radius y
     * @name setRadiusY
--- a/src/shapes/Image.js
+++ b/src/shapes/Image.js
@@ -108,7 +108,7 @@
     * @returns {ImageObject}
     */

-    Kinetic.Factory.addBoxGetterSetter(Kinetic.Image, 'crop', 0);
+    Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image, 'crop', ['x', 'y', 'width', 'height']);
    /**
     * get/set crop
     * @method
@@ -133,7 +133,8 @@
     * });
     */

-     /**
+    Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropX', 0);
+    /**
     * get/set crop x
     * @method
     * @name cropX
@@ -148,7 +149,8 @@
     * image.cropX(20);
     */

-     /**
+    Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropY', 0);
+    /**
     * get/set crop y
     * @name cropY
     * @method
@@ -163,7 +165,8 @@
     * image.cropY(20);
     */

-     /**
+    Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropWidth', 0);
+    /**
     * get/set crop width
     * @name cropWidth
     * @method
@@ -178,7 +181,8 @@
     * image.cropWidth(20);
     */

-     /**
+    Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropHeight', 0);
+    /**
     * get/set crop height
     * @name cropHeight
     * @method
--- a/test/unit/shapes/Image-test.js
+++ b/test/unit/shapes/Image-test.js
@@ -37,6 +37,7 @@ suite('Image', function(){

          var crop = null;
          crop = darth.getCrop();
+
          assert.equal(crop.x, 135);
          assert.equal(crop.y, 7);
          assert.equal(crop.width, 167);