JSXGraph Pulsing Actor for XState

A lightweight, modular XState actor for managing various pulsing effects on JSXGraph elements.

Installation

npm install @ringkasannet/jsxgraph-pulsing-actor

Features

• Multiple pulsing effect types:

  • Glow Pulsing: Adds a pulsing outer glow effect to elements
  • Grow Pulsing: Makes elements grow and shrink
  • Radial Pulsing: Creates concentric circular effects
  • Stroke Pulsing: Animates element stroke properties

• XState-based state management

• TypeScript support with full type definitions

• Compatible with JSXGraph 1.6.0+

Usage

import { createActor } from 'xstate';
import { pulsingEffectMachine } from '@ringkasannet/jsxgraph-pulsing-actor';

// Create the pulsing actor
const pulsingActor = createActor(pulsingEffectMachine, {
  input: {
    boardId: 'jxgbox', // ID of your JSXGraph board
    elementId: 'point1' // ID of the element to apply pulsing to
  }
}).start();

// Start a glow pulsing effect
pulsingActor.send({
  type: 'START_PULSE',
  pulseType: 'glow',
  options: {
    speed: 1.5,
    glowFillColor: 'rgba(255, 0, 0, 0.3)',
    glowStrokeColor: 'rgba(255, 0, 0, 0.7)'
  }
});

// Later, stop the pulsing effect
pulsingActor.send({ type: 'STOP_PULSE' });

Options

Each pulsing type accepts specific options to customize the animation:

Glow Pulsing Options

{
  speed: 1.5,                         // Animation speed multiplier
  glowFillColor: 'rgba(0, 0, 255, 0.2)', // Fill color of the glow effect
  glowStrokeColor: 'rgba(0, 0, 255, 0.7)', // Stroke color of the glow effect
  glowStrokeWidth: 2,                  // Width of the glow stroke
  minScale: 1.0,                      // Minimum size scale factor
  maxScale: 1.5,                      // Maximum size scale factor
  minOpacity: 0.0,                    // Minimum opacity
  maxOpacity: 0.7                     // Maximum opacity
}

License

MIT

Contributors

• Barberfits