Scrolling breaks coordinates despite ScrollArea set about draw2d HOT 5 CLOSED

wrong scroll area, the line below is working.

    canvas.setScrollArea('#draw');

if you have a more complicated setup, you can implement the two functions below to your needs. (Extend the Camvas class )

var MyCanvas = draw2d.Canvas.extend({

  init: function (id) {
    this._super(id)
  }
  .
  .
  .
  .

  /**
   * @method
   * Transforms a document coordinate to canvas coordinate.
   *
   * @param {Number} x the x coordinate relative to the window
   * @param {Number} y the y coordinate relative to the window
   *
   * @returns {draw2d.geo.Point} The coordinate in relation to the canvas [0,0] position
   */
  fromDocumentToCanvasCoordinate: function (x, y) {
    return new draw2d.geo.Point(
      (x - this.getAbsoluteX()) * this.zoomFactor,
      (y - this.getAbsoluteY()) * this.zoomFactor)
  },

  /**
   * @method
   * Transforms a canvas coordinate to document coordinate.
   *
   * @param {Number} x the x coordinate in the canvas
   * @param {Number} y the y coordinate in the canvas
   *
   * @returns {draw2d.geo.Point} the coordinate in relation to the document [0,0] position
   */
  fromCanvasToDocumentCoordinate: function (x, y) {
    return new draw2d.geo.Point(
      ((x * (1 / this.zoomFactor)) + this.getAbsoluteX()),
      ((y * (1 / this.zoomFactor)) + this.getAbsoluteY()))
  }
})

see: https://github.com/freegroup/brainbox/blob/master/app/frontend/circuit/js/View.js#L599-L627

code is from https://github.com/freegroup/brainbox

from draw2d.

Thanks for your help, although setting canvas scroll area to its html element ("#draw" in this case) didn't worked (well, it did fixed selection but canvas.getScrollTop() was always zero), extending canvas and changing coordinates calculation did the job.

from draw2d.

Hi,
I'm facing a similar problem. I have and issue when tha pages is zoomed. With 67 % zoom it work everything excelent. But with a 100 % zoom i face the same calculation problem and i cant figure it out. I tried setting canvas scroll area and changing coordinates calculations but nothing works. I'm still have an offset between object and mouse cursor.

Regards

from draw2d.

Hi,
I'm facing a similar problem. I have and issue when tha pages is zoomed. With 67 % zoom it work everything excelent. But with a 100 % zoom i face the same calculation problem and i cant figure it out. I tried setting canvas scroll area and changing coordinates calculations but nothing works. I'm still have an offset between object and mouse cursor.

Regards

An important thing I forgot to say. I'm using jquery 3-3-1, and i have to use the noconflict method

from draw2d.

Hi FreeGroup,
Thanks for this awesome library.
After setting correct scrollArea, selection issue seems to be fixed.
However, there appears to be a wrong dropping on canvas (exactly same as in case of selection of Figure).
When we drop, it drops at additional scrolled area from top due to addition of extra scrollTop in above fromDocumentToCanvasCoordinate method.
I am setting canvas in parent div and scrollable area is html itself. when I scroll dropping is not correct.
draw2dApp.view.setScrollArea('html');
Any solution for that?

from draw2d.