Implemented the Floor Plans refinement pass.
This commit is contained in:
Nick Beckley
parent
18858f3fba
commit
3a71e9c135
@ -39,15 +39,11 @@
|
||||
|
||||
return string.Join(" ", classes.Distinct());
|
||||
}
|
||||
string TransitionIcon(string transitionType) => transitionType switch
|
||||
string TransitionDetails(FloorPlanTransitionEditViewModel transition)
|
||||
{
|
||||
FloorPlanTransitionTypes.Archway => "Arch",
|
||||
FloorPlanTransitionTypes.StairsUp => "Up",
|
||||
FloorPlanTransitionTypes.StairsDown => "Down",
|
||||
FloorPlanTransitionTypes.Ladder => "Ldr",
|
||||
FloorPlanTransitionTypes.Window => "Win",
|
||||
_ => "Door"
|
||||
};
|
||||
var details = $"{transition.FromLocationName} -> {transition.ToLocationName}\n{transition.TransitionType}";
|
||||
return string.IsNullOrWhiteSpace(transition.DisplayLabel) ? details : $"{details}\n{transition.DisplayLabel}";
|
||||
}
|
||||
}
|
||||
|
||||
<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">
|
||||
<span class="floor-plan-transition-icon">@TransitionIcon(transition.TransitionType)</span>
|
||||
<span class="floor-plan-transition-label">@transition.Label</span>
|
||||
title="@transitionDetails"
|
||||
aria-label="@transitionDetails">
|
||||
<span aria-hidden="true">x</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@ -454,80 +450,101 @@ 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">
|
||||
<h3>Create transition</h3>
|
||||
@if (floorLocationOptions.Count < 2)
|
||||
{
|
||||
<p class="muted">Add at least two placed Locations on this floor before creating a transition.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<input type="hidden" name="FloorPlanTransitionID" value="0" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
|
||||
<input type="hidden" name="FloorPlanFloorID" value="@floor.FloorPlanFloorID" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
|
||||
<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)
|
||||
<div class="accordion floor-plan-transition-accordion" id="transition-accordion-@floor.FloorPlanFloorID">
|
||||
<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())
|
||||
{
|
||||
<option value="@location.LocationID">@location.LocationPath</option>
|
||||
<p class="muted mb-0">No transitions on this floor yet.</p>
|
||||
}
|
||||
</select>
|
||||
</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)
|
||||
else
|
||||
{
|
||||
<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 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 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="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 mb-0">Add at least two placed Locations on this floor before creating a transition.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<input type="hidden" name="FloorPlanTransitionID" value="0" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
|
||||
<input type="hidden" name="FloorPlanFloorID" value="@floor.FloorPlanFloorID" form="floor-plan-transition-add-@floor.FloorPlanFloorID" />
|
||||
<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>
|
||||
}
|
||||
</select>
|
||||
</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 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>
|
||||
}
|
||||
</select>
|
||||
</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>
|
||||
}
|
||||
@ -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);
|
||||
const toCenter = locationCenter(toBlocks);
|
||||
if (!fromCenter || !toCenter) {
|
||||
if (fromBlocks.length === 0 || toBlocks.length === 0) {
|
||||
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.style.setProperty("--transition-y", (fromCenter.y + toCenter.y) / 2);
|
||||
marker.classList.toggle("is-shared-edge", !!sharedEdge);
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
border: 1px solid rgba(47, 111, 99, .3);
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 4px 12px rgba(31, 37, 34, .16);
|
||||
background: rgba(255, 250, 242, .98);
|
||||
border: 1px solid rgba(47, 111, 99, .55);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(31, 37, 34, .16);
|
||||
color: #12332c;
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
font-size: .72rem;
|
||||
font-weight: 900;
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
left: calc(var(--transition-x, 0) * var(--cell-size));
|
||||
max-width: 150px;
|
||||
padding: 3px 7px;
|
||||
line-height: 1;
|
||||
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 {
|
||||
font-size: .68rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.floor-plan-transition-label {
|
||||
font-size: .68rem;
|
||||
font-weight: 800;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.floor-plan-transition-marker.is-shared-edge {
|
||||
background: rgba(255, 255, 255, .98);
|
||||
border-color: rgba(47, 111, 99, .72);
|
||||
}
|
||||
|
||||
.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);
|
||||
border-color: rgba(212, 154, 98, .42);
|
||||
background: rgba(42, 35, 30, .98);
|
||||
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;
|
||||
|
||||
2
PlotLine/wwwroot/css/site.min.css
vendored
2
PlotLine/wwwroot/css/site.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user