fix brands bug + add grays

examples/examples-browser/views/colors.html

@@ -65,6 +65,7 @@
     .sw_sm div {
         width: 100%;
         height: 100%;
+        box-shadow: #1f3150 0px 1px 2px 0px;
     }
     .slider-start {
         position: absolute;
@@ -600,6 +601,8 @@
 
     return out_put;
     }
+    window.thresh = 10;
+  window.theThresh = 15;
   var colors = [];
   var coolTags = ['Lips', 'Lipstick', 'Blush', 'Eyes', 'Eyeliner'];
 
@@ -797,14 +800,15 @@
         ctx = c.getContext( '2d' );
     ctx.clearRect(0,0,c.clientWidth, c.clientHeight);
       var testItems = [];
-      for( var j = 0.05; j < 0.95; j += 0.1 ){
-        var dots = 300 * 2 * 3.141592 / 100 * j * 3, step = 6.28 / dots;
+      for( var j = 0.08; j < 0.93; j += 0.11 ){
+        var dots = 300 * 2 * 3.141592 / 100 * j * 2.1, step = 6.28 / dots;
         for( var i = 0; i < 6; i += step ){
 
           var p = new Point( 250 * j, 0 ).rotate( i ).add( 250, 250 );
           var clr = hsvToRgb( i / 6.28, j < 0.5 ? j * 2 : 1, j > 0.5 ? ( ( 1 - j ) ) * 2 : 1 );
 
           var item = {
+            gray: false,
             rgb: clr,
             lab: rgbToLab.apply( null, clr ),
             p: p,
@@ -821,6 +825,7 @@
         var p = new Point( 290 , 0 ).rotate( i/256*6.28/4 ).add( 250, 250 );
 
         testItems.push( {
+          gray: true,
           rgb: clr,
           lab: rgbToLab.apply( null, clr ),
           p: p,
@@ -839,6 +844,7 @@
         var closest = 100, closestItem = false;
         for( var j = 0, _j = testItems.length; j < _j; j++ ){
           var testItem = testItems[ j ];
+         // testItem.matched +=1;
           var distance = labDistance( labColor.lab, testItem.lab );
           if( distance < closest ){
             /*if( distance < 5 && closestItem ){
@@ -895,7 +901,7 @@
 
       var removed = {};
 
-      var sectors = [],  angle = 15, thresh = 10;
+      var sectors = [],  angle = 15, thresh = window.thresh;
 
 
       ff = filteredItems.filter((f,m)=>{
@@ -925,17 +931,22 @@
       for(var i = 0; i < 360; i+=angle){
         sectors.push([]);
       }
+      var grays = sectors.push([])-1;
       for( var i = 0, _i = ff.length; i < _i; i++ ){
         var filteredItem = ff[ i ],
           hsv = rgbToHsv.apply(null, filteredItem.rgb);
-        filteredItem.hsv = hsv;
 
-        sectors[(hsv[0]*360/angle)|0].push(filteredItem);
+        filteredItem.hsv = hsv;
+        if(!filteredItem.gray){
+          sectors[ ( hsv[ 0 ] * 360 / angle ) | 0 ].push( filteredItem );
+        }else{
+          sectors[ grays ].push( filteredItem );
+        }
       }
       sectors.forEach(function(sector) {
         if(sector.length === 1){
             megaFilter.push(sector[0]);
-        }else if(sector.length === 2){
+        }/*else if(sector.length === 2){
             if(labDistance(sector[0].lab,sector[1].lab)<14){
               var middle = {hsv: [
                   (sector[0].hsv[0]+sector[1].hsv[0])/2,
@@ -951,7 +962,7 @@
             }else{
               other.push(sector);
             }
-        }else{
+        }*/else{
           other.push(sector);
         }
       });
@@ -991,7 +1002,7 @@
 
       }
       megaFilter.sort((a,b)=>{
-        return ( a.hsv[ 0 ] - b.hsv[ 0 ] ) * 50 + ( b.hsv[ 2 ] - a.hsv[ 2 ] ) * 35 + ( a.hsv[ 1 ] - b.hsv[ 1 ] ) * 2;
+        return ( a.hsv[ 0 ] - b.hsv[ 0 ] ) * -50 + ( b.hsv[ 2 ] - a.hsv[ 2 ] ) * 25 + ( a.hsv[ 1 ] - b.hsv[ 1 ] ) * 0;
       })
     var somethingSelected = false;
       D.replaceChildren(document.getElementById( 'yep3' ),D.div( {},
@@ -1025,56 +1036,65 @@
 
         ctx.fillRect( p.x-4, p.y-4, 8,8 )
       }*/
-    var searchResults = [];
+    var searchResults = [];var theThresh = window.theThresh;
     D.replaceChildren(document.getElementById( 'BrandCollapse' ), new Collapse({
       label: 'Brand',
       value: s.bind('BrandCollapse')
     }, D.div( {},
       Object.keys(vendors).map(v=>{
         var variantExist = true;
+       /* if(!allBrandsDeselected){
+          if(brand.indexOf(v)===-1)
+            return ;
+        }*/
         if(somethingSelected){
           variantExist = false
           var products = vendors[v];
           //outer:
-          for( var i = 0, _i = products.length; i < _i; i++ ){
-            var product = products[ i ],
+          if(allBrandsDeselected || brand.indexOf(v) > -1){
+            for( var i = 0, _i = products.length; i < _i; i++ ){
+              var product = products[ i ],
                 variants = product.variants;
 
-            var subM = false;
-            var matchHash = {};
-            for( var j = 0, _j = variants.length; j < _j; j++ ){
-              var variant = variants[ j ];
-              var clr = variant.option2;
-              var r = HEX2RGB( clr );
-              if( isNaN( r[ 0 ] ) ){
-                continue;
-              }
-              for( var k = 0, _k = selectedColors.length; k < _k; k++ ){
-                const selected = selectedColors[ k ].split(',').map(Number);
-                if(labDistance(rgbToLab.apply(null, r), rgbToLab.apply(null, selected))<15){
-                  variantExist = true
-                  matchHash[variant.id] = true;
-                  subM = true;
-                  break;
+              var subM = false;
+              var matchHash = {};
+              for( var j = 0, _j = variants.length; j < _j; j++ ){
+                var variant = variants[ j ];
+                var clr = variant.option2;
+                var r = HEX2RGB( clr );
+                if( isNaN( r[ 0 ] ) ){
+                  continue;
+                }
+                for( var k = 0, _k = selectedColors.length; k < _k; k++ ){
+                  const selected = selectedColors[ k ].split( ',' ).map( Number );
+                  if( labDistance( rgbToLab.apply( null, r ), rgbToLab.apply( null, selected ) ) < theThresh ){
+                    variantExist = true
+                    matchHash[ variant.id ] = true;
+                    subM = true;
+                    break;
+                  }
                 }
-              }
 
 
-            }
-            if(subM){
-              searchResults.push( {
-                product: product,
-                variants: product.variants.map( v => ( {
-                  matched: v.id in matchHash,
-                  v: v
-                } ) )
-              } )
+              }
+              if( subM ){
+                searchResults.push( {
+                  product: product,
+                  variants: product.variants.map( v => ( {
+                    matched: v.id in matchHash,
+                    v: v
+                  } ) )
+                } )
+              }
             }
           }
         }else{
-          vendors[v].forEach(p=>{
-            searchResults.push({product: p, variants: p.variants.map(v=>({matched: false, v: v}))})
-          });
+          if(allBrandsDeselected || brand.indexOf(v) > -1){
+
+            vendors[ v ].forEach( p => {
+              searchResults.push( { product: p, variants: p.variants.map( v => ( { matched: false, v: v } ) ) } )
+            } );
+          }
 
         }
         return D.div(