From 32fed8b71926039967bfd4201e9329a2288df312 Mon Sep 17 00:00:00 2001 From: doneill Date: Wed, 26 Apr 2023 13:04:47 -0400 Subject: [PATCH 1/3] change mouse icon to hand icon, make osd item have grab icon when in mouse mode, update css to work with different size svg icons --- .../annotorious-toolbar/src/icons/Mouse.js | 6 ++--- plugins/annotorious-toolbar/src/index.css | 23 ++++++++++++++----- plugins/annotorious-toolbar/src/index.js | 15 ++++++++++++ 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/plugins/annotorious-toolbar/src/icons/Mouse.js b/plugins/annotorious-toolbar/src/icons/Mouse.js index 5eaf4be..381e237 100644 --- a/plugins/annotorious-toolbar/src/icons/Mouse.js +++ b/plugins/annotorious-toolbar/src/icons/Mouse.js @@ -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 = ` - + + `; return svg; diff --git a/plugins/annotorious-toolbar/src/index.css b/plugins/annotorious-toolbar/src/index.css index 5fb8cd0..10bd31a 100644 --- a/plugins/annotorious-toolbar/src/index.css +++ b/plugins/annotorious-toolbar/src/index.css @@ -6,8 +6,12 @@ background-color:transparent; border-radius:4px; padding:8px; +} + +.a9s-toolbar-btn svg { width:45px; height:45px; + overflow:visible; } .a9s-toolbar-btn:hover { @@ -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; @@ -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 * { @@ -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; +} \ No newline at end of file diff --git a/plugins/annotorious-toolbar/src/index.js b/plugins/annotorious-toolbar/src/index.js index 6d4ca52..be6b5ba 100644 --- a/plugins/annotorious-toolbar/src/index.js +++ b/plugins/annotorious-toolbar/src/index.js @@ -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].parentElement.classList.add("moveable"); + } else { + osdcontanier[0].parentElement.classList.remove("moveable"); + } + } + } + // Helper to create one tool button const createButton = (toolId, isActive) => { const icon = ICONS[toolId]; @@ -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.'; @@ -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) => { From 1da0590110a30af5123fedddf78f8d88b50d539b Mon Sep 17 00:00:00 2001 From: doneill Date: Wed, 26 Apr 2023 13:20:55 -0400 Subject: [PATCH 2/3] move to osd container class --- plugins/annotorious-toolbar/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/annotorious-toolbar/src/index.js b/plugins/annotorious-toolbar/src/index.js index be6b5ba..c92ccb8 100644 --- a/plugins/annotorious-toolbar/src/index.js +++ b/plugins/annotorious-toolbar/src/index.js @@ -78,9 +78,9 @@ const Toolbar = (anno, container, settings={}) => { const osdcontanier = document.getElementsByClassName('openseadragon-container'); if (osdcontanier.length > 0) { if (toolId == 'mouse'){ - osdcontanier[0].parentElement.classList.add("moveable"); + osdcontanier[0].classList.add("moveable"); } else { - osdcontanier[0].parentElement.classList.remove("moveable"); + osdcontanier[0].classList.remove("moveable"); } } } From a65891dc31065ac586a984ae44d65ade03542d2e Mon Sep 17 00:00:00 2001 From: doneill Date: Wed, 26 Apr 2023 13:22:19 -0400 Subject: [PATCH 3/3] fix css tabbing --- plugins/annotorious-toolbar/src/index.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/plugins/annotorious-toolbar/src/index.css b/plugins/annotorious-toolbar/src/index.css index 10bd31a..c74c7dd 100644 --- a/plugins/annotorious-toolbar/src/index.css +++ b/plugins/annotorious-toolbar/src/index.css @@ -58,13 +58,13 @@ } .moveable { - cursor: grab; - cursor: -moz-grab; - cursor: -webkit-grab; + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; } .moveable:active { - cursor: grabbing; - cursor: -moz-grabbing; - cursor: -webkit-grabbing; + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; } \ No newline at end of file