This commit is contained in:
Iisyourdad
@@ -0,0 +1,502 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* AnnotationCanvas: renders a step's working image plus its normalized
|
||||
* annotation scene graph, and provides editing interactions (create, select,
|
||||
* move, resize, nudge, crop). Geometry rules mirror core/raster.js so the
|
||||
* editor shows what exports produce.
|
||||
*/
|
||||
|
||||
const DRAW_ORDER = { blur: 0, highlight: 1, magnify: 2, rect: 3, oval: 3, line: 3, arrow: 3, cursor: 4, number: 5, text: 6, tooltip: 7 };
|
||||
const POINT_TOOLS = new Set(['line', 'arrow']);
|
||||
const HANDLE_SIZE = 8;
|
||||
|
||||
class AnnotationCanvas {
|
||||
constructor(canvasEl, callbacks = {}) {
|
||||
this.canvas = canvasEl;
|
||||
this.ctx = canvasEl.getContext('2d');
|
||||
this.cb = callbacks; // { onChange, onSelect, onCrop, onRequestText }
|
||||
this.image = null; // HTMLImageElement
|
||||
this.imgW = 0;
|
||||
this.imgH = 0;
|
||||
this.annotations = [];
|
||||
this.tool = 'select';
|
||||
this.zoomMode = 'fit';
|
||||
this.scale = 1;
|
||||
this.selectedId = null;
|
||||
this.drag = null;
|
||||
this.cropRect = null;
|
||||
|
||||
canvasEl.addEventListener('pointerdown', (e) => this.onDown(e));
|
||||
canvasEl.addEventListener('pointermove', (e) => this.onMove(e));
|
||||
canvasEl.addEventListener('pointerup', (e) => this.onUp(e));
|
||||
canvasEl.addEventListener('dblclick', (e) => this.onDblClick(e));
|
||||
}
|
||||
|
||||
setImage(image, w, h) {
|
||||
this.image = image;
|
||||
this.imgW = w || 0;
|
||||
this.imgH = h || 0;
|
||||
this.cropRect = null;
|
||||
if (!image || !this.imgW || !this.imgH) {
|
||||
this.canvas.width = 1;
|
||||
this.canvas.height = 1;
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
this.applyZoom();
|
||||
}
|
||||
|
||||
setAnnotations(annotations) {
|
||||
this.annotations = annotations || [];
|
||||
if (!this.annotations.some((a) => a.id === this.selectedId)) this.selectedId = null;
|
||||
this.render();
|
||||
}
|
||||
|
||||
setTool(tool) {
|
||||
this.tool = tool;
|
||||
this.cropRect = null;
|
||||
if (tool !== 'select') this.select(null);
|
||||
this.render();
|
||||
}
|
||||
|
||||
setZoom(mode) {
|
||||
this.zoomMode = mode;
|
||||
this.applyZoom();
|
||||
}
|
||||
|
||||
applyZoom() {
|
||||
if (!this.image) return;
|
||||
const wrap = this.canvas.parentElement;
|
||||
if (this.zoomMode === 'fit') {
|
||||
const availW = Math.max(100, wrap.clientWidth - 40);
|
||||
const availH = Math.max(100, wrap.clientHeight - 40);
|
||||
this.scale = Math.min(availW / this.imgW, availH / this.imgH, 1);
|
||||
} else {
|
||||
this.scale = Number(this.zoomMode) || 1;
|
||||
}
|
||||
this.canvas.width = Math.round(this.imgW * this.scale);
|
||||
this.canvas.height = Math.round(this.imgH * this.scale);
|
||||
this.render();
|
||||
}
|
||||
|
||||
select(id) {
|
||||
this.selectedId = id;
|
||||
if (this.cb.onSelect) this.cb.onSelect(this.annotations.find((a) => a.id === id) || null);
|
||||
this.render();
|
||||
}
|
||||
|
||||
selected() {
|
||||
return this.annotations.find((a) => a.id === this.selectedId) || null;
|
||||
}
|
||||
|
||||
changed() {
|
||||
if (this.cb.onChange) this.cb.onChange(this.annotations);
|
||||
this.render();
|
||||
}
|
||||
|
||||
// ---- coordinate helpers ----
|
||||
toNorm(e) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: (e.clientX - rect.left) / rect.width,
|
||||
y: (e.clientY - rect.top) / rect.height,
|
||||
};
|
||||
}
|
||||
|
||||
px(ann) {
|
||||
return {
|
||||
x: ann.x * this.canvas.width,
|
||||
y: ann.y * this.canvas.height,
|
||||
w: ann.w * this.canvas.width,
|
||||
h: ann.h * this.canvas.height,
|
||||
};
|
||||
}
|
||||
|
||||
// ---- rendering ----
|
||||
render() {
|
||||
const { ctx, canvas } = this;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
if (!this.image) return;
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
const ordered = [...this.annotations].sort((a, b) => (DRAW_ORDER[a.type] ?? 3) - (DRAW_ORDER[b.type] ?? 3));
|
||||
for (const ann of ordered) this.drawAnnotation(ann);
|
||||
|
||||
const sel = this.selected();
|
||||
if (sel) this.drawSelection(sel);
|
||||
if (this.cropRect) this.drawCropOverlay();
|
||||
}
|
||||
|
||||
strokePx(ann) {
|
||||
return Math.max(1, ((ann.style && ann.style.strokeWidth) || 3) * this.canvas.width / 1000);
|
||||
}
|
||||
|
||||
fontPx(ann) {
|
||||
return Math.max(9, ((ann.style && ann.style.fontSize) || 0.022) * this.canvas.height);
|
||||
}
|
||||
|
||||
drawAnnotation(ann) {
|
||||
const { ctx } = this;
|
||||
const { x, y, w, h } = this.px(ann);
|
||||
const style = ann.style || {};
|
||||
const stroke = style.stroke || '#E5484D';
|
||||
const fill = style.fill && style.fill !== 'transparent' ? style.fill : null;
|
||||
ctx.save();
|
||||
ctx.lineWidth = this.strokePx(ann);
|
||||
ctx.strokeStyle = stroke;
|
||||
|
||||
switch (ann.type) {
|
||||
case 'rect':
|
||||
if (fill) { ctx.fillStyle = fill; ctx.fillRect(x, y, w, h); }
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
break;
|
||||
case 'oval':
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
|
||||
if (fill) { ctx.fillStyle = fill; ctx.fill(); }
|
||||
ctx.stroke();
|
||||
break;
|
||||
case 'line':
|
||||
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y + h); ctx.stroke();
|
||||
break;
|
||||
case 'arrow': {
|
||||
const len = Math.hypot(w, h) || 1;
|
||||
const head = Math.min(len * 0.4, Math.max(10, ctx.lineWidth * 4));
|
||||
const ux = w / len, uy = h / len;
|
||||
const bx = x + w - ux * head, by = y + h - uy * head;
|
||||
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(bx, by); ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + w, y + h);
|
||||
ctx.lineTo(bx - uy * head * 0.5, by + ux * head * 0.5);
|
||||
ctx.lineTo(bx + uy * head * 0.5, by - ux * head * 0.5);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = stroke; ctx.fill();
|
||||
break;
|
||||
}
|
||||
case 'blur': {
|
||||
// preview: pixelate the region by down/up-scaling
|
||||
const f = Math.max(6, (ann.radius || 8));
|
||||
try {
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
const tw = Math.max(1, Math.round(w / f)), th = Math.max(1, Math.round(h / f));
|
||||
const off = document.createElement('canvas');
|
||||
off.width = tw; off.height = th;
|
||||
off.getContext('2d').drawImage(this.canvas, x, y, w, h, 0, 0, tw, th);
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.drawImage(off, 0, 0, tw, th, x, y, w, h);
|
||||
} catch { /* region may be degenerate while dragging */ }
|
||||
break;
|
||||
}
|
||||
case 'highlight':
|
||||
ctx.fillStyle = 'rgba(255, 235, 59, 0.41)';
|
||||
ctx.fillRect(x, y, w, h);
|
||||
break;
|
||||
case 'magnify': {
|
||||
const zoom = ann.zoom || 2;
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
|
||||
ctx.clip();
|
||||
const sw = w / zoom, sh = h / zoom;
|
||||
ctx.drawImage(
|
||||
this.image,
|
||||
(x + w / 2 - sw / 2) / this.scale, (y + h / 2 - sh / 2) / this.scale,
|
||||
sw / this.scale, sh / this.scale,
|
||||
x, y, w, h
|
||||
);
|
||||
ctx.restore();
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
break;
|
||||
}
|
||||
case 'text': {
|
||||
ctx.font = `600 ${this.fontPx(ann)}px system-ui, sans-serif`;
|
||||
ctx.fillStyle = stroke;
|
||||
ctx.textBaseline = 'top';
|
||||
let ty = y;
|
||||
for (const line of String(ann.text || 'Text').split('\n')) {
|
||||
ctx.fillText(line, x, ty);
|
||||
ty += this.fontPx(ann) * 1.25;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'tooltip': {
|
||||
const bg = fill || '#1F2937';
|
||||
const ts = Math.max(6, Math.min(Math.abs(w), Math.abs(h)) * 0.25);
|
||||
ctx.fillStyle = bg;
|
||||
ctx.beginPath();
|
||||
const r = 6;
|
||||
ctx.roundRect(x, y, w, h, r);
|
||||
ctx.fill();
|
||||
const tail = style.tail || 'bottom';
|
||||
ctx.beginPath();
|
||||
if (tail === 'bottom') { ctx.moveTo(x + w / 2 - ts, y + h); ctx.lineTo(x + w / 2 + ts, y + h); ctx.lineTo(x + w / 2, y + h + ts * 1.4); }
|
||||
if (tail === 'top') { ctx.moveTo(x + w / 2 - ts, y); ctx.lineTo(x + w / 2 + ts, y); ctx.lineTo(x + w / 2, y - ts * 1.4); }
|
||||
if (tail === 'left') { ctx.moveTo(x, y + h / 2 - ts); ctx.lineTo(x, y + h / 2 + ts); ctx.lineTo(x - ts * 1.4, y + h / 2); }
|
||||
if (tail === 'right') { ctx.moveTo(x + w, y + h / 2 - ts); ctx.lineTo(x + w, y + h / 2 + ts); ctx.lineTo(x + w + ts * 1.4, y + h / 2); }
|
||||
ctx.closePath(); ctx.fill();
|
||||
ctx.fillStyle = style.textColor || '#fff';
|
||||
ctx.font = `600 ${this.fontPx(ann)}px system-ui, sans-serif`;
|
||||
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
|
||||
ctx.fillText(String(ann.text || '…'), x + w / 2, y + h / 2, Math.abs(w) - 8);
|
||||
break;
|
||||
}
|
||||
case 'number': {
|
||||
const rr = Math.max(8, Math.min(Math.abs(w), Math.abs(h)) / 2);
|
||||
ctx.fillStyle = stroke;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + w / 2, y + h / 2, rr, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = style.textColor || '#fff';
|
||||
ctx.font = `700 ${rr}px system-ui, sans-serif`;
|
||||
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
|
||||
ctx.fillText(String(ann.value ?? '?'), x + w / 2, y + h / 2 + 1);
|
||||
break;
|
||||
}
|
||||
case 'cursor': {
|
||||
const s = Math.max(12, Math.min(Math.abs(w), Math.abs(h)));
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.strokeStyle = '#111827';
|
||||
ctx.lineWidth = Math.max(1, s / 12);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y); ctx.lineTo(x, y + s); ctx.lineTo(x + s * 0.28, y + s * 0.75);
|
||||
ctx.lineTo(x + s * 0.45, y + s * 1.05); ctx.lineTo(x + s * 0.58, y + s * 0.98);
|
||||
ctx.lineTo(x + s * 0.42, y + s * 0.68); ctx.lineTo(x + s * 0.72, y + s * 0.68);
|
||||
ctx.closePath();
|
||||
ctx.fill(); ctx.stroke();
|
||||
break;
|
||||
}
|
||||
default: break;
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
drawSelection(ann) {
|
||||
const { ctx } = this;
|
||||
const { x, y, w, h } = this.px(ann);
|
||||
ctx.save();
|
||||
ctx.strokeStyle = '#2563eb';
|
||||
ctx.setLineDash([5, 4]);
|
||||
ctx.lineWidth = 1.2;
|
||||
ctx.strokeRect(Math.min(x, x + w) - 3, Math.min(y, y + h) - 3, Math.abs(w) + 6, Math.abs(h) + 6);
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = '#2563eb';
|
||||
for (const hd of this.handles(ann)) {
|
||||
ctx.fillRect(hd.px - HANDLE_SIZE / 2, hd.py - HANDLE_SIZE / 2, HANDLE_SIZE, HANDLE_SIZE);
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
handles(ann) {
|
||||
const { x, y, w, h } = this.px(ann);
|
||||
if (POINT_TOOLS.has(ann.type)) {
|
||||
return [
|
||||
{ id: 'p1', px: x, py: y },
|
||||
{ id: 'p2', px: x + w, py: y + h },
|
||||
];
|
||||
}
|
||||
return [
|
||||
{ id: 'nw', px: x, py: y }, { id: 'n', px: x + w / 2, py: y }, { id: 'ne', px: x + w, py: y },
|
||||
{ id: 'w', px: x, py: y + h / 2 }, { id: 'e', px: x + w, py: y + h / 2 },
|
||||
{ id: 'sw', px: x, py: y + h }, { id: 's', px: x + w / 2, py: y + h }, { id: 'se', px: x + w, py: y + h },
|
||||
];
|
||||
}
|
||||
|
||||
drawCropOverlay() {
|
||||
const { ctx, canvas } = this;
|
||||
const r = this.cropRect;
|
||||
const x = Math.min(r.x0, r.x1) * canvas.width;
|
||||
const y = Math.min(r.y0, r.y1) * canvas.height;
|
||||
const w = Math.abs(r.x1 - r.x0) * canvas.width;
|
||||
const h = Math.abs(r.y1 - r.y0) * canvas.height;
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.5)';
|
||||
ctx.beginPath();
|
||||
ctx.rect(0, 0, canvas.width, canvas.height);
|
||||
ctx.rect(x, y, w, h);
|
||||
ctx.fill('evenodd');
|
||||
ctx.strokeStyle = '#fff';
|
||||
ctx.setLineDash([6, 4]);
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// ---- interactions ----
|
||||
hitTest(pt) {
|
||||
// topmost first (reverse draw order)
|
||||
const ordered = [...this.annotations].sort((a, b) => (DRAW_ORDER[b.type] ?? 3) - (DRAW_ORDER[a.type] ?? 3));
|
||||
for (const ann of ordered) {
|
||||
const x0 = Math.min(ann.x, ann.x + ann.w) - 0.008;
|
||||
const y0 = Math.min(ann.y, ann.y + ann.h) - 0.008;
|
||||
const x1 = Math.max(ann.x, ann.x + ann.w) + 0.008;
|
||||
const y1 = Math.max(ann.y, ann.y + ann.h) + 0.008;
|
||||
if (pt.x >= x0 && pt.x <= x1 && pt.y >= y0 && pt.y <= y1) return ann;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
handleAt(e) {
|
||||
const sel = this.selected();
|
||||
if (!sel) return null;
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const px = e.clientX - rect.left;
|
||||
const py = e.clientY - rect.top;
|
||||
for (const hd of this.handles(sel)) {
|
||||
if (Math.abs(px - hd.px) <= HANDLE_SIZE && Math.abs(py - hd.py) <= HANDLE_SIZE) return hd.id;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
onDown(e) {
|
||||
if (!this.image) return;
|
||||
this.canvas.setPointerCapture(e.pointerId);
|
||||
const pt = this.toNorm(e);
|
||||
|
||||
if (this.tool === 'crop') {
|
||||
this.cropRect = { x0: pt.x, y0: pt.y, x1: pt.x, y1: pt.y };
|
||||
this.drag = { kind: 'crop' };
|
||||
return;
|
||||
}
|
||||
if (this.tool === 'select') {
|
||||
const handle = this.handleAt(e);
|
||||
if (handle) {
|
||||
this.drag = { kind: 'resize', handle, start: pt, orig: { ...this.selected() } };
|
||||
return;
|
||||
}
|
||||
const hit = this.hitTest(pt);
|
||||
this.select(hit ? hit.id : null);
|
||||
if (hit) this.drag = { kind: 'move', start: pt, orig: { ...hit } };
|
||||
return;
|
||||
}
|
||||
|
||||
// creation tools
|
||||
const ann = {
|
||||
id: `ann-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e6).toString(36)}`,
|
||||
type: this.tool,
|
||||
x: pt.x, y: pt.y, w: 0, h: 0,
|
||||
text: this.tool === 'tooltip' ? 'Tooltip' : this.tool === 'text' ? 'Text' : '',
|
||||
style: this.cb.defaultStyle ? this.cb.defaultStyle(this.tool) : {},
|
||||
};
|
||||
if (this.tool === 'number') ann.value = this.cb.nextNumber ? this.cb.nextNumber() : 1;
|
||||
if (this.tool === 'magnify') ann.zoom = 2;
|
||||
if (this.tool === 'blur') ann.radius = 8;
|
||||
this.annotations.push(ann);
|
||||
this.selectedId = ann.id;
|
||||
this.drag = { kind: 'create', start: pt, ann };
|
||||
}
|
||||
|
||||
onMove(e) {
|
||||
if (!this.drag) return;
|
||||
const pt = this.toNorm(e);
|
||||
const d = this.drag;
|
||||
|
||||
if (d.kind === 'crop') {
|
||||
this.cropRect.x1 = pt.x;
|
||||
this.cropRect.y1 = pt.y;
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
if (d.kind === 'create') {
|
||||
d.ann.w = pt.x - d.start.x;
|
||||
d.ann.h = pt.y - d.start.y;
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
const sel = this.selected();
|
||||
if (!sel) return;
|
||||
if (d.kind === 'move') {
|
||||
sel.x = d.orig.x + (pt.x - d.start.x);
|
||||
sel.y = d.orig.y + (pt.y - d.start.y);
|
||||
this.render();
|
||||
} else if (d.kind === 'resize') {
|
||||
this.resizeBy(sel, d, pt);
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
resizeBy(ann, d, pt) {
|
||||
const dx = pt.x - d.start.x;
|
||||
const dy = pt.y - d.start.y;
|
||||
const o = d.orig;
|
||||
const h = d.handle;
|
||||
if (h === 'p1') { ann.x = o.x + dx; ann.y = o.y + dy; ann.w = o.w - dx; ann.h = o.h - dy; return; }
|
||||
if (h === 'p2') { ann.w = o.w + dx; ann.h = o.h + dy; return; }
|
||||
if (h.includes('w')) { ann.x = o.x + dx; ann.w = o.w - dx; }
|
||||
if (h.includes('e')) { ann.w = o.w + dx; }
|
||||
if (h.includes('n')) { ann.y = o.y + dy; ann.h = o.h - dy; }
|
||||
if (h.includes('s')) { ann.h = o.h + dy; }
|
||||
}
|
||||
|
||||
onUp(e) {
|
||||
const d = this.drag;
|
||||
this.drag = null;
|
||||
if (!d) return;
|
||||
if (d.kind === 'crop') {
|
||||
const r = this.cropRect;
|
||||
this.cropRect = null;
|
||||
const rect = {
|
||||
x: Math.min(r.x0, r.x1), y: Math.min(r.y0, r.y1),
|
||||
w: Math.abs(r.x1 - r.x0), h: Math.abs(r.y1 - r.y0),
|
||||
};
|
||||
this.render();
|
||||
if (rect.w > 0.02 && rect.h > 0.02 && this.cb.onCrop) this.cb.onCrop(rect);
|
||||
return;
|
||||
}
|
||||
if (d.kind === 'create') {
|
||||
// degenerate drags get a sensible default size
|
||||
if (Math.abs(d.ann.w) < 0.01 && Math.abs(d.ann.h) < 0.01) {
|
||||
const defaults = { number: [0.05, 0.08], text: [0.2, 0.05], tooltip: [0.18, 0.07], cursor: [0.04, 0.06] };
|
||||
const [dw, dh] = defaults[d.ann.type] || [0.15, 0.1];
|
||||
d.ann.w = dw; d.ann.h = dh;
|
||||
}
|
||||
this.normalizeRect(d.ann);
|
||||
this.changed();
|
||||
this.select(d.ann.id);
|
||||
if ((d.ann.type === 'text' || d.ann.type === 'tooltip') && this.cb.onRequestText) {
|
||||
this.cb.onRequestText(d.ann);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (d.kind === 'move' || d.kind === 'resize') {
|
||||
const sel = this.selected();
|
||||
if (sel) this.normalizeRect(sel);
|
||||
this.changed();
|
||||
}
|
||||
}
|
||||
|
||||
normalizeRect(ann) {
|
||||
if (POINT_TOOLS.has(ann.type)) return; // lines keep direction
|
||||
if (ann.w < 0) { ann.x += ann.w; ann.w = -ann.w; }
|
||||
if (ann.h < 0) { ann.y += ann.h; ann.h = -ann.h; }
|
||||
}
|
||||
|
||||
onDblClick(e) {
|
||||
const hit = this.hitTest(this.toNorm(e));
|
||||
if (hit && (hit.type === 'text' || hit.type === 'tooltip') && this.cb.onRequestText) {
|
||||
this.select(hit.id);
|
||||
this.cb.onRequestText(hit);
|
||||
}
|
||||
}
|
||||
|
||||
nudgeSelected(dx, dy) {
|
||||
const sel = this.selected();
|
||||
if (!sel) return false;
|
||||
sel.x += dx / this.canvas.width;
|
||||
sel.y += dy / this.canvas.height;
|
||||
this.changed();
|
||||
return true;
|
||||
}
|
||||
|
||||
deleteSelected() {
|
||||
if (!this.selectedId) return false;
|
||||
this.annotations = this.annotations.filter((a) => a.id !== this.selectedId);
|
||||
this.select(null);
|
||||
this.changed();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
window.AnnotationCanvas = AnnotationCanvas;
|
||||
Reference in New Issue
Block a user