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

More features added to our draw widget.

Browse source
This commit is contained in:
Yaro Kasear 2025-12-05 09:29:50 -06:00
parent 55f18b1cbe
commit d207f1da2c
1 changed files with 285 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

98
inventory/templates/testing.html
View file

@ -11,7 +11,7 @@
linear-gradient(to right, #ccc 1px, transparent 1px),
linear-gradient(to bottom, #ccc 1px, transparent 1px);
background-size: var(--grid) var(--grid);
cursor: none;
cursor: crosshair;
height: 80vh;
width: 100%;
height: calc(round(nearest, 80vh, var(--grid)) + 1px);
@ -65,18 +65,42 @@
</label>
<input type="radio" class="btn-check" id="line" name="tool">
<label for="line" class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<label for="line"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
⎯
</label>
</div>
<div class="vr mx-1"></div>
<div class="btn-group">
<button type="button"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
id="export">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-floppy" viewBox="0 0 16 16">
<path d="M11 2H9v3h2z" />
<path
d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z" />
</svg>
</button>
<button type="button"
class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center"
id="clear">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-x-lg" viewBox="0 0 16 16">
<path
d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
</svg>
</button>
</div>
</div>
<span id="dot" class="position-absolute p-0 m-0 d-none">
<svg xmlns="http://www.w3.org/2000/svg" width="{{ dot_size }}"
height="{{ dot_size }}" viewBox="0 0 32 32" id="dotSVG">
<svg xmlns="http://www.w3.org/2000/svg" width="{{ dot_size }}" height="{{ dot_size }}" viewBox="0 0 32 32"
id="dotSVG">
<circle cx="16" cy="16" r="4" fill="black" />
</svg>
</span>
<div id="coords" class="border border-black position-absolute d-none bg-warning-subtle px-1 py-0 user-select-none"></div>
<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>
</div>
</div>
@ -84,18 +108,20 @@
{% block script %}
const canvasEl = document.getElementById('overlay');
const clearEl = document.getElementById('clear');
const colorEl = document.getElementById('color');
const coordsEl = document.getElementById('coords');
const dotEl = document.getElementById('dot');
const dotSVGEl = document.getElementById('dotSVG');
const exportEl = document.getElementById('export');
const gridEl = document.getElementById('grid');
let ctx;
let dpr = 1;
let selectedColor = '#000000';
let selectedColor;
let currentShape = null;
let shapes = [];
let shapes = JSON.parse(localStorage.getItem('gridShapes')) || [];
resizeAndSetupCanvas();
window.addEventListener('resize', resizeAndSetupCanvas);
@ -113,8 +139,12 @@
const localX = clampedX - rect.left;
const localY = clampedY - rect.top;
const ix = Math.round(localX / {{ grid_size }});
const iy = Math.round(localY / {{ grid_size }});
const maxIx = Math.floor(rect.width / {{ grid_size }});
const maxIy = Math.floor(rect.height / {{ grid_size }});
const ix = Math.min(Math.max(Math.round(localX / {{ grid_size }}), 0), maxIx);
const iy = Math.min(Math.max(Math.round(localY / {{ grid_size }}), 0), maxIy);
return {
ix,
iy,
@ -140,6 +170,17 @@
};
}
function normalizeLine(shape) {
return {
type: 'line',
x1: shape.x1,
y1: shape.y1,
x2: shape.x2,
y2: shape.y2,
color: shape.color
};
}
function resizeAndSetupCanvas() {
dpr = window.devicePixelRatio || 1;
const rect = canvasEl.getBoundingClientRect();
@ -150,6 +191,12 @@
ctx = canvasEl.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
selectedColor = colorEl.value || '#000000';
const circle = dotSVGEl.querySelector('circle');
if (circle) {
circle.setAttribute('fill', selectedColor);
}
redrawAll();
}
@ -186,9 +233,27 @@
}
function clearCanvas() {
ctx.clearRect(0, 0, canvasEl.width / dpr, canvasEl.height / dpr);
if (!ctx) return;
const rect = canvasEl.getBoundingClientRect();
ctx.clearRect(0, 0, rect.width, rect.height);
}
exportEl.addEventListener('click', () => {
const blob = new Blob([JSON.stringify(shapes, null,2)], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'grid-shapes.json';
a.click();
URL.revokeObjectURL(url);
});
clearEl.addEventListener('click', () => {
shapes = [];
localStorage.removeItem('gridShapes');
redrawAll();
});
colorEl.addEventListener('input', () => {
selectedColor = document.getElementById('color').value;
const circle = dotSVGEl.querySelector('circle');
@ -202,9 +267,12 @@
if ((e.ctrlKey || e.metaKey) && key === 'z') {
e.preventDefault();
if (shapes.length > 0) {
shapes.pop();
localStorage.setItem('gridShapes', JSON.stringify(shapes));
redrawAll();
}
}
if (key === 'escape' && currentShape) {
currentShape = null;
@ -308,14 +376,7 @@
let finalShape = null;
if (currentShape.tool === 'line') {
finalShape = {
type: 'line',
x1: currentShape.x1,
y1: currentShape.y1,
x2: currentShape.x2,
y2: currentShape.y2,
color: currentShape.color
};
finalShape = normalizeLine(currentShape);
} else {
const rect = normalizeRect(currentShape);
@ -326,6 +387,7 @@
if (finalShape) {
shapes.push(finalShape);
localStorage.setItem('gridShapes', JSON.stringify(shapes));
}
clearCanvas();