remove translate and rotate for elt issue #1200

Author: Lauren McCarthy

lib/addons/p5.dom.js

@@ -54,7 +54,7 @@
    * function setup() {
    *   createCanvas(100,100);
    *   //translates canvas 50px down
-   *   select('canvas').translate(0,50);
+   *   select('canvas').position(100, 100);
    * }
    * </code></div>
    * <div ><code class='norender'>
@@ -1160,25 +1160,25 @@
     }
   };
 
-  /**
-   * Translates an element with css transforms in either 2d (if 2 arguments given)
-   * or 3d (if 3 arguments given) space.
-   * @method  translate
-   * @param  {Number} x x-position in px
-   * @param  {Number} y y-position in px
-   * @param  {Number} [z] z-position in px
-   * @param  {Number} [perspective] sets the perspective of the parent element in px,
-   * default value set to 1000px
-   * @return {Object/p5.Element}
-   * @example
-   * <div ><code class='norender'>
-   * function setup() {
-   *   var cnv = createCanvas(100,100);
-   *   //translates canvas 50px down
-   *   cnv.translate(0,50);
-   * }
-   * </code></div>
-   */
+  // *
+  //  * Translates an element with css transforms in either 2d (if 2 arguments given)
+  //  * or 3d (if 3 arguments given) space.
+  //  * @method  translate
+  //  * @param  {Number} x x-position in px
+  //  * @param  {Number} y y-position in px
+  //  * @param  {Number} [z] z-position in px
+  //  * @param  {Number} [perspective] sets the perspective of the parent element in px,
+  //  * default value set to 1000px
+  //  * @return {Object/p5.Element}
+  //  * @example
+  //  * <div ><code class='norender'>
+  //  * function setup() {
+  //  *   var cnv = createCanvas(100,100);
+  //  *   //translates canvas 50px down
+  //  *   cnv.translate(0,50);
+  //  * }
+  //  * </code></div>
+   
   // p5.Element.prototype.translate = function(){
   //   this.elt.style.position = 'absolute';
   //   // save out initial non-translate transform styling
@@ -1202,50 +1202,50 @@
   //   return this;
   // };
 
-  /**
-   * Rotates an element with css transforms in either 2d (if 2 arguments given)
-   * or 3d (if 3 arguments given) space.
-   * @method  rotate
-   * @param  {Number} x amount of degrees to rotate the element along the x-axis in deg
-   * @param  {Number} [y] amount of degrees to rotate the element along the y-axis in deg
-   * @param  {Number} [z] amount of degrees to rotate the element along the z-axis in deg
-   * @return {Object/p5.Element}
-   * @example
-   * <div><code>
-   * var x = 0,
-   *     y = 0,
-   *     z = 0;
-   *
-   * function draw(){
-   *   x+=.5 % 360;
-   *   y+=.5 % 360;
-   *   z+=.5 % 360;
-   *   //rotates p5.js logo .5 degrees on every axis each frame.
-   *   select('canvas').rotate(x,y,z);
-   * }
-   * </code></div>
-   */
-  p5.Element.prototype.rotate = function(){
-    // save out initial non-rotate transform styling
-    var transform = '';
-    if (this.elt.style.transform) {
-      var transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
-      transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
-    }
+  // *
+  //  * Rotates an element with css transforms in either 2d (if 2 arguments given)
+  //  * or 3d (if 3 arguments given) space.
+  //  * @method  rotate
+  //  * @param  {Number} x amount of degrees to rotate the element along the x-axis in deg
+  //  * @param  {Number} [y] amount of degrees to rotate the element along the y-axis in deg
+  //  * @param  {Number} [z] amount of degrees to rotate the element along the z-axis in deg
+  //  * @return {Object/p5.Element}
+  //  * @example
+  //  * <div><code>
+  //  * var x = 0,
+  //  *     y = 0,
+  //  *     z = 0;
+  //  *
+  //  * function draw(){
+  //  *   x+=.5 % 360;
+  //  *   y+=.5 % 360;
+  //  *   z+=.5 % 360;
+  //  *   //rotates p5.js logo .5 degrees on every axis each frame.
+  //  *   select('canvas').rotate(x,y,z);
+  //  * }
+  //  * </code></div>
+   
+  // p5.Element.prototype.rotate = function(){
+  //   // save out initial non-rotate transform styling
+  //   var transform = '';
+  //   if (this.elt.style.transform) {
+  //     var transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+  //     transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
+  //   }
 
-    if (arguments.length === 1){
-      this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
-    }else if (arguments.length === 2){
-      this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
-    }else if (arguments.length === 3){
-      this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
-      this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
-      this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
-    }
-    // add remaining transform back on
-    this.elt.style.transform += transform;
-    return this;
-  };
+  //   if (arguments.length === 1){
+  //     this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
+  //   }else if (arguments.length === 2){
+  //     this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
+  //   }else if (arguments.length === 3){
+  //     this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
+  //     this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
+  //     this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
+  //   }
+  //   // add remaining transform back on
+  //   this.elt.style.transform += transform;
+  //   return this;
+  // };
 
   /**
    * Sets the given style (css) property (1st arg) of the element with the