update full objects type

www/style.css

@@ -3642,6 +3642,21 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   margin-top: 18px;
 }
 
+.mapsMirDialogFooter--inline {
+  justify-content: flex-start;
+  margin-top: 8px;
+}
+
+.mapsMirField--checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mapsMirField--checkbox input {
+  width: auto;
+}
+
 .mapsMirMenuList {
   list-style: none;
   margin: 0;
@@ -3795,6 +3810,12 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   flex-shrink: 0;
   min-height: 40px;
   overflow-x: auto;
+  position: relative;
+  z-index: 20;
+}
+
+.mapEditorObjectTypePicker.is-open {
+  z-index: 210;
 }
 
 .mapEditorMappingBarSpacer {
@@ -3839,20 +3860,161 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   background: rgba(255, 255, 255, 0.5);
 }
 
-.mapEditorObjectSelect {
+.mapEditorObjectTypePicker {
+  position: relative;
   flex: 1 1 220px;
   min-width: 180px;
   max-width: none;
-  height: 40px;
-  padding: 0 28px 0 12px;
-  border: none;
   border-right: 1px solid #c4c4c4;
+}
+
+.mapEditorObjectTypeBtn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 40px;
+  padding: 0 28px 0 10px;
+  border: none;
   border-radius: 0;
-  font-size: 13px;
+  background: #fff;
   color: #555;
-  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
-  appearance: none;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mapEditorObjectTypeBtn:hover:not(:disabled) {
+  background: #fafafa;
+}
+
+.mapEditorObjectTypeBtn:disabled {
+  color: #b0b0b0;
   cursor: not-allowed;
+  background: #f5f5f5;
+}
+
+.mapEditorObjectTypeBtn[aria-expanded="true"] {
+  background: #fafafa;
+}
+
+.mapEditorObjectTypeIcon,
+.mapEditorObjectTypeOptionIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #666;
+}
+
+.mapEditorObjectTypeIcon {
+  width: 20px;
+  height: 20px;
+}
+
+.mapEditorObjectTypeOptionIcon {
+  width: 22px;
+  height: 22px;
+}
+
+.mapEditorObjectTypeOptionIcon--wall {
+  color: #1a1a1a;
+}
+
+.mapEditorObjectTypeOptionIcon--floor {
+  color: #666;
+}
+
+.mapEditorObjectTypeOptionIcon--position {
+  color: #2980b9;
+}
+
+.mapEditorObjectTypeOptionIcon--forbidden {
+  color: #c0392b;
+}
+
+.mapEditorObjectTypeOptionIcon--preferred {
+  color: #27ae60;
+}
+
+.mapEditorObjectTypeOptionIcon--unpreferred {
+  color: #8e44ad;
+}
+
+.mapEditorObjectTypeOptionIcon--speed {
+  color: #e67e22;
+}
+
+.mapEditorObjectTypeOptionIcon--sound {
+  color: #3498db;
+}
+
+.mapEditorObjectTypeOptionIcon--directional {
+  color: #16a085;
+}
+
+.mapEditorObjectTypeOptionIcon--directionalLine {
+  color: #1abc9c;
+}
+
+.mapEditorObjectTypeOptionIcon--planner {
+  color: #7f8c8d;
+}
+
+.mapEditorObjectTypeOptionIcon--io {
+  color: #566573;
+}
+
+.mapEditorObjectTypeLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mapEditorObjectTypeChevron {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #666;
+  pointer-events: none;
+}
+
+.mapEditorObjectTypeMenu {
+  position: fixed;
+  z-index: 200;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: #fff;
+  border: 1px solid #c4c4c4;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+.mapEditorObjectTypeMenu[hidden] {
+  display: none !important;
+}
+
+.mapEditorObjectTypeOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #444;
+  cursor: pointer;
+}
+
+.mapEditorObjectTypeOption:hover,
+.mapEditorObjectTypeOption.is-selected {
+  background: rgba(92, 184, 92, 0.12);
+}
+
+.mapEditorObjectTypeOption.is-selected {
+  color: var(--mir-green, #5cb85c);
+  font-weight: 600;
 }
 
 .mapEditorCanvasWrap {
@@ -4088,6 +4250,354 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   pointer-events: none;
 }
 
+.mapEditorObjectsSvg {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.mapEditorObjectsSvg .mapObjWall {
+  stroke: #1a1a1a;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjWall--selected {
+  stroke: #e67e22;
+  stroke-width: 4;
+}
+
+.mapEditorObjectsSvg .mapObjWall--draft {
+  stroke: #3498db;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjFloor {
+  fill: rgba(255, 255, 255, 0.82);
+  stroke: #888;
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjFloor--selected {
+  fill: rgba(230, 126, 34, 0.25);
+  stroke: #e67e22;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjFloor--draft {
+  fill: rgba(52, 152, 219, 0.2);
+  stroke: #3498db;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDraftLine {
+  stroke: #3498db;
+  stroke-width: 2;
+  stroke-dasharray: 4 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjVertex {
+  fill: #3498db;
+  stroke: #fff;
+  stroke-width: 1;
+}
+
+.mapEditorObjectsSvg .mapObjCloseHint {
+  fill: none;
+  stroke: #27ae60;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjForbidden {
+  fill: rgba(231, 76, 60, 0.28);
+  stroke: #c0392b;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjForbidden--selected {
+  fill: rgba(231, 76, 60, 0.42);
+  stroke: #e74c3c;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjForbidden--draft {
+  fill: rgba(231, 76, 60, 0.18);
+  stroke: #e74c3c;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjPreferred {
+  fill: rgba(92, 184, 92, 0.28);
+  stroke: #27ae60;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPreferred--selected {
+  fill: rgba(92, 184, 92, 0.42);
+  stroke: #2ecc71;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjPreferred--draft {
+  fill: rgba(92, 184, 92, 0.18);
+  stroke: #2ecc71;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjUnpreferred {
+  fill: rgba(155, 89, 182, 0.24);
+  stroke: #8e44ad;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjUnpreferred--selected {
+  fill: rgba(155, 89, 182, 0.38);
+  stroke: #9b59b6;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjUnpreferred--draft {
+  fill: rgba(155, 89, 182, 0.16);
+  stroke: #9b59b6;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjSpeed {
+  fill: rgba(243, 156, 18, 0.28);
+  stroke: #e67e22;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjSpeed--selected {
+  fill: rgba(243, 156, 18, 0.42);
+  stroke: #f39c12;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjSpeed--draft {
+  fill: rgba(243, 156, 18, 0.18);
+  stroke: #f39c12;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjSound {
+  fill: rgba(52, 152, 219, 0.24);
+  stroke: #2980b9;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjSound--selected {
+  fill: rgba(52, 152, 219, 0.38);
+  stroke: #3498db;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjSound--draft {
+  fill: rgba(52, 152, 219, 0.16);
+  stroke: #3498db;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDirectional {
+  fill: rgba(26, 188, 156, 0.22);
+  stroke: #16a085;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjDirectional--selected {
+  fill: rgba(26, 188, 156, 0.36);
+  stroke: #1abc9c;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjDirectional--draft {
+  fill: rgba(26, 188, 156, 0.14);
+  stroke: #1abc9c;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionalLine {
+  fill: none;
+  stroke: #16a085;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionalLine--selected {
+  stroke: #1abc9c;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionalLine--draft {
+  stroke: #48c9b0;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionArrow {
+  pointer-events: none;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionShaft {
+  stroke: #117a65;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionHead {
+  fill: #117a65;
+  stroke: none;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionArrow--selected .mapObjDirectionShaft {
+  stroke: #0e6655;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionArrow--selected .mapObjDirectionHead {
+  fill: #0e6655;
+}
+
+.mapEditorObjectsSvg .mapObjPlannerSettings {
+  fill: rgba(127, 140, 141, 0.22);
+  stroke: #7f8c8d;
+  stroke-width: 2;
+  stroke-dasharray: 5 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPlannerSettings--selected {
+  fill: rgba(127, 140, 141, 0.34);
+  stroke: #95a5a6;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjPlannerSettings--draft {
+  fill: rgba(127, 140, 141, 0.14);
+  stroke: #95a5a6;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjIo {
+  fill: rgba(86, 101, 115, 0.24);
+  stroke: #566573;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjIo--selected {
+  fill: rgba(86, 101, 115, 0.38);
+  stroke: #5d6d7e;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjIo--draft {
+  fill: rgba(86, 101, 115, 0.16);
+  stroke: #5d6d7e;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjVertex--handle {
+  fill: #e67e22;
+  stroke: #fff;
+  stroke-width: 1.5;
+  cursor: grab;
+}
+
+.mapEditorObjectsSvg .mapObjSelectionRect {
+  fill: rgba(231, 76, 60, 0.12);
+  stroke: #e74c3c;
+  stroke-width: 1.5;
+  stroke-dasharray: 5 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPositionShaft {
+  stroke: #2980b9;
+  stroke-width: 3;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPositionHead {
+  fill: #2980b9;
+  stroke: none;
+}
+
+.mapEditorObjectsSvg .mapObjPositionDot {
+  fill: #fff;
+  stroke: #2980b9;
+  stroke-width: 2;
+}
+
+.mapEditorObjectsSvg .mapObjPosition--selected .mapObjPositionShaft {
+  stroke: #e67e22;
+}
+
+.mapEditorObjectsSvg .mapObjPosition--selected .mapObjPositionHead {
+  fill: #e67e22;
+}
+
+.mapEditorObjectsSvg .mapObjPosition--selected .mapObjPositionDot {
+  stroke: #e67e22;
+}
+
+.mapEditorCanvasWrap.is-erase-selection-tool {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-erase-selection-tool .mapEditorViewport {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-draw-tool {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-draw-tool .mapEditorViewport {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-eraser-tool {
+  cursor: cell;
+}
+
+.mapEditorCanvasWrap.is-eraser-tool .mapEditorViewport {
+  cursor: cell;
+}
+
+.mapEditorSourceCanvas {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.mapEditorBaseCanvas {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .mapEditorStatusBar {
   flex-shrink: 0;
   display: grid;