Skip to content

[Feature] Implement interactive "Guided Tour" for Editor #12

Description

@eloiberlinger1

Description

Currently, our tutorial is a simple static modal (/frontend/src/features/editor/components/Tutorial.tsx).

-> We want to replace it with an interactive experience that triggers the first time a user opens the editor.

Goals

  • Implement a tutorial that will be shown at the first opening of the editor.

  • The tour should highlight/point to the canvas while explaining:
    Left Click: Rotate view.
    Right Click / Shift+Click: Move the view.
    Scroll: Zoom.

Technical Suggestions

You are free to propose a solution, but we suggest looking into:

React Joyride or Driver.js for the guided tour logic.

Files involved

Old tutorial file :
/frontend/src/features/editor/components/Tutorial.tsx

const controls = [
  { key: "Clic gauche", action: "Tourner la vue" },
  { key: "Clic droit / Ctrl + Clic", action: "Déplacer latéralement (pan)" },
  { key: "Molette", action: "Zoomer / Dézoomer" },
  { key: "Double clic", action: "Centrer le modèle" },
];

Any questions ?
https://discord.gg/BdyfNU9TpR

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions