From 49ad9bf8901edb2f87c365deaceb0f055756b27b Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Sun, 17 Apr 2022 11:21:45 -0400 Subject: [PATCH] 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 | 9 +++---- macrovision.js | 68 +++++++++++++++++++++++++++---------------------- 2 files changed, 41 insertions(+), 36 deletions(-) diff --git a/macrovision.css b/macrovision.css index aaa2a64d..7da89967 100644 --- a/macrovision.css +++ b/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; diff --git a/macrovision.js b/macrovision.js index 95495a87..14f760c4 100644 --- a/macrovision.js +++ b/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();