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

Simplify Story Intelligence character area border

Browse Source
This commit is contained in:
Nick Beckley 2026-07-29 19:57:01 +00:00
parent 24a050e3b5
commit 8e7f720141
2 changed files with 11 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -799,30 +799,16 @@ input:focus-visible {
z-index: 34;
width: var(--presence-width, 520px);
height: var(--presence-height, 320px);
border: 1px solid rgba(125, 193, 255, 0.2);
border-radius: 36px;
border: 1px solid rgba(125, 193, 255, 0.22);
border-radius: 28px;
background:
radial-gradient(circle at 65% 45%, rgba(87, 149, 205, 0.18), transparent 52%),
radial-gradient(circle at 62% 45%, rgba(87, 149, 205, 0.14), transparent 58%),
linear-gradient(135deg, rgba(17, 41, 70, 0.22), rgba(4, 10, 20, 0.06));
box-shadow: inset 0 0 44px rgba(125, 193, 255, 0.08), 0 22px 80px rgba(0, 0, 0, 0.16);
pointer-events: none;
transition: left 850ms cubic-bezier(.16, .84, .28, 1), top 850ms cubic-bezier(.16, .84, .28, 1), width 850ms cubic-bezier(.16, .84, .28, 1), height 850ms cubic-bezier(.16, .84, .28, 1);
}
.story-exp-presence-callout::after {
position: absolute;
right: -34px;
top: 48%;
width: 70px;
height: 44px;
border-top: 1px solid rgba(125, 193, 255, 0.2);
border-right: 1px solid rgba(125, 193, 255, 0.2);
border-radius: 0 28px 0 0;
background: linear-gradient(90deg, rgba(87, 149, 205, 0.14), transparent);
content: "";
transform: skewX(-18deg);
}
.story-character {
position: absolute;
display: block;

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

@ -713,33 +713,14 @@
dom.visualStage.append(callout);
}
const rects = characterNodes
.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 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`);
const left = Math.max(14, stageRect.width * 0.018);
const top = Math.max(38, stageRect.height * 0.062);
const right = Math.min(stageRect.width * 0.71, stageRect.width - 330);
const bottom = Math.min(stageRect.height - 62, stageRect.height * 0.78);
callout.style.setProperty("--presence-left", `${Math.round(left)}px`);
callout.style.setProperty("--presence-top", `${Math.round(top)}px`);
callout.style.setProperty("--presence-width", `${Math.round(Math.max(520, right - left))}px`);
callout.style.setProperty("--presence-height", `${Math.round(Math.max(300, bottom - top))}px`);
}
function drawConnection(id, start, end, tone, weight, label, index, obstacles, occupiedRects) {