lhumina_code/hero_whiteboard
1
0
Fork 0
Code Issues 104 Pull requests Projects Releases 1 Packages Wiki Activity Actions

implement more features from miro #6

New issue
Closed
opened 2026-04-06 07:29:11 +00:00 by despiegk · 2 comments
despiegk commented 2026-04-06 07:29:11 +00:00
Owner
Copy link

look carefully in how miro works from the core features

  • elements which can be drawn, properties they have

a miro user needs to feel at home

look carefully in how miro works from the core features - elements which can be drawn, properties they have a miro user needs to feel at home
despiegk added this to the now milestone 2026-04-06 07:29:13 +00:00
timur commented 2026-04-06 13:59:53 +00:00
Owner
Copy link

Miro Feature Gap Analysis

Compared the current whiteboard against Miro's core feature set. Here's what exists, what's partially done, and what's missing.

Currently Implemented

  • Sticky notes (with markdown, colors)
  • Text boxes (with markdown)
  • Basic shapes (rect, circle, ellipse, diamond)
  • Connectors (straight, curved, elbow)
  • Frames
  • Freehand drawing
  • Canvas pan/zoom
  • Real-time collaboration (WebSocket sync)
  • Kanban boards
  • Mind maps
  • Calendar widget
  • Web frames (embedded URLs)
  • Groups
  • Context menu
  • Clipboard (copy/paste)
  • Export (PNG)
  • Keyboard shortcuts

Missing Core Miro Features (Priority)

HIGH PRIORITY — Makes power users feel at home:

  1. More shape types — triangle, star, hexagon, pentagon, parallelogram, cylinder, cloud, callout/speech bubble, cross/plus. Miro has ~30 shape types.
  2. Image upload/paste — Drag/drop image files onto canvas, paste screenshots from clipboard. Critical for Miro users.
  3. Better alignment/distribution tools — Snap guides while dragging, align left/right/center/top/bottom/middle, distribute evenly. Miro shows dynamic guides.
  4. Sticky note clusters — Drag sticky notes near each other to auto-cluster. Tag-based clustering.
  5. Rich text formatting toolbar — Bold, italic, bullet lists, links — visible inline while editing (not just raw markdown).
  6. Object locking — Lock objects in place so they can't be accidentally moved.
  7. Layer ordering UI — Bring to front, send to back, bring forward, send backward.

MEDIUM PRIORITY — Expected by regular users:

  1. Minimap — Small overview map showing viewport position on the board.
  2. Cursor presence — Show other users' cursors with name labels in real-time (currently stub).
  3. Follow/viewport sharing — Click on a user avatar to follow their viewport.
  4. Better connector routing — Smart auto-routing around obstacles, adjustable waypoints.
  5. Line/arrow without endpoint shapes — Standalone lines and arrows (not just object-to-object connectors).
  6. Presentation mode — Present frames sequentially in fullscreen.
  7. Voting/timer — Workshop facilitation tools.

Implementation Plan (This Branch)

Focusing on the HIGH PRIORITY items that make the biggest UX difference:

  1. Add shape types: triangle, star, hexagon, pentagon, cloud, callout — extend createShapeBg() in objects.js and the shape picker in toolbar.
  2. Image upload/paste: Add image drop zone + clipboard paste handler, store as base64 or upload to server, render as Konva.Image.
  3. Alignment/snap guides: Show alignment guides when dragging objects near edges/centers of other objects.
  4. Object lock toggle: Add lock button in properties panel, disable dragging when locked.
  5. Layer ordering: Add context menu items and shortcuts for z-index manipulation.
  6. Cursor presence: Wire up the existing collab.js stub to actually show remote cursors via WebSocket awareness.

Starting implementation alongside performance work on branch development_5.

## Miro Feature Gap Analysis Compared the current whiteboard against Miro's core feature set. Here's what exists, what's partially done, and what's missing. ### Currently Implemented - Sticky notes (with markdown, colors) - Text boxes (with markdown) - Basic shapes (rect, circle, ellipse, diamond) - Connectors (straight, curved, elbow) - Frames - Freehand drawing - Canvas pan/zoom - Real-time collaboration (WebSocket sync) - Kanban boards - Mind maps - Calendar widget - Web frames (embedded URLs) - Groups - Context menu - Clipboard (copy/paste) - Export (PNG) - Keyboard shortcuts ### Missing Core Miro Features (Priority) **HIGH PRIORITY — Makes power users feel at home:** 1. **More shape types** — triangle, star, hexagon, pentagon, parallelogram, cylinder, cloud, callout/speech bubble, cross/plus. Miro has ~30 shape types. 2. **Image upload/paste** — Drag/drop image files onto canvas, paste screenshots from clipboard. Critical for Miro users. 3. **Better alignment/distribution tools** — Snap guides while dragging, align left/right/center/top/bottom/middle, distribute evenly. Miro shows dynamic guides. 4. **Sticky note clusters** — Drag sticky notes near each other to auto-cluster. Tag-based clustering. 5. **Rich text formatting toolbar** — Bold, italic, bullet lists, links — visible inline while editing (not just raw markdown). 6. **Object locking** — Lock objects in place so they can't be accidentally moved. 7. **Layer ordering UI** — Bring to front, send to back, bring forward, send backward. **MEDIUM PRIORITY — Expected by regular users:** 8. **Minimap** — Small overview map showing viewport position on the board. 9. **Cursor presence** — Show other users' cursors with name labels in real-time (currently stub). 10. **Follow/viewport sharing** — Click on a user avatar to follow their viewport. 11. **Better connector routing** — Smart auto-routing around obstacles, adjustable waypoints. 12. **Line/arrow without endpoint shapes** — Standalone lines and arrows (not just object-to-object connectors). 13. **Presentation mode** — Present frames sequentially in fullscreen. 14. **Voting/timer** — Workshop facilitation tools. ### Implementation Plan (This Branch) Focusing on the HIGH PRIORITY items that make the biggest UX difference: 1. **Add shape types**: triangle, star, hexagon, pentagon, cloud, callout — extend `createShapeBg()` in objects.js and the shape picker in toolbar. 2. **Image upload/paste**: Add image drop zone + clipboard paste handler, store as base64 or upload to server, render as Konva.Image. 3. **Alignment/snap guides**: Show alignment guides when dragging objects near edges/centers of other objects. 4. **Object lock toggle**: Add lock button in properties panel, disable dragging when locked. 5. **Layer ordering**: Add context menu items and shortcuts for z-index manipulation. 6. **Cursor presence**: Wire up the existing collab.js stub to actually show remote cursors via WebSocket awareness. Starting implementation alongside performance work on branch `development_5`.
timur commented 2026-04-06 14:09:52 +00:00
Owner
Copy link

Implementation Progress — Miro Feature Parity

Branch: development_5 | Commit: ed01544

Features Implemented

1. Extended Shape Library (4 → 14 types)

New shapes added to createShapeBg() with proper geometric drawing:

  • triangle — equilateral via Konva.Line
  • pentagon — 5-sided regular polygon
  • hexagon — 6-sided regular polygon
  • star — 5-pointed star (inner radius 40%)
  • cloud — organic bezier curves
  • callout — rectangle with bottom-left pointer
  • cylinder — 3D cylinder with top/bottom ellipses
  • parallelogram — 20% skew offset
  • cross — plus/cross shape (1/3 proportions)
  • rounded_rect — rectangle with 12px corner radius

Shape picker dropdown in properties panel updated to show all 14 options.

2. Image Objects

  • Clipboard paste: Ctrl+V detects image data and creates image object at viewport center
  • Drag-and-drop: Drop image files directly onto the canvas
  • Base64 encoding with auto-scaling (max 600px dimension)
  • Loading placeholder while image loads
  • Full serialization support for server persistence (stored in data.src)

3. Snap Alignment Guides

  • 8px snap threshold for alignment
  • Shows horizontal/vertical guide lines when dragging objects near edges/centers of other objects
  • Compares against all other objects' left/center/right and top/middle/bottom
  • Snaps object position when within threshold
  • Guides auto-clear on drag end
  • Attached to all object types (sticky, text, shape, frame, image)

4. Layer Ordering

  • bringToFront() — move selected objects to top of z-stack
  • sendToBack() — move selected objects to bottom
  • moveForward() — move up one position
  • moveBackward() — move down one position
  • All operations sync to server via onUpdate

5. Lock/Unlock Toggle

  • toggleLock() — locks/unlocks selected objects
  • Locked objects become non-draggable
  • Selection is cleared when locking
  • State persists via sync

Files Changed

  • objects.js — 10 new shape types, image support, snap guide wiring
  • properties.js — shape picker expanded
  • tools.js — snap guides, layer ordering, lock toggle
  • app.js — image paste/drop handlers, image type in createObjectFromData
  • sync.js — image type serialization

Remaining Opportunities

  • Rich text editing (markdown → WYSIWYG)
  • More connector styles (curved, elbow)
  • Templates/library panel
  • Comments/annotations on objects
  • Minimap navigation
## Implementation Progress — Miro Feature Parity **Branch:** `development_5` | **Commit:** `ed01544` ### Features Implemented #### 1. Extended Shape Library (4 → 14 types) New shapes added to `createShapeBg()` with proper geometric drawing: - **triangle** — equilateral via Konva.Line - **pentagon** — 5-sided regular polygon - **hexagon** — 6-sided regular polygon - **star** — 5-pointed star (inner radius 40%) - **cloud** — organic bezier curves - **callout** — rectangle with bottom-left pointer - **cylinder** — 3D cylinder with top/bottom ellipses - **parallelogram** — 20% skew offset - **cross** — plus/cross shape (1/3 proportions) - **rounded_rect** — rectangle with 12px corner radius Shape picker dropdown in properties panel updated to show all 14 options. #### 2. Image Objects - **Clipboard paste**: `Ctrl+V` detects image data and creates image object at viewport center - **Drag-and-drop**: Drop image files directly onto the canvas - Base64 encoding with auto-scaling (max 600px dimension) - Loading placeholder while image loads - Full serialization support for server persistence (stored in `data.src`) #### 3. Snap Alignment Guides - 8px snap threshold for alignment - Shows horizontal/vertical guide lines when dragging objects near edges/centers of other objects - Compares against all other objects' left/center/right and top/middle/bottom - Snaps object position when within threshold - Guides auto-clear on drag end - Attached to all object types (sticky, text, shape, frame, image) #### 4. Layer Ordering - `bringToFront()` — move selected objects to top of z-stack - `sendToBack()` — move selected objects to bottom - `moveForward()` — move up one position - `moveBackward()` — move down one position - All operations sync to server via `onUpdate` #### 5. Lock/Unlock Toggle - `toggleLock()` — locks/unlocks selected objects - Locked objects become non-draggable - Selection is cleared when locking - State persists via sync ### Files Changed - `objects.js` — 10 new shape types, image support, snap guide wiring - `properties.js` — shape picker expanded - `tools.js` — snap guides, layer ordering, lock toggle - `app.js` — image paste/drop handlers, image type in createObjectFromData - `sync.js` — image type serialization ### Remaining Opportunities - Rich text editing (markdown → WYSIWYG) - More connector styles (curved, elbow) - Templates/library panel - Comments/annotations on objects - Minimap navigation
timur closed this issue 2026-04-07 14:06:59 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
development
main
v0.1.0-rc3
v0.1.0-rc2
v0.1.0-rc1
v0.1.0
Labels
Clear labels   
prio_critical

   
prio_low

   
type_bug

   
type_contact

   
type_issue

   
type_lead

   
type_question

   
type_story

   
type_task
No labels
prio_critical
prio_low
type_bug
type_contact
type_issue
type_lead
type_question
type_story
type_task
Milestone
Clear milestone
No items
No milestone
now
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
lhumina_code/hero_whiteboard#6
No description provided.