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

<!DOCTYPE html>
<html>
<head>
    <title>Events</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 id="diagram" style="height: 600px;"></div>
    <script>
        function createDiagram() {
            var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

            var shapesDataSource = {
                batch: false,
                transport: {
                    read: {
                        url: serviceRoot + "/DiagramShapes",
                        dataType: "jsonp"
                    },
                    update: {
                        url: serviceRoot + "/DiagramShapes/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: serviceRoot + "/DiagramShapes/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: serviceRoot + "/DiagramShapes/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read") {
                            return { models: kendo.stringify(options.models || [options]) };
                        }
                    }
                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { from: "Id", type: "number", editable: false },
                            JobTitle: { type: "string" },
                            Color: { type: "string" }
                        }
                    }
                }
            };

            var connectionsDataSource = {
                batch: false,
                transport: {
                    read: {
                        url: serviceRoot + "/DiagramConnections",
                        dataType: "jsonp"
                    },
                    update: {
                        url: serviceRoot + "/DiagramConnections/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: serviceRoot + "/DiagramConnections/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: serviceRoot + "/DiagramConnections/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read") {
                            return { models: kendo.stringify(options.models || [options]) };
                        }
                    }
                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { from: "Id", type: "number", editable: false },
                            from: { from: "FromShapeId", type: "number" },
                            to: { from: "ToShapeId", type: "number" },
                            fromX: { from: "FromPointX", type: "number" },
                            fromY: { from: "FromPointY", type: "number" },
                            toX: { from: "ToPointX", type: "number" },
                            toY: { from: "ToPointY", type: "number" }
                        }
                    }
                }
            };

            $("#diagram").kendoDiagram({
                dataSource: shapesDataSource,
                connectionsDataSource: connectionsDataSource,
                layout: {
                    type: "tree",
                    subtype: "tipover",
                    underneathHorizontalOffset: 140
                },
                shapeDefaults: {
                    visual: visualTemplate,
                    content: {
                        template: "#= dataItem.JobTitle #",
                        fontSize: 17
                    }
                },
                connectionDefaults: {
                    stroke: {
                        color: "#586477",
                        width: 2
                    }
                },
                itemRotate: onItemRotate,
                pan: onPan,
                select: onSelect,
                zoomStart: onZoomStart,
                zoomEnd: onZoomEnd,
                click: onClick,
                dataBound: onDataBound,
                edit: onEdit,
                add: onAdd,
                mouseEnter: onMouseEnter,
                mouseLeave: onMouseLeave,
                remove: onRemove,
                cancel: onCancel,
                dragStart: onDragStart,
                drag: onDrag,
                dragEnd: onDragEnd
            });
        }

        function onDataBound(e) {
            var that = this;
            setTimeout(function () {
                that.bringIntoView(that.shapes);
            }, 0);
            kendoConsole.log("Diagram data bound");
        }

        function onEdit(e) {
            kendoConsole.log("Diagram edit");
        }

        function onAdd(e) {
            kendoConsole.log("Diagram add");
        }

        function onRemove(e) {
            kendoConsole.log("Diagram remove");
        }

        function onCancel(e) {
            kendoConsole.log("Diagram cancel");
        }

        function onItemRotate(e) {
            var rotation = e.item.rotate();
            kendoConsole.log("Rotate - angle: " + rotation.angle + " center: " + rotation.x + "," + rotation.y);
        }

        function onPan(e) {
            kendoConsole.log("Pan: " + e.pan.toString());
        }

        function onSelect(e) {
            var action;
            var items;
            if (e.selected.length) {
                action = "Selected";
                items = e.selected;
            } else if (e.deselected.length) {
                action = "Deselected";
                items = e.deselected;
            }

            kendoConsole.log(action + ": " + items.length);
        }

        function onZoomStart(e) {
            kendoConsole.log("Zoom start: " + e.zoom);
        }

        function onZoomEnd(e) {
            kendoConsole.log("Zoom end: " + e.zoom);
        }

        function onClick(e) {
            kendoConsole.log("Click: " + elementText(e.item));
        }

        function onMouseEnter(e) {
            kendoConsole.log("Mouse enter: " + elementText(e.item));
        }

        function onMouseLeave(e) {
            kendoConsole.log("Mouse leave: " + elementText(e.item));
        }

        function onDragStart(e) {
            kendoConsole.log("Drag start " + draggedElementsTexts(e));
        }

        function onDrag(e) {
            kendoConsole.log("Drag " + draggedElementsTexts(e));
        }

        function onDragEnd(e) {
            kendoConsole.log("Drag end " + draggedElementsTexts(e));
        }

        var diagram = kendo.dataviz.diagram;
        var Shape = diagram.Shape;
        var Connection = diagram.Connection;
        var Point = diagram.Point;

        function elementText(element) {
            var text;
            if (element instanceof Shape) {
                text = element.dataItem.JobTitle;
            } else if (element instanceof Point) {
                text = "(" + element.x + "," + element.y + ")";
            } else if (element instanceof Connection) {
                var source = element.source();
                var target = element.target();
                var sourceElement = source.shape || source;
                var targetElement = target.shape || target;
                text = elementText(sourceElement) + " - " + elementText(targetElement);
            }
            return text;
        }

        function draggedElementsTexts(e) {
            var text;
            var elements;
            if (e.shapes.length) {
                text = "shapes: ";
                elements = e.shapes;
            } else {
                text = "connections: ";
                elements = e.connections;
            }
            text += $.map(elements, function (element) {
                return elementText(element);
            }).join(",");
            return text;
        }

        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            if (dataItem.JobTitle === "President") {
                g.append(new dataviz.diagram.Circle({
                    radius: 60,
                    stroke: {
                        width: 2,
                        color: dataItem.Color || "#586477"
                    },
                    fill: "#e8eff7"
                }));
            } else {
                g.append(new dataviz.diagram.Rectangle({
                    width: 240,
                    height: 67,
                    stroke: {
                        width: 0
                    },
                    fill: "#e8eff7"
                }));

                g.append(new dataviz.diagram.Rectangle({
                    width: 8,
                    height: 67,
                    fill: dataItem.Color,
                    stroke: {
                        width: 0
                    }
                }));
            }

            return g;
        }

        $(document).ready(createDiagram);
    </script>    
</div>



    
</body>
</html>