Make flipping work together with rotation; save flipped state

This also consolidates some stuff related to updating CSS properties
into a single function.

macrovision.css

@@ -24,6 +24,8 @@ body {
 .entity-box {
     position: absolute;
     --height: 100px;
+    --flipped: 1;
+    --rotation: 0deg;
     --brightness: 1;
     max-height: var(--height);
     height: var(--height);
@@ -50,17 +52,12 @@ body.smoothing .entity-box {
     -moz-user-drag: none;
     -o-user-drag: none;
     --offset: -100%;
-    --rotation: 30deg;
-    transform: translate(-50%, var(--offset)) rotate(var(--rotation));
+    transform: translate(-50%, var(--offset)) rotate(var(--rotation)) scale(var(--flipped), 1);
     filter: brightness(var(--brightness));
     user-select: none;
     -webkit-user-select: none;
 }
 
-.entity-image.flipped {
-    transform: translate(-50%, var(--offset)) scale(-1, 1);
-}
-
 .entity-name {
     display: none;
     position: absolute;

macrovision.js

@@ -624,7 +624,7 @@ function updateEntityElement(entity, element) {
     const bonus = (extra ? extra : 1) * (1 / (1 - (bottom ? bottom : 0)));
     let height = pixels * bonus;
 
-    // working around a Firefox bug here
+    // working around a Firefoxi  here
 
     if (height > 17895698) {
         height = 0;
@@ -633,8 +633,6 @@ function updateEntityElement(entity, element) {
     element.style.setProperty("--height", height + "px");
     element.style.setProperty("--extra", height - pixels + "px");
 
-    element.style.setProperty("--brightness", entity.brightness);
-
     if (entity.views[view].rename)
         element.querySelector(".entity-name").innerText =
             entity.name == "" ? "" : entity.views[view].name;
@@ -963,6 +961,18 @@ function pickUnit() {
     selectNewUnit();
 }
 
+function updateEntityProperties(element) {
+    entity = entities[element.dataset.key]
+
+    element.style.setProperty("--flipped", entity.flipped ? -1 : 1);
+    element.style.setProperty(
+        "--rotation",
+        (entity.rotation * 180) / Math.PI +
+            "deg"
+    );
+    element.style.setProperty("--brightness", entity.brightness);
+}
+
 function updateSizes(dirtyOnly = false) {
     updateInfo();
 
@@ -1571,6 +1581,7 @@ function makeEntity(info, views, sizes, forms = {}) {
         identifier: info.name,
         scale: 1,
         rotation: 0,
+        flipped: false,
         info: JSON.parse(JSON.stringify(info)),
         views: JSON.parse(JSON.stringify(views), math.reviver),
         sizes:
@@ -2777,11 +2788,6 @@ function displayEntity(
         img.style.setProperty("--offset", -1 * 100 + "%");
     }
 
-    img.style.setProperty(
-        "--rotation",
-        (entity.rotation * 180) / Math.PI + "deg"
-    );
-
     box.dataset.x = x;
     box.dataset.y = y;
 
@@ -2855,6 +2861,8 @@ function displayEntity(
         fitWorld();
     }
 
+    updateEntityProperties(box);
+
     if (selectEntity) select(box);
 
     entity.dirty = true;
@@ -4031,7 +4039,8 @@ document.addEventListener("DOMContentLoaded", () => {
         .querySelector("#options-brightness-up")
         .addEventListener("click", (e) => {
             if (selected) {
-                entities[selected.dataset.key].brightness += 1;
+                entities[selected.dataset.key].brightness += 0.5;
+                updateEntityProperties(selected);
             }
             document.querySelector("#options-brightness-display").innerText =
                 entities[selected.dataset.key].brightness;
@@ -4042,7 +4051,8 @@ document.addEventListener("DOMContentLoaded", () => {
         .querySelector("#options-brightness-down")
         .addEventListener("click", (e) => {
             if (selected) {
-                entities[selected.dataset.key].brightness -= 1;
+                entities[selected.dataset.key].brightness -= 0.5;
+                updateEntityProperties(selected);
             }
             document.querySelector("#options-brightness-display").innerText =
                 entities[selected.dataset.key].brightness;
@@ -4054,14 +4064,8 @@ document.addEventListener("DOMContentLoaded", () => {
         .addEventListener("click", (e) => {
             if (selected) {
                 entities[selected.dataset.key].rotation -= Math.PI / 4;
+                updateEntityProperties(selected);
             }
-            selected
-                .querySelector("img")
-                .style.setProperty(
-                    "--rotation",
-                    (entities[selected.dataset.key].rotation * 180) / Math.PI +
-                        "deg"
-                );
             updateSizes();
         });
 
@@ -4070,23 +4074,16 @@ document.addEventListener("DOMContentLoaded", () => {
         .addEventListener("click", (e) => {
             if (selected) {
                 entities[selected.dataset.key].rotation += Math.PI / 4;
+                updateEntityProperties(selected);
             }
-            selected
-                .querySelector("img")
-                .style.setProperty(
-                    "--rotation",
-                    (entities[selected.dataset.key].rotation * 180) / Math.PI +
-                        "deg"
-                );
             updateSizes();
         });
 
     document.querySelector("#options-flip").addEventListener("click", (e) => {
         if (selected) {
-            selected.querySelector(".entity-image").classList.toggle("flipped");
+            entities[selected.dataset.key].flipped = !entities[selected.dataset.key].flipped
+            updateEntityProperties(selected);
         }
-        document.querySelector("#options-brightness-display").innerText =
-            entities[selected.dataset.key].brightness;
         updateSizes();
     });
 
@@ -5863,6 +5860,7 @@ function exportScene() {
                 customName: entity.name,
                 scale: entity.scale,
                 rotation: entity.rotation,
+                flipped: entity.flipped,
                 view: entity.view,
                 form: entity.form,
                 x: element.dataset.x,
@@ -6015,6 +6013,17 @@ const migrationDefs = [
             entity.rotation = 0;
         });
     },
+    /*
+    Migration: 4 -> 5
+f
+    Flipping is now stored
+    */
+
+    (data) => {
+        data.entities.forEach((entity) => {
+            entity.flipped = false;
+        });
+    }
 ];
 
 function migrateScene(data) {
@@ -6041,6 +6050,7 @@ function importScene(data) {
         entity.name = entityInfo.customName;
         entity.scale = entityInfo.scale;
         entity.rotation = entityInfo.rotation;
+        entity.flipped = entityInfo.flipped;
         entity.priority = entityInfo.priority;
         entity.brightness = entityInfo.brightness;
         entity.form = entityInfo.form;
@@ -6103,9 +6113,7 @@ function renderToCanvas() {
             ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
             ctx.translate(x, y);
             ctx.rotate(entity.rotation);
-            if (Array.from(img.classList).includes("flipped")) {
-                ctx.scale(-1, 1);
-            }
+            ctx.scale(entity.flipped ? -1 : 1, 1);
             ctx.drawImage(img, -xSize / 2, -ySize / 2, xSize, ySize);
             ctx.restore();