# `Overlays.anchors.set`

> Contract 2.0.0 · package sha256 `a857eca95b35921109faf997094bb4192f12527d9d0fcd4be7e97f06425bad6e` · generated from `configurator-runtime.d.ts` by `services/onsite-scripter/scripts/build-contract-docs.mjs`; edit the source, not this file.

Method of [`Overlays.anchors`](Overlays.anchors.md) · stable · since 2.0.0 · called as `session.overlays.anchors.set`

```ts
set(anchors: readonly AnchorSpec[], options?: AnchorOptions): void;
```

Replaces every anchor (an empty array removes them, as `clear()`). Sync. The next drawn
frame fires 'anchors:moved' with every anchor's position, the camera at rest too; a `set`
equal to the current anchors fires none.

## Options

Through [`Session`](Session.md):

| Option | Type | Default | What it does |
| --- | --- | --- | --- |
| `marginPx` | `number` | 0 | CSS px an anchor may sit outside the element and still count as visible. |

## Example

Imports: values (`has`, `validate`, the `Holo*Error` classes, the pure helpers) from `@holostep-configurators/runtime-client`, types from `@holostep-configurators/runtime-client/contract`, `/math` and `/testing` names from those entries; `boot` from the runtime module the root's `loadRuntimeAtFloor` resolves to. A type your page defines is your app's: declare it there, never import it from the package.

Compiled under the contract's strict settings (`examples/declaration/13-Overlays.anchors.set.ts`):

```ts
import type { Session } from '@holostep-configurators/runtime-client/contract';
declare const session: Session;
declare const signal: AbortSignal;
// One DOM marker per anchor; a marker hides in place while its anchor is not visible.
declare const markers: ReadonlyMap<string, HTMLElement>;
session.on('anchors:moved', ({ anchors }) => {
  for (const a of anchors) {
    const el = markers.get(a.id);
    if (!el) continue;
    el.hidden = !a.visible;                  // x and y are no placement while hidden
    if (a.visible) el.style.transform = `translate(${a.x}px, ${a.y}px)`;
  }
}, { signal });
session.overlays.anchors.set([{ id: 'seat', at: { x: 0, y: 0.45, z: 0 }, on: { node: 'sofa' } }]);
```

## Generic-API test (spec 3.1)

| Rule | Result |
| --- | --- |
| 1. Neutral name | pass: `set` names no product |
| 2. A precedent | pass (through its owner [`Overlays.anchors`](Overlays.anchors.md)): [Babylon.js GUI Control.linkWithMesh](https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/gui/src/2D/controls/control.ts) (row `K48`) |
| 3. Two apps, or labs | pass: 10 apps (ledger: app-4f16d2f6da, app-510d750508, app-b362a81c85, app-bcb7ef21da, app-ceb4eccc72, app-fb16dd1985, app-fc07850558, app-fd09090420; fleet cross-check: app-37356bf09f, app-f3598fad77, app-fc07850558, app-fd09090420) |
| 4. The cheaper fix first | decided per need in Appendix B: rows `K48` (through its owner [`Overlays.anchors`](Overlays.anchors.md)) at tier stable (a member only where no rule, data, asset or app code serves the need) |