Allow DOM element as well as element id in Space constructor parameter

docs/json/core/CanvasSpace.json

@@ -8,10 +8,10 @@
             "description": "<h2>Create a CanvasSpace which represents a HTML Canvas Space</h2>", 
             "name": "CanvasSpace", 
             "param": [
-                "<p><code>id</code> an optional string which refers to the \"id\" attribute of a DOM element. It can either refer to an existing <code>&lt;canvas&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;canvas&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt_container\"&gt;&lt;canvas id=\"pt\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
+                "<p><code>elem</code> Either a string which refers to the \"id\" attribute of a Canvas element, or the Canvas element itself. It can either refer to an existing <code>&lt;canvas&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;canvas&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt_container\"&gt;&lt;canvas id=\"pt\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
                 "<p><code>callback</code> an optional callback <code>function(boundingBox, spaceElement)</code> to be called when canvas is appended and ready. A \"ready\" event will also be fired from the <code>&lt;canvas&gt;</code> element when it's appended, which can be traced with <code>spaceInstance.space.addEventListener(\"ready\")</code></p>"
             ], 
-            "pname": "id, callback"
+            "pname": "elem, callback"
         }, 
         {
             "description": "<h2><code>display(...)</code> is deprecated as of 0.2.0. You can now set the canvas element directly in the constructor, and customize it using <code>setup()</code>.</h2>", 

docs/json/core/Color.json

@@ -66,6 +66,11 @@
         }
     ], 
     "props": [
+        {
+            "description": "<h2>alpha value from 0 to 1, where 0 is fully transparent, and 1 is fully opaque</h2>", 
+            "name": "alpha", 
+            "param": []
+        }, 
         {
             "description": "<h2>color mode id such as \"lab\" or \"rgb\"</h2>", 
             "name": "mode", 

docs/json/core/DOMSpace.json

@@ -8,11 +8,11 @@
             "description": "<h2>Create a DOMSpace which represents a HTML DOM</h2>", 
             "name": "DOMSpace", 
             "param": [
-                "<p><code>id</code> an id property which refers to the \"id\" attribute of the element in DOM.</p>", 
+                "<p><code>elem</code> Either a string which refers to the \"id\" attribute of a DOM element, or the DOM element itself.</p>", 
                 "<p><code>callback</code> an optional callback <code>function(boundingBox, spaceElement)</code> to be called when element is appended and ready. A \"ready\" event will also be fired from the space's element when it's appended, which can be tracked with <code>spaceInstance.space.addEventListener(\"ready\")</code></p>", 
-                "<p><code>spaceElement</code> a string of space's dom element name, such as <code>\"div\"</code> or <code>\"svg\"</code> or . Default is <code>\"div\"</code></p>"
+                "<p><code>spaceElement</code> an optional string of space's dom element name, such as <code>\"div\"</code> or <code>\"svg\"</code> or . Default is <code>\"div\"</code></p>"
             ], 
-            "pname": "id, callback, spaceElement=\"div\""
+            "pname": "elem, callback, spaceElement=\"div\""
         }, 
         {
             "description": "<h2><code>display(...)</code> is deprecated as of 0.2.0. You can now set the DOM element directly in the constructor, and customize it using <code>setup()</code>.</h2>", 

docs/json/core/SVGSpace.json

@@ -8,7 +8,7 @@
             "description": "<h2>Create a SVGSpace which represents a svg element</h2>", 
             "name": "SVGSpace", 
             "param": [
-                "<p><code>id</code> an optional string which refers to the \"id\" attribute of a DOM element. It can either refer to an existing <code>&lt;svg&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;svg&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt\"&gt;&lt;svg id=\"pt_svg\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
+                "<p><code>id</code> Either a string which refers to the \"id\" attribute of a DOM element, or the DOM element itself. It can either refer to an existing <code>&lt;svg&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;svg&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt\"&gt;&lt;svg id=\"pt_svg\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
                 "<p><code>callback</code> an optional callback <code>function(boundingBox, spaceElement)</code> to be called when element is appended and ready. A \"ready\" event will also be fired from the space's element when it's appended, which can be tracked with <code>spaceInstance.space.addEventListener(\"ready\")</code></p>"
             ], 
             "pname": "id, callback"

docs/json/core/all.json

@@ -9,10 +9,10 @@
         "description": "<h2>Create a CanvasSpace which represents a HTML Canvas Space</h2>", 
         "name": "CanvasSpace", 
         "param": [
-          "<p><code>id</code> an optional string which refers to the \"id\" attribute of a DOM element. It can either refer to an existing <code>&lt;canvas&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;canvas&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt_container\"&gt;&lt;canvas id=\"pt\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
+          "<p><code>elem</code> Either a string which refers to the \"id\" attribute of a Canvas element, or the Canvas element itself. It can either refer to an existing <code>&lt;canvas&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;canvas&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt_container\"&gt;&lt;canvas id=\"pt\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
           "<p><code>callback</code> an optional callback <code>function(boundingBox, spaceElement)</code> to be called when canvas is appended and ready. A \"ready\" event will also be fired from the <code>&lt;canvas&gt;</code> element when it's appended, which can be traced with <code>spaceInstance.space.addEventListener(\"ready\")</code></p>"
         ], 
-        "pname": "id, callback"
+        "pname": "elem, callback"
       }, 
       {
         "description": "<h2><code>display(...)</code> is deprecated as of 0.2.0. You can now set the canvas element directly in the constructor, and customize it using <code>setup()</code>.</h2>", 
@@ -246,6 +246,11 @@
       }
     ], 
     "props": [
+      {
+        "description": "<h2>alpha value from 0 to 1, where 0 is fully transparent, and 1 is fully opaque</h2>", 
+        "name": "alpha", 
+        "param": []
+      }, 
       {
         "description": "<h2>color mode id such as \"lab\" or \"rgb\"</h2>", 
         "name": "mode", 
@@ -712,11 +717,11 @@
         "description": "<h2>Create a DOMSpace which represents a HTML DOM</h2>", 
         "name": "DOMSpace", 
         "param": [
-          "<p><code>id</code> an id property which refers to the \"id\" attribute of the element in DOM.</p>", 
+          "<p><code>elem</code> Either a string which refers to the \"id\" attribute of a DOM element, or the DOM element itself.</p>", 
           "<p><code>callback</code> an optional callback <code>function(boundingBox, spaceElement)</code> to be called when element is appended and ready. A \"ready\" event will also be fired from the space's element when it's appended, which can be tracked with <code>spaceInstance.space.addEventListener(\"ready\")</code></p>", 
-          "<p><code>spaceElement</code> a string of space's dom element name, such as <code>\"div\"</code> or <code>\"svg\"</code> or . Default is <code>\"div\"</code></p>"
+          "<p><code>spaceElement</code> an optional string of space's dom element name, such as <code>\"div\"</code> or <code>\"svg\"</code> or . Default is <code>\"div\"</code></p>"
         ], 
-        "pname": "id, callback, spaceElement=\"div\""
+        "pname": "elem, callback, spaceElement=\"div\""
       }, 
       {
         "description": "<h2><code>display(...)</code> is deprecated as of 0.2.0. You can now set the DOM element directly in the constructor, and customize it using <code>setup()</code>.</h2>", 
@@ -2829,7 +2834,7 @@
         "description": "<h2>Create a SVGSpace which represents a svg element</h2>", 
         "name": "SVGSpace", 
         "param": [
-          "<p><code>id</code> an optional string which refers to the \"id\" attribute of a DOM element. It can either refer to an existing <code>&lt;svg&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;svg&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt\"&gt;&lt;svg id=\"pt_svg\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
+          "<p><code>id</code> Either a string which refers to the \"id\" attribute of a DOM element, or the DOM element itself. It can either refer to an existing <code>&lt;svg&gt;</code>, or a <code>&lt;div&gt;</code> container in which a new <code>&lt;svg&gt;</code> will be created. If left empty, a <code>&lt;div id=\"pt\"&gt;&lt;svg id=\"pt_svg\" /&gt;&lt;/div&gt;</code> will be added to DOM. Use css to customize its appearance if needed.</p>", 
           "<p><code>callback</code> an optional callback <code>function(boundingBox, spaceElement)</code> to be called when element is appended and ready. A \"ready\" event will also be fired from the space's element when it's appended, which can be tracked with <code>spaceInstance.space.addEventListener(\"ready\")</code></p>"
         ], 
         "pname": "id, callback"

src/coffee/core/CanvasSpace.coffee

@@ -3,13 +3,14 @@
 class CanvasSpace extends Space
 
   # ## Create a CanvasSpace which represents a HTML Canvas Space
-  # @param `id` an optional string which refers to the "id" attribute of a DOM element. It can either refer to an existing `<canvas>`, or a `<div>` container in which a new `<canvas>` will be created. If left empty, a `<div id="pt_container"><canvas id="pt" /></div>` will be added to DOM. Use css to customize its appearance if needed.
+  # @param `elem` Either a string which refers to the "id" attribute of a Canvas element, or the Canvas element itself. It can either refer to an existing `<canvas>`, or a `<div>` container in which a new `<canvas>` will be created. If left empty, a `<div id="pt_container"><canvas id="pt" /></div>` will be added to DOM. Use css to customize its appearance if needed.
   # @param `callback` an optional callback `function(boundingBox, spaceElement)` to be called when canvas is appended and ready. A "ready" event will also be fired from the `<canvas>` element when it's appended, which can be traced with `spaceInstance.space.addEventListener("ready")`
-  constructor : ( id, callback ) ->
-    if (!id) then id = 'pt'
-    super( id )
+  constructor : ( elem, callback ) ->
+    if (!elem) then elem = 'pt'
 
-    @id = if (@id[0] == "#") then @id.substr(1) else @id
+    isElement = elem instanceof Element
+
+    super( if (isElement) then "pt_custom_space" else elem )
 
     # ## A property to store canvas DOM element
     @space = null
@@ -19,8 +20,15 @@ class CanvasSpace extends Space
     @pixelScale = 1
     @_autoResize = true
 
-    _selector = document.querySelector("#"+@id)
-    _existed = true
+    _selector = null
+
+    if (isElement)
+      _selector = elem
+    else
+      @id = if (@id[0] == "#") then @id.substr(1) else @id
+      _selector = document.querySelector("#"+@id)
+      _existed = true
+
 
     # if selector is not defined, create a canvas
     if !_selector

src/coffee/core/Color.coffee

@@ -9,8 +9,9 @@ class Color extends Vector
   constructor: ( args ) ->
     super
 
-    # ## alpha value from 0 to 1, where 0 is fully transparent, and 1 is fully opaque
     _args = if ( Array.isArray(arguments[0]) and arguments[0][3] != undefined ) then arguments[0] else arguments
+
+    # ## alpha value from 0 to 1, where 0 is fully transparent, and 1 is fully opaque
     @alpha = if _args.length >=4 then Math.min( 1, Math.max( _args[3], 0) ) else 1
 
     # ## color mode id such as "lab" or "rgb"

src/coffee/core/DOMSpace.coffee

@@ -3,14 +3,15 @@
 class DOMSpace extends Space
 
   # ## Create a DOMSpace which represents a HTML DOM
-  # @param `id` an id property which refers to the "id" attribute of the element in DOM.
+  # @param `elem` Either a string which refers to the "id" attribute of a DOM element, or the DOM element itself.
   # @param `callback` an optional callback `function(boundingBox, spaceElement)` to be called when element is appended and ready. A "ready" event will also be fired from the space's element when it's appended, which can be tracked with `spaceInstance.space.addEventListener("ready")`
-  # @param `spaceElement` a string of space's dom element name, such as `"div"` or `"svg"` or . Default is `"div"`
-  constructor: ( id, callback, spaceElement="div" ) ->
-    if (!id) then id = 'pt'
-    super( id )
+  # @param `spaceElement` an optional string of space's dom element name, such as `"div"` or `"svg"` or . Default is `"div"`
+  constructor: ( elem, callback, spaceElement="div" ) ->
+    if (!elem) then elem = 'pt'
+
+    isElement = elem instanceof Element
 
-    @id = if (@id[0] == "#") then @id.substr(1) else @id
+    super( if (isElement) then "pt_custom_space" else elem )
 
     # ## A property to store the DOM element
     @space = null
@@ -19,7 +20,14 @@ class DOMSpace extends Space
 
     @css = {};
 
-    _selector = document.querySelector("#"+@id)
+    _selector = null
+
+    if (isElement)
+      _selector = elem
+    else
+      @id = if (@id[0] == "#") then @id.substr(1) else @id
+      _selector = document.querySelector("#"+@id)
+
 
     # if selector is not defined, create the spaceElement element
     if !_selector

src/coffee/core/SVGSpace.coffee

@@ -2,7 +2,7 @@
 class SVGSpace extends DOMSpace
 
   # ## Create a SVGSpace which represents a svg element
-  # @param `id` an optional string which refers to the "id" attribute of a DOM element. It can either refer to an existing `<svg>`, or a `<div>` container in which a new `<svg>` will be created. If left empty, a `<div id="pt"><svg id="pt_svg" /></div>` will be added to DOM. Use css to customize its appearance if needed.
+  # @param `id` Either a string which refers to the "id" attribute of a DOM element, or the DOM element itself. It can either refer to an existing `<svg>`, or a `<div>` container in which a new `<svg>` will be created. If left empty, a `<div id="pt"><svg id="pt_svg" /></div>` will be added to DOM. Use css to customize its appearance if needed.
   # @param `callback` an optional callback `function(boundingBox, spaceElement)` to be called when element is appended and ready. A "ready" event will also be fired from the space's element when it's appended, which can be tracked with `spaceInstance.space.addEventListener("ready")`
   constructor: ( id, callback ) ->
     super( id, callback, 'svg')