✕

✕

Each pin is { src, x, y, rot, w } stored on the record. Drop a file (or click the empty board) to pin it at that point; drag the photo to re-tack it; drag the small square handle at its bottom-right corner — the same nwse-resize handle used on Maps whiteboard nodes — to resize it. The board itself is a flexible aside (flex:1 1 280px, not a fixed width) so it fills every pixel next to the text instead of leaving unusable space on wide windows.

.eo-as-media{ position:relative; flex:1 1 280px; min-width:220px; min-height:260px; overflow:hidden; }

.eo-as-pin{ position:absolute; width:var(--pw, 172px); cursor:grab;
  transform:rotate(var(--rot)); transform-origin:50% 8px; touch-action:none; user-select:none; }
.eo-as-pin img{ display:block; width:100%; pointer-events:none; border:6px solid #f3efe6; border-bottom-width:14px; }

.eo-as-pin-resize{ position:absolute; right:-5px; bottom:8px; width:12px; height:12px; border-radius:3px;
  background:var(--accent); border:2px solid var(--bg); cursor:nwse-resize; opacity:0; }
.eo-as-pin:hover .eo-as-pin-resize{ opacity:1; }

// pin shape: { src, x, y, rot, w }  (w defaults to 172)

function startPinDrag(fig, pins, idx, media){
  const start = { x: 0, y: 0, left: fig.offsetLeft, top: fig.offsetTop };
  const onMove = e => {
    const maxX = Math.max(0, media.clientWidth - fig.offsetWidth);
    const maxY = Math.max(0, media.clientHeight - 40);
    fig.style.left = Math.min(maxX, Math.max(0, start.left + e.dx)) + 'px';
    fig.style.top  = Math.min(maxY, Math.max(0, start.top  + e.dy)) + 'px';
  };
  const onUp = () => {
    pins[idx] = Object.assign({}, pins[idx], { x: fig.offsetLeft, y: fig.offsetTop });
    save(pins); // persist the updated record
  };
  return { onMove, onUp };
}

function startPinResize(fig, pins, idx){
  const startW = fig.offsetWidth;
  const onMove = e => {
    const w = Math.max(70, Math.min(560, startW + e.dx));
    fig.style.setProperty('--pw', w + 'px');
  };
  const onUp = () => {
    pins[idx] = Object.assign({}, pins[idx], { w: fig.offsetWidth });
    save(pins);
  };
  return { onMove, onUp };
}
// Wire both with pointerdown/pointermove/pointerup (pointer capture) —
// the resize handle must stopPropagation() so it doesn't also start a drag.