--- title: "Canvas et contenus visuels" url: https://developers.dagio.ai/fr/canvas/ --- # Canvas et contenus visuels ## Créer une Surface Choisissez **Page**, **Slide** ou **Board**, puis un template. **Document** démarre une Page avec un composant Rich text pleine largeur et sa toolbar de mise en forme. **Blank Page** démarre une pile vide. Le template fournit le contenu initial; les deux utilisent la même Surface et ses modes View, Edit et Layout. Le layout reste fixe après la création. ## Composer une Page Utilisez **Layout** pour organiser les blocs d’une Page. Un Layout propose **2 columns**, **3 columns** ou **Main + right column**. Ses choix illustrés s’adaptent à la largeur disponible sans barre de défilement interne. Le Layout sélectionné affiche des repères de colonnes gris pâle. Déplacez un bloc par sa poignée vers une autre colonne, même vide, ou avant/après un autre bloc; les permissions du Model courant restent appliquées. Les colonnes et la pile de la Page se réorganisent automatiquement. Un Board inséré dans une Page possède une poignée de hauteur en bas. Faites-la glisser pour modifier sa hauteur sans étirer son contenu. Les autres blocs conservent leur hauteur automatique. Cliquez dans un espace vide hors du contenu pour désélectionner; les outils et menus du bloc conservent leur cible. ## Choisir un Canvas Choisissez un outil, puis cliquez la planche pour placer son objet à cet endroit. Le curseur en croix indique le placement; **Échap** l'annule sans créer d'objet. Pour une forme, une note ou une image, choisissez d'abord la forme, la couleur ou l'image, puis cliquez la planche. **Draw** garde son geste de dessin à main levée. Le cadre du texte suit ses dimensions pendant l'édition. Les listes conservent police, taille, couleur et alignement pour le texte et ses marqueurs. Les styles peuvent être activés puis retirés sans rouvrir le menu; **No list** retire la liste. Les nouveaux textes ont une opacité de fond de 0 % et un poids de contour de 2, dans les limites du Model. Les outils d'ajout restent disponibles sans sélection et avec plusieurs objets sélectionnés. Faites défiler la barre de gauche si ses outils dépassent la hauteur disponible. Les outils admis dépendent du Model du board; sélectionner un objet ne change pas ses capacités d'insertion. **Audio**, **Video** et **Map** ajoutent des cartes de lien. Cliquez une carte vide ou double-cliquez pour saisir son URL; **Edit media** modifie URL, titre et description. Audio accepte Spotify et SoundCloud, Video accepte YouTube et Vimeo, et Map accepte les lieux/recherches Google Maps, y compris les liens courts partagés. Le titre audio/vidéo vient du fournisseur et reste éditable. **Play** ou **Interact with map** active le lecteur; **Finish interaction** rend les gestes au board. Google Maps place/search nécessite la configuration Maps Embed par l'administrateur. Les restrictions d'intégration du fournisseur s'appliquent. Les exports statiques conservent texte et lien source, sans lecteur interactif. **Image** ouvre un menu à côté de la barre verticale, aligné en bas. La recherche Unsplash part automatiquement après la saisie; **Upload your own** importe un fichier local. Choisissez une photo, puis cliquez la planche pour la placer. Survolez l’image ou donnez le focus à son contrôle de crédit pour faire apparaître l’icône d’information dans le coin. Cliquez-la pour ouvrir les crédits du photographe et d’Unsplash avec leurs liens; un clic extérieur ou Échap ferme le popup. Unsplash nécessite une configuration serveur. **Image settings**, juste avant **Position**, contient **Show caption**; la masquer conserve son contenu. Image et caption partagent un seul cadre de sélection; le double-clic sur la caption édite son texte. **Replace image** rouvre le sélecteur en conservant la légende et le cadre. Crop, Rotate left et les deux flips sont des icônes directes de toolbar. Le recadrage se fait sur l’image dans la planche, avec ses poignées et une petite barre au-dessus. Le zoom agrandit la photo dans un cadre de crop fixe. Les formats sont Original, Square, Circle, Landscape, Portrait et Wide. La légende horizontale suit la largeur visible après crop ou rotation. Le redimensionnement conserve les proportions, avec ou sans légende. Utilisez les poignées d’angle; les poignées latérales sont masquées et Maj ne permet pas de déformer la photo. Apply confirme; Cancel ou Échap abandonne. Le fichier original reste intact. **Draw** ouvre le dessin à main levée. Choisissez le stylet, la sélection ou la gomme de traits entiers, puis réglez couleur et largeur. Undo/redo agit sur le brouillon. **Save** l'applique en une action Canvas; **Cancel** l'abandonne. Terminez ou annulez le brouillon avant de sauvegarder la Surface. Draw apparaît si le Model admet ses chemins vectoriels, groupes et styles de contour. **Table** crée un tableau libre éditable sur la planche. Le double-clic édite les cellules; les repères lettres/chiffres sélectionnent colonnes et lignes. Sa toolbox dédiée gère les couleurs d'en-tête, de grille, de fond et de cellule, les polices/styles, l'alignement horizontal (gauche/centre/droite) et vertical (haut/milieu/bas), les types, l'ajout et la suppression de lignes/colonnes, puis titre et caption optionnels. Les types incluent texte, nombre, devise, pourcentage, date ISO/date-heure UTC et checkbox. Le format conserve la valeur saisie; 0.25 donne 25 %. Ces tables ne modifient aucun Field métier et ne calculent pas de formules. Limites : 40 lignes, 20 colonnes et 400 cellules. En mode Board, activez **Double-click to add a sticky note** dans **Surface settings** pour créer une note à la position du pointeur sur une zone vide. Ce réglage de session est désactivé au départ; le double-clic sur un objet conserve son édition. Les droits du Model et protections s'appliquent. **Sticky note** permet de choisir un fond coloré et d'éditer le texte directement dans une note sans bordure. Le formatage par caractères réutilise les outils des shapes. **Show author** affiche le créateur lorsque le host a fourni son identité. **Add emoji** ouvre le sélecteur partagé avec recherche; les pills montrent le nombre de participants et basculent votre réaction. Ces actions personnelles exigent un participant authentifié. Le host local à clé de service sauvegarde actuellement les notes anonymes uniquement. **Color** ajoute une carte avec aplat, code hexadécimal et nom proposé selon la couleur. Double-cliquez pour personnaliser le nom. La toolbar contient la couleur et les réactions emoji. Dans le menu Color, **Generate linked palette** crée douze cartes autour de la source : elles suivent ses changements de couleur, tout en conservant leurs noms personnalisés. **Automatic color name** rétablit le nom automatique. **Make independent** détache une carte; **Make palette independent** détache la palette avant de supprimer la source. Les réactions exigent une identité personnelle fournie par le host. Un Canvas est un contenu Surface pour organiser visuellement des éléments, des notes et des références. Utilisez-le pour préparer un atelier client ou organiser les idées d’une proposition. Une vue graphe, elle, représente les relations d’objets existants. | Élément | Valeur attendue | Rôle | | --------------- | ------------------------------------- | ------------------------------------ | | Document Canvas | Format natif et version admise | Conserver le contenu spatial | | Éléments | Identités, géométrie et contenu typés | Composer le visuel | | Références | Objets autorisés | Relier le visuel aux contenus métier | | Politique | Capacités admises par le Model | Encadrer les changements | ## Exemple Créez un Canvas **Préparation Atelier Nord** avec une zone Besoins, une zone Contraintes et un lien vers la fiche Client. Les positions appartiennent au Canvas. Le lien conserve l’identité du client; déplacer sa représentation ne déplace pas le client dans un autre Workspace. ## Conserver le format natif Le contrôle de police affiche la famille choisie. Recherchez dans le catalogue Google Fonts complet embarqué ou filtrez par catégorie. La liste est statique : son ouverture n'interroge ni le workspace ni un service de polices. Le CSS statique et les fichiers de police se chargent uniquement pour les familles utilisées dans la Surface ou les aperçus visibles. Le Model déclare les familles et leurs variantes réelles. Une face indisponible est signalée explicitement. **Checklist** insère un objet texte natif avec des tâches cochables. Double-cliquez pour l'éditer. **Checklist settings → Show title** contrôle son titre facultatif. Glissez une tâche par sa poignée pour la réordonner; les flèches Haut/Bas sur la poignée offrent la même commande au clavier. L'état coché et les styles du texte suivent leur tâche. Relâchez une connexion dans le vide pour choisir sa cible : **Add the same object**, texte ou forme. **Shapes** et **More shapes** partagent un catalogue recherchable avec catégories repliables : Basic shapes, Flowchart, Callouts, UML, Data Flow et Wireframes & app mockups. Le menu Shapes compact s'ouvre en haut de la barre verticale; seules ses catégories défilent. La gestion des packs est masquée pour le moment. Les packs Marketplace et les imports sont prévus. Les wireframes sont des stencils vectoriels éditables, pas des contrôles applicatifs interactifs. Un Model existant peut activer les packs vectoriels dans les réglages Canvas du Builder. **More shapes** ouvre le catalogue natif avec recherche par nom ou catégorie. Le choix crée ensemble l'objet et son lien; Escape ou un clic à l'extérieur annule sans ajouter d'objet. Ouvrez **Object connections** dans la barre du bas et activez les connexions pour afficher les quatre ports de l'objet sélectionné. Survolez un port pour prévisualiser le placement, cliquez pour créer une copie liée ou glissez vers un objet existant pour les connecter. Les copies successives occupent des positions libres du côté choisi sans déplacer les objets existants. Les connecteurs attachés reprennent les outils Line; leurs routings admis se choisissent dans **Line type**. Ce sont des connexions graphiques à l'intérieur de la Surface. Pour une ligne libre, le rond de couleur règle la couleur et l'opacité du trait; **Line type** règle son style et sa largeur. **Line start** et **Line end** proposent flèches, cercles, losanges, barres et terminaisons de cardinalité; **Swap line ends** les échange. Le bouton texte ou le double-clic ouvre la légende centrée sur la ligne. Sa toolbar texte remplace celle de la ligne et reprend les styles par caractères des shapes. Double-cliquez un bloc texte pour écrire directement dedans. Sa toolbar unique rassemble les styles des caractères, la couleur du texte, l'alignement gauche/centre/droite, les listes à puces ou numérotées, le fond, la bordure et Position. Les caractères peuvent conserver des polices, tailles, couleurs et styles différents. Ouvrez **Réglages avancés du texte** pour l'espacement des lettres et des lignes, avec curseurs et valeurs numériques. Cliquez à l'extérieur ou pressez **Escape** pour terminer. Le bloc peut grandir en hauteur pour contenir sa saisie; l'ouverture et la fermeture sans modification n'enregistrent pas de nouvelle révision. Pour ajouter une image, choisissez sa destination déclarée et renseignez les informations demandées. Les fichiers PNG et JPEG sont limités à 5 Mio; le Model peut imposer une limite plus petite. L’image est un contenu indépendant : les accès du Canvas ne lui sont pas transférés. Si la saisie en cours ne peut pas être conservée, gardez le Canvas ouvert et réglez cette saisie avant de reprendre le choix d’image. Si le formulaire de destination demande une référence, recherchez et choisissez la fiche autorisée dans ce formulaire. Le choix reste en attente avec les autres informations de l’image; il est enregistré lors de la même confirmation, pas par une modification de relation séparée. Une référence requise doit être résolue avant l’aperçu. Vous ne pouvez retirer une référence que si le formulaire propose explicitement cette absence. Si la création de l’image n’est pas confirmée, reprenez la même demande sans remplacer le fichier ni créer une autre image. Lorsque la création est confirmée mais que l’insertion échoue, reprenez seulement l’insertion de l’image enregistrée. Créer l’image, insérer sa référence dans le Canvas et enregistrer ce placement sont des étapes distinctes; une image enregistrée ne confirme pas, à elle seule, l’enregistrement de son placement dans le Canvas. Dans **Ressources**, utilisez **Rechercher des ressources** pour trouver un composant ou une bibliothèque accessible. Si une recherche, une page suivante, une lecture de source ou son aperçu échoue, **Réessayer** reprend cette même lecture. Le nouveau texte que vous saisissez n’est pas soumis par cette reprise : utilisez **Rechercher des ressources** pour lancer une nouvelle recherche. Une bibliothèque ne donne pas accès aux composants qu’elle référence. Pour une instance sélectionnée, la recherche de ressources indique si la source observée correspond à sa Revision utilisée ou propose une autre Revision à examiner. Une source absente de cette page n'est pas déclarée supprimée ou inaccessible. Lire une autre Revision du même composant conserve vos paramètres et votre variante pour la revue explicite; cette lecture n'applique pas la mise à jour et n'enregistre pas le Canvas. L’option **Aligner sur les guides** du menu Grid settings est désactivée au départ. Lorsqu’elle est active, un déplacement peut s’aligner sur les bords ou centres de la page et des objets. Maintenez **Alt** pour un geste libre. Les guides restent locaux à l’éditeur; ils ne créent aucun objet et n’enregistrent pas de disposition. Agrandissez une frame avec ses poignées ou ses dimensions dans **Position**. Un réglage manuel active la taille fixe : les objets gardent leurs dimensions et le Layout peut les réaligner, sauf si l'ajustement à la largeur de colonne est actif. Le menu **Frame** du conteneur sélectionné propose un titre optionnel et **Minimize**, qui masque le contenu sans le supprimer. **Arrangement → Column** empile les objets et active **Fit objects to column width**. Déposez un objet dans un cadre automatique pour l'insérer ou le réordonner. Les frames imbriqués forment des rangées avec leurs propres fonds et bordures via les outils existants de couleur et de bordure. Les images gardent leurs proportions; les objets épinglés, les objets pivotés et les lignes conservent leur géométrie. Sortir un objet non épinglé d'un cadre en Layout automatique le détache sur la planche. Il conserve sa position et ne suit plus ce cadre. L'opération exige le droit de déplacement entre conteneurs; les groupes et les objets épinglés conservent leur appartenance. Dans un Layout automatique, un déplacement restant à l'intérieur retrouve immédiatement sa position calculée. Le menu **Grid settings** regroupe les toggles **Show grid**, **Snap to grid** et **Snap to objects**. La grille affiche des points. Son pas est réglable de 4 à 200 unités de la planche. Maintenez **Alt** pour déplacer librement un objet. Un alignement d'objet trouvé prend priorité sur son axe; la grille s'applique aux axes sans alignement d'objet. Ces réglages sont locaux à la session; ils ne font pas partie du document ni de ses exports. La sauvegarde conserve le cadrage courant de la planche. **Select** active ou désactive la sélection et l'édition autorisée des objets. Désactivé, le curseur main déplace uniquement la Surface, même en partant d'un objet. Insérer un objet réactive Select. La toolbar de l'objet sélectionné flotte en haut de la Surface. **Page** et **Layout** restent dans la barre basse. Layout ouvre au-dessus un menu décalé de cartes illustrées, borné à la Surface visible, pour la page active ou son conteneur sélectionné. Les couleurs de remplissage, texte, fond de texte et contour proposent un sélecteur de couleur, un champ hexadécimal et la palette. **Border color** règle aussi l'opacité du contour indépendamment du remplissage et de l'objet. Son icône garde une couleur fixe. Les menus shape/texte s'ouvrent centrés sous leur icône, avec des titres semi-gras et espacés. Le bouton de style affiche un B italique souligné. Le petit menu sous l'objet aligne son bord droit sur celui de l'objet. Il propose le verrouillage, la duplication, la suppression et **More**; le cadenas montre l'état courant. More et le clic droit ouvrent les mêmes actions. **Layer**, **Align to page** et **Tag** ouvrent leur sous-menu à côté, à droite ou à gauche selon l'espace disponible. **Show layers** ouvre la liste des objets dans le panneau Position. Les pastilles de tags sont gris pâle, sous le bord gauche de l'objet. **Align to page** utilise les dimensions réelles de la page, dont le contour reste visible sur la planche. Un enfant placé par un Layout automatique doit rester géré par ce Layout, sauf s'il est épinglé. **Fit surface** cadre la page; la molette zoome autour du pointeur. **Copy/Paste** copie les objets dans la même Surface, avec de nouvelles identités. Si la source copiée a changé, copiez-la à nouveau. Le collage depuis une autre Surface n'est pas disponible. **Board** affiche une planche libre sans contour de page. Les dimensions, l'alignement à la page et la pagination sont désactivés; **Fit surface** cadre les objets. **Pages** réactive le cadre, les dimensions et la gestion des pages. Changer de format conserve les objets et leurs positions. Le changement est disponible pour un contenu à une seule page; avec plusieurs pages, revenez explicitement à une seule page avant de choisir Board. Aucune page n'est masquée ou supprimée par ce choix. En vue agrandie, **Position** reste disponible en overlay à droite. Dans une fiche, **Surface settings** regroupe le format Board/Pages et les Fields. Le menu **Page** conserve les dimensions et le fond de la page active. Utilisez l'icône **Links** pour ouvrir les relations et les liens d'application existants; sa fermeture restitue Surface settings. Pour les fiches Data, **Graph** est proposé lorsqu'une vue Canvas est activée dans le Model. Il montre la capture autorisée de cette Query et indique si elle est bornée; il ne représente pas tout le Workspace. Les espaces Knowledge et Content conservent leurs capacités Links/Graph déclarées. Pour les formes, le rond de remplissage, les réglages de bordure et son bouton de couleur distinct appartiennent à la barre de shape. **Position** ouvre le panneau d'objet à droite à la place de Fields; sa fermeture restitue Fields. Double-cliquez une forme pour éditer son texte directement. La barre de texte remplace celle de shape au même emplacement : police, taille, styles des caractères et couleur du texte. L'alignement du texte appartient à la barre de shape. Les barres supérieure, latérale et basse utilisent une présentation compacte. Pendant l'édition du texte d'une forme, le glisser sélectionne les caractères, même en partant d'une sélection existante. Il ne déplace pas le texte vers un autre objet. Le double-clic sélectionne un mot entier. Le menu **Page** propose un sélecteur de couleur pour le fond et la palette de couleurs. Le menu de pourcentage conserve uniquement le zoom et le cadrage **Fit surface**. Lorsque votre Model admet les composants composés, leur définition peut déclarer des composants imbriqués et des zones de contenu nommées. Chaque zone limite les types d’objets natifs ainsi que le minimum et le maximum de contenus. Lisez la source exacte du composant avant de modifier une zone; déplacer un objet rédigé sélectionné ou vider une zone reste une édition explicite du Canvas. Une mise à jour conserve les contenus rédigés compatibles et refuse une zone remplie supprimée ou incompatible au lieu de la vider silencieusement. Chaque source imbriquée conserve ses propres conditions d’accès, ses objets protégés et sa typographie. Un paramètre, une variante ou une personnalisation du composant extérieur ne peut pas contourner la protection d’un composant intérieur. Lorsque le Model le permet, **Sources de la sélection** relie une région à une Surface, à une Anchor précise ou à une Query déclarée du contexte ouvert. Examinez les sources avant de confirmer : leurs Revisions et le snapshot de Query sont conservés explicitement. L’observation de fraîcheur ne remplace aucun pin et ne déclare pas une source supprimée. La confirmation conserve le contenu que vous avez rédigé; elle ne régénère pas une synthèse ni les autres régions. Supprimer une région source retire également son contenu, pas seulement sa provenance. Pour un tableau ou un graphique relié à une Query, les colonnes proposées viennent des champs scalaires réellement disponibles sur ses lignes sélectionnées. Une sélection vide ne reçoit pas de colonnes inventées. Les noms identiques issus de Models ou de définitions différents restent distincts. Examinez l’aperçu natif avant de confirmer : un snapshot conserve ses valeurs et leurs sources, tandis qu’une vue live relit les mêmes liens sous les droits courants sans modifier les valeurs métier. Dans **Tableau et graphique liés**, sélectionnez un groupe vide déjà enregistré, de disposition libre et de taille fixe. Saisissez la Query déclarée et ses paramètres typés, puis lisez les colonnes natives avant de les choisir. Les catégories, séries et bornes d’un graphique sont explicites; les bornes décimales conservent le format et l’unité de la série, sans conversion approximative. Examinez les lignes reçues avant de confirmer l’objet. Les valeurs métier se modifient dans leurs Forms et Batch, pas dans des cellules copiées du Canvas. Une vue live ne signifie pas une mise à jour ou une coédition en temps réel. La duplication d’une sélection complète ou d’une page conserve ses composants, zones rédigées, régions de sources et objets de données ensemble. Les nouvelles identités appartiennent à la copie; les références et snapshots restent ceux réellement retenus. Copier une partie d’une instance ne la détache pas silencieusement. Une modification avant la copie est conservée dans l’intention exacte, puis les accès et sources sont vérifiés à nouveau lors de la sauvegarde. Les blocs de texte riche conservent leurs paragraphes, listes et mises en forme admises. Appliquez ou annulez la saisie ouverte avant d’enregistrer ou d’exporter le Canvas; une structure incompatible n’est pas remplacée silencieusement par du texte brut. Enregistrer conserve l’historique local. Annuler ou rétablir un geste réutilise le contenu enregistré courant; si cette commande nécessite une ancienne preuve source indisponible, elle est refusée explicitement sans effacer la pile. Une copie n’accorde aucun accès supplémentaire aux sources citées et ne transforme pas un snapshot en données recalculées. **Réessayer** ne répète ni insertion, ni configuration, ni détachement, ni sauvegarde. Après un refus de modification, examinez le Canvas actuel et sa configuration avant de poursuivre; le message n’est pas une confirmation de sauvegarde. Enregistrez d’abord la Surface avant d’examiner une autre version source. Le moteur Canvas possède l’édition, la sélection, le viewport et les opérations de contenu. Une composition d’app l’intègre comme éditeur natif. Les exports et modifications effectués par un outil respectent le même format et les mêmes permissions. La [référence des formats natifs](https://developers.dagio.ai/fr/native-formats/) donne accès aux types de contenu et aux politiques; la [vue graphe](https://developers.dagio.ai/fr/graphs/) documente la visualisation des relations métier. ## Coéditer un Canvas Dans une session de coédition autorisée, vous pouvez modifier des objets ou des attributs indépendants sans remplacer les contributions de vos collègues. Si deux modifications touchent le même attribut, ou si le parent, le verrou ou la disposition nécessaire a changé, Surface signale le conflit et demande une révision explicite. Un conflit n'est pas une sauvegarde. Annuler compense votre propre modification; cela ne restaure pas toute la scène. Les autres attributs et personnalisations restent conservés. Si votre modification ne peut plus être retirée sans remplacer celle d'une autre personne, examinez le conflit au lieu de forcer l'annulation. Les permissions et les protections du Model s'appliquent aussi à cette opération. Consultez les [règles de collaboration](https://developers.dagio.ai/fr/collaboration/) pour l'offre et les accès requis. ## Exporter une version enregistrée Choisissez un Canvas enregistré, les pages ou la région de tableau blanc visées et un format autorisé par sa politique. PNG, JPEG et SVG portent sur une page; le PDF peut regrouper plusieurs pages. Surface prépare un snapshot exact avec les images et polices autorisées, puis le rendu s’exécute dans une tâche serveur distincte, sans remplacer la source par une version plus récente. Le suivi et la demande d’annulation conservent la tâche d’origine. Une demande d’annulation ne garantit pas que le rendu distant est déjà arrêté. Une fois le fichier prêt, son téléchargement vérifie ses octets et son reçu; il exige toujours l’accès courant aux sources et un host acceptant les fichiers. Après une réponse inconnue, reprenez la même demande, sans créer un autre rendu. Le fond du texte se règle par une pastille avec l'infobulle **Background**. Les réglages de checklist se trouvent juste avant **Position**; **Show title** masque le titre sans le supprimer. Les checklists conservent leurs marges et la hauteur du cadre pendant l'édition. Les couleurs de sticky note s'ouvrent en haut de la barre verticale; les notes ont une ombre légère sur le board. ## Exemples appliqués : Un contenu visuel dans la fiche Insérez l’éditeur Canvas, puis un Asset lorsqu’un support visuel distinct est nécessaire. ### Configuration Propriétés du composant `NativeContent.props`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/surface-components/#nativecontent). ```json { "recordProfileKey": "client", "contentKind": "canvas" } ``` ### Variante et raccordement Propriétés du composant `NativeContent.props`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/surface-components/#nativecontent). ```json { "recordProfileKey": "client", "contentKind": "asset" } ``` ### Exemple de disposition UI La disposition illustrative ci-dessous situe cette configuration dans l’app Clients/Soumissions. Chaque fragment s’insère à l’emplacement indiqué; ses références aux Fields, Queries et Actions correspondent aux déclarations du Model. 1. Besoin du client 2. Options 3. Proposition retenue 4. Sources