/* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.Bezier) // // The exontrol.Bezier class defines a bezier function on [0,0,1,1] area, and displays it on a canvas. // // Bézier curves are also used in the time domain, particularly in animation, user interface design and smoothing cursor trajectory // in eye gaze controlled interfaces. For example, a Bézier curve can be used to specify the velocity over time of an object such as // an icon moving from A to B, rather than simply moving at a fixed number of pixels per step. P1 and P2 indicates the control points // // The exontrol.Bezier class provides the following events (through oLts): // // "onchange", notifies your application that a control point is changed. The onchange's parameter is: // // oEvent {object}, specifies an object of {point,oBezier} type, that holds information about the control-point being changed. // // oEvent.point {number}, indicates the index of the control point being changed, as 1 for the first control point P1, or 2 for the second control point P2. You can use the GetBezierP, GetP1, method to request for the new control points. // oEvent.oBezier {object}, An exontrol.G.Bezier where the change occurs. // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Def.Bezier) // // The exontrol.Def.Bezier namespace provides definitions for different objects, primitives, objects of exontrol.Bezier object // // The exontrol.Def.Bezier namespace provides the following fields: // // tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // locked {boolean}, indicates whether the control is locked(protected) or unlocked // readOnly {boolean}, indicates whether the control is read-only (no changes are allowed) // wheelChange{number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // bezierCoord {any}, sets the control points of the current bezier object // sizeBezier, defines the size of the bezier's curve in pixels. // colorBezier, defines the CSS color to show the bezier's curve. // sizeHoverPointControl, defines the size to increase the bezier's control points when the mouse pointer hovers it. // showBezierControl, specifies whether the P1 and P2 control points of the bezier are shown on the client. // showBezierDuplicateControl, indicates whether the P1 and P2 control points (duplicate) of the bezier are shown on the client. A duplicate control point is shown on the bezier's client edge, when the control point does not fit the control area. // sizeBezierControl, defines the size in pixels to display the control points. // colorBezierControl, specifies the CSS color to display the control points. // colorLineBezierControl, defines the CSS color to show the line between control point and bezier's origin. // showBezierValue, indicates whether the values are shown on the bezier curve. // colorBezierValue, defines the CSS color to show the background of the values on the bezier curve (while the value is between margins) // colorTextBezierValue, defines the CSS color to show the values on the bezier curve (while the value is between margins) // colorShadowBezierValue, specifies the shadow's CSS color for bezier values (while the value is between margins) // colorBezierValueOutside, defines the CSS color to show the background of the values on the bezier curve (while the value is outside of margins) // colorTextBezierValueOutside, defines the CSS color to show the values on the bezier curve (while the value is outside of margins) // colorShadowBezierValueOutside, specifies the shadow's CSS color for bezier value (while the value is outside of margins) // formatColorBezierValue, specifies a general expression that defines the intensity of the color to show the values, based on the progress. The value keyword indicates a RGB component to be amplified. // primitiveBezierValue, defines the shape the value is shown as. By default it is "Ellipse" // pArgBezierValue, specifies different properties for geometric primitive to show the values on the bezier curve // formatBezierValue field specifies a general expression that defines the values to be shown on the curve, based on the progress. The value keyword indicates a value between 0 and 1, indicating the time, while scale specifies the count of elements on the progress scale. // showBezierScale, indicates whether the scale time/progress is displayed. // colorBezierScale, defines a CSS color to show the lines of the scale. // colorTextBezierScale, defines the CSS color to display the scale (excluding the margins). // colorTextMarginsBezierScale, defines the CSS color to display the margins of the scale. // showBezierScaleControl, indicates whether the control displays a control-scale point, that allows you to change the scale to display the values on the bezier. // bezierScaleX, specifies the number of units to be displayed on the x-axis // bezierScaleRangeX, specifies an object of {min,max} type that limits the number of units to be displayed on the x-axis // bezierScaleY, specifies the number of units to be displayed on the y-axis // bezierScaleRangeY, specifies an object of {min,max} type that limits the number of units to be displayed on the y-axis // colorBezierScaleControl, specifies the color to display the control-scale point // highlightBezierScaleProgress, highligths the value on the bezier, on the progress scale as well. // showBezierCoord, indicates whether the control displays the current coordinates of the bezier being displayed ( P1 and P2 control points) // clipBezier, specifies if the control clips the entire bezier to its client area // restrictBezier, specifies whether the control points of the bezier curve are limited to [0,1] range // /////////////////////////////////////////////////////////// // 'use strict'; /** * @description The exontrol.Def.Bezier namespace provides definitions for different objects, primitives, objects of exontrol.Bezier object. */ exontrol.Def.Bezier = { /** * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of tag) * * Any other word within the tfi field that's not recognized as a keyword is interpreted as: * * name of the font (not a number), specifies the font's family (equivalent of tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of tag), where: * color {string}, defines the color of the text's shadow (CSScolor) * width {number}, defines the size of the text's shadow * offset {number}, defines the offset to show the text's shadow relative to the text * outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of tag), where: * color {string}, defines the gradient-color (CSScolor) * mode {number}, defines the gradient mode as a value between 0 and 4 * blend {number}, defines the gradient blend as a value between 0 and 1 * * CSSColor or CSS legal color values can be specified by the following methods: * * Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. * Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue. * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color. * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue. * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color. * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue. * Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color. * * @type {(string|object)} * @example * * null {null}, the tfi field is ignored * "bold monospace 16" {string}, defines Monospace font of 16px height, bold * {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold */ tfi: null, /** * @description The locked field indicates whether the control is locked(protected) or unlocked * @type {boolean} Specifies whether the control is protected. * @example * * false {boolean}, unlocks the control * true {boolean}, locks the control (the user can not change the bezier control points) */ locked: false, /** * @description The readOnly field indicates whether the control is read-only (no changes are allowed) * @type {boolean} Specifies whether the control is protected. * @example * * false {boolean}, unlocks the control * true {boolean}, locks the control (the user can not change the bezier control points) */ readOnly: false, /** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} Specifies the amount the control scrolls when the user rolls the mouse wheel. The wheel changes the bezierScaleX and bezierScaleY properties. * @example * * 0 {number}, locks any action the mouse's wheel performs * 5 {number}, increases the control's value by 5 once the user rotates the mouse's wheel. */ wheelChange: 1, /** * @description The bezierCoord fiels defines the control points of the current bezier object * @type {any} Specifies the control points of the current bezier object * * The bezierCoord field can be any of the following: * * {string}, defines the name of a predefined transition as any of: "linear", "ease", "ease-in", "ease-out", "ease-in-out", "ease-in-out-expo" or "swipe" * {array}, specifies an array of [x1,y1,x2,y2] type that defines the control points P1(x1,y1), P2(x1,y1) of the bezier curve * * @example * * "ease" {string}, generates an "ease" bezier transition * [1,0,0,1] {array}, shows a custom bezier curve */ bezierCoord: null, /** * @description The sizeBezier fiels defines the size of the bezier's curve in pixels * @type {number} Indicates the size of the bezier's curve (should be a value greater than 0). You can use the colorBezier property on "transparent" to display no curve * @example * * 1 {number}, shows a bezier curve of 1-pixels wide * 5 {number}, shows a bezier curve of 5-pixels wide */ sizeBezier: 3, /** * @description The colorBezier field defines the color to show the bezier's curve. * @type {string} Indicates the CSS color to show the bezier's curve. * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color (hides the bezier curve) * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorBezier: "black", /** * @description The sizeHoverPointControl field defines the size to increase the bezier's control points when the mouse pointer hovers it. * @type {number} Indicates the size to increase the bezier's control points when the mouse pointer hovers it. * @example * * null {null}, indicates the sizeHoverPointControl's default value * 0 {number}, no change of the size to display the bezier's control points when the mouse pointer hovers it * 4 {number}, increases by 4 the size to display the bezier's control points when the mouse pointer hovers it */ sizeHoverPointControl: 2, /** * @description The showBezierControl field specifies whether the P1 and P2 control points of the bezier are shown on the client. * @type {boolean} Indicates whether the P1 and P2 control points of the bezier are shown on the client. * @example * * false {boolean}, hides the P1 and P2 control points of the bezier * true {boolean}, shows the P1 and P2 control points of the bezier */ showBezierControl: true, /** * @description The showBezierDuplicateControl field indicates whether the P1 and P2 control points (duplicate) of the bezier are shown on the client. A duplicate control point is shown on the bezier's client edge, when the control point does not fit the control area. * @type {boolean} Specifies whether the P1 and P2 control points (duplicate) of the bezier are shown on the client. A duplicate control point is shown on the bezier's client edge, when the control point does not fit the control area. * @example * * false {boolean}, hides the P1 and P2 control points (duplicate) of the bezier * true {boolean}, shows the P1 and P2 control points (duplicate) of the bezier */ showBezierDuplicateControl: true, /** * @description The sizeBezierControl field defines the size in pixels to display the control points. * @type {array} Specifies the size in pixels to display the control points as an array of [width,height] type (must have two-elements) * @example * * null {null}, defines the default size for bezier control points * [0,0] {array}, defines the empty bezier control points * [4,4] {array}, defines the a 4x4 bezier control points */ sizeBezierControl: [8,8], /** * @description The colorBezierControl field specifies the color to display the control points. * @type {string} Indicates the CSS color to display the control points. * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color (hides the bezier control points) * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorBezierControl: "#404040", /** * @description The colorLineBezierControl field defines the color to show the line between control point and bezier's origin. * @type {string} Indicates the CSS color to show the line between control point and bezier's origin. * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color (hides the line between control point and bezier's origin) * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorLineBezierControl: "#808080", /** * @description The showBezierValue field indicates whether the values are shown on the bezier curve. * @type {boolean} Indicates whether the values are shown on the bezier curve. * @example * * false {boolean}, hides the values are shown on the bezier curve * true {boolean}, shows the values are shown on the bezier curve */ showBezierValue: true, /** * @description The colorBezierValue field defines the color to show the background of the values on the bezier curve (while the value is between margins) * @type {string} Indicates the CSS color to show the background of the values on the bezier curve (while the value is between margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorBezierValue: "#FFFF00", /** * @description The colorTextBezierValue field defines the color to show the values on the bezier curve (while the value is between margins) * @type {string} Specifies the CSS color to show the values on the bezier curve (while the value is between margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorTextBezierValue: "black", /** * @description The colorShadowBezierValue field specifies the shadow's color for bezier values (while the value is between margins) * @type {string} Specifies the shadow's CSS color for bezier values (while the value is between margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorShadowBezierValue: "#808080", /** * @description The colorBezierValueOutside field defines the color to show the background of the values on the bezier curve (while the value is outside of margins) * @type {string} Specifies the CSS color to show the background of the values on the bezier curve (while the value is outside of margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorBezierValueOutside: "#FFFF00", /** * @description The colorTextBezierValueOutside field defines the color to show the values on the bezier curve (while the value is outside of margins) * @type {string} Indicates the CSS color to show the values on the bezier curve (while the value is outside of margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorTextBezierValueOutside: "black", /** * @description The colorShadowBezierValueOutside field specifies the shadow's color for bezier value (while the value is outside of margins) * @type {string} Specifies the shadow's CSS color for bezier value (while the value is outside of margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorShadowBezierValueOutside: "#808080", /** * @description The formatColorBezierValue field specifies a general expression that defines the intensity of the color to show the values, based on the progress (see also colorBezierValue) * @type {string} Specifies a general expression that defines the intensity of the color to show the values, based on the progress. * * The formatColorBezierValue expression supports the following keywords: * * "value" {number}, a numeric expression that specifies the x-position to request the color (a value between 0 and 1) * "color" {number}, A RGB component to be converted (a value between 0 and 255) * * The formatColorBezierValue property converts the RGB components of colorBezierValue property. The colorBezierValue property defines the color to show the background of the values on the bezier curve (while the value is between margins) * * @example * * "0", indicates a black color or rgb(0,0,0) * "255", indicates a white color or rgb(255,255,255) * "255*value", returns a value between 0 and 255 that defines the RGB component based on the time/value. * "color", indicates the original color (colorBezierValue property) */ formatColorBezierValue: "round( color/2 + (color/2 * value))", /** * @description The primitiveBezierValue field defines the type of frame the object is displaying (see also pArgBezierValue) * @type {string} Indicates the primitive to draw the value's frame. * * The primitiveBezierValue could be any of the following predefined values: * * "Rect" {string}, defines a rectangular-object * "RoundRect" {string}, defines a round rectangular-object. The pArgBezierValue.x, pArgBezierValue.y define the radius of round-corners. * "Ellipse" {string}, defines an elliptic-object * "Pie" {string}, defines a pie-object. The pArgBezierValue.startAngle property defines the angle (radians) the pie starts from. The pArgBezierValue.sweepAngle property defines the length (radians) of the pie. * "Arc" {string}, defines an arc-object. The pArgBezierValue.startAngle property defines the angle (radians) the arc starts from. The pArgBezierValue.sweepAngle property defines the length (radians) of the arc. * "Oval" {string}, defines an oval-object. * "Circle" {string}, defines a circle-object. * "Triangle" {string}, defines a triangle-object. * "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArgBezierValue.edges property defines the number of edges within the elliptic-polygon. The pArgBezierValue.startAngle property defines the angle (radians) the elliptic-polygon starts from. * "Polygon" {string}, defines a polygon-object. The pArgBezierValue.points property defines points of the polygon. * "Star" {string}, defines a star-object. The pArgBezierValue.edges property defines the number of edges of the star. The pArgBezierValue.startAngle property defines the angle (radians) the star-object starts from. The pArgBezierValue.deep defines the star's deepness, while pArgBezierValue.tilt defines the star's tile as a number betwee 0 and 1 * "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve * "Summary" {string}, defines a summary-object (outlines the summary-bar) * "Deadline" {string}, defines a deadline-object (outlines the deadline-bar) * * @example * * null {null}, defines a rectangular-object * "Ellipse" {string}, defines an elliptic-object */ primitiveBezierValue: "Ellipse", /** * @description The pArgBezierValue field holds different properties to customize the object's primitive (see also primitiveBezierValue). * @type {object} Defines different properties to customize the object's primitive. The pArgBezierValue field has no effect if no primitiveBezierValue is defined. */ pArgBezierValue: { /** * @description The x field defines the x-radius of the round-rectangle object. * @type {number} Specifies the x-radius of the round-rectangle object * * The x field has effect only if the primitive is: * * "RoundRect", defines a round-rectangle * * @example * * 0 {number}, indicates no round-corner for x-axis * 8 {number}, defines a round corner (of 8-pixels radius) for x-axis */ x: undefined, /** * @description The y field defines the y-radius of the round-rectangle object. * @type {number} Specifies the y-radius of the round-rectangle object * * The y field has effect only if the primitive is: * * "RoundRect", defines a round-rectangle * * @example * * 0 {number}, indicates no round-corner for y-axis * 8 {number}, defines a round corner (of 8-pixels radius) for y-axis */ y: undefined, /** * @description The startAngle field defines the angle (radians) the object's primitive starts from. * @type {number} Defines the angle (radians) the object's primitive starts from * * The startAngle field has effect only if the primitive is: * * "Arc", defines an arc-object * "Pie", defines a pie-object * "EllipticPolygon", defines an elliptic-polygon-object * "Star", defines a star-object * * @example * * 0 {number}, indicates that the primitive starts at 0 degree (12 o'clock) * -Math.PI/2 {number}, starts at -90 degree (9 o'clock) */ startAngle: undefined, /** * @description The sweepAngle field defines the length (as an angle in radians) of the object's primitive. * @type {number} Defines the length (as an angle in radians) of the object's primitive. * * The sweepAngle field has effect only if the primitive is: * * "Arc", defines an arc-object * "Pie", defines a pie-object * * @example * * 0 {number}, indicates a zero-length (the primitive may not be visible while length is 0) * Math.PI/2 {number}, defines the 90 degree length. */ sweepAngle: undefined, /** * @description The edges field defines the number of edges of the object's primitive. * @type {number} Defines the number of edges of the object's primitive. It should be greater or equal than 3. * * The edges field has effect only if the primitive is: * * "EllipticPolygon", defines an elliptic-polygon-object * "Star", defines a star-object * * @example * * null {null}, defines a triangle * 3 {number}, defines a triangle * 8 {number}, defines an octagon */ edges: undefined, /** * @description The points field defines the points object's polygon. * @type {array} Defines the points object's polygon as an array of [[x,y]] or [{x,y}] type. There must be more than 3-points defines. * * The points field has effect only if the primitive is: * * "Polygon", defines a polygon-object. * * @example * * [[0,100],[50,0],[100,100]] {array}, defines a triangle * [{x:0,y:100},{x:50,y:0},{x:100,y:100}] {array}, defines a triangle */ points: undefined, /** * @description The deep field defines star's deep (defines the isotoxal star-polygon's deepnnes). * @type {number} Defines star's deep. * * The deep field has effect only if the primitive is: * * "Star", defines a star-object * * @example * * null {null}, defines the start's default deep as a result of sin(PI/edges) expression based on the number of edges the star has. * 0 {number}, the star is equivalent with an elliptic-polygon * 0.5 {number}, defines the star's deep to 0.5 (half of the radius) */ deep: undefined, /** * @description The tilt field defines star's tilt. * @type {number} Defines star's tilt as a number between 0 and 1. * * The tilt field has effect only if the primitive is: * * "Star", defines a star-object * * @example * * null {null}, defines the start's default tilt (0.5). * 0 {number}, the star' vertices go more to right * 1 {number}, the star' vertices go more to left */ tilt: undefined }, /** * @description The formatBezierValue field specifies a general expression that defines the values to be shown on the curve, based on the progress. * @type {string} Defines a general expression that defines the values to be shown on the curve, based on the progress. The result is a caption that supports ex-HTML format * * The formatBezierValue expression supports the following keywords: * * "value" {number}, indicates a value between 0 and 1, indicating the time, * "scale" {number}, specifies the count of elements on the progress scale. * * @example * * null {null}, shows values in default format * "``" {string}, no values are displayed * "value format 2" {string}, shows the value with 2 decimals * "scale * value format 2" {string}, shows the scaled values with 2 decimals */ formatBezierValue: "` ` + round( (value MIN 0 MAX 1) * scale) + ` `", /** * @description The showBezierScale field indicates whether the scale time/progress is displayed. * @type {boolean} Specifies whether the scale time/progress is displayed. * @example * * false {boolean}, hides the scale time/progress * true {boolean}, shows the scale time/progress */ showBezierScale: true, /** * @description The colorBezierScale field defines a color to show the lines of the scale. * @type {string} Specifies a CSS color to show the lines of the scale * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorBezierScale: "rgba(0,0,0,.10)", /** * @description The colorTextBezierScale field defines the color to display the scale (excluding the margins) * @type {string} Specifies the CSS color to display the scale (excluding the margins) * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorTextBezierScale: "#A0A0A0", /** * @description The colorTextMarginsBezierScale field defines the CSS color to display the margins of the scale * @type {string} Indicates the CSS color to display the margins of the scale * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorTextMarginsBezierScale: "black", /** * @description The showBezierScaleControl field indicates whether the control displays a control-scale point, that allows you to change the scale to display the values on the bezier. * @type {boolean} Specifies whether the control displays a control-scale point, that allows you to change the scale to display the values on the bezier. * @example * * false {boolean}, hides the control-scale point * true {boolean}, shows the control-scale point */ showBezierScaleControl: true, /** * @description The bezierScaleX field specifies the number of units to be displayed on the x-axis * @type {number} Indicates the number of units to be displayed on the x-axis. The bezierScaleRangeX.min and bezierScaleRangeX.max defines the limits the bezierScaleX can go to. * @example * * 1 {number}, the units on x-axis are 0 and 1 * 5 {number}, the units on x-axis are 0, 1, 2, 3, 4 and 5 */ bezierScaleX: 10, /** * @description The bezierScaleRangeX field specifies an object of {min,max} type that limits the number of units to be displayed on the x-axis * @type {object} specifies an object of {min,max} type that limits the number of units to be displayed on the x-axis */ bezierScaleRangeX: { /** * @description The min field defines the lower limit of the bezierScaleX property. * @type {number} Specifies the lower limit of the bezierScaleX property. The limit should be a positive number. */ min: 1, /** * @description The max field defines the upper limit of the bezierScaleX property. * @type {number} Specifies the upper limit of the bezierScaleX property. The limit should be a positive number. */ max: 100 }, /** * @description The bezierScaleY field specifies the number of units to be displayed on the y-axis * @type {number} Indicates the number of units to be displayed on the y-axis. The bezierScaleRangeY.min and bezierScaleRangeY.max defines the limits the bezierScaleY can go to. * @example * * 1 {number}, the units on y-axis are 0 and 1 * 5 {number}, the units on y-axis are 0, 1, 2, 3, 4 and 5 */ bezierScaleY: 10, /** * @description The bezierScaleRangeY field specifies an object of {min,max} type that limits the number of units to be displayed on the y-axis * @type {object} specifies an object of {min,max} type that limits the number of units to be displayed on the y-axis */ bezierScaleRangeY: { /** * @description The min field defines the lower limit of the bezierScaleY property. * @type {number} Specifies the lower limit of the bezierScaleY property. The limit should be a positive number. */ min: 1, /** * @description The max field defines the upper limit of the bezierScaleX property. * @type {number} Specifies the upper limit of the bezierScaleX property. The limit should be a positive number. */ max: 100 }, /** * @description The colorBezierScaleControl field specifies the color to display the control-scale point * @type {string} Specifies the color to display the control-scale point * @example * * null {null}, defines a black-color * "transparent" {string}, defines a transparent-color * "red" {string}, defines a red-color * "rgb(255,0,0)" {string}, defines a red-color * "rgba(255,0,0,0.5)" {string}, defines a 50% red-color */ colorBezierScaleControl: "black", /** * @description The highlightBezierScaleProgress field highligths the value on the bezier, on the progress scale as well. * @type {boolean} Indicates whether the control highligths the value on the bezier, on the progress scale as well. * @example * * false {boolean}, unhighligths the values on axis * true {boolean}, highligths the values on axis */ highlightBezierScaleProgress: true, /** * @description The showBezierCoord field indicates whether the control displays the current coordinates of the bezier being displayed ( P1 and P2 control points) * @type {boolean} Specifies whether the control displays the current coordinates of the bezier being displayed ( P1 and P2 control points) * @example * * false {boolean}, hides the bezier's coordinates * true {boolean}, shows the bezier's coordinates */ showBezierCoord: true, /** * @description The clipBezier field specifies if the control clips the entire bezier to its client area * @type {boolean} Specifies if the control clips the entire bezier to its client area * @example * * false {boolean}, shows the bezier curve un-clipped * true {boolean}, clips the bezier curve */ clipBezier: false, /** * @description The restrictBezier field specifies whether the control points of the bezier curve are limited to [0,1] range * @type {boolean} Specifies whether the control points of the bezier curve are limited to [0,1] range * @example * * false {boolean}, no limit for P1 and P2 control points * true {boolean}, limits the P1 and P2 control points to [0,1] range */ restrictBezier: false };