<bmx-infinite-canvas>

<div class="row" role="group" aria-label="Board">
  <bmx-button id="ex-ic-note" variant="soft">Add a note</bmx-button>
  <bmx-button id="ex-ic-fit" variant="soft">Show everything</bmx-button>
  <bmx-button id="ex-ic-undo" variant="ghost">Undo</bmx-button>
</div>

<bmx-infinite-canvas id="ex-ic" label="Retrospective board" style="--bmx-infinite-canvas-height: 26rem; margin-block-start: 1rem"></bmx-infinite-canvas>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-ic-out">
    <strong>Drag, type, connect.</strong> Double-click the board for a note, drag from the dots round an item to
    connect it, and press <kbd>Delete</kbd> to remove what is selected. Every change is reported here as the JSON
    operations a multiplayer server would pass on to the other copies of the board.
  </span>
</div>

<script type="module">
  await customElements.whenDefined('bmx-infinite-canvas');

  const board = document.getElementById('ex-ic');
  const out = document.getElementById('ex-ic-out');

  // The board is data in: nodes and edges, as plain objects.
  await board.loadSnapshot({
    nodes: [
      { id: 'went-well', type: 'frame', x: 0, y: 0, w: 460, h: 300, text: 'Went well', color: 'green' },
      { id: 'to-change', type: 'frame', x: 520, y: 0, w: 460, h: 300, text: 'To change', color: 'pink' },
      { id: 'n1', type: 'note', x: 30, y: 40, w: 180, h: 180, text: 'Shipped the share dialog on time', color: 'green' },
      { id: 'n2', type: 'note', x: 240, y: 40, w: 180, h: 180, text: 'Design partners loved the beta', color: 'yellow' },
      { id: 'n3', type: 'note', x: 550, y: 40, w: 180, h: 180, text: 'Too many late scope changes', color: 'pink' },
      { id: 'a1', type: 'shape', shape: 'rounded', x: 770, y: 80, w: 180, h: 100, text: 'Freeze scope a week earlier', color: 'blue' },
    ],
    edges: [{ id: 'e1', from: 'n3', to: 'a1', label: 'action' }],
  });
  await board.zoomToFit(undefined, false);

  // Changes out: send `ops` to the other copies, which apply them with `applyRemote()`.
  board.addEventListener('bmxCanvasStateChange', event => {
    out.textContent = `bmxCanvasStateChange (${event.detail.origin}) - ${JSON.stringify(event.detail.ops)}`;
  });
  board.addEventListener('bmxSelectionChange', event => {
    if (event.detail.nodes.length) out.textContent = `bmxSelectionChange - ${event.detail.nodes.join(', ')}`;
  });

  document.getElementById('ex-ic-note').addEventListener('click', async () => {
    const view = await board.getViewport();
    const [note] = await board.addNodes({ type: 'note', color: 'violet', text: 'A new thought', x: view.x + view.width / 2 - 100, y: view.y + view.height / 2 - 100 });
    await board.select(note.id);
  });
  document.getElementById('ex-ic-fit').addEventListener('click', () => board.zoomToFit());
  document.getElementById('ex-ic-undo').addEventListener('click', () => board.undo());

  // In a shared session, apply what arrives from the others:
  //   socket.onmessage = message => board.applyRemote(JSON.parse(message.data));
</script>