fix an issue with alpha channel in color and fill pattern

Author: crocsg

src/PaperCanvas.js

@@ -446,12 +446,26 @@ class PaperCanvas extends React.Component {
     this.EnumeratePaperItem(this.paper.project.activeLayer, (item) => {
 
       if (item.fillColor) {
-        let csscolor = 'rgb(' + Math.round(item.fillColor.red * 255) + ',' + Math.round(item.fillColor.green * 255) + ',' + Math.round(item.fillColor.blue * 255) + ')';
+        // todo: take account of alpha channel
+        let csscolor = '';
+        if (item.fillColor.alpha) {
+          csscolor = 'rgb(' + Math.round(item.fillColor.red * 255) + ',' 
+          + Math.round(item.fillColor.green * 255) + ',' 
+          + Math.round(item.fillColor.blue * 255) + ',' 
+          + Math.round(item.fillColor.alpha * 255) + ')';    
+        }
+        else
+        {
+          csscolor = 'rgb(' + Math.round(item.fillColor.red * 255) + ',' + Math.round(item.fillColor.green * 255) + ',' + Math.round(item.fillColor.blue * 255) + ')';  
+          
+        }
+        
         fcolors[item.fillColor] = csscolor;
       }
     });
 
     for (const color in fcolors) {
+      console.log ("color :" + color);
       colorlist.push ({color:color, csscolor:fcolors[color]});
     }
     console.log (colorlist);

src/components/patternstrategy.js

@@ -10,22 +10,38 @@ class PatternStrategy
 
     getPatternId (fillcolor, linecolor)
     {
-        let csscolor = 'rgb(' + Math.round(fillcolor.red * 255) + ',' 
+        let csscolor ='';
+        if (fillcolor)
+        {
+            if (fillcolor.hasOwnProperty('alpha'))
+            {
+                csscolor = 'rgb(' + Math.round(fillcolor.red * 255) + ',' 
+                + Math.round(fillcolor.green * 255) + ',' 
+                + Math.round(fillcolor.blue * 255) + ','
+                + Math.round(fillcolor.alpha * 255) + ')';
+            }
+            else
+                csscolor = 'rgb(' + Math.round(fillcolor.red * 255) + ',' 
                 + Math.round(fillcolor.green * 255) + ',' 
                 + Math.round(fillcolor.blue * 255) + ')';
-        
-        //console.log ("search strategy " + fillcolor + " " + csscolor);
+            
+        }    
+        //console.log ("search strategy " + fillcolor + " " + csscolor + " " + typeof(fillcolor));
         if (this.pattern_association.hasOwnProperty(fillcolor))
         {
-            //console.log ("returned pattern " + fillcolor);
+            //console.group ("returned pattern " );
+            //console.table(this.pattern_association[fillcolor]);
+            //console.groupEnd ();            
             return this.pattern_association[fillcolor];
         }
         else
         {
 
             if (this.pattern_association.hasOwnProperty(csscolor))
             {
-                //console.log ("returned pattern " + csscolor);
+                //console.group ("returned pattern " );
+                //console.table (this.pattern_association[csscolor]);
+                //console.groupEnd ();            
                 return this.pattern_association[csscolor];
             }
             else 

src/pages/Patterns.js

@@ -47,6 +47,7 @@ class Patterns extends React.Component {
     { 
       let fillcolorlist = canv.getFillColorList();
       this.setState({fillcolorlist:fillcolorlist});
+      //console.log (fillcolorlist);
     }
 
   }

src/pages/Print.js

@@ -198,19 +198,6 @@ class Print extends React.Component {
     }
   }
 
-  
-
-  
-  
-
-  
-  
-  
-
-  
-
-  
-  
   HandleRefresh() {
 
     this.paper.project.clear();