Skip to content

Add sticky notes (canvas annotations) support#55

Merged
vvlladd28 merged 8 commits intothingsboard:masterfrom
vvlladd28:feature/fc-note
Mar 4, 2026
Merged

Add sticky notes (canvas annotations) support#55
vvlladd28 merged 8 commits intothingsboard:masterfrom
vvlladd28:feature/fc-note

Conversation

@vvlladd28
Copy link
Copy Markdown
Member

This PR introduces a new sticky notes feature that allows placing free-form annotation blocks directly on the flowchart canvas. Notes can be moved, resized, selected, and deleted independently of nodes and edges.

**New public API

Models (ngx-flowchart.models.ts)**

  • FcNote — new interface for a note entity (id, x, y, width, height, readonly?, open-ended extra fields)
  • FcModel.notes?: FcNote[] — optional notes array on the flowchart model
  • FC_NOTE_COMPONENT_CONFIG / FcNoteComponentConfig — injection token to provide a custom note renderer (mirrors the existing FC_NODE_COMPONENT_CONFIG pattern)
  • UserNoteCallbacks — callback bag (noteEdit, doubleClick, mouseEnter, mouseLeave)
  • UserCallbacks.noteCallbacks and UserCallbacks.noteRemoved — wired into the main callbacks object
  • FcItemInfo.note — hit-test now returns the note under the pointer

Components

  • FcNoteContainerComponent () — container that positions, selects, and manages drag/resize of a note; dynamically renders the configured note component type
  • FcNoteComponent — abstract base directive for custom note renderers (mirrors FcNodeComponent)
  • DefaultFcNoteComponent — built-in yellow sticky-note renderer used when no custom config is provided

Service

  • FcNoteDraggingService — mouse-based drag and resize service with:
    • Pending mode (drag threshold before committing selection)
    • Magnet behaviour — dragging an unselected note automatically picks up nodes and nested notes whose centers fall within the note's bounds
    • Group drag — when a note is already selected, only the current selection moves
    • Three resize handles: SE corner, S edge, E edge
    • NoteDragMode enum exported for custom renderers

Model service (model.service.ts)

  • NotesModel — manages note selection, deletion, and group selection (integrated into selectAll, deleteSelected, selectAllInRect)
  • getNoteAtPoint, getNodesInNoteBounds, getNotesInNoteBounds — new spatial query helpers
  • noteRemovedCallback — optional constructor parameter, fires after a note is deleted

Backwards compatibility

All changes are additive. FcModel.notes is optional — existing models without notes continue to work unchanged. The noteRemovedCallback constructor parameter is also optional.

@vvlladd28 vvlladd28 merged commit 401097c into thingsboard:master Mar 4, 2026
@vvlladd28 vvlladd28 deleted the feature/fc-note branch March 4, 2026 22:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant