Debug

The interaction library provides several utilities for debugging visualizations. These are useful when building custom components or troubleshooting rendering issues.

Debug Mode

Enable debug mode on the InteractionManager to visualize the viewBox and other internal state:

import { InteractionManager } from '@wangyaoshen/locus-interaction';

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
  debug: true, // Shows viewBox border and additional info
});

When debug mode is enabled:

• A red border appears around the actual viewBox
• Grid lines become more visible
• Component bounding boxes are highlighted

Viewport Info

Display current viewport information including coordinates and zoom level:

import { DebugInfo } from '@wangyaoshen/locus-interaction';

const debugInfo = new DebugInfo({
  position: [10, 10],
  showViewport: true,
  showMousePosition: true,
  precision: 2,
});

manager.registerComponent(debugInfo);

Transform Widget

A debugging tool for testing transformations on components:

import { TransformWidget } from '@wangyaoshen/locus-interaction';

const widget = new TransformWidget({
  children: [myShape],
  showHandles: true,
  showCenter: true,
});

manager.registerComponent(widget);

The transform widget allows you to:

• Drag to translate
• Rotate using corner handles
• Scale using edge handles

Props

DebugInfo Props

Name	Type	Default	Description
position	Vector2	[10, 10]	Display position
showViewport	boolean	true	Show viewport bounds
showMousePosition	boolean	true	Show mouse coordinates
precision	number	3	Decimal precision
fontSize	number	12	Text font size
color	string	'#666'	Text color

TransformWidget Props

Name	Type	Default	Description
children	Component[]	-	Components to transform
showHandles	boolean	true	Show transform handles
showCenter	boolean	true	Show center point
handleSize	number	8	Handle size
handleColor	string	'#2196F3'	Handle color