Make color-animation work in all spaces (conversion bugs still there)

- Make sure _d is always defined
- Clean up object before init
- Check space in array
- Use passed space instead of space in object if available

4 files changed, 23 insertions, 13 deletions

diff --git a/src/elements/Dom.js b/src/elements/Dom.js
index 566008c..bccfbb8 100644
--- a/src/elements/Dom.js
+++ b/src/elements/Dom.js
@@ -6,7 +6,7 @@ import {
   makeInstance,
   register
 } from '../utils/adopter.js'
-import { find } from '../modules/core/selector'
+import { find } from '../modules/core/selector.js'
 import { globals } from '../utils/window.js'
 import { map } from '../utils/utils.js'
 import { ns } from '../modules/core/namespaces.js'
diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js
index 3bd61fb..18f3e78 100644
--- a/src/modules/optional/sugar.js
+++ b/src/modules/optional/sugar.js
@@ -24,7 +24,7 @@ var sugar = {
     if (typeof o === 'undefined') {
       return this.attr(m)
     }
-    if (typeof o === 'string' || Color.isRgb(o) || (o instanceof Element)) {
+    if (typeof o === 'string' || o instanceof Color || Color.isRgb(o) || (o instanceof Element)) {
       this.attr(m, o)
     } else {
       // set all attributes from sugar.fill and sugar.stroke list
diff --git a/src/svg.js b/src/svg.js
index 4026598..a9903fe 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -1,6 +1,6 @@
 import * as svgMembers from './main.js'
 import * as regex from './modules/core/regex.js'
-import { makeInstance } from './utils/adopter'
+import { makeInstance } from './utils/adopter.js'
 
 // The main wrapping element
 export default function SVG (element) {
diff --git a/src/types/Color.js b/src/types/Color.js
index 3975aef..3cd7dd0 100644
--- a/src/types/Color.js
+++ b/src/types/Color.js
@@ -26,14 +26,16 @@ function is (object, space) {
   return true
 }
 
-function getParameters (a) {
+function getParameters (a, b) {
   const params = is(a, 'rgb') ? { _a: a.r, _b: a.g, _c: a.b, space: 'rgb' }
-    : is(a, 'xyz') ? { _a: a.x, _b: a.y, _c: a.z, space: 'xyz' }
-    : is(a, 'hsl') ? { _a: a.h, _b: a.s, _c: a.l, space: 'hsl' }
-    : is(a, 'lab') ? { _a: a.l, _b: a.a, _c: a.b, space: 'lab' }
-    : is(a, 'lch') ? { _a: a.l, _b: a.c, _c: a.h, space: 'lch' }
+    : is(a, 'xyz') ? { _a: a.x, _b: a.y, _c: a.z, _d: 0, space: 'xyz' }
+    : is(a, 'hsl') ? { _a: a.h, _b: a.s, _c: a.l, _d: 0, space: 'hsl' }
+    : is(a, 'lab') ? { _a: a.l, _b: a.a, _c: a.b, _d: 0, space: 'lab' }
+    : is(a, 'lch') ? { _a: a.l, _b: a.c, _c: a.h, _d: 0, space: 'lch' }
     : is(a, 'cmyk') ? { _a: a.c, _b: a.m, _c: a.y, _d: a.k, space: 'cmyk' }
     : { _a: 0, _b: 0, _c: 0, space: 'rgb' }
+
+  params.space = b || params.space
   return params
 }
 
@@ -60,6 +62,13 @@ export default class Color {
   }
 
   init (a = 0, b = 0, c = 0, d = 0, space = 'rgb') {
+    // Reset all values in case the init function is rerun with new color space
+    if (this.space) {
+      for (let component in this.space) {
+        delete this[this.space[component]]
+      }
+    }
+
     if (typeof a === 'number') {
       // Allow for the case that we don't need d...
       space = typeof d === 'string' ? d : space
@@ -69,22 +78,22 @@ export default class Color {
       Object.assign(this, { _a: a, _b: b, _c: c, _d: d, space })
     // If the user gave us an array, make the color from it
     } else if (a instanceof Array) {
-      this.space = b || 'rgb'
-      Object.assign(this, { _a: a[0], _b: a[1], _c: a[2], _d: a[3] })
+      this.space = b || a[4] || 'rgb'
+      Object.assign(this, { _a: a[0], _b: a[1], _c: a[2], _d: a[3] || 0 })
     } else if (a instanceof Object) {
       // Set the object up and assign its values directly
-      const values = getParameters(a)
+      const values = getParameters(a, b)
       Object.assign(this, values)
     } else if (typeof a === 'string') {
       if (isRgb.test(a)) {
         const noWhitespace = a.replace(whitespace, '')
         const [ _a, _b, _c ] = rgb.exec(noWhitespace)
           .slice(1, 4).map(v => parseInt(v))
-        Object.assign(this, { _a, _b, _c, space: 'rgb' })
+        Object.assign(this, { _a, _b, _c, _d: 0, space: 'rgb' })
       } else if (isHex.test(a)) {
         const hexParse = v => parseInt(v, 16)
         const [ , _a, _b, _c ] = hex.exec(sixDigitHex(a)).map(hexParse)
-        Object.assign(this, { _a, _b, _c, space: 'rgb' })
+        Object.assign(this, { _a, _b, _c, _d: 0, space: 'rgb' })
       } else throw Error(`Unsupported string format, can't construct Color`)
     }
 
@@ -173,6 +182,7 @@ export default class Color {
 
       // If we are grey, then just make the color directly
       if (s === 0) {
+        l *= 255
         let color = new Color(l, l, l)
         return color
       }