This is the first day of studying Twaver

First, understand what Twaver can do:
Official documents: welcome to read
I mainly study here:
Development guide – TWaver HTML5 2D

Basic concepts

TWaver HTML5 (hereinafter referred to as TWaver) uses HTML5 technology and javascript language to draw on browsers that support HTML5.

Before using TWaver, you need to be familiar with several basic concepts: Element, DataBox and Network.

Primitives: various basic elements in graphics, such as nodes, links, etc;
Container: all elements are uniformly placed in one container (DataBox) for management, just like the "basket containing eggs". It is responsible for the management operations such as adding / deleting / modifying / searching of primitives;
Canvas: the elements are finally drawn on the network component. Network is the graphic component seen by the end user, which is responsible for the specific drawing and interaction of the graphic screen;

Official suggestion: Note: the above concepts are the most basic concepts you need to master when using TWaver skillfully. Please master them skillfully.

We need to understand
1. The element is the smallest unit;
2. The elements need to be placed in the container;
3. The final primitive will be rendered on the canvas;

Here's an official example:

function init() {    
    var box = new twaver.ElementBox();
    var network = new twaver.vector.Network(box);  
 
    document.body.appendChild(network.getView());
    network.adjustBounds({x:0, y:0, width:500, height:500});
 
    var node1 = new twaver.Node();
    node1.setName("TWaver");
    node1.setLocation(100, 100);
    box.add(node1);  
 
    var node2 = new twaver.Node();
    node2.setName("HTML5");
    node2.setLocation(300, 200);
    box.add(node2);  
 
    var link = new twaver.Link(node1, node2);
    link.setName("Hello!");
    link.setToolTip("<b>Hello!</b>");
    box.add(link);
}

new twaver.ElementBox: create a container;
new twaver.vector.Network: create a canvas and pass in the container;
document.body.appendChild(network.getView());: append the canvas to the page;
network. Adjustboundaries: set the canvas size;
new twaver.Node: create a node node;
ew twaver.Link creates a line
box.add: add the element to the container;

react version

First, I introduce Twaver JS, all the modules I have configured in webpack for easy introduction
On webpack config. JS

   externals: {
      "$": "window.$",
      "twaver": "window.twaver",
      "license2d": "window.license2d",
    },

In this way, the following form can be used inside the component, but the premise is that it needs to be in index The use of script in HTML has been introduced;

      <script src="../../static/jquery.min.js"></script>
      <script src="../../static/twaver.js"></script>
      <script src="../../static/license2d.js"></script>

In the react component, you can directly import it in the form of commonJSd:

const $ = require('$');
const twaver = require('twaver');

First, the following methods are encapsulated:

const twaver = require('twaver');
/**
 * Create a dataBox container
 * You can add elements in a container
 */
export const returnElementBoxFun = () => new twaver.ElementBox()


/**
 * Create a canvas network object
 * @param {ElementBox} box  Create a canvas network object
 */
export const returnNetworkFun = (box) => new twaver.vector.Network(box)

/**
 * Create a container dataBox and a canvas
 * And instantiate the container to the canvas
 * @returns [box,network] box network
 */
export const returnElementBoxAndNetworkFun = () => {
    let box = returnElementBoxFun();
    let network = returnNetworkFun(box);
    return [box, network]
}



/**
 * Used to create a node
 * @param {ElementBox} box dataBox 
 * @param {String} name name of current node
 * @param {Number} x   x coordinate of the current node
 * @param {Number} y y coordinate of current node
 * @returns {Node} Node
 */
export const returnNodeFun = (box, name, x, y) => {
    let node = new twaver.Node();
    node.setName(name);
    node.setLocation(x, y);
    box.add(node);
    return node
}

/**
 * 
 * @param {Node} node1 Node 1
 * @param {Node} node2 Node 2
 */
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)

react component:

import React, { useEffect, useState } from 'react'
import {
    returnElementBoxFun,
    returnNetworkFun,
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
} from './utils'
const Demo = () => {
    const [network, setnetwork] = useState({})
    const init = () => {
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        // network.style.position = 'absolute';
        document.getElementById("testID").appendChild(network.getView());
        // Set initial size
        network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });
        // Draw two points
        let node1 = returnNodeFun(box, 'Node 1', 100, 100)
        let node2 = returnNodeFun(box, 'Node 2', 200, 100)
        //The drawing connection parameters are two node nodes
        let link = returnLineFun(node1, node2);
        link.setName("my first line");
        link.setToolTip('<b>This is a line</b>');
        box.add(link);
    }
    useEffect(init, [])
    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px",poaddingTop:"50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li> Create a container dataBox</li>
                <li> Create a canvas network</li>
                <li> Create two with name Point of</li>
                <li> Two points are connected into a line</li>
                <li> Line add to dataBox</li>
            </ul>
            {/* Canvas elements need to be positioned, otherwise the coordinate points of the generated elements will be offset */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo

The final result is: