ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Diagram Editor control
  • Présentation
  • Manipuler le champ Editeur de diagrammes par programmation
  • Présentation
  • Exporter un diagramme sous forme d'image
  • Gestion des bibliothèques de formes
  • Astuces de programmation
  • Comment récupérer les caractéristiques de la sélection dans un champ Editeur de diagrammes ?
  • Utilisation de la propriété Note des différentes formes
  • Comment connaître le type d'une forme ?
  • Spécificités WEBDEV
  • Programmation du champ Editeur de diagrammes sous WEBDEV
  • Exemple : Connaître et modifier la forme sélectionnée
  • Exemple : Récupérer l'indice de la forme ajoutée dans un champ Editeur de diagrammes
  • Propriétés WLangage associées
  • Propriétés spécifiques à la gestion d'un champ Editeur de diagrammes
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Présentation
WINDEV et WEBDEV permettent de manipuler un champ Editeur de diagrammes par programmation. Il suffit d'utiliser directement la variable du champ dans le code.
Un champ Editeur de diagrammes peut également être manipulé par programmation grâce aux Fonctions Diagramme.
Cette page d'aide détaille comment manipuler un champ Editeur de diagrammes par programmation.
Manipuler le champ Editeur de diagrammes par programmation

Présentation

Un champ Editeur de diagrammes permet de créer et d'afficher des diagrammes par programmation. Pour cela, le WLangage met à votre disposition :

Exporter un diagramme sous forme d'image

Pour exporter un diagramme sous forme d'image, il est possible d'utiliser la fonction DiagrammeVersImage. Cette fonction permet d'exporter le diagramme sous forme d'une variable de type Image. Il suffit ensuite d'utiliser une des fonctions suivantes pour obtenir l'image du diagramme dans le format voulu :
dSaveImageBMPSaves an image:
  • in a file in BMP format.
  • in memory.
dSaveImageGIFSaves an image:
  • in a file in GIF format.
  • in memory.
dSaveImageICOSaves an image in icon format either in a file, or in memory.
dSaveImageJPEGSaves an image:
  • in a JPEG file.
  • in memory.
dSaveImagePNGSaves an image:
  • in a PNG file.
  • in memory.
dSaveImageTIFFSaves an image in TIFF format into a file or memory.

Gestion des bibliothèques de formes

Par défaut, des bibliothèques de formes sont fournies avec le champ Editeur de diagrammes.
Il est possible de créer sa propre bibliothèque de formes. Une bibliothèque de formes correspond à un diagramme chargé en tant que bibliothèque. Ce diagramme peut être créé :
  • via le champ Editeur de diagrammes :
    1. Créez un diagramme.
    2. Importez les images correspondant aux formes voulues.
    3. Enregistrez le diagramme créé dans un fichier au format ".wddiag".
  • par programmation :
    1. Créez une variable de type Diagramme. Cette variable correspondra à la bibliothèque de formes.
    2. Créez les différentes formes personnalisées.
    3. Ajoutez les formes au diagramme "Bibliothèque".
    4. Enregistrez le diagramme "Bibliothèque" dans un fichier ".wddiag".
Une fois le diagramme "Bibliothèque" créé :
  1. Chargez le diagramme créé en tant que bibliothèque (fonction DiagrammeChargeBibliothèque).
  2. Ajoutez la bibliothèque au tableau des bibliothèques du diagramme final.
Exemple de création d'une bibliothèque par programmation :
Remarque : Si vous souhaitez utiliser uniquement vos propres bibliothèques, pensez à supprimer les bibliothèques proposées par défaut par PC SOFT. Pour cela, utilisez la fonction TableauSupprimeTout sur le tableau des bibliothèques de votre diagramme.
Astuces de programmation

Comment récupérer les caractéristiques de la sélection dans un champ Editeur de diagrammes ?

Les caractéristiques de la sélection effectuée dans un champ Editeur de diagrammes peuvent être récupérées via la propriété Sélection utilisée sur le champ. Si la sélection comprend plusieurs formes, il est possible de parcourir le tableau des formes.
Exemple :
// Retrieve the selected elements in a Diagram Editor control
MySelection is diagSélection <- DIAGEDT_MyDiagram.Selection
IF MySelection.Shape.Count > 0 THEN
// Get the shapes
FOR EACH stShape OF MySelection.Shape
STC_SELECTION_INFO = stShape.Name + "has been selected." +
" [ " + stShape.X + ", " + stShape.Y + " - " + stShape.Width +
"x" + stShape.Height + " ]"
END
ELSE
STC_SELECTION_INFO = "Click a shape in the diagram to get the selection"
END

Utilisation de la propriété Note des différentes formes

Les différentes variables de type diagForme (diagOvale, diagRectangle, ...) possèdent une propriété Note. Cette propriété peut être utilisée pour enregistrer tout type d'informations : numéro de la forme, type de la forme, information métier, ... Si le diagramme est enregistré sous forme d'un fichier "wddiag", les informations précisées à l'aide de la propriété Note sont également enregistrées. Il est ainsi possible de les relire et de les traiter lors du parcours des différentes formes d'un diagramme.
Cette astuce est utilisée dans l'exemple de mise en place d'un diagramme interactif.

Comment connaître le type d'une forme ?

Pour connaître le type d'une forme, il suffit d'affecter la forme aux différentes variables disponibles.
Exemple :
POUR TOUTE forme DE EDIAG_MonDiagramme.Forme
FormeImage est un diagImage <- forme
SI FormeImage <> Null ALORS
  // La forme est une image
FIN
FIN
WEBDEV - Server codeWEBDEV - Browser code
Spécificités WEBDEV

Programmation du champ Editeur de diagrammes sous WEBDEV

Le champ Editeur de diagrammes peut être manipulé en code serveur via les différents types de variables et les différentes fonctions WLangage.
En code navigateur, ces fonctions et variables ne sont pas disponibles. L'astuce consiste à utiliser un champ Bouton invisible contenant le code serveur à exécuter. Le code de clic de ce champ Bouton pourra être exécuté depuis le code navigateur grâce à la fonction ExécuteTraitement utilisée avec la constante trtClic.
Remarques :
  • Il est conseillé d'utiliser un code de clic serveur de type "AJAX".
  • Il n'est pas possible d'utiliser la fonction AJAXExécute dans les traitements navigateur.
Par exemple, le code navigateur de double-clic sur une forme peut exécuter le code du champ Bouton BTN_DoubleClic :
// Double click on a shape in the Diagram Editor control
ExecuteProcess(BTN_DoubleClick, trtClick)

Exemple : Connaître et modifier la forme sélectionnée

Dans le champ Editeur de diagrammes d'un site WEBDEV, pour récupérer les caractéristiques de la forme sélectionnée ou les modifier, il est possible d'utiliser la propriété Sélection.
Pour cela, il suffit de :
  • Créer un champ Bouton qui va permettre de récupérer la forme créée.
  • Exécuter le code du bouton depuis le code navigateur "Sélection d'une forme" du champ Editeur de diagrammes.
Le code de clic serveur du champ Bouton est le suivant (option "Ajax" activée):
// Get the selection
MySelection is diagSélection <- DIAGEDT_MyDiagram.Sélection
// Checks if the selection contains only one shape
IF MySelection.Shape.Count = 1 THEN
// changes the colors
MySelection.Shape[1].Border.Color = LightGreen
MySelection.Shape[1].Background.Color = LightRed
ELSE
Info("Click on a shape in the diagram to see the selection")
END
Le code navigateur "Sélection d'une forme" du champ Editeur de diagrammes qui permet d'exécuter le code de clic du bouton est le suivant :
ExecuteProcess(BTN_Select, trtClick)
RETURN True

Exemple : Récupérer l'indice de la forme ajoutée dans un champ Editeur de diagrammes

Dans le champ Editeur de diagrammes d'un site WEBDEV, il est possible de récupérer l'indice de la forme ajoutée, via l'événement navigateur "Ajout d'une forme" du champ.
Pour cela, il suffit de :
  • Créer un champ Bouton qui va permettre de :
    • récupérer la position de la souris.
    • récupérer la forme créée.
  • Exécuter le code du bouton depuis le code navigateur "Ajout d'une forme" du champ Editeur de diagrammes.
Le code du bouton est le suivant :
  • Code serveur "Initialisation" du champ Bouton BTN_Ajout :
    GLOBAL
    XPos, YPos are int <browser synchronized>
  • Code navigateur "Clic sur" du champ Bouton BTN_Ajout :
    (XPos, YPos) = (MouseXPos(mpControl), MouseYPos(mpControl))
  • Code serveur "Clic sur" du champ Bouton BTN_Ajout (option "Ajax" activée):
    MyDiagram is Diagram
    nIndex is int

    MyDiagram <- DIAGEDT_NoName1

    nIndex = DiagramInfoXY(DIAGEDT_NoName1, XPos, YPos)

    IF nIndex = Null = THEN
    RESULT False
    END

    MyShape is diagShape <- diagram.Shape[nIndex]
  • Code navigateur "Ajout d'une forme" du champ Editeur de diagrammes :
    ExecuteProcess(BTN_Add, trtClick)
    RETURN True
Propriétés WLangage associées

Propriétés spécifiques à la gestion d'un champ Editeur de diagrammes

Les propriétés suivantes sont spécifiques à la gestion des caractéristiques d'un champ Editeur de diagrammes par programmation :
EditModeThe EditMode property gets and sets the editing mode of the Diagram Editor control: selection or freehand drawing.
GridlinesVisibleThe GridlinesVisible property is used to:
  • Determine whether or not gridlines are visible in a control.
  • Show or hide gridlines in a control.
LibraryThe Library property allows you to handle the different preset libraries associated with a Diagram Editor control. This property accesses the array of libraries of the Diagram Editor control.
LibraryPanelVisibleThe LibrayPanelVisible property is used to:
  • determine if the "Library" panel is displayed in a Diagram Editor control.
  • show or hide the "Library" panel in a Diagram Editor control.
ModifierPanelVisibleThe ModifierPanelVisible property is used to:
  • determine if the "Modifier" panel is displayed in a Diagram Editor control.
  • show or hide the "Modifier" panel in a Diagram Editor control.
PageBorderVisibleThe PageBorderVisible property is used to:
  • determine if the page borders are displayed in a Diagram Editor control.
  • show or hide the page borders in a Diagram Editor control.
SelectionThe Selection property is used to get the characteristics of the selection (or cursor):
  • in a Word Processing control.
    Remark: This selection is in the section being edited in the control (body, header or footer).
  • in a Spreadsheet control.
  • in an HTML Editor control.
  • in a Diagram Editor control.
Pour connaître la liste complète des propriétés du WLangage pouvant être utilisées avec un champ de type Editeur de diagrammes, consultez Propriétés associées au champ Editeur de diagrammes.
Minimum version required
  • Version 27
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 10/23/2023

Send a report | Local help