jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!DOCTYPE HTML><html><head>    <script src="../dist/vis.js"></script>    <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />    <style type="text/css">        .graph {            width: 600px;            height: 500px;        }  </style></head><body>
Reset causes crash
<pre>
When you press the button, the nodes dataset will receive an update which shall reset the font and color properties, instead, vis crashes :(
(The browser console shows the details)
</pre>
<button onclick="javascript:action()">Click me!</button>
<div class="graph" id="visualization1"></div>

<script type="text/javascript">
    var action = function() {        nodes.update([            {                "id": "35b99ac8-aa07-4834-b508-6e9435f573cb",                "label": "Adam",                "x": -96,                "y": -382,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "38d37e10-3c8b-487c-9757-1061d2bbbd07",                "label": "Betsy",                "x": -19,                "y": -548,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "4762501a-6bcb-4d35-acfd-f2e9d6310389",                "label": "Carol",                "x": -243,                "y": -378,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",                "label": "Catherine",                "x": -551,                "y": -214,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "e017a09b-4526-4b4d-b097-f70e56f20ab4",                "label": "Craig",                "x": 155,                "y": -381,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",                "label": "George",                "x": -302,                "y": -536,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",                "label": "Jessica",                "x": -4,                "y": -379,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "afd75e95-e45a-4dea-848a-e16ca735bc57",                "label": "John",                "x": -531,                "y": -543,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "9c050064-d805-48b3-80a6-181d3599daff",                "label": "Mary",                "x": -280,                "y": -210,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "f24ab062-62a1-4555-a57f-dfcd597c3515",                "label": "Michael",                "x": -98,                "y": -211,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",                "label": "Michelle",                "x": -630,                "y": -387,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "b11149a2-9050-4632-b095-d9d233319b91",                "label": "Robert",                "x": -360,                "y": -380,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            },            {                "id": "a1485262-99fe-4b1e-a246-cc70fbb1859a",                "label": "Sharon",                "x": -532,                "y": -384,                "fixed": {                    "x": true,                    "y": true                },                "color": null,                "font": null            }        ]);    }
    var nodes = new vis.DataSet([        {            "id": "35b99ac8-aa07-4834-b508-6e9435f573cb",            "label": "Adam",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -96,            "y": -382,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "38d37e10-3c8b-487c-9757-1061d2bbbd07",            "label": "Betsy",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -19,            "y": -548,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "4762501a-6bcb-4d35-acfd-f2e9d6310389",            "label": "Carol",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -243,            "y": -378,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",            "label": "Catherine",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -551,            "y": -214,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "e017a09b-4526-4b4d-b097-f70e56f20ab4",            "label": "Craig",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": 155,            "y": -381,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",            "label": "George",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -302,            "y": -536,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",            "label": "Jessica",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -4,            "y": -379,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "afd75e95-e45a-4dea-848a-e16ca735bc57",            "label": "John",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -531,            "y": -543,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "9c050064-d805-48b3-80a6-181d3599daff",            "label": "Mary",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -280,            "y": -210,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "f24ab062-62a1-4555-a57f-dfcd597c3515",            "label": "Michael",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -98,            "y": -211,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",            "label": "Michelle",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -630,            "y": -387,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "b11149a2-9050-4632-b095-d9d233319b91",            "label": "Robert",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -360,            "y": -380,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        },        {            "id": "a1485262-99fe-4b1e-a246-cc70fbb1859a",            "label": "Sharon",            "color": {                "background": "rgba(252,245,170,1)",                "border": "rgba(183,148,134,1)"            },            "x": -532,            "y": -384,            "fixed": {                "x": true,                "y": true            },            "font": {                "color": "#000000"            }        }    ]);
    var edges = new vis.DataSet([        {            "id": "62b28c2f-c6dc-4b6b-b108-722eb47d5972",            "from": "35b99ac8-aa07-4834-b508-6e9435f573cb",            "to": "f24ab062-62a1-4555-a57f-dfcd597c3515",            "type": "family:father of",            "label": "father of",            "color": "#bc960d",            "labelAlignment": "line-above"        },        {            "id": "4ae8de41-ef1a-400a-b51b-05662ce24597",            "from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",            "to": "e017a09b-4526-4b4d-b097-f70e56f20ab4",            "type": "family:mother of",            "label": "mother of",            "color": "#eec75b",            "labelAlignment": "line-above"        },        {            "id": "70f6e36a-ce9a-47b4-97e1-14b2df17d204",            "from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",            "to": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",            "type": "family:mother of",            "label": "mother of",            "color": "#eec75b",            "labelAlignment": "line-above"        },        {            "id": "c32a86ce-ab9a-49b6-a202-e93a37265fda",            "from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",            "to": "b11149a2-9050-4632-b095-d9d233319b91",            "type": "family:mother of",            "label": "mother of",            "color": "#eec75b",            "labelAlignment": "line-above"        },        {            "id": "bbce9cc0-0353-45cd-bfa6-a13834ff7218",            "from": "4762501a-6bcb-4d35-acfd-f2e9d6310389",            "to": "f24ab062-62a1-4555-a57f-dfcd597c3515",            "type": "family:mother of",            "label": "mother of",            "color": "#eec75b",            "labelAlignment": "line-above"        },        {            "id": "deb7eb05-f667-496b-aeda-205c37b2484b",            "from": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",            "to": "afd75e95-e45a-4dea-848a-e16ca735bc57",            "type": "family:brother of",            "label": "brother of",            "color": "green",            "labelAlignment": "line-above"        },        {            "id": "3c8c7947-6c82-4f98-978a-26bbb372bfbb",            "from": "afd75e95-e45a-4dea-848a-e16ca735bc57",            "to": "a1485262-99fe-4b1e-a246-cc70fbb1859a",            "type": "family:father of",            "label": "father of",            "color": "#bc960d",            "labelAlignment": "line-above"        },        {            "id": "cd4e71e7-9735-4a42-8632-e88cc01ab64f",            "from": "f24ab062-62a1-4555-a57f-dfcd597c3515",            "to": "9c050064-d805-48b3-80a6-181d3599daff",            "type": "family:brother of",            "label": "brother of",            "color": "green",            "labelAlignment": "line-above"        },        {            "id": "b4499f60-04f9-4306-9c57-3d73b72f37c0",            "from": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",            "to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",            "type": "family:mother of",            "label": "mother of",            "color": "#eec75b",            "labelAlignment": "line-above"        },        {            "id": "16562853-b597-44f6-9c55-2ce8a1fe4f83",            "from": "b11149a2-9050-4632-b095-d9d233319b91",            "to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",            "type": "family:father of",            "label": "father of",            "color": "#bc960d",            "labelAlignment": "line-above"        },        {            "id": "599dd644-e61f-401e-8b17-dfdd340c125e",            "from": "b11149a2-9050-4632-b095-d9d233319b91",            "to": "9c050064-d805-48b3-80a6-181d3599daff",            "type": "family:father of",            "label": "father of",            "color": "#bc960d",            "labelAlignment": "line-above"        },        {            "id": "961f7f2b-5abe-4036-a155-aa9b30ae1260",            "from": "b11149a2-9050-4632-b095-d9d233319b91",            "to": "a1485262-99fe-4b1e-a246-cc70fbb1859a",            "type": "family:married to",            "title": "Does not need to be a christian marriage though...",            "label": "married to",            "color": "#17bba3",            "labelAlignment": "line-above"        }    ]);
    var data = {        nodes: nodes,        edges: edges    };
    var options = {                "autoResize": true,                "height": "100%",                "width": "100%",                "interaction": {                    "dragNodes":true,                    "dragView": true,                    "hideEdgesOnDrag": false,                    "hideNodesOnDrag": false,                    "hover": false,                    "navigationButtons": true,                    "selectable": true,                    "selectConnectedEdges": true,                    "tooltipDelay": 300,                    "zoomView": true,                    "keyboard": {                        "enabled": false,                        "speed": {                            "x": 10,                            "y": 10,                            "zoom": 0.02                        },                        "bindToWindow": true                    }                },                "nodes": {                    "shape": "box",                    font: {color:"#ff0000"},                    "color": {                        "border" : "#2B7CE9",                        "background" : "#97C2FC",                        "highlight": {                            "border": "#2B7CE9",                            "background": "#D2E5FF"                        },                        "hover": {                            "border": "white",                            "background": "white"                        }                    }                },                "physics": {                    "barnesHut": {                        "centralGravity": 0,                        "springLength": 240                    }                },                "groups": {                    "neighbours": {                        "color": "#E6E6E6"                    },                    "matches": {                        "color": "#97C2FC"                    }                },
                "locale": "en_EN"            }            ;
    var container = document.getElementById("visualization1");
    var network = new vis.Network(container, data, options);
    var hasNetworkStabilized = false;    network.on("stabilized", function(properties) {
        if(!hasNetworkStabilized) {            hasNetworkStabilized = true;
            network.storePositions();            setNodesMoveable(data.nodes.get(), false);
            network.fit();        }
    });
    network.on("dragStart", function(properties) {        if(properties.nodes.length) {            var node = data.nodes.get(properties.nodes[0]);            setNodesMoveable([ node ], true);        }    });
    network.on("dragEnd", function(properties) {        if(properties.nodes.length) {            var node = data.nodes.get(properties.nodes[0]);            setNodesMoveable([ node ], false);        }    });
    setNodesMoveable = function(nodes, isMoveable) {
        // first store positions        network.storePositions();
        var updates = [];        var keys = Object.keys(nodes);
        for(var i = 0; i < keys.length; i++) {
            var id = nodes[keys[i]].id;
            var update = {                id: id,                fixed: {  // v4: formerly allowToMoveX, allowToMoveY                    x: !isMoveable,                    y: !isMoveable                }            };
            updates.push(update);
        }
        data.nodes.update(updates);
        console.log(updates);
    };


</script></body></html>