background

Editors are an important part of an IDE. Visual editors are better than text editors for IDE tools to reduce development costs and improve development efficiency. In addition, there are certain requirements for functional integrity, interactive experience, memory footprint and performance (generally continuous use for a long time).

Data design for the editor

mxgraph

Visual editor composition

  • Visual edit area

    • Component selection Selection is the basis for the entire visual editing. The user’s operation behavior occurs on the View. When the click event is heard on the View, it needs to be mapped to the corresponding data object (Model) quickly. When properties are modified, the data object changes and the render view needs to be updated quickly. So the part responsible for bridging views and data is called the Controller, which is a typical use scenario for the MVC pattern. Finally, the selected component’s data will be passed out, other auxiliary modules such as: properties, the outline can be in production. Don’t forget to highlight the currently selected component.
    • Drag adjust component position During mouse dragging, if the floating drag target component has an impact on the current drag element, for example: there are container class components, common components, common components cannot accommodate common components, and containers can accommodate. You need to obtain the components below the mouse pointer in real time and quickly obtain the configuration information of the components to verify subsequent layout policies. So you need View -> Model -> Component Configuration -> the logic that generates the drag policy to execute fast enough. When the drag is complete, the move command (detailed below) is generated to modify the Model and update the View.
    • Drag to add components Drag to add new components is similar to drag and drop to move. You just need to generate the create command.
    • The drag guide should be drawn on a separate top layer, and the available position can be initialized at the beginning of the drag. The check conditions are relaxed to achieve the effect of adsorption.

  • Component selection area

    • Configuration-rich components are closely related to the ability of visual editors. Component additions and modifications are a large and ongoing part of development. You can configure it. For example: component unique flags, component ICONS, component names, component types, component properties (how component properties are edited), etc., extracted into similar configurations.
    • The personalization Component (Advanced) editor provides standard components for most scenario development, but some personalized scenarios are limited by the functionality of standard components. However, using standard component extensions not only increases the development burden of the editor, but also increases the complexity of components. (For example, a property of a component is only used in a feature scenario). Therefore, it is better to support users to highly customize their own components, and the custom components are separated from the standard component library and maintained independently. However, it also puts forward higher requirements for component configuration design and custom component function implementers.
    • The component hierarchy is described above at two levels, which are further evolved. Some good personalization components can be absorbed by the editor and provided by the editor by default, so there is a three-level differentiation. Standard components, common custom components, custom personalized components. From a business perspective, it is also a process of increasing the level of business.

  • Command mechanism:

    All user editing behaviors (add, delete, modify) are normalized into a unified command object, which is called a command. Commands can be executed forward or backward (undo,redo), and are not destroyed but stored in the command stack. The command mechanism enables the user to trigger the corresponding forward and reverse execution, and provides the file status to provide an accurate time for file saving.

    1. When a user adds a component, a command is created and is executed forward.
    2. Place the command on undoStack
    3. Undostack. length>0 so undo menu can be clicked; Because the undoStack is not empty, the user has made changes, so the edit status of the update file is: Made changes (dirty).
    4. If the user triggers undo, the command at the top of the undoStack is fetched, the command logic is reversed (the reverse execution logic of the created command is to delete the created component), and the component is deleted.
    5. Place commands on the redoStack
    6. Update status: Unclickable undo menu, clickable redo menu, unedited file status due to undoStack, redoStack changes
    7. If the user performs continuous operations, only the depth of the queue changes, and the effect is not affected
    8. This is a simple design that does not take into account the complexity of continuous user saving and normal editing after redo.

  • Hotkey mechanism

    1. Editor global hotkey listening
    2. Hotkey trigger logic configuration Because the hotkey itself is not fixed, the situation is more new and modified, in addition, a good editor can support users to customize the hotkey, or even customize the hotkey logic. So the configuration is convenient.

  • Property editing area

    1. Update the edit field of component properties based on component configuration information and user-selected components, and provide good edit interaction. After a user performs a modification action, the corresponding modification command is generated.

  • Outline area

    1. Generate structure tree according to structured data, facilitate users to view file structure, select components, delete components, with certain auxiliary functions.

conclusion

Architecture reference part of Eclipse plug-in development GEF framework, some of their own design and implementation, some of their own YY. There may be a follow-up blog… Do you have any comments and suggestions?