jsxgraph 1.4.4 → 1.4.6

package/src/options.js

@@ -255,6 +255,7 @@ define([
              * @name JXG.Board#showNavigation
              * @type Boolean
              * @default true
+             * @see JXG.AbstractRenderer#drawZoomBar
              */
             showNavigation: true,
 
@@ -265,6 +266,7 @@ define([
              * @name JXG.Board#showZoom
              * @type Boolean
              * @default true
+             * @see JXG.AbstractRenderer#drawZoomBar
              */
             showZoom: true,
 
@@ -275,6 +277,7 @@ define([
              * @name JXG.Board#showReload
              * @type Boolean
              * @default false
+             * @see JXG.AbstractRenderer#drawZoomBar
              */
             showReload: false,
 
@@ -284,6 +287,7 @@ define([
              * @name JXG.Board#showScreenshot
              * @type Boolean
              * @default false
+             * @see JXG.AbstractRenderer#drawZoomBar
              */
             showScreenshot: false,
 
@@ -316,6 +320,8 @@ define([
              * @type Boolean
              * @see JXG.Board#fullscreen
              * @default false
+             * @see JXG.AbstractRenderer#drawZoomBar
+             * @see JXG.AbstractRenderer#drawZoomBar
              */
             showFullscreen: false,
 
@@ -324,7 +330,8 @@ define([
              * controls if the icon is shown.
              * The following attribute(s) can be set:
              * <ul>
-             *  <li>symbol (String): Unicode symbol which is shown in the navigation bar. Default: '\u25a1'
+             *  <li>symbol (String): Unicode symbol which is shown in the navigation bar.  Default: svg code for '\u26f6', other
+             * possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
              *  <li>id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken.
              * 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.
              * </ul>
@@ -356,11 +363,14 @@ define([
              * </script><pre>
              *
              * @name JXG.Board#fullscreen
+             * @default svg code
              * @see JXG.Board#showFullscreen
+             * @see JXG.AbstractRenderer#drawZoomBar
              * @type Object
              */
             fullscreen: {
-                symbol: '\u25a1', // '\u26f6' (not supported by MacOS), // '\u25a1'
+                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>', 
+                    // '\u25a1', // '\u26f6' (not supported by MacOS),
                 id: null
             },
 
@@ -370,6 +380,7 @@ define([
              * @name JXG.Board#showClearTraces
              * @type Boolean
              * @default false
+             * @see JXG.AbstractRenderer#drawZoomBar
              */
             showClearTraces: false,
 
@@ -1345,6 +1356,8 @@ define([
              */
             shadow: false,
 
+            shadowColor: 'black',
+
             /**
              * If true the element will be traced, i.e. on every movement the element will be copied
              * to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements.
@@ -1411,14 +1424,33 @@ define([
              * <p>
              * In case the element is a polygon or line and it has the attribute "scalable:false",
              * moving the element with two fingers results in a rotation or translation.
+             * <p>
+             * If an element is set to be neither scalable nor rotatable, it can only be translated.
              *
              * @type Boolean
              * @default true
              * @name JXG.GeometryElement#scalable
              * @see JXG.Ticks#fixed
+             * @see JXG.GeometryElement#rotatable
              */
             scalable: true,
 
+            /**
+             * Determines whether two-finger manipulation may rotate this object.
+             * If set to false, the object can only be scaled and translated.
+             * <p>
+             * In case the element is a polygon or line and it has the attribute "rotatable:false",
+             * moving the element with two fingers results in a rotation or translation.
+             * <p>
+             * If an element is set to be neither scalable nor rotatable, it can only be translated.
+             *
+             * @type Boolean
+             * @default true
+             * @name JXG.GeometryElement#rotatable
+             * @see JXG.GeometryElement#scalable
+             */
+            rotatable: true,
+
             /**
              * If the element is dragged it will be moved on mousedown or touchstart to the
              * top of its layer. Works only for SVG renderer and for simple elements
@@ -1490,6 +1522,7 @@ define([
 
             /**
              * Controls if an element can get the focus with the tab key.
+             * tabindex corresponds to the HTML attribute of the same name.
              * See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">descriptiona at MDN</a>.
              * The additional value null completely disables focus of an element.
              * The value will be ignored if keyboard control of the board is not enabled or
@@ -1519,6 +1552,8 @@ define([
             /**
              * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
              * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
+             * The third parameter is a null, number or a string. In the latter two cases, this value is taken.
+             * Returns a string.
              *
              * @type function
              * @name Ticks#generateLabelText
@@ -1529,7 +1564,7 @@ define([
              * A function that expects two {@link JXG.Coords}, the first one representing the coordinates of the
              * tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
              *
-             * @deprecated Use {@link JGX.Options@generateLabelValue}
+             * @deprecated Use {@link JGX.Options@generateLabelText}
              * @type function
              * @name Ticks#generateLabelValue
              */
@@ -1727,6 +1762,67 @@ define([
              */
             minorTicks: 4,
 
+            /**
+             * By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only.
+             * If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks
+             * between two labels.
+             *
+             * @type {Number|Boolean}
+             * @name Ticks#ticksPerLabel
+             * @default false
+             *
+             * @example
+             * const board = JXG.JSXGraph.initBoard('jxgbox', {
+             *     boundingbox: [-4, 4, 4, -4],
+             *     axis: true,
+             *     defaultAxes: {
+             *         x: {
+             *             ticks: {
+             *                 minorTicks: 7,
+             *                 ticksPerLabel: 4,
+             *                 minorHeight: 20,
+             *             }
+             *         },
+             *         y: {
+             *             ticks: {
+             *                 minorTicks: 3,
+             *                 ticksPerLabel: 2,
+             *                 minorHeight: 20
+             *             }
+             *         }
+             *     }
+             * });
+             *
+             * </pre><div id="JXGbc45a421-c867-4b0a-9b8d-2b2576020690" class="jxgbox" style="width: 300px; height: 300px;"></div>
+             * <script type="text/javascript">
+             *     (function() {
+             *         var board = JXG.JSXGraph.initBoard('JXGbc45a421-c867-4b0a-9b8d-2b2576020690',
+             *             {showcopyright: false, shownavigation: false,
+             *              boundingbox: [-4, 4, 4, -4],
+             *         axis: true,
+             *         defaultAxes: {
+             *             x: {
+             *                 ticks: {
+             *                     minorTicks: 7,
+             *                     ticksPerLabel: 4,
+             *                     minorHeight: 20,
+             *                 }
+             *             },
+             *             y: {
+             *                 ticks: {
+             *                     minorTicks: 3,
+             *                     ticksPerLabel: 2,
+             *                     minorHeight: 20
+             *                 }
+             *             }
+             *         }
+             *     });
+             *     })();
+             *
+             * </script><pre>
+             */
+            ticksPerLabel: false,
+
             /**
              * Scale the ticks but not the tick labels.
              * @type Number
@@ -1793,7 +1889,7 @@ define([
             digits: 3,
 
             /**
-             * The default distance between two ticks. Please be aware that this value does not have
+             * The default distance (in user coordinates, not  pixels) between two ticks. Please be aware that this value does not have
              * to be used if {@link Ticks#insertTicks} is set to true.
              *
              * @type Number
@@ -3439,6 +3535,44 @@ define([
              * </pre>
              * type=7 is the default for curves if firstArrow: true
              *
+             * @example
+             *     board.options.line.lastArrow = false;
+             *     board.options.line.firstArrow = {size: 10, highlightSize: 10};
+             *     board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
+             *     board.options.line.strokeWidth = 4;
+             *     board.options.line.highlightStrokeWidth = 4;
+             *
+             *     board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
+             *     board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
+             *     board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
+             *     board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
+             *     board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
+             *     board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
+             *     board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
+             *
+             * </pre><div id="JXGc94a93da-c942-4204-8bb6-b39726cbb09b" class="jxgbox" style="width: 300px; height: 300px;"></div>
+             * <script type="text/javascript">
+             *     (function() {
+             *         var board = JXG.JSXGraph.initBoard('JXGc94a93da-c942-4204-8bb6-b39726cbb09b',
+             *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
+             *         board.options.line.lastArrow = false;
+             *         board.options.line.firstArrow = {size: 10, highlightSize: 10};
+             *         board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
+             *         board.options.line.strokeWidth = 4;
+             *         board.options.line.highlightStrokeWidth = 4;
+             *
+             *         board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
+             *         board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
+             *         board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
+             *         board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
+             *         board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
+             *         board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
+             *         board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});
+             *
+             *     })();
+             *
+             * </script><pre>
+             *
              * @name Line#firstArrow
              * @see Line#lastArrow
              * @see Line#touchFirstPoint
@@ -3492,11 +3626,47 @@ define([
              *              touchLastPoint: true,
              *              firstArrow: {type: 3, size: 8}
              *             });
-             *
              *     })();
              *
              * </script>
              *
+             * @example
+             *     board.options.line.strokeWidth = 4;
+             *     board.options.line.highlightStrokeWidth = 4;
+             *     board.options.line.firstArrow = false;
+             *     board.options.line.lastArrow = {size: 10, highlightSize: 10};
+             *     board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
+             *
+             *     board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
+             *     board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
+             *     board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
+             *     board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
+             *     board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
+             *     board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
+             *     board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
+             *
+             * </pre><div id="JXGca206b1c-e319-4899-8b90-778f53fd926d" class="jxgbox" style="width: 300px; height: 300px;"></div>
+             * <script type="text/javascript">
+             *     (function() {
+             *         var board = JXG.JSXGraph.initBoard('JXGca206b1c-e319-4899-8b90-778f53fd926d',
+             *             {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
+             *         board.options.line.strokeWidth = 4;
+             *         board.options.line.highlightStrokeWidth = 4;
+             *         board.options.line.firstArrow = false;
+             *         board.options.line.lastArrow = {size: 10, highlightSize: 10};
+             *         board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};
+             *
+             *         board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
+             *         board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
+             *         board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
+             *         board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
+             *         board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
+             *         board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
+             *         board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});
+             *     })();
+             *
+             * </script><pre>
+             *
              * @name Line#lastArrow
              * @see Line#firstArrow
              * @see Line#touchLastPoint
@@ -3505,7 +3675,6 @@ define([
              */
             lastArrow: false,
 
-
             /**
              * This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line
              * ends exactly at the border, if negative there is a margin to the inside, if positive the line
@@ -3682,7 +3851,6 @@ define([
              */
             lineCap: 'butt'
 
-
             /**#@-*/
         },
 
@@ -5623,8 +5791,10 @@ define([
             display: 'html',
 
             /**
-             * Anchor element {@link Point}, {@link Text} or {@link Image} of the text. If it exists, the coordinates of the text are relative
-             * to this anchor element.
+             * Anchor element {@link Point}, {@link Text} or {@link Image} of the text.
+             * If it exists, the coordinates of the text are relative
+             * to this anchor element. In this case, only numbers are possible coordinates,
+             * functions are not supported.
              *
              * @name anchor
              * @memberOf Text.prototype
@@ -5634,8 +5804,8 @@ define([
             anchor: null,
 
             /**
-             * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>, <tt>'middle'</tt>, and
-             * <tt>'right'</tt>.
+             * The horizontal alignment of the text. Possible values include <tt>'auto</tt>, <tt>'left'</tt>,
+             * <tt>'middle'</tt>, and <tt>'right'</tt>.
              *
              * @name anchorX
              * @memberOf Text.prototype
@@ -5647,10 +5817,11 @@ define([
             /**
              * The vertical alignment of the text. Possible values include <tt>'auto</tt>, <tt>'top'</tt>, <tt>'middle'</tt>, and
              * <tt>'bottom'</tt>.
+             * For MathJax or KaTeX, 'top' is recommended.
              *
              * @name anchorY
              * @memberOf Text.prototype
-             * @default 'auto'
+             * @default 'middle'
              * @type String
              */
             anchorY: 'middle',
@@ -5661,6 +5832,7 @@ define([
              * @name cssClass
              * @memberOf Text.prototype
              * @type String
+             * @default 'JXGtext'
              */
             cssClass: 'JXGtext',
 
@@ -5670,6 +5842,7 @@ define([
              * @name highlightCssClass
              * @memberOf Text.prototype
              * @type String
+             * @default 'JXGtext'
              */
             highlightCssClass: 'JXGtext',
 

package/src/options3d.js

@@ -8,9 +8,9 @@ define([
 
     JXG.extend(Options, {
 
-        infobox: {
-            strokeColor: 'black'
-        },
+        // infobox: {
+        //     strokeColor: 'black'
+        // },
 
         axes3d: {
             /**#@+
@@ -181,6 +181,19 @@ define([
             point2: { visible: false, name: '', label: { visible: true } }
         },
 
+        curve3d: {
+            /**#@+
+             * @visprop
+             */
+
+            highlight: false,
+            tabindex: -1,
+            strokeWidth: 1,
+            numberPointsHigh: 200
+
+            /**#@-*/
+        },
+
         mesh3d: {
             strokeWidth: 1,
             strokeColor: '#9a9a9a',
@@ -202,7 +215,8 @@ define([
             gradient: 'linear',
             gradientSecondColor: '#ffffff',
 
-            point1: {visible: false, name: ''},
+            point: {visible: false, name: ''},   // Used only in case of point/point
+            point1: {visible: false, name: ''},  // Used only in case of point/direction/range
             point2: {visible: false, name: ''}
         },
 
@@ -217,10 +231,13 @@ define([
             gradientSecondColor: '#ffffff',
             gradientAngle: Math.PI,
             fillColor: '#a7a7a7',
-            fillOpacity: 0.6
+            fillOpacity: 0.6,
+
+            point: {visible: false, name: '', fixed: true}
         },
 
         point3d: {
+            infoboxDigits: 'auto',
             strokeWidth: 0,
             gradient: 'radial',
             gradientSecondColor: '#555555',
@@ -240,14 +257,14 @@ define([
             /**
              * Number of intervals the mesh is divided into in direction of parameter u.
              * @type Number
-             * @name Surface3D#stepsU
+             * @name ParametricSurface3D#stepsU
              */
             stepsU: 30,
 
             /**
              * Number of intervals the mesh is divided into in direction of parameter v.
              * @type Number
-             * @name Surface3D#stepsV
+             * @name ParametricSurface3D#stepsV
              */
              stepsV: 30
 

package/src/parser/jessiecode.js

@@ -1585,7 +1585,7 @@ define([
             case 'node_str':
                 //ret = node.value.replace(/\\'/, "'").replace(/\\"/, '"').replace(/\\\\/, '\\');
                 /*jslint regexp:true*/
-                ret = node.value.replace(/\\(.)/, '$1');
+                ret = node.value.replace(/\\(.)/g, '$1'); // Remove backslash, important in JessieCode tags
                 /*jslint regexp:false*/
                 break;
             }
@@ -1732,6 +1732,8 @@ define([
 
                         if (js) {
                             e = '$jc$.mergeAttributes(' + list.join(', ') + ')';
+                        } else {
+                            e = list.join(', ');
                         }
                     }
                     node.children[0].withProps = !!node.children[2];
@@ -1739,7 +1741,7 @@ define([
                     for (i = 0; i < node.children[1].length; i++) {
                         list.push(this.compile(node.children[1][i], js));
                     }
-                    ret = this.compile(node.children[0], js) + '(' + list.join(', ') + (node.children[2] && js ? ', ' + e : '') + ')' + (node.children[2] && !js ? e : '');
+                    ret = this.compile(node.children[0], js) + '(' + list.join(', ') + (node.children[2] && js ? ', ' + e : '') + ')' + (node.children[2] && !js ? ' ' + e : '');
                     if (js) {
                         // Inserting a newline here allows simulataneously
                         // - procedural calls like Q.moveTo(...); and
@@ -1900,7 +1902,11 @@ define([
             }
 
             if (node.needsBrackets) {
-                ret = '{\n' + ret + '\n}\n';
+                if (js) {
+                    ret = '{\n' + ret + '\n}\n';
+                } else {
+                    ret = '<< ' + ret + ' >>';
+                }
             }
 
             return ret;

package/src/renderer/abstract.js

@@ -1862,6 +1862,13 @@ define([
 
         /**
          * The tiny zoom bar shown on the bottom of a board (if showNavigation on board creation is true).
+         * It is a div element and gets the CSS class "JXG_navigation" and the id {board id}_navigationbar.
+         *
+         * The buttons get the CSS class "JXG_navigation_button" and the id {board_id}_name where name is
+         * one of [top, down, left, right, out, 100, in, fullscreen, screenshot, reload, cleartraces].
+         *
+         * The symbols are hard-coded.
+         *
          * @param {JXG.Board} board Reference to a JSXGraph board.
          * @param {Object} attr Attributes of the navigation bar
          *
@@ -1881,12 +1888,13 @@ define([
                         e.cancelBubble = true;
                     }
                 },
-                createButton = function (label, handler) {
+                createButton = function (label, handler, id) {
                     var button;
 
+                    id = id || '';
+
                     button = doc.createElement('span');
-                    node.appendChild(button);
-                    button.appendChild(doc.createTextNode(label));
+                    button.innerHTML = label;  // button.appendChild(doc.createTextNode(label));
 
                     // Style settings are superseded by adding the CSS class below
                     button.style.paddingLeft = '7px';
@@ -1897,6 +1905,9 @@ define([
                     }
                     // button.setAttribute('tabindex', 0);
 
+                    button.setAttribute('id', id);
+                    node.appendChild(button);
+
                     // Highlighting is now done with CSS
                     // Env.addEvent(button, 'mouseover', function () {
                     //     this.style.backgroundColor = attr.highlightfillcolor;
@@ -1920,7 +1931,7 @@ define([
                 doc = board.containerObj.ownerDocument;
                 node = doc.createElement('div');
 
-                node.setAttribute('id', board.containerObj.id + '_navigationbar');
+                node.setAttribute('id', board.container + '_navigationbar');
 
                 // Style settings are superseded by adding the CSS class below
                 node.style.color = attr.strokecolor;
@@ -1942,7 +1953,7 @@ define([
                 if (board.attr.showfullscreen) {
                     createButton(board.attr.fullscreen.symbol, function () {
                         board.toFullscreen(board.attr.fullscreen.id);
-                    });
+                    }, board.container + '_navigation_fullscreen');
                 }
 
                 if (board.attr.showscreenshot) {
@@ -1950,7 +1961,7 @@ define([
                         window.setTimeout(function() {
                             board.renderer.screenshot(board, '', false);
                         }, 330);
-                    });
+                    }, board.container + '_navigation_screenshot');
                 }
 
                 if (board.attr.showreload) {
@@ -1959,26 +1970,26 @@ define([
                     // of this button. That's why this anonymous function wrapper is required.
                     createButton('\u21BB', function () {
                         board.reload();
-                    });
+                    }, board.container + '_navigation_reload');
                 }
 
                 if (board.attr.showcleartraces) {
                     // clear traces symbol (otimes): \u27F2
                     createButton('\u2297', function () {
                         board.clearTraces();
-                    });
+                    }, board.container + '_navigation_cleartraces');
                 }
 
                 if (board.attr.shownavigation) {
                     if (board.attr.showzoom) {
-                        createButton('\u2013', board.zoomOut);
-                        createButton('o', board.zoom100);
-                        createButton('+', board.zoomIn);
+                        createButton('\u2013', board.zoomOut, board.container + '_navigation_out');
+                        createButton('o', board.zoom100, board.container + '_navigation_100');
+                        createButton('+', board.zoomIn, board.container + '_navigation_in');
                     }
-                    createButton('\u2190', board.clickLeftArrow);
-                    createButton('\u2193', board.clickUpArrow);
-                    createButton('\u2191', board.clickDownArrow);
-                    createButton('\u2192', board.clickRightArrow);
+                    createButton('\u2190', board.clickLeftArrow, board.container + '_navigation_left');
+                    createButton('\u2193', board.clickUpArrow, board.container + '_navigation_up');
+                    createButton('\u2191', board.clickDownArrow, board.container + '_navigation_down');
+                    createButton('\u2192', board.clickRightArrow, board.container + '_navigation_right');
                 }
             }
         },

package/src/renderer/canvas.js

@@ -143,7 +143,7 @@ define([
                 if (doFill) {
                     context.lineTo(shape[0][0], shape[0][1]);
                     context.closePath();
-                    context.fill();
+                    context.fill('evenodd');
                 } else {
                     context.stroke();
                 }
@@ -160,7 +160,7 @@ define([
 
             context.save();
             if (this._setColor(el, 'fill')) {
-                context.fill();
+                context.fill('evenodd');
             }
             context.restore();
         },

package/src/renderer/svg.js

@@ -138,15 +138,22 @@ define([
         this.filter.setAttributeNS(null, 'filterUnits', 'userSpaceOnUse');
 
         this.feOffset = this.container.ownerDocument.createElementNS(this.svgNamespace, 'feOffset');
+        this.feOffset.setAttributeNS(null, 'in', 'SourceAlpha'); // b/w: SourceAlpha, Color: SourceGraphic
         this.feOffset.setAttributeNS(null, 'result', 'offOut');
-        this.feOffset.setAttributeNS(null, 'in', 'SourceAlpha');
         this.feOffset.setAttributeNS(null, 'dx', '5');
         this.feOffset.setAttributeNS(null, 'dy', '5');
         this.filter.appendChild(this.feOffset);
 
+        // this.feColor = this.container.ownerDocument.createElementNS(this.svgNamespace, 'feColorMatrix');
+        // this.feColor.setAttributeNS(null, 'in', 'offOut');
+        // this.feColor.setAttributeNS(null, 'result', 'colorOut');
+        // this.feColor.setAttributeNS(null, 'type', 'matrix');
+        // 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');
+        // this.filter.appendChild(this.feColor);
+
         this.feGaussianBlur = this.container.ownerDocument.createElementNS(this.svgNamespace, 'feGaussianBlur');
-        this.feGaussianBlur.setAttributeNS(null, 'result', 'blurOut');
         this.feGaussianBlur.setAttributeNS(null, 'in', 'offOut');
+        this.feGaussianBlur.setAttributeNS(null, 'result', 'blurOut');
         this.feGaussianBlur.setAttributeNS(null, 'stdDeviation', '3');
         this.filter.appendChild(this.feGaussianBlur);
 
@@ -956,6 +963,7 @@ define([
                 len = el.vertices.length;
 
             node.setAttributeNS(null, 'stroke', 'none');
+            node.setAttributeNS(null, 'fill-rule', 'evenodd');
             if (el.elType === 'polygonalchain') {
                 len++;
             }
@@ -1411,10 +1419,15 @@ define([
         // documented in JXG.AbstractRenderer
         setShadow: function (el) {
             var ev_s = Type.evaluate(el.visProp.shadow);
+                // ev_c = Type.evaluate(el.visProp.shadowcolor),
+                // c;
+
             if (el.visPropOld.shadow === ev_s) {
                 return;
             }
 
+            // c = JXG.rgbParser(ev_c);
+
             if (Type.exists(el.rendNode)) {
                 if (ev_s) {
                     el.rendNode.setAttributeNS(null, 'filter', 'url(#' + this.container.id + '_' + 'f1)');