Skip to content
This repository has been archived by the owner on Sep 6, 2024. It is now read-only.

change mouse icon to hand icon, make osd item have grab icon when in … #37

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

change mouse icon to hand icon, make osd item have grab icon when in … #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32fed8b
change mouse icon to hand icon, make osd item have grab icon when in …
dnoneill Apr 26, 2023
1da0590
move to osd container class
dnoneill Apr 26, 2023
a65891d
fix css tabbing
dnoneill Apr 26, 2023
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
6 changes: 3 additions & 3 deletions plugins/annotorious-toolbar/src/icons/Mouse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export default () => {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

svg.setAttribute('viewBox', '0 0 320 540');
svg.setAttribute('style', 'width: 29px; height: 20px;');
svg.setAttribute('viewBox', '0 0 512 512');

svg.innerHTML =
`<g>
<path d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/>
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not too familiar with the Font Awesome licensing options. But this looks like it was part of a purchased Pro package? I can only include fully openly licensed things in Annotorious. Is there an alternative icon?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't be part of the pro package. I don't have access to that. https://fontawesome.com/search?q=hand&o=r&m=free. That is the second icon. I am not sure why the SVG includes the "pro" in there.

<path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64V261.5l-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75H296h8c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5V160c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2V96c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1c0 0 0-.1 0-.1V64c0-8.8 7.2-16 16-16s16 7.2 16 16V95.9c0 0 0 .1 0 .1V232c0 13.3 10.7 24 24 24s24-10.7 24-24V96c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16v55.9c0 0 0 .1 0 .1v80c0 13.3 10.7 24 24 24s24-10.7 24-24V160.1c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16V332.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2H296h-8.5c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2V96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9V232c0 13.3 10.7 24 24 24s24-10.7 24-24V96.1z"/>
</g>`;

return svg;
Expand Down
23 changes: 17 additions & 6 deletions plugins/annotorious-toolbar/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
background-color:transparent;
border-radius:4px;
padding:8px;
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change causes the problem that all toolbar icons become oversized. Can you change back, so that standard size is retained?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand. I changed this because if you make the button width/height 45px and the svg 100% you get different sized svgs with the icons. I also found that if you use the label option it gets cut off by setting button sizing. I checked and the icons right with this css. Maybe it's down to browser? Can you expand on what oversized icons look like? or a screenshot? Thanks!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icons are bigger after the PR - see below. Also, I'm wondering if applying fixed width + height to SVG icons with non-square aspect ratio will work without distorting them. (But it seems so... at least trying in Chrome.) Perhaps it's just a matter of adjusting the size to less than 45px. The button has an 8px padding, so probably taking that into account is all that's needed?

Bildschirmfoto 2023-05-28 um 14 57 12

vs.

Bildschirmfoto 2023-05-28 um 14 59 03

.a9s-toolbar-btn svg {
width:45px;
height:45px;
overflow:visible;
}

.a9s-toolbar-btn:hover {
Expand All @@ -19,12 +23,6 @@
align-items: center;
}

.a9s-toolbar-btn svg {
overflow:visible;
width:100%;
height:100%;
}

.a9s-toolbar-btn svg * {
stroke-width:5px;
fill:none;
Expand All @@ -43,6 +41,7 @@

.a9s-toolbar-btn.active {
background-color:rgba(0,0,0,0.3);
color:rgba(255,255,255);
}

.a9s-toolbar-btn.active svg * {
Expand All @@ -57,3 +56,15 @@
stroke:#fff;
fill:rgba(0,0,0,0.2);
}

.moveable {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}

.moveable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
15 changes: 15 additions & 0 deletions plugins/annotorious-toolbar/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,18 @@ const Toolbar = (anno, container, settings={}) => {
anno.setDrawingEnabled(false);
}
}

const osdContainer = (toolId) => {
const osdcontanier = document.getElementsByClassName('openseadragon-container');
if (osdcontanier.length > 0) {
if (toolId == 'mouse'){
osdcontanier[0].classList.add("moveable");
} else {
osdcontanier[0].classList.remove("moveable");
}
}
}

// Helper to create one tool button
const createButton = (toolId, isActive) => {
const icon = ICONS[toolId];
Expand Down Expand Up @@ -102,6 +114,8 @@ const Toolbar = (anno, container, settings={}) => {
anno.setDrawingTool(toolId);
}

osdContainer(toolId);

if (settings['infoElement']) {
if (toolId == 'polygon'){
settings['infoElement'].innerHTML = 'To stop Polygon annotation selection double click.';
Expand Down Expand Up @@ -136,6 +150,7 @@ const Toolbar = (anno, container, settings={}) => {
}
if (settings['withMouse']){
createButton('mouse', true);
osdContainer('mouse');
}
const drawingTools = settings['drawingTools'] ? settings['drawingTools'].filter(elem => anno.listDrawingTools().indexOf(elem) != -1) : anno.listDrawingTools();
drawingTools.forEach((toolId, idx) => {
Expand Down