mxgraph series : Project structure
Posted May 25, 2020 • 6 min read
1 . Directory description
mxgraph The directory structure is as follows:
- docs :mxgraph documentation
- dotnet :.net-based editor backend implementation, no need to pay attention for now
:There is only one
Gruntfile.jsfile in this directory, which is used to build the build environment version
- java :java-based editor backend implementation, no need to pay attention for now
:mxgraph core code folder, where
The mxgraph repository mainly contains several types of resources. The core is the graphics engine source code in the
docs directory as learning resources, and the sample code in the
2 . Official documents
To learn mxgraph, you can start with the official documents. The following types of documents exist in the mxgraph warehouse, which is of great help for getting started:
- tutorial :Project overview document that outlines the role of mxgraph, component structure, and provides a simple example of getting started , Has a higher guiding role when first contacting the project.
- manual :User manual document, detailing mxgraph design ideas, starting the engine, how to use it, and how mxgraph The data model for managing images. It is recommended to skim in the early stage and write a few examples with a basic perceptual knowledge of the framework. You can go back and read it carefully.
- examples :Project example index document, which describes the purpose of each example in detail and can be used as a reference for learning.
- api :API manual, provides the use of all classes, class methods, and class attributes under mxgraph Note that you can query when you need to use certain classes.
The recommended reading order is that a detailed reading of the tutorial can help establish the perception of mxgraph; two skimming the manual to understand the management method of the mxgraph data model; three carefully reading the sample code to learn and understand various interfaces from the examples Usage; if necessary, you can consult the API documentation for detailed information on each interface.
All the above documents can be double-clicked on the corresponding html file to open and view it in the browser.
The quality of mxgraph's official documents is simply a pity. Many concepts have been carried out without a detailed explanation. In addition, the community's discussion about mxgraph is very low, resulting in high learning costs for users. In this situation, the author believes that the most effective learning method can only be combined with examples, API documentation, and source code, and the three dimensions of learning are compared with each other.
3 . Core directory structure
The core functions of mxgraph are all defined in the
modelsubdirectory is the implementation of the data management model. The data model records the graph structure of the mxgraph instance and the detailed information of the nodes, and exposes a series of update, delete, and insert interfaces. When we use mxgraph, we often follow this part of the interface. Deal with. More explorations on the data model will be added later.
shapedefines several main primitive types, including lines, labels, arrows, polygons, quadrilaterals, swim lanes, etc.
viewis the main interface layer for the external interaction of the framework, including the graphic interaction interface mxGraph class, style management interface mxStylesheet, graphic element editor mxCellEditor and so on.
handlerdefines several common interactive behavior logics of primitives in the framework, such as mxKeyHandler for processing shortcut key logic; mxEdgeSegmentHandler for processing connection line fragments; mxCellHighlight for processing primitive highlighting effects, etc.
layoutdefines the layout logic used by mxgraph, including stacking layout mxStackLayout; swimlane layout mxSwimlaneLayout; circular layout mxCircleLayout.
utilcontains various tool functions.
iodefines several codecs for different tenses, which can be used to achieve the persistence of mxgraph instance state.
editorshort and powerful editor implementation, built-in shortcut keys, pop-up menus, toolbars and other functional support.
etc/build/Gruntfile.js connection, merge and compression operations, and can be used as a production environment library file.
The mxgraph repository contains two types of function codes, one is as the bottom graphics engine; the other is as the graphics editor for the upper applications. In the source code,
4 . Sample code
The examples provided by mxgraph are all under
directory, there are 88 in total, you can double-click
- helloworld.html, although it is a very basic introductory example, but fully demonstrates the use of mxgraph framework.
- Learn how to customize primitives through shape.html; learn how to define primitive styles in xml format through stencils.html.
- Learn how to monitor events of mxgraph instance objects through events.html. For a complete list of events, please refer to the
- Learn the concept of graphic layering through layers.html. Layered functions help to manage graphic elements. Most graphic engines will have similar functional designs.
- Learn groups and merge of graphic elements through groups.html. The grouping function can logically merge multiple graphics into one elements, which is another dimension management method.
- Learn how to define graphic styles through stylesheet.html.
- Learn how to embed custom patterns in mxgraph through images.html.
- Use markers.html to learn how to modify the style of the connection line.
- Learn how to add explanatory text to graphics through labels.html and secondlabel.html; learn how to add indicators to parent primitives through indicators.html; learn how to embed html content in the form of label through htmllabel.html.
- Learn how to add interactive functions to graphic components through anchors.html and control.html.
- Learn the layout function of mxgraph through graphlayout.html, autolayout.html, boundary.html; later you can also learn more complex layout logic through hierarchicallayout.html, swimlanes.html.
- Use codec.html and jsondata.html to learn how to perform the encoding and decoding functions of the data model, and fileio.html to learn how to achieve the persistence and restoration of graphic content.
- Use dragsource.html and drop.html to learn how to implement graphic drag and drop operations, and handles.html to learn more complex interactive functions.
The above example of accuracy, combined with the