Manipulating Diagram Editor controls programmatically

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

This content has been translated automatically. Click here to view the French version.

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Diagram Editor control

Overview
Manipulating the Diagram Editor control programmatically
Overview
Export a diagram as an image
Managing shape libraries
Programming tips
How do I retrieve selection characteristics from a Diagram Editor control?
Using the Note property of the different shapes
How do you know the type of a shape?
WEBDEV specific features
Programming the Diagram Editor control in WEBDEV
Example: Getting and modifying the selected shape
Example: Getting the index of a shape added in a Diagram Editor control
Associated WLanguage properties
Properties specific to Diagram Editor controls

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Manipulating Diagram Editor controls programmatically

Overview

WINDEV and WEBDEV allow you to programmatically manipulate Diagram Editor controls. To do so, use the control variable in the code.

Diagram Editor controls can also be manipulated programmatically using Diagram functions.

This help page explains how to programmatically manipulate Diagram Editor controls.

Manipulating the Diagram Editor control programmatically

Overview

Diagram Editor controls allow you to programmatically create and display diagrams. To do so, WLanguage provides you with:

functions Diagram.
Different types of specific variables, allowing you to handle diagrams and shapes. For more details, see Diagram management variables.

Export a diagram as an image

To export a diagram as an image, you can use DiagramToImage. This function exports the diagram as a variable of type Image. Then, simply call one of the following functions to get the image of the diagram in the desired format:


dSaveImageBMP	Saves an image: in a file in BMP format. in memory.
dSaveImageGIF	Saves an image: in a file in GIF format. in memory.
dSaveImageICO	Saves an image in icon format either in a file, or in memory.
dSaveImageJPEG	Saves an image: in a JPEG file. in memory.
dSaveImagePNG	Saves an image: in a PNG file. in memory.
dSaveImageTIFF	Saves an image in TIFF format into a file or memory.

Managing shape libraries

Multiple shape libraries are included with the Diagram Editor control.

You can create your own shape library. A shape library is a diagram loaded as a library. This diagram can be created:

via the Diagram Editor control:
1. Create a diagram.
2. Import the images that correspond to the desired shapes.
3. Save the diagram as a ".wddiag" file.
programmatically:
1. Create a variable of type Diagram. This variable will hold the shape library.
2. Create the different custom shapes.
3. Add the shapes to the "Library" diagram.
4. Save the "Library" diagram as a ".wddiag" file.

Once the "Library" diagram has been created:

Load the diagram as a library (DiagramLoadLibrary).
Add the library to the array of libraries of the final diagram.

Example of a library created programmatically:

sFichier is string = fTempDir() + [ fSep ] + "bibli_perso.wddiag"

// Crée une bibliothèque entièrement par programmation
BibliTemp is Diagram

D1 is diagOval
D1.Width = 50
D1.Height = 50
D1.Background.Color = DarkRed
Add(BibliTemp.Shape, D1)

D2 is diagOval
D2.Width = 50
D2.Height = 70
D2.Background.Color = DarkGreen
Add(BibliTemp.Shape, D2)

// Utilise les formes du diagramme temporaire pour créer la bibliothèque
// Sauve le diagramme sur le disque
DiagramSave(BibliTemp, sFichier)

// Charge le diagramme en tant que bibliothèque
MaBibli is diagLibrary
DiagramLoadLibrary(MaBibli, sFichier)
MaBibli.Name = "Perso"

// Ajoute la bibliothèque au champ Editeur de diagrammes
Add(EDIAG_Diagramme.Bibliothèque, MaBibli)

ToastDisplay("La bibliothèque personnelle a été ajoutée dans la liste.")

Note: If you wish to use only your own libraries, remember to delete the default libraries proposed by PC SOFT.. To do so, use ArrayDeleteAll on the array of libraries of the diagram.

Programming tips

How do I retrieve selection characteristics from a Diagram Editor control?

You can retrieve the characteristics of a selection in a Diagram Editor control using the Selection property. If the selection includes more than one shape, you can loop through the array of shapes.

Example:

// Obtenir la sélection dans un champ Editeur de diagrammes
MaSélection is diagSelection <- EDIAG_MonDiagramme.Sélection
IF MaSélection.Shape.Count > 0 THEN
	// Obtenir les formes
	FOR EACH stForme OF MaSélection.Shape
		LIB_INFO_SELECTION = "Sélection de " + stForme.Nom + 
		" [ " + stForme.X + ", " + stForme.Y + " - " + stForme.Largeur + 
		"x" + stForme.Hauteur + " ]"
	END
ELSE
	LIB_INFO_SELECTION = "Cliquez sur une forme dans le diagramme pour connaître la sélection"
END

Using the Note property of the different shapes

diagShape variables (diagOval, diagRectangle, etc.) have a Note property. This property can be used to record any type of information: shape number, shape type, business information, etc. If the diagram is saved as a "wddiag" file, the information specified using the Note property is also saved.. This information can then be read and processed when looping through the different shapes of a diagram.

To see an example of this solution, see creating an interactive diagram.

How do you know the type of a shape?

To determine the type of a shape, simply assign the shape to the different available variables.

Example:

FOR EACH shape OF DIAGEDT_MyDiagram.Shape
ImageShape is diagImage <- shape
IF ImageShape <> Null THEN
// The shape is an image
END
END

WEBDEV specific features

Programming the Diagram Editor control in WEBDEV

You can handle the Diagram Editor control in server code using the different functions and types of variables available in WLanguage.

In browser code, these functions and variables are not available. The solution is to use an invisible Button control containing the server code to be executed. The click code of this Button control can be executed from the browser code using ExecuteProcess with the trtClick constant.
Remarks:

It is recommended to use an "AJAX" server click code.
AJAXExecute cannot be used in browser processes.

For example, the double-click browser code of a form can execute the code of the BTN_DoubleClick control:

// Double click on a shape in the Diagram Editor control
ExecuteProcess(BTN_DoubleClick, trtClick)

Example: Getting and modifying the selected shape

You can use the Selection property to get and set the characteristics of the selected shape in a Diagram Editor control in a WEBDEV website.

To do so, simply:

Create a Button control to get the new shape.
Run the code of the button from the "Select a shape" browser event of the Diagram Editor control.

Here is the server click code of the Button control ("AJAX" option enabled):

// Get the selection
MySelection is diagSelection <- DIAGEDT_MyDiagram.Selection
// 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

Here is the "Select a shape" browser code of the Diagram Editor control that executes the click code of the button:

ExecuteProcess(BTN_Select, trtClick)
RETURN True

Example: Getting the index of a shape added in a Diagram Editor control

You can use the "Add a shape" browser event of a Diagram Editor control in a WEBDEV website to get the index of the shape added in the control.

To do so, simply:

Create a Button control to:
- get the mouse position.
- get the created shape.
Run the code of the button from the "Add a shape" browser event of the Diagram Editor control.

The code of the button is as follows:

Initialization code of BTN_Add (server):

GLOBAL
XPos, YPos are int <browser synchronized>

Click code of BTN_Add (browser):

(XPos, YPos) = (MouseXPos(mpControl), MouseYPos(mpControl))

"Click" server code of BTN_Add ("AJAX" option enabled):

MyDiagram is Diagram
nIndex is int

MyDiagram <- DIAGEDT_NoName1

nIndex = DiagramInfoXY(DIAGEDT_NoName1, XPos, YPos)

IF nIndex = Null = THEN
	RETURN False
END

MyShape is diagShape <- diagram.Shape[nIndex]

"Add a shape" code of the Diagram Editor control (browser):
```
ExecuteProcess(BTN_Add, trtClick)
RETURN True
```

Associated WLanguage properties

Properties specific to Diagram Editor controls

The following properties are used to manage the characteristics of a Diagram Editor control programmatically:


EditMode	The EditMode property gets and sets the editing mode of the Diagram Editor control: selection or freehand drawing.
GridlinesVisible	The GridlinesVisible property is used to: Determine whether or not gridlines are visible in a control. Show or hide gridlines in a control.
Library	The 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.
LibraryPanelVisible	The property LibraryPanelVisible property: determine if the "Library" panel is displayed in a Diagram Editor control. show or hide the "Library" panel in a Diagram Editor control.
ModifierPanelVisible	The property ModifierVisiblePanel property allows you to: determine if the "Modifier" panel is displayed in a Diagram Editor control. show or hide the "Modifier" panel in a Diagram Editor control.
PageBorderVisible	The property VisiblePageFrame property allows you to: determine if the page borders are displayed in a Diagram Editor control. show or hide the page borders in a Diagram Editor control.
Selection	The property Selection property displays the characteristics of the selection (or cursor): in a Word Processing control. Note: This selection is located in the part being edited (body, header or footer). in a Spreadsheet control. in an HTML Editor control. in a Diagram Editor control.

For a complete list of WLanguage properties that can be used with Diagram Editor controls, see Diagram Editor control properties.