mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make bin editor open to image view; corners editing on demand

Browse Source 
- Default view: processed image (full size in dialog), or placeholder if
  not yet processed. Name and type selector always visible at top.
- "Adjust corners…" button reveals the canvas editor (lazy-loaded on
  first click, so there's no canvas allocation cost on open).
- "← Back to image" returns to the image view.
- Corners are only re-processed on Save if the canvas was opened.
- Tabs reduced to Fields | Contents (Corners is no longer a tab).
- Added preview image CSS; btn-link style for the back button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-04-03 13:06:30 +00:00
parent 46ce10289e
commit e2d0079ba0
3 changed files with 120 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
public/app.mjs
View File

@@ -2359,6 +2359,8 @@ function open_bin_editor(bin) {
if (!dlg) return;
bin_editor_bin_id = bin.id;
bin_editor_instance = null; // canvas not loaded until needed
document.getElementById('bin-editor-name').value = bin.name;
// Populate type selector
@@ -2385,28 +2387,68 @@ function open_bin_editor(bin) {
type_sel.addEventListener('change', sync_dims_row);
sync_dims_row();
// Tabs
let active_tab = 'corners';
// Image preview (default view)
const view_image = document.getElementById('bin-editor-view-image');
const view_corners = document.getElementById('bin-editor-view-corners');
const preview_img = document.getElementById('bin-editor-preview');
const no_image_el = document.getElementById('bin-editor-no-image');
function show_image_view() {
view_image.hidden = false;
view_corners.hidden = true;
}
function show_corners_view() {
view_image.hidden = true;
view_corners.hidden = false;
// Lazy-load canvas the first time
if (!bin_editor_instance) {
const canvas = document.getElementById('bin-editor-canvas');
bin_editor_instance = new Grid_Setup(canvas);
bin_editor_instance.set_rows(1);
bin_editor_instance.set_cols(1);
bin_editor_instance.load_image(`/img/${bin.source_id}`).then(() => {
if (bin.corners) {
bin_editor_instance.set_corners(bin.corners);
}
});
}
}
if (bin.image_filename) {
preview_img.src = `/img/${bin.image_filename}`;
preview_img.hidden = false;
no_image_el.hidden = true;
} else {
preview_img.hidden = true;
no_image_el.hidden = false;
}
document.getElementById('bin-editor-go-corners').onclick = () => {
dlg.showModal(); // already open; ensures layout is stable before canvas sizes
show_corners_view();
};
document.getElementById('bin-editor-go-back').onclick = show_image_view;
show_image_view();
// Tabs: Fields | Contents
const tab_panels = {
corners: document.getElementById('bin-editor-tab-corners'),
fields: document.getElementById('bin-editor-tab-fields'),
contents: document.getElementById('bin-editor-tab-contents'),
};
qs(dlg, '#bin-editor-tabs').onclick = (e) => {
const tab = e.target.dataset.tab;
if (!tab) return;
active_tab = tab;
qs(dlg, '#bin-editor-tabs').querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.tab === tab);
});
for (const [name, el] of Object.entries(tab_panels)) {
el.hidden = name !== tab;
}
const save_btn = document.getElementById('bin-editor-save');
save_btn.textContent = active_tab === 'corners' ? 'Save & process' : 'Save';
};
// Fields tab
// Fields
bin_editor_get_fields = build_field_editor(
document.getElementById('bin-field-rows'),
document.getElementById('bin-add-field-select'),
@@ -2414,22 +2456,11 @@ function open_bin_editor(bin) {
bin.fields ?? {}
).get_fields;
// Contents tab
// Contents
render_bin_contents(bin.id, document.getElementById('bin-contents-list'));
document.getElementById('bin-add-content').onclick = () => open_bin_content_dialog(bin.id);
// Show dialog first so the canvas has correct layout dimensions
dlg.showModal();
const canvas = document.getElementById('bin-editor-canvas');
bin_editor_instance = new Grid_Setup(canvas);
bin_editor_instance.set_rows(1);
bin_editor_instance.set_cols(1);
bin_editor_instance.load_image(`/img/${bin.source_id}`).then(() => {
if (bin.corners) {
bin_editor_instance.set_corners(bin.corners);
}
});
}
// ---------------------------------------------------------------------------
@@ -2678,10 +2709,9 @@ async function init() {
const type_id = document.getElementById('bin-editor-type').value || null;
const fields = bin_editor_get_fields?.() ?? {};
try {
// Always save name, type, and fields
const corners = bin_editor_instance?.get_corners();
if (corners) {
// Corners tab active (or image loaded) — also re-process
// Canvas was opened — re-process corners too
const phys_w = parseFloat(document.getElementById('bin-editor-width').value) || null;
const phys_h = parseFloat(document.getElementById('bin-editor-height').value) || null;
await api.update_bin(id, { name, type_id, fields });