From d3c6657766640cb001858a730d2f1d6065f92c96 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Fri, 29 Apr 2022 13:09:18 -0400 Subject: [PATCH] Allow for editing of attributes; save and load custom attributes --- macrovision.css | 12 +++++++++ macrovision.js | 70 ++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 73 insertions(+), 9 deletions(-) diff --git a/macrovision.css b/macrovision.css index 7da89967..470e2205 100644 --- a/macrovision.css +++ b/macrovision.css @@ -1120,4 +1120,16 @@ body.screenshot-mode .scroll-button { .submit-button > i { margin: 2px; text-align: center; +} + +.attribute-label { + display: flex; + text-align: center; + user-select: none; + -webkit-user-select: none; + margin-top: 12px; + margin-bottom: 4px; +} + +.attribute-edit-button { } \ No newline at end of file diff --git a/macrovision.js b/macrovision.js index b5a200ed..3c92d8f2 100644 --- a/macrovision.js +++ b/macrovision.js @@ -2331,6 +2331,7 @@ function configViewOptions(entity, view) { if (val.editing) { const name = document.createElement("input"); name.placeholder = "Enter name..."; + name.value = val.name; holder.appendChild(name); holder.addEventListener("keydown", (e) => { @@ -2339,6 +2340,7 @@ function configViewOptions(entity, view) { const input = document.createElement("input"); input.placeholder = "Enter measurement..."; + input.value = val.text; holder.appendChild(input); input.addEventListener("keydown", (e) => { @@ -2374,6 +2376,7 @@ function configViewOptions(entity, view) { power: power, type: unitType, base: baseValue, + custom: true }; // since we might have changed unit types, we should @@ -2381,15 +2384,33 @@ function configViewOptions(entity, view) { entity.currentView.units[key] = undefined; defineAttributeGetters(entity.views[view]); - configViewOptions(entity, view); + updateSizes(); }); } else { const label = document.createElement("div"); - label.classList.add("options-label"); + label.classList.add("attribute-label"); label.innerText = val.name; holder.appendChild(label); + + const editButton = document.createElement("button"); + editButton.classList.add("attribute-edit-button"); + const editButtonIcon = document.createElement("i"); + editButtonIcon.classList.add("fas"); + editButtonIcon.classList.add("fa-edit"); + + editButton.addEventListener("click", e => { + entity.currentView.attributes[key] = { + name: val.name, + text: entity.currentView[key], + editing: true + } + configViewOptions(entity, view); + }); + + editButton.appendChild(editButtonIcon); + label.appendChild(editButton); const row = document.createElement("div"); row.classList.add("options-row"); @@ -2506,8 +2527,9 @@ function configViewOptions(entity, view) { customButton.addEventListener("click", e => { entity.currentView.attributes["custom" + (Object.keys(entity.currentView.attributes).length + 1)] = { - name: "Custom", - editing: true + name: "", + text: "", + editing: true, } configViewOptions(entity, view); }); @@ -4934,7 +4956,7 @@ document.addEventListener("DOMContentLoaded", () => { scenes["Empty"](); } else { try { - const data = JSON.parse(b64DecodeUnicode(param)); + const data = JSON.parse(b64DecodeUnicode(param), math.reviver); if (data.entities === undefined) { return; } @@ -5935,7 +5957,7 @@ function loadScene(name = "default") { } try { const data = JSON.parse( - localStorage.getItem("macrovision-save-" + name) + localStorage.getItem("macrovision-save-" + name), math.reviver ); if (data === null) { console.error("Couldn't load " + name); @@ -5987,7 +6009,7 @@ function exportScene() { .filter(([key, entity]) => entity.ephemeral !== true) .forEach(([key, entity]) => { const element = document.querySelector("#entity-" + key); - results.entities.push({ + const entityData = { name: entity.identifier, customName: entity.name, scale: entity.scale, @@ -5999,7 +6021,22 @@ function exportScene() { y: element.dataset.y, priority: entity.priority, brightness: entity.brightness, + }; + + entityData.views = {}; + + Object.entries(entity.views).forEach(([viewId, viewData]) => { + Object.entries(viewData.attributes).forEach(([attrId, attrData]) => { + if (attrData.custom) { + if (entityData.views[viewId] === undefined) { + entityData.views[viewId] = {}; + } + entityData.views[viewId][attrId] = attrData; + } + }); }); + + results.entities.push(entityData); }); const unit = document.querySelector("#options-height-unit").value; @@ -6076,7 +6113,7 @@ function pasteScene() { navigator.clipboard .readText() .then((text) => { - const data = JSON.parse(text); + const data = JSON.parse(text, math.reviver); if (data.entities === undefined) { return; } @@ -6086,7 +6123,7 @@ function pasteScene() { importScene(data); }) - .catch((err) => alert(err)); + .catch((err) => { toast("Something went wrong when importing: " + err), console.error(err) }); } catch (err) { console.error(err); @@ -6154,6 +6191,11 @@ const migrationDefs = [ entity.flipped = false; }); } + /* + Migration: 5 -> 6 + + Entities can now have custom attributes + */ ]; function migrateScene(data) { @@ -6184,6 +6226,16 @@ function importScene(data) { entity.priority = entityInfo.priority; entity.brightness = entityInfo.brightness; entity.form = entityInfo.form; + + Object.entries(entityInfo.views).forEach(([viewId, viewData]) => { + if (entityInfo.views[viewId] !== undefined) { + Object.entries(entityInfo.views[viewId]).forEach(([attrId, attrData]) => { + entity.views[viewId].attributes[attrId] = attrData; + }); + } + }); + + Object.keys(entityInfo.views).forEach(key => defineAttributeGetters(entity.views[key])); displayEntity(entity, entityInfo.view, entityInfo.x, entityInfo.y); });