jube-fork/Jube.App/wwwroot/kendo/examples/diagram/api.html

<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">

    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Add Shape</h4>
            <ul class="options">
                <li>
                    <label for="newShapeX" style="width: 30px;">X:</label>
                    <input data-role="numerictextbox" id="newShapeX" data-bind="value: newShapeX" />
                </li>
                <li>
                    <label for="newShapeY" style="width: 30px;">Y:</label>
                    <input data-role="numerictextbox" id="newShapeY" data-bind="value: newShapeY" />
                </li>
                <li>
                    <button type="button" data-role="button" data-bind="click: addShape">Add</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Add Connection</h4>
            <ul class="options">
                <li>
                    <label for="fromShapeIndex" style="width: 90px;">From Index:</label>
                    <input data-role="numerictextbox" id="fromShapeIndex" data-min="0" data-format="n0" data-decimals="0" data-bind="value: fromShapeIndex" />
                </li>
                <li>
                    <label for="toShapeIndex" style="width: 90px;">To Index:</label>
                    <input data-role="numerictextbox" id="toShapeIndex" data-min="0" data-format="n0" data-decimals="0" data-bind="value: toShapeIndex" />
                </li>
                <li>
                    <button type="button" data-role="button" data-bind="click: addConnection">Add</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Remove:</h4>
            <ul class="options">
                <li>
                    <button type="button" data-role="button" data-bind="click: remove">Remove Selected</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Select Shape</h4>
            <ul class="options">
                <li>
                    <label for="selectShapeIndex">Select At:</label>
                    <input data-role="numerictextbox" id="selectShapeIndex" data-min="0" data-format="n0" data-decimals="0" data-bind="value: selectShapeIndex" />
                </li>
                <li>
                    <button type="button" data-role="button" data-bind="click: select">Select</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Zoom/Pan</h4>
            <ul class="options">
                <li>
                    <input data-role="slider" id="zoom" data-min="0.1" data-max="2" data-show-buttons="false" data-small-step="0.1" data-bind="value: zoom, events: {change: zoomDiagram}" />
                </li>
                <li>
                    <label for="panX">Pan X:</label>
                    <input data-role="numerictextbox" id="panX" data-bind="value: panX" />
                </li>
                <li>
                    <label for="panY">Pan Y:</label>
                    <input data-role="numerictextbox" id="panY" data-bind="value: panY" />
                </li>
                <li>
                    <button type="button" data-role="button" data-bind="click: pan">Pan</button>
                </li>
            </ul>
        </div>
    </div>
    <div id="diagram"></div>

    <script>
        function createDiagram() {
            var element = $("#diagram").kendoDiagram({});
            var diagram = element.data("kendoDiagram");
            var shape1 = diagram.addShape({ x: 100, y: 100 });
            var shape2 = diagram.addShape({ x: 300, y: 100 });
            diagram.connect(shape1, shape2);
        }

        $(document).ready(function () {
            createDiagram();
            var Point = kendo.dataviz.diagram.Point;
            var diagram = $("#diagram").data("kendoDiagram");

            var viewModel = kendo.observable({
                newShapeX: 0,
                newShapeY: 0,
                fromShapeIndex: 0,
                toShapeIndex: 0,
                selectShapeIndex: 0,
                zoom: 1,
                panX: 0,
                panY: 0,
                addShape: function () {
                    diagram.addShape({ x: this.get("newShapeX"), y: this.get("newShapeY") });
                },
                addConnection: function () {
                    var shapes = diagram.shapes;
                    var total = shapes.length;
                    var fromIndex = this.get("fromShapeIndex");
                    var toIndex = this.get("toShapeIndex");
                    if (fromIndex < total && toIndex < total) {
                        diagram.connect(shapes[fromIndex], shapes[toIndex]);
                    }
                },
                remove: function () {
                    diagram.remove(diagram.select());
                },
                select: function () {
                    diagram.select(diagram.shapes[this.get("selectShapeIndex")]);
                },
                zoomDiagram: function () {
                    diagram.zoom(this.get("zoom"));
                },
                pan: function () {
                    diagram.pan(new Point(this.get("panX"), this.get("panY")));
                }
            });

            kendo.bind($(".configurator"), viewModel);
        });
        $(document).bind("kendo:skinChange", createDiagram);
    </script>

    <style type="text/css">
        #apiOptions label {
            display: inline-block;
        }
    </style>
</div>


    
</body>
</html>