Dash axis line if 0-point is at or out of bounds

This commit is contained in:
Wuzzy 2024-12-07 17:23:01 +01:00
parent e6ed706163
commit 9b267df0ae

View File

@ -80,6 +80,7 @@ const POINT_COLOR_SELECTED = "#e19696";
const EDGE_COLOR = "#0f2c2e"; const EDGE_COLOR = "#0f2c2e";
const GRID_COLOR = "#00000040"; const GRID_COLOR = "#00000040";
const AXIS_COLOR = "#000000"; const AXIS_COLOR = "#000000";
const AXIS_DASH = [5,5];
// Color to be used when the diagram is cleared // Color to be used when the diagram is cleared
const CLEAR_COLOR = "#ecddba"; const CLEAR_COLOR = "#ecddba";
// list of possible cell colors // list of possible cell colors
@ -642,17 +643,23 @@ function putAxes(context) {
// If axis would go out of bounds, force them to // If axis would go out of bounds, force them to
// be rendered at the side instead. // be rendered at the side instead.
let oob_x = false;
let oob_y = false;
let other_side_x = false; let other_side_x = false;
let other_side_y = false; let other_side_y = false;
if (x0 <= AXIS_BORDER_OFFSET) { if (x0 <= AXIS_BORDER_OFFSET) {
x0 = AXIS_BORDER_OFFSET; x0 = AXIS_BORDER_OFFSET;
oob_x = true;
} else if (x0 >= w - AXIS_BORDER_OFFSET) { } else if (x0 >= w - AXIS_BORDER_OFFSET) {
x0 = w - AXIS_BORDER_OFFSET; x0 = w - AXIS_BORDER_OFFSET;
oob_x = true;
} }
if (y0 <= AXIS_BORDER_OFFSET) { if (y0 <= AXIS_BORDER_OFFSET) {
y0 = AXIS_BORDER_OFFSET; y0 = AXIS_BORDER_OFFSET;
oob_y = true;
} else if (y0 >= h - AXIS_BORDER_OFFSET) { } else if (y0 >= h - AXIS_BORDER_OFFSET) {
y0 = h - AXIS_BORDER_OFFSET; y0 = h - AXIS_BORDER_OFFSET;
oob_y = true;
} }
// Flip axis labels if coming close to certain sides // Flip axis labels if coming close to certain sides
if (x0 <= AXIS_LABEL_FLIP_OFFSET) { if (x0 <= AXIS_LABEL_FLIP_OFFSET) {
@ -662,12 +669,18 @@ function putAxes(context) {
other_side_x = true; other_side_x = true;
} }
// horizontal axis // horizontal axis
context.beginPath(); context.beginPath();
if (oob_y) {
context.setLineDash(AXIS_DASH);
}
context.moveTo(0, y0); context.moveTo(0, y0);
context.lineTo(w, y0); context.lineTo(w, y0);
context.stroke();
context.closePath();
// tick // tick
context.beginPath();
context.setLineDash([]);
if (other_side_x) { if (other_side_x) {
context.moveTo(tx, y0 - AXIS_ARROW_SIZE); context.moveTo(tx, y0 - AXIS_ARROW_SIZE);
context.lineTo(tx, y0); context.lineTo(tx, y0);
@ -685,9 +698,16 @@ function putAxes(context) {
// vertical axis // vertical axis
context.beginPath(); context.beginPath();
if (oob_x) {
context.setLineDash(AXIS_DASH);
}
context.moveTo(x0, 0); context.moveTo(x0, 0);
context.lineTo(x0, h); context.lineTo(x0, h);
context.stroke();
context.closePath();
// tick // tick
context.beginPath();
context.setLineDash([]);
if (other_side_y) { if (other_side_y) {
context.moveTo(x0 + AXIS_ARROW_SIZE, ty); context.moveTo(x0 + AXIS_ARROW_SIZE, ty);
context.lineTo(x0, ty); context.lineTo(x0, ty);