@ue-too/board / index / CanvasPositionDimensionPublisher

クラス: CanvasPositionDimensionPublisher

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

Monitors and publishes position and dimension changes for HTML Canvas elements.

Remarks

Similar to SvgPositionDimensionPublisher but specifically for HTMLCanvasElement. Automatically handles device pixel ratio adjustments to maintain crisp rendering at different screen densities.

Key differences from SVG version:

• Automatically adjusts canvas.width/height attributes based on devicePixelRatio
• Synchronizes CSS dimensions (style.width/height) with canvas buffer size
• Ensures canvas maintains proper resolution on high-DPI displays

The class uses multiple browser APIs for comprehensive change detection:

• ResizeObserver: Detects size changes
• IntersectionObserver: Detects visibility and position changes
• MutationObserver: Detects attribute changes and synchronizes dimensions
• Window scroll/resize events: Detects changes from page layout

例

const canvas = document.querySelector('canvas');
const publisher = new CanvasPositionDimensionPublisher(canvas);

// Subscribe to updates
publisher.onPositionUpdate((rect) => {
  // Canvas dimensions automatically adjusted for devicePixelRatio
  console.log(`Canvas at (${rect.x}, ${rect.y})`);
  console.log(`Display size: ${rect.width}x${rect.height}`);
});

publisher.dispose();

参照

SvgPositionDimensionPublisher for SVG elements

コンストラクター

コンストラクター

new CanvasPositionDimensionPublisher(canvas?): CanvasPositionDimensionPublisher

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

Creates a new Canvas position/dimension publisher.

パラメータ

canvas?

HTMLCanvasElement

Optional canvas element to immediately attach to

戻り値

CanvasPositionDimensionPublisher

Remarks

If a canvas is provided, observers are immediately attached and monitoring begins. The canvas dimensions are automatically adjusted for devicePixelRatio.

メソッド

attach()

attach(canvas): void

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

Attaches observers to a canvas element and begins monitoring.

パラメータ

canvas

HTMLCanvasElement

The canvas element to monitor

戻り値

void

Remarks

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

---

dispose()

dispose(): void

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

Cleans up all observers and event listeners.

戻り値

void

Remarks

Disconnects all observers and removes window event listeners. 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:493

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 canvas position or dimensions change. The DOMRect represents the actual content area (excluding padding and borders). Canvas buffer dimensions are automatically adjusted for devicePixelRatio.