Presentation mode for frames #916

maheichyk · 2025-10-30T16:57:28Z

Enables frames overview and provides a presentation mode for the frames:

✔️ Checklist

A changeset describing the change and affected packages (more info).
Added or updated documentation.
Tests for new functionality and regression tests for bug fixes.
Screenshots or videos attached (for UI changes).
All your commits have a Signed-off-by line in the message (more info).

changeset-bot · 2025-10-30T16:57:32Z

🦋 Changeset detected

Latest commit: 15d068c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@nordeck/matrix-neoboard-react-sdk	Patch
@nordeck/matrix-neoboard-widget	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

mgcm

Overall looks reasonable but I did add a few code comments for review.

Also, not related to code but to how things are implemented:

it's very very slow when loading my MC'25 contents (30+ slide), opening and closing the sidebar takes a few seconds, as well as selecting a frame from the sidebar to zoom on it (see my comment on maybe not reusing SvgCanvas for previews)
the sidebar button is not show if there are no frames: I think we can show the sidebar and have helper text there that says "Please add a frame first to manage your presentation", maybe even keep the "Add frame" button (see code comment about this).
more importantly, the presentation button should be hidden if there are no frames, or at least show a modal that also informs you that you need to add frames to present
adding a frame near the left border is not doing a nice layout, it maybe needs to change line and start below on the right, if there is space available? to replicate, just keep adding frames in a blank whiteboard until they hit the left border.

mgcm · 2025-11-14T13:12:04Z

.changeset/ripe-lizards-relax.md

@@ -0,0 +1,6 @@
+---
+'@nordeck/matrix-neoboard-react-sdk': patch


not sure if patch or minor - we're not adding a feature to the app but we're enabling an existing feature to a new interaction model...

mgcm · 2025-11-14T13:49:14Z

packages/react-sdk/src/components/SlideOverviewBar/SlideListItem.tsx

 export type SlideListItemProps = {
-  slideId: string;
+  slideOrFrameId: string;
  slideIndex: number;


why change slideId and keep slideIndex ? also it's the SlideListItemProps...

mgcm · 2025-11-14T13:59:51Z

packages/react-sdk/src/components/SlideOverviewBar/SlideOverviewBar.tsx

-      <Box m={1}>
-        <AddSlideButton />
-      </Box>
+      {!isInfiniteCanvasMode() && (


Why disable the add slide button? Could we not add an empty frame to the canvas and centre on it, ready to add content?

mgcm · 2025-11-17T13:10:26Z

packages/react-sdk/src/components/Whiteboard/ElementBehaviors/Selection/ElementBarWrapper.tsx

  const position = useMemo(() => {
    const pointOnSvg = { x, y };
-    const elementOnContainer = transformPointSvgToContainer(pointOnSvg);
+    let elementOnContainer = transformPointSvgToContainer(pointOnSvg);


I don't get how these changes in the ElementBarWrapper are relevant within the context of this PR.

Are you fixing an unrelated bug? or what am I missing?

mgcm · 2025-11-17T13:24:50Z

packages/react-sdk/src/components/Whiteboard/SvgCanvas/SvgCanvas.tsx

+    containerDimensionsRef,
+  ]);
+
+  useEffect(() => {


I've experienced severe slowness when having a board with many slides. Reusing SvgCanvas for frame previews and the full canvas is starting to feel a bit weird. A preview canvas won't be infinite, so reusing the same component doesn't seem optimal.

mgcm · 2025-11-17T15:18:40Z

packages/react-sdk/src/components/Whiteboard/SvgCanvas/SvgCanvas.tsx

+        containerDimensions.width > 0 &&
+        containerDimensions.height > 0
+      ) {
+        const { position, scale } = calculatePositionAndScaleForElement(


we could abstract this block to yet another function with a name that is more expressive, such as zoomToElement or zoomOnElement or zoomFitToElement, which expresses more clearly what's going on and could be reused on other use cases, such as:

URL deep links to elements

"center on element" feature

"follow cursor" feature

no strong feelings, just an opinion.

mgcm · 2025-11-17T15:21:01Z

packages/react-sdk/src/locales/de/neoboard.json

      "pdfError": "Bei der Erstellung des PDFs ist ein Fehler aufgetreten.",
      "title": "Inhalt exportieren"
    },
+    "hideFrameBarTitle": "Close frame overview",


missing translations in this file?

Suggested change

"hideFrameBarTitle": "Close frame overview",

"hideFrameBarTitle": "Rahmenübersicht schließen",

mgcm · 2025-11-17T16:01:46Z

packages/react-sdk/src/state/presentationManagerImpl.ts

  }

-  startPresentation(): void {
+  startPresentation(activeFrameElementId?: string): void {


There are no new tests for starting a presentation with a frame - should we not include that as well?

HarHarLinks

technically some of these could be refactored to deduplicate :P

i hope applying the proposed changes via the review might confuse doesn't confuse the hell out of the i18n framework.

HarHarLinks · 2025-11-17T17:19:26Z

packages/react-sdk/src/locales/de/neoboard.json

      "pdfError": "Bei der Erstellung des PDFs ist ein Fehler aufgetreten.",
      "title": "Inhalt exportieren"
    },
+    "hideFrameBarTitle": "Close frame overview",


Suggested change

"hideFrameBarTitle": "Close frame overview",

"hideFrameBarTitle": "Rahmenübersicht schließen",

HarHarLinks · 2025-11-17T17:19:41Z

packages/react-sdk/src/locales/de/neoboard.json

      "import": "Importieren…",
      "title": "Einstellungen"
    },
+    "showFrameBarTitle": "Open frame overview",


Suggested change

"showFrameBarTitle": "Open frame overview",

"showFrameBarTitle": "Rahmenübersicht öffnen",

HarHarLinks · 2025-11-17T17:20:13Z

packages/react-sdk/src/locales/de/neoboard.json

+    "nextFrame": "Next frame",
    "nextSlide": "Nächste Folie",
+    "previousFrame": "Previous frame",


Suggested change

"nextFrame": "Next frame",

"nextSlide": "Nächste Folie",

"previousFrame": "Previous frame",

"nextFrame": "Nächster Rahmen",

"nextSlide": "Nächste Folie",

"previousFrame": "Vorheriger Rahmen",

HarHarLinks · 2025-11-17T17:22:06Z

packages/react-sdk/src/locales/de/neoboard.json

    "dragAndDrop": {
      "dragInstructions": "Drücke die M-Taste um diese Folie zu verschieben. Während des Verschiebens, nutze die Pfeiltasten um den Eintrag zu verschieben und Escape um es abzubrechen. Stelle sicher das dein Screen Reader im Fokus oder Formular Modus ist.",
      "dragStart": "Du hast eine Folie aufgehoben. Sie befindet sich an Position {{startPosition}} von {{totalCount}} in der Liste. Nutze die Pfeiltasten zum verschieben, die M-Taste zum Ablegen und Escape zum Abbrechen.",
+      "dragStart_frame": "You have lifted a frame. It is in position {{startPosition}} of {{totalCount}} in the list. Use the arrow keys to move, the M key to drop, and escape to cancel.",


Suggested change

"dragStart_frame": "You have lifted a frame. It is in position {{startPosition}} of {{totalCount}} in the list. Use the arrow keys to move, the M key to drop, and escape to cancel.",

"dragStart_frame": "Du hast einen Rahmen aufgehoben. Er befindet sich an Position {{startPosition}} von {{totalCount}} in der Liste. Nutze die Pfeiltasten zum verschieben, die M-Taste zum Ablegen und Escape zum Abbrechen.",

HarHarLinks · 2025-11-17T17:22:29Z

packages/react-sdk/src/locales/de/neoboard.json

      "dragStart": "Du hast eine Folie aufgehoben. Sie befindet sich an Position {{startPosition}} von {{totalCount}} in der Liste. Nutze die Pfeiltasten zum verschieben, die M-Taste zum Ablegen und Escape zum Abbrechen.",
+      "dragStart_frame": "You have lifted a frame. It is in position {{startPosition}} of {{totalCount}} in the list. Use the arrow keys to move, the M key to drop, and escape to cancel.",
      "dropped": "Du hast die Folie abgelegt. Sie wurde von Position {{startPosition}} nach {{destinationPosition}} verschoben.",
+      "dropped_frame": "You have dropped the frame. It has moved from position {{startPosition}} to {{destinationPosition}}.",


Suggested change

"dropped_frame": "You have dropped the frame. It has moved from position {{startPosition}} to {{destinationPosition}}.",

"dropped_frame": "Du hast den Rahmen abgelegt. Er wurde von Position {{startPosition}} nach {{destinationPosition}} verschoben.",

HarHarLinks · 2025-11-17T17:23:19Z

packages/react-sdk/src/locales/de/neoboard.json

      "dropped": "Du hast die Folie abgelegt. Sie wurde von Position {{startPosition}} nach {{destinationPosition}} verschoben.",
+      "dropped_frame": "You have dropped the frame. It has moved from position {{startPosition}} to {{destinationPosition}}.",
      "droppedOnNoDropTarget": "Du hast die Folie abgelegt während du nicht über einer gültigen Ablagestelle gewesen bist. Die Folie ist zu ihrer ursprünglichen Position {{startPosition}} zurückgekehrt.",
+      "droppedOnNoDropTarget_frame": "The frame has been dropped while not over a location. The frame has returned to its starting position of {{startPosition}}.",


Suggested change

"droppedOnNoDropTarget_frame": "The frame has been dropped while not over a location. The frame has returned to its starting position of {{startPosition}}.",

"droppedOnNoDropTarget_frame": "Du hast den Rahmen abgelegt während du nicht über einer gültigen Ablagestelle gewesen bist. Der Rahmen ist zu seiner ursprünglichen Position {{startPosition}} zurückgekehrt.",

HarHarLinks · 2025-11-17T17:23:38Z

packages/react-sdk/src/locales/de/neoboard.json

      "droppedOnNoDropTarget": "Du hast die Folie abgelegt während du nicht über einer gültigen Ablagestelle gewesen bist. Die Folie ist zu ihrer ursprünglichen Position {{startPosition}} zurückgekehrt.",
+      "droppedOnNoDropTarget_frame": "The frame has been dropped while not over a location. The frame has returned to its starting position of {{startPosition}}.",
      "movedPosition": "Du hast die Folie zu Position {{position}} von {{totalCount}} verschoben.",
+      "movedPosition_frame": "You have moved the frame to position {{position}} of {{totalCount}}.",


Suggested change

"movedPosition_frame": "You have moved the frame to position {{position}} of {{totalCount}}.",

"movedPosition_frame": "Du hast den Rahmen zu Position {{position}} von {{totalCount}} verschoben.",

missing translation on line 303 for "droppedOnNoDropTarget_frame"?

HarHarLinks · 2025-11-17T17:24:18Z

packages/react-sdk/src/locales/de/neoboard.json

      "movedPosition": "Du hast die Folie zu Position {{position}} von {{totalCount}} verschoben.",
+      "movedPosition_frame": "You have moved the frame to position {{position}} of {{totalCount}}.",
      "movementCanceled": "Verschieben abgebrochen. Die Folie ist zu ihrer ursprünglichen Position {{startPosition}} zurückgekehrt.",
+      "movementCanceled_frame": "Movement cancelled. The frame has returned to its starting position of {{startPosition}}.",


Suggested change

"movementCanceled_frame": "Movement cancelled. The frame has returned to its starting position of {{startPosition}}.",

"movementCanceled_frame": "Verschieben abgebrochen. Der Rahmen ist zu seiner ursprünglichen Position {{startPosition}} zurückgekehrt.",

HarHarLinks · 2025-11-17T17:24:32Z

packages/react-sdk/src/locales/de/neoboard.json

+    "frameListTitle": "Frames",
+    "frameTitle": "Frame",


Suggested change

"frameListTitle": "Frames",

"frameTitle": "Frame",

"frameListTitle": "Rahmen",

"frameTitle": "Rahmen",

HarHarLinks · 2025-11-17T17:25:14Z

packages/react-sdk/src/locales/de/neoboard.json

    "slideTitleLocked": "(gesperrt)",
-    "title": "Folienübersicht"
+    "title": "Folienübersicht",
+    "title_frame": "Frame Overview"


Suggested change

"title_frame": "Frame Overview"

"title_frame": "Rahmenübersicht"

maheichyk force-pushed the nic/feat/NEO-1605-frame-presentation branch 2 times, most recently from 60d24d1 to a262d2a Compare October 31, 2025 05:21

maheichyk marked this pull request as ready for review October 31, 2025 05:52

maheichyk requested a review from a team as a code owner October 31, 2025 05:52

maheichyk force-pushed the nic/feat/NEO-1605-frame-presentation branch from eb11fee to aa7d217 Compare November 5, 2025 06:20

maheichyk added 2 commits November 14, 2025 11:26

Presentation mode for frames

36ace5e

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

Fix preview for standalone

a2367b5

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

mgcm force-pushed the nic/feat/NEO-1605-frame-presentation branch from 34fe4b0 to a2367b5 Compare November 14, 2025 12:26

mgcm reviewed Nov 17, 2025

View reviewed changes

HarHarLinks reviewed Nov 17, 2025

View reviewed changes

Merge branch 'main' into nic/feat/NEO-1605-frame-presentation

15d068c

		@@ -0,0 +1,6 @@
		---
		'@nordeck/matrix-neoboard-react-sdk': patch

	"hideFrameBarTitle": "Close frame overview",
	"hideFrameBarTitle": "Rahmenübersicht schließen",

	"showFrameBarTitle": "Open frame overview",
	"showFrameBarTitle": "Rahmenübersicht öffnen",

	"dragStart_frame": "You have lifted a frame. It is in position {{startPosition}} of {{totalCount}} in the list. Use the arrow keys to move, the M key to drop, and escape to cancel.",
	"dragStart_frame": "Du hast einen Rahmen aufgehoben. Er befindet sich an Position {{startPosition}} von {{totalCount}} in der Liste. Nutze die Pfeiltasten zum verschieben, die M-Taste zum Ablegen und Escape zum Abbrechen.",

	"dropped_frame": "You have dropped the frame. It has moved from position {{startPosition}} to {{destinationPosition}}.",
	"dropped_frame": "Du hast den Rahmen abgelegt. Er wurde von Position {{startPosition}} nach {{destinationPosition}} verschoben.",

	"droppedOnNoDropTarget_frame": "The frame has been dropped while not over a location. The frame has returned to its starting position of {{startPosition}}.",
	"droppedOnNoDropTarget_frame": "Du hast den Rahmen abgelegt während du nicht über einer gültigen Ablagestelle gewesen bist. Der Rahmen ist zu seiner ursprünglichen Position {{startPosition}} zurückgekehrt.",

	"movedPosition_frame": "You have moved the frame to position {{position}} of {{totalCount}}.",
	"movedPosition_frame": "Du hast den Rahmen zu Position {{position}} von {{totalCount}} verschoben.",

	"movementCanceled_frame": "Movement cancelled. The frame has returned to its starting position of {{startPosition}}.",
	"movementCanceled_frame": "Verschieben abgebrochen. Der Rahmen ist zu seiner ursprünglichen Position {{startPosition}} zurückgekehrt.",

	"title_frame": "Frame Overview"
	"title_frame": "Rahmenübersicht"

Presentation mode for frames #916

Are you sure you want to change the base?

Presentation mode for frames #916

Uh oh!

Conversation

maheichyk commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

mgcm left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HarHarLinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

maheichyk commented Oct 30, 2025 •

edited

Loading

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

mgcm left a comment •

edited

Loading