Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment