Automatic bordering feature during drawing/editing (#997)
Boris Sekachev
6 years ago
committed by
Nikita Manovich
parent
c7052842a7
commit
f7df747cdf
@ -0,0 +1,213 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (C) 2019 Intel Corporation
|
||||||
|
*
|
||||||
|
* SPDX-License-Identifier: MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* exported BorderSticker */
|
||||||
|
|
||||||
|
class BorderSticker {
|
||||||
|
constructor(currentShape, frameContent, shapes, scale) {
|
||||||
|
this._currentShape = currentShape;
|
||||||
|
this._frameContent = frameContent;
|
||||||
|
this._enabled = false;
|
||||||
|
this._groups = null;
|
||||||
|
this._scale = scale;
|
||||||
|
this._accounter = {
|
||||||
|
clicks: [],
|
||||||
|
shapeID: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const transformedShapes = shapes
|
||||||
|
.filter((shape) => !shape.model.removed)
|
||||||
|
.map((shape) => {
|
||||||
|
const pos = shape.interpolation.position;
|
||||||
|
// convert boxes to point sets
|
||||||
|
if (!('points' in pos)) {
|
||||||
|
return {
|
||||||
|
points: window.cvat.translate.points
|
||||||
|
.actualToCanvas(`${pos.xtl},${pos.ytl} ${pos.xbr},${pos.ytl}`
|
||||||
|
+ ` ${pos.xbr},${pos.ybr} ${pos.xtl},${pos.ybr}`),
|
||||||
|
color: shape.model.color.shape,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
points: window.cvat.translate.points
|
||||||
|
.actualToCanvas(pos.points),
|
||||||
|
color: shape.model.color.shape,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
this._drawBorderMarkers(transformedShapes);
|
||||||
|
}
|
||||||
|
|
||||||
|
_addRawPoint(x, y) {
|
||||||
|
this._currentShape.array().valueOf().pop();
|
||||||
|
this._currentShape.array().valueOf().push([x, y]);
|
||||||
|
// not error, specific of the library
|
||||||
|
this._currentShape.array().valueOf().push([x, y]);
|
||||||
|
const paintHandler = this._currentShape.remember('_paintHandler');
|
||||||
|
paintHandler.drawCircles();
|
||||||
|
paintHandler.set.members.forEach((el) => {
|
||||||
|
el.attr('stroke-width', 1 / this._scale).attr('r', 2.5 / this._scale);
|
||||||
|
});
|
||||||
|
this._currentShape.plot(this._currentShape.array().valueOf());
|
||||||
|
}
|
||||||
|
|
||||||
|
_drawBorderMarkers(shapes) {
|
||||||
|
const namespace = 'http://www.w3.org/2000/svg';
|
||||||
|
|
||||||
|
this._groups = shapes.reduce((acc, shape, shapeID) => {
|
||||||
|
// Group all points by inside svg groups
|
||||||
|
const group = window.document.createElementNS(namespace, 'g');
|
||||||
|
shape.points.split(/\s/).map((point, pointID, points) => {
|
||||||
|
const [x, y] = point.split(',').map((coordinate) => +coordinate);
|
||||||
|
const circle = window.document.createElementNS(namespace, 'circle');
|
||||||
|
circle.classList.add('shape-creator-border-point');
|
||||||
|
circle.setAttribute('fill', shape.color);
|
||||||
|
circle.setAttribute('stroke', 'black');
|
||||||
|
circle.setAttribute('stroke-width', 1 / this._scale);
|
||||||
|
circle.setAttribute('cx', +x);
|
||||||
|
circle.setAttribute('cy', +y);
|
||||||
|
circle.setAttribute('r', 5 / this._scale);
|
||||||
|
|
||||||
|
circle.doubleClickListener = (e) => {
|
||||||
|
// Just for convenience (prevent screen fit feature)
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
circle.clickListener = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
// another shape was clicked
|
||||||
|
if (this._accounter.shapeID !== null && this._accounter.shapeID !== shapeID) {
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
this._accounter.shapeID = shapeID;
|
||||||
|
|
||||||
|
if (this._accounter.clicks[1] === pointID) {
|
||||||
|
// the same point repeated two times
|
||||||
|
const [_x, _y] = point.split(',').map((coordinate) => +coordinate);
|
||||||
|
this._addRawPoint(_x, _y);
|
||||||
|
this.reset();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// the first point can not be clicked twice
|
||||||
|
if (this._accounter.clicks[0] !== pointID) {
|
||||||
|
this._accounter.clicks.push(pointID);
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// up clicked group for convenience
|
||||||
|
this._frameContent.node.appendChild(group);
|
||||||
|
|
||||||
|
// the first click
|
||||||
|
if (this._accounter.clicks.length === 1) {
|
||||||
|
// draw and remove initial point just to initialize data structures
|
||||||
|
if (!this._currentShape.remember('_paintHandler').startPoint) {
|
||||||
|
this._currentShape.draw('point', e);
|
||||||
|
this._currentShape.draw('undo');
|
||||||
|
}
|
||||||
|
|
||||||
|
const [_x, _y] = point.split(',').map((coordinate) => +coordinate);
|
||||||
|
this._addRawPoint(_x, _y);
|
||||||
|
// the second click
|
||||||
|
} else if (this._accounter.clicks.length === 2) {
|
||||||
|
circle.classList.add('shape-creator-border-point-direction');
|
||||||
|
// the third click
|
||||||
|
} else {
|
||||||
|
// sign defines bypass direction
|
||||||
|
const landmarks = this._accounter.clicks;
|
||||||
|
const sign = Math.sign(landmarks[2] - landmarks[0])
|
||||||
|
* Math.sign(landmarks[1] - landmarks[0])
|
||||||
|
* Math.sign(landmarks[2] - landmarks[1]);
|
||||||
|
|
||||||
|
// go via a polygon and get vertexes
|
||||||
|
// the first vertex has been already drawn
|
||||||
|
const way = [];
|
||||||
|
for (let i = landmarks[0] + sign; ; i += sign) {
|
||||||
|
if (i < 0) {
|
||||||
|
i = points.length - 1;
|
||||||
|
} else if (i === points.length) {
|
||||||
|
i = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
way.push(points[i]);
|
||||||
|
|
||||||
|
if (i === this._accounter.clicks[this._accounter.clicks.length - 1]) {
|
||||||
|
// put the last element twice
|
||||||
|
// specific of svg.draw.js
|
||||||
|
// way.push(points[i]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove the latest cursor position from drawing array
|
||||||
|
for (const wayPoint of way) {
|
||||||
|
const [_x, _y] = wayPoint.split(',').map((coordinate) => +coordinate);
|
||||||
|
this._addRawPoint(_x, _y);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
circle.addEventListener('click', circle.clickListener);
|
||||||
|
circle.addEventListener('dblclick', circle.doubleClickListener);
|
||||||
|
|
||||||
|
return circle;
|
||||||
|
}).forEach((circle) => group.appendChild(circle));
|
||||||
|
|
||||||
|
acc.push(group);
|
||||||
|
return acc;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
this._groups
|
||||||
|
.forEach((group) => this._frameContent.node.appendChild(group));
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
if (this._accounter.shapeID !== null) {
|
||||||
|
while (this._accounter.clicks.length > 0) {
|
||||||
|
const resetID = this._accounter.clicks.pop();
|
||||||
|
this._groups[this._accounter.shapeID]
|
||||||
|
.children[resetID].classList.remove('shape-creator-border-point-direction');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._accounter = {
|
||||||
|
clicks: [],
|
||||||
|
shapeID: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
disable() {
|
||||||
|
if (this._groups) {
|
||||||
|
this._groups.forEach((group) => {
|
||||||
|
Array.from(group.children).forEach((circle) => {
|
||||||
|
circle.removeEventListener('click', circle.clickListener);
|
||||||
|
circle.removeEventListener('dblclick', circle.doubleClickListener);
|
||||||
|
});
|
||||||
|
|
||||||
|
group.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
this._groups = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scale(scale) {
|
||||||
|
this._scale = scale;
|
||||||
|
if (this._groups) {
|
||||||
|
this._groups.forEach((group) => {
|
||||||
|
Array.from(group.children).forEach((circle) => {
|
||||||
|
circle.setAttribute('r', 5 / scale);
|
||||||
|
circle.setAttribute('stroke-width', 1 / scale);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue