Dash axis line if 0-point is at or out of bounds
This commit is contained in:
parent
e6ed706163
commit
9b267df0ae
22
libpov.js
22
libpov.js
@ -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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user