Implemented the Floor Plans refinement pass.

PlotLine/Views/FloorPlans/Edit.cshtml

@@ -39,15 +39,11 @@
 
         return string.Join(" ", classes.Distinct());
     }
-    string TransitionIcon(string transitionType) => transitionType switch
+    string TransitionDetails(FloorPlanTransitionEditViewModel transition)
     {
-        FloorPlanTransitionTypes.Archway => "Arch",
+        var details = $"{transition.FromLocationName} -> {transition.ToLocationName}\n{transition.TransitionType}";
-        FloorPlanTransitionTypes.StairsUp => "Up",
+        return string.IsNullOrWhiteSpace(transition.DisplayLabel) ? details : $"{details}\n{transition.DisplayLabel}";
-        FloorPlanTransitionTypes.StairsDown => "Down",
+    }
-        FloorPlanTransitionTypes.Ladder => "Ldr",
-        FloorPlanTransitionTypes.Window => "Win",
-        _ => "Door"
-    };
 }
 
 <nav class="breadcrumb-trail" aria-label="Breadcrumb">
@@ -202,14 +198,14 @@ else
                                 }
                                 @foreach (var transition in floorTransitions)
                                 {
-                                    var tooltip = $"{transition.FromLocationName} to {transition.ToLocationName}: {transition.TransitionType}";
+                                    var transitionDetails = TransitionDetails(transition);
                                     <div class="floor-plan-transition-marker"
                                          data-transition-marker="@transition.FloorPlanTransitionID"
                                          data-from-location-id="@transition.FromLocationID"
                                          data-to-location-id="@transition.ToLocationID"
-                                         title="@tooltip">
+                                         title="@transitionDetails"
-                                        <span class="floor-plan-transition-icon">@TransitionIcon(transition.TransitionType)</span>
+                                         aria-label="@transitionDetails">
-                                        <span class="floor-plan-transition-label">@transition.Label</span>
+                                        <span aria-hidden="true">x</span>
                                     </div>
                                 }
                             </div>
@@ -454,11 +450,55 @@ else
                             .ToList();
                         var floorTransitions = transitionsByFloor.GetValueOrDefault(floor.FloorPlanFloorID) ?? [];
                         <div class="floor-plan-transition-editor @(isActive ? string.Empty : "d-none")" data-transition-editor="@floor.FloorPlanFloorID">
-                            <div class="floor-plan-tool-subsection">
+                            <div class="accordion floor-plan-transition-accordion" id="transition-accordion-@floor.FloorPlanFloorID">
-                                <h3>Create transition</h3>
+                                <div class="accordion-item">
+                                    <h3 class="accordion-header" id="transition-existing-heading-@floor.FloorPlanFloorID">
+                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#transition-existing-@floor.FloorPlanFloorID" aria-expanded="true" aria-controls="transition-existing-@floor.FloorPlanFloorID">
+                                            Existing transitions
+                                        </button>
+                                    </h3>
+                                    <div id="transition-existing-@floor.FloorPlanFloorID" class="accordion-collapse collapse show" aria-labelledby="transition-existing-heading-@floor.FloorPlanFloorID" data-bs-parent="#transition-accordion-@floor.FloorPlanFloorID">
+                                        <div class="accordion-body">
+                                            @if (!floorTransitions.Any())
+                                            {
+                                                <p class="muted mb-0">No transitions on this floor yet.</p>
+                                            }
+                                            else
+                                            {
+                                                <div class="floor-plan-transition-list">
+                                                    @foreach (var transition in floorTransitions)
+                                                    {
+                                                        <article class="floor-plan-transition-item">
+                                                            <div>
+                                                                <strong>@transition.FromLocationName -> @transition.ToLocationName</strong>
+                                                                <span>@transition.TransitionType</span>
+                                                                @if (!string.IsNullOrWhiteSpace(transition.DisplayLabel))
+                                                                {
+                                                                    <span>@transition.DisplayLabel</span>
+                                                                }
+                                                            </div>
+                                                            <div class="button-row">
+                                                                <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#edit-transition-@transition.FloorPlanTransitionID">Edit</button>
+                                                                <button class="btn btn-outline-danger btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#delete-transition-@transition.FloorPlanTransitionID">Delete</button>
+                                                            </div>
+                                                        </article>
+                                                    }
+                                                </div>
+                                            }
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="accordion-item">
+                                    <h3 class="accordion-header" id="transition-create-heading-@floor.FloorPlanFloorID">
+                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transition-create-@floor.FloorPlanFloorID" aria-expanded="false" aria-controls="transition-create-@floor.FloorPlanFloorID">
+                                            Create transition
+                                        </button>
+                                    </h3>
+                                    <div id="transition-create-@floor.FloorPlanFloorID" class="accordion-collapse collapse" aria-labelledby="transition-create-heading-@floor.FloorPlanFloorID" data-bs-parent="#transition-accordion-@floor.FloorPlanFloorID">
+                                        <div class="accordion-body">
                                             @if (floorLocationOptions.Count < 2)
                                             {
-                                    <p class="muted">Add at least two placed Locations on this floor before creating a transition.</p>
+                                                <p class="muted mb-0">Add at least two placed Locations on this floor before creating a transition.</p>
                                             }
                                             else
                                             {
@@ -503,31 +543,8 @@ else
                                                 <button class="btn btn-primary btn-sm w-100 mt-2" type="submit" form="floor-plan-transition-add-@floor.FloorPlanFloorID">Create transition</button>
                                             }
                                         </div>
-
-                            <div class="floor-plan-tool-subsection">
-                                <h3>Existing transitions</h3>
-                                @if (!floorTransitions.Any())
-                                {
-                                    <p class="muted">No transitions on this floor yet.</p>
-                                }
-                                else
-                                {
-                                    <div class="floor-plan-transition-list">
-                                        @foreach (var transition in floorTransitions)
-                                        {
-                                            <article class="floor-plan-transition-item">
-                                                <div>
-                                                    <strong>@transition.FromLocationName to @transition.ToLocationName</strong>
-                                                    <span>@transition.TransitionType</span>
                                     </div>
-                                                <div class="button-row">
-                                                    <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#edit-transition-@transition.FloorPlanTransitionID">Edit</button>
-                                                    <button class="btn btn-outline-danger btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#delete-transition-@transition.FloorPlanTransitionID">Delete</button>
                                 </div>
-                                            </article>
-                                        }
-                                    </div>
-                                }
                             </div>
                         </div>
                     }
@@ -1143,20 +1160,56 @@ else
                 return { x: (minX + maxX) / 2, y: (minY + maxY) / 2 };
             }
 
+            function sharedTransitionEdge(fromBlocks, toBlocks) {
+                let best = null;
+                fromBlocks.forEach(from => {
+                    toBlocks.forEach(to => {
+                        if (from.x + from.w === to.x || to.x + to.w === from.x) {
+                            const start = Math.max(from.y, to.y);
+                            const end = Math.min(from.y + from.h, to.y + to.h);
+                            const length = end - start;
+                            if (length > 0 && (!best || length > best.length)) {
+                                best = {
+                                    length,
+                                    x: from.x + from.w === to.x ? to.x : from.x,
+                                    y: start + length / 2
+                                };
+                            }
+                        }
+
+                        if (from.y + from.h === to.y || to.y + to.h === from.y) {
+                            const start = Math.max(from.x, to.x);
+                            const end = Math.min(from.x + from.w, to.x + to.w);
+                            const length = end - start;
+                            if (length > 0 && (!best || length > best.length)) {
+                                best = {
+                                    length,
+                                    x: start + length / 2,
+                                    y: from.y + from.h === to.y ? to.y : from.y
+                                };
+                            }
+                        }
+                    });
+                });
+                return best;
+            }
+
             function positionTransitions(activePanel, visibleBlocks) {
                 activePanel.querySelectorAll("[data-transition-marker]").forEach(marker => {
                     const fromBlocks = visibleBlocks.filter(item => item.block.dataset.locationId === marker.dataset.fromLocationId);
                     const toBlocks = visibleBlocks.filter(item => item.block.dataset.locationId === marker.dataset.toLocationId);
-                    const fromCenter = locationCenter(fromBlocks);
+                    if (fromBlocks.length === 0 || toBlocks.length === 0) {
-                    const toCenter = locationCenter(toBlocks);
-                    if (!fromCenter || !toCenter) {
                         marker.hidden = true;
                         return;
                     }
 
+                    const sharedEdge = sharedTransitionEdge(fromBlocks, toBlocks);
+                    const fromCenter = locationCenter(fromBlocks);
+                    const toCenter = locationCenter(toBlocks);
                     marker.hidden = false;
-                    marker.style.setProperty("--transition-x", (fromCenter.x + toCenter.x) / 2);
+                    marker.classList.toggle("is-shared-edge", !!sharedEdge);
-                    marker.style.setProperty("--transition-y", (fromCenter.y + toCenter.y) / 2);
+                    marker.style.setProperty("--transition-x", sharedEdge ? sharedEdge.x : (fromCenter.x + toCenter.x) / 2);
+                    marker.style.setProperty("--transition-y", sharedEdge ? sharedEdge.y : (fromCenter.y + toCenter.y) / 2);
                 });
             }
 

PlotLine/wwwroot/css/site.css

@@ -4616,7 +4616,7 @@ body.dragging-location [data-drag-type="location"] {
 .floor-plan-block {
   align-items: center;
   border: 2px solid rgba(44, 84, 75, .55);
-  border-radius: 6px;
+  border-radius: 2px;
   color: #12332c;
   cursor: grab;
   display: flex;
@@ -4692,35 +4692,29 @@ body.dragging-location [data-drag-type="location"] {
 
 .floor-plan-transition-marker {
   align-items: center;
-  background: rgba(255, 250, 242, .94);
+  background: rgba(255, 250, 242, .98);
-  border: 1px solid rgba(47, 111, 99, .3);
+  border: 1px solid rgba(47, 111, 99, .55);
-  border-radius: 999px;
+  border-radius: 50%;
-  box-shadow: 0 4px 12px rgba(31, 37, 34, .16);
+  box-shadow: 0 2px 6px rgba(31, 37, 34, .16);
   color: #12332c;
-  display: inline-flex;
+  display: flex;
-  gap: 5px;
+  font-size: .72rem;
+  font-weight: 900;
+  height: 18px;
+  justify-content: center;
   left: calc(var(--transition-x, 0) * var(--cell-size));
-  max-width: 150px;
+  line-height: 1;
-  padding: 3px 7px;
   pointer-events: none;
   position: absolute;
   top: calc(var(--transition-y, 0) * var(--cell-size));
   transform: translate(-50%, -50%);
+  width: 18px;
   z-index: 4;
 }
 
-.floor-plan-transition-icon {
+.floor-plan-transition-marker.is-shared-edge {
-  font-size: .68rem;
+  background: rgba(255, 255, 255, .98);
-  font-weight: 900;
+  border-color: rgba(47, 111, 99, .72);
-  line-height: 1;
-}
-
-.floor-plan-transition-label {
-  font-size: .68rem;
-  font-weight: 800;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .floor-plan-block--room {
@@ -4781,27 +4775,33 @@ body.dragging-location [data-drag-type="location"] {
 }
 
 .floor-plan-toolbox-tabs {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
   border-bottom: 1px solid var(--border-color, #d8ded9);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
 }
 
 .floor-plan-toolbox-tab {
   background: transparent;
   border: 0;
   border-right: 1px solid var(--border-color, #d8ded9);
+  border-bottom: 1px solid var(--border-color, #d8ded9);
   color: inherit;
+  flex: 1 1 118px;
   font-size: .82rem;
   font-weight: 800;
+  min-width: 112px;
   padding: 10px 8px;
 }
 
-.floor-plan-toolbox-tab:last-child {
+.floor-plan-toolbox-tab:last-child,
+.floor-plan-toolbox-tab.active:last-child {
   border-right: 0;
 }
 
 .floor-plan-toolbox-tab.active {
   background: rgba(47, 111, 99, .1);
+  border-bottom-color: var(--plotline-accent, #2f6f63);
   color: var(--plotline-accent-dark, #22534a);
 }
 
@@ -4871,10 +4871,10 @@ body.dragging-location [data-drag-type="location"] {
 
 .floor-plan-transition-item {
   border: 1px solid rgba(47, 111, 99, .14);
-  border-radius: 8px;
+  border-radius: 6px;
   display: grid;
   gap: 8px;
-  padding: 9px;
+  padding: 8px;
 }
 
 .floor-plan-transition-item strong,
@@ -4887,6 +4887,29 @@ body.dragging-location [data-drag-type="location"] {
   color: var(--muted-text, #5d6f65);
 }
 
+.floor-plan-transition-accordion .accordion-item {
+  background: transparent;
+  border-color: var(--border-color, #d8ded9);
+}
+
+.floor-plan-transition-accordion .accordion-button {
+  background: rgba(47, 111, 99, .06);
+  color: inherit;
+  font-size: .88rem;
+  font-weight: 800;
+  padding: 10px 12px;
+}
+
+.floor-plan-transition-accordion .accordion-button:not(.collapsed) {
+  background: rgba(47, 111, 99, .12);
+  color: var(--plotline-accent-dark, #22534a);
+  box-shadow: inset 0 -1px 0 var(--border-color, #d8ded9);
+}
+
+.floor-plan-transition-accordion .accordion-body {
+  padding: 12px;
+}
+
 .floor-plan-checkbox {
   align-items: center;
   display: inline-flex;
@@ -4953,16 +4976,40 @@ body.dragging-location [data-drag-type="location"] {
 
 [data-bs-theme="dark"] .floor-plan-transition-marker,
 .dark .floor-plan-transition-marker {
-  background: rgba(42, 35, 30, .95);
+  background: rgba(42, 35, 30, .98);
-  border-color: rgba(212, 154, 98, .42);
+  border-color: rgba(212, 154, 98, .6);
   color: #f4eadc;
 }
 
+[data-bs-theme="dark"] .floor-plan-transition-marker.is-shared-edge,
+.dark .floor-plan-transition-marker.is-shared-edge {
+  background: rgba(48, 39, 32, .98);
+  border-color: rgba(212, 154, 98, .78);
+}
+
 [data-bs-theme="dark"] .floor-plan-transition-item,
 .dark .floor-plan-transition-item {
   border-color: rgba(212, 154, 98, .22);
 }
 
+[data-bs-theme="dark"] .floor-plan-transition-accordion .accordion-item,
+.dark .floor-plan-transition-accordion .accordion-item {
+  border-color: rgba(212, 154, 98, .22);
+}
+
+[data-bs-theme="dark"] .floor-plan-transition-accordion .accordion-button,
+.dark .floor-plan-transition-accordion .accordion-button {
+  background: rgba(212, 154, 98, .08);
+  color: #f4eadc;
+}
+
+[data-bs-theme="dark"] .floor-plan-transition-accordion .accordion-button:not(.collapsed),
+.dark .floor-plan-transition-accordion .accordion-button:not(.collapsed) {
+  background: rgba(212, 154, 98, .16);
+  color: var(--plotline-accent-dark, #f0c99d);
+  box-shadow: inset 0 -1px 0 rgba(212, 154, 98, .22);
+}
+
 [data-bs-theme="dark"] .floor-plan-block--room,
 .dark .floor-plan-block--room {
   background: #29584f;