Fixing more annoyign bugs.

This commit is contained in:
Yaro Kasear 2025-12-12 10:03:43 -06:00
parent 4fe3dfb8b4
commit 47942cc6b6

View file

@ -177,7 +177,7 @@
</span>
<div id="coords"
class="border border-black position-absolute d-none bg-warning-subtle px-1 py-0 user-select-none"></div>
<canvas id="overlay" class="w-100 h-100"></canvas>
<canvas id="overlay" class="position-absolute w-100 h-100"></canvas>
</div>
</div>
{% endblock %}
@ -216,6 +216,10 @@ window.addEventListener('resize', resizeAndSetupCanvas);
setGrid();
function pxToGrid(v) {
return v / {{ grid_size }};
}
function axisMode(type, axis) {
if (type === 'fullGrid') return 'grid';
if (type === 'verticalGrid') return axis === 'x' ? 'grid' : 'px';
@ -300,24 +304,17 @@ function normRange(a1, a2, mode, grid) {
}
function normalizeRect(shape) {
const grid = {{ grid_size }};
const type = getActiveType();
const modeX = axisMode(type, 'x');
const modeY = axisMode(type, 'y');
const xr = normRange(shape.x1, shape.x2, modeX, grid);
const yr = normRange(shape.y1, shape.y2, modeY, grid);
const x = (modeX === 'grid') ? xr.start : xr.start;
const w = (modeX === 'grid') ? xr.size : xr.size;
const y = (modeX === 'grid') ? yr.start : yr.start;
const h = (modeX === 'grid') ? yr.size : yr.size;
const x1 = pxToGrid(shape.x1);
const y1 = pxToGrid(shape.y1);
const x2 = pxToGrid(shape.x2);
const y2 = pxToGrid(shape.y2);
return {
type: 'rect',
modeX, modeY,
x, y, w, h,
x: Math.min(x1, x2),
y: Math.min(y1, y2),
w: Math.abs(x2 - x1),
h: Math.abs(y2 - y1),
color: shape.color,
fill: shape.fill
};
@ -329,23 +326,12 @@ function normalizeEllipse(shape) {
}
function normalizeLine(shape) {
const grid = {{ grid_size }};
const type = getActiveType();
const modeX = axisMode(type, 'x');
const modeY = axisMode(type, 'y');
function normPoint(v, mode) {
return mode === 'grid' ? (v / grid) : v;
}
return {
type: 'line',
modeX, modeY,
x1: normPoint(shape.x1, modeX),
y1: normPoint(shape.y1, modeY),
x2: normPoint(shape.x2, modeX),
y2: normPoint(shape.y2, modeY),
x1: pxToGrid(shape.x1),
y1: pxToGrid(shape.y1),
x2: pxToGrid(shape.x2),
y2: pxToGrid(shape.y2),
color: shape.color
};
}
@ -379,21 +365,16 @@ function redrawAll() {
function drawShape(shape) {
if (!ctx) return;
const grid = {{ grid_size }};
const modeX = shape.modeX || 'grid';
const modeY = shape.modeY || 'grid';
const toPxX = (v) => modeX === 'grid' ? v * grid : v;
const toPxY = (v) => modeY === 'grid' ? v * grid : v;
const toPx = (v) => v * {{ grid_size }};
ctx.save();
ctx.strokeStyle = shape.color || '#000000';
if (shape.type === 'rect' || shape.type === 'ellipse') {
const x = toPxX(shape.x);
const y = toPxY(shape.y);
const w = toPxX(shape.w);
const h = toPxY(shape.h);
const x = toPx(shape.x);
const y = toPx(shape.y);
const w = toPx(shape.w);
const h = toPx(shape.h);
if (shape.type === 'rect') {
ctx.strokeRect(x, y, w, h);
@ -421,10 +402,10 @@ function drawShape(shape) {
}
} else if (shape.type === 'line') {
const x1 = toPxX(shape.x1);
const y1 = toPxY(shape.y1);
const x2 = toPxX(shape.x2);
const y2 = toPxY(shape.y2);
const x1 = toPx(shape.x1);
const y1 = toPx(shape.y1);
const x2 = toPx(shape.x2);
const y2 = toPx(shape.y2);
ctx.beginPath();
ctx.moveTo(x1, y1);