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

Fix Story Intelligence presence callout bounds

Browse Source
This commit is contained in:
Nick Beckley 2026-07-29 19:31:32 +00:00
parent 7dd14f13a9
commit 24a050e3b5
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
View File

@ -796,7 +796,7 @@ input:focus-visible {
position: absolute;
left: var(--presence-left, 28px);
top: var(--presence-top, 58px);
z-index: 78;
z-index: 34;
width: var(--presence-width, 520px);
height: var(--presence-height, 320px);
border: 1px solid rgba(125, 193, 255, 0.2);

30
PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
View File

@ -714,22 +714,32 @@
}
const rects = characterNodes
.map((node) => node.getBoundingClientRect())
.flatMap((node) => [
node.getBoundingClientRect(),
...[...node.querySelectorAll(".story-character__image, .story-character__text")]
.map((part) => part.getBoundingClientRect())
])
.filter((rect) => rect.width > 0 && rect.height > 0);
if (!rects.length) {
callout.remove();
return;
}
const left = Math.min(...rects.map((rect) => rect.left)) - stageRect.left;
const top = Math.min(...rects.map((rect) => rect.top)) - stageRect.top;
const right = Math.max(...rects.map((rect) => rect.right)) - stageRect.left;
const bottom = Math.max(...rects.map((rect) => rect.bottom)) - stageRect.top;
const padding = Math.max(28, Math.min(54, stageRect.width * 0.035));
callout.style.setProperty("--presence-left", `${Math.max(12, left - padding)}px`);
callout.style.setProperty("--presence-top", `${Math.max(46, top - padding)}px`);
callout.style.setProperty("--presence-width", `${Math.min(stageRect.width * 0.72, right - left + padding * 2)}px`);
callout.style.setProperty("--presence-height", `${Math.min(stageRect.height * 0.82, bottom - top + padding * 2 + 62)}px`);
const contentLeft = Math.min(...rects.map((rect) => rect.left)) - stageRect.left;
const contentTop = Math.min(...rects.map((rect) => rect.top)) - stageRect.top;
const contentRight = Math.max(...rects.map((rect) => rect.right)) - stageRect.left;
const contentBottom = Math.max(...rects.map((rect) => rect.bottom)) - stageRect.top;
const paddingX = Math.max(46, Math.min(78, stageRect.width * 0.055));
const paddingY = Math.max(38, Math.min(70, stageRect.height * 0.085));
const maxRight = stageRect.width - 18;
const left = Math.max(12, contentLeft - paddingX);
const top = Math.max(38, contentTop - paddingY);
const right = Math.min(maxRight, Math.max(contentRight + paddingX, left + 320));
const bottom = Math.min(stageRect.height - 28, Math.max(contentBottom + paddingY, top + 230));
callout.style.setProperty("--presence-left", `${left}px`);
callout.style.setProperty("--presence-top", `${top}px`);
callout.style.setProperty("--presence-width", `${Math.max(300, right - left)}px`);
callout.style.setProperty("--presence-height", `${Math.max(210, bottom - top)}px`);
}
function drawConnection(id, start, end, tone, weight, label, index, obstacles, occupiedRects) {