Understand according to work habits and experience , Mind mapping and multi branch flow charts have always faced one of the biggest problems ： Only the author can understand it from beginning to end .
The reason for this problem is , The receiver cannot keep up with the creator's thinking and creative process from beginning to end .
Architecture drawing is produced under such a basic problem , Drawing library mxgraph add showmebug Multi terminal synchronous black Technology , The birth of showmebug Exclusive architecture drawing board , The creator can show the thinking process to the receiver from beginning to end , Highlight the characteristics of the creator to the greatest extent .
mxgraph Contains four layers ,background pane,draw pane,overlay pane,decorator pane, These four layers are four <g> label .mxgraph stay mxGraphView Class provides methods for obtaining these four layers ：
Background layer , You can customize the background image .
All graphic components are drawn on this layer .
Draw most of the tool class elements on this layer , For example, select the highlighted element , Change the size of the graphic and rotate the elements , And the synchronized mouse element introduced in this article .
When mouse hover When on components , You will see several dots that can pull out the connection , These dots are drawn on the layer .
mxgraph Encapsulates the mouse events inside the whiteboard , Pass in through configuration
mouseDown , mouseMove , mouseUp Three callback functions to call . The two parameters of the callback function are generated by the event mxGraph And corresponding events after encapsulation mxMouseEvent.
Mouse Move Events are typically very high trigger frequency events , So when processing , It is best to use the throttling function for encapsulation , That's easy , To borrow lodash.throttle That is to say .
mxgraph The size of is suitable for different screen sizes , On the contrary, the coordinates of the mouse are mapped at different terminals and will not be exactly the same . The following mapping algorithm is required for the corresponding coordinates ：
Because the size of the whiteboard at each end is different ,translate You can see the corrected displacement of the current mouse position , Remove the correction displacement graphX(Y) - translate.x(y) Then there is the absolute position of the mouse on the whiteboard , Pass it on to remote After the end , Plus the corrected displacement at this end x(y) + translate.x(y) , You can get the correct position of the mouse .
If only throttling is sent ,remote The end may be due to network fluctuations , You may receive a lot of information about congestion in a certain period of time , This information is implemented in no order , Cause the synchronous mouse to jump randomly . So in remote End , Use the idea of task queue to solve this problem .
adopt next() Functions control the order of execution , Send asynchronous events to trigger tasks , Force synchronization task execution . This idea is in some NodeJS It is widely used in the framework , for example ：ExpressJs Middleware etc. .
Mouse movement events are throttled data sent to remote End , Lead to remote The coordinate information received by the terminal is jumping , If you just trigger synchronous mouse drawing according to the sending event , The animation effect is also jumping , It gives people a very Caton feeling . After colleagues discuss and find information, choose
window.requestAnimationFrame Smoothing .
The reason lies in svg In the canvas transform: translate(x, y) And css The performance is slightly different ,svg The internal elements of transform: translate According to the nearest ancestor svg Elemental x,y attribute , As the starting point of the displacement .
According to this characteristic , Wrap the mouse graphics in a svg The label inside ( As shown in the code above ), By setting pointer-wrapper Of x/y attribute , Determines the absolute displacement of the synchronized mouse ; In an event , Synchronous mouse movement occurs during , Yes pointer-wrapper Of the two child elements of transform: translate Property to operate on , As a relative displacement ; When this mobile event is over , Right again pointer-wrapper Set up x/y The attribute is the final coordinate , At the same time pointer-wrapper The two child elements of transform: translate(0, 0), As the final absolute position .
/ END /
ShowMeBug It is a digitally driven recordable 、 Analyzable 、 Technical evaluation and online of repeatable disk Coding Interview platform .