Drawing Events Accumulation

[Minoush M]

Hello,

I am trying to implement an interface that enables the user to draw basic geometric objects using JSXGraph. In [1] I show an example code that should allow the user to draw lines and segments.

When the user clicks the button labeled "Draw Line", (s)he then clicks somewhere to get the first point of the line, and then somewhere else to get the second point of the line; and after that, a line that connects the two points is drawn automatically. It is possible to draw many consecutive lines by repeating the process. This works nicely for me.

However, when I click the "Draw Segment" button --- after the "Draw Line" button, I get an accumulation of a line and a segment instead of getting just a segment. The points are inserted twice, as if the both event listeners in the methods drawLine() and drawSegment() are on at the same time.

How would I fix this to that only the relevant method is doing the event listening?

Many thanks.

[1]

https://jsfiddle.net/Minoush82/fv9g6bwj/

[Murray]

Hello Mino

(1) I believe what's happening in your fiddle is

• User chooses "segment" and creates 2 points, then the "on" listener is invoked
• User then chooses "line" and the other "on" listener is also invoked, so now there are 2 listeners firing, thus you get more than one thing happening at a time.

(2) To solve this,  you could do it with one "on" listener only. 

In my fork of your fiddle, https://jsfiddle.net/mbourne/o5kbysw7/, I use a variable "drawType" that changes depending on which button is clicked. Then I invoke only one "on" listener.

(3) I actually used board.create('segment'...  rather than 'line' with straightFirst - it seemed simpler.   

(4) This is probably not a big deal, but for each newly created line and segment, I pushed them to an array. If you need to target a particular line or segment later (to change colour, or something) it's easier to identify it. I probably should have done the same thing with the new points.

(5) From a usability point of view, it would be probably better to use radio buttons for the choices "Draw Line" and "Draw Segment", rather than buttons. Currently, I expect most users would be expecting a line to appear if they click "Draw Line" (without having to do anything else).

(6) You've set the viewport correctly to cater for mobile devices with this line: <meta name="viewport" content="width=device-width, initial-scale=1">

However, if the board size is hard coded by javascript to be a 500 px square, it will spill out of the viewport on most phones.

So in my fiddle, I have set the size of the board using CSS. The "jxgWrap" div is set so the width is no greater than 95% of the minimum available width and height, and the "jxgbox" div is set so it will always be square. (Change the size of the output window in the fiddle then "Run" it again to see what I'm talking about.)

I have other examples of setting mobile-friendly board dimensions using CSS on this page: https://bourne2learn.com/math/jsxgraph/jsxgraph-examples.php

I hope it helps.

Regards

Murray

[Minoush M]

Many many thanks for the instructive answer! Cheers!