|
|
|
|
|
|
|
|
|
|
- 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,
- 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: | | | | | 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, keeping it locked on the object snapping. | 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, 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.
- Display the <Library> panel: Allows you to show or hide the "Library" panel containing the default and custom libraries of the Diagram Editor field.
- Show the <Modifier> panel: Allows displaying or hiding the "Modifier" panel containing the various characteristics of the displayed elements and enabling their modification.
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.
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|