);
}
// ── 2. PanoramaHotspotPlacer — for hidden_items_360_image ─────────────────
function PanoramaHotspotPlacer({
imageUrl, image360CoverText,
pins = [],
onChange, selectedIndex = -1, onSelect,
height = 320,
}) {
/* 360° panoramas are wider-than-tall equirectangular images. The
viewer can:
• drag the background → yaw (look left/right)
• click empty space → drop a new hotspot
• click an existing pin → select it
• drag an existing pin → reposition it
Distinguishing these reliably is the whole point of this rewrite
— previously a drag-on-dot bubbled to the container, started a
yaw drag, and on mouseup the synthetic click handler fired and
dropped a *new* pin at the release point. Two interactions
collided as one. The fix has three parts:
1. Track drag state in a single ref with a `mode`: 'view' or
'pin'. Mouse-down on a pin starts mode 'pin'; mouse-down on
the background starts mode 'view'.
2. Read pins/yaw/onChange via refs from the global mouse
handlers so move events always see the latest values without
re-binding the listeners each render.
3. Capture `moved` in a SEPARATE ref that survives past mouseup
(it gates the click handler — addAtPoint runs only if the
gesture wasn't a drag). The synthetic click on the container
fires after the dom mouseup, so we can't rely on
`dragRef.current` being non-null inside it. */
const [yaw, setYaw] = React.useState(50);
const [grabbing, setGrabbing] = React.useState(null); // 'view' | 'pin' | null — cosmetic
const yawRef = React.useRef(yaw);
yawRef.current = yaw;
const pinsRef = React.useRef(pins);
pinsRef.current = pins;
const onChangeRef = React.useRef(onChange);
onChangeRef.current = onChange;
const onSelectRef = React.useRef(onSelect);
onSelectRef.current = onSelect;
const ref = React.useRef(null);
const dragRef = React.useRef(null);
const wasDraggedRef = React.useRef(false);
const DRAG_THRESHOLD = 4;
const beginViewDrag = (e) => {
// Left-button only; ignore right/middle so context-menus still work.
if (e.button !== 0) return;
dragRef.current = { mode: 'view', startX: e.clientX, startY: e.clientY,
startYaw: yawRef.current, moved: false };
setGrabbing('view');
};
const beginPinDrag = (e, i) => {
if (e.button !== 0) return;
// Stop the event before it reaches the container so the background's
// mousedown handler doesn't ALSO start a yaw drag — the bug that used
// to make pin-drags turn into pin-drops.
e.stopPropagation();
e.preventDefault();
onSelectRef.current?.(i);
dragRef.current = { mode: 'pin', pinIdx: i, startX: e.clientX, startY: e.clientY,
moved: false };
setGrabbing('pin');
};
React.useEffect(() => {
const screenToWorldX = (clientX) => {
const box = ref.current?.getBoundingClientRect();
if (!box) return 0;
const local = ((clientX - box.left) / box.width) * 100;
const raw = local + (yawRef.current - 50);
return ((raw % 100) + 100) % 100;
};
const move = (e) => {
const d = dragRef.current;
if (!d) return;
const dx = e.clientX - d.startX;
const dy = e.clientY - d.startY;
if (!d.moved && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)) {
d.moved = true;
}
if (d.mode === 'view') {
if (!d.moved) return;
const next = Math.max(0, Math.min(100, d.startYaw - dx * 0.2));
setYaw(next);
} else if (d.mode === 'pin') {
const box = ref.current?.getBoundingClientRect();
if (!box) return;
const x = screenToWorldX(e.clientX);
const y = Math.max(0, Math.min(100, ((e.clientY - box.top) / box.height) * 100));
const rounded = { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
const next = pinsRef.current.map((p, j) =>
j === d.pinIdx ? { ...p, ...rounded } : p);
pinsRef.current = next;
onChangeRef.current?.(next);
}
};
const up = () => {
if (dragRef.current) {
// Preserve `moved` for the click handler that will fire next.
wasDraggedRef.current = dragRef.current.moved;
dragRef.current = null;
setGrabbing(null);
}
};
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
return () => {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
};
}, []);
/* Click-to-drop on the background is intentionally disabled. New
hotspots are created via the "+ Add hotspot" kind picker in the
inspector (the only way to choose between Text+Image / Video /
Question), then dragged into position on the panorama. A bare
click here either clears any in-flight drag-flag or does nothing
— clicking onto the image must not create a stray pin. */
const onContainerClick = () => {
if (wasDraggedRef.current) wasDraggedRef.current = false;
};
return (
{/* Pins offset by yaw too. Each pin owns its own mouse-down to
start a pin-drag (stopped from bubbling to the container so
the background's view-drag doesn't activate). */}
{pins.map((p, i) => {
const left = ((p.x - (yaw - 50)) + 200) % 100;
const isSel = i === selectedIndex;
const isGrabbing = grabbing === 'pin' && dragRef.current?.pinIdx === i;
return (
);
}
// ── 3. ThreeDHotspotPlacer — for object_viewer .glb hotspots ───────────────
function ThreeDHotspotPlacer({
objectUrl, objectPosterImgUrl,
backgroundColor, // CSS colour — fills the canvas so the
// author sees the same ``
// the Player will paint behind the model.
// Defaults to a neutral dark when unset.
pins = [], // [{ id, x, y, z, title }]
onChange, selectedIndex = -1, onSelect,
height = 320,
}) {
/* Mirrors the gesture model of PanoramaHotspotPlacer (§19):
• drag the background → orbit (yaw + pitch)
• click empty space → no-op (new pins are created via the
"+ Add hotspot" kind picker, never by clicking the canvas —
clicking a kind already implies "create", so a double-create
path here would be confusing)
• click an existing pin → select it
• drag an existing pin → reposition (back-project cursor → x,y,z)
Without separating 'view' and 'pin' drag modes the dot was either
unselectable (orbit started immediately and the pin lost its
mouse-down) or every pin click created a duplicate at the cursor
coordinate. The fix follows the same three-part pattern documented
in §19: per-mode dragRef, refs for live state, latched moved flag. */
const ref = React.useRef(null);
const [rot, setRot] = React.useState({ yaw: 30, pitch: -15 });
const [grabbing, setGrabbing] = React.useState(null); // 'view' | 'pin' | null — cosmetic
const rotRef = React.useRef(rot);
rotRef.current = rot;
const pinsRef = React.useRef(pins);
pinsRef.current = pins;
const onChangeRef = React.useRef(onChange);
onChangeRef.current = onChange;
const onSelectRef = React.useRef(onSelect);
onSelectRef.current = onSelect;
const dragRef = React.useRef(null);
const wasDraggedRef = React.useRef(false);
const DRAG_THRESHOLD = 4;
/* rAF-throttled commit. The pin-drag updates pinsRef synchronously
so the placer can repaint immediately, but we coalesce the call
to the parent onChange so the app-level layout draft re-renders
at most once per frame. Without this every mousemove cascades
through Module preview + PreviewPane and the dot lags visibly. */
const rafIdRef = React.useRef(null);
const pendingPinsRef = React.useRef(null);
const flushCommit = () => {
rafIdRef.current = null;
const next = pendingPinsRef.current;
if (next) {
pendingPinsRef.current = null;
onChangeRef.current?.(next);
}
};
const scheduleCommit = (next) => {
pendingPinsRef.current = next;
if (rafIdRef.current == null) {
rafIdRef.current = requestAnimationFrame(flushCommit);
}
};
/* Force a local re-render on every mousemove so the dot follows the
cursor between rAF commits — the `pins` prop only updates when the
throttle fires, so we read pinsRef directly when rendering and
bump a counter here. */
const [, bump] = React.useReducer(x => x + 1, 0);
const beginViewDrag = (e) => {
// Left-button only; ignore right/middle so context-menus still work.
if (e.button !== 0) return;
dragRef.current = { mode: 'view', startX: e.clientX, startY: e.clientY,
startYaw: rotRef.current.yaw, startPitch: rotRef.current.pitch, moved: false };
setGrabbing('view');
};
const beginPinDrag = (e, i) => {
if (e.button !== 0) return;
// Stop the event before it reaches the container so the background's
// mousedown handler doesn't ALSO start an orbit drag — the bug that
// used to make pin-drags impossible.
e.stopPropagation();
e.preventDefault();
onSelectRef.current?.(i);
dragRef.current = { mode: 'pin', pinIdx: i, startX: e.clientX, startY: e.clientY,
moved: false };
setGrabbing('pin');
};
// Back-project a screen position (0..1, 0..1) into a normalised
// (x,y,z) using the current yaw — same math as the original
// addAtPoint, factored out so both add-and-drag share one path.
// Pitch is ignored on purpose: the mock orbit only re-projects yaw,
// so pitch-aware back-projection would push pins off the cursor.
const screenToModel = (sx, sy) => {
const yawRad = (rotRef.current.yaw * Math.PI) / 180;
const cx = sx - 0.5, cy = sy - 0.5;
const x = 0.5 + cx * Math.cos(yawRad);
const z = 0.5 + cx * Math.sin(yawRad);
const y = 0.5 + cy;
return {
x: Math.max(0, Math.min(1, Math.round(x * 100) / 100)),
y: Math.max(0, Math.min(1, Math.round(y * 100) / 100)),
z: Math.max(0, Math.min(1, Math.round(z * 100) / 100)),
};
};
React.useEffect(() => {
const move = (e) => {
const d = dragRef.current;
if (!d) return;
const dx = e.clientX - d.startX;
const dy = e.clientY - d.startY;
if (!d.moved && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)) {
d.moved = true;
}
if (d.mode === 'view') {
if (!d.moved) return;
setRot({
yaw: d.startYaw + dx * 0.4,
pitch: Math.max(-60, Math.min(60, d.startPitch + dy * 0.3)),
});
} else if (d.mode === 'pin') {
const box = ref.current?.getBoundingClientRect();
if (!box) return;
const sx = (e.clientX - box.left) / box.width;
const sy = (e.clientY - box.top) / box.height;
const xyz = screenToModel(sx, sy);
const next = pinsRef.current.map((p, j) =>
j === d.pinIdx ? { ...p, ...xyz } : p);
pinsRef.current = next;
scheduleCommit(next);
bump(); // repaint locally; pins prop will catch up next frame
}
};
const up = () => {
if (dragRef.current) {
// Preserve `moved` for the click handler that will fire next.
wasDraggedRef.current = dragRef.current.moved;
dragRef.current = null;
setGrabbing(null);
// Flush any in-flight rAF immediately so the final position
// commits before the user does anything else.
if (rafIdRef.current != null) {
cancelAnimationFrame(rafIdRef.current);
rafIdRef.current = null;
flushCommit();
}
}
};
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
}, []);
/* Click-to-drop on the background is intentionally disabled. New
hotspots are created via the "+ Add hotspot" kind picker in the
inspector (the only way to choose between Text+Image / Video /
Question), then dragged into position on the model. A bare click
here either clears any in-flight drag-flag or does nothing —
clicking onto the canvas must not create a stray pin. */
const onContainerClick = () => {
if (wasDraggedRef.current) wasDraggedRef.current = false;
};
// Project a pin's x,y,z into screen pixels for display.
const project = (p) => {
const yawRad = (rot.yaw * Math.PI) / 180;
const dx = p.x - 0.5, dy = p.y - 0.5, dz = p.z - 0.5;
const sx = 0.5 + (dx * Math.cos(yawRad) - dz * Math.sin(yawRad));
const sy = 0.5 + dy + dz * Math.sin((rot.pitch * Math.PI) / 180) * 0.3;
const visible = (dx * Math.sin(yawRad) + dz * Math.cos(yawRad)) > -0.6;
return { sx, sy, visible };
};
return (
{/* Orientation indicator */}
x,y,z · yaw {Math.round(rot.yaw)}°
{/* Hotspots — each owns its own mouse-down to start a pin-drag
(stopped from bubbling so the background's view-drag doesn't
activate). Iterate pinsRef (not the prop) so the placer
repaints immediately while the parent onChange is being
rAF-throttled. */}
{pinsRef.current.map((p, i) => {
const pr = project(p);
if (!pr.visible) return null;
const isSel = i === selectedIndex;
const isGrabbing = grabbing === 'pin' && dragRef.current?.pinIdx === i;
return (
{/* No duplicated video preview here — the Video media block above
already shows the same frame. The timeline is the focus of this
card. */}
{/* Time markings */}
);
}
// ─── AiGenerateBar — the sparkle toggle + inline prompt + Generate button.
// ─── Used by the in-video Question inspector AND by the Sequence question
// ─── step (see docs/video-media-patterns.md §13, the binding inline-AI
// ─── pattern). Both surfaces need the same shape:
// ─── • A 30×30 sparkle icon sits to the right of the block's label.
// ─── • Click reveals an inline `.field` prompt + `.btn.sm.primary` Generate
// ─── button in the header's flex space; nothing else reflows.
// ─── • Click the active sparkle (or press Esc) dismisses.
//
// ─── Owns its own open/prompt state — callers don't manage the panel.
// ─── `onGenerate(prompt)` is called when the author fires Generate; the
// ─── caller decides what to write to the underlying record.
function AiGenerateBar({ placeholder, onGenerate, instanceKey }) {
const [aiOpen, setAiOpen] = React.useState(false);
const [aiPrompt, setAiPrompt] = React.useState('');
const [generating, setGenerating] = React.useState(false);
// Reset when the host swaps the underlying record — e.g. selecting a
// different marker / step. The prompt is per-instance, not per-surface.
React.useEffect(() => {
setAiOpen(false); setAiPrompt(''); setGenerating(false);
}, [instanceKey]);
const fire = () => {
if (generating) return;
setGenerating(true);
// Mocked latency — the real backend call happens in `onGenerate`.
Promise.resolve(onGenerate?.(aiPrompt)).finally(() => {
// Small minimum delay so the spinner text is legible even when the
// mocked write returns synchronously.
setTimeout(() => setGenerating(false), 600);
});
};
return (
<>
{aiOpen ? (