Log In    |    Knowledge Base    |    4D Home
Tech Tip: Using the On Timer form event to implement dragging SVG images
Published On: April 30, 2009

When you want to redraw your SVG image as a user is dragging an object that is part of the SVG image, you cannot use the standard mouse events. On Mouse Move does not fire every time the mouse moves while the mouse button is down. There is an alternate strategy for implementing this using the On Timer form event. There are three main parts to this:

  • Picture Variable On Mouse Enter event
  • Picture Variable On Clicked event
  • Form On Timer event

In abstract, the idea is simple:

In the On Mouse Enter event of your picture variable, use the SET TIMER command to set the timer to a short interval. Three ticks generally works. This causes the Form's On Timer event to fire every three ticks.

In the On Timer form event, put an If statement that checks two things: the state of the mouse button (using GET MOUSE, and a flag variable (called myFlag for this example). If the mouse button is down and myFlag has been set to True, you will want to re-draw your SVG image. You can call whatever method you use to draw the image. It is important to make sure that you draw the object that you want to be draggable in terms of the MouseX and MouseY system variables. This way it is drawn where the mouse currently is. Also make sure that if the mouse button state is not down that you set the myFlag variable back to False. This way you do not drag again until it is clicked on.

In the On Clicked event of your picture variable, use the SVG Find element ID by coordinates command. If the correct element was clicked on then you want to set myFlag to True. This way your On Timer form event will start re-drawing your image as the mouse is moved.

Those three parts should be all you need to implement dragging of an element of your SVG image.