Fixing more annoyign bugs.
This commit is contained in:
parent
4fe3dfb8b4
commit
47942cc6b6
1 changed files with 26 additions and 45 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue