@ue-too/board / index / SvgPositionDimensionPublisher

クラス: SvgPositionDimensionPublisher

定義: packages/board/src/utils/canvas-position-dimension.ts:40

Monitors and publishes position and dimension changes for SVG elements.

Remarks

This class tracks SVG element position and dimensions using multiple browser APIs to ensure comprehensive detection of all changes:

• ResizeObserver: Detects size changes
• IntersectionObserver: Detects visibility and position changes
• MutationObserver: Detects attribute changes (width, height, style)
• Window scroll/resize events: Detects changes from page layout

The reported DOMRect excludes padding and borders to provide the actual content dimensions using getTrueRect.

Position and dimension changes are published synchronously to all subscribers, ensuring immediate updates for coordinate transformations and rendering logic.

例

const svg = document.querySelector('svg');
const publisher = new SvgPositionDimensionPublisher(svg);

// Subscribe to position/dimension updates
publisher.onPositionUpdate((rect) => {
  console.log(`SVG at (${rect.x}, ${rect.y}) with size ${rect.width}x${rect.height}`);
});

// Clean up when done
publisher.dispose();

コンストラクター

コンストラクター

new SvgPositionDimensionPublisher(canvas?): SvgPositionDimensionPublisher

定義: packages/board/src/utils/canvas-position-dimension.ts:58

Creates a new SVG position/dimension publisher.

パラメータ

canvas?

SVGSVGElement

Optional SVG element to immediately attach to

戻り値

SvgPositionDimensionPublisher

Remarks

If a canvas is provided, observers are immediately attached and monitoring begins. Otherwise, call attach later to begin monitoring.

メソッド

attach()

attach(canvas): void

定義: packages/board/src/utils/canvas-position-dimension.ts:138

Attaches observers to an SVG element and begins monitoring.

パラメータ

canvas

SVGSVGElement

The SVG element to monitor

戻り値

void

Remarks

Automatically calls dispose first to clean up any previous attachments. Sets up all observers and records the initial position/dimensions.

The initial rect is calculated immediately and stored, but no notification is sent to observers for this initial state.

---

dispose()

dispose(): void

定義: packages/board/src/utils/canvas-position-dimension.ts:114

Cleans up all observers and event listeners.

戻り値

void

Remarks

Disconnects all observers (ResizeObserver, IntersectionObserver, MutationObserver) and removes window event listeners (scroll, resize). Always call this method when the publisher is no longer needed to prevent memory leaks.

---

onPositionUpdate()

onPositionUpdate(observer, options?): () => void

定義: packages/board/src/utils/canvas-position-dimension.ts:215

Subscribes to position and dimension updates.

パラメータ

observer

Observer<[DOMRect]>

Callback function that receives the updated DOMRect

options?

SubscriptionOptions

Optional subscription options (e.g., AbortSignal for cleanup)

戻り値

Unsubscribe function to remove this observer

(): void

戻り値

void

Remarks

The observer is called synchronously whenever the SVG's position or dimensions change. The DOMRect parameter represents the actual content area (excluding padding and borders).

例

const unsubscribe = publisher.onPositionUpdate((rect) => {
  console.log(`Position: ${rect.x}, ${rect.y}`);
  console.log(`Size: ${rect.width}x${rect.height}`);
});

// Later, when done:
unsubscribe();