Showmebug black technology - a move to quickly realize mouse synchronization of Architecture Drawing

ShowMeBug 2021-09-15 08:46:56

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 .

Layer Introduction

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 Pane
Background layer , You can customize the background image .

draw pane
All graphic components are drawn on this layer .

overlay pane

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 .

decorator pane

When mouse hover When on components , You will see several dots that can pull out the connection , These dots are drawn on the layer .

Coordinate processing

Coordinate sending

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.

Throttling transmission

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 .

Coordinate transformation

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 .

Mouse drawing

Task queue

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. .

Smooth sliding

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 .

Please bring the original link to reprint ,thank
Similar articles