Fix multi-face cube rotation regression

Author: Perlkonig

src/renderers/isometric/depthPiece.ts

@@ -2,7 +2,7 @@ import { StrokeData, Svg } from "@svgdotjs/svg.js";
 import { Orientation } from "honeycomb-grid";
 import { IsometricPieces, IsoPiece, Colourfuncs } from "../../schemas/schema";
 import { generateCubes, CubeFaceFills } from "./cubes";
-import { permuteCubeFacesForProjection } from "./cubeOrientation";
+import { permuteCubeFacesForProjection, effectiveCubeYaw } from "./cubeOrientation";
 import { generateCylinders } from "./cylinders";
 import { generateHexes } from "./hexes";
 import { ISO_PROJECTION_PRESETS, IsoProjectionParams } from "./projection";
@@ -75,7 +75,8 @@ const generateDepthShadedSymbol = (opts: {
     const effPiece = effectivePieceType(pc, numRotations);
 
     if (isMultiFaceCube(pc)) {
-        const visible = permuteCubeFacesForProjection(pc.faces, yaw, projection);
+        const effectiveYaw = effectiveCubeYaw(yaw, numRotations * 90);
+        const visible = permuteCubeFacesForProjection(pc.faces, effectiveYaw, projection);
         const top = resolveColour(visible.top, "#000") as string;
         const left = resolveColour(visible.left, "#000") as string;
         const right = resolveColour(visible.right, "#000") as string;

test/isometric.test.ts

@@ -738,6 +738,39 @@ describe("IsometricRenderer depth cues", () => {
         expect(frontFill).to.equal(isoDepthModulate(isoShadeFace(base, "left"), 1).toLowerCase());
     });
 
+    it("should keep multi-face cube colours when depth-shaded at board rotation", () => {
+        const draw = makeDraw();
+        const renderer = new IsometricRenderer();
+        const east = "#0000ff";
+        const south = "#ffff00";
+        const rep: APRenderRep = {
+            renderer: "isometric",
+            board: { style: "squares", width: 3, height: 3 },
+            legend: {
+                D: {
+                    piece: "cube",
+                    height: 30,
+                    faces: {
+                        top: "#ff0000",
+                        north: "#00ff00",
+                        east,
+                        south,
+                        west: "#ff00ff",
+                    },
+                },
+            },
+            pieces: [[[], [], []], [[], [{ glyph: "D" }], []], [[], [], []]],
+        };
+        renderer.render(rep, draw, { ...baseOptions, rotate: 90 });
+
+        const shadedSymbol = [...draw.find("[id^='D__y1__db']")].map((el) => el.id())[0];
+        expect(shadedSymbol).to.not.equal(undefined);
+        const leftFill = rectFill(draw, `isoRectSide30_${shadedSymbol}_L`);
+        expect(leftFill.startsWith("#0000")).to.equal(true);
+        expect(leftFill).to.not.equal(isoShadeFace(south, "left").toLowerCase());
+        expect(leftFill).to.not.equal(isoDepthModulate(isoShadeFace(south, "left"), 0.5).toLowerCase());
+    });
+
     it("should omit depth-shaded symbols when no-iso-depth-shade is set", () => {
         const draw = makeDraw();
         const renderer = new IsometricRenderer();