Vis.js & Van.js working nicely together #267

kosirm · 2024-02-17T12:12:39Z

kosirm
Feb 17, 2024

This is just proof of concept as I'm learning van.js, but I'm happy that it works 🚀 🚐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <script src="https://vanjs.org/code/van-1.2.8.nomodule.min.js"></script>
    <script src="https://vanjs.org/code/van-x.nomodule.min.js"></script>
    <title>Document</title>
    <style type="text/css">
        html, body{margin:0;overflow: hidden;}
        #network {
            width: 100%;
            height: 60vh;
            border: 1px solid lightgray;
        }
        input[type="range"] {
            appearance: slider-vertical;
        }
        .ui-hold{
            width: 100%;
            height: 38vh;
            margin:0;padding: 10px;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <div id="network"></div>
    <script type="text/javascript">
        // create an array with nodes
        var nodeArray = [
            { id: 1, label: "Node 1", x: 115, y: 372 },
            { id: 2, label: "Node 2", x: 41, y: 231 },
            { id: 3, label: "Node 3", x: 276, y: 174 },
            { id: 4, label: "Node 4", x: -67, y: 107 },
            { id: 5, label: "Node 5", x: 92, y: 6 },
        ]
        var edgeArray = [
            { from: 1, to: 3 },
            { from: 1, to: 2 },
            { from: 2, to: 4 },
            { from: 2, to: 5 },
            { from: 3, to: 3 },
        ]
        var optionsObj = {
            physics:{
                enabled: false,
            },
            edges : {
                    color : {
                        color : "#0078D4",
                        highlight : "#3aa73a",
                        hover : "#3aa73a"
                    },
                    smooth : {
                        type : "curvedCW",
                        roundness : 0.4
                    },
                    font : {
                        align : "horizontal",
                        color : "white",
                        size : 14,
                        face : "Segoe UI",
                        strokeWidth : 0
                    },
                    arrows : {
                        to : {
                            enabled : true,
                            scaleFactor : 1,
                            type : "arrow"
                        }
                    }
            }
        }

        
        //vis nodes & edges
        var nodes = new vis.DataSet(nodeArray);
        var edges = new vis.DataSet(edgeArray);
        var options = vanX.reactive(optionsObj);
        var data = {nodes: nodes,edges: edges};
        var container = document.getElementById("network");
        //UI nodes & edges
        var network = new vis.Network(container, data, options);
        
        network.addEventListener("click", function(e){
            console.log(network.getPositions())
        })
        
        // VAN
        const { div, p, input, label, select, option,br } = van.tags;
        const Hello = () =>
            div({class:"ui-hold"},
                p({ style: "color:blue; font-size:30px;", id: "hello1" }, "👋Hello Van.js"),
                input({oninput: (e) => {
                        options.edges.smooth.roundness = parseFloat(e.target.value);
                        // console.log("changed",parseFloat(e.target.value));
                        network.setOptions(options);
                    }, 
                    type: "range", id: "smooth", name:"smooth",min:0, max:1, step:0.1, value: options.edges.smooth.roundness}),
                // select({onchange: (e) => {options.edges.smooth.type = e.target.value;network.setOptions(options);},
                //         name:"smooth-type",
                //         id:"smooth-type"},
                //         option({value:"curvedCW", selected: options.edges.smooth.type === "curvedCW" ? true : false /*SUDDENDLY WORKING*/},"Left"),
                //         option({value:"curvedCCW", selected: options.edges.smooth.type === "curvedCCW" ? true : false /*SUDDENDLY WORKING*/ },"Right")
                // ),
                br(),
                input({onchange: (e) => {options.edges.smooth.type = e.target.value;network.setOptions(options);},
                    type:"radio", id:"cw", name:"sm_type", value:"curvedCW", checked: options.edges.smooth.type === "curvedCW" ? true : false}),
                label( {for :"cw"},"Left"),
                input({onchange: (e) => {options.edges.smooth.type = e.target.value;network.setOptions(options);},
                    type:"radio", id:"ccw", name:"sm_type", value:"curvedCCW", checked: options.edges.smooth.type === "curvedCCW" ? true : false}),
                label( {for :"ccw"},"Right"),
            );
        van.add(document.body, Hello());
    </script>
</body>

</html>

Tao-VanJS · 2024-02-17T19:04:34Z

Tao-VanJS
Feb 17, 2024
Maintainer

Hooray!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vis.js & Van.js working nicely together #267

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Vis.js & Van.js working nicely together #267

kosirm Feb 17, 2024

Replies: 1 comment

Tao-VanJS Feb 17, 2024 Maintainer

kosirm
Feb 17, 2024

Tao-VanJS
Feb 17, 2024
Maintainer