1 /*
  2     Copyright 2008-2024
  3         Matthias Ehmann,
  4         Carsten Miller,
  5         Alfred Wassermann
  6 
  7     This file is part of JSXGraph.
  8 
  9     JSXGraph is free software dual licensed under the GNU LGPL or MIT License.
 10 
 11     You can redistribute it and/or modify it under the terms of the
 12 
 13       * GNU Lesser General Public License as published by
 14         the Free Software Foundation, either version 3 of the License, or
 15         (at your option) any later version
 16       OR
 17       * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT
 18 
 19     JSXGraph is distributed in the hope that it will be useful,
 20     but WITHOUT ANY WARRANTY; without even the implied warranty of
 21     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 22     GNU Lesser General Public License for more details.
 23 
 24     You should have received a copy of the GNU Lesser General Public License and
 25     the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
 26     and <https://opensource.org/licenses/MIT/>.
 27  */
 28 
 29 /*global JXG: true, define: true*/
 30 /*jslint nomen: true, plusplus: true*/
 31 
 32 /**
 33  * @fileoverview Implementation of smart labels..
 34  */
 35 
 36 import JXG from "../jxg.js";
 37 import Const from "../base/constants.js";
 38 import Type from "../utils/type.js";
 39 
 40 /**
 41  * @class Customized text elements for displaying measurements of JSXGraph elements,
 42  * Examples are length of a
 43  * segment, perimeter or area of a circle or polygon (including polygonal chain),
 44  * slope of a line, value of an angle, and coordinates of a point.
 45  * <p>
 46  * If additionally a text, or a function is supplied and the content is not the empty string,
 47  * that text is displayed instead of the measurement.
 48  * <p>
 49  * Smartlabels use custom made CSS layouts defined in jsxgraph.css. Therefore, the inclusion of the file jsxgraph.css is mandatory or
 50  * the CSS classes have to be replaced by other classes.
 51  * <p>
 52  * The default attributes for smartlabels are defined for each type of measured element in the following sub-objects.
 53  * This is a deviation from the usual JSXGraph attribute usage.
 54  * <ul>
 55  *  <li> <tt>JXG.Options.smartlabelangle</tt> for smartlabels of angle objects
 56  *  <li> <tt>JXG.Options.smartlabelcircle</tt> for smartlabels of circle objects
 57  *  <li> <tt>JXG.Options.smartlabelline</tt> for smartlabels of line objects
 58  *  <li> <tt>JXG.Options.smartlabelpoint</tt> for smartlabels of point objects.
 59  *  <li> <tt>JXG.Options.smartlabelpolygon</tt> for smartlabels of polygon objects.
 60  * </ul>
 61  *
 62  *
 63  * @pseudo
 64  * @name Smartlabel
 65  * @augments JXG.Text
 66  * @constructor
 67  * @type JXG.Text
 68  * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown.
 69  * @param {JXG.GeometryElement} Parent parent object: point, line, circle, polygon, angle.
 70  * @param {String|Function} Txt Optional text. In case, this content is not the empty string,
 71  *  the measurement is overwritten by this text.
 72  *
 73  * @example
 74  * var p1 = board.create('point', [3, 4], {showInfobox: false, withLabel: false});
 75  * board.create('smartlabel', [p1], {digits: 1, unit: 'm', dir: 'col', useMathJax: false});
 76  *
 77  * </pre><div id="JXG30cd1f9e-7e78-48f3-91a2-9abd466a754f" class="jxgbox" style="width: 300px; height: 300px;"></div>
 78  * <script type="text/javascript">
 79  *     (function() {
 80  *         var board = JXG.JSXGraph.initBoard('JXG30cd1f9e-7e78-48f3-91a2-9abd466a754f',
 81  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
 82  *     var p1 = board.create('point', [3, 4], {showInfobox: false, withLabel: false});
 83  *     board.create('smartlabel', [p1], {digits: 1, unit: 'cm', dir: 'col', useMathJax: false});
 84  *
 85  *     })();
 86  *
 87  * </script><pre>
 88  *
 89  * @example
 90  * var s1 = board.create('line', [[-7, 2], [6, -6]], {point1: {visible:true}, point2: {visible:true}});
 91  * board.create('smartlabel', [s1], {unit: 'm', measure: 'length', prefix: 'L = ', useMathJax: false});
 92  * board.create('smartlabel', [s1], {unit: 'm',  measure: 'slope', prefix: 'Δ = ', useMathJax: false});
 93  *
 94  *
 95  * </pre><div id="JXGfb4423dc-ee3a-4122-a186-82123019a835" class="jxgbox" style="width: 300px; height: 300px;"></div>
 96  * <script type="text/javascript">
 97  *     (function() {
 98  *         var board = JXG.JSXGraph.initBoard('JXGfb4423dc-ee3a-4122-a186-82123019a835',
 99  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
100  *     var s1 = board.create('line', [[-7, 2], [6, -6]], {point1: {visible:true}, point2: {visible:true}});
101  *     board.create('smartlabel', [s1], {unit: 'm', measure: 'length', prefix: 'L = ', useMathJax: false});
102  *     board.create('smartlabel', [s1], {unit: 'm',  measure: 'slope', prefix: 'Δ = ', useMathJax: false});
103  *
104  *
105  *     })();
106  *
107  * </script><pre>
108  *
109  * @example
110  * var c1 = board.create('circle', [[0, 1], [4, 1]], {point2: {visible: true}});
111  * board.create('smartlabel', [c1], {unit: 'm', measure: 'perimeter', prefix: 'U = ', useMathJax: false});
112  * board.create('smartlabel', [c1], {unit: 'm', measure: 'area', prefix: 'A = ', useMathJax: false});
113  * board.create('smartlabel', [c1], {unit: 'm', measure: 'radius', prefix: 'R = ', useMathJax: false});
114  *
115  *
116  * </pre><div id="JXG763c4700-8273-4eb7-9ed9-1dc6c2c52e93" class="jxgbox" style="width: 300px; height: 300px;"></div>
117  * <script type="text/javascript">
118  *     (function() {
119  *         var board = JXG.JSXGraph.initBoard('JXG763c4700-8273-4eb7-9ed9-1dc6c2c52e93',
120  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
121  *     var c1 = board.create('circle', [[0, 1], [4, 1]], {point2: {visible: true}});
122  *     board.create('smartlabel', [c1], {unit: 'm', measure: 'perimeter', prefix: 'U = ', useMathJax: false});
123  *     board.create('smartlabel', [c1], {unit: 'm', measure: 'area', prefix: 'A = ', useMathJax: false});
124  *     board.create('smartlabel', [c1], {unit: 'm', measure: 'radius', prefix: 'R = ', useMathJax: false});
125  *
126  *
127  *     })();
128  *
129  * </script><pre>
130  *
131  * @example
132  * var p2 = board.create('polygon', [[-6, -5], [7, -7], [-4, 3]], {});
133  * board.create('smartlabel', [p2], {
134  *     unit: 'm',
135  *     measure: 'area',
136  *     prefix: 'A = ',
137  *     cssClass: 'smart-label-pure smart-label-polygon',
138  *     highlightCssClass: 'smart-label-pure smart-label-polygon',
139  *     useMathJax: false
140  * });
141  * board.create('smartlabel', [p2, () => 'X: ' + p2.vertices[0].X().toFixed(1)], {
142  *     measure: 'perimeter',
143  *     cssClass: 'smart-label-outline smart-label-polygon',
144  *     highlightCssClass: 'smart-label-outline smart-label-polygon',
145  *     useMathJax: false
146  * });
147  *
148  * </pre><div id="JXG376425ac-b4e5-41f2-979c-6ff32a01e9c8" class="jxgbox" style="width: 300px; height: 300px;"></div>
149  * <script type="text/javascript">
150  *     (function() {
151  *         var board = JXG.JSXGraph.initBoard('JXG376425ac-b4e5-41f2-979c-6ff32a01e9c8',
152  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
153  *     var p2 = board.create('polygon', [[-6, -5], [7, -7], [-4, 3]], {});
154  *     board.create('smartlabel', [p2], {
155  *         unit: 'm',
156  *         measure: 'area',
157  *         prefix: 'A = ',
158  *         cssClass: 'smart-label-pure smart-label-polygon',
159  *         highlightCssClass: 'smart-label-pure smart-label-polygon',
160  *         useMathJax: false
161  *     });
162  *     board.create('smartlabel', [p2, () => 'X: ' + p2.vertices[0].X().toFixed(1)], {
163  *         measure: 'perimeter',
164  *         cssClass: 'smart-label-outline smart-label-polygon',
165  *         highlightCssClass: 'smart-label-outline smart-label-polygon',
166  *         useMathJax: false
167  *     });
168  *
169  *     })();
170  *
171  * </script><pre>
172  *
173  * @example
174  * var a1 = board.create('angle', [[1, -1], [1, 2], [1, 5]], {name: 'β', withLabel: false});
175  * var sma = board.create('smartlabel', [a1], {digits: 1, prefix: a1.name + '=', unit: '°', useMathJax: false});
176  *
177  * </pre><div id="JXG48d6d1ae-e04a-45f4-a743-273976712c0b" class="jxgbox" style="width: 300px; height: 300px;"></div>
178  * <script type="text/javascript">
179  *     (function() {
180  *         var board = JXG.JSXGraph.initBoard('JXG48d6d1ae-e04a-45f4-a743-273976712c0b',
181  *             {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false});
182  *     var a1 = board.create('angle', [[1, -1], [1, 2], [1, 5]], {name: 'β', withLabel: false});
183  *     var sma = board.create('smartlabel', [a1], {digits: 1, prefix: a1.name + '=', unit: '°', useMathJax: false});
184  *
185  *     })();
186  *
187  * </script><pre>
188  *
189  */
190 JXG.createSmartLabel = function (board, parents, attributes) {
191     var el, attr,
192         p, user_supplied_text,
193         getTextFun, txt_fun;
194 
195     if (parents.length === 0 || (
196         [Const.OBJECT_CLASS_POINT, Const.OBJECT_CLASS_LINE,Const.OBJECT_CLASS_CIRCLE].indexOf(parents[0].elementClass) < 0 &&
197         [Const.OBJECT_TYPE_POLYGON, Const.OBJECT_TYPE_ANGLE].indexOf(parents[0].type) < 0
198         )
199     ) {
200         throw new Error(
201             "JSXGraph: Can't create smartlabel with parent types " +
202                 "'" + typeof parents[0] + "', " +
203                 "'" + typeof parents[1] + "'."
204         );
205     }
206 
207     p = parents[0];
208     user_supplied_text = parents[1] || '';
209 
210     if (p.elementClass === Const.OBJECT_CLASS_POINT) {
211         attr = Type.copyAttributes(attributes, board.options, 'smartlabelpoint');
212 
213     } else if (p.elementClass === Const.OBJECT_CLASS_LINE) {
214         attr = Type.copyAttributes(attributes, board.options, 'smartlabelline');
215         /**
216          * @class
217          * @ignore
218          */
219         attr.rotate = function () { return Math.atan(p.getSlope()) * 180 / Math.PI; };
220         /**
221          * @class
222          * @ignore
223          */
224         attr.visible = function () { return (p.L() < 1.5) ? false : true; };
225 
226     } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) {
227         attr = Type.copyAttributes(attributes, board.options, 'smartlabelcircle');
228         /**
229          * @class
230          * @ignore
231          */
232         attr.visible = function () { return (p.Radius() < 1.5) ? false : true; };
233 
234     } else if (p.type === Const.OBJECT_TYPE_POLYGON) {
235         attr = Type.copyAttributes(attributes, board.options, 'smartlabelpolygon');
236     } else if (p.type === Const.OBJECT_TYPE_ANGLE) {
237         attr = Type.copyAttributes(attributes, board.options, 'smartlabelangle');
238         /**
239          * @class
240          * @ignore
241          */
242         attr.rotate = function () {
243             var c1 = p.center.coords.usrCoords,
244                 c2 = p.getLabelAnchor().usrCoords,
245                 v = Math.atan2(c2[2] - c1[2], c2[1] - c1[1]) * 180 / Math.PI;
246             return (v > 90 && v < 270) ? v + 180 : v;
247         };
248         /**
249          * @class
250          * @ignore
251          */
252         attr.anchorX = function () {
253             var c1 = p.center.coords.usrCoords,
254                 c2 = p.getLabelAnchor().usrCoords,
255                 v = Math.atan2(c2[2] - c1[2], c2[1] - c1[1]) * 180 / Math.PI;
256             return (v > 90 && v < 270) ? 'right' : 'left';
257         };
258     }
259 
260     getTextFun = function (el, p, elType, mType) {
261         var measure;
262         switch (mType) {
263             case 'length':
264                 /**
265                  * @ignore
266                  */
267                 measure = function () { return p.L(); };
268                 break;
269             case 'slope':
270                 /**
271                  * @ignore
272                  */
273                 measure = function () { return p.Slope(); };
274                 break;
275             case 'area':
276                 /**
277                  * @ignore
278                  */
279                 measure = function () { return p.Area(); };
280                 break;
281             case 'radius':
282                 /**
283                  * @ignore
284                  */
285                 measure = function () { return p.Radius(); };
286                 break;
287             case 'perimeter':
288                 /**
289                  * @ignore
290                  */
291                 measure = function () { return p.Perimeter(); };
292                 break;
293             case 'rad':
294                 /**
295                  * @ignore
296                  */
297                 measure = function () { return p.Value(); };
298                 break;
299             case 'deg':
300                 /**
301                  * @ignore
302                  */
303                 measure = function () { return p.Value() * 180 / Math.PI; };
304                 break;
305             default:
306                 /**
307                  * @ignore
308                  */
309                 measure = function () { return 0.0; };
310         }
311 
312         return function () {
313             var str = '',
314                 val,
315                 txt = Type.evaluate(user_supplied_text),
316                 digits = el.evalVisProp('digits'),
317                 u = el.evalVisProp('unit'),
318                 pre = el.evalVisProp('prefix'),
319                 suf = el.evalVisProp('suffix'),
320                 mj = el.evalVisProp('usemathjax') || el.evalVisProp('usekatex');
321 
322             if (txt === '') {
323                 if (el.useLocale()) {
324                     val = el.formatNumberLocale(measure(), digits);
325                 } else {
326                     val = Type.toFixed(measure(), digits);
327                 }
328                 if (mj) {
329                     str = ['\\(', pre, val, '\\,', u, suf, '\\)'].join('');
330                 } else {
331                     str = [pre, val, u, suf].join('');
332                 }
333             } else {
334                 str = txt;
335             }
336             return str;
337         };
338     };
339 
340     if (p.elementClass === Const.OBJECT_CLASS_POINT) {
341         el = board.create('text', [
342             function () { return p.X(); },
343             function () { return p.Y(); },
344             ''
345         ], attr);
346 
347         txt_fun = function () {
348             var str = '',
349                 txt = Type.evaluate(user_supplied_text),
350                 digits = el.evalVisProp('digits'),
351                 u = el.evalVisProp('unit'),
352                 pre = el.evalVisProp('prefix'),
353                 suf = el.evalVisProp('suffix'),
354                 dir = el.evalVisProp('dir'),
355                 mj = el.evalVisProp('usemathjax') || el.evalVisProp('usekatex'),
356                 x, y;
357 
358             if (el.useLocale()) {
359                 x = el.formatNumberLocale(p.X(), digits);
360                 y = el.formatNumberLocale(p.Y(), digits);
361             } else {
362                 x = Type.toFixed(p.X(), digits);
363                 y = Type.toFixed(p.Y(), digits);
364             }
365 
366             if (txt === '') {
367                 if (dir === 'row') {
368                     if (mj) {
369                         str = ['\\(', pre, x, '\\,', u, ' / ', y, '\\,', u, suf, '\\)'].join('');
370                     } else {
371                         str = [pre, x, ' ', u, ' / ', y, ' ', u, suf].join('');
372                     }
373                 } else if (dir.indexOf('col') === 0) { // Starts with 'col'
374                     if (mj) {
375                         str = ['\\(', pre, '\\left(\\array{', x, '\\,', u, '\\\\ ', y, '\\,', u, '}\\right)', suf, '\\)'].join('');
376                     } else {
377                         str = [pre, x, ' ', u, '<br/>', y, ' ', u, suf].join('');
378                     }
379                 }
380             } else {
381                 str = txt;
382             }
383             return str;
384         };
385 
386     } else if (p.elementClass === Const.OBJECT_CLASS_LINE) {
387 
388         if (attr.measure === 'length') {
389             el = board.create('text', [
390                 function () { return (p.point1.X() + p.point2.X()) * 0.5; },
391                 function () { return (p.point1.Y() + p.point2.Y()) * 0.5; },
392                 ''
393             ], attr);
394             txt_fun = getTextFun(el, p, 'line', 'length');
395 
396         } else if (attr.measure === 'slope') {
397             el = board.create('text', [
398                 function () { return (p.point1.X() * 0.25 + p.point2.X() * 0.75); },
399                 function () { return (p.point1.Y() * 0.25 + p.point2.Y() * 0.75); },
400                 ''
401             ], attr);
402             txt_fun = getTextFun(el, p, 'line', 'slope');
403         }
404 
405     } else if (p.elementClass === Const.OBJECT_CLASS_CIRCLE) {
406         if (attr.measure === 'radius') {
407             el = board.create('text', [
408                 function () { return p.center.X() + p.Radius() * 0.5; },
409                 function () { return p.center.Y(); },
410                 ''
411             ], attr);
412             txt_fun = getTextFun(el, p, 'circle', 'radius');
413 
414         } else if (attr.measure === 'area') {
415             el = board.create('text', [
416                 function () { return p.center.X(); },
417                 function () { return p.center.Y() + p.Radius() * 0.5; },
418                 ''
419             ], attr);
420             txt_fun = getTextFun(el, p, 'circle', 'area');
421 
422         } else if (attr.measure === 'circumference' || attr.measure === 'perimeter') {
423             el = board.create('text', [
424                 function () { return p.getLabelAnchor(); },
425                 ''
426             ], attr);
427             txt_fun = getTextFun(el, p, 'circle', 'perimeter');
428 
429         }
430     } else if (p.type === Const.OBJECT_TYPE_POLYGON) {
431         if (attr.measure === 'area') {
432             el = board.create('text', [
433                 function () { return p.getTextAnchor(); },
434                 ''
435             ], attr);
436             txt_fun = getTextFun(el, p, 'polygon', 'area');
437 
438         } else if (attr.measure === 'perimeter') {
439             el = board.create('text', [
440                 function () {
441                     var last = p.borders.length - 1;
442                     if (last >= 0) {
443                         return [
444                             (p.borders[last].point1.X() + p.borders[last].point2.X()) * 0.5,
445                             (p.borders[last].point1.Y() + p.borders[last].point2.Y()) * 0.5
446                         ];
447                     } else {
448                         return p.getTextAnchor();
449                     }
450                 },
451                 ''
452             ], attr);
453             txt_fun = getTextFun(el, p, 'polygon', 'perimeter');
454         }
455 
456     } else if (p.type === Const.OBJECT_TYPE_ANGLE) {
457         el = board.create('text', [
458             function () {
459                 return p.getLabelAnchor();
460             },
461             ''
462         ], attr);
463         txt_fun = getTextFun(el, p, 'angle', attr.measure);
464     }
465 
466     if (Type.exists(el)) {
467         el.setText(txt_fun);
468         p.addChild(el);
469         el.setParents([p]);
470     }
471 
472     return el;
473 };
474 
475 JXG.registerElement("smartlabel", JXG.createSmartLabel);
476