Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatic bordering feature during drawing/editing #997

Merged
merged 8 commits into from
Dec 24, 2019
Merged

Automatic bordering feature during drawing/editing #997

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fad68b8
Temporary solution
bsekachev Dec 20, 2019
e25aa2d
Improved solution
bsekachev Dec 20, 2019
b0ccf44
Working solution
bsekachev Dec 20, 2019
3fdfa0e
Working of border sticker in edit
bsekachev Dec 23, 2019
45035ee
Significantly improved precise
bsekachev Dec 23, 2019
3e4ec54
Added double click event
bsekachev Dec 23, 2019
63c3af1
Added UI elements
bsekachev Dec 23, 2019
a8b768d
Refactoring
bsekachev Dec 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added double click event
  • Loading branch information
@bsekachev
bsekachev committed Dec 23, 2019
commit 3e4ec54b188e7863ca6f5d1e788af399f8682676
152 changes: 77 additions & 75 deletions cvat/apps/engine/static/engine/js/borderSticker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ class BorderSticker {
if (!('points' in pos)) {
return {
points: window.cvat.translate.points
.actualToCanvas(`${pos.xtl},${pos.ytl} ${pos.xbr},${pos.ybr}`),
.actualToCanvas(`${pos.xtl},${pos.ytl} ${pos.xbr},${pos.ytl}`
+ ` ${pos.xbr},${pos.ybr} ${pos.xtl},${pos.ybr}`),
color: shape.model.color.shape,
};
}
Expand All @@ -52,6 +53,7 @@ class BorderSticker {
this._groups.forEach((group) => {
Array.from(group.children).forEach((circle) => {
circle.removeEventListener('click', circle.clickListener);
circle.removeEventListener('dblclick', circle.doubleClickListener);
});

group.remove();
Expand All @@ -62,7 +64,7 @@ class BorderSticker {
}

_drawBorderMarkers() {
const accounter = {
this._accounter = {
clicks: [],
shapeID: null,
};
Expand All @@ -81,11 +83,14 @@ class BorderSticker {
circle.setAttribute('cx', +x);
circle.setAttribute('cy', +y);
circle.setAttribute('r', 5 / this._scale);
circle.doubleClickListener = (e) => {
e.stopPropagation();
};
circle.clickListener = (e) => {
e.stopPropagation();
if (accounter.shapeID !== null && accounter.shapeID !== shapeID) {
if (accounter.clicks.length === 2) {
const pointToAdd = shapes[accounter.shapeID].points.split(/\s/)[accounter.clicks[1]];
if (this._accounter.shapeID !== null && this._accounter.shapeID !== shapeID) {
if (this._accounter.clicks.length === 2) {
const pointToAdd = shapes[this._accounter.shapeID].points.split(/\s/)[this._accounter.clicks[1]];
const [_x, _y] = pointToAdd.split(',');
this._drawInstance.array().valueOf().pop();
this._drawInstance.array().valueOf().push([+_x, +_y]);
Expand All @@ -95,104 +100,101 @@ class BorderSticker {
this._rescaleDrawPoints();
}

while (accounter.clicks.length > 0) {
const resetID = accounter.clicks.pop();
groups[accounter.shapeID]
while (this._accounter.clicks.length > 0) {
const resetID = this._accounter.clicks.pop();
groups[this._accounter.shapeID]
.children[resetID].classList.remove('shape-creator-border-point-direction');
}
}

accounter.shapeID = shapeID;
if (accounter.clicks.includes(pointID)) {
const resetID = accounter.clicks
.splice(accounter.clicks.indexOf(pointID), 1);
group.children[resetID[0]].classList.remove('shape-creator-border-point-direction');
} else {
accounter.clicks.push(pointID);

// up current group to work with its points easy
this._frameContent.node.appendChild(group);
if (accounter.clicks.length === 1) {
if (!this._drawInstance.remember('_paintHandler').startPoint) {
this._drawInstance.draw('point', e);
this._drawInstance.array().valueOf().pop();
}
this._accounter.shapeID = shapeID;

this._accounter.clicks.push(pointID);

// up current group to work with its points easy
this._frameContent.node.appendChild(group);
if (this._accounter.clicks.length === 1) {
if (!this._drawInstance.remember('_paintHandler').startPoint) {
this._drawInstance.draw('point', e);
this._drawInstance.array().valueOf().pop();
}

this._drawInstance.array().valueOf().pop();
const borderPoint = points[pointID];
const [_x, _y] = borderPoint.split(',');
this._drawInstance.array().valueOf().push([+_x, +_y]);
this._drawInstance.array().valueOf().push([+_x, +_y]);

this._drawInstance.remember('_paintHandler').drawCircles();
this._drawInstance.plot(this._drawInstance.array().valueOf());
this._rescaleDrawPoints();
} else if (this._accounter.clicks.length === 2) {
circle.classList.add('shape-creator-border-point-direction');
} else {
if (this._accounter.clicks[1] === this._accounter.clicks[2]) {
this._drawInstance.array().valueOf().pop();
const borderPoint = points[pointID];
const borderPoint = points[this._accounter.clicks[2]];
const [_x, _y] = borderPoint.split(',');
this._drawInstance.array().valueOf().push([+_x, +_y]);
this._drawInstance.array().valueOf().push([+_x, +_y]);

this._drawInstance.remember('_paintHandler').drawCircles();
this._drawInstance.plot(this._drawInstance.array().valueOf());
this._rescaleDrawPoints();
} else if (accounter.clicks.length === 2) {
circle.classList.add('shape-creator-border-point-direction');
} else {
// const s = (accounter.clicks[1] > accounter.clicks[0]
// && accounter.clicks[1] > accounter.clicks[2])
// || (accounter.clicks[1] < accounter.clicks[0]
// && accounter.clicks[1] < accounter.clicks[2])
// ? -1 : Math.sign(accounter.clicks[2] - accounter.clicks[0]);

// TODO: ADD TWO POINTS TO A BOX

const s = Math.sign(accounter.clicks[2] - accounter.clicks[0])
* Math.sign(accounter.clicks[1] - accounter.clicks[0])
* Math.sign(accounter.clicks[2] - accounter.clicks[1]);

const fakeEvent = {};
// eslint-disable-next-line
for (const prop in e) {
fakeEvent[prop] = e[prop];

while (this._accounter.clicks.length > 0) {
const resetID = this._accounter.clicks.pop();
group.children[resetID].classList.remove('shape-creator-border-point-direction');
}

const border = [];
for (let i = accounter.clicks[0]; ; i += s) {
if (i < 0) {
i = points.length - 1;
} else if (i === points.length) {
i = 0;
}
this._accounter.shapeID = null;

border.push(points[i]);
return;
}

if (i === accounter.clicks[accounter.clicks.length - 1]) {
// put the last element twice
// specific of svg.draw.js
border.push(points[i]);
break;
}
}
const s = Math.sign(this._accounter.clicks[2] - this._accounter.clicks[0])
* Math.sign(this._accounter.clicks[1] - this._accounter.clicks[0])
* Math.sign(this._accounter.clicks[2] - this._accounter.clicks[1]);

if (!this._drawInstance.remember('_paintHandler').startPoint) {
this._drawInstance.draw('point', e);
this._drawInstance.array().valueOf().pop();
const border = [];
for (let i = this._accounter.clicks[0]; ; i += s) {
if (i < 0) {
i = points.length - 1;
} else if (i === points.length) {
i = 0;
}

// remove the latest cursor position from drawing array
this._drawInstance.array().valueOf().pop();
for (const borderPoint of border) {
const [_x, _y] = borderPoint.split(',');
this._drawInstance.array().valueOf().push([+_x, +_y]);
border.push(points[i]);

if (i === this._accounter.clicks[this._accounter.clicks.length - 1]) {
// put the last element twice
// specific of svg.draw.js
border.push(points[i]);
break;
}
}

this._drawInstance.remember('_paintHandler').drawCircles();
this._drawInstance.plot(this._drawInstance.array().valueOf());
this._rescaleDrawPoints();
// remove the latest cursor position from drawing array
this._drawInstance.array().valueOf().pop();
for (const borderPoint of border) {
const [_x, _y] = borderPoint.split(',');
this._drawInstance.array().valueOf().push([+_x, +_y]);
}

while (accounter.clicks.length > 0) {
const resetID = accounter.clicks.pop();
group.children[resetID].classList.remove('shape-creator-border-point-direction');
}
this._drawInstance.remember('_paintHandler').drawCircles();
this._drawInstance.plot(this._drawInstance.array().valueOf());
this._rescaleDrawPoints();

accounter.shapeID = null;
while (this._accounter.clicks.length > 0) {
const resetID = this._accounter.clicks.pop();
group.children[resetID].classList.remove('shape-creator-border-point-direction');
}

this._accounter.shapeID = null;
}
};

circle.addEventListener('click', circle.clickListener);
circle.addEventListener('dblclick', circle.doubleClickListener);

return circle;
}).forEach((circle) => group.appendChild(circle));
Expand Down
2 changes: 2 additions & 0 deletions cvat/apps/engine/static/engine/js/polyshapeEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ class PolyshapeEditorModel extends Listener {
}

get currentShapes() {
this._shapeCollection.update();
return this._shapeCollection.currentShapes;
}
}
Expand Down Expand Up @@ -198,6 +199,7 @@ class PolyshapeEditorView {
_addRawPoint(x, y) {
this._correctLine.array().valueOf().pop();
this._correctLine.array().valueOf().push([x, y]);
// not error, specific of the library
this._correctLine.array().valueOf().push([x, y]);
this._correctLine.remember('_paintHandler').drawCircles();
this._correctLine.plot(this._correctLine.array().valueOf());
Expand Down
6 changes: 3 additions & 3 deletions cvat/apps/engine/static/engine/js/shapeCreator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ class ShapeCreatorModel extends Listener {
}

get currentShapes() {
this._shapeCollection.update();
return this._shapeCollection.currentShapes;
}

Expand Down Expand Up @@ -390,14 +391,13 @@ class ShapeCreatorView {
});

this._drawInstance.on('drawstop', () => {
this._frameContent.off('mousedown.shapeCreator');
this._frameContent.off('mousemove.shapeCreator');
$('body').off('keydown.shapeCreator');
if (this._borderSticker) {
this._borderSticker.disable();
this._borderSticker = null;
}

this._frameContent.off('mousedown.shapeCreator');
this._frameContent.off('mousemove.shapeCreator');
});
// Also we need callback on drawdone event for get points
this._drawInstance.on('drawdone', function(e) {
Expand Down