switch from overlay to small-pixel when zoom in

fix historical view scale clamping to 1.0

src/components/TemplateSettings.jsx

@@ -65,13 +65,12 @@ const TemplateSettings = () => {
         {t`Show templates as overlays ingame.`}
       </SettingsItem>
       <SettingsItem
-        title={t`Small Pixels Overlay`}
+        title={t`Small Pixels Zoom`}
         value={oSmallPxls}
         onToggle={() => dispatch(toggleSmallPxls())}
       >
         {
-          // eslint-disable-next-line max-len
-          t`Show overlay as small individual pixels (will only show in high zoomlevels).`
+          t`Show overlay as small individual pixels on high zoomlevels.`
         }
       </SettingsItem>
 

src/core/constants.js

@@ -61,3 +61,6 @@ export const HOLD_PAINT = {
   HISTORY: 2,
   OVERLAY: 3,
 };
+
+// threshold at which zoomlevel overlay switches to small-pixel mode
+export const OVERLAY_SP_TH = 8;

src/store/middleware/rendererHook.js

@@ -130,7 +130,7 @@ export default (store) => (next) => (action) => {
     case 's/TGL_HISTORICAL_VIEW': {
       const renderer = getRenderer();
       // update view to clamp scale
-      renderer.updateView(renderer.view);
+      renderer.updateView(renderer.view, renderer.view);
       renderer.forceNextRender = true;
       break;
     }

src/store/reducers/templates.js

@@ -7,8 +7,8 @@ const initialState = {
   // prefix o: overlay, m: minimap
   ovEnabled: false,
   mEnabled: false,
-  oOpacity: 70,
-  oSmallPxls: false,
+  oOpacity: 40,
+  oSmallPxls: true,
   /*
    * [{
    *   enabled,

src/ui/Renderer2D.js

@@ -9,6 +9,7 @@ import {
   TILE_ZOOM_LEVEL,
   TILE_SIZE,
   MAX_SCALE,
+  OVERLAY_SP_TH,
 } from '../core/constants';
 
 import {
@@ -133,6 +134,7 @@ class Renderer2D extends Renderer {
           canvases[canvasId].historicalSizes,
         );
       }
+      this._view[2] = 0;
       this.updateView(state.canvas.view);
       this.forceNextRender = true;
     }
@@ -226,7 +228,11 @@ class Renderer2D extends Renderer {
       this.tiledScale = tiledScale;
       this.tiledZoom = tiledZoom;
       this.relScale = relScale;
-      if (viewscale < this.scaleThreshold || prevScale < this.scaleThreshold) {
+      if (viewscale < this.scaleThreshold || prevScale < this.scaleThreshold
+        || (state.templates.ovEnabled && (
+          (prevScale <= OVERLAY_SP_TH && scale > OVERLAY_SP_TH)
+          || (prevScale > OVERLAY_SP_TH && scale <= OVERLAY_SP_TH)
+        ))) {
         this.forceNextRender = true;
       } else {
         this.forceNextSubrender = true;
@@ -423,7 +429,9 @@ class Renderer2D extends Renderer {
     }
     context.restore();
 
-    if (state.templates.ovEnabled && !state.templates.oSmallPxls) {
+    if (state.templates.ovEnabled
+      && (scale < OVERLAY_SP_TH || !state.templates.oSmallPxls)
+    ) {
       renderOverlay(
         state, this.canvas, chunkPosition, scale,
         this.tiledScale, this.scaleThreshold,
@@ -554,8 +562,8 @@ class Renderer2D extends Renderer {
       );
     }
 
-    if (viewscale >= 5 && state.templates.ovEnabled
-      && state.templates.oSmallPxls
+    if (state.templates.ovEnabled
+      && state.templates.oSmallPxls && viewscale >= OVERLAY_SP_TH
     ) {
       renderSmallPOverlay(state, viewport, _view, viewscale);
     }

src/ui/render2Delements.js

@@ -119,9 +119,14 @@ export function renderOverlay(
   const [x, y] = centerChunk
     .map((z) => z * TILE_SIZE / tiledScale
     + TILE_SIZE / 2 / tiledScale - canvasSize / 2);
+
+  // if scale > scaleThreshold, then scaling happens in renderer
+  // instead of offscreen canvas
+  const offscreenScale = (scale > scaleThreshold) ? 1.0 : scale;
+
   const { width, height } = $canvas;
-  const horizontalRadius = width / 2 / scale;
-  const verticalRadius = height / 2 / scale;
+  const horizontalRadius = width / 2 / offscreenScale;
+  const verticalRadius = height / 2 / offscreenScale;
   const templates = templateLoader.getTemplatesInView(
     canvasId, x, y, horizontalRadius, verticalRadius,
   );
@@ -130,10 +135,6 @@ export function renderOverlay(
   const context = $canvas.getContext('2d');
   if (!context) return;
 
-  // if scale > scaleThreshold, then scaling happens in renderer
-  // instead of offscreen canvas
-  const offscreenScale = (scale > scaleThreshold) ? 1.0 : scale;
-
   context.save();
   context.scale(offscreenScale, offscreenScale);
   context.globalAlpha = state.templates.oOpacity / 100;