Added layer color selector and transparency.

package.json

@@ -25,16 +25,20 @@
     "@types/react-data-grid": "^2.0.11",
     "@types/react-dom": "^16.0.5",
     "@types/react-table": "^6.7.11",
+    "color": "^3.0.0",
     "jszip": "^3.1.5",
     "pako": "^1.0.6",
     "react": "^16.4.0",
+    "react-color": "^2.14.1",
     "react-dom": "^16.4.0",
     "react-dropdown": "^1.5.0",
     "react-ga": "^2.5.3",
     "react-table": "^6.8.6",
-    "svg.js": "^2.6.4"
+    "svg.js": "^2.6.5"
   },
   "devDependencies": {
+    "@types/color": "^3.0.0",
+    "@types/react-color": "^2.13.5",
     "awesome-typescript-loader": "^5.0.0-1",
     "babel-core": "^6.26.3",
     "babel-polyfill": "^6.26.0",

src/components/CanvasViewer.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { GerberPolygons, Bounds } from "../../common/AsyncGerberParserAPI";
 import { BoardLayer } from "../../../grbparser/dist/gerberutils";
-import { LayerInfo } from "..";
+import { LayerInfo, colorFR4 } from "..";
 
 export interface CanvasViewerProps { 
     layers?: Array<LayerInfo>;
@@ -43,29 +43,6 @@ function colorToHtml(clr:number):string {
     return ss;
 }
 
-// Oshpark mask #2b1444
-//
-// FR4 #ab9f15
-const colorFR4 = '#ab9f15';
-const colorENIG = '#d8bf8a';
-const colorHASL = '#cad4c9';
-const colorGreen = '#0e8044';
-
-const layerColors = {
-    0:"#e9b397",    // Copper
-    1:colorENIG,    // SolderMask
-    2:"white",      // Silk // #c2d3df
-    3:"silver",     // Paste
-    4:"white",      // Drill
-    5:"black",      // Mill
-    6:"black",      // Outline
-    7:"carbon",     // Carbon
-    8:"green",      // Notes
-    9:"yellow",     // Assembly
-    10:"brown",     // Mechanical
-    11:"black",     // Unknown
-};
-
 export class CanvasViewer extends React.Component<CanvasViewerProps, CanvasViewerState> {
     private redrawTimer:any;
     private mouseDnX:number;
@@ -134,20 +111,19 @@ export class CanvasViewer extends React.Component<CanvasViewerProps, CanvasViewe
 
     componentDidMount() {
         this.handleResize(false);
+        // TODO: add ResizeObservable to habdle all element resize notifications
         window.addEventListener('resize', this.handleResize.bind(this));
         let canvas = this.refs.canvas as HTMLCanvasElement;
         canvas.addEventListener('wheel', this.handleWheel.bind(this));
         window.addEventListener('keypress', this.handleKey.bind(this));
         canvas.addEventListener('mousedown', this.handleMouseDn.bind(this));
         canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
         canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
-        canvas.addEventListener('resize', this.handleResize.bind(this));
         this.clearCashedImage();
     }
 
     componentWillUnmount() {
         let canvas = this.refs.canvas as HTMLCanvasElement;
-        canvas.removeEventListener('resize', this.handleResize);
         window.removeEventListener('keypress', this.handleKey);
         canvas.removeEventListener('wheel', this.handleWheel);
         canvas.removeEventListener('mousedown', this.handleMouseDn);
@@ -237,18 +213,18 @@ export class CanvasViewer extends React.Component<CanvasViewerProps, CanvasViewe
         }
     }
 
-    getSolidColor(layer:BoardLayer) {
+    getSolidColor(layer:LayerInfo):string {
         if (this.state.selection.length == 1) {
             return colorToHtml(this.props.layerColor);
         }
-        return layerColors[layer];
+        return layer.color.hex();
     }
 
-    getBorderColor(layer:BoardLayer) {
+    getBorderColor(layer:LayerInfo):string {
         if (this.state.selection.length == 1) {
             return colorToHtml(this.props.layerColor);
         }
-        return layerColors[layer];
+        return layer.color.hex();
     }
 
     clearCanvas(context:CanvasRenderingContext2D) {
@@ -341,15 +317,15 @@ export class CanvasViewer extends React.Component<CanvasViewerProps, CanvasViewe
                         context.fillStyle = 'rgba(32, 2, 94, 0.7)'; // target color #2b1444
                         outline.forEach(p => context.fill(p));
                     }
-                    context.fillStyle = this.getSolidColor(l.boardLayer);
+                    context.fillStyle = this.getSolidColor(l);
                     context.fill(path);
                 }
                 path = l.thin;
                 if (path != undefined) {
                     // Set line width to 1 pixel. The width is scaled with the transform, so
                     // 1/scale ends up being 1px.
                     context.lineWidth = 1/scale;
-                    context.strokeStyle = this.getBorderColor(l.boardLayer);
+                    context.strokeStyle = this.getBorderColor(l);
                     context.stroke(path);
                 }
             });

src/components/ColorPicker.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import * as Color from 'color';
+import { SketchPicker } from 'react-color';
+
+export interface ColorPickerProps { 
+    color:Color;
+    onChange: (color:Color) => void;
+}
+
+interface ColorPickerState {
+    displayColorPicker: boolean,
+    color:Color;
+}
+
+export class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
+    constructor(props:ColorPickerProps, context?:any) {
+        super(props, context);
+        this.state = {
+            displayColorPicker: false,
+            color:props.color
+        };
+    }
+
+    componentWillReceiveProps(nextProps:Readonly<ColorPickerProps>) {
+        this.setState({
+            color:nextProps.color
+        });
+    }
+
+    private handleClick() {
+        this.setState({ displayColorPicker: !this.state.displayColorPicker })
+    }
+
+    private handleClose() {
+        this.setState({ displayColorPicker: false })
+        if (this.props.onChange) {
+            this.props.onChange(this.state.color);
+        }
+    }
+
+    private handleChange(color:{r:number, g:number, b:number, a?:number}) {
+        let c = Color({r:color.r, g:color.g, b:color.b});
+        if (color.a) {
+            c = c.alpha(color.a);
+        }
+        this.setState({ color: c })
+    }
+
+    render() {
+        return (
+        <div>
+            <div style={{
+                    padding: '5px',
+                    background: '#fff',
+                    borderRadius: '1px',
+                    boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+                    display: 'inline-block',
+                }} onClick={ (e:React.MouseEvent<HTMLDivElement>) => this.handleClick() }>
+                <div style={{
+                    width: '16px',
+                    height: '14px',
+                    borderRadius: '2px',
+                    background: this.state.color.hsl().string(),
+                }} />
+            </div>
+            { this.state.displayColorPicker ? 
+                <div style={{position: 'absolute', zIndex: 2}}>
+                    <div style={{
+                            position: 'fixed',
+                            top: '0px',
+                            right: '0px',
+                            bottom: '0px',
+                            left: '0px',
+                        }} onClick={ (e:React.MouseEvent<HTMLDivElement>) => this.handleClose() }/>
+                    <SketchPicker color={{
+                        r:this.state.color.red(),
+                        g:this.state.color.green(),
+                        b:this.state.color.blue(),
+                        a:this.state.color.alpha()}}
+                        onChange={ (color) => this.handleChange(color.rgb) } 
+                        disableAlpha={true}/>
+                </div> : null }
+        </div>);
+    }
+}

src/components/LayerList.tsx

@@ -7,20 +7,26 @@ import { LayerName } from "./LayerName";
 import { LayerSide } from "./LayerSide";
 import { BoardLayer, BoardSide } from "../../../grbparser/dist/gerberutils";
 import { LayerInfo } from "..";
+import { ColorPicker } from "./ColorPicker";
+import * as Color from 'color';
 
 export interface LayerListProps { 
     layers:Array<LayerInfo>;
     onClick?:(fileName:string) => void;
     onChangeLayer?:(fileName:string, layer:BoardLayer) => void;
     onChangeSide?:(fileName:string, side:BoardSide) => void;
     onChangeOpacity?:(fileName:string, opacity:number) => void;
+    onChangeColor?:(fileName:string, color:Color) => void;
     style?:React.CSSProperties;
 }
 
 export class LayerList extends React.Component<LayerListProps, {}> {
     private static LeftAlignText = { textAlign:"left" };
     private Columns:Array<ReactTable.Column> = [
-        { accessor: 'selected', Header:'', width:25, 
+        { 
+            accessor: 'selected',
+            Header:'',
+            width:25, 
             Cell: cell => <FontAwesomeIcon icon={(cell.value) ? faCheckSquare : faSquare}/>
         },
         { accessor: 'fileName', Header:'File Name', headerStyle:LayerList.LeftAlignText },
@@ -31,9 +37,9 @@ export class LayerList extends React.Component<LayerListProps, {}> {
             headerStyle:LayerList.LeftAlignText,
             width:120,
             Cell: cell =>
-            <LayerName layer={cell.value} onChange={(layer:BoardLayer) => {
-                this.changeLayer(cell.row.fileName, layer);
-            }}/>
+            <LayerName layer={cell.value} onChange={(layer:BoardLayer) =>
+                this.changeLayer(cell.row.fileName, layer)
+            }/>
         },
         {
             accessor: 'boardSide',
@@ -42,9 +48,17 @@ export class LayerList extends React.Component<LayerListProps, {}> {
             headerStyle:LayerList.LeftAlignText,
             width:110,
             Cell: cell => 
-            <LayerSide side={cell.value} onChange={(side:BoardSide) => {
-                this.changeSide(cell.row.fileName, side);
-            }}/>
+            <LayerSide side={cell.value} onChange={(side:BoardSide) => 
+                this.changeSide(cell.row.fileName, side)
+            }/>
+        },
+        {
+            accessor: 'color',
+            Header: ' ',
+            width:30,
+            Cell: cell => <ColorPicker color={cell.value as Color} onChange={
+                (color:Color) => this.changeColor(cell.row.fileName, color)
+            }/>
         },
         { 
             id:"status",
@@ -97,6 +111,12 @@ export class LayerList extends React.Component<LayerListProps, {}> {
         }
     }
 
+    changeColor(fileName:string, color:Color) {
+        if (this.props.onChangeColor) {
+            this.props.onChangeColor(fileName, color);
+        }
+    }
+
     render() {
         let tableSize =this.props.layers.length;
         let showPagination = false;