|
|
|
|
|
|
|
|
|
|
- Overview of the Diagram Editor control
- Creating a Diagram Editor control
- Diagram Editor control features
- Description window
The Diagram Editor control
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: | | | | | Shortcut | Effect | Shortcut | Effect |
|---|
| Ctrl + A | Selects the elements in the current diagram. | Ctrl + Arrow | Moves the selected shape, jumping from one gridline to another, the direction of the arrow. | | Ctrl + C | Copies the selection to the clipboard. | Ctrl + Shift + C | Copies and applies the formatting of the last selected element. | | Ctrl + N | Creates a new diagram. | Ctrl + O | Opens an existing diagram. | | Ctrl + P | Prints the current diagram. | Ctrl + S | Saves the diagram. | | Ctrl + V | Pastes the content of the clipboard. | Ctrl + X | Cuts the selection and copies it to the clipboard. | | Ctrl + Y | Redoes the last action. | Ctrl + Z | Undoes the last action. | | Ctrl + mouse wheel | Changes the zoom. | Alt + Shift + Arrow | Clones 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 shape | Creates a connector from the selected shape to the destination shape. | Ctrl + Shift + Drag cursor to emtpy location | Clones the selected shape at the cursor position. Creates a connector between the selected shape and its clone. | | Alt + Arrow | Increases or decreases the size of the selected shape by 1 pixel. | Ctrl + Alt + Arrow | Increases or decreases the size of the selected shape by 1 grid step. | | Ctrl + Drag cursor over an element | Adds the elements within the rectangle drawn by the cursor to the current selection. | Ctrl + Del | Deletes the selected shape and all its links. | | Ctrl + Move | Moves the selected shape but keeps it locked along a gridline. | Ctrl + Resize | Resize the shape while maintaining the proportions (except for images). |
Creating a Diagram Editor control To create a Diagram Editor control: - Select the following option, according to the IDE used:
 On the "Creation" tab, in the "Graphic controls" group, expand "Office" and click "Diagram Editor".  On the "Creation" tab, in the "Graphic controls" group, click "Diagrams".
- 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.
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 is automatically included in your project, in the WDAAF internal component. 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.
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 (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.
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 is automatically included in your project, in the WDAAF internal component. 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.
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|