ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

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 of the Diagram Editor control
  • Creating a Diagram Editor control
  • Diagram Editor control features
  • Description window
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
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,
  • choice of shape style: 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 further details, see Diagram Editor control: Ribbon and panel options.
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, keeping it locked on the object snapping.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.
Note: The dimensions of the field created are optimized to occupy the space available at the position indicated.. If the field size doesn't suit you, use the Ctrl + Z key combination: the field will return to its default size.
To view the characteristics of the control, select "Description" in the context menu.
Diagram Editor control features

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..
    • "Predefined window": the default toolbar can be customized..
      Simply select the default preset window in "Source IW". In this case, the "IW_WINDEVAAF_DiagramEditorRibbon" window is automatically included in your project, in the WDAAF internal component. This internal window can be modified as required. 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.
    • Internal project window: Use an internal window to provide a specific toolbar..
      You can use any internal window of your project to create this toolbar.
  • Display the <Library> panel: Allows you to show or hide the "Library" panel containing the default and custom libraries of the Diagram Editor field.
    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 is automatically included in your project, in the WDAAF internal component. This internal window can be modified as required. 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.
    • Internal project window: Use an internal window to propose a specific "Library" panel..
      You can use any internal window of your project to create this panel.
  • Show the <Modifier> panel: Allows displaying or hiding the "Modifier" panel containing the various characteristics of the displayed elements and enabling their modification.
    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.
    • "Predefined 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 is automatically included in your project, in the WDAAF internal component. This internal window can be modified as required. 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.
    • Internal project window: Use an internal window to propose 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 Selects whether or not to display the Diagram Editor control gridlines. The corresponding WLanguage property is GridlinesVisible.
  • Border around page Displays the page frame in the Diagram Editor control. The corresponding WLanguage property is PageBorderVisible.
  • 3D isometric view Displays an isometric gridlines used 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/16/2025

Send a report | Local help