canvas setDimension() breaks drag functionality of figure

Question

I am using draw2dtouch 6.1.66 version (latest version). Initially width and height of canvas was 1000px and 800px respectively. On button click, I am changing the canvas width and height to 2170px and 902px respectively.

Now I cannot drag rectangle figure beyond 1000px width-wise. It gets stuck to 1000px which was initial width.

Note: I check my html, both canvas div and svg shows width:2170px and height:902px.

<div _ngcontent-awi-17="" draw2d-canvas="" id="canvas" style="height: 902px; cursor: default; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 2170px;">

<svg height="902" version="1.1" width="2170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: absolute; left: -0.828125px;">

Here is my code:

$("#canvas").css("height",902);
$("#canvas").css("width", 2170);
canvas.setDimension(new draw2d.geo.Rectangle(0, 0, 2170, 902));

score 1 · Answer 1 · answered Feb 27 '19 at 22:44

It may be and old post, but I had the same issue using same version, and my solution might be useful for some other people coming back.

It seems when the canvas is created Canvas.regionDragDropConstraint is initialized with the original size of the canvas, restrincting the area in which objects can be dragged inside. I had to modify the method Canvas.setDimension, and added the update of the attribute, so when resized, it's updated in all the figures referencing the same object.

    /**
     * @method
     * Tells the canvas to resize. If you do not specific any parameters 
     * the canvas will attempt to determine the height and width by the enclosing bounding box 
     * of all elements and set the dimension accordingly. If you would like to set the dimension 
     * explicitly pass in an draw2d.geo.Rectangle or an object with <b>height</b> and <b>width</b> properties.
     * 
     * @since 4.4.0
     * @param {draw2d.geo.Rectangle} [dim] the dimension to set or null for autodetect
     */
    setDimension: function(dim, height)
    {
        if (typeof dim === "undefined"){
            var widths  = this.getFigures().clone().map(function(f){ return f.getAbsoluteX()+f.getWidth();});
            var heights = this.getFigures().clone().map(function(f){ return f.getAbsoluteY()+f.getHeight();});
            this.initialHeight = Math.max.apply(Math,heights.asArray());
            this.initialWidth  = Math.max.apply(Math,widths.asArray());
        }
        else if(dim instanceof draw2d.geo.Rectangle){
            this.initialWidth  = dim.w;
            this.initialHeight = dim.h;
        }
        else if(typeof dim.width ==="number" && typeof dim.height ==="number"){
            this.initialWidth  = dim.width;
            this.initialHeight = dim.height;
        }
        else if(typeof dim ==="number" && typeof height ==="number"){
            this.initialWidth  = dim;
            this.initialHeight = height;
        }
        this.html.css({"width":this.initialWidth+"px", "height":this.initialHeight+"px"});
        this.paper.setSize(this.initialWidth, this.initialHeight);
        this.setZoom(this.zoomFactor, false);

        // MODIFICATION START TO CORRECT DRAG AND DROP PROBLEM
        // Add modification to the Region Drap and Drop Policy, so it does not restricts objects movements on resize.
        this.regionDragDropConstraint.constRect.w = this.getWidth();
        this.regionDragDropConstraint.constRect.h = this.getHeight();
        // MODIFICATION END

        return this;
    }

Thanks a lot for figuring out this exact solution. – Shashank Bhatt Nov 22 '22 at 13:38 — Shashank Bhatt, Nov 22 '22 at 13:38

philipp · Answer 2 · 2017-02-22T11:12:49.953

0

Setting the width and height of a canvas using css, will result in scale like effect, because the underlying imageData array is not updated to the new dimensions.

So if you need to scale your canvas, use the attributes of the canvas, like so:

$('#canvas').attr({width: <width>, height: <height>});

Keep in mind that changing those values will clear the canvas and you need to redraw everything.

edited Feb 22 '17 at 11:12

answered Feb 22 '17 at 10:35

philipp

15,947
15
61
106

Above code didn't work. This issue is specific to draw2dtouch. May be your solution is for basic html canvas and not for third party library generating canvas on html. – satish ganai Feb 22 '17 at 12:37
The result will always be a "basic html canvas", no matter which library generates it. But if the library cannot handle resizing, it might not be the best – philipp Feb 23 '17 at 05:45

canvas setDimension() breaks drag functionality of figure

2 Answers2