Subversion Repositories wimsdev

# Canvasdraw changes log

## TODO :

- sort out the global/local variable mess...and reorganize headerfile

	 : zooming and grid: scaling needs to be more adaptive ! (use constant amount of grid lines)

## 2023

* 13/1/2023: corrected flaw in external images 'copy & drag/drop'

## 2022

* 28/8/2022: added command "newrange xmin,xmax,ymin,ymax" see https://wimsedu.info/?topic=dessiner-des-portions-de-fonctions-sur-un-meme-graphe

* 01/8/2022: getMouse(),latest improvements related to 'reponsiveness' will fatally lockup browsers in the pixel-by-pixel filling...at least in userdraw clickfill

* 19/7/2022: checked and corrected 'dashed' objects like arc,arrowarc,ellipse...

* 16/7/2022: solved long standing issue of dashed arrow(s) and dashed arrow(s)2 

* 06/7/2022: clearbutton preserves div's with '<' && '/>' and objects placed with 'placed_image_on_canvas(id)' e.g. with 'id = placed*'

* 05/7/2022: corrected flaw in 'clearbutton' https://wimsedu.info/?topic=geometrie-interactive-avec-canvasdraw

* 05/7/2022: command 'group' :

	- still some issues with direct clicks on group members (NaN due to competing mouselisteners)

	- removed 'debug newlines'

	- external images -via command 'copy' NOT supported (too much trouble)

	- need to add 'copy' to dragstuff library or introduce another command...

* 26/6/2022: added keyword 'group' : provides mouse-driven movements of all objects after keyword 'group' until keyword 'kill group;

	- may be combined with 'slider' to move or rotate single objects or grouped objects

	- may not be combined with command 'drag xy' (mouse listeners are already occupied...)

	- may be combined with command 'onclick'

	- added objects created by command 'latex' to grouping (todo : external images etc)

* 23/6/2022: corrected drag&drop reply of external images (via command 'copy') when mixed with other external/internal objects...

	 	 #

	 	 size 400,400

	 	 xrange -10,10

	 	 yrange -10,10

	 	 grid 2,2,grey

	 	 linewidth 2

	 	 onclick

	 	 fcircle -6,6,50,red

	 	 onclick

	 	 fcircle -6,-6,50,green

	 	 noreset

	 	 snaptogrid

	 	 drag xy

	 	 centered

	 	 latex 0,0,\frac{12345}{23456} \times \frac{12345}{23456}

	 	 translate 4,4

	 	 html 0,0,<table style='border:solid red 2px'><tr><th>HTML TABLE</th></tr><tr><td><img src="gifs/en.gif" /></tr><tr><td><img src="gifs/nl.gif" /></tr><tr><td><img src="gifs/fr.gif" /></tr><tr><td><img src="gifs/cn.gif" /></tr><tr><td><img src="gifs/it.gif" /></tr></table>

	 	 userdraw arrow2,red

	 	 translate 8,8

	 	 copy 0,0,-1,-1,-1,-1,gifs/nl.gif

* 20/6/2022: Start to make canvasdraw responsive [OB] :

	- reduce size on small screens,

	- use percentage instead of absolute positioning for xml/html/tex

	- convert mouse position coords on shrinked canvas

	- correct mouse coordinates when inside a scrolled wims_scrollable div

	- Replace "Ariel" font references by "Arial"

* 19/6/2022: added function plot to multidraw (https://wimsedu.info/?topic=userinput-function)

	command 'multidraw functions' will -for now- give just 2 inputfields... *TODO*: make configurable, so implement commands like 'multidraw functions5')

	for multiple function input fields, use multiple keywords 'function', e.g. something like:

	multidraw text,line,function,function,function,points

* 27/5/2022: added subsup to userdraw and multidraw 'text' (which is always 'centered' e.g use_offset=4)

* 26/5/2022: corrected replyformat 100 

* 23/5/2022: overriding fontfamily and use Helvetica as font for _sub ^sup  strings: all inline numbers are in script-size (80% eg the same as strings+numbers for sub/sup)

* 21/5/2022: using 'scriptsize' imitation on sub / sup  

* 20/5/2022: added a sub / sup imitation to the canvas 'string' command family

		size 400,400

		xrange -6,6

		yrange -6,6

		fontfamily 22px Arial

		# use single space for separation in formula...

		# use double space to create new word

		string red,-5,0,H_3 O^+ + OH^\u2212  \u2192 2H_2 O

* 2/4/2022: added timeout fix for centering issue in case of MathJaX (draw_xml())

## 2021

* 14/4/2021: added flydraw command 'range xmin,xmax,ymin,ymax'

* 6/4/2021: corrected 'text objects' (from cmd's text/string) were not added to 'noreset', e.g. keyword 'noreset' was ignored...

added a live example from E3/number/oefgraduation.fr  

* 4/4/2021: corrected use of precompiler directive "KATEX_INSTALLED" (was not working...)

* 12/3/2021: add "version 0.5" to canvasdraw include file

* 23/2/2021:

added generic command 'kill argument'

work in progress

corrected wrong alternative command for jscurve

* 21/2/2021:

alternative commands now 'seachable' using js-function look()

* 19/2/2021:

slightly improved dashing of arrows (in dragstuff,userdraw & multidraw)

to test : other objects+dashing !

resetting dashing for the arrow head (head was also dashed...)

see https://wimsedu.info/?topic=dashed-arrows-not-dashed-in-canvasdraw

* 2/2/2021:

added command 'arcarrow|arrowarc', left,right,left/right

added commands 'arc','angle','arcarrow' to onclick and drag&drop

* 17/1/2021: 

corrected syntax issue in canvasmultidraw.c signalled by Opera Presto : 'forbidden function user_drawstop(evt) declaration in statement'*/

can not correct centering in case of MathJaX, in commands like

```

####

centered

math 0,0,\frac{1}{222}

####

```

Things get even worse when activating in exec.c the "Safari/MathJax bugfix : refresh display when document ready."

(besides the ridiculous delay !!)

You should really try KaTeX on these systems/browsers !!!

OEF example of the problem:

```

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\text{m1=wims(mathmlmath \frac{12344}{\pi\pi\pi\pi^{\pi}})}

\text{m2=wims(mathmlmath \frac{\pi\pi\pi\pi^{\pi}}{\alpha})}

\text{m3=wims(mathmlmath \sqrt{\pi\pi\pi\pi^{\pi}})}

\text{m4=wims(mathmlmath \sqrt{\frac{1223}{3344}})}

\statement{

<script type="text/javascript">

 function read_canvas(){

   var fun = eval("read_canvas"+canvas_scripts[0]);

   if( typeof fun === 'function'){ return fun();};

 };

 function read_dragdrop(){

   var fun = eval("read_dragdrop"+canvas_scripts[0]); 

   if(typeof fun === 'function'){return fun();};

 };

</script>

<br/>

<span id="m1" onclick="javascript:place_image_on_canvas(this.id)" >\m1</span>

<span id="m2" onclick="javascript:place_image_on_canvas(this.id)" >\m2</span>

<span id="m3" onclick="javascript:place_image_on_canvas(this.id)" >\m3</span>

<span id="m4" onclick="javascript:place_image_on_canvas(this.id)" >\m4</span>

\canvasdraw{400,400}{

xrange -10,10

yrange -10,10

grid 1,1,grey

noreset

# use keyword 'noreset' to avoid using keyword 'centered' before every addition of objects !

centered

fontfamily Bold Italic 42pt Courier

# these images are internal the reply prefix is imagepalette_0, imagepalette_1... !!

imagepalette gifs/ca.gif,gifs/en.gif,gifs/nl.gif,gifs/fr.gif,gifs/cn.gif,gifs/de.gif,gifs/kh.gif,gifs/it.gif

multicolors red,green,blue,lightblue,cyan

multisnaptogrid 1,1,1,1,0

multilinewidth 0,4,0,3,1

multidraw text,arrow,images,points,lines

math -6,6,\frac{1}{\pi}

math -2,2,\frac{1}{\pi}

math 2,-2,\frac{1}{\pi}

math 6,-6,\frac{1}{\pi}

linewidth 3

points red,-6,6,-2,2,2,-2,6,-6

mouse red,22

}

These images are external...The reply id-prefix is "placed_0_'this.id'"

<table><tr>

<td><img src="gifs/ca.gif" onclick='javascript:place_image_on_canvas(this.id);' id="ca" /></td>

<td><img src="gifs/nl.gif" onclick='javascript:place_image_on_canvas(this.id);' id="nl" /></td>

<td><img src="gifs/en.gif" onclick='javascript:place_image_on_canvas(this.id);' id="en" /></td>

<td><img src="gifs/fr.gif" onclick='javascript:place_image_on_canvas(this.id);' id="fr" /></td>

<td><img src="gifs/cn.gif" onclick='javascript:place_image_on_canvas(this.id);' id="cn" /></td>

<td><img src="gifs/it.gif" onclick='javascript:place_image_on_canvas(this.id);' id="it" /></td>

<td><img src="gifs/kh.gif" onclick='javascript:place_image_on_canvas(this.id);' id="kh" /></td>

<td><img src="gifs/de.gif" onclick='javascript:place_image_on_canvas(this.id);' id="de" /></td>

</tr>

</table>

   <input type="button" onclick="alert(read_canvas());" value="read_canvas()" />

   <input type="button" onclick="alert(read_dragdrop());" value="read_dragdrop()" />

}

```

* 15/1/2021:

corrected long standing flaw regarding "centered" on external stuff...tested: bitmap,svg,TeX [on KaTeX]

corrected 'onclick' for 'draw_xml()'

* 14/1/2021: 

only on KaTeX enabled wims, a slider title may use TeX produced by command "mathmlmath"

* 13/1/2021:

slider title may use TeX produced by command "mathmlmath"

=> oef example...

```

\title{slider + tex title}

\text{A = \frac{1}{2}}

\text{B = \frac{1}{3}}

\text{C = \frac{1}{4}}

\text{a = \(\frac{1}{2}\)}

\text{b = wims(mathmlmath \\Huge \\frac{1}{3} )}

\text{c = wims(mathmlmath \\Huge \\frac{1}{4} )}

\text{canvas=wims(exec canvasdraw

size 400,400

xrange -10,10

yrange -10,10

fontfamily 38px Arial

opacity 255,40

grid 1,1,grey

strokecolor red

slider -10,10,400,50,x active,\( \frac{1}{2} \)

frect -6,5,-4,-5,red

centered

latex -5,0,\A

killslider

strokecolor blue

slider -10,10,400,50,x active,\b

frect -6,5,-4,-5,blue

centered

latex -5,0,\B

killslider

strokecolor green

slider -10,10,400,50,x active,\c

frect -6,5,-4,-5,green

centered

latex -5,0,\C

killslider)

}

\statement{

canvas = \canvas

} 

```

* 8/1/2021:

added affine transformation to Fly text commmand analogue

* 3/1/2021:

added check on 'nan' in case of parametric curve

		size 260,220

		xrange 0,13

		yrange 0,11

		trange 0,2

		curve black,1/t,4*sin(t)

## 2020

* 29/12/2020:

disabled limitation of adding "curve points outside the visual ymin/ymax range" (parametric curves)

* 27/12/2020:

corrected command "parallel" , to be more compatible with flydraw & affine transformations

when a transformation is set  before command parallel...the lines may be set onclick or drag xy!

* 24/12/2020:

solved some issues with curve & affine/rotate...

see [https://wimstest1.di.u-psud.fr/wims/wims.cgi?lang=en&module=adm/doc&cmd=new&job=read&doc=1028&block=transform]()

```

size 200,200

xrange -5,5

yrange -5,5

linewidth 2

trange 0,1

curve blue,2*t,sin(2*pi*t)

affine 0,1,1,2,-1,1

trange 0,1

curve green,2*t,sin(2*pi*t)

```

* 22/12/2020:

command "fillpattern image_url" was gone fishing! `get_image_from_url()` needs to be called after function definition..

* 16/11/2020: 

	- added 'affine' to curve evaluation

	```

	size 220,220

	xrange -5,5

	yrange -5,5

	hline 0,0,black

	vline 0,0,black

	rotationcenter 0,0

	slider -2*pi,2*pi,200,28,angle degree active,Rotate

	linewidth 4

	curve blue,sin(x)

	affine 1,-0.2,-0.6,1,0,2

	curve red,sin(x)

	```

* 13/11/2020: 

	- added `safe_eval()` to userinput (using inputfields)

* 8/7/2020:

	- command `input x,y,size,readonly,value` gave canvaserror when 'value' was ommitted or a 'space'

	- corrected bug [https://wimsedu.info/?topic=bug-canvasdraw-et-ou-drawinput]()

		```

		case 4: temp = get_string(infile,1); --->  case 4: temp = get_string(infile,3);

		```

* 14/6/2020:

	- corrected bug in multidraw snaptopoints+curvedarrow

* 11/6/2020:

	- added 'touchend' to improve behaviour of touch devices in case 'userdraw' and 'multidraw' [TO TEST]

* 9/6/2020

	- touchend  not supported (eg lifting finger+tapping after dragging to signal some 'corner point')

	- in case of touch devices, use commands 'userinput' to enforce mathematical precise drawing and not finger painting...

	- function calc_lines(): 'multidraw lines' & 'userdraw line,color' returned (xmin:y1)--(xmax:y2)

	    that should have been (x1:y1)---(x2:y2) ...otherwise snaptogrid gives float values !

* 8/6/2020:

	- added command 'noreset' or 'killreset'

* 5/6/2020:

	- solved issue of sync loading of images (`command:html 0,0,<img src="modules/U2/geometry/oefrosoni.it/images/273x273/fig4.png"  />`)

	```

		size 400,400

		xrange -6,6

		yrange -6,6

		fontsize 40

		linewidth 1

		slider -10,10,300,28,angle active degree, 

		centered

		html 0,0,<img src="modules/U2/geometry/oefrosoni.it/images/273x273/fig4.png"  />

		killslider

		centered

		html 0,0,<img src="modules/U2/geometry/oefrosoni.it/images/273x273/fig4_ovr.png"  />

	```

	- commands math, katex, latex are identical

	- added compile time checking of 'katex.c' presence:

if present: use KaTeX for all browsers

if not present: use MathJaX (chrome) or native MathML (firefox)

	- TO DO: check if this actually works on non-KaTeX...

* 25/5/2020:

	- removed js-code for rotating (and transforming mouse-coordinates...) Now coordinates are transformed in C

	- slider, solved several issues (removed old slider stuff)

	- animated slider may be combined with manual/mouse slider

	- slider corrected for touch device

* 24/5/2020:

	- add keyword 'animate' to slider

	```

		size 300,300

		xrange -6,6

		yrange -6,6

		grid 1,1,grey

		linewidth 1

		slider 0,2*pi,300,28,angle animate active, no

		opacity 255,30

		ftriangle 2,2,-2,2,0,0,red

		ftriangle -2,2,-2,-2,0,0,blue

		ftriangle -2,-2,2,-2,0,0,green

		ftriangle 2,-2,2,2,0,0,orange

		rotationcenter 0,0

		frect -2,2,2,-2,black

	```

* 22/5/2020:

	- slider things...

* 21/5/2020:

	- minor changes: not yet really satisfied with combinations of xml+dragdrop+slider

	- some doc examples

* 20/5/2020:

	- slider reorganized:

	- restored all listeners on slider.(mousedown ,mousemove and mouseup)

	- update example 'angle': angle and arc are exceptions in case of sliders...they are always active (e.g. not click-activated)

	- added 'onclick=4' : in case of sliders ,no need for click-on-object to active the object--slider (important for objects covering each other)

* 18/5/2020:

	- restored interaction of commands 'arc' and 'angle' with sliders (specially Rotate)

	- drawxml() objects like katex,mathml,latex,html,obabel now interact identical as

    dragstuff library objects with slider...eg. 'first click'=select for sliders, 'second click' unselect sliders

    e.g.: `slidergroup[object_cnt] = obj or slidergroup[object_cnt] = null`

    selected sliders until 'killslider'

    ```

	######################################################

	size 500,500

	xrange -6,6

	yrange -6,6

	grid 1,1,grey

	fontfamily 42px Arial

	opacity 255,60

	centered

	#drag xy

	snaptogrid

	slider -10,10,500,50,angle,R

	slider -10,10,500,50,x,X

	slider -10,10,500,50,y,Y

	# these objects act -if selected- on the above sliders

	katex 3,3,\frac{123}{123^{\pi}}

	centered

	obabel 0,0,smi,-:c1cccc1cc,-xb none -xP100

	filled

	fillcolor blue

	angle 0,0,4,0,0,red

	killslider

	linewidth 4

	slider -10,10,500,50,angle,Rotate rect

	# if selected this object will use only the above slider

	frect -5,5,-4,4,red

	##########################################################

	```

* 15/5/2020:

	- further reduced size of 'plain' grid (like 'grid 1,1,grey')

	- using uniform "slidergroup[object_cnt] = object" to avoid difficulies with reply's of dragstuff/xml [IN PROGRESS]				         __

	- slider appearance changed to :  _____\/______________

	- xml-objects (katex/latex/mathml/html) and slider: onclick will activate slider for object and deactivate after second click

	```

	size 500,500

	xrange -6,6

	yrange -6,6

	grid 1,1,grey

	fontfamily 42px Arial

	strokecolor red

	fillcolor orange

	#rotationcenter 0,0

	slider -12,12,500,50,angle,rotate

	katex 0,0,\frac{1}{2}

	katex 3,3,\frac{1}{3}

	katex -3,3,\frac{9}{3}

	#latex 0,0,\frac{1}{2}

	#latex 3,3,\frac{1}{3}

	#latex -3,3,\frac{9}{3}

	obabel 0,5,smi,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP100,-h

	html 3,-3,<img src='gifs/en.gif' />

	html 4,-2,<H2>OK?</H2>

	html -4,-2,<input size='4' value='?" />

	```

	- added import of 'TD' and 'TH' elements with an unique 'id' and onclick='javascript:place_image_on_canvas(this.id)' to the canvas

* 13/5/2020:

	- fixed several incompatibilities

	- moved legend_cnt,linegraph_cnt barchar_cnt variables (used by 'grid') to global. reducing the size of default grid

* 12/5/2020:

	- reorganized command copy/copyresized: reply is now js-object, identical to dragstuff library

	- onclick/drag of 'copy images' transparent integration with dragstuff objects onclick/drag and external XML material

	- slider is not supported for flydraw analogues copy/copyresized : use command `html x,y,<img src='gifs/en.gif' />`

	- IOS fixed (thx Olivier Obado)

	- renamed variable 'click_cnt' into 'object_cnt' : it counts all interactive (onclick,dragdrop,slider) objects and results

    in a uniform 'reply' object{}

* 8/5/2020:

	- finished commands 'html','katex','latex','mathml' using draw_xml()

    with 'html' virtually all material can be imported

    affine operations and sliders are supported

	- corrected reply & slider

* 6/5/2020:

	- added imported object to sliders [work in progress]

	- added rotation center to draw_xml(obj); [only for command katex]

* 5/5/2020:

	- changed draw_xml() to object, for importing svg,img,div,p,span,mathml,katex in canvasdraw

	- added transformation matrix to draw_xml(). Preparing for slider manipulation of imported objects

* 3/5/2020: corrected error avoiding multiple calls to 'obabel'

* 1/5/2020: killed 'stderr' default message from 'obabel' : "converted 1 molecule"

* 30/4/2020:

	- added command 'katex x,y,tex-string'

	- thus bypassing cludge between firefox/mathml/mathjax/katex

	- for traditional wims (using MathML) use command 'latex x,y,tex-string' or 'mathml x,y,xml-code'

	- for katex-only wims, use only 'katex'

	- solved 'centered' and 'snaptogrid' issues dealing with drag&drop of generated 'svg/mathml/xml/html/js-code'

	- added link to 'howto katex and wims'

* 21/4/2020:

	- using execvp() to call "obabel" , using $PATH

* 20/4/2020:

	- changed command 'smiles' into 'obabel'

	- now all formats may be used as input

	- obabel 5,5,mol,$module_dir/mymolfile.mol,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h

	- obabel -5,-5,smi,-:c1ccFccc1,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h

	- added check on 'forbidden argument' to call obabel

* 18/4/2020:

	- added command 'smiles args' , calling -if installed- 'obabel' to produce an SVG image

	- added command 'chemtex' , adding "mhchem.js" for typesetting (needs to come first!)

	- chemtex: added bogus code for mathjax. THIS WILL ONLY WORK ON KATEX ENABLED WIMS !

```

chemtex

size 400,400

xrange -10,10

yrange -10,10

fillcolor green

grid 1,1,grey

drag xy

centered

smiles 5,5,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h

rotate 180

drag xy

centered

smiles -5,-5,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h

drag xy

rotate -90

centered

smiles -5,5,-:c1cFccc1cc,-xb none,-xB blue,-xi,-xt,-xa,-xX,-xP180,-h

zoom red

drag xy

killrotate

fontfamily 32px Arial

latex 0,0,\frac{1}{2} \ce{H3O+}

```

* 15/3/2020:

	- command latex ; improve code...minor cosmetic things (need to test on android)

	- changed syntax command html : 'html x,y,some-html-code'

	- drag/drop centering for html/latex/mathml/images

```

size 500,500

xrange -10,10

yrange -10,10

grid 1,1,grey

linewidth 3

vline 0,0,green

hline 0,0,green

fontfamily 16px Arial

fillcolor red

strokecolor blue

drag xy

centered

latex 0,0,\frac{12345}{23456} \times \frac{12345}{23456}

drag xy

centered

latex 5,5,\frac{12345}{\frac{12345}{ \frac{12345}{12345}}}

centered

drag xy

html -5,5,<table border=1><tr><td>1234567</td></tr><tr><td>1234567</td></tr><tr><td>1234567</td></tr><tr><td>1234567</td></tr></table>

drag xy

centered

copy 5,-5,-1,-1,-1,-1,gifs/images/skull_and_crossbones50.png

centered

drag xy

html 5,0,<img src=gifs/images/skull_and_crossbones50.png />

```

* 13/3/2020:

	- corrected stupid error in default replyformat

	- added support for touch/android for 'drag_xml()' 'drag_external_images()'

	- unified onclick/drag&drop answer format for MathML,JS_TeX,bitmap-images,html5-canvas-objects

	- compiler warnings (BPR)

* 10/3/2020:

	- command 'rotate angle (deg)' now works for 'draw_xml()' e.g. for commands like latex,mathml,html,video,audio etc

	- corrected drag&drop reply for external things...

* 7/3/2020:

	- command functionlabel is now converted to js-array "functionlabel f(x)=:g(x)=:h(x)=:f'(x)="

	- so multiple funtion inputs may all have different colours and function agruments

* 6/3/2020:

	- added alternative command 'userdraw function,color' , is identical to 'userinput function'

	- added alternative command 'userdraw functions[n],color' , is identical to n-times 'userinput function' (n=1..9)

	- command 'multistrokecolors' or 'multicolors' may be used for setting  function argument/plot colour

* 15/2/2020:

	- corrected flaw in drawing+zooming+multiple jscurves

	- userinput for arrows and polylines (forgotten and corrected)

	- zooming js-curves created by 'userinput function' (or should it be 'userdraw function'?...)

    will adapt to new x/y-ranges after re-clicking the 'draw' or 'OK' button. This is a flaw and not a feature !!

* 13/2/2020:

	- corrected stuff related to 'onclick'

	- corrected combo of clickreply+dragreply

* 11/2/2020:

	- corrected commands 'arc' and 'angle'

	- reset() will not reset the 'use_rotate' eg only 'killrotate' will set 'angle = 0.0'

	- default css_class="none"

	- corrected flaw in command 'input' ('style' is no longer needed...-> css)

* 9/2/2020:

	- restored command 'userinput function|inputfield'

	- 'userdraw text,color' uses `text_inputfield+mouse` and/or `text_inputfield+xy-inputfields`

* 7/2/2020:

	- made a few corrections (Marina)

	- 'userinput inputfield'

* 6/2/2020:

	- added (forgotten) 'userdraw demiline(s),color'

	- restored command 'userinput inputfields|textarea|function'

* 5/2/2020:

	- forgotten rotation/translation for object 'segment'

	- restored 'setlimits' and added 'redraw_jsplot()'

	- added 'jsplot' to 'zoom'

* 4/2/2020:

	- restored copy/copyresized with onclick or drag xy

	- start with affine transformation without using canvas/html5 transform system (e.g. drag&drop&click will work for transformed objects)

    [work in progress]

	- added commands 'linear a,b,c,d' and 'killlinear|killinear' (flydraw compatibility needs to be tested)

	- updated internal doc's; (todo : example scripts)

	- added forgotten userdraw arrow(s)2,color

* 31/1/2020:

	- cleaning: removed unused js-functions

	- work in progress: combined drag/drop external images, draggable copy/resized images and dragstuff objects

* 30/1/2020:

	- userdraw zooming ; marked 'canvas-zoom-buttons' forbidden (eg clicking on zoom will not produce extra userdrawing clicks...)

	- start with cleaning...

* 29/1/2020:

	- minor stuff

* 28/1/2020:

	- restored 'userdraw dotfill...textfill,color|text' (pattern filling)

	- restored 'userdraw inputs'

	- changed 'style' for elements by command 'css some_css' for buttons etc (style="xxxx" --> class="xxxx" )

* 26/1/2020:

	- restored 'userdraw clickfill,color' (the lrest like 'userdraw dotfill,color' not yet ready)

* 25/1/2020:

	- rightmouse click removes last drawn userdraw thing

(including svg/div/p/span/images/inputfields...eg non-canvas elements)

	- restored 'userdraw inputs,color'

* 24/1/2020:

	- restored "userdraw" image(s),arc(s),parallelogram(s)  etc

* 22/1/2020:

	- moving "userdraw" things to separate file, simular to "multidraw"

    work in progress...not all primitives are implemented.

    giving further reduction of resulting javascript filesize

* 17/1/2020

	- zooming : added mouse wheel zoom-in-out

	    : restored panning and reset (x) is now back to original x|y min|max

	    : added basic support for touch devices

	    : TODO adjust zooming params

* 16/1/2020

	- removed unused variables (clang, compiled with: -Weverything)

	- zoom & drag/drop

	- TODO: zoom & other-grid-types ; use mousewheel & tablets?

* 11/1/2020

	- corrected long standing design flaw (zooming would reset dragged objects...)

	- modified command grid (concering zooming)

	- TODO : rethink zooming & panning !!

	```

	##############

	performance/size_reductions:

	U1/logic/oefmap.fr&+cmd=new&defaultlist=free01&+exo=free01&+qnum=1&+scoredelay=&+seedrepeat=0&+qcmlevel=1

		- old canvasdraw version approx 40 kb

		- new canvasdraw version approx 20 kb

		- latest canvasdraw version approx 18 kb

	H5/analysis/gebieden-1.nl&subject=4&level=0&total_exos=3&rounding=-1&usage=2&taal=nl

		- old canvasdraw version approx 83 kb

		- new canvasdraw version approx 38 kb

	##############

	```

	- split large files into fragments:still needs some further shifting/reorganizing

	- multidraw: add draw primitive: crosshair | crosshairs (draw_type no. 25 | 26)

    TODO: arc,angle,ellipse??

	- multidraw: finished fillpatterns

```

size 400,400

xrange -10,10

yrange -10,10

grid 1,1,grey

linewidth  3

snaptogrid

multilinewidth 1,2,3,1,2,3

multifillcolors red,green,blue,brown,cyan,yellow

multistrokecolors red,green,blue,brown,cyan,yellow

#solid, grid, hatch, diamond, dot, none

multifill 1,2,3,4,0

multidraw rects,circles,triangles,poly5,parallelogram,points

```

* 10/1/2020

	- simplified 'fillpattern' for static and dynamic objects

	- multidraw:

    started with implementing fillpatterns for multidraw (only rects/circles for now)

    command: multifill 0,1,2,3,4,5 ... none,fillcolor,grid,hatch,diamond,dot

    image filling not yet ready...

	- corrected flaw in 'ellipses'

	- corrected docs for 'ellipse | ellipses'

	- corrected zoom issue (minimized code increase)

* 8/1/2020

	- added a few other object to "non-html5-canvas" rotation

* 6/1/2020

	- "stringup" now can be "onclick & dragdrop"

eg: stringup == string+angle+mouse_rotation-code

note: no need to reset rotation through 'killrotate'

	```

	onclick

	rotate 45

	string red,0,0,AAAAAA

	killrotate

	string red,4,4,BBBBBB

	```

	is identical with:

	```

	onclick

	stringup red,0,0,45,AAAAAA

	string red,4,4,BBBBBB

	```

	- dragstuff using C-switch

	- code kbytes:

```

 minimal: 		 4 kb

 grid only: 		15 kb

 userdraw only: 	10 kb

 multidraw single:	18 kb

 multidraw all: 	40 kb

 onclick + objects: 	14 kb

 drag xy + objects: 	14 kb

 typical exercise : 	30 kb

```

* 4/1/2020

	- moved dragstuff code : needs to simplify

	- start to move HTML5/Canvas transformation things to canvasdraw.c:

		- e.g. just recalculate the coordinates for objects: so there is no need for recalculating mouse coordinates in case of onclick/drag

		- except for 'text' and ?

		- keep optional mouse coordinate recalculation when using HTML5 transformations...

* 11/2019

	- rewrite of multidraw code and removal of verbatim js-code

	A few notes:

	- command 'inputstyle' will be used for setting 'css class' of the multidraw control table

    for example: inputstyle wimstable

	- when using a single draw primitive , command 'multilable nocontrols' will remove the 'control buttons'

	- when using keyword "duplicates" || "allowdups"  multiple identical points will NOT be removed from the student answer/reply

	- drag&drop math typesetting onto canvasdraw image:

	    - multidraw|userdraw images will only work with Mathml (through !insmath etc) if you use the 'wims modules svn' version of wims_mathml !!

		- e.g. things like !insdraw  \mmlid{123} \frac{1}{\pi}

		- of course the 'id' will only be added to a single call: this will NOT work: \mmlid{1} \frac{1}{\pi} + \mmlid{2} \frac{\pi}{2}

	   - multidraw|userdraw images and MathJaX will not work !

	   - multidraw|userdraw images and native MathML and KaTeX will work

	- drag&drop external material onto canvasdraw image:

		- all objects/content of type 'p','span','div','bitmap image','svg image' with an unique 'id' and

       onclick handler "onclick='javascript:place_image_on_canvas(this.id)'" may be placed onto a canvasdraw image

       when 'userdraw images,boguscolor' or 'multidraw images,...' is declared.

	- currently implemented multidraw primitives:

		*     "point","points",

		*     "circle","circles",

		*     "line","lines",

		*     "segment","segments",

		*     "arrow","arrows",

		*     "triangle","triangles",

		*     "closedpoly",

		*     "text",

		*     "rect","rects",

		*     "poly","polys",

		*     "parallelogram","parallelograms",

		*     "images",

		*     "curvedarrow","curvedarrows",

		*     "curvedarrow2","curvedarrows2"

	- TODO: add a few more draw primitives, like

    "crosshair(s)","ellipse(s)","arc(s) || angle(s)"...

############## REWRITE ################################

added 'angle' to draw_xml()10/4/2020

typo in 'case 12' command 'arc'

* 23/3/2020

added alternative commands for a few 'multidraw' subcommands

typo in doc

* 29/1/2020

stringup may now be set onclick (drag&drop not supported: is implemented in 'canvasdraw.min')

corrected non-univeral path to wims_mathml

* 6/1/2020

forgotten to reset angle=0 in 'killrotate'

## 2019

* 26/12/2019

NO support for dragging and transformation / rotations

generic mouse coordinate transformation ( transform_mouse(x,y,obj) ) usable for 'affine transformation' and 'onclick'

* 25/12/2019

"drag" and "rotate" WILL NOT WORK !!

"onclick" and "rotate" may be combined. (see createxo help "rotate")

adjusted documentation.

string/text using 'xoffset','xyoffset','yoffset' will now use a 2*linewidth marge

22/12/2019

object 10: clicked

object 9 : clicked

object 8 : not clicked

object 7 : not clicked

object 6 : clicked

object 5 : moved from (1:2) -> (2:2)

object 4 : not moved

object 3 : moved from (1:1) -> (3:3)

object 2 : moved from (1:3) -> (3:2)

object 1 : moved from (1:0) -> (2:1)

object 0 : not moved

reply = ["not_moved", "1:1:0:2:1:0", "2:0:1:3:2:0", "3:1:1:3:3:0", "not_moved", "5:1:2:2:2:0",1,0,0,1,1]

for example:

the clicked objects are '0' or '1'

obj_number,xorg[0],yorg[0],xnew[0],ynew[0],new_angle

moved object are items in the javascript reply array...in the same order as their appearance in the fly_script

unmoved object are labelled "not_moved" !

"onclick" and "drag x|y|xy" may now be used together and all data be read using "read_dragdrop()"

[ these are bugs, not features... ]

drag xy & rotate are only compatible if you are using a 'slider'

onclick & rotate are not compatible

impoved mouse selection of text (height of selection box was not ok)

corrected missing font-change when text was set 'onclick' [BPR]

* 21/12/2019

corrected wrong hexcolor conversion [Sophie Lemaire]

* 12/11/2019

if set, multiple identical points will NOT be removed from the student answer/reply

added keyword "duplicates" || "allowdups" for default "multidraw" replyformat

* 9/11/2019

corrected multidraw curvedarrows numeric input [BPR]

* 8/11/2019

correction in multidraw circles : list_uniq(A,B,C) will reserve 'C' for non-numeric answers !

* 2/11/2019

this will break module "H4/logic/logica-1.nl/exos/exo14" (only dutch module, so no serious conflicts)

reply format for "multidraw" in case of "circles" will give radius in x-range [BPR]

* 2/11/2019

```

#######

}

<input type="button" onclick="alert(read_dragdrop());" value="read_dragdrop()" />

<input type="button" onclick="alert(read_canvas());" value="read_canvas()" />

</script>

 find_images();

 };

  };

   };

    img.setAttribute('onclick','javascript:place_image_on_canvas(this.id);');

    idx++;

    img.setAttribute('id','drag_'+idx);

   if(id.indexOf('insert')!= -1){

   var id = img.id;

   var img = images[p];

  for(var p=0;p<len;p++){

  var idx=0;

  var len = images.length;

  var images = document.getElementsByTagName('img');

 /* look for images with 'insert' in the 'id'*/

 function find_images(){

 };

   if(typeof fun === 'function'){return fun();};

   var fun = eval("read_dragdrop"+canvas_scripts[0]);

 function read_dragdrop(){

 };

   if( typeof fun === 'function'){ return fun();};

   var fun = eval("read_canvas"+canvas_scripts[0]);

 function read_canvas(){

<script type="text/javascript">

</table>

 <tr><th> <img src="gifs/en.gif"  id="insert_en" /> </th><th>  <img src="gifs/nl.gif"  id="insert_nl" /> </th><th>  <img src="gifs/cn.gif"  id="insert_cn" />  </th><th>  <img src="gifs/it.gif"  id="insert_it" />  </th></tr>

 <tr><th> \I1   </th><th> \I2 </th><th> \I3 </th><th> \I4 </th></tr>

 <tr><th> \(\M1\) </th><th> \(\M2)</th><th> \(\M3) </th><th> \(\M4\) </th></tr>

 <tr><th> M1   </th><th> M2 </th><th> M3 </th><th> M4 </th></tr>

<table border="1">

}

# multidraw images

userdraw images,red

snaptogrid

centered

grid 2,2,grey,1,1,6,grey

axisnumbering

axis

precision 1

yrange -10,10

xrange -10,10

bgcolor white

\canvasdraw{500,500}{

\statement{

\text{divstyle="display:inline-block;width:auto;text-align: center;"}

\text{I4=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/100_39_0.png" id="I4" />}

\text{I3=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/1002_69_3.png" id="I3" />}

\text{I2=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/1002_57_9.png" id="I2" />}

\text{I1=<img style="width:50%;height:50%" onclick="javascript:place_image_on_canvas(this.id);" src="modules/data/chemistry/mol2D.fr/images/1002_28_4.png" id="I1" />}

\text{M4=\mmlid{M4}\xrightarrow{\rm N_2 \uparrow}}

\text{M3=\mmlid{M3}\xrightarrow{\rm O_2 \uparrow}}

\text{M2=\mmlid{M2}\xrightarrow{\rm H_2 \uparrow}}

\text{M1=\mmlid{M1}\xrightarrow{\text{reaction}}}

##### example OEF...

```

	- 'userdraw images,bogus color' : right mouse click removes item/object under mouse pointer

	- solving issue with size of dynamic created div's in 'userdraw images,color' and 'multidraw images'

* 26/9/2019

multidraw images

userdraw images,red

using command:

including KaTeX or MathJaX js-typesetting, MathML,bitmap, and any other html content,

All 'svg','div','span' elements on page may be used to drop onto canvas,

* 17/9/2019

on touch devices the canvasdraw inputfields could not be used

add attrubute autofocus,true to function 'add_inputs()'

* 8/9/2019

will now accept anything from the exercise page (including MathML,MathJaX,KaTeX typesetting) if included a 'div' with unique id and onclick='javascript:place_image_on_canvas(this.id);'

multidraw images

userdraw images,somecolor

* 5/9/2019

case killslider: replaced 'int p' by loop indicator 'i' [obado]

* 27/8/2019

TEMPORARY ---> all browsers are type 'GECKO' and MathJaX will take care of all others in command 'latex'

in case of KaTeX only use command 'latex x,y,tex_string'

command mathml is only suitable for "GECKO" and "NON-GECKO+MathJaX"

command latex calls 'getMML()' e.g. 'wims_mathml'  in case of "GECKO"

* 26/8/2019

Needs looking into. In mathml.c: katex div: 'display:block;visibility:hidden'./SCHAERSVOORDE/H1/algebra/vergelijkingen-1.nl/exos/exo9:mathml 0,10,10,0,$fun\

setting 'drag_type = -1' to drag KaTeX with left top corner...problems reading width of created div's/span's

WORK IN PROGRESS ( canvasdraw will need to call wims_mathml in case of GECKO browsers!)

to be used for KaTeX

Added command 'latex x,y,tex-string

* 25/8/2019

```

fcircles blue,3,3,1

drag xy

angle 0,0,2,0,0,red

fillpattern dot

arrow 0,0,5,0,7,red

fillcolor blue

slider -pi,pi,250,30,angle degrees,Rotate

opacity 200,100

fillcolor white

rotationcenter 0,0

linewidth 3

precision 1000

yrange -5,5

xrange -5,5

size 300,300

```

- click on 'reset' will deactivate all

- click on objects will activate

- command 'angle x0,y0,x1,y1,angle,color' will always be active in case of a rotation slider.

- drag x|y|xy may be combined with slider(s)

- snapto* will not work !

in slider exercises:

onclick and dragdrop may be combined, but is not really usefull :)

- every onclick object starts with obj.onclick_cnt = 0... when clicked obj.click_cnt = 1

- only the first element of a row is important (obj.click_cnt), which is 0 or 1

in onclick exercises

- obj.click_cnt is the objects sequence number (starting with '0' for the first draggable object in the script)

- only clicked objects have a line in the reply

in dragdrop exercises:

obj.click_cnt+','+obj.xorg[0]+','+obj.yorg[0]+','+current_x+','+current_y+','+current_angle+';\\n

dragdrop reply is now in format:

broken modules adapted

* 15/8/2019

   -- todo: restore slider 'follow_function system'

6) -- todo: restore xy-slider??

6) finished: reply&display precision and reply-format

5) finished: restored slider display 'system'

4) finished: slider rotation with preservation of coordinates e.g. 'mouse dragging' is supported

3) finished: group selection (just by clicking...no 'lasso')

2) finished: real coordinates when using 'drag & manual rotating' objects

1) finished: multiple sliders per object or objects (until 'killslider')

targets:

* 8/2019 rewriting of slider stuff (reponse to request/question of BPR)

* 10/8 correctedd stupid typo in DRAW_EXTERNAL_IMAGES

and corrected snapping to grid

corrected flaw in multidraw cirle [BPR]

* 3/7/2019

removed 'touchend' (MC)

* 22/6/2019

(changes should be made, not yet fixed)

work on the documentation: add '' ``for emphased words and <code></code>

* 08/06/2019

`userdraw circles,red`

is identical to

`multidraw circles

strokecolor red

multilabel NOCONTROLS`

in multidraw NOCONTROLS and a single object, no need for a 'draw object' button. It's analogue to userdraw.

in multidraw right mouse click will remove last drawn object of the currently selected  draw primitive

* 7/6

added ruler & protractor to new multisnap_check(x,y,use_snap);

```

#<input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(9,0);' value='REMOVE LAST ARROW ' />

<input type='button' onclick='javascript:var fun=eval("clear_draw_area"+canvas_scripts[0]);fun(24,0);' value='REMOVE LAST CURVEDARROW2 ' />

<input type='button' onclick='javascript:userdraw_primitive=24;multidraw_click_cnt = 0;' value='start drawing curvedarrows2' /> etc etc

<input type='button' onclick='javascript:userdraw_primitive=null' value='STOP DRAWING' />

```

controls for example:

```

curvedarrows2 = 24

curvedarrow2 = 23

curvedarrows = 22

curvedarrow = 21

images = 20

parallelograms = 19

parallelogram = 18

polys[3-9] = 17

poly[3-9] = 16

rects = 15

rect = 14

text = 13

closedspoly = 12

triangles = 11

triangle = 10

arrows = 9

arrow = 8

segments = 7

segment = 6

lines = 5

line = 4

circles = 3

circle = 2

points =1

point = 0

```

The object types are internally represented by the following numbers (makeing typo's will render your exercise null and void)

To activate this feature, use multilabel NOCONTROLS

When you are not content with the default 'multidraw control panel', you can create your own interface, using a few javascript functions to call the drawprimitives, delete things and 'stop drawing' in case you also want to drag&drop stuff...

### from doc's

6/6 added keyword 'NOCONTROLS' to disable all buttons for multidraw

command 'drag xy|x|y' was fallen of the wagon...

don't touch replyformat 29: it is universal and for multidraw  !

todo: modify/change 6,10,11,15,16,17,18,19,20,25,27,31

OEF : replyformat		22,23,28

USERDRAW DEFAULTS: replyformat  2,6,8,10,11,15,16,17,18,19,20,23,24,25,27,29,31

SCHAERSVOORDE : replyformat	2,7,8,21,22,23,24

Starting with unifying the 'replyformat' jungle...without touching existing modules

A single function "multisnap_check(x,y,use_snap)" will return xy[2] array with corrected  coordinates

* 5/6 removed confusing code about 'snapping to something' and unified it in a single variable 'use_snap=0,1,2,3,4' for 'dragstuff library', 'userdraw' and 'multidraw'

* 4/6 modified 'find_angle()' now using Math.atan2(x,y) ... smooth turning 360+ without flipping...see 'protractor'

```

<script>