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

Various improvements to make things happier.

Browse source
This commit is contained in:
Yaro Kasear 2025-12-31 09:19:11 -06:00
parent 6f175c103e
commit a05218b985
4 changed files with 238 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

19
inventory/static/css/components/draw.css
View file

@ -1,8 +1,18 @@
.grid-widget {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
min-height: 0;
}
.grid-widget .grid-wrap {
flex: 1 1 auto;
width: 100%;
height: 80vh;
height: clamp(240px, 50vh, 700px);
position: relative;
overflow: hidden;
min-height: 0;
}
.grid-widget [data-grid] {
@ -12,12 +22,17 @@
height: 100%;
touch-action: none;
margin: 0 auto;
max-width: 100%;
}
.grid-widget [data-toolbar]::-webkit-scrollbar {
height: 8px;
}
.grid-widget [data-grid-wrap] {
min-width: 0;
}
.grid-widget [data-coords] {
bottom: 10px;
pointer-events: none;
@ -31,9 +46,11 @@
}
.grid-widget [data-toolbar] {
flex: 0 0 auto;
width: min(100%, var(--grid-maxw, 100%));
box-sizing: border-box;
margin: 0 auto;
max-width: 100%;
}
.grid-widget [data-dot] {

4
inventory/static/js/components/draw.js
View file

@ -2,7 +2,6 @@ document.querySelectorAll('[data-grid-widget]').forEach((root, index) => {
initGridWidget(root, { storageKey: `gridDoc:${index}` });
});
let activeGridWidget = null;
document.addEventListener('keydown', (e) => {
@ -10,7 +9,6 @@ document.addEventListener('keydown', (e) => {
activeGridWidget.handleKeyDown(e);
});
function initGridWidget(root, opts = {}) {
const DEFAULT_DOC = { version: 1, cellSize: 25, shapes: [] };
const MAX_HISTORY = 100;
@ -102,6 +100,8 @@ function initGridWidget(root, opts = {}) {
});
});
requestAnimationFrame(() => requestAnimationFrame(scheduleSnappedCellSize));
const api = {
handleKeyDown(e) {
const key = e.key.toLowerCase();

43
inventory/templates/components/draw.html
View file

@ -1,5 +1,4 @@
{% macro drawWidget(uid) %}
<div class="container">
<div class="grid-widget" data-grid-widget>
<div data-toolbar
class="btn-toolbar bg-light border border-bottom-0 rounded-bottom-0 border-secondary-subtle rounded p-1 align-items-center flex-nowrap overflow-auto toolbar">
@ -81,8 +80,8 @@
<input type="color" class="form-control form-control-sm form-control-color" data-color>
<div class="vr mx-1"></div>
<div class="btn-group">
<input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}"
data-tool checked>
<input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}" data-tool
checked>
<label for="tool-pen-{{ uid }}"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen"
@ -96,8 +95,8 @@
data-tool>
<label for="tool-outline-{{ uid }}"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-square" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square"
viewBox="0 0 16 16">
<path
d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
</svg>
@ -117,8 +116,8 @@
id="tool-outline-ellipse-{{ uid }}" data-tool>
<label for="tool-outline-ellipse-{{ uid }}"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-circle" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle"
viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
</svg>
</label>
@ -133,8 +132,7 @@
</svg>
</label>
<input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}"
data-tool>
<input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}" data-tool>
<label for="tool-line-{{ uid }}"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
@ -148,12 +146,12 @@
<div class="vr mx-1"></div>
<div class="btn-group">
<input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid"
id="type-no-grid-{{ uid }}" data-gridtype checked>
<input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid" id="type-no-grid-{{ uid }}"
data-gridtype checked>
<label for="type-no-grid-{{ uid }}"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-border" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-border"
viewBox="0 0 16 16">
<path
d="M0 0h.969v.5H1v.469H.969V1H.5V.969H0zm2.844 1h-.938V0h.938zm1.875 0H3.78V0h.938v1zm1.875 0h-.938V0h.938zm.937 0V.969H7.5V.5h.031V0h.938v.5H8.5v.469h-.031V1zm2.813 0h-.938V0h.938zm1.875 0h-.938V0h.938zm1.875 0h-.938V0h.938zM15.5 1h-.469V.969H15V.5h.031V0H16v.969h-.5zM1 1.906v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM1 3.78v.938H0V3.78zm6.5.938V3.78h1v.938zm7.5 0V3.78h1v.938zM1 5.656v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM.969 8.5H.5v-.031H0V7.53h.5V7.5h.469v.031H1v.938H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm1.875-.031V8.5H7.53v-.031H7.5V7.53h.031V7.5h.938v.031H8.5v.938zm1.875.031h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.406 0h-.469v-.031H15V7.53h.031V7.5h.469v.031h.5v.938h-.5zM0 10.344v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 12.22v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 14.094v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM.969 16H0v-.969h.5V15h.469v.031H1v.469H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm.937 0v-.5H7.5v-.469h.031V15h.938v.031H8.5v.469h-.031v.5zm2.813 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm.937 0v-.5H15v-.469h.031V15h.469v.031h.5V16z" />
</svg>
@ -178,8 +176,8 @@
d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM8.5 16h-1V0h1zm.906-15h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm14-.938v.938h1v-.938zM1 4.719V3.78H0v.938h1zm14-.938v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm14-.938v.938h1v-.938zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5zm1.406 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031zM0 9.406v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
</svg>
</label>
<input type="radio" class="btn-check" name="gridType-{{ uid }}" value="fullGrid"
id="type-full-{{ uid }}" data-gridtype>
<input type="radio" class="btn-check" name="gridType-{{ uid }}" value="fullGrid" id="type-full-{{ uid }}"
data-gridtype>
<label for="type-full-{{ uid }}"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
@ -191,8 +189,7 @@
<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"
data-export>
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center" data-export>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-download" viewBox="0 0 16 16">
<path
@ -205,8 +202,8 @@
<button type="button"
class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
data-import-button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-upload" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload"
viewBox="0 0 16 16">
<path
d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
<path
@ -214,10 +211,9 @@
</svg>
</button>
<button type="button"
class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center"
data-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">
class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center" data-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>
@ -237,5 +233,4 @@
</div>
</div>
</div>
</div>
{% endmacro %}

2
inventory/templates/testing.html
View file

@ -7,7 +7,7 @@
{% endblock %}
{% block main %}
{{ draw.drawWidget('test') }}
{{ draw.drawWidget('test1') }}
{% endblock %}
{% block scriptincludes %}