66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import { BBoxElement } from "./BBoxElement.js";
|
|
|
|
/**
|
|
* Element that displays bounding box overlays on an image.
|
|
*/
|
|
export class BBoxOverlayElement extends HTMLElement {
|
|
|
|
constructor () {
|
|
super();
|
|
|
|
this.el = {
|
|
bboxes: []
|
|
};
|
|
|
|
this.classList.add('segs-control');
|
|
|
|
this.bboxClickHandler = this.onBBoxClick.bind(this);
|
|
this.segmentChangeHander = this.onSegmentChange.bind(this);
|
|
}
|
|
|
|
setSegments(segments) {
|
|
this.segments = segments;
|
|
this.segments.addEventListener('segment-change', this.segmentChangeHander);
|
|
this.update();
|
|
}
|
|
|
|
update () {
|
|
this.innerText = '';
|
|
this.el.bboxes.length = 0;
|
|
|
|
if (this.segments) {
|
|
for (let segn = 0; segn < this.segments.bboxes.length; segn++) {
|
|
const sizes = this.segments.sizes[segn],
|
|
bbox = this.segments.bboxes[segn],
|
|
label = this.segments.label[segn];
|
|
|
|
const bboxElement = new BBoxElement(segn, sizes, bbox);
|
|
bboxElement.addEventListener('bbox-mousedown', this.bboxClickHandler);
|
|
bboxElement.setLabel(label);
|
|
|
|
this.el.bboxes.push(bboxElement);
|
|
this.appendChild(bboxElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
onSegmentChange(event) {
|
|
const detail = event.detail;
|
|
this.el.bboxes[detail.segn].setLabel(detail.label);
|
|
}
|
|
|
|
onBBoxClick(event) {
|
|
const detail = event.detail;
|
|
switch (detail.button) {
|
|
case 0:
|
|
this.segments.nextLabel(detail.segn, 1);
|
|
break;
|
|
case 2:
|
|
this.segments.nextLabel(detail.segn, -1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define('liebs-picker-bbox-overlay', BBoxOverlayElement); |