Add Comb element

Learnosity · Mar 24, 2018 · dbfef11 · dbfef11
1 parent 2e0dc95
commit dbfef11
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 18 deletions.
diff --git a/build/core-amd.deps.js b/build/core-amd.deps.js
@@ -58,6 +58,7 @@ define([
     'renderer/vml',
     'renderer/canvas',
     'renderer/no',
+    'element/comb',
     'element/slopetriangle',
     'element/checkbox',
     'element/input',

diff --git a/build/core.deps.js b/build/core.deps.js
@@ -58,6 +58,7 @@ define([
     'renderer/vml',
     'renderer/canvas',
     'renderer/no',
+    'element/comb',
     'element/slopetriangle',
     'element/checkbox',
     'element/input',

diff --git a/distrib/jsxgraphcore.js b/distrib/jsxgraphcore.js
diff --git a/examples/combs.html b/examples/combs.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+   <title>JSXGraph example</title>
+   <link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
+   <script type="text/javascript" src="../distrib/prototype.js"></script>
+   <script type="text/javascript" src="../src/loadjsxgraph.js"></script>
+</head>
+<body>
+<h2>Combs</h2>
+<div style="width:800px">
+  <div id="jxgbox" class="jxgbox" style="width:600px; height:450px; float:left"></div>
+</div>
+<div id="debug" style="display:none;"></div>
+   <script type="text/javascript">
+    /* <![CDATA[ */
+
+        var p1, p2, l1;
+        board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 300, unitX: 50, unitY: 50, axis: true});
+        board.snapToGrid = true;
+
+        p1 = board.createElement('point', [5, 0]);
+        p2 = board.createElement('point', [7, 0]);
+        c1 = board.createElement('comb', [p1, p2], {width: 0.5});
+        c2 = board.createElement('comb', [[-10, 0], [3, 0]], {width: 0.5, reverse: true});
+
+  /* ]]> */
+  </script>
+</body>
+</html>
diff --git a/src/element/comb.js b/src/element/comb.js
@@ -0,0 +1,171 @@
+/*
+    Copyright 2018
+        Alfred Wassermann,
+        Tigran Saluev
+
+    This file is part of JSXGraph.
+
+    JSXGraph is free software dual licensed under the GNU LGPL or MIT License.
+
+    You can redistribute it and/or modify it under the terms of the
+
+      * GNU Lesser General Public License as published by
+        the Free Software Foundation, either version 3 of the License, or
+        (at your option) any later version
+      OR
+      * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT
+
+    JSXGraph is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public License and
+    the MIT License along with JSXGraph. If not, see <http://www.gnu.org/licenses/>
+    and <http://opensource.org/licenses/MIT/>.
+ */
+
+
+/*global JXG: true, define: true*/
+/*jslint nomen: true, plusplus: true*/
+
+/* depends:
+ see define call
+ */
+
+/**
+ * @fileoverview In this file the Comb element is defined.
+ */
+
+define([
+    'jxg', 'options', 'utils/type', 'base/constants', 'base/line', 'base/polygon', 'base/point'
+], function (JXG, Options, Type, Const, Line, Polygon, Point) {
+
+    "use strict";
+
+    // TODO Example with endpoints attached to X axis?
+    /**
+     * @class A comb to display domains of inequalities.
+     * @pseudo
+     * @name Comb
+     * @augments JXG.Curve
+     * @constructor
+     * @type JXG.Curve
+     * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
+     * Parameter options:
+     * @param {JXG.Point,array,function_JXG.Point,array,function} point1,point2 Parent elements can be two elements either of type {@link JXG.Point} or array of
+     * numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point.
+     * It is possible to provide a function returning an array or a point, instead of providing an array or a point.
+     * @example
+     * // Create a simple horizontal comb with invisible endpoints
+     * var c = board.create('comb', [[1, 0], [3, 0]]);
+     *
+     * </pre><div class="jxgbox" id="951ccb6a-52bc-4dc2-80e9-43db064f0f1b" style="width: 300px; height: 300px;"></div>
+     * <script type="text/javascript">
+     * (function () {
+     *   var board = JXG.JSXGraph.initBoard('951ccb6a-52bc-4dc2-80e9-43db064f0f1b', {boundingbox: [-5, 5, 5, -5], axis: true, showcopyright: false, shownavigation: false}),
+     *     c = board.create('comb', [[1, 0], [3, 0]]);
+     * })();
+     * </script><pre>
+     */
+    JXG.createComb = function(board, parents, attributes) {
+        var p1, p2, c, attr;
+
+        if (parents.length === 2) {
+            // point 1 given by coordinates
+            if (Type.isArray(parents[0]) && parents[0].length > 1) {
+                attr = Type.copyAttributes(attributes, board.options, 'comb', 'point1');
+                p1 = board.create('point', parents[0], attr);
+            } else if (Type.isString(parents[0]) || Type.isPoint(parents[0])) {
+                p1 =  board.select(parents[0]);
+            } else if (Type.isFunction(parents[0]) && Type.isPoint(parents[0]())) {
+                p1 = parents[0]();
+            } else if (Type.isFunction(parents[0]) && parents[0]().length && parents[0]().length >= 2) {
+                attr = Type.copyAttributes(attributes, board.options, 'comb', 'point1');
+                p1 = Point.createPoint(board, parents[0](), attr);
+            } else {
+                throw new Error("JSXGraph: Can't create comb with parent types '" +
+                    (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." +
+                    "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]]");
+            }
+
+            // point 2 given by coordinates
+            if (Type.isArray(parents[1]) && parents[1].length > 1) {
+                attr = Type.copyAttributes(attributes, board.options, 'comb', 'point2');
+                p2 = board.create('point', parents[1], attr);
+            } else if (Type.isString(parents[1]) || Type.isPoint(parents[1])) {
+                p2 =  board.select(parents[1]);
+            } else if (Type.isFunction(parents[1]) &&  Type.isPoint(parents[1]()) ) {
+                p2 = parents[1]();
+            } else if (Type.isFunction(parents[1]) && parents[1]().length && parents[1]().length >= 2) {
+                attr = Type.copyAttributes(attributes, board.options, 'comb', 'point2');
+                p2 = Point.createPoint(board, parents[1](), attr);
+            } else {
+                throw new Error("JSXGraph: Can't create comb with parent types '" +
+                    (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." +
+                    "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]]");
+            }
+        } else {
+            var parent_types = parents.map(function(parent) { return "'" + (typeof parent) + "'"; });
+            throw new Error("JSXGraph: Can't create comb with parent types " +
+                parent_types.join(", ") + "." +
+                "\nPossible parent types: [point,point], [[x1,y1],[x2,y2]]");
+        }
+
+        attr = Type.copyAttributes(attributes, board.options, 'comb', 'curve');
+        c = board.create('curve', [[0], [0]], attr);
+
+        attr = Type.copyAttributes(attributes, board.options, 'comb');
+        var ds = attr.frequency;
+        var angle = -attr.angle;
+        var width = attr.width;
+        if (attr.reverse) {
+            var p = p1;
+            p1 = p2;
+            p2 = p;
+            angle = -angle;
+        }
+
+        c.updateDataArray = function() {
+            var s = 0;
+            var max_s = p1.Dist(p2);
+            var cs = Math.cos(angle), sn = Math.sin(angle);
+            var dx = (p2.X() - p1.X()) / max_s, dy = (p2.Y() - p1.Y()) / max_s;
+
+            // But instead of lifting by sin(angle), we want lifting by width.
+            cs *= width / Math.abs(sn);
+            sn *= width / Math.abs(sn);
+
+            this.dataX = [];
+            this.dataY = [];
+            // TODO Handle infinite boundaries?
+            while (s < max_s) {
+                var x = p1.X() + dx * s;
+                var y = p1.Y() + dy * s;
+
+                // We may need to cut the last piece of a comb.
+                sn *= Math.min(cs, max_s - s) / Math.abs(cs);
+                cs *= Math.min(cs, max_s - s) / Math.abs(cs);
+
+                this.dataX.push(x);
+                this.dataY.push(y);
+
+                this.dataX.push(x + dx * cs + dy * sn);
+                this.dataY.push(y - dx * sn + dy * cs);
+
+                this.dataX.push(NaN);  // Force a jump
+                this.dataY.push(NaN);
+                s += ds;
+            }
+        };
+
+        return c;
+    };
+
+    JXG.registerElement('comb', JXG.createComb);
+
+    return {
+        createComb: JXG.createComb
+    };
+
+});
diff --git a/src/loadjsxgraph.js b/src/loadjsxgraph.js
@@ -148,7 +148,7 @@ var JXG = {},
         }
     };
 
-    JXG.baseFiles = 'jxg,base/constants,utils/type,utils/xml,utils/env,utils/event,utils/expect,math/math,math/numerics,math/statistics,math/symbolic,math/geometry,math/poly,math/complex,renderer/abstract,renderer/no,reader/file,parser/geonext,base/board,options,jsxgraph,base/element,base/coordselement,base/coords,base/point,base/line,base/group,base/circle,element/conic,base/polygon,base/curve,element/arc,element/sector,base/composition,element/composition,base/text,base/image,element/slider,element/measure,base/chart,base/transformation,base/turtle,utils/color,base/ticks,utils/zip,utils/base64,utils/uuid,utils/encoding,server/server,element/locus,parser/datasource,parser/ca,parser/jessiecode,utils/dump,renderer/svg,renderer/vml,renderer/canvas,renderer/no,element/slopetriangle,math/qdt,element/checkbox,element/input,element/button';
+    JXG.baseFiles = 'jxg,base/constants,utils/type,utils/xml,utils/env,utils/event,utils/expect,math/math,math/numerics,math/statistics,math/symbolic,math/geometry,math/poly,math/complex,renderer/abstract,renderer/no,reader/file,parser/geonext,base/board,options,jsxgraph,base/element,base/coordselement,base/coords,base/point,base/line,base/group,base/circle,element/conic,base/polygon,base/curve,element/arc,element/sector,base/composition,element/composition,base/text,base/image,element/slider,element/measure,base/chart,base/transformation,base/turtle,utils/color,base/ticks,utils/zip,utils/base64,utils/uuid,utils/encoding,server/server,element/locus,parser/datasource,parser/ca,parser/jessiecode,utils/dump,renderer/svg,renderer/vml,renderer/canvas,renderer/no,element/comb,element/slopetriangle,math/qdt,element/checkbox,element/input,element/button';
     JXG.requirePath = '';
 
     for (i = 0; i < document.getElementsByTagName("script").length; i++) {

diff --git a/src/options.js b/src/options.js
@@ -3345,6 +3345,87 @@ define([
             /**#@-*/
         },
 
+        /* special options for comb */
+        comb: {
+            /**#@+
+             * @visprop
+             */
+
+            /**
+             * Frequency of comb elements.
+             *
+             * @type Number
+             * @name Comb#frequency
+             * @default 0.2
+             */
+            frequency: 0.2,
+
+            /**
+             * Width of the comb.
+             *
+             * @type Number
+             * @name Comb#width
+             * @default 0.4
+             */
+            width: 0.4,
+
+            /**
+             * Angle under which comb elements are positioned.
+             *
+             * @type Number
+             * @name Comb#angle
+             * @default 60 degrees
+             */
+            angle: Math.PI / 3,
+
+            /**
+             * Should the comb go right to left instead of left to right.
+             *
+             * @type Boolean
+             * @name Comb#reverse
+             * @default false
+             */
+            reverse: false,
+
+            /**
+             * Attributes for first defining point of the comb.
+             *
+             * @type Point
+             * @name Comb#point1
+             */
+            point1: {
+                visible: false,
+                withLabel: false,
+                fixed: false,
+                name: ''
+            },
+
+            /**
+             * Attributes for second defining point of the comb.
+             *
+             * @type Point
+             * @name Comb#point2
+             */
+            point2: {
+                visible: false,
+                withLabel: false,
+                fixed: false,
+                name: ''
+            },
+
+            /**
+             * Attributes for the curve displaying the comb.
+             *
+             * @type Curve
+             * @name Comb#curve
+             */
+            curve: {
+                strokeWidth: 1,
+                strokeColor: '#000000',
+                fillColor: 'none'
+            }
+        },
+
         /* special options for slope triangle */
         slopetriangle: {
             /**#@+