ctucx.git: trainsearch

canvas loading performance

diff --git a/src/canvas.js b/src/canvas.js
@@ -86,6 +86,7 @@ export const setupCanvas = (data, isUpdate) => {
 	canvas = document.getElementById('canvas');
 	ctx = canvas.getContext('2d');
 	if (data) {
+
 		canvasState.indexOffset = data.indexOffset;
 		canvasState.journeys = Object.keys(data.journeys).sort((a, b) => Number(a) - Number(b)).map(k => data.journeys[k]);
 		canvasState.slug = data.slug;

@@ -111,7 +112,7 @@ export const setupCanvas = (data, isUpdate) => {
 	window.addEventListener('touchmove', mouseMoveHandler);
 	window.addEventListener('resize', resizeHandler);
 	window.addEventListener('zoom', resizeHandler);
-	updateTextCache();
+	if (data) updateTextCache();
 	resizeHandler();
 
 	return {

@@ -129,6 +130,9 @@ export const setupCanvas = (data, isUpdate) => {
 };
 
 const addTextToCache = (text, color, fixedHeight) => {
+	if (textCache[text] && textCache[text].width > 0 && textCache[text].height > 0) {
+		return;
+	}
 	const canvas = document.createElement('canvas');
 	const ctx = canvas.getContext('2d');
 	ctx.shadowColor = '#00000080';

@@ -297,7 +301,7 @@ const renderJourneys = () => {
 			//ctx.shadowBlur = 0;
 
 			let preRenderedText = textCache[textFor(leg)];
-			if ((preRenderedText.height / dpr) < duration - 5) {
+			if (preRenderedText && (preRenderedText.height / dpr) < duration - 5) {
 				ctx.scale(1 / dpr, 1 / dpr);
 				ctx.drawImage(preRenderedText, dpr * (x + 5), Math.floor(dpr * (y + duration / 2) - preRenderedText.height / 2.3));
 				ctx.scale(dpr, dpr);

@@ -305,7 +309,7 @@ const renderJourneys = () => {
 			const typeText = typeTextFor(leg);
 			if (typeText) {
 				const preRenderedTypeText = textCache[typeText];
-				if ((preRenderedTypeText.height / dpr + preRenderedText.height / dpr) < duration - 5) {
+				if (preRenderedTypeText && (preRenderedTypeText.height / dpr + preRenderedText.height / dpr) < duration - 5) {
 					ctx.scale(1 / dpr, 1 / dpr);
 					ctx.drawImage(preRenderedTypeText, dpr * (x + 5), Math.floor(dpr * (y + duration / 2 + preRenderedText.height / 2 + 10) - preRenderedTypeText.height / 2.3));
 					ctx.scale(dpr, dpr);

@@ -330,9 +334,11 @@ const renderJourneys = () => {
 			if (journey.legs.indexOf(leg) == 0) times.push([leg.arrival || leg.plannedArrival, y + duration + 7.5]);
 			for (const [time, y] of times) {
 				preRenderedText = textCache[formatTime(time)];
-				ctx.scale(1 / dpr, 1 / dpr);
-				ctx.drawImage(preRenderedText, Math.ceil(dpr * (x + ((rectWidth - preRenderedText.width/dpr)) / 2)), dpr * (y - 7.5));
-				ctx.scale(dpr, dpr);
+				if (preRenderedText) {
+					ctx.scale(1 / dpr, 1 / dpr);
+					ctx.drawImage(preRenderedText, Math.ceil(dpr * (x + ((rectWidth - preRenderedText.width/dpr)) / 2)), dpr * (y - 7.5));
+					ctx.scale(dpr, dpr);
+				}
 			}
 
 			if (leg.loadFactor) {