styling improvements

frontend/src/components/MapEnvironment.js

@@ -348,7 +348,7 @@ function Environment(props) {
 	}, [mapTitle]);
 	useEffect(() => {
 		setMapDimensions({
-			width: mapSize.width > 0 ? mapSize.width : getWidth(),
+			width: mapSize.width > 0 ? mapSize.width : 100 + getWidth(),
 			height: mapSize.height > 0 ? mapSize.height : getHeight(),
 		});
 	}, [mapOnlyView, hideNav, mapSize]);
@@ -395,7 +395,7 @@ function Environment(props) {
 	useEffect(() => {
 		const debouncedHandleResize = debounce(() => {
 			const dimensions = {
-				width: mapSize.width > 0 ? mapSize.width : getWidth(),
+				width: mapSize.width > 0 ? mapSize.width : 100 + getWidth(),
 				height: mapSize.height > 0 ? mapSize.height : getHeight(),
 			};
 			setMapDimensions(dimensions);
@@ -411,7 +411,7 @@ function Environment(props) {
 
 	useEffect(() => {
 		const newDimensions = {
-			width: mapSize.width > 0 ? mapSize.width : getWidth(),
+			width: mapSize.width > 0 ? mapSize.width : 100 + getWidth(),
 			height: mapSize.height > 0 ? mapSize.height : getHeight(),
 		};
 		setMapDimensions(newDimensions);
@@ -533,6 +533,7 @@ function Environment(props) {
 					item
 					xs={12}
 					sm={mapOnlyView ? 12 : 8}
+					ml={mapOnlyView ? 2 : 0}
 					className="map-view"
 					sx={{ backgroundColor: mapStyleDefs.containerBackground }}
 				>

frontend/src/components/map/ComponentText.js

@@ -66,7 +66,7 @@ function ComponentText(props) {
 							if (line.replace(/\s/g, '').indexOf('label[') > -1) {
 								return line.replace(
 									/\slabel\s\[(.?|.+?)\]+/g,
-									` label [${moved.x}, ${moved.y}]`
+									` label [${parseFloat(moved.x).toFixed(2)}, ${moved.y}]`
 								);
 							} else {
 								return line.trim() + ` label [${moved.x}, ${moved.y}]`;
@@ -85,7 +85,7 @@ function ComponentText(props) {
 							if (line.replace(/\s/g, '').indexOf('label[') > -1) {
 								return line.replace(
 									/\slabel\s\[(.?|.+?)\]+/g,
-									` label [${moved.x}, ${moved.y}]`
+									` label [${parseFloat(moved.x).toFixed(2)}, ${moved.y}]`
 								);
 							} else {
 								return line.trim() + ` label [${moved.x}, ${moved.y}]`;

frontend/src/components/map/MapCanvas.js

@@ -252,22 +252,23 @@ function MapCanvas(props) {
 				id="wm-svg-pan-zoom"
 				SVGBackground="white"
 				tool={tool}
-				width={props.mapCanvasDimensions.width + 30}
+				width={props.mapCanvasDimensions.width + 90}
 				height={props.mapCanvasDimensions.height + 30}
 				detectAutoPan={false}
 				detectWheel={allowMapZoomMouseWheel}
 				miniatureProps={{ position: showMiniMap ? 'right' : 'none' }}
 				toolbarProps={{ position: 'none' }}
-				SVGStyle={{
-					x: '-30',
-					y: '-40',
-					height: props.mapDimensions.height + 90,
-					width: props.mapDimensions.width + 60,
-				}}
+				// SVGStyle={{
+				// 	x: '-30',
+				// 	y: '-40',
+				// 	height: props.mapDimensions.height + 90,
+				// 	width: props.mapDimensions.width + 60,
+				// }}
 				background="#eee"
 				onDoubleClick={(e) => newElementAt(e)}
 				onZoom={handleZoom}
 				onZoomReset={() => setScaleFactor(1)}
+				style={{ userSelect: 'none', fontFamily: mapStyleDefs.fontFamily }}
 			>
 				<svg
 					ref={mapRef}
@@ -277,15 +278,15 @@ function MapCanvas(props) {
 					fontSize={mapStyleDefs.fontSize}
 					className={[mapStyleDefs.className, styles.mapCanvas].join(' ')}
 					id="svgMap"
-					width={mapDimensions.width + 80}
-					height={mapDimensions.height}
-					viewBox={
-						'-30' +
-						' -50 ' +
-						mapDimensions.width +
-						' ' +
-						(mapDimensions.height + 80)
-					}
+					// width={mapDimensions.width}
+					// height={mapDimensions.height}
+					// viewBox={
+					// 	'-30' +
+					// 	' -50 ' +
+					// 	(mapDimensions.width + 140) +
+					// 	' ' +
+					// 	(mapDimensions.height + 100)
+					// }
 					version="1.1"
 					xmlns="http://www.w3.org/2000/svg"
 					xmlnsXlink="http://www.w3.org/1999/xlink"

frontend/src/components/map/MapTitle.js

@@ -11,6 +11,7 @@ function MapTitle(props) {
 			id={'mapTitle'}
 			font-weight={'bold'}
 			font-size={'20px'}
+			font-family='"Helvetica Neue",Helvetica,Arial,sans-serif'
 		>
 			{mapTitle}
 		</text>

frontend/src/components/map/RelativeMovable.js

@@ -36,7 +36,6 @@ function RelativeMovable(props) {
 			document.removeEventListener('mousemove', handleMouseMove);
 			document.removeEventListener('keyup', handleEscape);
 			setPosition({ x: x(), y: y() });
-			console.log('pressed');
 		}
 	};
 
@@ -69,8 +68,8 @@ function RelativeMovable(props) {
 
 	function endDrag() {
 		let moved = {
-			x: position.x,
-			y: position.y,
+			x: parseFloat(position.x).toFixed(2),
+			y: parseFloat(position.y).toFixed(2),
 		};
 		props.onMove(moved);
 	}

frontend/src/components/symbols/AnnotationTextSymbol.js

@@ -8,6 +8,8 @@ function AnnotationTextSymbol(props) {
 			id={id}
 			className="label"
 			textAnchor="start"
+			fontFamily={styles.fontFamily}
+			fontSize={styles.fontSize}
 			dy={18}
 			x={0}
 			fill={styles.boxTextColour}

frontend/src/constants/defaults.js

@@ -38,53 +38,31 @@ export const MapDimensions = {
 	height: 600,
 };
 
-export const ExampleMap = `title Campfire Coffee Shop
+export const ExampleMap = `title Tea Shop
 anchor Business [0.95, 0.63]
 anchor Public [0.95, 0.78]
-component Cup of Coffee [0.79, 0.61] label [-96, 3]
+component Cup of Tea [0.79, 0.61] label [-85.48, 3.78]
 component Cup [0.73, 0.78]
-component Coffee [0.63, 0.81]
+component Tea [0.63, 0.81]
 component Hot Water [0.52, 0.80]
 component Water [0.38, 0.82]
-component Kettle [0.45, 0.57] label [-33, -16]
-pipeline Kettle
-{
-  component Campfire Kettle [0.50] label [-29, 28]
-  component Electric Kettle [0.63] label [-30, 25]
-}
-
-component Power [0.26, 0.80] label [-7, -15]
-pipeline Power
-{
-  component Nuclear [0.81] label [-17, 35]
-  component Solar [0.73] label [-20, 35]
-  component Coal [0.88] label [-13, 35]
-}
-
-component Campfire [0.35, 0.30] label [-52, -10]
-component Wood [0.10, 0.80] label [7, -7]
-component Flint & Steel [0.19, 0.45] label [-16, 21]
-component Trees [0.04, 0.82] label [10, -9]
-component Areopress [0.68, 0.51] label [-69, 5]
-
-Business->Cup of Coffee
-Public->Cup of Coffee
-Cup of Coffee->Cup
-Cup of Coffee->Coffee
-Cup of Coffee->Hot Water
+component Kettle [0.43, 0.35] label [-57, 4]
+evolve Kettle->Electric Kettle 0.62 label [16, 5]
+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; limited by 
-Electric Kettle->Power
-Wood->Campfire
-Flint & Steel->Campfire
-Campfire Kettle->Campfire
-Wood->Trees
-Cup of Coffee->Areopress
+Hot Water->Kettle 
+Kettle->Power
 
-annotation 1 [[0.51,0.62],[0.29,0.86] ] Standardising power allows Kettles to evolve faster
+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.68, 0.02]
+annotations [0.72, 0.03]
 
-note campfires give customers a warm feeling [0.41, 0.15]
+note +a generic note appeared [0.23, 0.33]
 
 style wardley`;

frontend/src/constants/featureswitches.js

@@ -6,6 +6,6 @@ export const featureSwitches = {
 	enableQuickAdd: false,
 	showToggleFullscreen: true,
 	showMapToolbar: true,
-	showMiniMap: true,
+	showMiniMap: false,
 	allowMapZoomMouseWheel: true,
 };

frontend/src/constants/mapstyles.js

@@ -7,7 +7,7 @@ export const Plain = {
 	className: 'plain',
 	containerBackground: '#eee',
 	fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
-	fontSize: '13px',
+	fontSize: '12px',
 	stroke: 'black',
 	pipelineArrowStroke: 'black',
 	evolutionSeparationStroke: 'black',
@@ -17,11 +17,11 @@ export const Plain = {
 	strokeWidth: '1',
 	strokeDasharray: '2,2',
 	anchor: {
-		fontSize: '14px',
+		fontSize: '12px',
 	},
 	attitudes: {
 		strokeWidth: '5px',
-		fontSize: '14px',
+		fontSize: '12px',
 		pioneers: {
 			stroke: '#3490dd',
 			fill: '#3ccaf8',
@@ -60,7 +60,8 @@ export const Plain = {
 		fill: 'white',
 	},
 	component: {
-		fontSize: '13px',
+		fontSize: '12px',
+		fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
 		fill: 'white',
 		stroke: 'black',
 		evolved: 'red',
@@ -73,7 +74,7 @@ export const Plain = {
 		evolvedTextColor: 'red',
 	},
 	submap: {
-		fontSize: '13px',
+		fontSize: '12px',
 		fill: 'black',
 		stroke: 'black',
 		evolved: 'red',
@@ -106,13 +107,15 @@ export const Plain = {
 		fill: 'white',
 		text: 'black',
 		boxStroke: '#595959',
+		fontSize: '11px',
 		boxStrokeWidth: 1,
 		boxFill: '#FFFFFF',
 		boxTextColour: 'black',
 	},
 	note: {
 		fontWeight: 'bold',
 		fontSize: '12px',
+		fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
 		fill: 'black',
 	},
 };
@@ -126,6 +129,7 @@ export const Handwritten = mergeIntoDefault({
 	component: {
 		fill: 'white',
 		stroke: 'black',
+		fontFamily: '"Gloria Hallelujah", cursive',
 		evolved: 'red',
 		evolvedFill: 'white',
 		strokeWidth: '1',
@@ -151,6 +155,7 @@ export const Wardley = mergeIntoDefault({
 	component: {
 		fill: 'white',
 		stroke: 'black',
+		fontFamily: 'Consolas, Lucida Console, monospace',
 		evolved: 'red',
 		evolvedFill: 'white',
 		strokeWidth: '1',
@@ -160,11 +165,15 @@ export const Wardley = mergeIntoDefault({
 	annotation: {
 		stroke: '#595959',
 		strokeWidth: 2,
+		fontFamily: 'Consolas, Lucida Console, monospace',
 		boxStroke: '#595959',
 		boxStrokeWidth: 1,
 		boxFill: '#FFFFFF',
 		boxTextColour: 'black',
 	},
+	note: {
+		fontFamily: 'Consolas, Lucida Console, monospace',
+	},
 });
 
 export const Dark = mergeIntoDefault({
@@ -226,6 +235,7 @@ export const Dark = mergeIntoDefault({
 	component: {
 		fontSize: '13px',
 		fill: 'rgba(255,255,255,.8)',
+		fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
 		stroke: 'white',
 		evolved: '#90caf9',
 		evolvedFill: 'white',