ctucx.git: trainsearch

change the way text cache works

diff --git a/src/canvas.js b/src/canvas.js
@@ -61,8 +61,6 @@ const canvasState = {
 };
 
 let textCache = {};
-let textCacheWidth;
-let textCacheDpr;
 
 const typeTextsFor = leg => {
 	const fahrtNr = leg.line?.fahrtNr;

@@ -88,14 +86,14 @@ export const setupCanvas = (data, isUpdate) => {
 		canvasState.profile = data.profile || "db";
 
 		(async () => {
-		for (const journey of canvasState.journeys) {
-			for (const leg of journey.legs) {
-				const fahrtNr = leg.line?.fahrtNr;
-				if (!fahrtNr) continue;
-				await cachedCoachSequence(fahrtNr, leg.plannedDeparture);
-				setupCanvas(null, true);
+			for (const journey of canvasState.journeys) {
+				for (const leg of journey.legs) {
+					const fahrtNr = leg.line?.fahrtNr;
+					if (!fahrtNr) continue;
+					await cachedCoachSequence(fahrtNr, leg.plannedDeparture);
+					setupCanvas(null, true);
+				}
 			}
-		}
 		}) ();
 	}
 

@@ -124,7 +122,7 @@ export const setupCanvas = (data, isUpdate) => {
 };
 
 const getTextCache = (text, color, fixedHeight) => {
-	const index = `${text}|${color}|${fixedHeight}`;
+	const index = `${text}|${color}|${rectWidth}|${dpr}|${fixedHeight}`;
 	if (!textCache[index]) {
 		textCache[index] = makeTextCache(text, color, fixedHeight);
 	}

@@ -159,13 +157,6 @@ const makeTextCache = (text, color, fixedHeight) => {
 	return canvas;
 };
 
-const updateTextCache = () => {
-	console.log('update text cache');
-	textCache = {};
-	textCacheWidth = rectWidth;
-	textCacheDpr = dpr;
-};
-
 let lastAnimationUpdate = 0, firstDeparture = 0, scaleFactor = 0, lastArrival = 0;
 let animationInterval;
 const renderJourneys = () => {

@@ -290,16 +281,16 @@ const renderJourneys = () => {
 			let offset = duration / 2;
 			if ((offset + preRenderedText.height / dpr) < duration - 5) {
 				ctx.scale(1 / dpr, 1 / dpr);
-				ctx.drawImage(preRenderedText, dpr * (x + 5), Math.floor(dpr * (y + offset) - preRenderedText.height / dpr / 1.3));
+				ctx.drawImage(preRenderedText, dpr * (x + 5), Math.floor(dpr * (y + offset) - preRenderedText.height / 2.3));
 				ctx.scale(dpr, dpr);
-				offset += preRenderedText.height / dpr / 1.3;
+				offset += preRenderedText.height / dpr / 1.3 + 5;
 			}
 			const typeTexts = typeTextsFor(leg);
 			for (const typeText of typeTexts) {
 				const preRenderedTypeText = getTextCache(typeText, '#555');
 				if ((offset + preRenderedText.height / dpr) < duration - 5) {
 					ctx.scale(1 / dpr, 1 / dpr);
-					ctx.drawImage(preRenderedTypeText, dpr * (x + 5), Math.floor(dpr * (y + offset) - preRenderedTypeText.height / dpr / 1.3));
+					ctx.drawImage(preRenderedTypeText, dpr * (x + 5), Math.floor(dpr * (y + offset) - preRenderedTypeText.height / 2.3));
 					ctx.scale(dpr, dpr);
 					offset += preRenderedText.height / dpr / 1.3;
 				}

@@ -328,7 +319,7 @@ const renderJourneys = () => {
 				ctx.scale(dpr, dpr);
 			}
 
-			if (leg.loadFactor && offset < duration - 10) {
+			if (leg.loadFactor && duration > 20) {
 				ctx.shadowColor = '#00000090';
 				//ctx.shadowBlur = 2;
 				[ "#777", "#aaa", "#aaa" ];

@@ -372,8 +363,6 @@ const resizeHandler = () => {
 	padding = (window.innerWidth / dpr) > 600 ? 20 : 5;
 	rectWidthWithPadding = rectWidth + 2 * padding;
 
-	if (rectWidth !== textCacheWidth || dpr !== textCacheDpr) updateTextCache();
-
 	const rect = document.getElementById('header').getBoundingClientRect();
 	canvas.width = window.innerWidth * dpr;
 	canvas.height = (window.innerHeight - rect.height) * dpr;

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -51,7 +51,6 @@ const legTemplate = (leg, profile) => {
 		'other': allRemarks.filter(r => r.type !== 'status' && r.type !== 'hint'),
 	};
 
-
 	return html`
 		${leg.walking ? html`
 			<p class="walk">${t('walkinfo', parseName(leg.destination), leg.distance)}</p>