yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixing more annoyign bugs.

Browse source
This commit is contained in:
Yaro Kasear 2025-12-12 10:03:43 -06:00
parent 4fe3dfb8b4
commit 47942cc6b6
1 changed files with 26 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

71
inventory/templates/testing.html
View file

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