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

Jump to bottom

Add keyboard shortcut to start/stop drawing annotation #154

Merged
merged 4 commits into from
May 16, 2022
Merged

Add keyboard shortcut to start/stop drawing annotation #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2cb6302
Add keyboard shortcuts for creating annotation + selecting type
mvandenburgh May 11, 2022
bd4142b
Add tests for new keyboard shortcuts
mvandenburgh May 12, 2022
4aa765d
Use space bar instead of `n` for creating new annotation
mvandenburgh May 16, 2022
14fa412
Use `button` `label` attribute instead of a `label` tag
mvandenburgh May 16, 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
2 changes: 1 addition & 1 deletion histomicsui/web_client/templates/panels/annotationSelector.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,6 @@ block content
input#h-toggle-interactive(type='checkbox', checked=interactiveMode)
| Interactive
if accessLevel >= writeAccessLevel
button.btn.btn-sm.btn-primary.h-create-annotation
button.btn.btn-sm.btn-primary.h-create-annotation(title='Create a new annotation. Keyboard shortcut: space bar')
| #[span.icon-plus-squared] New
.clearfix
12 changes: 6 additions & 6 deletions histomicsui/web_client/templates/panels/drawWidget.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,27 @@ block content
.btn-group.btn-justified.btn-group-sm.h-draw-tools
.btn-group.btn-group-sm
button.h-draw.btn.btn-default(
type='button', data-type='point', data-toggle='tooltip', title='Draw a new point', class=drawingType === 'point' ? 'active' : null)
type='button', data-type='point', data-toggle='tooltip', title='Draw a new point (keyboard shortcut: o)', class=drawingType === 'point' ? 'active' : null)
| #[span.icon-circle]Point
.btn-group.btn-group-sm
button.h-draw.btn.btn-default(
type='button', data-type='rectangle', data-toggle='tooltip', title='Draw a new rectangle', class=drawingType === 'rectangle' ? 'active' : null)
type='button', data-type='rectangle', data-toggle='tooltip', title='Draw a new rectangle (keyboard shortcut: r)', class=drawingType === 'rectangle' ? 'active' : null)
| #[span.icon-check-empty]Rectangle
.btn-group.btn-group-sm
button.h-draw.btn.btn-default(
type='button', data-type='ellipse', data-toggle='tooltip', title='Draw a new ellipse', class=drawingType === 'ellipse' ? 'active' : null)
type='button', data-type='ellipse', data-toggle='tooltip', title='Draw a new ellipse (keyboard shortcut: i)', class=drawingType === 'ellipse' ? 'active' : null)
| #[span.icon-circle-empty.flattenicon]Ellipse
.btn-group.btn-group-sm
button.h-draw.btn.btn-default(
type='button', data-type='circle', data-toggle='tooltip', title='Draw a new circle', class=drawingType === 'circle' ? 'active' : null)
type='button', data-type='circle', data-toggle='tooltip', title='Draw a new circle (keyboard shortcut: c)', class=drawingType === 'circle' ? 'active' : null)
| #[span.icon-circle-empty]Circle
.btn-group.btn-group-sm
button.h-draw.btn.btn-default(
type='button', data-type='polygon', data-toggle='tooltip', title='Draw a new polygon', class=drawingType === 'polygon' ? 'active' : null)
type='button', data-type='polygon', data-toggle='tooltip', title='Draw a new polygon (keyboard shortcut: p)', class=drawingType === 'polygon' ? 'active' : null)
| #[span.icon-draw-polygon]Polygon
.btn-group.btn-group-sm
button.h-draw.btn.btn-default(
type='button', data-type='line', data-toggle='tooltip', title='Draw a new line', class=drawingType === 'line' ? 'active' : null)
type='button', data-type='line', data-toggle='tooltip', title='Draw a new line (keyboard shortcut: l)', class=drawingType === 'line' ? 'active' : null)
| #[span.icon-pencil]Line

if elements.length
Expand Down
59 changes: 59 additions & 0 deletions histomicsui/web_client/views/body/ImageView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1103,6 +1103,65 @@ var ImageView = View.extend({
case 's':
this.annotationSelector.selectAnnotationByRegion();
break;
case ' ': // pressing space bar creates a new annotation
if (!this.annotationSelector._activeAnnotation) {
this.annotationSelector.createAnnotation();
}
break;
case 'o':
if (this.annotationSelector._activeAnnotation) {
if (this.drawWidget._drawingType === 'point') {
this.drawWidget.cancelDrawMode();
} else {
this.drawWidget.drawElement(undefined, 'point');
}
}
break;
case 'r':
if (this.annotationSelector._activeAnnotation) {
if (this.drawWidget._drawingType === 'rectangle') {
this.drawWidget.cancelDrawMode();
} else {
this.drawWidget.drawElement(undefined, 'rectangle');
}
}
break;
case 'i':
if (this.annotationSelector._activeAnnotation) {
if (this.drawWidget._drawingType === 'ellipse') {
this.drawWidget.cancelDrawMode();
} else {
this.drawWidget.drawElement(undefined, 'ellipse');
}
}
break;
case 'c':
if (this.annotationSelector._activeAnnotation) {
if (this.drawWidget._drawingType === 'circle') {
this.drawWidget.cancelDrawMode();
} else {
this.drawWidget.drawElement(undefined, 'circle');
}
}
break;
case 'p':
if (this.annotationSelector._activeAnnotation) {
if (this.drawWidget._drawingType === 'polygon') {
this.drawWidget.cancelDrawMode();
} else {
this.drawWidget.drawElement(undefined, 'polygon');
}
}
break;
case 'l':
if (this.annotationSelector._activeAnnotation) {
if (this.drawWidget._drawingType === 'line') {
this.drawWidget.cancelDrawMode();
} else {
this.drawWidget.drawElement(undefined, 'line');
}
}
break;
}
},

Expand Down
37 changes: 37 additions & 0 deletions tests/web_client_specs/annotationSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,43 @@ girderTest.promise.done(function () {
expect($('button.h-draw[data-type="point"]').hasClass('active')).toBe(true);
});
});

it('check that keyboard shortcuts behave correctly', function () {
runs(function () {
// expect that hitting keyboard shortcut for each shape will
// switch the annotation mode to it, and hitting it again will
// turn off drawing mode.
$('.h-image-body').trigger($.Event('keydown', {key: 'r'}));
expect($('.h-draw.active').attr('data-type')).toBe('rectangle');
$('.h-image-body').trigger($.Event('keydown', {key: 'r'}));
expect($('.h-draw.active').length).toBe(0);

$('.h-image-body').trigger($.Event('keydown', {key: 'o'}));
expect($('.h-draw.active').attr('data-type')).toBe('point');
$('.h-image-body').trigger($.Event('keydown', {key: 'o'}));
expect($('.h-draw.active').length).toBe(0);

$('.h-image-body').trigger($.Event('keydown', {key: 'c'}));
expect($('.h-draw.active').attr('data-type')).toBe('circle');
$('.h-image-body').trigger($.Event('keydown', {key: 'c'}));
expect($('.h-draw.active').length).toBe(0);

$('.h-image-body').trigger($.Event('keydown', {key: 'i'}));
expect($('.h-draw.active').attr('data-type')).toBe('ellipse');
$('.h-image-body').trigger($.Event('keydown', {key: 'i'}));
expect($('.h-draw.active').length).toBe(0);

$('.h-image-body').trigger($.Event('keydown', {key: 'p'}));
expect($('.h-draw.active').attr('data-type')).toBe('polygon');
$('.h-image-body').trigger($.Event('keydown', {key: 'p'}));
expect($('.h-draw.active').length).toBe(0);

$('.h-image-body').trigger($.Event('keydown', {key: 'l'}));
expect($('.h-draw.active').attr('data-type')).toBe('line');
$('.h-image-body').trigger($.Event('keydown', {key: 'l'}));
expect($('.h-draw.active').length).toBe(0);
});
});
});

describe('Annotation styles', function () {
Expand Down