// poster.jsx — Poster artifact with map-dominant layout and minimal text.
// The pin (heart / home / pin) is rendered as a screen-space overlay over
// the map area and is draggable so the user can place it exactly on their
// house. Pin is always present — anti-piracy by construction.
const { useRef: usePR, useState: usePS } = React;
function Poster({
design, setDesign, width = 360, withWatermark = true, frameId = 'white',
draggable = false, interactive = true,
}) {
const style = (window.MAP_STYLES || []).find(s => s.id === design.style) || window.MAP_STYLES[0];
const themeClass = `theme-${style.posterTheme}`;
const pc = design.pinCoords || design.coords;
const coords = window.formatCoords(pc[0], pc[1]);
const headlineSize = Math.round(width * 0.066);
const pinSize = Math.max(18, Math.round(width * 0.082));
// Poster shape = aspect ratio of the chosen print size (WYSIWYG).
const posterAspect = window.sizeAspectCss(design.size || '30x40');
const mapAreaRef = usePR(null);
const mapObjRef = usePR(null);
const pinElRef = usePR(null);
// Latest values, readable from imperative map-event handlers (no stale closures).
const pcRef = usePR(null);
pcRef.current = design.pinCoords || design.coords;
const placedRef = usePR(false);
placedRef.current = !!design.pinPlaced;
// Position the pin. Once "placed" (dragged, or exact coords typed) the pin is
// GLUED to its geographic location — it projects to the right spot on every
// zoom/pan, so it stays on the building. Before that it sits at the map centre
// and follows it (so you can pan/search to find your area).
function placePin() {
const el = pinElRef.current, map = mapObjRef.current;
if (!el) return;
if (!placedRef.current || !map) { el.style.left = '50%'; el.style.top = '50%'; return; }
try {
const p = map.project(pcRef.current);
const area = mapAreaRef.current;
const W = area ? area.clientWidth : 0, H = area ? area.clientHeight : 0;
// Clamp to the map bounds so the pin sticks to the edge instead of vanishing.
el.style.left = Math.max(0, Math.min(W, p.x)) + 'px';
el.style.top = Math.max(0, Math.min(H, p.y)) + 'px';
} catch (e) {}
}
// Re-place after every render (covers external coord/search changes).
React.useEffect(() => { placePin(); });
function onPinDown(e) {
if (!draggable || !setDesign) return;
e.preventDefault(); e.stopPropagation();
const map = mapObjRef.current;
const rect = mapAreaRef.current.getBoundingClientRect();
let coords = pcRef.current;
const move = (ev) => {
const p = ev.touches ? ev.touches[0] : ev;
const x = Math.max(0, Math.min(rect.width, p.clientX - rect.left));
const y = Math.max(0, Math.min(rect.height, p.clientY - rect.top));
if (pinElRef.current) { pinElRef.current.style.left = x + 'px'; pinElRef.current.style.top = y + 'px'; }
if (map) { try { const ll = map.unproject([x, y]); coords = [ll.lng, ll.lat]; pcRef.current = coords; } catch (er) {} }
};
const up = () => {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
window.removeEventListener('touchmove', move);
window.removeEventListener('touchend', up);
// From now on the pin is fixed to this exact geographic point.
setDesign(d => ({ ...d, pinPlaced: true, pinCoords: coords }));
};
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
window.addEventListener('touchmove', move, { passive: false });
window.addEventListener('touchend', up);
}
return (
{
mapObjRef.current = m;
m.on('move', placePin);
m.on('load', placePin);
m.on('idle', placePin);
placePin();
}}
onMoveEnd={interactive && setDesign ? (s) => {
// A placed pin stays glued to its coordinate; otherwise it follows the centre.
setDesign(d => d.pinPlaced
? { ...d, coords: s.center, zoom: s.zoom }
: { ...d, coords: s.center, zoom: s.zoom, pinCoords: s.center });
} : null}
/>
{/* Pin — locked when not draggable, otherwise grab/drag */}
{withWatermark && (
WISMAPS
)}
{design.headline || 'Tu Mapa'}
{design.showCoords && (
{coords.lat}·{coords.lng}
)}
{design.tagline && (
— {design.tagline} —
)}
WISMAPS
);
}
// ─────────────────────────────────────────────────────────────────────────
// Pin icons — 3 options
function PinSvg({ type = 'pin', color = '#c9694e', size = 32 }) {
const h = Math.round(size * 1.28);
if (type === 'heart') {
const hs = Math.round(size * 1.28); // match the visual footprint of pin/home
return (
);
}
if (type === 'home') {
return (
);
}
// default pin
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// Photorealistic wall mockup — based on user reference (plant + wood shelf)
function WallMockup({ design, frameId = 'white' }) {
return (