|
|
|
|
|
|
|
|
|
|
- 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, 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..
- "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.
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.
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.
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|