下降事件中的Kendo UI Dataviz图表位置形状

时间:2014-04-03 17:06:37

标签: javascript kendo-ui kendo-dataviz kendo-draggable

我有一个webapp设置,我使用树视图拖动文件名并将其放在图表上以用作可视化处理系统(ETL)。我有一个工作系统,我将X和Y坐标(从drop事件)传递给数据源(item.X,item.Y),当我将文件放到图表空间时,放置组(不可见左上角的连接点的黄色点,以及基于放置位置的textBlock和Image(在分组内)在适当的位置。有没有办法为整个集团指定X和Y坐标?

也许我完全误解了X Y的作用是什么?

function load_kendo() {
    // global variable used to save off the editor file name to be saved later
    var file;
    var parentMenu;
    var X;
    var Y;
    var appServer = "https://endeavour:3000";

    document.onmousemove = function(e) {
        X = e.pageX;
        Y = e.pageY;
    }

    var popup = $("#popupNotification").kendoNotification().data("kendoNotification");

    // Navigation menu, top-left of screen
    $("#user-menu").kendoMenu();

    // Set up the popup window, but default state is closed
    var settings = $("#settings");
    settings.kendoWindow({
        title: "Settings",
        modal: true,
        actions: ["Minimize","Maximize","Close"],
        width: "600px",
        height: "600px",
        visible: false
    });

    // Add click event handler to open popup for settings
    $("#open-settings").click(function() {
        settings.data("kendoWindow").center();
        settings.data("kendoWindow").open();
    });

    // Left navigation panelbar
    var panelbar = $("#panelbar");
    panelbar.kendoPanelBar({
        expandMode: "single"
    });

    //
    var dragDropFilesDS = new kendo.data.HierarchicalDataSource();

    var dragDropFiles = $("#dragDropFiles").kendoDiagram({
        dataSource : dragDropFilesDS,
        shapeDefaults: {
            visual: visualTemplate
        }
    }).data('kendoDiagram');
    //

    // File browsers
    var parserLibraryDS = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: appServer + "/directory_list?directory=parser-library"
            }
        },
        schema: {
            model: {
                children: "files"
            }
        }
    });
    var parserLibrary = $("#parser-library").kendoTreeView({
        dataSource: parserLibraryDS,
        dragAndDrop: true
    }).data('kendoTreeView');

    var parserLibraryUserDS = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: appServer + "/directory_list?directory=parser-library-user"
            }
        },
        schema: {
            model: {
                children: "files"
            }
        }
    });
    var parserLibraryUser = $("#parser-library-user").kendoTreeView({
        dataSource: parserLibraryUserDS,
        dragAndDrop: true
    }).data('kendoTreeView');

    var filebrowserDS = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: appServer + "/directory_list"
            }
        },
        schema: {
            model: {
                children: "files"
            }
        }
    });
    var filebrowser = $("#filebrowser").kendoTreeView({
        dataSource: filebrowserDS,
        dragAndDrop: true,
        drag: function(e) {
            if (!$("#filebrowser").data('kendoTreeView').dataItem(e.sourceNode).hasChildren &&
                $.contains($("#dragDropFiles")[0], e.dropTarget)) {
                e.setStatusClass('k-add');
            }
            else {
                e.setStatusClass('k-denied');
            }
        },
        drop: function(e) {
            if (e.valid) {
                var item = $("#filebrowser").data('kendoTreeView').dataItem(e.sourceNode);
                var extPat = /\.([0-9a-z]{1,5})$/i;
                var extension = item.text.match(extPat);
                var imgUrl = "images/file_icons/" + extension[1] + ".png";

                if (imageExists(imgUrl)) {
                    dragDropFilesDS.add({text: item.text, path: item.fullPath, image: imgUrl, x: X, y: Y});
                }
                else {
                    imgUrl = "images/file_icons/generic_file.png";
                    dragDropFilesDS.add({text: item.text, path: item.fullPath, image: imgUrl, x: X, y: Y});
                }
            }
            e.preventDefault();
        }
    }).data('kendoTreeView');

    var previewWindow = $("#preview-file-contents").kendoWindow({
        visible: false,
        actions: ["Save", "Minimize", "Maximize", "Restore", "Close"],
        width: 600,
        height: 400
    }).data('kendoWindow');

    var codemirror = CodeMirror.fromTextArea(codemirrorTextarea); //, { lineNumbers: true }

    $("#preview-file-contents").data('kendoWindow').wrapper.find('.k-i-save').click(function(e) {
        var regex = /\/(.[^\/]+)$/;
        var filename = regex.exec(file);

        $.post("fileops", { operation: 'save', filename: file, contents: codemirror.getValue() }, function(data) {
            if (parentMenu === "#filebrowser") {
                filebrowserDS.read();
            }
            else if (parentMenu === "#parser-library") {
                parserLibraryDS.read();
            }
            else if (parentMenu === "#parser-library-user") {
                parserLibraryUserDS.read();
            }
            previewWindow.close();
        }).done(function(data, textStatus, xhr) {
            popup.success(filename[1] + " saved!");
        }).fail(function(xhr) {
            popup.error("Error, " + filename[1] + " not saved! (" + xhr.status + " " + xhr.statusText + ")");
        });
    });

    $.contextMenu({
        selector: '#panelbar li',
        items: {
            "Preview": {name: "Preview",
                        icon: "preview",
                        callback: function(key, options) {
                            parentMenu = '#' + $(this).closest('div').attr('id');
                            file = $(parentMenu).data('kendoTreeView').dataItem($(this)).fullPath;
                            var regex = /\/(.[^\/]+)$/;
                            var filename = regex.exec(file);
                            var qparameters;
                            // The basic logic here is that if it is a script, load the whole thing...otherwise restrain it to N lines (100 for now, configurable later)
                            // TODO: Implement a mechanism for the user to define and then adjust the number of lines returned, perhaps even a "load more" button?
                            if (parentMenu === '#filebrowser') {
                                qparameters = "fileSample?file=" + file + "&lines=100";
                            }
                            else {
                                qparameters = "fileSample?file=" + file;
                            }
                            $.getJSON(qparameters, function(data) {
                                if (data.includes) {
                                    s = document.createElement('script');
                                    s.type = 'text/javascript';
                                    s.src = data.includes;
                                    $("head").append(s);
                                }
                                previewWindow.center().open();
                                codemirror.setOption('mode', data.type);
                                codemirror.setValue(data.fileContents);
                                codemirror.refresh();
                            }).fail(function(xhr) {
                                popup.error("Error, " + filename[1] + " not opened! (" + xhr.status + " " + xhr.statusText + ")");
                            });
                        }},
            "Delete": { name: "Delete",
                        icon: "delete",
                        callback: function(key, options) {
                            parentMenu = '#' + $(this).closest('div').attr('id');
                            file = $(parentMenu).data('kendoTreeView').dataItem($(this)).fullPath;
                            var qparameters;
                            var regex = /\/(.[^\/]+)$/;
                            var filename = regex.exec(file);
                            $.post("fileops", { operation: 'delete', filename: file }, function(data) {
                                if (parentMenu === "#filebrowser") {
                                    filebrowserDS.read();
                                }
                                else if (parentMenu === "#parser-library") {
                                    parserLibraryDS.read();
                                }
                                else if (parentMenu === "#parser-library-user") {
                                    parserLibraryUserDS.read();
                                }

                            }).done(function(data, textStatus, xhr) {
                                popup.success(filename[1] + " deleted!");
                            }).fail(function(xhr) {
                                popup.error("Error, " + filename[1] + " not deleted! (" + xhr.status + " " + xhr.statusText + ")");
                            });
                        }}
        }
    });
}

function imageExists(url) {
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

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

    g.append(new dataviz.diagram.Image({
        source: dataItem.image,
        width: 50,
        height: 50,
        x: dataItem.x,
        y: dataItem.Y
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.text,
        x: dataItem.x - 25,
        y: dataItem.y + 25,
        color: "#000"
    }));
    return g;
}

0 个答案:

没有答案