chemicalcrux
/
macrovision
1
0
Fork 0
Koodi Ongelmat 5 Pull-pyynnöt 0 Julkaisut 10 Wiki Activity
Selaa lähdekoodia

Add a horizontal scale; fix breakages caused by disabling vertical scale

master
Fen Dweller 5 vuotta sitten
vanhempi
ba906a5ab1
commit
90da4840fe
3 muutettua tiedostoa jossa 142 lisäystä ja 24 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -5
      macrovision.css
  2. +1
    -1
      macrovision.html
  3. +140
    -18
      macrovision.js

+ 1
- 5
macrovision.css Näytä tiedosto

@@ -268,16 +268,12 @@ select.menu-item {
}

#display {
display: none;
display: block;
width: 100%;
height: 100%;
background: #333;
}

body.toggle-scale #display {
display: block;
}

#options .options-label,
#options .options-banner {
flex: 0 1;


+ 1
- 1
macrovision.html Näytä tiedosto

@@ -32,7 +32,7 @@
<link rel="icon" href="https://crux.sexy/images/macrovision.ico">
</head>

<body class="toggle-bottom-name toggle-top-name toggle-scale">
<body class="toggle-bottom-name toggle-top-name">
<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
alert("An error occured. If you're on a computer, hit F12 to open the developer tools, click the Console tab, and send the red text to chemicalcrux. If you're on mobile, screenshot this instead:\n\n" + msg + "\n" + url + "\n" + "line: " + line + "\n" + "col: " + col + "\nerror: " + error);


+ 140
- 18
macrovision.js Näytä tiedosto

@@ -203,7 +203,9 @@ const config = {
y: 0,
minLineSize: 100,
maxLineSize: 150,
autoFit: false
autoFit: false,
drawYAxis: true,
drawXAxis: false
}

const availableEntities = {
@@ -313,7 +315,7 @@ function updateSizes(dirtyOnly = false) {
config.y = 0;
}

drawScale(dirtyOnly);
drawScales(dirtyOnly);

let ordered = Object.entries(entities);

@@ -341,7 +343,32 @@ function updateSizes(dirtyOnly = false) {

}

function drawScale(ifDirty = false) {
function drawScales(ifDirty = false) {
const canvas = document.querySelector("#display");

/** @type {CanvasRenderingContext2D} */

const ctx = canvas.getContext("2d");

ctx.scale(1, 1);
ctx.canvas.width = canvas.clientWidth;
ctx.canvas.height = canvas.clientHeight;

ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#333";
ctx.fill();


if (config.drawYAxis) {
drawVerticalScale(ifDirty);
}
if (config.drawXAxis) {
drawHorizontalScale(ifDirty);
}
}

function drawVerticalScale(ifDirty = false) {
if (ifDirty && !worldSizeDirty)
return;
function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx, pixelsPer, heightPer) {
@@ -416,14 +443,6 @@ function drawScale(ifDirty = false) {
heightPer = math.unit(heightPer, document.querySelector("#options-height-unit").value);

ctx.scale(1, 1);
ctx.canvas.width = canvas.clientWidth;
ctx.canvas.height = canvas.clientHeight;
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#333";
ctx.fill();

ctx.beginPath();
ctx.moveTo(50, 50);
@@ -437,6 +456,95 @@ function drawScale(ifDirty = false) {
drawTicks(ctx, pixelsPer, heightPer);
}

// this is a lot of copypizza...

function drawHorizontalScale(ifDirty = false) {
if (ifDirty && !worldSizeDirty)
return;
function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx, pixelsPer, heightPer) {
let total = heightPer.clone();
total.value = math.unit(config.y, "meters").toNumber(config.unit) * ctx.canvas.width / ctx.canvas.height;
for (let x = ctx.canvas.clientWidth - 50; x >= 50; x -= pixelsPer) {
drawTick(ctx, x, 50, total);
total = math.add(total, heightPer);
}
}

function drawTick(/** @type {CanvasRenderingContext2D} */ ctx, x, y, value) {
const oldStroke = ctx.strokeStyle;
const oldFill = ctx.fillStyle;

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + 20);
ctx.strokeStyle = "#000000";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(x, y + 20);
ctx.lineTo(x, ctx.canvas.clientHeight - 70);
ctx.strokeStyle = "#aaaaaa";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(x, ctx.canvas.clientHeight - 70);
ctx.lineTo(x, ctx.canvas.clientHeight - 50);
ctx.strokeStyle = "#000000";
ctx.stroke();

const oldFont = ctx.font;
ctx.font = 'normal 24pt coda';
ctx.fillStyle = "#dddddd";

ctx.beginPath();
ctx.fillText(value.format({ precision: 3 }), x + 35, y + 20);

ctx.font = oldFont;
ctx.strokeStyle = oldStroke;
ctx.fillStyle = oldFill;
}
const canvas = document.querySelector("#display");

/** @type {CanvasRenderingContext2D} */

const ctx = canvas.getContext("2d");

let pixelsPer = (ctx.canvas.clientHeight - 100) / config.height.toNumber();

heightPer = 1;


if (pixelsPer < config.minLineSize * 2) {
const factor = math.ceil(config.minLineSize * 2/ pixelsPer);
heightPer *= factor;
pixelsPer *= factor;
}

if (pixelsPer > config.maxLineSize * 2) {
const factor = math.ceil(pixelsPer / 2/ config.maxLineSize);
heightPer /= factor;
pixelsPer /= factor;
}

if (heightPer == 0) {
console.error("The world size is invalid! Refusing to draw the scale...");
return;
}
heightPer = math.unit(heightPer, document.querySelector("#options-height-unit").value);

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(ctx.canvas.clientWidth-50, 50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, ctx.canvas.clientHeight - 50);
ctx.lineTo(ctx.canvas.clientWidth - 50, ctx.canvas.clientHeight - 50);
ctx.stroke();

drawTicks(ctx, pixelsPer, heightPer);
}

// Entities are generated as needed, and we make a copy
// every time - the resulting objects get mutated, after all.
// But we also want to be able to read some information without
@@ -1581,16 +1689,30 @@ const settingsData = {
toggleBodyClass("toggle-bottom-cover", param);
}
},
"show-scale": {
name: "Show Scale",
desc: "Show the scale",
"show-vertical-scale": {
name: "Show Vertical Scale",
desc: "Draw vertical scale marks",
type: "toggle",
default: true,
get value() {
return config.drawYAxis;
},
set value(param) {
config.drawYAxis = param;
drawScales(false);
}
},
"show-horizontal-scale": {
name: "Show Horiziontal Scale",
desc: "Draw horizontal scale marks",
type: "toggle",
default: true,
get value() {
return checkBodyClass("toggle-scale");
return config.drawXAxis;
},
set value(param) {
toggleBodyClass("toggle-scale", param);
config.drawXAxis = param;
drawScales(false);
}
},
}
@@ -3301,7 +3423,7 @@ function copyScreenshot() {
})
]);
});
drawScale(false);
drawScales(false);
}

function saveScreenshot() {
@@ -3311,7 +3433,7 @@ function saveScreenshot() {
a.setAttribute("download", "macrovision.png");
a.click();
});
drawScale(false);
drawScales(false);
}

const rateLimits = {};


Write Preview
Loading…
Peruuta
Tallenna