POC: Cli command

maps/example.owm

@@ -0,0 +1,28 @@
+title Tea Shop
+anchor Business [0.95, 0.63]
+anchor Public [0.95, 0.78]
+component Cup of Tea [0.79, 0.61] label [19, -4]
+component Cup [0.73, 0.78]
+component Tea [0.63, 0.81]
+component Hot Water [0.52, 0.80]
+component Water [0.38, 0.82]
+component Kettle [0.43, 0.35] label [-57, 4]
+evolve Kettle 0.62 label [16, 7]
+component Power [0.1, 0.7] label [-27, 20]
+evolve Power 0.89 label [-12, 21]
+Business->Cup of Tea
+Public->Cup of Tea
+Cup of Tea->Cup
+Cup of Tea->Tea
+Cup of Tea->Hot Water
+Hot Water->Water
+Hot Water->Kettle 
+Kettle->Power
+
+annotation 1 [[0.43,0.49],[0.08,0.79]] Standardising power allows Kettles to evolve faster
+annotation 2 [0.48, 0.85] Hot water is obvious and well known
+annotations [0.60, 0.02]
+
+note +a generic note appeared [0.23, 0.33]
+
+style wardley

package.json

@@ -20,11 +20,13 @@
 		"node-sass": "^4.11.0",
 		"prettier": "^1.19.1",
 		"pretty-quick": "^2.0.1",
+		"puppeteer": "^3.3.0",
 		"react-app-rewire-hot-loader": "^2.0.1",
 		"react-app-rewired": "^2.1.6",
 		"react-hot-loader": "^4.12.21",
 		"react-scripts": "^3.4.1",
-		"react-test-renderer": "^16.12.0"
+		"react-test-renderer": "^16.12.0",
+		"yargs": "^15.3.1"
 	},
 	"env": {
 		"browser": true,
@@ -67,6 +69,7 @@
 		"lint": "eslint src/",
 		"prettify": "pretty-quick",
 		"precommit": "lint-staged",
+		"cli": "node scripts/generateMap.js",
 		"storybook": "start-storybook -p 9001 -c .storybook"
 	},
 	"browserslist": {

scripts/generateMap.js

@@ -0,0 +1,39 @@
+const yargs = require('yargs');
+const fs = require('fs');
+const path = require('path');
+
+const { screenshotMap } = require('./puppeteer');
+
+const options = yargs
+	.usage('Usage: $0 -f <.omw file> [options]')
+	.example('$0 -f example.omw', 'create example.png from -f file')
+	.alias('f', 'file')
+	.nargs('f', 1)
+	.describe('f', 'Load a .owm file as src')
+	.demandOption(['f'])
+	.alias('o', 'output')
+	.nargs('o', 1)
+	.describe('o', 'Output a given file name')
+	.example('$0 -f maps/example.omw -o maps/example.png')
+	.help('h')
+	.alias('h', 'help')
+	.epilog('https://github.com/damonsk/onlinewardleymaps').argv;
+
+(async () => {
+	let outputPath;
+	if (options.output) {
+		outputPath = path.join(process.cwd(), options.output);
+	}
+	if (options.file) {
+		const mapText = fs.readFileSync(
+			path.join(process.cwd(), options.file),
+			'utf8'
+		);
+		// console.log(mapText);
+		await screenshotMap({
+			mapText,
+			output: outputPath,
+		});
+		console.log(`Saved screenshot: ${outputPath}`);
+	}
+})();

scripts/puppeteer.js

@@ -0,0 +1,60 @@
+const puppeteer = require('puppeteer');
+
+const HEADLESS = true;
+
+const clippedScreenshotOpts = (boundingBox, path) => {
+	return {
+		path,
+		fullPage: false,
+		clip: boundingBox,
+	};
+};
+
+const defaultOptions = {
+	host: 'http://localhost:3000',
+	file: '',
+	output: 'mapTitle.png',
+	width: 1920, // this is intended to be for the final image, but it's going to have to be adjusted because the final image is a % of the viewport
+	height: 1080,
+};
+const screenshotMap = async opts => {
+	const options = Object.assign({}, defaultOptions, opts);
+	const { output, width, height, host, mapText } = options;
+	const browser = await puppeteer.launch({ headless: HEADLESS });
+	const page = await browser.newPage();
+	await page.setViewport({
+		width,
+		height,
+	});
+	await page.goto(host);
+	const editorSelector = '.ace_text-input';
+	await page.waitFor(editorSelector);
+	// await page.type('.ace_text-input', mapText);
+	// page.type was a little slow, so pushed the val and event directly
+	await page.$eval(
+		editorSelector,
+		(e, val) => {
+			e.value = val;
+			e.dispatchEvent(new Event('input', { bubbles: true }));
+			e.dispatchEvent(new Event('change', { bubbles: true }));
+		},
+		mapText
+	);
+	const mapFrameSelector = '.contentLoaded';
+	await page.waitFor(mapFrameSelector);
+	const mapElem = await page.$(mapFrameSelector);
+	const mapBoundingBox = await mapElem.boundingBox();
+
+	const screenshotOptions = clippedScreenshotOpts(mapBoundingBox, output);
+
+	// if a path is set, chromium saves the file directly to the path
+	await page.screenshot(screenshotOptions);
+	await browser.close();
+};
+
+module.exports = {
+	screenshotMap,
+};
+
+// Run this file directly
+// screenshotMap();

src/components/map/MapView.js

@@ -3,16 +3,17 @@ import MapCanvas from './MapCanvas';
 
 class MapView extends Component {
 	render() {
+		const contentLoadedFlag = this.props.mapText ? 'contentLoaded' : 'noText';
 		return (
-			<>
+			<div className={contentLoadedFlag}>
 				{/* Wrapping div required to ensure that images aren't generated with a ton of whitespace */}
 				<div ref={this.props.mapRef}>
 					<h5 id="title">{this.props.mapTitle}</h5>
 					<div id="map">
 						<MapCanvas mapPadding={20} {...this.props} />
 					</div>
 				</div>
-			</>
+			</div>
 		);
 	}
 }