малко помощ с jsplumb, groups, nodes, edges

[vasilev]

здравейте,
опитвам се да подкарам това:

GitHub - jsplumb-toolkit-demonstrations/groups: Rendering node groups.

Rendering node groups. Contribute to jsplumb-toolkit-demonstrations/groups development by creating an account on GitHub.

github.com

но без nodejs и до колкото разбирам само
jsplumb.browser-ui.umd.js е достатъчен..

<script type="jtk" id="tmplNode">
    <div style="width:${w}px;height:${h}px;">
        <div class="name">
            <div class="delete" title="Click to delete">
                <i class="fa fa-times"/>
            </div>
            <span>${name}</span>
        </div>
        <div class="connect"/>
        <jtk-source filter=".connect"/>
        <jtk-target/>
    </div>
</script>
<script type="jtk" id="tmplGroup">
    <div>
        <div class="group-title">
            ${title}
            <button class="expand"></button>
        </div>
        <div jsplumb-group-content="true"></div>
    </div>
</script>
<div class="jtk-demo-main">
    <div class="jtk-demo-canvas">
        <div class="miniview"></div>
    </div>
</div>

......

jsPlumb.ready(function () {

    let mainElement = $(".jtk-demo-main");
    let canvasElement = $(".jtk-demo-canvas");
    let miniviewElement = $(".miniview");

    var data = {
        "groups": [
            { "id": "one", "title": "Group 1", "left": 100, top: 50 },
            { "id": "two", "title": "Group 2", "left": 450, top: 250, type: "constrained" }
        ],
        "nodes": [
            { "id": "window1", "name": "1", "left": 10, "top": 20, group: "one" },
            { "id": "window2", "name": "2", "left": 140, "top": 50, group: "one" },
            { "id": "window3", "name": "3", "left": 450, "top": 50 },
            { "id": "window4", "name": "4", "left": 110, "top": 370 },
            { "id": "window5", "name": "5", "left": 140, "top": 150, group: "one" },
            { "id": "window6", "name": "6", "left": 50, "top": 50, group: "two" },
            { "id": "window7", "name": "7", "left": 50, "top": 450 }
        ],
        "edges": [
            { "source": "window1", "target": "window3" },
            { "source": "window1", "target": "window4" },
            { "source": "window3", "target": "window5" },
            { "source": "window5", "target": "window2" },
            { "source": "window4", "target": "window6" },
            { "source": "window6", "target": "window2" }
        ]
    };
    var view = {
        nodes: {
            "default": {
                template: "tmplNode"
            }
        },
        groups: {
            "default": {
                template: "tmplGroup",
                endpoint: "Blank",
                anchor: "Continuous",
                revert: false,
                orphan: true,
                autoSize: true,
                constrain: false,
                layout: {
                    type: "Circular"
                }
            },
            constrained: {
                parent: "default",
                constrain: true
            }
        }
    };
    var toolkit = jsPlumb.newInstance({
        groupFactory: function (type, data, callback) {
            data.title = "Group " + (toolkit.getGroupCount() + 1);
            callback(data);
        },
        nodeFactory: function (type, data, callback) {
            data.name = (toolkit.getNodeCount() + 1);
            callback(data);
        }
    });
    var renderer = toolkit.render({
        container: canvasElement,
        view: view,
        layout: {
            type: "Spring",
            absoluteBacked: false
        },
        jsPlumb: {
            Anchor: "Continuous",
            Endpoint: "Blank",
            Connector: ["StateMachine", { cssClass: "connectorClass", hoverClass: "connectorHoverClass" }],
            PaintStyle: { strokeWidth: 1, stroke: '#89bcde' },
            HoverPaintStyle: { stroke: "orange" },
            Overlays: [
                ["Arrow", { fill: "#09098e", width: 10, length: 10, location: 1 }]
            ]
        },
        miniview: {
            container: miniviewElement
        },
        lassoFilter: ".controls, .controls *, .miniview, .miniview *",
        dragOptions: {
            filter: ".delete *"
        },
        events: {
            canvasClick: function (e) {
                toolkit.clearSelection();
            },
            modeChanged: function (mode) {
                jsPlumb.removeClass(jsPlumb.getSelector("[mode]"), "selected-mode");
                jsPlumb.addClass(jsPlumb.getSelector("[mode='" + mode + "']"), "selected-mode");
            }
        },
        consumeRightClick: false
    });
});

получавам грешка:

Uncaught TypeError: can't access property "setAttribute", el is null
jsplumb.browser-ui.umd.js:12591
jsplumb.browser-ui.umd.js:12974
jsplumb.browser-ui.umd.js:10832
jsplumb.browser-ui.umd.js:130
jsplumb.browser-ui.umd.js:12384
jsplumb.browser-ui.umd.js:15933
graph.tracking.js:58 -> това е скрипта който съм постнал тук
jsplumb.browser-ui.umd.js:15938

 

[uphero]

Защо HTML кода е в script таг

 

[deam0n]

Защо HTML кода е в script таг

Защото се използва някакъв темлпейт енджин.