ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Diagram Editor control
  • Overview of the Diagram Editor control
  • Creating a Diagram Editor control
  • Characteristics of Diagram Editor controls
  • Description window
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
Overview of the Diagram Editor control
The Diagram Editor control allows users to create and edit diagrams in your applications and sites. This control is based on Chromium Embedded Framework (CEF).
This control can be used to represent structures, architectures, material infrastructure, plans, processes, mechanisms, unconventional flowcharts, etc.
The Diagram Editor control include many features:
  • preset or custom shapes,
  • shape resizing,
  • shape style options: line, color, etc.
  • advanced connectors between shapes,
  • typing text,
  • etc.
These features are directly available to the end user and can also be manipulated programmatically.
The ribbon of this control includes the most common actions. For more details, see Diagram Editor control: Options in the ribbon and the panes.
Several keyboard shortcuts are also available:
ShortcutEffectShortcutEffect
Ctrl + ASelects the elements in the current diagram.Ctrl + ArrowMoves the selected shape, jumping from one gridline to another, the direction of the arrow.
Ctrl + CCopies the selection to the clipboard. Ctrl + Shift + CCopies and applies the formatting of the last selected element.
Ctrl + NCreates a new diagram.Ctrl + OOpens an existing diagram.
Ctrl + PPrints the current diagram.Ctrl + SSaves the diagram.
Ctrl + VPastes the content of the clipboard. Ctrl + XCuts the selection and copies it to the clipboard.
Ctrl + YRedoes the last action. Ctrl + ZUndoes the last action.
Ctrl + mouse wheelChanges the zoom.Alt + Shift + ArrowClones the selected shape in the direction of the arrow. Creates a connector between the selected shape and its clone.
Ctrl + Shift + Drag cursor towards a shapeCreates a connector from the selected shape to the destination shape.Ctrl + Shift + Drag cursor to emtpy locationClones the selected shape at the cursor position. Creates a connector between the selected shape and its clone.
Alt + ArrowIncreases or decreases the size of the selected shape by 1 pixel. Ctrl + Alt + ArrowIncreases or decreases the size of the selected shape by 1 grid step.
Ctrl + Drag cursor over an elementAdds the elements within the rectangle drawn by the cursor to the current selection. Ctrl + DelDeletes the selected shape and all its links.
Ctrl + MoveMoves the selected shape but keeps it locked along a gridline.Ctrl + ResizeResize the shape while maintaining the proportions (except for images).
Creating a Diagram Editor control
To create a Diagram Editor control:
  1. Select the following option, according to the IDE used:
    • WINDEV On the "Creation" tab, in the "Graphic controls" group, expand "Office" and click "Diagram Editor".
    • WEBDEV - Server code On the "Creation" tab, in the "Graphic controls" group, click "Diagrams".
  2. Click where the control will be created in the window or page.
Remark: The dimensions of the control are optimized to take up the available space at the specified position. If the control size does not suit you, press Ctrl + Z: the control size will be reset to default.
To view the characteristics of the control, select "Description" in the context menu.
Characteristics of Diagram Editor controls

Description window

The "General" tab in the description window of the Diagram Editor control includes the following options for toolbars and panels:
  • Show toolbar: Displays the Diagram Editor control toolbar. In a WINDEV application, this toolbar is displayed as a ribbon. In a WEBDEV website, a mini toolbar is displayed.
    WINDEV The toolbar to be displayed (if any) can be specified in "Source IW".
    If "Source IW" corresponds to:
    • "None": the default toolbar will be used.
    • "Preset window": the default toolbar can be customized.
      Simply select the default preset window in "Source IW". In this case, the "IW_WinDevAAF_DiagramEditorRibbon" window will automatically be included in your project. This internal window (available in English and French) can be modified according to your needs. This window contains all the code required to use the Diagram Editor control. It is recommended to check for UI errors and make sure the window works properly after any change is made.
    • Project internal window: Allows you to use an internal window to include a specific toolbar.
      You can use any internal window of your project to create this toolbar.
  • Show <Library> panel: Shows or hides the "Library" panel with the default and custom libraries of the Diagram Editor control.
    WINDEV The "Library" panel to be displayed (if any) can be specified in "Source IW".
    If "Source IW" corresponds to:
    • "None": the default "Library" panel will be used.
    • "Preset window": the default "Library" panel can be customized.
      Simply select the default preset window in "Source IW". In this case, the "IW_WinDevAAF_Diagram_SideBar_Left" window will automatically be included in your project. This internal window (available in English and French) can be modified according to your needs. This window contains all the code required to use the Diagram Editor control. It is recommended to check for UI errors and make sure the window works properly after any change is made.
    • Project internal window: Allows you to use an internal window to create a specific "Library" panel.
      You can use any internal window of your project to create this panel.
  • Show <Modifier> panel: Shows or hides the "Modifier" panel with the different characteristics of the displayed elements and the options to modify them.
    WINDEV The "Modifier" panel to be displayed (if any) can be specified in "Source IW".
    If "Source IW" corresponds to:
    • "None": the default "Modifier" panel will be used.
    • "Preset window": the default "Modifier" panel can be customized.
      Simply select the default preset window in "Source IW". In this case, the "IW_WinDevAAF_Diagram_SideBar_Right" window will automatically be included in your project. This internal window (available in English and French) can be modified according to your needs. This window contains all the code required to use the Diagram Editor control. It is recommended to check for UI errors and make sure the window works properly after any change is made.
    • Project internal window: Allows you to use an internal window to create a specific "Modifier" panel.
      You can use any internal window of your project to create this panel.
The "General" tab in the description window of the Diagram Editor control includes the following display options:
  • Show gridlines: Shows or hides the gridlines in the Diagram Editor control. The corresponding WLanguage property is GridlinesVisible.
  • Border around page: Shows the page borders in the Diagram Editor control. The corresponding WLanguage property is PageBorderVisible.
  • 3D isometric view: Shows an isometric grid to align isometric objects.
Minimum version required
  • Version 27
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 01/15/2024

Send a report | Local help