cellWithMasking.jsx

import React from 'react';
import store from '../models/CanvasStore';
import {observer} from 'mobx-react'

const Cell = observer((props) => {
    const [glyphPath, svgWidth, svgHeight, svgBaseline, glyphOffsetX, glyphFontSizeModifier, rotationAmount, flipGlyph, glyphInvertedColor]
         = store.canvas[props.y][props.x]

    let transform = { 
        transform: `scale(${flipGlyph}, -1) rotate(${rotationAmount}deg)`
    };
    const clipCellsClass = store.clipCells ? 'clipCells' : '';
    const glyphInvertedColorClass = glyphInvertedColor ? 'invertColor' : '';
	const classes = `${clipCellsClass} ${glyphInvertedColorClass}`;
	const OriginalSvgBaseline = svgBaseline

	if (!glyphInvertedColor) {
		return (
			<div 
			className={classes} 
			style={{width : store.cellWidth, height : store.cellHeight}} 
			onClick={props.clickSelection}
			data-y={props.y}
			data-x={props.x}
			>
				<svg

					height={Number(store.defaultFontSize) + Number(glyphFontSizeModifier)} 
					viewBox={glyphOffsetX + " 0 " + svgWidth + " " + svgHeight} 
					style={transform}
				>
					<path transform={"translate(0," + OriginalSvgBaseline * -1 + ")"} d={glyphPath}/>
				</svg>

			</div>
		)
	} else {
		return (
			<div 
			className={classes} 
			style={{width : store.cellWidth, height : store.cellHeight}} 
			onClick={props.clickSelection}
			data-y={props.y}
			data-x={props.x}
			>

				<svg
					height={Number(store.defaultFontSize) + Number(glyphFontSizeModifier)} 
					viewBox={glyphOffsetX + " " + svgBaseline + " " + svgWidth + " " + svgHeight} 
					style={transform}
					data-svg={glyphPath}
				>  
				<defs>
			    	<mask id={"hole"+ props.y + props.x}>
			    		<rect width="100%" height="100%" fill="white"/>
			    		<path transform={"translate(0," + OriginalSvgBaseline  * -1 + ")"} d={glyphPath} fill="black" />
			    	</mask>
			 	</defs>
			  
			   	<rect width="100%" height="100%" fill="black" mask={"url(#hole" + props.y + props.x + ")"}/>
			     
			    </svg>
		    </div>
		)
	}
})

export default Cell;