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

dist/svg.js

@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Sun Nov 25 2018 13:00:14 GMT+0100 (GMT+01:00)
+* BUILT: Mon Nov 26 2018 14:01:22 GMT+0100 (GMT+01:00)
 */;
 var SVG = (function () {
   'use strict';
@@ -1015,7 +1015,7 @@ var SVG = (function () {
     return true;
   }
 
-  function getParameters(a) {
+  function getParameters(a, b) {
     var params = is(a, 'rgb') ? {
       _a: a.r,
       _b: a.g,
@@ -1025,21 +1025,25 @@ var SVG = (function () {
       _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,
@@ -1053,6 +1057,7 @@ var SVG = (function () {
       _c: 0,
       space: 'rgb'
     };
+    params.space = b || params.space;
     return params;
   }
 
@@ -1091,6 +1096,13 @@ var SVG = (function () {
         var d = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
         var space = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'rgb';
 
+        // Reset all values in case the init function is rerun with new color space
+        if (this.space) {
+          for (var 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;
@@ -1104,16 +1116,16 @@ var SVG = (function () {
             space: space
           }); // If the user gave us an array, make the color from it
         } else if (a instanceof Array) {
-          this.space = b || 'rgb';
+          this.space = b || a[4] || 'rgb';
           Object.assign(this, {
             _a: a[0],
             _b: a[1],
             _c: a[2],
-            _d: a[3]
+            _d: a[3] || 0
           });
         } else if (a instanceof Object) {
           // Set the object up and assign its values directly
-          var values = getParameters(a);
+          var values = getParameters(a, b);
           Object.assign(this, values);
         } else if (typeof a === 'string') {
           if (isRgb.test(a)) {
@@ -1131,6 +1143,7 @@ var SVG = (function () {
               _a: _a2,
               _b: _b2,
               _c: _c2,
+              _d: 0,
               space: 'rgb'
             });
           } else if (isHex.test(a)) {
@@ -1148,6 +1161,7 @@ var SVG = (function () {
               _a: _a3,
               _b: _b3,
               _c: _c3,
+              _d: 0,
               space: 'rgb'
             });
           } else throw Error("Unsupported string format, can't construct Color");
@@ -1273,6 +1287,8 @@ var SVG = (function () {
           _l /= 100; // If we are grey, then just make the color directly
 
           if (s === 0) {
+            _l *= 255;
+
             var _color2 = new Color(_l, _l, _l);
 
             return _color2;
@@ -3226,7 +3242,7 @@ var SVG = (function () {
         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

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'

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

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) {

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
       }