Open, easy to expand, easy integration line drawing (FIG micro-service architecture, network topology, a flowchart) tools

A typescript + open source online drawing canvas to achieve the engine Topology-based. Using engine + graphics library middleware ideas for easy and fast expansion, integrated into the front end of the project. Time being to achieve the basic graphics, flow charts graphics library, to meet, and draw a flow chart of the network topology micro-service architecture diagram. Back plan after another to achieve an activity diagram / timing chart / diagram UML class diagrams.

Online experience (as easy to operate problems, there is no end mobile adaptation)        Products

Why repeat-create the wheel

• Encountered more micro-service architecture, cloud resources, operation and maintenance, deployment and operation and maintenance of the author visualization needs work
• Open source, to meet their own needs much
• typescript + much pure canvas architecture
• Middleware can be customized to meet the fashion scene is not much different
• Most importantly, the interest is not difficult to +

 

Feature

• Open source
• Customizable
• Easy to use, easy to integrate
• Good performance, very smooth
• Convenient data import and export
• Picture Save / Preview
• typescript + canvas

 

scenes to be used

• Micro-service architecture diagram
• When the maintenance operation deployment topology diagram
• flow chart

Follow-up will be launched:

• Activity Diagram
• Timing diagram
• FIG other class

 

Architecture design

Mainly by: layer, nodes, and arrows connecting other components.

Floor:

Layer here, mainly in order to enhance the performance of the logical layer; ps irrelevant to the user similar to layers inside.

Offscreen layer : all the drawing data, is the most stable layer.

Selected layer : the user selects some or all of the nodes / highlight connection layer, and set the associated properties, scale, and rotation.

Animation Layers : mainly used for animation.

Activity level : mainly used for arrow mouse interaction events, such as anchors and connection process.

 

node:

Is a major component of the canvas, internal node may also contain icons or text.

 

Connection and arrows:

And connecting arrows are associated together. Both ends of the connection can not set or choose settings arrow.

 

Node may be scaled by the overall control points, rotating.

 

Connection shows only the connection between the nodes described point, there is no scaling, rotation. Scaled or rotated will cause node weight calculation control points. The shape may be varied by a control connection point of the line.

Painting and property

Various nodes and links have their own drawing properties, but also may be provided an additional custom data

 

Use rapid integration

es6 use examples:

github.com/le5le-com/t…

typescript use examples:

github.com/le5le-com/t…

 

installation

Use NPM (or Yarn) mounted use.

 

# Installation drawing engine 
NPM the install topology- Core 

# Installation of the library - a flowchart 
NPM the install-flow- Topology Diagram
 # ... other graphics library

 

Create a base canvas

 

// 1. Import paint engine 
Import {} from the Topology 'Topology-Core' ; 

// 2. Create canvas 
// wherein the first parameter 'topo-canvas' represents a dom element id canvas; 
// second parameter {} denotes the canvas option, shown here all use the default. Specific options, consult the api documentation behind. 
var Canvas = new new the Topology ( 'TOPO-Canvas' , {}); 

// 3. render graphics 
// wherein the first parameter represents the pattern data {} 
// second parameter true, that opens a new file; otherwise, in the current file is opened, the overlay graphic data existing 
canvas.render ({}, to true );

 

Methods commonly used canvas

 

// Get data canvas 
const Data = the this .canvas.data (); 

// save the image as a BLOB 
// The toImage function parameters: type, Quality, the callback 
the this .canvas.toImage ( null , null , BLOB => {
   // the Do . STH 
}); 

// download a picture 
// saveAsImage function parameter: filename, type, Quality 
the this .canvas.saveAsImage ( 'canvas.png' ); 

// editing related operations 
the this .canvas.cut ();
 the this .canvas .copy ();
 the this .canvas.parse ();
 the this .canvas.undo ();
 the this .canvas.redo ();

 

 

References Third-party graphics library

 

 

// use a third party graphics library 

// 1. Sign function to import 
Import registerNode {} from 'Topology-Core / - Middles' ; 

// 2. Import graphics library graphical elements and their associated 
Import { 
  flowData, 
  flowDataAnchors, 
  flowDataIconRect, 
  flowDataTextRect, 
  flowSubprocess, 
  flowSubprocessIconRect, 
  flowSubprocessTextRect, 
  flowDb, 
  flowDbIconRect, 
  flowDbTextRect, 
  FlowDocument, 
  flowDocumentAnchors, 
  flowDocumentIconRect, 
  flowDocumentTextRect, 
  flowInternalStorage, 
  flowInternalStorageIconRect, 
  flowInternalStorageTextRect,  
  flowExternStorage,
  flowExternStorageAnchors,
  flowExternStorageIconRect,
  flowExternStorageTextRect,
  flowQueue,
  flowQueueIconRect,
  flowQueueTextRect,
  flowManually,
  flowManuallyAnchors,
  flowManuallyIconRect,
  flowManuallyTextRect,
  flowDisplay,
  flowDisplayAnchors,
  flowDisplayIconRect,
  flowDisplayTextRect,
  flowParallel,
  flowParallelAnchors,
  flowComment,
  flowCommentAnchors
} from 'topology-flow-diagram';

// 3. 向引擎注册图形库图形及其相关元素
registerNode('flowData', flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);
registerNode ( 'flowSubprocess', flowSubprocess, null, FlowSubprocessIconRect, flowSubprocessTextRect); 
registerNode ( 'flowDb', flowDb, null , flowDbIconRect, flowDbTextRect); 
registerNode ( 'FlowDocument' , FlowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect);
 // ... 

// The following is a simple description of the registration function For details, please refer to the api documentation 
// registerNode: Register a custom graphic nodes the node. 
// name - the name of the node. 
// drawFn - the node rendering functions. Incoming canvas ctx and node data, decide how to draw node 
// anchorsFn - computing node anchors, if null, which means that default anchor calculation method 
// iconRectFn - icon area of computing node, if it is null, meaning use the default icon area calculation method 
// textRectFn - computing node text area, if it is null, use the default text area calculation method 
//force - if it already exists with the same name node, whether or not covered. 
Export function registerNode ( 
  name: String, 
  drawFn: (ctx: CanvasRenderingContext2D, the Node: the Node) => void , 
  anchorsFn : (the Node: the Node) =>? void , 
  iconRectFn : (? the Node: the Node) => void , 
  textRectFn : (the Node: the Node) =>? void , 
  Force :? boolean 
);

 

 

Developing its own graphics library

Reference developer documentation:  www.yuque.com/alsmile/top...

 

project address

• github
• File 

Epilogue

Personal development weekend, there is still plenty of room for improvement, welcomes comments and exchanges.

Micro letter: alsmile123

 

Personal server resources are very very very small, open slowly please be patient. Welcome to financing:).