Pikaso HTML5 Canvas Library

The Background class manages the background layer of a Pikaso Board. It consists of two main components: an image (an ImageModel) and an overlay (a RectModel). The overlay can be used to apply a color tint or mask over the background image.

Key capabilities:

• Loading images from a File object or a URL.
• Controlling how the image fits the stage using different sizing strategies.
• Applying color fills to the background overlay.
• Accessing the underlying Konva nodes via the nodes getter.
• Retrieving the current background position via getPosition().

import { Background } from 'pikaso'

// Assuming 'board' is an existing instance of Board
const background = new Background(board);

// Set an image from a URL with a specific sizing strategy
await background.setImageFromUrl('https://example.com/image.jpg', { size: 'cover' });

// Apply a color overlay
background.fill('#ff0000');

// Get the position
const pos = background.getPosition(); // { x, y }

The Selection class is responsible for managing which shapes are currently selected on the Board. It handles multi-selection via click/drag, provides a visual transformer (via Konva) for resizing and rotating, and manages selection-related events.

Key capabilities include:

• Multi-selection: Select multiple shapes using a drag-to-select zone or by holding Shift (add) or Ctrl (toggle) while clicking.
• Visual Feedback: Automatically manages a Konva.Transformer to show handles for selected shapes.
• Keyboard Control: Supports moving selected shapes and deleting them via configurable keyboard mappings.
• Selection Zone: Implements a rectangular drag-to-select area on the board background.

import { Selection } from 'pikaso';

// Assuming 'board' is an instance of Board
const selection = new Selection(board);

// Access selected shapes
const selectedShapes = selection.shapes;

// Check if selection is active
if (selection.isVisible) {
  // ...
}

The Selection class provides several methods to programmatically control shape selection and manipulation:

Selection Methods

• find(selector: (shape: ShapeModel) => boolean): Selects shapes that match the provided predicate.
• selectAll(): Selects all active shapes on the board.
• deselectAll(): Clears all current selections.
• reselect(): Re-applies the current selection (useful after state changes).
• add(shape: ShapeModel): Adds a specific shape to the current selection.
• toggle(shape: ShapeModel): Toggles a shape's selected state.
• deselect(shape: ShapeModel): Removes a specific shape from the selection.
• multi(shapes: ShapeModel[]): Sets the selection to exactly the provided array of shapes.

Manipulation Methods

• delete(): Deletes all currently selected shapes and creates an undo/redo history entry.
• moveX(value: number): Moves selected shapes horizontally by the specified value (returns a Promise).
• moveY(value: number): Moves selected shapes vertically by the specified value (returns a Promise).
• group(groupName: string): Groups the selected shapes under a specific name.
• addFilter(filters: Filters | Filters[]): Applies visual filters to the selected shapes.
• removeFilter(filters: FilterFunctions | FilterFunctions[]): Removes filters from the selected shapes.

// Find and select all rectangles
selection.find(shape => shape.node.getType() === 'Rect');

// Select all
selection.selectAll();

// Move selected shapes right by 10 units
await selection.moveX(10);

// Delete selection
selection.delete();

// Group selection
selection.group('my-group');