feat: évolutions ergonomiques

components/map/hooks/bounds.ts

@@ -0,0 +1,65 @@
+import { useMemo, useContext, useState, useEffect, useCallback } from "react";
+import bbox from "@turf/bbox";
+
+import BalDataContext from "@/contexts/bal-data";
+import MapContext from "@/contexts/map";
+import { useRouter } from "next/router";
+import { CommuneType } from "@/types/commune";
+import { Toponyme, Voie } from "@/lib/openapi";
+
+function useBounds(commune: CommuneType, voie: Voie, toponyme: Toponyme) {
+  const communeBounds = useMemo(
+    () => (commune.contour ? bbox(commune.contour) : null),
+    [commune.contour]
+  );
+  const { editingItem } = useContext(BalDataContext);
+  const { map, isTileSourceLoaded } = useContext(MapContext);
+  const [wasCenteredOnCommuneOnce, setWasCenteredOnCommuneOnce] =
+    useState(false);
+  const [bounds, setBounds] = useState(communeBounds);
+
+  const router = useRouter();
+
+  const setBoundsItem = useCallback(
+    (item) => {
+      if (map && item && item.trace) {
+        setBounds(bbox(item.trace));
+      } else if (map && item && item.bbox) {
+        setBounds(item.bbox);
+      }
+    },
+    [map, setBounds]
+  );
+
+  useEffect(() => {
+    // Get bounds on page load and when edit
+    const { idVoie, idToponyme } = router.query;
+    const bounds = communeBounds;
+
+    if (isTileSourceLoaded) {
+      if (idVoie) {
+        setBoundsItem(voie);
+      } else if (idToponyme) {
+        setBoundsItem(toponyme);
+      } else if (editingItem) {
+        setBoundsItem(editingItem);
+      } else if (!wasCenteredOnCommuneOnce) {
+        setBounds(bounds);
+        setWasCenteredOnCommuneOnce(true);
+      }
+    }
+  }, [
+    communeBounds,
+    router.query,
+    isTileSourceLoaded,
+    voie,
+    toponyme,
+    editingItem,
+    setBoundsItem,
+    wasCenteredOnCommuneOnce,
+  ]);
+
+  return bounds;
+}
+
+export default useBounds;

components/table-row/table-row-edit-shortcut.tsx

@@ -1,7 +1,7 @@
-import React, {useState} from 'react'
-import {Pane, Table, EditIcon, Text} from 'evergreen-ui'
+import React, { useState } from "react";
+import { Pane, Table, EditIcon, Text, Tooltip, Position } from "evergreen-ui";
 
-import LanguagePreview from '../bal/language-preview'
+import LanguagePreview from "../bal/language-preview";
 
 interface TableRowEditShortcutProps {
   label: string;
@@ -12,31 +12,43 @@ interface TableRowEditShortcutProps {
   isSelectable: boolean;
 }
 
-function TableRowEditShortcut({label, nomAlt, complement, colors = {}, isEditingEnabled, isSelectable}: TableRowEditShortcutProps) {
-  const [hovered, setHovered] = useState(false)
+function TableRowEditShortcut({
+  label,
+  nomAlt,
+  complement,
+  colors = {},
+  isEditingEnabled,
+  isSelectable,
+}: TableRowEditShortcutProps) {
+  const [hoveredEdit, setHoveredEdit] = useState(false);
 
-  return (
+  const CellComponent = (
     <Table.Cell
       data-browsable
-      style={isSelectable ? {cursor: 'pointer', backgroundColor: hovered ? '#E4E7EB' : '#fff'} : null}
-      onMouseEnter={() => {
-        setHovered(isSelectable)
-      }}
-      onMouseLeave={() => {
-        setHovered(false)
-      }}
+      className={`table-row-edit-shortcut${isSelectable ? " selectable" : ""}`}
     >
       <Table.TextCell
         data-editable
-        flex='0 1 1'
-        style={{cursor: isEditingEnabled ? 'text' : 'pointer'}}
-        className='edit-cell'
+        flex="0 1 1"
+        height="100%"
+        style={{ cursor: isSelectable ? "pointer" : "default" }}
+        className="edit-cell"
+        onMouseEnter={() => {
+          setHoveredEdit(isEditingEnabled);
+        }}
+        onMouseLeave={() => {
+          setHoveredEdit(false);
+        }}
       >
         <Pane padding={1} fontSize={15}>
-          <Text color={colors.label ? colors.label : 'default'}>{label}</Text>
-          {complement && <Text color={colors.complement ? colors.complement : 'default'}><i>{` - ${complement}`}</i></Text>}
+          <Text color={colors.label ? colors.label : "default"}>{label}</Text>
+          {complement && (
+            <Text color={colors.complement ? colors.complement : "default"}>
+              <i>{` - ${complement}`}</i>
+            </Text>
+          )}
           {isEditingEnabled && (
-            <span className='pencil-icon'>
+            <span className="pencil-icon">
               <EditIcon marginBottom={-4} marginLeft={8} />
             </span>
           )}
@@ -50,16 +62,32 @@ function TableRowEditShortcut({label, nomAlt, complement, colors = {}, isEditing
       </Table.TextCell>
 
       <style global jsx>{`
+        .table-row-edit-shortcut.selectable:hover {
+          background-color: #e4e7eb;
+          cursor: pointer;
+        }
         .edit-cell .pencil-icon {
           display: none;
         }
 
         .edit-cell:hover .pencil-icon {
           display: inline-block;
         }
-        `}</style>
+      `}</style>
     </Table.Cell>
-  )
+  );
+
+  return isSelectable ? (
+    <Tooltip
+      showDelay={500}
+      content={hoveredEdit ? "Modifier le libellé" : "Consulter les numéros"}
+      position={Position.BOTTOM}
+    >
+      {CellComponent}
+    </Tooltip>
+  ) : (
+    CellComponent
+  );
 }
 
-export default TableRowEditShortcut
+export default TableRowEditShortcut;