Problem with TWebSignatureCapture not drawing at pointer position

WEB TMS WEB Core
1

The TWebSignatureCapture demo works without problems. But in my app, when drawing with the mouse pointer, the actual drawing is around 100 pixel on top of the pointer. In addition, I cannot click the embedded Clear button. When hovering over the button, the pointer does not change it's shape.

The TWebSignatureCapture is on a panel. The panel is on a form. The form is embedded in a DIV. All controls on the form are epAbsolute.

This is the definition of the TWebSignatureCapture in the .dfm:

object SignatureCapture: TWebSignatureCapture
      Left = 3
      Top = 668
      Width = 360
      Height = 243
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      ChildOrder = 6
      TabOrder = 2
      ClearButton.Image.Data = {
        0954506E67496D61676589504E470D0A1A0A0000000D49484452000000180000
        001808040000004A7EF573000000644944415478DA6364C0064E319842592719
        2C50A518B16AF80F17FF8FAE8211C34C7CE0008323C22462C0330669640D8C04
        94FFA75803494E3AC960468486FD0C4E0867C01CF51F2709341FD9DDA31A4635
        0CA806FC004DC31E0667021A363204303000003E4078198A7390E00000000049
        454E44AE426082}
      TextPosition.Line.Color = clGray
      TextPosition.LineVisible = False
      TextPosition.Position = ltpTopLeft
      Text = ''
      Pen.Color = clBlue
    end

(using the original Clear button does not change anything)

In the index.html, the component is rendered like this:

<canvas id="TGuestRegForm_SignatureCapture122" zindex="0" height="243" width="360" 
tabindex="3" role="" style="position: absolute; height: 243px; width: 360px; overflow: hidden; 
outline: none; top: 668px; left: 3px; box-sizing: border-box; user-select: none; 
-webkit-tap-highlight-color: transparent; font-family: Arial; font-style: normal;
 font-size: 12pt; color: rgb(0, 0, 0); border-style: solid; border-width: 1px; 
border-color: rgb(192, 192, 192);"></canvas>

This screenshot of the running app shows the position of the mouse pointer when drawing the blue horizontal line

Bild1
Bild1423×1215 91.4 KB

This happens with Firefox, Opera and Edge. Using Chrome, it's just the opposite: The drawing is below of the mouse pointer.

I tried to fiddle with the TWebSignatureCapture demo app to show the same behaviour in order to make the problem reproducable, but with no success. If it helps, I would send a PM with my project files.

Any ideas would be very much appreciated.

2

How exactly is this form embedded in a DIV?
It has most likely something to do with that and how is that DIV positioned in the document. Can you check what you do different from our demo under Demo\Basics\SignatureCapture where the form is also embedded in a HTML template DIV element.

3

I slightly changed the SignatureCapture demo to reflect the problem.

SignatureCapture.zip (8.3 KB)

The main difference is that I load a "Main-Form" into "appcontent" with some stuff that should be visible on all subsequent forms. Then, when clicking the "Show Form" button, I load one of the subsequent forms (here: only one) into a DIV (here "Unit1Content") of the MainForm, which in this test case is the actual demo content.

    <div id="appcontent" class="appcontent">
        <img id="ImgHeader" src="https://www.tmssoftware.com/site/img/logos/loper.svg" style="height: 80px;">
        <br>
        <button type="BUTTON" id="BtnShowForm" style="width: 290px;height: 30px;">Show Form</button>
        <div id="Unit1Content">
        </div>
    </div>

This configuration produces the erroneous behavior of the Signature component. Now, if you go into devtools and one after the other delete "ImgHeader", then the <br> and finally the "BtnShowForm", the line drawn comes back closer and closer to the pointer. So, in short, for some reason the elements between "appcontent" and "Unit1Content" shift the drawing away from the pointer.

Hope that makes any sense. It's easier to just try it rather than describe it...

4

Another problem I just faced: If the capture is on a lengthy form very down below and the capture is (or can be) scrolled below the bottom of the browser window, then when scrolling back into the viewport the drawing is also no longer aligned with the pointer.

5

Dear Bruno,
would you mind having another look into this? I addef a modified demo some time ago that demonstrates the problem. See above.
Many thanks
Walter

6

I fixed your project.
TMSWEB_SignatureCapture.zip (7.9 KB)

Main fix is in the main form template:
<div id="Unit1Content" class="appcontent" style="height:400px">