Xong phần map viewer

www/style.css

@@ -2227,7 +2227,7 @@ body.dashboard-widget-dragging .dashboardWidgetHeader {
   height: 100%;
   overflow: hidden;
   background: #d8dde4;
-  border-radius: 2px;
+  border-radius: 0;
 }
 .dashboardWidget--operate.dashboardWidget--map .dashboardWidgetBody,
 .dashboardWidget--operate.dashboardWidget--map_locked .dashboardWidgetBody {
@@ -3863,6 +3863,7 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   background: #b8b8b8;
   display: flex;
   flex-direction: column;
+  border-radius: 0;
 }
 
 .mapEditorCanvasWrap.is-panning {
@@ -3898,6 +3899,7 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  border-radius: 0;
 }
 
 .mapEditorCanvasInner {
@@ -3919,9 +3921,9 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   position: relative;
   min-width: 480px;
   min-height: 360px;
-  background: #fff;
-  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
+  background: transparent;
   user-select: none;
+  border-radius: 0;
 }
 
 .mapEditorSheet--blank {
@@ -3929,9 +3931,10 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
 }
 
 .mapEditorSheet--hasImage {
-  background: #fff;
+  background: transparent;
   min-width: 0;
   min-height: 0;
+  box-shadow: none;
 }
 
 .mapEditorSheetGrid {
@@ -3967,18 +3970,23 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   left: 0;
   top: 0;
   transform-origin: 0 0;
+  pointer-events: none;
 }
 
 .mapEditorOriginAxis--x {
   width: 36px;
   height: 2px;
+  top: -1px;
+  left: 0;
   background: #e74c3c;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
 }
 
-.mapEditorOriginAxis--y {
+.mapEditorOriginAxis--z {
   width: 2px;
   height: 36px;
+  left: -1px;
+  top: -36px;
   background: #27ae60;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
 }
@@ -3993,12 +4001,41 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   background: #e67e22;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+}
+
+.mapEditorOriginHit {
+  position: absolute;
+  left: -18px;
+  top: -18px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  pointer-events: auto;
+  cursor: help;
+  z-index: 5;
+  appearance: none;
+  font: inherit;
+  color: inherit;
+}
+
+.mapEditorOriginHit:focus {
+  outline: none;
+}
+
+.mapEditorOriginHit:focus-visible {
+  outline: 2px solid rgba(230, 126, 34, 0.85);
+  outline-offset: 2px;
 }
 
 .mapEditorOriginLabel {
   position: absolute;
   left: 8px;
-  top: -22px;
+  top: -48px;
   padding: 2px 6px;
   border-radius: 3px;
   background: rgba(255, 255, 255, 0.92);
@@ -4009,6 +4046,17 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   white-space: nowrap;
   line-height: 1.3;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.mapEditorOrigin:has(.mapEditorOriginHit:hover) .mapEditorOriginLabel,
+.mapEditorOrigin:has(.mapEditorOriginHit:focus-visible) .mapEditorOriginLabel,
+.mapEditorOrigin.mapEditorOrigin--showLabel .mapEditorOriginLabel {
+  visibility: visible;
+  opacity: 1;
 }
 
 .mapEditorOrigin--offMap .mapEditorOriginLabel {
@@ -4016,17 +4064,27 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   border-color: #ccc;
 }
 
-.mapEditorImage {
+.mapEditorImageLoader {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.mapEditorOccupancyCanvas {
   display: block;
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
   max-width: none;
+  border-radius: 0;
+  background: transparent;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   user-select: none;
-  -webkit-user-drag: none;
   pointer-events: none;
 }