Notes Demo Description

This page demonstrates the XRectNotes and XCircleNotes components from @boardxus/canvasx-core. It shows how to add rectangular and circular notes to the canvas, each with customizable color and label. These notes can be used for brainstorming, diagramming, and visual organization.

Notes Widgets Documentation

Overview

XRectNotes and XCircleNotes are widgets for adding sticky notes and circular notes to your CanvasX board. They support drag, resize, color customization, and text editing.

Key Properties

• backgroundColor: string — The fill color of the note.
• width, height: number — The dimensions of the note.
• id: string — Unique identifier for the note.
• textAlign: string — Alignment of the label text inside the note.

Usage Example

const note = new XRectNotes('My Note', {
  width: 200,
  height: 100,
  backgroundColor: 'lightblue',
  textAlign: 'center',
  id: 'note1',
});
canvas.add(note);

const circle = new XCircleNotes('Circle Note', {
  width: 120,
  height: 120,
  backgroundColor: 'yellow',
  id: 'circle1',
});
canvas.add(circle);

Tips & Best Practices

• Use different colors to categorize notes visually.
• Combine notes with connectors and shapes for diagrams and mind maps.
• Resize notes to fit more or less content as needed.