According to work habits and experience, mind maps and multi-branch flow diagrams have always faced one of the biggest problems: only the author can understand them from beginning to end.

The reason for this problem is that the recipient can’t keep up with the creative process of the creator from beginning to end.

Architecture drawing is generated under such a basic problem, drawing library MXGRa PH and ShowmeBug multi-terminal synchronous black technology, the birth of showmeBug exclusive architecture drawing board, creators can show the thinking process to the recipient from beginning to end, to highlight the characteristics of creators to the greatest extent.

The layer is introduced

The MxGraph contains four layers, background Pane, Draw Pane, Overlay Pane, and decorator pane, which are four tabs. Mxgraph provides methods to get these four layers from the mxGraphView class:

  • Background Pane

Background layer, you can customize the background.

  • draw pane

All graphic components are drawn on this layer.

  • overlay pane

This layer draws most of the tool-based elements, such as the highlight element, the rotation element, and the synchronized mouse element described in this article.

  • decorator pane

When hover over a component, you will see several dots that you can pull out of the line drawn on the layer.

Coordinates processing

  • Coordinate to send

Mxgraph encapsulates mouse events inside the whiteboard and is called by configuring the mouseDown, mouseMove, and mouseUp callbacks. The two arguments to the callback function are the mxGraph generated by the event and the mxMouseEvent encapsulated for the corresponding event.

  • The throttle to send

Mouse Move events are typically extremely frequently triggered, so it is best to encapsulate and send them using throttling functions when processing them. This is easy to do with lodash.throttle.

  • Coordinate transformation

The size of the MxGraph fits across screens of different sizes, causing the mouse coordinates to map across different terminals rather than being exactly the same. Corresponding coordinates need to carry out the following mapping algorithm:

Since the size of each end of the whiteboard is different, Translate can look at the corrected displacement of the mouse position at the current end. After removing the corrected displacement graphX(Y) -translate. X(Y), the absolute position of the mouse on the whiteboard is left. Add the local offset x(y) + translate. X (y) to obtain the correct mouse position.

The mouse to draw

  • Task queue

If only throttling is sent, the remote end may receive a large number of congested messages in a certain period of time due to network fluctuations, and these messages are executed in random order, resulting in random mouse beats. So on the remote side, the idea of task queues is used to solve this problem.

Next () function is used to control the execution sequence, forcing the tasks triggered by asynchronously sending events to be executed synchronously. This idea is widely used in some NodeJS frameworks, such as ExpressJs middleware.

  • Smooth sliding

The mouse movement event is the data sent to the remote end after throttling, resulting in the coordinate information received by the remote end is leap-type. If the synchronous mouse drawing is triggered by the sending event, the animation effect drawn is also leap-type, giving a feeling of great lag. Colleagues discuss and search for information after selection

Window. RequestAnimationFrame smooth processing.

The reason is that the transform: Translate (x, y) in the SVG canvas behaves slightly differently than CSS. The transform: Translate of SVG elements will start the shift based on the x and Y attributes of the most recent ancestor SVG element.

This feature wraps the mouse image inside an SVG tag (as shown in the previous code) and determines the absolute displacement of the synchronized mouse by setting the X/Y property of pointer-Wrapper. The transform: Translate property of the two child elements of pointer-Wrapper is manipulated as a relative shift during a synchronized mouse movement. When the move ends, set the X /y attribute to the pointer-Wrapper as the final coordinate and transform: Translate (0, 0) as the final absolute position for the two child elements of the Pointer-Wrapper.

Click on the website to see for free how you can present your thought process to others in real time, from start to finish.

www.showmebug.com