mxgraph示例解析(-) drop图片拖拽入画板

drop图片拖拽入画板

官方示例

// Disables the built-in context menu
mxEvent.disableContextMenu(container);

// Creates the graph inside the given container
var graph = new mxGraph(container);

// Enables rubberband selection
new mxRubberband(graph);

mxEvent.addListener(container, 'dragover', function(evt)
{
    if (graph.isEnabled())
    {
        evt.stopPropagation();
        evt.preventDefault();
    }
});

mxEvent.addListener(container, 'drop', function(evt)
{
    if (graph.isEnabled())
    {
        evt.stopPropagation();
        evt.preventDefault();

        // Gets drop location point for vertex
        var pt = mxUtils.convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
        var tr = graph.view.translate;
        var scale = graph.view.scale;
        var x = pt.x / scale - tr.x;
        var y = pt.y / scale - tr.y;
        
        // Converts local images to data urls
        var filesArray = event.dataTransfer.files;
        
        for (var i = 0; i < filesArray.length; i++)
        {
            handleDrop(graph, filesArray[i], x + i * 10, y + i * 10);
        }
    }
});

function handleDrop(graph, file, x, y)
{
    if (file.type.substring(0, 5) == 'image')
    {
        var reader = new FileReader();

        reader.onload = function(e)
        {
            // Gets size of image for vertex
            var data = e.target.result;

            // SVG needs special handling to add viewbox if missing and
            // find initial size from SVG attributes (only for IE11)
            if (file.type.substring(0, 9) == 'image/svg')
            {
                var comma = data.indexOf(',');
                var svgText = atob(data.substring(comma + 1));
                var root = mxUtils.parseXml(svgText);
                
                // Parses SVG to find width and height
                if (root != null)
                {
                    var svgs = root.getElementsByTagName('svg');
                    
                    if (svgs.length > 0)
                    {
                        var svgRoot = svgs[0];
                        var w = parseFloat(svgRoot.getAttribute('width'));
                        var h = parseFloat(svgRoot.getAttribute('height'));
                        
                        // Check if viewBox attribute already exists
                        var vb = svgRoot.getAttribute('viewBox');
                        
                        if (vb == null || vb.length == 0)
                        {
                            svgRoot.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
                        }
                        // Uses width and height from viewbox for
                        // missing width and height attributes
                        else if (isNaN(w) || isNaN(h))
                        {
                            var tokens = vb.split(' ');
                            
                            if (tokens.length > 3)
                            {
                                w = parseFloat(tokens[2]);
                                h = parseFloat(tokens[3]);
                            }
                        }
                        
                        w = Math.max(1, Math.round(w));
                        h = Math.max(1, Math.round(h));
                        
                        data = 'data:image/svg+xml,' + btoa(mxUtils.getXml(svgs[0], '\n'));
                        graph.insertVertex(null, null, '', x, y, w, h, 'shape=image;image=' + data + ';');
                    }
                }
            }
            else
            {
                var img = new Image();
                
                img.onload = function()
                {
                    var w = Math.max(1, img.width);
                    var h = Math.max(1, img.height);
                    
                    // Converts format of data url to cell style value for use in vertex
                    var semi = data.indexOf(';');
                    
                    if (semi > 0)
                    {
                        data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1));
                    }

                    graph.insertVertex(null, null, '', x, y, w, h, 'shape=image;image=' + data + ';');
                };
                
                img.src = data;
            }
        };
        
        reader.readAsDataURL(file);
    }
};

实现原理

• 添加drop事件

mxEvent.addListener(container, 'drop', function(evt){})

• 添加dragover事件

mxEvent.addListener(container, 'dragover', function(evt){})

• 获取drop所在位置

var pt = mxUtils.convertPoint(graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
var tr = graph.view.translate;
var scale = graph.view.scale;
var x = pt.x / scale - tr.x;
var y = pt.y / scale - tr.y;

• 将图片转成数据地址

var filesArray = event.dataTransfer.files;
        
 for (var i = 0; i < filesArray.length; i++)
{
      handleDrop(graph, filesArray[i], x + i * 10, y + i * 10);
}

• 对图片数据进行操作

函数handleDrop

解析handleDrop

• 1. 判断文件是否为图片
• 2. 对文件进行加载
• 3. 判断文件是否为svg
  • 为svg时格式化并拆解width和height
  • 判断viewBox是否存在
  • 插入元素
• 4. 文件为图片
  • 加载图片
  • 获取宽高
  • 插入图片元素

简化示例