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.

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

Atlas plugins #16

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
12cbc64
webpack development config
louis-aiherd Nov 19, 2021
5a4107a
wip:keypointsa-atlas plugin
louis-aiherd Nov 19, 2021
e78b517
WIP: add capacity to navigate through image patches
camilledupont Nov 29, 2021
bc381c2
wip:keypointsa-atlas plugin
louis-aiherd Nov 19, 2021
01051ff
Add default settings for keypoints-atlas
camilledupont Dec 1, 2021
ccc99af
small fixes
louis-aiherd Dec 10, 2021
9a84450
bugfix: undo
louis-aiherd Dec 14, 2021
5e18a7d
bugfix: redo
louis-aiherd Dec 14, 2021
e96b750
bugfix: undo on last frame
louis-aiherd Dec 14, 2021
73e1a1f
bugfix: undo/redo buttons
louis-aiherd Dec 14, 2021
8473505
feat: change modified points opacity
louis-aiherd Dec 14, 2021
1e10a6b
bugfix: resize canvas on window resize
louis-aiherd Dec 14, 2021
4b5458b
bugfix: keypoints default colors
louis-aiherd Dec 15, 2021
4f42a57
bugfix: image skip; feat: go to prev / next image using shortcuts
louis-aiherd Dec 15, 2021
862fd9b
bugfix: setNextImageIndex between 0 and imagesPerAtlas - 1
louis-aiherd Dec 17, 2021
b422060
bugfix: moved onActivate() body to firstUpdated() body
louis-aiherd Dec 17, 2021
7a9e610
feat: start validation with image index 0
louis-aiherd Dec 17, 2021
814117c
bugfix: reset imageIndex in newData()
louis-aiherd Dec 20, 2021
3a18501
bugfix: prevent the counter from exceeding the total count of images …
louis-aiherd Dec 21, 2021
3a1d412
feat: brightness controls
louis-aiherd Jan 4, 2022
c0c69c8
labels atlas plugin
louis-aiherd Dec 13, 2021
7b471df
feat: brightness controls
louis-aiherd Jan 24, 2022
6dcc785
feat: skip image
louis-aiherd Jan 24, 2022
c813852
fixes
louis-aiherd Jan 26, 2022
549ae38
bugfix: initial image index in validation mode
louis-aiherd Feb 3, 2022
269af67
bugfix: keyup event listener set more than once
louis-aiherd Feb 14, 2022
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
bugfix: undo/redo buttons
louis-aiherd committed Dec 14, 2021
commit 73e1a1f55917c5cab0662031a7e492b0abf30c0a
76 changes: 52 additions & 24 deletions frontend/src/plugins/keypoints-atlas.js
Original file line number Diff line number Diff line change
@@ -18,15 +18,14 @@ const dispatchAnnotations = (arg) => {
} else store.dispatch(setAnnotations({ annotations: arg }));
};

window.getAnnotations = () => getAnnotations().annotations;

export class PluginKeypointsAtlas extends TemplatePluginInstance {
constructor() {
super();
this.atlas = new Image();
this.lastMousePosition = { x: 0, y: 0 };
this.imageIndex = -1;
this.keypointIndex = 0; // [0-2]
this.prevState = [];
}

// 3 clicks / image
@@ -74,7 +73,6 @@ export class PluginKeypointsAtlas extends TemplatePluginInstance {
}

onActivate() {
window.p = this;
super.onActivate();
this.attributePicker.setAttribute(
"shortcuts",
@@ -86,6 +84,26 @@ export class PluginKeypointsAtlas extends TemplatePluginInstance {
])
);
document.addEventListener("keydown", this.onKeyDown.bind(this));
const headerMenu = document
.querySelector("my-app")
.shadowRoot.querySelector("app-label")
.shadowRoot.querySelector(".header-menu");
headerMenu.querySelector('mwc-icon-button[title="undo"]').remove();
headerMenu.querySelector('mwc-icon-button[title="redo"]').remove();

this.undoButton = document.createElement("mwc-icon-button");
this.undoButton.setAttribute("title", "undo");
this.undoButton.setAttribute("icon", "undo");
this.redoButton = document.createElement("mwc-icon-button");
this.redoButton.setAttribute("title", "redo");
this.redoButton.setAttribute("icon", "redo");

headerMenu.insertBefore(this.redoButton, headerMenu.children[3]);
headerMenu.insertBefore(this.undoButton, headerMenu.children[3]);

this.undoButton.addEventListener("click", this.undo.bind(this));
this.redoButton.addEventListener("click", this.redo.bind(this));

this.attributePicker.showDetails = true;
this.attributePicker.shadowRoot
.querySelectorAll(".category")
@@ -100,15 +118,17 @@ export class PluginKeypointsAtlas extends TemplatePluginInstance {
this.setNextImageIndex();
this.draw();
this.unsubscriber = store.subscribe(() => {
this.draw();
this.attributePicker.setCategory(this.label.name);
this.draw();
});
});
}

disconnectedCallback() {
this.unsubscriber();
document.removeEventListener("keydown", this.onKeyDown);
this.undoButton.removeEventListener("click", this.undo);
this.redoButton.removeEventListener("click", this.redo);
}

sizeCanvas() {
@@ -121,6 +141,32 @@ export class PluginKeypointsAtlas extends TemplatePluginInstance {
this.zoom = this.canvas.width / this.atlas.width;
}

undo() {
if (this.imageIndex > 0 || this.keypointIndex > 0) {
store.dispatch(undo());
if (this.keypointIndex === 0) {
this.keypointIndex = 2;
this.imageIndex--;
} else if (this.keypointIndex === -1) {
this.keypointIndex = 2;
} else this.keypointIndex--;
this.draw();
}
}

redo() {
const prevState = getAnnotations().annotations;
store.dispatch(redo());
const nextState = getAnnotations().annotations;
if (nextState.length !== prevState.length) {
if (this.keypointIndex === 2) {
this.keypointIndex = 0;
this.imageIndex++;
} else this.keypointIndex++;
this.draw();
}
}

onKeyDown(e) {
const cleanupFn = (() => {
switch (e.key) {
@@ -155,29 +201,11 @@ export class PluginKeypointsAtlas extends TemplatePluginInstance {
return () => void 0;
}
case "z": {
if (this.imageIndex > 0 || this.keypointIndex > 0) {
store.dispatch(undo());
if (this.keypointIndex === 0) {
this.keypointIndex = 2;
this.imageIndex--;
} else if (this.keypointIndex === -1) {
this.keypointIndex = 2;
} else this.keypointIndex--;
this.draw();
}
this.undo();
return () => void 0;
}
case "r": {
const prevState = getAnnotations().annotations;
store.dispatch(redo());
const nextState = getAnnotations().annotations;
if (nextState.length !== prevState.length) {
if (this.keypointIndex === 2) {
this.keypointIndex = 0;
this.imageIndex++;
} else this.keypointIndex++;
this.draw();
}
this.redo();
return () => void 0;
}
default: