Interaction

This component is the entrypoint into rendering interactive visualizations. It provides a canvas-based environment for creating draggable points, lines, and other interactive elements.

View source code

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

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
});

const point = new InteractivePoint({
  position: [250, 150],
  color: '#E91E63',
  radius: 16,
});

manager.registerComponent(point);

Sizing

The canvas size can be configured via the width and height options:

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
  width: 500,
  height: 300,
});

Pan and Zoom

Enable panning and zooming for the canvas:

const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
  pan: true,
  zoom: { min: 0.5, max: 2 },
});

Props

Name	Type	Default	Description
canvas	HTMLCanvasElement	-	The canvas element to use
width	number	500	Canvas width
height	number	300	Canvas height
pan	boolean	true	Enable mouse/touch panning
zoom	boolean | { min: number; max: number }	false	Enable zooming
backgroundColor	string	'transparent'	Canvas background color
gridSize	number	50	Grid line spacing
showGrid	boolean	true	Show background grid

Available Components

Explore the display components available:

• Coordinates - Coordinate system overlays
• Points - Render points at specific locations
• Lines - Line segments between points
• Polygons - Closed polygon shapes
• Circles - Circle shapes
• Ellipses - Ellipse shapes
• Plots - Function plots
• Text - Text labels
• Vectors - Vector arrows
• Images - Image display
• Transform - Transform wrappers
• Debug - Debug utilities