jsxgraph 1.4.5 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/build/Readme.md +17 -0
  2. package/build/bin/jsxcompressor.js +1 -0
  3. package/build/bin/jsxgraphcore-min.js +7 -0
  4. package/build/bin/jsxgraphcore.js +83017 -0
  5. package/build/bin/jsxgraphcore.min.js +67 -0
  6. package/build/compressor.build.json +14 -0
  7. package/build/compressor.deps.js +8 -0
  8. package/build/core-amd.build.json +14 -0
  9. package/build/core-amd.deps.js +81 -0
  10. package/build/core.build.json +14 -0
  11. package/build/core.deps.js +102 -0
  12. package/build/plot.build.json +15 -0
  13. package/distrib/geogebra.min.js +1 -1
  14. package/distrib/geonext.min.js +1 -1
  15. package/distrib/index.d.ts +1 -0
  16. package/distrib/intergeo.min.js +1 -1
  17. package/distrib/jsxgraph.css +6 -0
  18. package/distrib/jsxgraphcore.js +3 -3
  19. package/distrib/jsxgraphsrc.js +3326 -1816
  20. package/distrib/sketch.min.js +1 -1
  21. package/package.json +1 -1
  22. package/src/3d/box3d.js +43 -38
  23. package/src/3d/curve3d.js +157 -53
  24. package/src/3d/element3d.js +84 -0
  25. package/src/3d/linspace3d.js +427 -146
  26. package/src/3d/point3d.js +352 -153
  27. package/src/3d/surface3d.js +140 -42
  28. package/src/3d/view3d.js +319 -164
  29. package/src/base/board.js +42 -26
  30. package/src/base/constants.js +8 -1
  31. package/src/base/curve.js +51 -9
  32. package/src/base/polygon.js +111 -69
  33. package/src/base/text.js +125 -51
  34. package/src/base/ticks.js +11 -2
  35. package/src/element/button.js +7 -3
  36. package/src/element/checkbox.js +8 -4
  37. package/src/element/composition.js +7 -1
  38. package/src/element/conic.js +2 -2
  39. package/src/element/input.js +9 -5
  40. package/src/jsxgraph.js +2 -0
  41. package/src/loadjsxgraph.js +13 -8
  42. package/src/math/clip.js +34 -134
  43. package/src/math/geometry.js +204 -3
  44. package/src/math/math.js +1 -2
  45. package/src/math/nlp.js +789 -730
  46. package/src/options.js +159 -8
  47. package/src/options3d.js +24 -7
  48. package/src/parser/jessiecode.js +8 -2
  49. package/src/renderer/abstract.js +26 -15
  50. package/src/renderer/canvas.js +2 -2
  51. package/src/renderer/svg.js +15 -2
  52. package/src/utils/env.js +29 -46
  53. package/src/utils/type.js +75 -2
  54. package/src/3d/threed.js +0 -38
package/src/options.js CHANGED
@@ -255,6 +255,7 @@ define([
255
255
  * @name JXG.Board#showNavigation
256
256
  * @type Boolean
257
257
  * @default true
258
+ * @see JXG.AbstractRenderer#drawZoomBar
258
259
  */
259
260
  showNavigation: true,
260
261
 
@@ -265,6 +266,7 @@ define([
265
266
  * @name JXG.Board#showZoom
266
267
  * @type Boolean
267
268
  * @default true
269
+ * @see JXG.AbstractRenderer#drawZoomBar
268
270
  */
269
271
  showZoom: true,
270
272
 
@@ -275,6 +277,7 @@ define([
275
277
  * @name JXG.Board#showReload
276
278
  * @type Boolean
277
279
  * @default false
280
+ * @see JXG.AbstractRenderer#drawZoomBar
278
281
  */
279
282
  showReload: false,
280
283
 
@@ -284,6 +287,7 @@ define([
284
287
  * @name JXG.Board#showScreenshot
285
288
  * @type Boolean
286
289
  * @default false
290
+ * @see JXG.AbstractRenderer#drawZoomBar
287
291
  */
288
292
  showScreenshot: false,
289
293
 
@@ -316,6 +320,8 @@ define([
316
320
  * @type Boolean
317
321
  * @see JXG.Board#fullscreen
318
322
  * @default false
323
+ * @see JXG.AbstractRenderer#drawZoomBar
324
+ * @see JXG.AbstractRenderer#drawZoomBar
319
325
  */
320
326
  showFullscreen: false,
321
327
 
@@ -324,7 +330,8 @@ define([
324
330
  * controls if the icon is shown.
325
331
  * The following attribute(s) can be set:
326
332
  * <ul>
327
- * <li>symbol (String): Unicode symbol which is shown in the navigation bar. Default: '\u25a1'
333
+ * <li>symbol (String): Unicode symbol which is shown in the navigation bar. Default: svg code for '\u26f6', other
334
+ * possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
328
335
  * <li>id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken.
329
336
  * It may be an outer div element, e.g. if the old aspect ratio trick is used. Default: null, i.e. use the JSXGraph div.
330
337
  * </ul>
@@ -356,11 +363,14 @@ define([
356
363
  * </script><pre>
357
364
  *
358
365
  * @name JXG.Board#fullscreen
366
+ * @default svg code
359
367
  * @see JXG.Board#showFullscreen
368
+ * @see JXG.AbstractRenderer#drawZoomBar
360
369
  * @type Object
361
370
  */
362
371
  fullscreen: {
363
- symbol: '\u25a1', // '\u26f6' (not supported by MacOS), // '\u25a1'
372
+ symbol: '<svg height="1em" width="1em" version="1.1" viewBox="10 10 18 18"><path fill="#666" d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path><path fill="#666" d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path><path fill="#666" d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path><path fill="#666" d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></svg>',
373
+ // '\u25a1', // '\u26f6' (not supported by MacOS),
364
374
  id: null
365
375
  },
366
376
 
@@ -370,6 +380,7 @@ define([
370
380
  * @name JXG.Board#showClearTraces
371
381
  * @type Boolean
372
382
  * @default false
383
+ * @see JXG.AbstractRenderer#drawZoomBar
373
384
  */
374
385
  showClearTraces: false,
375
386
 
@@ -1345,6 +1356,8 @@ define([
1345
1356
  */
1346
1357
  shadow: false,
1347
1358
 
1359
+ shadowColor: 'black',
1360
+
1348
1361
  /**
1349
1362
  * If true the element will be traced, i.e. on every movement the element will be copied
1350
1363
  * to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements.
@@ -1539,7 +1552,7 @@ define([
1539
1552
  /**
1540
1553
  * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
1541
1554
  * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
1542
- * The tird parameter is a null, number or a string. In the latter two cases, this value is taken.
1555
+ * The third parameter is a null, number or a string. In the latter two cases, this value is taken.
1543
1556
  * Returns a string.
1544
1557
  *
1545
1558
  * @type function
@@ -1749,6 +1762,67 @@ define([
1749
1762
  */
1750
1763
  minorTicks: 4,
1751
1764
 
1765
+ /**
1766
+ * By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only.
1767
+ * If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks
1768
+ * between two labels.
1769
+ *
1770
+ * @type {Number|Boolean}
1771
+ * @name Ticks#ticksPerLabel
1772
+ * @default false
1773
+ *
1774
+ * @example
1775
+ * const board = JXG.JSXGraph.initBoard('jxgbox', {
1776
+ * boundingbox: [-4, 4, 4, -4],
1777
+ * axis: true,
1778
+ * defaultAxes: {
1779
+ * x: {
1780
+ * ticks: {
1781
+ * minorTicks: 7,
1782
+ * ticksPerLabel: 4,
1783
+ * minorHeight: 20,
1784
+ * }
1785
+ * },
1786
+ * y: {
1787
+ * ticks: {
1788
+ * minorTicks: 3,
1789
+ * ticksPerLabel: 2,
1790
+ * minorHeight: 20
1791
+ * }
1792
+ * }
1793
+ * }
1794
+ * });
1795
+ *
1796
+ * </pre><div id="JXGbc45a421-c867-4b0a-9b8d-2b2576020690" class="jxgbox" style="width: 300px; height: 300px;"></div>
1797
+ * <script type="text/javascript">
1798
+ * (function() {
1799
+ * var board = JXG.JSXGraph.initBoard('JXGbc45a421-c867-4b0a-9b8d-2b2576020690',
1800
+ * {showcopyright: false, shownavigation: false,
1801
+ * boundingbox: [-4, 4, 4, -4],
1802
+ * axis: true,
1803
+ * defaultAxes: {
1804
+ * x: {
1805
+ * ticks: {
1806
+ * minorTicks: 7,
1807
+ * ticksPerLabel: 4,
1808
+ * minorHeight: 20,
1809
+ * }
1810
+ * },
1811
+ * y: {
1812
+ * ticks: {
1813
+ * minorTicks: 3,
1814
+ * ticksPerLabel: 2,
1815
+ * minorHeight: 20
1816
+ * }
1817
+ * }
1818
+ * }
1819
+ * });
1820
+ * })();
1821
+ *
1822
+ * </script><pre>
1823
+ */
1824
+ ticksPerLabel: false,
1825
+
1752
1826
  /**
1753
1827
  * Scale the ticks but not the tick labels.
1754
1828
  * @type Number
@@ -1815,7 +1889,7 @@ define([
1815
1889
  digits: 3,
1816
1890
 
1817
1891
  /**
1818
- * The default distance between two ticks. Please be aware that this value does not have
1892
+ * The default distance (in user coordinates, not pixels) between two ticks. Please be aware that this value does not have
1819
1893
  * to be used if {@link Ticks#insertTicks} is set to true.
1820
1894
  *
1821
1895
  * @type Number
@@ -3461,6 +3535,44 @@ define([
3461
3535
  * </pre>
3462
3536
  * type=7 is the default for curves if firstArrow: true
3463
3537
  *
3538
+ * @example
3539
+ * board.options.line.lastArrow = false;
3540
+ * board.options.line.firstArrow = {size: 10, highlightSize: 10};
3541
+ * board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
3542
+ * board.options.line.strokeWidth = 4;
3543
+ * board.options.line.highlightStrokeWidth = 4;
3544
+ *
3545
+ * board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
3546
+ * board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
3547
+ * board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
3548
+ * board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
3549
+ * board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
3550
+ * board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
3551
+ * board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
3552
+ *
3553
+ * </pre><div id="JXGc94a93da-c942-4204-8bb6-b39726cbb09b" class="jxgbox" style="width: 300px; height: 300px;"></div>
3554
+ * <script type="text/javascript">
3555
+ * (function() {
3556
+ * var board = JXG.JSXGraph.initBoard('JXGc94a93da-c942-4204-8bb6-b39726cbb09b',
3557
+ * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
3558
+ * board.options.line.lastArrow = false;
3559
+ * board.options.line.firstArrow = {size: 10, highlightSize: 10};
3560
+ * board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
3561
+ * board.options.line.strokeWidth = 4;
3562
+ * board.options.line.highlightStrokeWidth = 4;
3563
+ *
3564
+ * board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
3565
+ * board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
3566
+ * board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
3567
+ * board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
3568
+ * board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
3569
+ * board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
3570
+ * board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
3571
+ *
3572
+ * })();
3573
+ *
3574
+ * </script><pre>
3575
+ *
3464
3576
  * @name Line#firstArrow
3465
3577
  * @see Line#lastArrow
3466
3578
  * @see Line#touchFirstPoint
@@ -3514,11 +3626,47 @@ define([
3514
3626
  * touchLastPoint: true,
3515
3627
  * firstArrow: {type: 3, size: 8}
3516
3628
  * });
3517
- *
3518
3629
  * })();
3519
3630
  *
3520
3631
  * </script>
3521
3632
  *
3633
+ * @example
3634
+ * board.options.line.strokeWidth = 4;
3635
+ * board.options.line.highlightStrokeWidth = 4;
3636
+ * board.options.line.firstArrow = false;
3637
+ * board.options.line.lastArrow = {size: 10, highlightSize: 10};
3638
+ * board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
3639
+ *
3640
+ * board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
3641
+ * board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
3642
+ * board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
3643
+ * board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
3644
+ * board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
3645
+ * board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
3646
+ * board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
3647
+ *
3648
+ * </pre><div id="JXGca206b1c-e319-4899-8b90-778f53fd926d" class="jxgbox" style="width: 300px; height: 300px;"></div>
3649
+ * <script type="text/javascript">
3650
+ * (function() {
3651
+ * var board = JXG.JSXGraph.initBoard('JXGca206b1c-e319-4899-8b90-778f53fd926d',
3652
+ * {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
3653
+ * board.options.line.strokeWidth = 4;
3654
+ * board.options.line.highlightStrokeWidth = 4;
3655
+ * board.options.line.firstArrow = false;
3656
+ * board.options.line.lastArrow = {size: 10, highlightSize: 10};
3657
+ * board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
3658
+ *
3659
+ * board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
3660
+ * board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
3661
+ * board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
3662
+ * board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
3663
+ * board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
3664
+ * board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
3665
+ * board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
3666
+ * })();
3667
+ *
3668
+ * </script><pre>
3669
+ *
3522
3670
  * @name Line#lastArrow
3523
3671
  * @see Line#firstArrow
3524
3672
  * @see Line#touchLastPoint
@@ -5656,8 +5804,8 @@ define([
5656
5804
  anchor: null,
5657
5805
 
5658
5806
  /**
5659
- * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>, <tt>'middle'</tt>, and
5660
- * <tt>'right'</tt>.
5807
+ * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>,
5808
+ * <tt>'middle'</tt>, and <tt>'right'</tt>.
5661
5809
  *
5662
5810
  * @name anchorX
5663
5811
  * @memberOf Text.prototype
@@ -5669,10 +5817,11 @@ define([
5669
5817
  /**
5670
5818
  * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and
5671
5819
  * <tt>'bottom'</tt>.
5820
+ * For MathJax or KaTeX, 'top' is recommended.
5672
5821
  *
5673
5822
  * @name anchorY
5674
5823
  * @memberOf Text.prototype
5675
- * @default 'auto'
5824
+ * @default 'middle'
5676
5825
  * @type String
5677
5826
  */
5678
5827
  anchorY: 'middle',
@@ -5683,6 +5832,7 @@ define([
5683
5832
  * @name cssClass
5684
5833
  * @memberOf Text.prototype
5685
5834
  * @type String
5835
+ * @default 'JXGtext'
5686
5836
  */
5687
5837
  cssClass: 'JXGtext',
5688
5838
 
@@ -5692,6 +5842,7 @@ define([
5692
5842
  * @name highlightCssClass
5693
5843
  * @memberOf Text.prototype
5694
5844
  * @type String
5845
+ * @default 'JXGtext'
5695
5846
  */
5696
5847
  highlightCssClass: 'JXGtext',
5697
5848
 
package/src/options3d.js CHANGED
@@ -8,9 +8,9 @@ define([
8
8
 
9
9
  JXG.extend(Options, {
10
10
 
11
- infobox: {
12
- strokeColor: 'black'
13
- },
11
+ // infobox: {
12
+ // strokeColor: 'black'
13
+ // },
14
14
 
15
15
  axes3d: {
16
16
  /**#@+
@@ -181,6 +181,19 @@ define([
181
181
  point2: { visible: false, name: '', label: { visible: true } }
182
182
  },
183
183
 
184
+ curve3d: {
185
+ /**#@+
186
+ * @visprop
187
+ */
188
+
189
+ highlight: false,
190
+ tabindex: -1,
191
+ strokeWidth: 1,
192
+ numberPointsHigh: 200
193
+
194
+ /**#@-*/
195
+ },
196
+
184
197
  mesh3d: {
185
198
  strokeWidth: 1,
186
199
  strokeColor: '#9a9a9a',
@@ -202,7 +215,8 @@ define([
202
215
  gradient: 'linear',
203
216
  gradientSecondColor: '#ffffff',
204
217
 
205
- point1: {visible: false, name: ''},
218
+ point: {visible: false, name: ''}, // Used only in case of point/point
219
+ point1: {visible: false, name: ''}, // Used only in case of point/direction/range
206
220
  point2: {visible: false, name: ''}
207
221
  },
208
222
 
@@ -217,10 +231,13 @@ define([
217
231
  gradientSecondColor: '#ffffff',
218
232
  gradientAngle: Math.PI,
219
233
  fillColor: '#a7a7a7',
220
- fillOpacity: 0.6
234
+ fillOpacity: 0.6,
235
+
236
+ point: {visible: false, name: '', fixed: true}
221
237
  },
222
238
 
223
239
  point3d: {
240
+ infoboxDigits: 'auto',
224
241
  strokeWidth: 0,
225
242
  gradient: 'radial',
226
243
  gradientSecondColor: '#555555',
@@ -240,14 +257,14 @@ define([
240
257
  /**
241
258
  * Number of intervals the mesh is divided into in direction of parameter u.
242
259
  * @type Number
243
- * @name Surface3D#stepsU
260
+ * @name ParametricSurface3D#stepsU
244
261
  */
245
262
  stepsU: 30,
246
263
 
247
264
  /**
248
265
  * Number of intervals the mesh is divided into in direction of parameter v.
249
266
  * @type Number
250
- * @name Surface3D#stepsV
267
+ * @name ParametricSurface3D#stepsV
251
268
  */
252
269
  stepsV: 30
253
270
 
@@ -1732,6 +1732,8 @@ define([
1732
1732
 
1733
1733
  if (js) {
1734
1734
  e = '$jc$.mergeAttributes(' + list.join(', ') + ')';
1735
+ } else {
1736
+ e = list.join(', ');
1735
1737
  }
1736
1738
  }
1737
1739
  node.children[0].withProps = !!node.children[2];
@@ -1739,7 +1741,7 @@ define([
1739
1741
  for (i = 0; i < node.children[1].length; i++) {
1740
1742
  list.push(this.compile(node.children[1][i], js));
1741
1743
  }
1742
- ret = this.compile(node.children[0], js) + '(' + list.join(', ') + (node.children[2] && js ? ', ' + e : '') + ')' + (node.children[2] && !js ? e : '');
1744
+ ret = this.compile(node.children[0], js) + '(' + list.join(', ') + (node.children[2] && js ? ', ' + e : '') + ')' + (node.children[2] && !js ? ' ' + e : '');
1743
1745
  if (js) {
1744
1746
  // Inserting a newline here allows simulataneously
1745
1747
  // - procedural calls like Q.moveTo(...); and
@@ -1900,7 +1902,11 @@ define([
1900
1902
  }
1901
1903
 
1902
1904
  if (node.needsBrackets) {
1903
- ret = '{\n' + ret + '\n}\n';
1905
+ if (js) {
1906
+ ret = '{\n' + ret + '\n}\n';
1907
+ } else {
1908
+ ret = '<< ' + ret + ' >>';
1909
+ }
1904
1910
  }
1905
1911
 
1906
1912
  return ret;
@@ -1862,6 +1862,13 @@ define([
1862
1862
 
1863
1863
  /**
1864
1864
  * The tiny zoom bar shown on the bottom of a board (if showNavigation on board creation is true).
1865
+ * It is a div element and gets the CSS class "JXG_navigation" and the id {board id}_navigationbar.
1866
+ *
1867
+ * The buttons get the CSS class "JXG_navigation_button" and the id {board_id}_name where name is
1868
+ * one of [top, down, left, right, out, 100, in, fullscreen, screenshot, reload, cleartraces].
1869
+ *
1870
+ * The symbols are hard-coded.
1871
+ *
1865
1872
  * @param {JXG.Board} board Reference to a JSXGraph board.
1866
1873
  * @param {Object} attr Attributes of the navigation bar
1867
1874
  *
@@ -1881,12 +1888,13 @@ define([
1881
1888
  e.cancelBubble = true;
1882
1889
  }
1883
1890
  },
1884
- createButton = function (label, handler) {
1891
+ createButton = function (label, handler, id) {
1885
1892
  var button;
1886
1893
 
1894
+ id = id || '';
1895
+
1887
1896
  button = doc.createElement('span');
1888
- node.appendChild(button);
1889
- button.appendChild(doc.createTextNode(label));
1897
+ button.innerHTML = label; // button.appendChild(doc.createTextNode(label));
1890
1898
 
1891
1899
  // Style settings are superseded by adding the CSS class below
1892
1900
  button.style.paddingLeft = '7px';
@@ -1897,6 +1905,9 @@ define([
1897
1905
  }
1898
1906
  // button.setAttribute('tabindex', 0);
1899
1907
 
1908
+ button.setAttribute('id', id);
1909
+ node.appendChild(button);
1910
+
1900
1911
  // Highlighting is now done with CSS
1901
1912
  // Env.addEvent(button, 'mouseover', function () {
1902
1913
  // this.style.backgroundColor = attr.highlightfillcolor;
@@ -1920,7 +1931,7 @@ define([
1920
1931
  doc = board.containerObj.ownerDocument;
1921
1932
  node = doc.createElement('div');
1922
1933
 
1923
- node.setAttribute('id', board.containerObj.id + '_navigationbar');
1934
+ node.setAttribute('id', board.container + '_navigationbar');
1924
1935
 
1925
1936
  // Style settings are superseded by adding the CSS class below
1926
1937
  node.style.color = attr.strokecolor;
@@ -1942,7 +1953,7 @@ define([
1942
1953
  if (board.attr.showfullscreen) {
1943
1954
  createButton(board.attr.fullscreen.symbol, function () {
1944
1955
  board.toFullscreen(board.attr.fullscreen.id);
1945
- });
1956
+ }, board.container + '_navigation_fullscreen');
1946
1957
  }
1947
1958
 
1948
1959
  if (board.attr.showscreenshot) {
@@ -1950,7 +1961,7 @@ define([
1950
1961
  window.setTimeout(function() {
1951
1962
  board.renderer.screenshot(board, '', false);
1952
1963
  }, 330);
1953
- });
1964
+ }, board.container + '_navigation_screenshot');
1954
1965
  }
1955
1966
 
1956
1967
  if (board.attr.showreload) {
@@ -1959,26 +1970,26 @@ define([
1959
1970
  // of this button. That's why this anonymous function wrapper is required.
1960
1971
  createButton('\u21BB', function () {
1961
1972
  board.reload();
1962
- });
1973
+ }, board.container + '_navigation_reload');
1963
1974
  }
1964
1975
 
1965
1976
  if (board.attr.showcleartraces) {
1966
1977
  // clear traces symbol (otimes): \u27F2
1967
1978
  createButton('\u2297', function () {
1968
1979
  board.clearTraces();
1969
- });
1980
+ }, board.container + '_navigation_cleartraces');
1970
1981
  }
1971
1982
 
1972
1983
  if (board.attr.shownavigation) {
1973
1984
  if (board.attr.showzoom) {
1974
- createButton('\u2013', board.zoomOut);
1975
- createButton('o', board.zoom100);
1976
- createButton('+', board.zoomIn);
1985
+ createButton('\u2013', board.zoomOut, board.container + '_navigation_out');
1986
+ createButton('o', board.zoom100, board.container + '_navigation_100');
1987
+ createButton('+', board.zoomIn, board.container + '_navigation_in');
1977
1988
  }
1978
- createButton('\u2190', board.clickLeftArrow);
1979
- createButton('\u2193', board.clickUpArrow);
1980
- createButton('\u2191', board.clickDownArrow);
1981
- createButton('\u2192', board.clickRightArrow);
1989
+ createButton('\u2190', board.clickLeftArrow, board.container + '_navigation_left');
1990
+ createButton('\u2193', board.clickUpArrow, board.container + '_navigation_up');
1991
+ createButton('\u2191', board.clickDownArrow, board.container + '_navigation_down');
1992
+ createButton('\u2192', board.clickRightArrow, board.container + '_navigation_right');
1982
1993
  }
1983
1994
  }
1984
1995
  },
@@ -143,7 +143,7 @@ define([
143
143
  if (doFill) {
144
144
  context.lineTo(shape[0][0], shape[0][1]);
145
145
  context.closePath();
146
- context.fill();
146
+ context.fill('evenodd');
147
147
  } else {
148
148
  context.stroke();
149
149
  }
@@ -160,7 +160,7 @@ define([
160
160
 
161
161
  context.save();
162
162
  if (this._setColor(el, 'fill')) {
163
- context.fill();
163
+ context.fill('evenodd');
164
164
  }
165
165
  context.restore();
166
166
  },
@@ -138,15 +138,22 @@ define([
138
138
  this.filter.setAttributeNS(null, 'filterUnits', 'userSpaceOnUse');
139
139
 
140
140
  this.feOffset = this.container.ownerDocument.createElementNS(this.svgNamespace, 'feOffset');
141
+ this.feOffset.setAttributeNS(null, 'in', 'SourceAlpha'); // b/w: SourceAlpha, Color: SourceGraphic
141
142
  this.feOffset.setAttributeNS(null, 'result', 'offOut');
142
- this.feOffset.setAttributeNS(null, 'in', 'SourceAlpha');
143
143
  this.feOffset.setAttributeNS(null, 'dx', '5');
144
144
  this.feOffset.setAttributeNS(null, 'dy', '5');
145
145
  this.filter.appendChild(this.feOffset);
146
146
 
147
+ // this.feColor = this.container.ownerDocument.createElementNS(this.svgNamespace, 'feColorMatrix');
148
+ // this.feColor.setAttributeNS(null, 'in', 'offOut');
149
+ // this.feColor.setAttributeNS(null, 'result', 'colorOut');
150
+ // this.feColor.setAttributeNS(null, 'type', 'matrix');
151
+ // this.feColor.setAttributeNS(null, 'values', '0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 50 0 0 0 1 0');
152
+ // this.filter.appendChild(this.feColor);
153
+
147
154
  this.feGaussianBlur = this.container.ownerDocument.createElementNS(this.svgNamespace, 'feGaussianBlur');
148
- this.feGaussianBlur.setAttributeNS(null, 'result', 'blurOut');
149
155
  this.feGaussianBlur.setAttributeNS(null, 'in', 'offOut');
156
+ this.feGaussianBlur.setAttributeNS(null, 'result', 'blurOut');
150
157
  this.feGaussianBlur.setAttributeNS(null, 'stdDeviation', '3');
151
158
  this.filter.appendChild(this.feGaussianBlur);
152
159
 
@@ -956,6 +963,7 @@ define([
956
963
  len = el.vertices.length;
957
964
 
958
965
  node.setAttributeNS(null, 'stroke', 'none');
966
+ node.setAttributeNS(null, 'fill-rule', 'evenodd');
959
967
  if (el.elType === 'polygonalchain') {
960
968
  len++;
961
969
  }
@@ -1411,10 +1419,15 @@ define([
1411
1419
  // documented in JXG.AbstractRenderer
1412
1420
  setShadow: function (el) {
1413
1421
  var ev_s = Type.evaluate(el.visProp.shadow);
1422
+ // ev_c = Type.evaluate(el.visProp.shadowcolor),
1423
+ // c;
1424
+
1414
1425
  if (el.visPropOld.shadow === ev_s) {
1415
1426
  return;
1416
1427
  }
1417
1428
 
1429
+ // c = JXG.rgbParser(ev_c);
1430
+
1418
1431
  if (Type.exists(el.rendNode)) {
1419
1432
  if (ev_s) {
1420
1433
  el.rendNode.setAttributeNS(null, 'filter', 'url(#' + this.container.id + '_' + 'f1)');