About the use of Palette on mobile devices

GoJS
1

Usually on the PC with the mouse drag an element, the experience is very good, now on the mobile device with a finger drag, if my element size is small, my fingers will block the elements, how to make the element in the upper left corner of the finger?

2

I do not think we can reliably get the thickness of a finger, so we cannot reliably find the top-left corner of the finger’s area that it touches the screen.

Another problem is the user might be left-handed or just using a finger of their left hand, so that they would prefer positioning objects above and to the right of the finger. Again, that is not something that we can determine reliably, even if we could get the area that the finger is touching the screen.

I think it might be possible to customize the DraggingTool to move the selection as if the current input point were offset from the actual input point. I can look into that later today.

3

Thank you very much and look forward to your reply.

4

Try using this custom DraggingTool:

  function OffsetDraggingTool() {
    go.DraggingTool.call(this);
    this.offset = new go.Point(0, -20);
  }
  go.Diagram.inherit(OffsetDraggingTool, go.DraggingTool);

  OffsetDraggingTool.prototype.doMouseDown = function() {
    var diag = this.diagram;
    if (!diag) return;
    // but not Diagram.firstInput
    diag.lastInput.viewPoint = diag.lastInput.viewPoint.copy().add(this.offset);
    diag.lastInput.documentPoint = diag.transformViewToDoc(diag.lastInput.viewPoint);
    go.DraggingTool.prototype.doMouseDown.call(this);
  }

  OffsetDraggingTool.prototype.doMouseMove = function() {
    var diag = this.diagram;
    if (!diag) return;
    diag.lastInput.viewPoint = diag.lastInput.viewPoint.copy().add(this.offset);
    diag.lastInput.documentPoint = diag.transformViewToDoc(diag.lastInput.viewPoint);
    go.DraggingTool.prototype.doMouseMove.call(this);
  }

  OffsetDraggingTool.prototype.doMouseUp = function() {
    var diag = this.diagram;
    if (!diag) return;
    diag.lastInput.viewPoint = diag.lastInput.viewPoint.copy().add(this.offset);
    diag.lastInput.documentPoint = diag.transformViewToDoc(diag.lastInput.viewPoint);
    go.DraggingTool.prototype.doMouseUp.call(this);
  }

  OffsetDraggingTool.prototype.doMouseWheel = function() {
    var diag = this.diagram;
    if (!diag) return;
    diag.lastInput.viewPoint = diag.lastInput.viewPoint.copy().add(this.offset);
    diag.lastInput.documentPoint = diag.transformViewToDoc(diag.lastInput.viewPoint);
    go.DraggingTool.prototype.doMouseWheel.call(this);
  }

  OffsetDraggingTool.prototype.doSimulatedDragOver = function() {
    var diag = this.diagram;
    if (!diag) return;
    diag.lastInput.viewPoint = diag.lastInput.viewPoint.copy().add(this.offset);
    diag.lastInput.documentPoint = diag.transformViewToDoc(diag.lastInput.viewPoint);
    go.DraggingTool.prototype.doSimulatedDragOver.call(this);
  }

  OffsetDraggingTool.prototype.doSimulatedDrop = function() {
    var diag = this.diagram;
    if (!diag) return;
    diag.lastInput.viewPoint = diag.lastInput.viewPoint.copy().add(this.offset);
    diag.lastInput.documentPoint = diag.transformViewToDoc(diag.lastInput.viewPoint);
    go.DraggingTool.prototype.doSimulatedDrop.call(this);
  }

Install it when initializing the Diagram or Palette:

  $(go.Diagram, . . .,
    { . . .,
      draggingTool: new OffsetDraggingTool(),
      . . .
    })
5

Thanks very much, I also apply Offsetdraggingtool to diagram and Palette, but when I drag my fingers from left to right, the elements fly away; If you use the mouse, it works perfectly

6

I’ll look into this tomorrow.

7

Thank you very much, good night.

8

Could you try the beta version of GoJS 1.8.16 that you can find at GoJS - Build Interactive Diagrams for the Web ?

I’m hoping that fixes the problem that you are seeing.