nick/PlotDirector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented the Floor Plans refinement pass.

Browse Source
This commit is contained in:
Nick Beckley 2026-06-20 22:04:48 +01:00
parent 18858f3fba
commit 3a71e9c135
3 changed files with 212 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
PlotLine/Views/FloorPlans/Edit.cshtml
View File

@ -39,15 +39,11 @@
return string.Join(" ", classes.Distinct()); 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"> <nav class="breadcrumb-trail" aria-label="Breadcrumb">
@ -202,14 +198,14 @@ else
} }
@foreach (var transition in floorTransitions) @foreach (var transition in floorTransitions)
{ {
var tooltip = $"{transition.FromLocationName} to {transition.ToLocationName}: {transition.TransitionType}"; var transitionDetails = TransitionDetails(transition);
<div class="floor-plan-transition-marker" <div class="floor-plan-transition-marker"
data-transition-marker="@transition.FloorPlanTransitionID" data-transition-marker="@transition.FloorPlanTransitionID"
data-from-location-id="@transition.FromLocationID" data-from-location-id="@transition.FromLocationID"
data-to-location-id="@transition.ToLocationID" 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>
} }
</div> </div>
@ -454,80 +450,101 @@ else
.ToList(); .ToList();
var floorTransitions = transitionsByFloor.GetValueOrDefault(floor.FloorPlanFloorID) ?? []; 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-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">
@if (floorLocationOptions.Count < 2) <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">
<p class="muted">Add at least two placed Locations on this floor before creating a transition.</p> Existing transitions
} </button>
else </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">
<input type="hidden" name="FloorPlanTransitionID" value="0" form="floor-plan-transition-add-@floor.FloorPlanFloorID" /> <div class="accordion-body">
<input type="hidden" name="FloorPlanFloorID" value="@floor.FloorPlanFloorID" form="floor-plan-transition-add-@floor.FloorPlanFloorID" /> @if (!floorTransitions.Any())
<div class="mb-2">
<label class="form-label" for="transition-from-@floor.FloorPlanFloorID">From Location</label>
<select id="transition-from-@floor.FloorPlanFloorID" class="form-select form-select-sm" name="FromLocationID" form="floor-plan-transition-add-@floor.FloorPlanFloorID">
<option value="">Choose a Location</option>
@foreach (var location in floorLocationOptions)
{ {
<option value="@location.LocationID">@location.LocationPath</option> <p class="muted mb-0">No transitions on this floor yet.</p>
} }
</select> else
</div>
<div class="mb-2">
<label class="form-label" for="transition-to-@floor.FloorPlanFloorID">To Location</label>
<select id="transition-to-@floor.FloorPlanFloorID" class="form-select form-select-sm" name="ToLocationID" form="floor-plan-transition-add-@floor.FloorPlanFloorID">
<option value="">Choose a Location</option>
@foreach (var location in floorLocationOptions)
{ {
<option value="@location.LocationID">@location.LocationPath</option> <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>
} }
</select> </div>
</div> </div>
<div class="mb-2"> </div>
<label class="form-label" for="transition-type-@floor.FloorPlanFloorID">Transition Type</label> <div class="accordion-item">
<select id="transition-type-@floor.FloorPlanFloorID" class="form-select form-select-sm" name="TransitionType" asp-items="Model.TransitionTypeOptions" form="floor-plan-transition-add-@floor.FloorPlanFloorID"></select> <h3 class="accordion-header" id="transition-create-heading-@floor.FloorPlanFloorID">
</div> <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">
<div class="mb-2"> Create transition
<label class="form-label" for="transition-label-@floor.FloorPlanFloorID">Display Label</label> </button>
<input id="transition-label-@floor.FloorPlanFloorID" class="form-control form-control-sm" name="DisplayLabel" form="floor-plan-transition-add-@floor.FloorPlanFloorID" /> </h3>
</div> <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="mb-2"> <div class="accordion-body">
<label class="form-label" for="transition-notes-@floor.FloorPlanFloorID">Notes</label> @if (floorLocationOptions.Count < 2)
<textarea id="transition-notes-@floor.FloorPlanFloorID" class="form-control form-control-sm" name="Notes" rows="2" form="floor-plan-transition-add-@floor.FloorPlanFloorID"></textarea> {
</div> <p class="muted mb-0">Add at least two placed Locations on this floor before creating a transition.</p>
<label class="floor-plan-checkbox"> }
<input type="checkbox" name="IsLocked" value="true" form="floor-plan-transition-add-@floor.FloorPlanFloorID" /> else
Locked {
</label> <input type="hidden" name="FloorPlanTransitionID" value="0" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
<button class="btn btn-primary btn-sm w-100 mt-2" type="submit" form="floor-plan-transition-add-@floor.FloorPlanFloorID">Create transition</button> <input type="hidden" name="FloorPlanFloorID" value="@floor.FloorPlanFloorID" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
} <div class="mb-2">
</div> <label class="form-label" for="transition-from-@floor.FloorPlanFloorID">From Location</label>
<select id="transition-from-@floor.FloorPlanFloorID" class="form-select form-select-sm" name="FromLocationID" form="floor-plan-transition-add-@floor.FloorPlanFloorID">
<div class="floor-plan-tool-subsection"> <option value="">Choose a Location</option>
<h3>Existing transitions</h3> @foreach (var location in floorLocationOptions)
@if (!floorTransitions.Any()) {
{ <option value="@location.LocationID">@location.LocationPath</option>
<p class="muted">No transitions on this floor yet.</p> }
} </select>
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>
<div class="button-row"> <div class="mb-2">
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#edit-transition-@transition.FloorPlanTransitionID">Edit</button> <label class="form-label" for="transition-to-@floor.FloorPlanFloorID">To Location</label>
<button class="btn btn-outline-danger btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#delete-transition-@transition.FloorPlanTransitionID">Delete</button> <select id="transition-to-@floor.FloorPlanFloorID" class="form-select form-select-sm" name="ToLocationID" form="floor-plan-transition-add-@floor.FloorPlanFloorID">
<option value="">Choose a Location</option>
@foreach (var location in floorLocationOptions)
{
<option value="@location.LocationID">@location.LocationPath</option>
}
</select>
</div> </div>
</article> <div class="mb-2">
} <label class="form-label" for="transition-type-@floor.FloorPlanFloorID">Transition Type</label>
<select id="transition-type-@floor.FloorPlanFloorID" class="form-select form-select-sm" name="TransitionType" asp-items="Model.TransitionTypeOptions" form="floor-plan-transition-add-@floor.FloorPlanFloorID"></select>
</div>
<div class="mb-2">
<label class="form-label" for="transition-label-@floor.FloorPlanFloorID">Display Label</label>
<input id="transition-label-@floor.FloorPlanFloorID" class="form-control form-control-sm" name="DisplayLabel" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
</div>
<div class="mb-2">
<label class="form-label" for="transition-notes-@floor.FloorPlanFloorID">Notes</label>
<textarea id="transition-notes-@floor.FloorPlanFloorID" class="form-control form-control-sm" name="Notes" rows="2" form="floor-plan-transition-add-@floor.FloorPlanFloorID"></textarea>
</div>
<label class="floor-plan-checkbox">
<input type="checkbox" name="IsLocked" value="true" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
Locked
</label>
<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> </div>
} </div>
</div> </div>
</div> </div>
} }
@ -1143,20 +1160,56 @@ else
return { x: (minX + maxX) / 2, y: (minY + maxY) / 2 }; 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) { function positionTransitions(activePanel, visibleBlocks) {
activePanel.querySelectorAll("[data-transition-marker]").forEach(marker => { activePanel.querySelectorAll("[data-transition-marker]").forEach(marker => {
const fromBlocks = visibleBlocks.filter(item => item.block.dataset.locationId === marker.dataset.fromLocationId); 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 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; marker.hidden = true;
return; return;
} }
const sharedEdge = sharedTransitionEdge(fromBlocks, toBlocks);
const fromCenter = locationCenter(fromBlocks);
const toCenter = locationCenter(toBlocks);
marker.hidden = false; 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);
}); });
} }

103
PlotLine/wwwroot/css/site.css
View File

@ -4616,7 +4616,7 @@ body.dragging-location [data-drag-type="location"] {
.floor-plan-block { .floor-plan-block {
align-items: center; align-items: center;
border: 2px solid rgba(44, 84, 75, .55); border: 2px solid rgba(44, 84, 75, .55);
border-radius: 6px; border-radius: 2px;
color: #12332c; color: #12332c;
cursor: grab; cursor: grab;
display: flex; display: flex;
@ -4692,35 +4692,29 @@ body.dragging-location [data-drag-type="location"] {
.floor-plan-transition-marker { .floor-plan-transition-marker {
align-items: center; 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; 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)); left: calc(var(--transition-x, 0) * var(--cell-size));
max-width: 150px; line-height: 1;
padding: 3px 7px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: calc(var(--transition-y, 0) * var(--cell-size)); top: calc(var(--transition-y, 0) * var(--cell-size));
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 18px;
z-index: 4; 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 { .floor-plan-block--room {
@ -4781,27 +4775,33 @@ body.dragging-location [data-drag-type="location"] {
} }
.floor-plan-toolbox-tabs { .floor-plan-toolbox-tabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border-bottom: 1px solid var(--border-color, #d8ded9); border-bottom: 1px solid var(--border-color, #d8ded9);
display: flex;
flex-wrap: wrap;
gap: 0;
} }
.floor-plan-toolbox-tab { .floor-plan-toolbox-tab {
background: transparent; background: transparent;
border: 0; border: 0;
border-right: 1px solid var(--border-color, #d8ded9); border-right: 1px solid var(--border-color, #d8ded9);
border-bottom: 1px solid var(--border-color, #d8ded9);
color: inherit; color: inherit;
flex: 1 1 118px;
font-size: .82rem; font-size: .82rem;
font-weight: 800; font-weight: 800;
min-width: 112px;
padding: 10px 8px; 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; border-right: 0;
} }
.floor-plan-toolbox-tab.active { .floor-plan-toolbox-tab.active {
background: rgba(47, 111, 99, .1); background: rgba(47, 111, 99, .1);
border-bottom-color: var(--plotline-accent, #2f6f63);
color: var(--plotline-accent-dark, #22534a); color: var(--plotline-accent-dark, #22534a);
} }
@ -4871,10 +4871,10 @@ body.dragging-location [data-drag-type="location"] {
.floor-plan-transition-item { .floor-plan-transition-item {
border: 1px solid rgba(47, 111, 99, .14); border: 1px solid rgba(47, 111, 99, .14);
border-radius: 8px; border-radius: 6px;
display: grid; display: grid;
gap: 8px; gap: 8px;
padding: 9px; padding: 8px;
} }
.floor-plan-transition-item strong, .floor-plan-transition-item strong,
@ -4887,6 +4887,29 @@ body.dragging-location [data-drag-type="location"] {
color: var(--muted-text, #5d6f65); 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 { .floor-plan-checkbox {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
@ -4953,16 +4976,40 @@ body.dragging-location [data-drag-type="location"] {
[data-bs-theme="dark"] .floor-plan-transition-marker, [data-bs-theme="dark"] .floor-plan-transition-marker,
.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; 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, [data-bs-theme="dark"] .floor-plan-transition-item,
.dark .floor-plan-transition-item { .dark .floor-plan-transition-item {
border-color: rgba(212, 154, 98, .22); 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, [data-bs-theme="dark"] .floor-plan-block--room,
.dark .floor-plan-block--room { .dark .floor-plan-block--room {
background: #29584f; background: #29584f;

2
PlotLine/wwwroot/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long