javascript - 使用 Draw2D.js 拖放菜单

Question

如何使用 Draw2D.js 创建拖放菜单？我正在使用 React 制作应用程序，但在文档中找不到如何操作。这个例子中有类似的东西，但我不明白如何自己制作。

在示例中，作者使用了docs中没有的方法。

当我尝试从该示例中复制代码时，eslint 说这是错误的。

标签： javascriptuser-interfacedraw2d-js

Answer 1

您可以在此处找到此示例的代码：

形状数据库示例

这个想法是在鼠标移动之后向 dom 添加一个幽灵 img 并在 drop 事件中创建新元素。

此示例中的以下代码摘录正是执行拖放操作所需的：

onMouseDrag:function(canvas, dx, dy, dx2, dy2)
{
    var _this = this;

    if( !((this.mouseDraggingElement instanceof draw2d.ResizeHandle) || (this.mouseDraggingElement instanceof draw2d.Port))){
        if(this.cloneOnDrag ===true && this.mouseDraggingElement !==null){
            var tmp = this.mouseDraggingElement;

            // get the current position of the selected shape
            // cancel the current drag&drop operation
            var pos = this.mouseDraggingElement.getPosition();
            this.mouseDraggingElement.onDragEnd(pos.x, pos.y, false,false);
            this.mouseDraggingElement = null;

            // PNG snapshot's didn'T work with all kind of shapes. You can use
            // a DIV ghost as workaround if this didn't work for you
            //
            var usePNGSnapshot = true;

            // create an base64 coded image snapshoot from the figure
            // (not from the complete canvas)
            //
            if(usePNGSnapshot===true) {
                new draw2d.io.png.Writer().marshal(tmp, function (base64Image) {
                    // add the image to the DOM tree
                    //
                    var ghost = $("<img  style='position:absolute'>");
                    ghost.attr("src", base64Image);

                    _this.setupDragDropGhost(tmp, ghost);

                });
            }
            else{
                var ghost = $("<div>");
                ghost.css({
                    position: "absolute",
                    width: tmp.getWidth(),
                    height: tmp.getHeight(),
                    border:"1px dotted black",
                    borderRadius:"3",
                    backgroundColor:"rgba(128,128,200,0.3)"
                });

                _this.setupDragDropGhost(tmp, ghost);
            }
        }
    }
    this.cloneOnDrag=false;
    this._super(canvas, dx,dy,dx2,dy2);
},
setupDragDropGhost: function(figure, ghost){
    var _this = this;

    $("body").append(ghost);

    // and track mouseMove events to move the IMG element around
    //
    var offset = _this.mouseDownPos.subtract(figure.getPosition());
    var mousemoveHandler = function (e) {
        var diffX = e.pageX - offset.x;
        var diffY = e.pageY - offset.y;
        ghost.css('left', diffX + 'px').css('top', diffY + 'px');
    };
    $(document).bind('mousemove', mousemoveHandler);

    ghost.bind('mouseup', function (e) {
        try {
            // this is a drop event...determine the related canvas and add
            // the figure clone to the canvas
            //
            $(document).unbind('mousemove', mousemoveHandler);
            var r1 = new draw2d.geo.Rectangle($("#container1")[0].getBoundingClientRect());
            var r2 = new draw2d.geo.Rectangle($("#container2")[0].getBoundingClientRect());
            var canvas1Hit = r1.hitTest(e.pageX, e.pageY);
            var canvas2Hit = r2.hitTest(e.pageX, e.pageY);

            if (canvas1Hit) {
                var clone = figure.clone();
                var p = canvas1.fromDocumentToCanvasCoordinate(e.pageX, e.pageY);
                clone.setPosition(p.subtract(offset));
                canvas1.add(clone);
            }
            if (canvas2Hit) {
                var clone = figure.clone();
                var p = canvas2.fromDocumentToCanvasCoordinate(e.pageX, e.pageY);
                clone.setPosition(p.subtract(offset));
                canvas2.add(clone);
            }
        }
        finally{
            ghost.remove();
        }
    });
}