Add button to move layer to background, return to align icons

ProjectMirador · Jan 16, 2025 · b33ede3 · b33ede3
1 parent ebd45b8
commit b33ede3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
@@ -8,7 +8,8 @@ import ListItem from '@mui/material/ListItem';
 import Slider from '@mui/material/Slider';
 import Tooltip from '@mui/material/Tooltip';
 import DragHandleIcon from '@mui/icons-material/DragHandleSharp';
-import MoveDownSharp from '@mui/icons-material/MoveDownSharp';
+import VerticalAlignTopSharp from '@mui/icons-material/VerticalAlignTopSharp';
+import VerticalAlignBottomSharp from '@mui/icons-material/VerticalAlignBottomSharp';
 import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
 import OpacityIcon from '@mui/icons-material/OpacitySharp';
@@ -43,10 +44,10 @@ const reorder = (list, startIndex, endIndex) => {
 
 /** @private */
 function Layer({
-  resource, layerMetadata = {}, index, handleOpacityChange, setLayerVisibility, moveToBackground,
+  resource, layerMetadata = {}, index, handleOpacityChange, setLayerVisibility, moveToBackground, moveToFront,
 }) {
   const { t } = useTranslation();
-  const { width, height } = { height: undefined, width: 50 };
+  const { width, height } = { height: undefined, width: 40 };
 
   const layer = {
     opacity: 1,
@@ -77,7 +78,12 @@ function Layer({
             </MiradorMenuButton>
             { layer.index !== 0 && (
               <MiradorMenuButton aria-label={t('layer_moveToBackground')} size="small" onClick={() => { moveToBackground(resource.id); }}>
-                <MoveDownSharp />
+                <VerticalAlignTopSharp />
+              </MiradorMenuButton>
+            )}
+            { layer.index !== layerMetadata && (
+              <MiradorMenuButton aria-label={t('layer_moveToFront')} size="small" onClick={() => { moveToFront(resource.id); }}>
+                <VerticalAlignBottomSharp />
               </MiradorMenuButton>
             )}
           </div>
@@ -134,6 +140,7 @@ Layer.propTypes = {
     visibility: PropTypes.bool,
   })), // eslint-disable-line react/forbid-prop-types
   moveToBackground: PropTypes.func.isRequired,
+  moveToFront: PropTypes.func.isRequired,
   resource: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   setLayerVisibility: PropTypes.func.isRequired,
 };
@@ -246,6 +253,17 @@ export function CanvasLayers({
     updateLayers(windowId, canvasId, payload);
   }, [canvasId, layers, updateLayers, windowId]);
 
+  const moveToFront = useCallback((layerId) => {
+    const sortedLayers = reorder(layers.map(l => l.id), layers.findIndex(l => l.id === layerId), layers.length - 1);
+
+    const payload = layers.reduce((acc, layer) => {
+      acc[layer.id] = { index: sortedLayers.indexOf(layer.id) };
+      return acc;
+    }, {});
+
+    updateLayers(windowId, canvasId, payload);
+  }, [canvasId, layers, updateLayers, windowId]);
+
   return (
     <>
       { totalSize > 1 && (
@@ -280,6 +298,7 @@ export function CanvasLayers({
                       handleOpacityChange={handleOpacityChange}
                       setLayerVisibility={setLayerVisibility}
                       moveToBackground={moveToBackground}
+                      moveToFront={moveToFront}
                     />
                   </DraggableLayer>
                 ))

diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
@@ -71,8 +71,8 @@
     "language": "Sprache",
     "layer_hide": "Ebene verbergen",
     "layer_move": "Ebene verschieben",
-    "layer_moveToTop": "Ebene ganz nach vorn bringen",
     "layer_moveToBackground": "Ebene in der Hintergrund verschieben",
+    "layer_moveToFront": "Ebene ganz nach vorn bringen",
     "layer_opacity": "Ebenendeckkraft",
     "layer_show": "Ebene anzeigen",
     "layers": "Ebenen",

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -71,8 +71,8 @@
     "language": "Language",
     "layer_hide": "Hide layer",
     "layer_move": "Move layer",
-    "layer_moveToTop": "Move layer to top",
     "layer_moveToBackground": "Move layer to background",
+    "layer_moveToFront": "Move layer to front",
     "layer_opacity": "Layer opacity",
     "layer_show": "Show layer",
     "layers": "Layers",