/* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.RadialMenu) // // The exontrol.RadialMenu class provides the following fields (public): // // Root {object}, gives access to the control's root item as an object of exontrol.RadialMenu.Root type // Layers {object}, gives access to the control's layers collection as an object of exontrol.RadialMenu.Layers type // Listeners {object}, holds a reference to exontrol.Lts which defines the events of the control. // Shortcuts {object}, holds a reference to exontrol.Sts which defines the shortcuts of the control. // // The exontrol.RadialMenu class defines the following functions: // // SetCanvas(canvas, localCanvas), changes the control's canvas where it runs. // GetCanvas(), gets the canvas element, the control is running on. // SetClientRect(client), defines a client area for the control. // GetClientRect(), returns the control's client area. // Options/GetOptions()/SetOptions(value) {object}, specifies the options of the exontrol.RadialMenu control // Tfi/GetTfi()/SetTfi(value), specifies an object of {bold,italic,...}/exontrol.TFI type that defines font attributes to display the captions within the control. // Locked/GetLocked()/SetLocked(value) {boolean}, specifies whether the control is locked(protected) or unlocked // ReadOnly/GetReadOnly()/SetReadOnly(value) {boolean}, specifies whether the control is read-only // WheelChange/GetWheelChange()/SetWheelChange(value) {number}, defines the amount the control scrolls when the user rolls the mouse wheel. // bU(), locks invalidating the control until the eU() method is called // eU(), invalidates the control // Refresh(), refreshes the entire control. // Smooth(callback, thisArg), performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback. // GetSmooth()/SetSmooth(value), defines the time in ms the control goes from one layout to another. // Cursors/GetCursors()/SetCursors(value) {string}, defines the mouse cursor to display when pointing over different parts of the control. // GetLayers(), gets the control's layers into a string representation (the Layers.Save() builds and gets the control's layers into a string representation) // SetLayers(value), defines the control's layers from a string representation. // Unshuffle(), restores the layers of the control in case they were shuffled. // Shuffle(value), arranges randomly all layers within the control. // GetDebug(), specifies whether the control displays the layers in debug-mode. // SetDebug(value), shows the control in debug-mode. // GetShowLayers(), indicates the only layers to be shown on the control. // SetShowLayers(value), shows or hides layers within the control. // GetLayerDragAny(), specifies the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control. // SetLayerDragAny(value), sets the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control. // GetShapes(), defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. // SetShapes(value), changes the shapes each part of the control can display. The shapes field customizes the control's visual appearance. // GetDisplayAngle(), gets the angle (degree) to display the items around the radial menu. // SetDisplayAngle(value), changes the angle (degree) to display the items around the radial menu. // GetMinVisibleCount(), gets the minimum number of items being visible on the radial menu. // SetMinVisibleCount(value), changes the minimum number of items being visible on the radial menu. // GetCircular(), indicates whether the radial-menu is shown as circular instead of elliptical. // SetCircular(value), shows the radial-menu as circular instead of elliptical. // GetSubItemsSize(), gets the value / expression that defines the size to display the "subitems" portion of the control. // SetSubItemsSize(value), sets the value / expression that defines the size to display the "subitems" portion of the control. // GetParentSize(), gets the value / expression that defines the size to display the "parent" portion of the control. // SetParentSize(value), changes the size to display the "parent" portion of the control // GetExpanded(), indicates whether the control is expanded or collapsed // SetExpanded(value), expands or collapses the control // GetCollapseLayers(), specifies the list of layers to be shown while the control is collapsed (separated by comma). // SetCollapseLayers(value), specifies the list of layers to be shown while the control is collapsed (separated by comma). // GetAllowToggleExpand(), specifies whether the user can expand or collapse the radial-menu, once the "parent" is clicked. // SetAllowToggleExpand(value), prevents expanding/collapsing the radial-menu, once the "parent" is clicked. // GetDisplaySubItems(), customizes the item's content to be displayed on the "sub-items" portion. // SetDisplaySubItems(value), customizes the item's content to be displayed on the "sub-items" portion. // GetDisplayItems(), customizes the item's content to be displayed on the "items" portion. // SetDisplayItems(value), customizes the item's content to be displayed on the "items" portion. // GetDisplayParent(), customizes the item's content to be displayed on the "parent" portion. // SetDisplayParent(value), customizes the item's content to be displayed on the "parent" portion. // GetItems(), defines the items of the control from a string-representation. // SetItems(value), loads items of the control from a string-representation. // GetSweepOnSelect(), specifies whether browsed-items are arranged around the selected radial-item // SetSweepOnSelect(value), specifies whether browsed-items are arranged around the selected radial-item // GoBack(), advances to parent item. // BrowseItem/GetBrowseItem()/SetBrowseItem(value), defines the control's browsed item (only visible items can be browsed) // // LayerAutoSize/GetLayerAutoSize()/SetLayerAutoSize(value), specifies the index or the key of the layer that determines the size to display all layers. // LayerOfValue/GetLayerOfValue()/SetLayerOfValue(value), specifies the index or the key of the layer whose value determines the control's Value property. // Value/GetValue()/SetValue(value), specifies the control's value // // The exontrol.RadialMenu class provides the following events (through oLts): // // "onselect", occurs when an item has been clicked/selected (just leaf-items can fire the "onselect" event, where a leaf-item is item with no visible child-items). The onselect's parameter is: // // oEvent {object}, specifies an object of exontrol.RadialMenu.Item that defines the item being selected. // // "onbrowse", occurs once a new item has been browsed. The onbrowse's parameter is: // // oEvent {object}, specifies an object of exontrol.RadialMenu.Root or exontrol.RadialMenu.Item that defines the item being browsed. // // "onexpand", occurs the control is expanded or collapsed. The onexpand's parameter is: // // oEvent {object}, specifies an object of exontrol.RadialMenu.Root that defines the control's root (Root property). // // "onclick", occurs once the user clicks or double-clicks an item. The onclick's parameter is: // // oEvent {object}, specifies an object of {layer,dblClick,button,modifiers,pie,item,hitTest} type, that holds information about the item being clicked. // // oEvent.layer {object}, specifies null or an object of exontrol.RadialMenu.Layer type that indicates the layer being clicked // oEvent.dblClick {boolean}, indicates whether the user clicks or double-clicks the node // oEvent.button {number}, indicates which button is pressed while clicking the node as 1 (left), 2 (right) or 4 (middle) // oEvent.modifiers {number}, specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys // oEvent.pie {object}, indicates null or the pie from the cursor as an object of {index,startAngle,sweepAngle} // oEvent.item {object}, gets the references to an object of exontrol.RadialMenu.Root / exontrol.RadialMenu.Item type that holds information about the item at the cursor // oEvent.hitTest {number}, specifies the hit-test code at cursor. // // "onanchorclick", (@since 2.2) occurs once the user clicks an anchor element (the ex-HTML part marks an anchor or hyperlink element). The onanchorclick's parameter is: // // oEvent {object}, specifies an object of {id,options} type, that holds information about the anchor being clicked. // // oEvent.id {string}, specifies null or the identifier of the anchor being clicked // oEvent.options {string}, specifies null or the options of the anchor being clicked // // "onchange", occurs when the layer's value is changed. // // oEvent {object}, indicates an object of exontrol.RadialMenu.Layer type whose value/offset-x/offset-y/rotation-angle has been changed. // // "ondragstart", notifies that the user starts dragging the layer. The ondragstart's parameter is: // // oEvent {object}, specifies an object of {layer,cancel,event} type, that holds information about the layer that starts dragging and the event that generates the drag-event. // // oEvent.layer {object}, specifies an object of exontrol.RadialMenu.Layer type that indicates the layer being dragged // oEvent.cancel {boolean}, indicates whether the drag operation should be canceled // oEvent.event {object}, indicates an object of MouseEvent/TouchEvent type that generated the operation // // "ondrag", occurs once the user drags the layer to a new position. The ondrag's parameter is: // // oEvent {object}, specifies an object of {layer,event} type, that holds information about the layer being dragging and the event that generates the drag-event. // // oEvent.layer {object}, specifies an object of exontrol.RadialMenu.Layer type that indicates the layer being dragged // oEvent.event {object}, indicates an object of MouseEvent/TouchEvent type that generated the operation // // "ondragend", notifies drag operation ends. The ondragend's parameter is: // // oEvent {object}, specifies an object of {layer,event} type, that holds information about the layer being dragging and the event that generates the drag-event. // // oEvent.layer {object}, specifies an object of exontrol.RadialMenu.Layer type that indicates the layer being dragged // oEvent.event {object}, indicates an object of MouseEvent/TouchEvent type that generated the operation // // "onlayerin", occurs once the cursor enters the layer. // // oEvent {object}, indicates an object of exontrol.RadialMenu.Layer type. // // "onlayerout", occurs once the cursor leaves the layer. // // oEvent {object}, indicates an object of exontrol.RadialMenu.Layer type. // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.RadialMenu.Layers) // // The exontrol.RadialMenu.Layers object holds a collection of layers for the radial-menu control. Any layer can display unlimited opaque / transparent graphics, // HTML text, can be visible, selectable, dragable and so on. Any layer can change its position in the layers collection as well. The Layer can // change its brightness, contrast, grayscale or transparency as well. // // The exontrol.RadialMenu.Layers objects implements the following methods: // // Count/GetCount()/SetCount(value), specifies the number of layers // Item(key), returns a specific Layer of the Layers collection // Add(key), creates and adds/gets a Layer object to the collection and returns a reference to the newly created object // Remove(key), removes a specific member from the Layers collection. // Clear(), removes all objects within the collection // // Load(value), loads the layers from a string-representation // Save(), loads the layers from a string-representation // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.RadialMenu.Layer) // // The exontrol.RadialMenu.Layer object holds a layer of the RadialMenu control. The Layer object holds a collection of pictures // and HTML captions to be displayed on a viewable layer. Any layer can be visible, selectable or dragable. Any layer // can be moved, rotated or clipped. // // The exontrol.RadialMenu.Layer object implements the following methods: // // Index/GetIndex()/SetKey(value) {number}, retrieves the layer's index // Key/GetKey()/SetKey(value) {any}, retrieves or sets the layer's key // Position/GetPosition()/SetPosition(value) {number}, retrieves or sets the layer's position // Visible/GetVisible()/SetVisible(value) {boolean}, specifies whether the layer is visible or hidden // Selectable/GetSelectable()/SetSelectable(value) {boolean}, specifies whether the layer is selectable or un-selectable // Back/GetBack()/SetBack(value) {string}, specifies the layer's background as a name of an HTML picture or a CSS color // Fore/GetFore()/SetFore(value) {string}, specifies the layer's foreground as HTML caption // // OnDrag/GetOnDrag()/SetOnDrag(value) {number}, gets or sets the layer's transformation once the user drags it // Value/GetValue()/SetValue(value) {number}, gets or sets the layer's value // Idem/GetIdem()/SetIdem(value) {any}, ensures that the layer's offset and rotation-angle is equal for all idem layers (separated by comma character). // // The following methods(properties) moves/resizes the layer: // // Left/GetLeft()/SetLeft(value) {string}, specifies the expression relative to the view, to determine the x-position to show the current layer on the control // Top/GetTop()/SetTop(value) {string}, specifies the expression relative to the view, to determine the y-position to show the current layer on the control. // Width/GetWidth()/SetWidth(value) {string}, specifies the expression relative to the view, to determine the width to show the current layer on the control. // Height/GetHeight()/SetHeight(value) {string}, specifies the expression relative to the view, to determine the height to show the current layer on the control. // DefaultOffsetX/GetDefaultOffsetX()/SetDefaultOffsetX(value) {number}, gets or sets a value that indicates the default x-offset of the layer. // DefaultOffsetY/GetDefaultOffsetY()/SetDefaultOffsetY(value) {number}, gets or sets a value that indicates the default y-offset of the layer. // OffsetX/GetOffsetX()/SetOffsetX(value) {number}, gets or sets a value that indicates the x-offset of the layer. // OffsetY/GetOffsetY()/SetOffsetY(value) {number}, gets or sets a value that indicates the y-offset of the layer. // OffsetXValid/GetOffsetXValid()/SetOffsetXValid(value) {string}, validates the x-offset value of the layer. // OffsetYValid/GetOffsetYValid()/SetOffsetYValid(value) {string}, validates the y-offset value of the layer. // ValueToOffsetX/GetValueToOffsetX()/SetValueToOffsetX(value) {string}, specifies the expression to convert the value to x-offset. // ValueToOffsetY/GetValueToOffsetY()/SetValueToOffsetY(value) {string}, specifies the expression to convert the value to y-offset. // OffsetToValue/GetOffsetToValue()/SetOffsetToValue(value) {string}, specifies the expression to convert the offsetx,offsety to value. // // The following methods(properties) rotates the layer: // // DefaultRotateAngle/GetDefaultRotateAngle()/SetDefaultRotateAngle(value) {number}, specifies the default angle to rotate the layer (degree) // RotateAngle/GetRotateAngle()/SetRotateAngle(value) {number}, specifies the angle to rotate the layer (degree) // RotateAngleValid/GetRotateAngleValid()/SetRotateAngleValid(value) {string}, validates the rotation angle of the layer // RotateCenterX/GetRotateCenterX()/SetRotateCenterX(value) {string}, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer. // RotateCenterY/GetRotateCenterY()/SetRotateCenterY(value) {string}, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer. // RotateCenterLayer/GetRotateCenterLayer()/SetRotateCenterLayer(value) {any}, indicates the index/key of the layer the rotation is around. If -1, the rotation is relative to the current layer. // RotateAngleToValue/GetRotateAngleToValue()/SetRotateAngleToValue(value) {string}, specifies the expression to convert the rotating angle to value. // ValueToRotateAngle/GetValueToRotateAngle()/SetValueToRotateAngle(value) {string}, specifies the expression to convert the value to rotating angle. // RotamoveCenterX/GetRotamoveCenterX() {number}, specifies the x-position of the layer's center, while the layer's drag operation is exDoRotamove. // RotamoveCenterY/GetRotamoveCenterY() {number}, specifies the y-position of the layer's center, while the layer's drag operation is exDoRotamove. // RotamoveOffsetX/GetRotamoveOffsetX() {number}, Specifies the x-offset of the layer, while the layer's drag operation is exDoRotamove. // RotamoveOffsetY/GetRotamoveOffsetY() {number}, Specifies the y-offset of the layer, while the layer's drag operation is exDoRotamove. // // The following methods(properties) clips the layer: // // RotateClip/GetRotateClip()/SetRotateClip(value) {boolean}, specifies whether the layer's clipping region is rotated once the layer is rotated. // Clip/GetClip() {object}, gets access to the layer's clip object of exontrol.LayerClip type. // // The following methods(properties) changes the visual appearance of the layer: // // Grayscale/GetGrayscale()/SetGrayscale(value) {string}, sets the percent value / expression to convert the layer to grayscale. // Transparency/GetTransparency()/SetTransparency(value) {string}, sets the percent value / expression of the transparency to display the layer. // Brightness/GetBrightness(), gets access to the layer's brightness object // Contrast/GetContrast(), gets access to the layer's contrast object // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.LayerClip) (exontrol.RadialMenu.LayerClip) // // The exontrol.LayerClip object defines the clipping the layer can apply to. // // The exontrol.LayerClip object implements the following methods: // // Type,GetType(),SetType(value), specifies the type of the clipping the current layer supports. // Value,GetValue(),SetValue(value), specifies the clip's value. // OffsetX/GetOffsetX()/SetOffsetX(value) {string}, specifies the x-offset expression / value of the clip, relative to the layer. // OffsetY/GetOffsetY()/SetOffsetY(value) {string}, specifies the y-offset expression / value of the clip, relative to the layer. // // The exontrol.LayerClip object implements the following methods: // // Left/GetLeft()/SetLeft(value) {string}, specifies the left position / expression of the clip, relative to the layer. // Top/GetTop()/SetTop(value) {string}, specifies the top position / expression of the clip, relative to the layer. // Width/GetWidth()/SetWidth(value) {string}, specifies the width value / expression of the clip, relative to the layer. // Height/GetHeight()/SetHeight(value) {string}, specifies the height value / expression of the clip, relative to the layer. // // The exontrol.LayerClip object implements the following methods ("RoundRect"): // // RoundRadiusX/GetRoundRadiusX()/SetRoundRadiusX(value) {string}, specifies the x-radius value / expression of the round corner, relative to the layer. // RoundRadiusY/GetRoundRadiusY()/SetRoundRadiusY(value) {string}, specifies the y-radius value / expression of the round corner, relative to the layer. // // The exontrol.LayerClip object implements the following methods ("Ellipse", "Pie"): // // RadiusX/GetRadiusX()/SetRadiusX(value) {string}, specifies the x-radius value / expression of the clip, relative to the layer, relative to the layer. // RadiusY/GetRadiusY()/SetRadiusY(value) {string}, specifies the y-radius value / expression of the clip, relative to the layer, relative to the layer. // CenterX/GetCenterX()/SetCenterX(value) {string}, specifies the x-position / expression of the center of the clip, relative to the layer. // CenterY/GetCenterY()/SetCenterY(value) {string}, specifies the y-position / expression of the center of the clip, relative to the layer. // // The exontrol.LayerClip object implements the following methods ("Pie"): // // StartAngle/GetStartAngle()/SetStartAngle(value) {string}, specifies the starting angle (degree) relative to the y-axis. // SweepAngle/GetSweepAngle()/SetSweepAngle(value) {string}, specifies sweep angle (degree) relative to the starting angle. // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.RadialMenu.Item) // // The exontrol.RadialMenu.Item object holds all information about a item within the exontrol.RadialMenu object. // // The exontrol.RadialMenu.Item object supports the following methods: // // Add(oOpts) {exontrol.RadialMenu.Item}, adds a child-item. // Remove(), removes the item (including all its descendants) // Clear(), clears the item's descendants only. // Item(key) {exontrol.RadialMenu.Item}, returns an item giving its key or caption. // Save() {string}, returns the string-representation of the item, and all its descendent-items. // Load(value), assigns items from a string-representation, to the item. // GetOptions() {exontrol.RadialMenu.ItemOptions}, returns the item's caption, image, ... all information the item displays. // SetOptions(oOpts), assigns a new caption, image, ... to the item. // // Key/GetKey()/SetKey(value) {any}, specifies the item's key (identifier) (if missing the item's plain-caption defines the item's key) // Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the item. // Enabled/GetEnabled()/SetEnabled(value) {boolean}, enables or disables the item // Index/GetIndex() {number}, returns the item's index (0-based). // Position/GetPosition()/SetPosition(value) {number}, specifies the item's position (0-based). // Caption/GetCaption()/SetCaption(value) {string}, specifies the item's caption (ex-HTML format, shown on "items" portion only) // Image/GetImage()/SetImage(value) {string}, specifies the item's image (the image can be added using the exontrol.HTMLPicture.Add() method, shown on "items" portion only). // Color/GetColor()/SetColor(value) {string}, defines the item's background color to be shown on the "items" portion of the control. // SubCaption/GetSubCaption()/SetSubCaption(value) {string}, specifies the item's caption (ex-HTML format, shown under the "sub-items" portion only) // SubImage/GetSubImage()/SetSubImage(value) {string}, specifies the item's image (the image can be added using the exontrol.HTMLPicture.Add() method, shown on "sub-items" portion only). // SubColor/GetSubColor()/SetSubColor(value) {string}, defines the item's background color to be shown on the "sub-items" portion of the control. // // The exontrol.RadialMenu.Item object supports the following methods (internal): // // toString() {string}, returns a string representation of the item. // parents() {[exontrol.RadialMenu.Item]}, returns recursivelly all parents of the item. // descendants() {exontrol.Arr([exontrol.RadialMenu.Item])}, returns all-descendent items of the item. // visible() {[exontrol.RadialMenu.Item]}, returns a collection of an item's visible-child items // children() {[exontrol.RadialMenu.Item]}, returns a collection of an item's child items // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Def.Gauge) // // The exontrol.Def.Gauge namespace provides definitions for different objects, primitives, objects of exontrol.RadialMenu object // // The exontrol.Def.Gauge 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}, specifies whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // layers {string}, defines the layers of the control from a string-representation // layerAutoSize {number/string}, specifies the index or the key of the layer that determines the size to display all layers // layerOfValue {number/string}, specifies the index or the key of the layer whose value determines the control's Value property // layerDragAny {number/string}, specifies the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control. // value {number}, indicates the control's value // debug {boolean}, indicates whether the control displays the layers in debug-mode // showLayers {string}, indicates the only layers to be shown on the control. // shapes {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. // displayAngle {number}, specifies the angle (degree) to display the items around the radial menu. // minVisibleCount {number}, specifies the minimum number of items being visible on the radial menu. // circular {boolean}, indicates whether the radial-menu is shown as circular instead of elliptical. // subItemsSize {string}, defines the expression / value to determine the size of the "subitems" portion of the control. // parentSize {string}, defines the expression / value to determine the size of the "parent" portion of the control. // expanded {boolean}, expands or collapses the radial-menu // collapseLayers {string}, specifies the list of layers to be shown while the control is collapsed (separated by comma) // allowToggleExpand {boolean}, allows expanding/collapsing the root of the radial-menu // // displaySubItems {object}, customizes the item's content (caption, image or arrow) to be displayed on the "sub-items" portion of the control as explained bellow: // arrow {number}, specifies the ratio to determine where the arrow of items with children is displayed. // image {number}, specifies the ratio to determine where the item's image is displayed within the host portion of the control. The imageSize field specifies the aspect-ratio to display the item's image. // caption {number}, specifies the ratio to determine where the item's caption is displayed within the host portion of the control. // content {number}, specifies the ratio to determine where the item's content (caption and image together) is displayed within the host portion of the control. The imageSize field specifies the aspect-ratio to display the item's image. The imageAlign field specifies the alignment of the image relative to the item's caption (valid for the content only). // imageAlign {number}, aligns the item's image relative to the item's caption. The imageAlign field is valid only if "content" is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by "content" field. // imageSize {any}, defines the size of the item's image // radial {exontrol.RadialMenu.DisplayRadialEnum}, rotates the item's content while not zero. // // displayItems {object}, customizes the item's content (caption, image or arrow) to be displayed on the "items" portion of the control as explained bellow: // arrow {number}, specifies the ratio to determine where the arrow of items with children is displayed. // image {number}, specifies the ratio to determine where the item's image is displayed within the host portion of the control. The imageSize field specifies the aspect-ratio to display the item's image. // caption {number}, specifies the ratio to determine where the item's caption is displayed within the host portion of the control. // content {number}, specifies the ratio to determine where the item's content (caption and image together) is displayed within the host portion of the control. The imageSize field specifies the aspect-ratio to display the item's image. The imageAlign field specifies the alignment of the image relative to the item's caption (valid for the content only). // imageAlign {number}, aligns the item's image relative to the item's caption. The imageAlign field is valid only if "content" is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by "content" field. // imageSize {any}, defines the size of the item's image // radial {exontrol.RadialMenu.DisplayRadialEnum}, rotates the item's content while not zero. // // displayParent {object}, customizes the item's content (caption, image) to be displayed on the "parent" portion of the control as explained bellow: // imageAlign {number}, aligns the item's image relative to the item's caption. The imageAlign field is valid only if "content" is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by "content" field. // imageSize {any}, defines the size of the item's image // visible {number}, defines whether the caption or/and image of the item are being shown // // items {string}, defines the items of the radial-menu from a string-representation. // sweepOnSelect {boolean}, specifies whether browsed-items are arranged around the selected radial-item // highlightAny {boolean}, indicates whether any pie of the radial-menu is highlighted once the cursor hovers it, or just the pies that host items. // browseItem {any}, indicates the item being browsed // parent {object}, specifies the custom caption and image to be displayed on the "parent" section, as an object of {caption,image} type (if parent is not specified or the caption or image is missing the caption, image of the browsed item is displayed instead) (@since 2.4) // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.Gauge namespace provides definitions for different objects, primitives, objects of exontrol.RadialMenu object */ exontrol.Def.Gauge = { /** * @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} * @example * * false {boolean}, unlocks the control (can select any item) * true {boolean}, locks the control (can't select any item) */ locked: false, /** * @description The readOnly field indicates whether the control is read-only * @type {boolean} * @example * * false {boolean}, the user can select any item * true {boolean}, the user can not select the items */ readOnly: false, /** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} * @example * * 0 {number}, locks any action the mouse's wheel performs * 360/8 {number}, rotates the control +/-45 degree once the mouse's wheel is rotated once */ wheelChange: 360/8, /** * @description The smooth field defines the time in ms the control goes from one layout to another. * @type {number} * @example * * 0 {number}, no smooth changes once the control goes from a layout to another * 250 {number}, specifies that a smooth-transition is performed from a layout to another for 250 ms. */ smooth: 250, /** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * * The format of cursors property is: * * "cursor(part),cursor(part),..." * * where: * * "cursor", defines the CSS mouse cursor to display while cursor hovers the part * "part", defines the name of the part the cursor is applied on (as defined bellow) * * The cursors property supports any of the following parts: * * "dable" (selectable and dragable layer), defines the cursor for selectable and dragable layers * "sable" (selectable layer), defines the cursor for selectable layers * "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the ex-HTML part marks an anchor or hyperlink element) (@since 2.2) * * @type {string} * @example * * null {null}, no mouse cursor is provided. * "crosshair(dable)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers any "dable" (selectable and dragable) layers */ cursors: "pointer(dable,anchor)", /** * @description The layers field defines the layers of the control from a string-representation. Defines the control's layers from a string-representation (separated by comma character). * * The layers field defines the control's layers from a string-representation in the following format: * * "back[flag=value]...[flag=value],...,back[flag=value]...[flag=value],..." * * where: * * "back", (Back/GetBack()/SetBack() methods of exontrol.RadialMenu.Layer) could be: * * "" {empty string} (no layer background provided) * "image" {picture's name}, defines the name of a picture previously added using the exontrol.HP.Add(name,...) method. For instance, "pic" indciates that the HTML Picture named "pic" is stretched on the layer's background. * "color" {string}, indicates a CSS color to be displayed on the layer's background. For instance, "red", "rgba(255,0,0,1)", "#FF0000" indicates a layer full-filed with a solid red-color. * * There are four special-layers within the radial-menu with the following keys: * * [key=subitems], specifies the outer-ring of the control and displays information about sub-items. For instance, "rgba(0,0,0,0.5)[key=subitems][drag=sweep]" flag specifies that the radial' sub-items are displayed on a gray-background, and the entire menu is swept/rotated once the user drags the layer. * [key=items], specifies the inner-ring of the control (between "subitems" and "parent" layers), displays information about the children of the browsing item. For instance, "o1[key=items][drag=rotate][fore=value]" specifies that the radial's child-items are being displayed on the HTML picture names "o1", and once the user drags the layer, it displays the current rotation-angle. * [key=parent], specifies the middle-ring of the control, and it displays information about the parent / browsing item * [key=pointer], it is a special layer whose visibility is updated as soon as a new item is hovered and the layer's rotation angle shows the current hover item. Shortly, the "pointer" layer is always oriented (rotated) into the item being hovered, and it is hidden while the cursor hovers no items within the radial-menu. For instance, "rgba(0,0,0,0.25)[key=pointer][clip=Pie][clip.sweep=1][rotateClip=1]" rotates a needle as soon as cursor hovers a new item * * The layer's string-representation supports the following flags: * * [key] {string}, specifies the layer's key (Key/GetKey()/SetKey(value) methods of exontrol.RadialMenu.Layer). The Layers.Item() method retrieves the control's layer giving its index or key. If the key is not specified, the layer's back is considered its key. For instance [key=background] indicates that the layer's key is "background", so you can always request this layer using the Layers.Item("background") method. * [vis] {0,1}, indicates whether the layer is visible(1) or hidden(0) (Visible/GetVisible()/SetVisible(value) methods of exontrol.RadialMenu.Layer). By default, all layers are visible(1). For instance [vis=0] specifies that the layer is hidden. * [pos] {number, 0-based}, specifies the layer's position as 0-based (Position/GetPosition()/SetPosition(value) methods of exontrol.RadialMenu.Layer). By default, the position of the layer on the control's background is 0. For instance [pos=1] specifies that the layer should be shown the second. * [sel] {0,1}, indicates whether the layer is selectable, so the user can drag it (Selectable/GetSelectable()/SetSelectable(value) methods of exontrol.RadialMenu.Layer). By default, all layers are selectable. For instance [sel=0] indicates that user can not select, drag, rotate or move by drag the layer. * [fore] {string}, specifies the layer's foreground as an HTML caption (can be an expression with "value" keyword which indicates the control's value) (Fore/GetFore()/SetFore(value) methods of exontrol.RadialMenu.Layer). For instance [fore=caption] displays the caption in bold onto the layer's foreground, or "[fore=`` + value]" displays the control's value with a larger font. * [left] {string}, specifies the expression relative to the view, to determine the x-position to show the layer on the control (Left/GetLeft()/SetLeft(value) methods of exontrol.RadialMenu.Layer). The [left] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [left=128] specifies 128-pixels, while [left=width/2] half of the view or x-center of the control's view. * [top] {string}, specifies the expression relative to the view, to determine the y-position to show the layer on the control (Top/GetTop()/SetTop(value) methods of exontrol.RadialMenu.Layer). The [top] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [top=128] specifies 128-pixels, while [top=height/2] half of the view or y-center of the control's view. * [width] {string}, specifies the expression relative to the view, to determine the width to display the entire-layer on the control (Width/GetWidth()/SetWidth(value) methods of exontrol.RadialMenu.Layer). The [width] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [width=128] specifies 128-pixels wide, while [width=width/4] quarter of the view. * [height] {string}, specifies the expression relative to the view, to determine the height to display the entire-layer on the control (Height/GetHeight()/SetHeight(value) methods of exontrol.RadialMenu.Layer). The [height] flag supports the "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords. For instance [height=128] specifies 128-pixels wide, while [height=height/4] quarter of the view. * [defX] {number}, indicates the default x-offset of the layer (DefaultOffsetX/GetDefaultOffsetX()/SetDefaultOffsetX(value) methods of exontrol.RadialMenu.Layer). For instance, [defX=-32] specifies that the layer is displayed left to 32-pixels of its default position. * [defY] {number}, indicates the default y-offset of the layer (DefaultOffsetY/GetDefaultOffsetY()/SetDefaultOffsetY(value) methods of exontrol.RadialMenu.Layer). For instance, [defY=-32] specifies that the layer is displayed to to 32-pixels of its default position. * [x] {number}, indicates the x-offset of the layer (OffsetX/GetOffsetX()/SetOffsetX(value) methods of exontrol.RadialMenu.Layer). For instance, [x=-32] specifies that the layer is displayed left to 32-pixels of its default position. * [y] {number}, indicates the y-offset of the layer (OffsetY/GetOffsetY()/SetOffsetY(value) methods of exontrol.RadialMenu.Layer). For instance, [y=-32] specifies that the layer is displayed to to 32-pixels of its default position. * [drag] {"move","rotate", "rotamove" or "sweep"}, indicates the transformation ("move","rotate", "rotamove" or "sweep") of the layer once the user drags it (OnDrag/GetOnDrag()/SetOnDrag(value) methods of exontrol.RadialMenu.Layer). For instance, [drag=rotate] indicates that the layer is rotated once the user drags it. * [value] {number}, specifies the layer's value (Value/GetValue()/SetValue(value) methods of exontrol.RadialMenu.Layer). For instance, [value=15] changes the layer's value to 15. The [v2a], [v2x] and [v2y] flags are used to converts the layer's value to rotation-angle/x-offset/y-offset. * [idem] {string}, ensures that the layer's offset and rotation-angle is equal for all idem layers (separated by comma character) (Idem/GetIdem()/SetIdem(value) methods of exontrol.RadialMenu.Layer). For instance, [idem=o1,o5] indicates that the current layer, o1 and o5 have the same offset and rotation-angle. * [xValid] {string}, validates the x-offset value of the layer using an expression that supports: "value" (specifies the x-offset/y-offset of the layer), "x" (specifies the x-offset of the layer), "y" (specifies the y-offset of the layer), "lwidth" (specifies the width in pixels of the layer's view), "lheight" (specifies the height in pixels of the layer's view), "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords (OffsetXValid/GetOffsetXValid()/SetOffsetXValid(value) methods of exontrol.RadialMenu.Layer). For instance, [xValid=(value MIN 0 MAX 48)] ensures that the layer's x-offset (OffsetX) is always between 0 and 48. * [yValid] {string}, validates the y-offset value of the layer using an expression that supports: "value" (specifies the x-offset/y-offset of the layer), "x" (specifies the x-offset of the layer), "y" (specifies the y-offset of the layer), "lwidth" (specifies the width in pixels of the layer's view), "lheight" (specifies the height in pixels of the layer's view), "width" (specifies the width in pixels of the control's view) and "height" (specifies the height in pixels of the control's view) keywords (OffsetYValid/GetOffsetYValid()/SetOffsetYValid(value) methods of exontrol.RadialMenu.Layer). For instance, [yValid=(value MIN -height/2 MAX height/2)] ensures that the layer's y-offset (OffsetY) is always between -height/2 and height/2. * [v2x] {string}, specifies the expression to convert the value to x-offset. The expression supports: "value" (specifies the layer's value) keyword (ValueToOffsetX/GetValueToOffsetX()/SetValueToOffsetX(value) methods of exontrol.RadialMenu.Layer). For instance, [v2x=(value=0) ? 0 : 48] specifies that the x-offset of the layer is 0, if the layer's value is 0 else it is 48. * [v2y] {string}, specifies the expression to convert the value to y-offset. The expression supports: "value" (specifies the layer's value) keyword (ValueToOffsetY/GetValueToOffsetY()/SetValueToOffsetY(value) methods of exontrol.RadialMenu.Layer). For instance, [v2y=(value=0) ? 0 : 48] specifies that the y-offset of the layer is 0, if the layer's value is 0 else it is 48. * [o2v] {string}, specifies the expression to convert the x-offset, y-offset to value. The expression supports: "value", "x", "offsetx" indicates the layer's x-offset property, "y", "offsety" indicates the layer's y-offset property keywords (OffsetToValue/GetOffsetToValue()/SetOffsetToValue(value) methods of exontrol.RadialMenu.Layer). For instance, [o2v=x+y/2] specifies that the layer's value is adding x-offset + y-offset divided by 2 * [defA] {number}, specifies the default angle (degree) to rotate the layer (DefaultRotateAngle/GetDefaultRotateAngle()/SetDefaultRotateAngle(value) methods of exontrol.RadialMenu.Layer). For instance, [defA=45] specifies that the default rotation-angle for the layer is 45 degree. * [a] {number}, specifies the angle (degree) to rotate the layer (RotateAngle/GetRotateAngle()/SetRotateAngle(value) methods of exontrol.RadialMenu.Layer). For instance, [a=90] specifies that the layer's rotation-angle is 90 degree. * [aValid] {string}, validates the layer's rotation angle using an expression that supports: "value" (indicates the cumulative rotation angle) keyword (RotateAngleValid/GetRotateAngleValid()/SetRotateAngleValid(value) methods of exontrol.RadialMenu.Layer). For instance, [aValid=value < 90 ? value : (value < 180 ? 90 : ( value < 270 ? 270 : value ))] ensures that the layer's rotation-angle is between 90 and 270. * [xCenter] {string}, indicates the expression that determines the x-origin of the rotation point relative to the RotateCenterLayer layer. The expression supports: "lwidth" (indicates the width in pixels of the layer), "width" (specifies the width in pixels of the view / control), "lheight" (indicates the height in pixels of the layer) and "height" (specifies the height in pixels of the view / control) keywords (RotateCenterX/GetRotateCenterX()/SetRotateCenterX(value) methods of exontrol.RadialMenu.Layer). For instance, [xCenter=lwidth/2-3] defines the rotation-center 3-pixels to the left of the center of the view. * [yCenter] {string}, indicates the expression that determines the y-origin of the rotation point relative to the RotateCenterLayer layer. The expression supports: "lwidth" (indicates the width in pixels of the layer), "width" (specifies the width in pixels of the view / control), "lheight" (indicates the height in pixels of the layer) and "height" (specifies the height in pixels of the view / control) keywords (RotateCenterX/GetRotateCenterX()/SetRotateCenterX(value) methods of exontrol.RadialMenu.Layer). For instance, [yCenter=lheight/2+23] defines the rotation-center 23-pixels lower of the center of the view. * [clayer] {number/string}, indicates the index or key of the layer the rotation is around. If -1, the rotation is relative to the current layer. For instance, [clayer=-1] ensures that the current layer is rotated around itself. * [a2v] {string}, specifies the expression to convert the rotating angle to value. The expression supports: "value" (indicates the layer's rotation-angle) keyword (RotateAngleToValue/GetRotateAngleToValue()/SetRotateAngleToValue(value) methods of exontrol.RadialMenu.Layer). For instance, [a2v=round(value/360*100)] converts the layer's rotation angle to a value between 0 and 100. * [v2a] {string}, specifies the expression to convert the value to rotating angle. The expression supports: "value" (indicates the layer's value) keyword (ValueToRotateAngle/GetValueToRotateAngle()/SetValueToRotateAngle(value) methods of exontrol.RadialMenu.Layer). For instance, [v2a=value/100*360] converts the value between 0 and 100 to a rotation angle between 0 and 360 degree. * [grayscale] {any}, sets the percent value / expression to convert the layer to grayscale. The grayscale can be a number beween 0 and 100, or a string to define an expression. The expression supports: "value" (indicates the control's value) keyword (Grayscale/GetGrayscale()/SetGrayscale(value) methods of exontrol.RadialMenu.Layer). For instance, [grayscale=100] displays the layer in full-grayscale, or [grayscale=value] specifies that the layer's grayscale percent is indicated by the control's value (ex: the control's value is 25, the layer's grayscale will be 25%) * [transparency] {any}, sets the percent value / expression of the transparency to display the layer. The transparency can be a number beween 0 and 100, or a string to define an expression. The expression supports: "value" (indicates the control's value) keyword (Transparency/GetTransparency()/SetTransparency(value) methods of exontrol.RadialMenu.Layer). For instance, [transparency=50] displays the layer half-transparent, or [transparency=value] specifies that the layer's transparency percent is indicated by the control's value (ex: the control's value is 75, the layer is displayed 75% transparent) * [rotateclip] {0,1}, specifies whether the layer's clipping region is rotated once the layer is rotated (RotateClip/GetRotateClip()/SetRotateClip(value) methods of exontrol.RadialMenu.Layer). The [rotateclip] has effect only if the [clip] flag is present for the layer. For instance [rotateClip=1] specifies that the layer's clipping region is rotated once the layer itself is rotated. * [brightness.red] {string}, specifies the percent value / expression of the red-chanel. The expression supports: "value" (indicates the layer's value) keyword (Red/GetRed()/SetRed(value) methods of exontrol.LayerColorAdjustment). For instance, [brightness.red=100] adds 100% more red, or [brightness.red=50+value/2] applies more red based on the control's value. * [brightness.green] {string}, specifies the percent value / expression of the green-chanel. The expression supports: "value" (indicates the layer's value) keyword (Green/GetGreen()/SetGreen(value) methods of exontrol.LayerColorAdjustment). For instance, [brightness.green=100] adds 100% more green, or [brightness.green=50+value/2] applies more green based on the control's value. * [brightness.blue] {string}, specifies the percent value / expression of the blue-chanel. The expression supports: "value" (indicates the layer's value) keyword (Blue/GetBlue()/SetBlue(value) methods of exontrol.LayerColorAdjustment). For instance, [brightness.blue=100] adds 100% more blue, or [brightness.blue=50+value/2] applies more blue based on the control's value. * [contrast.red] {string}, specifies the percent value / expression of the red-chanel. The expression supports: "value" (indicates the layer's value) keyword (Red/GetRed()/SetRed(value) methods of exontrol.LayerColorAdjustment). For instance, [contrast.red=100] adds 100% more red, or [contrast.red=50+value/2] applies more red based on the control's value. * [contrast.green] {string}, specifies the percent value / expression of the green-chanel. The expression supports: "value" (indicates the layer's value) keyword (Green/GetGreen()/SetGreen(value) methods of exontrol.LayerColorAdjustment). For instance, [contrast.green=100] adds 100% more green, or [contrast.green=50+value/2] applies more green based on the control's value. * [contrast.blue] {string}, specifies the percent value / expression of the blue-chanel. The expression supports: "value" (indicates the layer's value) keyword (Blue/GetBlue()/SetBlue(value) methods of exontrol.LayerColorAdjustment). For instance, [contrast.blue=100] adds 100% more blue, or [contrast.blue=50+value/2] applies more blue based on the control's value. * [clip] {"Rect","RoundRect","Ellipse" or "Pie"}, specifies the type of clipping to apply on the layer (Type/GetType()/SetType(value) method of exontrol.LayerClip). For instance, [clip=pie][clip.sweep=45] clips a pie of 45 degree * [clip.value] {number}, indicates the layer clip's value that's the value of "value" keywords within expression-properties such as: [x], [y], [left], [top], [width], [height], [roundX], [roundY], [radiusX], [radiusY], [xCenter], [yCenter], [start] and [sweep] flags of layer's clip. If the [clip.value] is not specified, the control's value is used instead. For instance, [clip.value=50] defines the value of the "value" keyword to 50 for any expression of [x], [y], [left], [top], [width], [height], [roundX], [roundY], [radiusX], [radiusY], [xCenter], [yCenter], [start] and [sweep] flags * [clip.x] {string}, specifies the x-offset expression / value of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (OffsetX/GetOffsetX()/SetOffsetX(value) method of exontrol.LayerClip). For instance, [clip.x=120], moves right by 128-pixels the layer's clip, while [clip.x=value] indicates that the entire clip is moved horizontally based on clip/control's value. * [clip.y] {string}, specifies the y-offset expression / value of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (OffsetY/GetOffsetY()/SetOffsetY(value) method of exontrol.LayerClip). For instance, [clip.y=-120], moves up by 128-pixels the layer's clip, while [clip.y=value] indicates that the entire clip is moved vertically based on clip/control's value. * [clip.left] {string}, specifies the left position / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Left/GetLeft()/SetLeft(value) method of exontrol.LayerClip). For instance, [clip.left=120], defines the left-margin of the clip at 120 pixels, or [clip.left=32+value] specifies that the clip's left margin is computed based on clip/control's value. * [clip.top] {string}, specifies the top position / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Top/GetTop()/SetTop(value) method of exontrol.LayerClip). For instance, [clip.top=120], defines the top-margin of the clip at 120 pixels, or [clip.top=32+value] specifies that the clip's top margin is computed based on clip/control's value. * [clip.width] {string}, specifies the width / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Width/GetWidth()/SetWidth(value) method of exontrol.LayerClip). For instance, [clip.width=120], defines the clip 120 pixels wide, or [clip.width=value] specifies that the clip's width is computed based on clip/control's value. * [clip.height] {string}, specifies the height / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (Height/GetHeight()/SetHeight(value) method of exontrol.LayerClip). For instance, [clip.height=120], defines the clip 120 pixels tall, or [clip.height=value] specifies that the clip's height is computed based on clip/control's value. * [clip.roundX] {string}, indicates the x-radius value / expression of the round corner, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RoundRadiusX/GetRoundRadiusX()/SetRoundRadiusX(value) method of exontrol.LayerClip). For instance, [clip.roundX=16][clip.roundY=16], defines a round-radius of 16 pixels, while [clip.roundX=value][clip.roundY=value] defines the clip's round-radius based on the clip/control's value. The [clip.roundX] and [clip.roundY] flags are valid only for [clip=RoundRect]. * [clip.roundY] {string}, indicates the y-radius value / expression of the round corner, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RoundRadiusY/GetRoundRadiusY()/SetRoundRadiusY(value) method of exontrol.LayerClip). For instance, [clip.roundX=16][clip.roundY=16], defines a round-radius of 16 pixels, while [clip.roundX=value][clip.roundY=value] defines the clip's round-radius based on the clip/control's value. The [clip.roundX] and [clip.roundY] flags are valid only for [clip=RoundRect]. * [clip.radiusX] {string}, specifies the x-radius value / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RadiusX/GetRadiusX()/SetRadiusX(value) method of exontrol.LayerClip). For instance, [clip.radiusX=128], defines clip's x-radius to 128 pixels, while [clip.radiusX=value] specifies that the clip's x-radius is computed based on the clip/control's value. The [clip.radiusX] and [clip.radiusY] flags are valid only for [clip=Ellipse] or [clip=Pie]. * [clip.radiusY] {string}, specifies the y-radius value / expression of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (RadiusY/GetRadiusY()/SetRadiusY(value) method of exontrol.LayerClip). For instance, [clip.radiusY=128], defines clip's y-radius to 128 pixels, while [clip.radiusY=value] specifies that the clip's y-radius is computed based on the clip/control's value. The [clip.radiusX] and [clip.radiusY] flags are valid only for [clip=Ellipse] or [clip=Pie]. * [clip.xCenter] {string}, indicates the x-position / expression of the center of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (CenterX/GetCenterX()/SetCenterX(value) method of exontrol.LayerClip). For instance, [clip.xCenter=128], defines clip's x-center to 128 pixels, while [clip.xCenter=value] specifies that the clip's x-center is computed based on the clip/control's value. The [clip.xCenter] and [clip.yCenter] flags are valid only for [clip=Ellipse] or [clip=Pie]. * [clip.yCenter] {string}, indicates the y-position / expression of the center of the clip, relative to the layer. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (CenterY/GetCenterY()/SetCenterY(value) method of exontrol.LayerClip). For instance, [clip.yCenter=128], defines clip's y-center to 128 pixels, while [clip.yCenter=value] specifies that the clip's y-center is computed based on the clip/control's value. The [clip.xCenter] and [clip.yCenter] flags are valid only for [clip=Ellipse] or [clip=Pie]. * [clip.start] {string}, indicates the pie's starting angle (degree) relative to the y-axis. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (StartAngle/GetStartAngle()/SetStartAngle(value) method of exontrol.LayerClip). For instance, [clip.start=90], defines the pie's starting angle to 90 degree, or [clip.start=value] defines the pie's starting angle based on the clip/control's value. The [clip.start] and [clip.sweep] flags are valid only for [clip=Pie]. * [clip.sweep] {string}, indicates the pie's sweep angle (degree) relative to clip's starting angle. The expression supports the following keywords: "value" (specifies the clip's value pointed by the clip/control's Value property), "width" or "lwidth" (indicates the width in pixels of the layer), "height" or "lheight" (indicates the height in pixels of the layer) (SweepAngle/GetSweepAngle()/SetSweepAngle(value) method of exontrol.LayerClip). For instance, [clip.sweep=45], defines the pie's sweep angle to 45 degree, or [clip.sweep=value] defines the pie's sweep angle based on the clip/control's value. The [clip.start] and [clip.sweep] flags are valid only for [clip=Pie]. * * @type {string} * @example * * "[key=subitems][drag=sweep],[key=items][drag=sweep],[key=parent][drag=nothing]", defines "subitems", "items" and "parent" portions of the control. "sweep" specifies that once the users drag a layer the control's displaying-angle to show the items is changed. * "[key=subitems][drag=sweep],[key=items][drag=sweep],[key=parent][drag=nothing],rgba(0,0,0,0.25)[key=pointer][clip=Pie][clip.sweep=1][rotateClip=1]", defines "subitems", "items", "parent" and "pointer" sections of the control. The "pointer" layer is shown only when the mouse pointer hovers an item within the control. * "red[drag=rotate],rgba(0,255,0,0.75)[key=green][clip=ellipse][width=width/2][height=height/2][left=width/4][top=height/4][drag=move]" {string}, builds a control using two layers red and 75% green (clipped to an ellispe, which can be moved) */ layers: "[key=subitems][drag=sweep],[key=items][drag=sweep],[key=parent][drag=nothing]", /** * @description The layerAutoSize field specifies the index or the key of the layer that determines the size to display all layers (scaled). * @type {number/string} * @example * * -1 {number}, specifies that no layer is resized, and they are shown as provided * 0 {number}, specifies that all layers are resized and scaled based on the first-layer's picture/image (the layer with the index 0) * "items" {string}, specifies that all layers are resized and scaled based on image/picture of the layer with the key "items" */ layerAutoSize: 0, /** * @description The layerOfValue field specifies the index or the key of the layer whose value determines the control's Value property * @type {number/string} * @example * * -1 {number}, indicates that the control's Value is determined by the last visible layer with [drag] (OnDrag/GetOnDrag()/SetOnDrag(value) methods of exontrol.RadialMenu.Layer) defined. Shortly, the last visible and dragable layer determines the control's Value. * 0 {number}, specifies that the layer with the index 0, defines the control's Value property. * "hour" {string}, specifies that the layer with the key "hour", defines the control's Value property. */ layerOfValue: -1, /** * @description The value field specifies the control's value. The layerOfValue field specifies the index or the key of the layer whose value determines the control's Value property. The value property can represent a rotation-angle or an offset for one or multiple layers. * @type {number} * @example * * 0 {number}, change the control's Value to 0, so it could be a zero-offset or a zero-rotation angle, depending on how the layer interprets the value * (new Date() - Date.Today())/1000/24/60/60 {number}, sets the control's value to current-time as a number between 0 and 1. */ value: null, /** * @description The debug field indicates whether the control displays the layers in debug-mode. * @type {boolean} * @example * * false {boolean}, shows the layers in normal-mode * true {boolean}, shows the layers in debug-mode */ debug: false, /** * @description The showLayers field indicates the only layers to be shown on the control. * * Specifies the layers to display within the control as explained: * * "all" {string}, specifies that all visible layers are shown. The Visible property (of exontrol.RadialMenu.Layer) shows or hides the layer * "" {string}, no layer is shown in the control, no matter of the layer's Visible property * "n1,n2,n3,..." {string}, specifies the list of layers to be shown, no matter of the layer's Visible property, where n1, n2, ... are numbers ( indicating the index of the layer to be shown ) or the layer's key. For instance "0" specifies that just the layer with the index 0 is show, "0,1,4", indicates that just layers with the specified index are displayed. * * @type {string} * @example * * null {null}, specifies that all visible layers are shown (equivalent of "all") * "" {string}, indicates than no layes is shown * "items,parent" {string}, indicates that the control shows just the "items" and "parent" layers/sections */ showLayers: "all", /** * @description The layerDragAny field specifies the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control. Indicates the index or the key of the layer to drag (rotate, move or sweep) once the user clicks anywhere on the control. In case the cursor hovers a dragable layer, the layerDragAny field is ignored. * @type {number/string} * @example * * -1 {number}, specifies that layerDragAny has no effect * 0 {number}, specifies that the layer with the index 0 is dragged, once the user clicks anywhere on the control. * "needle" {string}, specifies that the layer with the key "needle" is dragged, once the user clicks anywhere on the control. */ layerDragAny: -1, /** * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. * * The format of shapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the shape to apply on the UI part as one of the following: * * any of 140 color names any browser supports (such as red, blue, green, ...) * 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 (such as #0000ff which defines a blue background) * hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background) * 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( such as rgb(0,0,255) that defines a blue background) * 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) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background) * 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 (such as hsl(240, 100%, 50%) that defines a blue background) * 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) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background) * a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}') * specifies the name of the field within the exontrol.Shapes.RadialMenu object (while it starts with a lowercase letter, such as subitems which refers to exontrol.Shapes.RadialMenu.subitems shape) * specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape) * * "part", defines the name of the part the shape is applied on (as defined bellow) * * The shapes property supports any of the following parts: * * "subitems" , defines the visual appearance for background/sub-items portion of the control. * "items" , defines the visual appearance for items portion of the control. * "parent" , defines the visual appearance for parent portion of the control. * * @type {string} * @example * * "red(parent)", "#FF0000(parent)", "rgb(255,0,0)(parent)", "rgba(255,0,0,1)(parent)" {string}, shows the parent on a red-square * '{"fillColor":"red","primitive":"Circle"}(parent)' {string}, , shows the parent on a red-circle * "dfsubitems(subitems),dfitems(items),dfparent(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.dfsubitems object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.dfitems object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.dfparent object defines the visual appearance of "parent" portion of the control * "subitems(subitems),items(items),parent(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.subitems object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.items object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.parent object defines the visual appearance of "parent" portion of the control * "xxx(subitems),yyy(items),zzz(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.xxx object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.yyy object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.zzz object defines the visual appearance of "parent" portion of the control */ shapes: "subitems(subitems),items(items),parent(parent)", /** * @description The displayAngle field specifies the angle (degree) to display the items around the radial menu. * @type {number} * @example * * 0 {number}, defines a 0-degree display angle * 90 {number}, defines a 90-degree display angle * 270 {number}, defines a 270-degree (-90) display angle */ displayAngle: 0, /** * @description The minVisibleCount field specifies the minimum number of items being visible on the radial menu. The number should be between 0 and 360 * @type {number} * @example * * 4 {number}, specifies that 4 is the minimum number of items being visible on the radial menu * 8 {number}, specifies that 8 is the minimum number of items being visible on the radial menu */ minVisibleCount: 8, /** * @description The circular field specifies whether the radial-menu is shown as circular instead of elliptical. * @type {boolean} * @example * * false {boolean}, specifies an elliptical radial-menu. * true {boolean}, specifies an circular radial-menu. */ circular: true, /** * @description The subItemsSize field defines the expression / value to determine the size of the "subitems" portion of the control. * * The expression supports the following keywords: * * "value", indicates the radius in pixels, of the radial menu. * * @type {string} * @example * * null {null}, indicates that subItemsSize field is ignored, and so the default value is used * "24" {string}, specifies that the size of "subitems" portion of the control is always 24-pixels * "value/2" {string}, indicates that the size of "subitems" portion is half of the control's radius */ subItemsSize: "24", /** * @description The parentSize field defines the expression / value to determine the size of the "parent" portion of the control. * * The expression supports the following keywords: * * "value", indicates the radius in pixels, of the radial menu. * * @type {string} * @example * * null {null}, indicates that parentSize field is ignored, and so the default value is used * "24" {string}, specifies that the size of "parent" portion of the control is always 24-pixels * "value/2" {string}, indicates that the size of "parent" portion is half of the control's radius */ parentSize: "24", /** * @description The expanded field specifies whether the control shows as expanded or collapsed * @type {boolean} * @example * * false {boolean}, collapses the control. * true {boolean}, expands the control. */ expanded: true, /** * @description The collapseLayers field specifies the list of layers to be shown while the control is collapsed (separated by comma). A string expression that indicates the list of layers to be shown while the control is collapsed. The collapseLayers field has effect only if the control shows as collapsed (expanded property is false) * @type {string} * @example * * null {null}, specifies that the collapseLayers is ignored, so the default value is used instead * "" {string}, indicates than no layes is shown when the control is collapsed * "parent,items" {string}, indicates that the control shows the "parent" adnd "items" layers/sections when the control is collapsed */ collapseLayers: "parent", /** * @description The allowToggleExpand field indicates whether the user can expand or collapse the radial-menu, once the "parent" is clicked * @type {boolean} * @example * * false {boolean}, specifies that the user can't expand or collapse the control while the "parent" portion of the control is clicked * true {boolean}, specifies that the control is expanded or collapsed once the user clicks the "parent" portion of the control */ allowToggleExpand: true, /** * @description The displaySubItems field customizes the item's content (caption, image or arrow) to be displayed on the "sub-items" portion of the control. Specifies an object of {arrow,image,caption,content,imageAlign,imageSize,radial} type that contains information to customize the item's content for "sub-items" portion of the control. * @type {object} */ displaySubItems: { /** * @description The arrow field specifies the ratio to determine where the arrow of items with children is displayed. missing/null/undefined specifies that no arrow is displayed, or a number that specifies ratio to determine where the arrow of items with children is displayed * @type {number} * @example * * null {null}, specifies that no arrow is displayed * 0 {number}, specifies that the arrow is displayed on the outside limit of the "subitems" layer * 0.5 {number}, specifies that the arrow is displayed in the center of the "subitems" layer * 1 {number}, specifies that the arrow is displayed on the inside limit of the "subitems" layer */ arrow: 0.35, /** * @description The arrowColor field indicates the CSS color to display the arrow. missing/null/undefined indicates black arrow, else a CSS color that specifies the CSS color to display the arrow. * @type {string} * @example * * null {null}, indicates a black arrow * "transparent" {string}, specifies a transparent arrow * "white" {string}, specifies white arrow * "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow */ arrowColor: null, /** * @description The arrowSize field defines the size to display the arrow. missing/null/undefined indicates default arrow's size, else a number greater than 1 to specify the size of the arrow. * @type {number} * @example * * null {null}, indicates the default arrow size * 4 {number}, specifies a bigger arrow * 8 {number}, specifies a much-bigger arrow */ arrowSize: null, /** * @description The image field specifies the ratio to determine where the item's image is displayed within the "subitems" layer of the control. The imageSize field specifies the aspect-ratio to display the item's image. missing/null/undefined specifies that no image is displayed, or a number that specifies ratio to determine where the item's image is displayed within the "subitems" layer of the control. * @type {number} * @example * * null {null}, specifies that no image is displayed * 0 {number}, specifies that the item's image is displayed on the outside limit of the "subitems" layer * 0.5 {number}, specifies that the item's image is displayed in the center of the "subitems" layer * 1 {number}, specifies that the item's image is displayed on the inside limit of the "subitems" layer */ image: undefined, /** * @description The caption field specifies the ratio to determine where the item's caption is displayed within the "subitems" layer of the control. missing/null/undefined specifies that no caption is displayed, or a number that specifies ratio to determine where the item's caption is displayed within the "subitems" layer of the control. * @type {number} * @example * * null {null}, specifies that no caption is displayed * 0 {number}, specifies that the item's caption is displayed on the outside limit of the "subitems" layer * 0.5 {number}, specifies that the item's caption is displayed in the center of the "subitems" layer * 1 {number}, specifies that the item's caption is displayed on the inside limit of the "subitems" layer */ caption: undefined, /** * @description The content field specifies the ratio to determine where the item's content (caption and image together) is displayed within the "subitems" layer of the control. The imageSize field specifies the aspect-ratio to display the item's image. The imageAlign field specifies the alignment of the image relative to the item's caption (valid for the content only). missing/null/undefined specifies that no item's content (caption and image together) is displayed, or a number that specifies ratio to determine where the item's content (caption and image together) is displayed within the host portion of the control. * @type {number} * @example * * null {null}, specifies that no item's content (caption and image together) is displayed * 0 {number}, specifies that the item's content (caption and image together) is displayed on the outside limit of the "subitems" layer * 0.5 {number}, specifies that the item's content (caption and image together) is displayed in the center of the "subitems" layer * 1 {number}, specifies that the item's content (caption and image together) is displayed on the inside limit of the "subitems" layer */ content: 0.5, /** * @description The imageAlign field aligns the item's image relative to the item's caption. The imageAlign field is valid only if "content" is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by "content" field. * * The imageAlign field could be any of the following values: * * 0 {number}, the image is left-aligned * 1 {number}, the image is right-aligned * 2 {number}, the image is top-aligned * 3 {number}, the image is bottom-aligned * * relative to the item's caption. The imageAlign property has no effect if the item shows no caption. If the imageAlign property is not specified it uses 2 (the image is top-aligned by default). * * @type {number} * @example * * 0 {number}, the image is left-aligned * 3 {number}, the image is bottom-aligned */ imageAlign: undefined, /** * @description The imageSize field defines the size of the item's image. * * The imageSize could be of one of the following types: * * {null}, Indicates that the item's image is displayed as it is (full-sized). * {number}, Specifies that the item's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the item's image is stretched to giving square, else the item's picture is scaled to fit the giving rectangle. * {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the item's picture to scale or stretch to. * * @type {(null|number|array)} * @example * * null {null}, Indicates that the item's image is displayed as it is (full-sized). * 0 {number}, no image is displayed * 64 {number}, the image is scaled to fit a 64 x 64 rectangle * -64 {number}, the image is strected to a 64 x 64 rectangle * [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client * [-32,-64] {array}, stretches the image to a 32 x 64 rectangle */ imageSize: undefined, /** * @description The radial field rotates the item's content while not zero. * * The exontrol.RadialMenu.DisplayRadialEnum type defines the following values: * * exDisplayRadialFlat (0), no rotation is performed over the item's content * exDisplayRadialRotated (1), the item's content is fully rotated * exDisplayRadialRotated180 (2), the item's content is rotated up to 180 degree * exDisplayRadialRotated270 (3), the item's content is rotated up to 270 degree * exDisplayRadialRotated90 (4), similar with exDisplayRadialRotated, excepts it rotates 90 degree back * * @type {exontrol.RadialMenu.DisplayRadialEnum} * @example * * 0 or exontrol.RadialMenu.DisplayRadialEnum.exDisplayRadialFlat {number}, no rotation is performed over the item's content * 4 or exontrol.RadialMenu.DisplayRadialEnum.exDisplayRadialRotated90 {number}, rotates the items' displaying-angle */ radial: 1 }, /** * @description The displayItems field customizes the item's content (caption, image or arrow) to be displayed on the "items" portion of the control. Specifies an object of {arrow,image,caption,content,imageAlign,imageSize,radial} type that contains information to customize the item's content for "items" portion of the control. * @type {object} */ displayItems: { /** * @description The arrow field specifies the ratio to determine where the arrow of items with children is displayed. missing/null/undefined specifies that no arrow is displayed, or a number that specifies ratio to determine where the arrow of items with children is displayed * @type {number} * @example * * null {null}, specifies that no arrow is displayed * 0 {number}, specifies that the arrow is displayed on the outside limit of the "items" layer * 0.5 {number}, specifies that the arrow is displayed in the center of the "items" layer * 1 {number}, specifies that the arrow is displayed on the inside limit of the "items" layer */ arrow: undefined, /** * @description The arrowColor field indicates the CSS color to display the arrow. missing/null/undefined indicates black arrow, else a CSS color that specifies the CSS color to display the arrow. * @type {string} * @example * * null {null}, indicates a black arrow * "transparent" {string}, specifies a transparent arrow * "white" {string}, specifies white arrow * "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow */ arrowColor: null, /** * @description The arrowSize field defines the size to display the arrow. missing/null/undefined indicates default arrow's size, else a number greater than 1 to specify the size of the arrow. * @type {number} * @example * * null {null}, indicates the default arrow size * 4 {number}, specifies a bigger arrow * 8 {number}, specifies a much-bigger arrow */ arrowSize: null, /** * @description The image field specifies the ratio to determine where the item's image is displayed within the "items" layer of the control. The imageSize field specifies the aspect-ratio to display the item's image. missing/null/undefined specifies that no image is displayed, or a number that specifies ratio to determine where the item's image is displayed within the "items" layer of the control. * @type {number} * @example * * null {null}, specifies that no image is displayed * 0 {number}, specifies that the item's image is displayed on the outside limit of the "items" layer * 0.5 {number}, specifies that the item's image is displayed in the center of the "items" layer * 1 {number}, specifies that the item's image is displayed on the inside limit of the "items" layer */ image: undefined, /** * @description The caption field specifies the ratio to determine where the item's caption is displayed within the "items" layer of the control. missing/null/undefined specifies that no caption is displayed, or a number that specifies ratio to determine where the item's caption is displayed within the "items" layer of the control * @type {number} * @example * * null {null}, specifies that no caption is displayed * 0 {number}, specifies that the item's caption is displayed on the outside limit of the "items" layer * 0.5 {number}, specifies that the item's caption is displayed in the center of the "items" layer * 1 {number}, specifies that the item's caption is displayed on the inside limit of the "items" layer */ caption: undefined, /** * @description The content field specifies the ratio to determine where the item's content (caption and image together) is displayed within the "items" layer of the control. The imageSize field specifies the aspect-ratio to display the item's image. The imageAlign field specifies the alignment of the image relative to the item's caption (valid for the content only). * @type {number} * @example * * null {null}, specifies that no item's content (caption and image together) is displayed * 0 {number}, specifies that the item's content (caption and image together) is displayed on the outside limit of the "items" layer * 0.5 {number}, specifies that the item's content (caption and image together) is displayed in the center of the "items" layer * 1 {number}, specifies that the item's content (caption and image together) is displayed on the inside limit of the "items" layer */ content: 0.35, /** * @description The imageAlign field aligns the item's image relative to the item's caption. The imageAlign field is valid only if "content" is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by "content" field. * * The imageAlign field could be any of the following values: * * 0 {number}, the image is left-aligned * 1 {number}, the image is right-aligned * 2 {number}, the image is top-aligned * 3 {number}, the image is bottom-aligned * * relative to the item's caption. The imageAlign property has no effect if the item shows no caption. If the imageAlign property is not specified it uses 2 (the image is top-aligned by default). * * @type {number} * @example * * 0 {number}, the image is left-aligned * 3 {number}, the image is bottom-aligned */ imageAlign: 2 /*top*/, /** * @description The imageSize field defines the size of the item's image. * * The imageSize could be of one of the following types: * * {null}, Indicates that the item's image is displayed as it is (full-sized). * {number}, Specifies that the item's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the item's image is stretched to giving square, else the item's picture is scaled to fit the giving rectangle. * {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the item's picture to scale or stretch to. * * @type {(null|number|array)} * @example * * null {null}, Indicates that the item's image is displayed as it is (full-sized). * 0 {number}, no image is displayed * 64 {number}, the image is scaled to fit a 64 x 64 rectangle * -64 {number}, the image is strected to a 64 x 64 rectangle * [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client * [-32,-64] {array}, stretches the image to a 32 x 64 rectangle */ imageSize: undefined, /** * @description The radial field rotates the item's content while not zero. * * The exontrol.RadialMenu.DisplayRadialEnum type defines the following values: * * exDisplayRadialFlat (0), no rotation is performed over the item's content * exDisplayRadialRotated (1), the item's content is fully rotated * exDisplayRadialRotated180 (2), the item's content is rotated up to 180 degree * exDisplayRadialRotated270 (3), the item's content is rotated up to 270 degree * exDisplayRadialRotated90 (4), similar with exDisplayRadialRotated, excepts it rotates 90 degree back * * @type {exontrol.RadialMenu.DisplayRadialEnum} * @example * * 0 or exontrol.RadialMenu.DisplayRadialEnum.exDisplayRadialFlat {number}, no rotation is performed over the item's content * 4 or exontrol.RadialMenu.DisplayRadialEnum.exDisplayRadialRotated90 {number}, rotates the items' displaying-angle */ radial: undefined }, /** * @description The displayParent field customizes the item's content (caption, image) to be displayed on the "parent" portion of the control. Specifies an object of {imageAlign,imageSize,visible,image,caption,content} type that contains information to customize the item's content for "parent" portion of the control * @type {object} */ displayParent: { /** * @description The imageAlign field aligns the item's image relative to the item's caption. The imageAlign field is valid only if "content" is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by "content" field. * * The imageAlign field could be any of the following values: * * 0 {number}, the image is left-aligned * 1 {number}, the image is right-aligned * 2 {number}, the image is top-aligned * 3 {number}, the image is bottom-aligned * * relative to the item's caption. The imageAlign property has no effect if the item shows no caption. If the imageAlign property is not specified it uses 2 (the image is top-aligned by default). * * @type {number} * @example * * 0 {number}, the image is left-aligned * 3 {number}, the image is bottom-aligned */ imageAlign: undefined, /** * @description The imageSize field defines the size of the item's image. * * The imageSize could be of one of the following types: * * {null}, Indicates that the item's image is displayed as it is (full-sized). * {number}, Specifies that the item's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the item's image is stretched to giving square, else the item's picture is scaled to fit the giving rectangle. * {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the item's picture to scale or stretch to. * * @type {(null|number|array)} * @example * * null {null}, Indicates that the item's image is displayed as it is (full-sized). * 0 {number}, no image is displayed * 64 {number}, the image is scaled to fit a 64 x 64 rectangle * -64 {number}, the image is strected to a 64 x 64 rectangle * [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client * [-32,-64] {array}, stretches the image to a 32 x 64 rectangle */ imageSize: [24,24], /** * @description The visible field defines whether the caption or/and image of the item are being shown * * The visible field could be one of the following values: * * 0 {number}, no caption or image is shown * 1 {number}, the item's caption is included * 2 {number}, the item's image is included * 3=1|2 {number}, indicates that caption and image of the item are both shown * 16 {number}, indicates that the only item's image or item's caption is displayed (by default) (@since 2.2) * * @type {number} * @example * * 0 {number}, displays no caption or image * 3 {number}, displays the item's caption and image */ visible: 0x10, /** * @description The image field specifies the ratio to determine where the item's image is displayed on the "parent" layer of the control. The imageSize field specifies the aspect-ratio to display the item's image. * @type {number} * @example * * null {null}, specifies that no image is displayed * 0 {number}, specifies that the item's image is displayed on the outside limit of the "parent" layer * 0.5 {number}, specifies that the item's image is displayed in the center of the "parent" layer * 1 {number}, specifies that the item's image is displayed on the inside limit of the "parent" layer * * @since 2.2 */ image: 1, /** * @description The caption field specifies the ratio to determine where the item's caption is displayed on the "parent" layer of the control. * @type {number} * @example * * null {null}, specifies that no caption is displayed * 0 {number}, specifies that the item's caption is displayed on the outside limit of the "parent" layer * 0.5 {number}, specifies that the item's caption is displayed in the center of the "parent" layer * 1 {number}, specifies that the item's caption is displayed on the inside limit of the "parent" layer * * @since 2.2 */ caption: 1, /** * @description The content field specifies the ratio to determine where the item's content (caption and image together) is displayed on the "parent" layer of the control. The imageSize field specifies the aspect-ratio to display the item's image. The imageAlign field specifies the alignment of the image relative to the item's caption (valid for the content only). * @type {number} * @example * * null {null}, specifies that no item's content (caption and image together) is displayed * 0 {number}, specifies that the item's content (caption and image together) is displayed on the outside limit of the "parent" layer * 0.5 {number}, specifies that the item's content (caption and image together) is displayed in the center of the "parent" layer * 1 {number}, specifies that the item's content (caption and image together) is displayed on the inside limit of the "parent" layer * * @since 2.2 */ content: undefined }, /** * @description The items field defines the items of the radial-menu from a string-representation. * * The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags): * * "item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])" * * The string-representation supports the following flags: * * [key] {string}, specifies the item's key (Key/GetKey()/SetKey(value) methods of exontrol.RadialMenu.Item). If missing, the item's plain-caption (caption with no HTML tags) is considered as item's key. You can get an item giving its key using Root.Item(key) method. For instance, [key=color], change the item's key to "color" * [vis]/[hid] {number}, shows or hides the item (Visible/GetVisible()/SetVisible(value) methods of exontrol.RadialMenu.Item). For instance, [vis=0] or [hid], hides the item, while [vis=1] shows the item * [dis] {number}, enables or disables the item (Enabled/GetEnabled()/SetEnabled(value) methods of exontrol.RadialMenu.Item). For instance, [dis=0] or [dis], disables the item, while [dis=1] enables the item * [pos] {number}, changes the item's position (0-based) (Position/GetPosition()/SetPosition(value) methods of exontrol.RadialMenu.Item). For instance, [pos=0] indicates that the item should be displayed first * [img] {string}, assigns a image/picture to the item (Image/GetImage()/SetImage(value) methods of exontrol.RadialMenu.Item). For instance, [img=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the item's image to be displayed on the "sub-items" portion of the control. * [color] {string}, specifies the item's background color (Color/GetColor()/SetColor(value) methods of exontrol.RadialMenu.Item). For instance, [color=red] or [color=rgba(255,0,0,1)] shows the item's background color in red. The [color] flag is applied for "items" portion of the control. You can use the [scolor] flag to define the item's background color for "sub-items" portion of the control. * [scap] {string}, specifies the item's caption to be displayed by "sub-items" portion only (SubCaption/GetSubCaption()/SetSubCaption(value) methods of exontrol.RadialMenu.Item). For instance, [scap=Exit] displays Exit in bold. * [simg] {string}, specifies the item's image to be shown under "sub-items" section of the control (SubImage/GetSubImage()/SetSubImage(value) methods of exontrol.RadialMenu.Item). For instance, [simg=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [img] flag to define the item's image to be displayed on the "items" portion of the control. * [scolor] {string}, specifies the item's background color to be displayed by "sub-items" portion only (SubColor/GetSubColor()/SetSubColor(value) methods of exontrol.RadialMenu.Item). For instance, [scolor=red] or [scolor=rgba(255,0,0,1)] shows the item's background color in red. The [scolor] flag is applied for "sub-items" portion of the control. You can use the [color] flag to define the item's background color for "items" portion of the control. * * @type {string} * @example * * "" {string}, clears the items collection * "A(A1,A2,A3),B(B1,B2(B2.1,B2.2),B3)" {string}, defines the item "A" with three child-items "A1", "A2" and "A2", and item "B" with child-items "B1", "B2", and "B3", also defines the "B2.1" and "B2.2" as children of item "B2" * "A[img=logo][hid],B[dis]" {string}, defines the item "A" hidden and with the image "logo" and item "B" as disabled. */ items: null, /** * @description The sweepOnSelect field specifies whether browsed-items are arranged around the selected radial-item * @type {boolean} * @example * * false {boolean}, specifies that the browsed-items are not arranged around the selected radial-item * true {boolean}, specifies that the browsed-items are arranged around the selected radial-item */ sweepOnSelect: true, /** * @description The highlightAny field indicates whether any pie of the radial-menu is highlighted once the cursor hovers it, or just the pies that host items. * @type {boolean} * @example * * false {boolean}, specifies that only items are highlighted * true {boolean}, indicates that any pie gets highlighted once the cursor hovers it */ highlightAny: true, /** * @description The browseItem field indicates the item being browsed. Specifies the key or the item to be browsed (only visible items can be browsed). * @type {any} * * @example * * "al" {string}, specifies that the item with the key "al" should be browsed. */ browseItem: null, /** * @description The parent field specifies the custom caption and image to be displayed on the "parent" section, as an object of {caption,image} type (if parent is not specified or the caption or image is missing the caption, image of the browsed item is displayed instead) * @type {object} * * @example * * {caption: "p"} {object}, specifies that the "parent" section, always display "p" caption, and the image of the browsed item (if any) * {image: "al"} {object}, specifies that the "parent" section, always display the image "al", and the caption of the browsed item (if any) * {caption: "p", image: ""} {object}, specifies that the "parent" section, always display the caption "p", without any image * * @since 2.4 */ parent: null } /////////////////////////////////////////////////////////// (exontrol.Shapes.RadialMenu) // // The exontrol.Shapes.RadialMenu namespace provides support to customize the visual appearance of different parts of the exontrol.RadialMenu object. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Shapes.RadialMenu namespace provides support to customize the visual appearance of different parts of the exontrol.RadialMenu object. */ exontrol.Shapes.RadialMenu = exontrol.DfO( exontrol.Shapes.RadialMenu /*inherits the default exontrol.Shapes.RadialMenu like dfsubitems, ... */, { subitems: { /** * @description The normal field includes definitions to draw the object in normal state. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background on normal state. */ normal: { gridLineColor: "rgba(255,255,255,0.95)", gridLineSize: 2, frameColor: "gray", fillColor: "rgba(0,0,0,0.05)", pad: -4, shadow: { color: "black", blur: 4, }, primitive: "Ellipse" }, /** * @description The hover field includes definitions to draw the object while cursor hovers it. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background while cursor hovers it. */ hover: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.25)", primitive: "Pie" }, /** * @description The hover field includes definitions to draw the object while the user clicks it. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background while the user clicks it. */ click: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.5)", primitive: "Pie" }, /** * @description The disabled field includes definitions to draw the object in disabled state. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background on disabled state. * @since 2.2 */ disabled: { opacity: 0.5 } }, items: { /** * @description The normal field includes definitions to draw the object in normal state. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background on normal state. */ normal: { gridLineColor: "rgba(0,0,0,0.25)", gridLineSize: 1, fillColor: "rgba(255,255,255,0.10)", frameColor: "gray", pad: -4, primitive: "Ellipse" }, /** * @description The hover field includes definitions to draw the object while cursor hovers it. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background while cursor hovers it. */ hover: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.25)", primitive: "Pie" }, /** * @description The hover field includes definitions to draw the object while the user clicks it. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background while the user clicks it. */ click: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.5)", primitive: "Pie" }, /** * @description The disabled field includes definitions to draw the object in disabled state. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background on disabled state. * @since 2.2 */ disabled: { opacity: 0.5 } }, parent: { /** * @description The normal field includes definitions to draw the object in normal state. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background on normal state. */ normal: { frameColor: "gray", fillColor: "rgba(0,0,0,0.10)", pad: -4, shadow: { color: "black", blur: 4, }, primitive: "Ellipse" }, /** * @description The hover field includes definitions to draw the object while cursor hovers it. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background while cursor hovers it. */ hover: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.25)", pad: -4, shadow: { color: "black", blur: 4, }, primitive: "Ellipse" }, /** * @description The hover field includes definitions to draw the object while the user clicks it. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background while the user clicks it. */ click: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.5)", pad: -4, shadow: { color: "black", blur: 4, }, primitive: "Ellipse" }, /** * @description The disabled field includes definitions to draw the object in disabled state. * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background on disabled state. * @since 2.2 */ disabled: { opacity: 0.5 } } }); /** * @description The exontrol.helpItemOptions structure contains options that an item of exontrol.RadialMenu control can handle */ exontrol.helpItemOptions = { /** * @description The visible field indicates whether the item (and all its descendent items) is visible or hidden. * @type {boolean} Specifies whether the item (and all its descendants item) is visible or hidden. * @example * * false {boolean}, hides the item (including all its descendent items) * true {boolean}, shows the item */ visible: true, /** * @description The enabled field indicates whether the item is enabled or disabled. * @type {boolean} Specifies whether the item is enabled or disabled. * @example * * false {boolean}, disables the item (including all its descendent items) * true {boolean}, enables the item */ enabled: true, /** * @description The key field specifies the key associated with the item. * @type {string} Specifies the key associated with the item. If no key is provided, the item's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as , and so on * @example * * "logo" {string}, defines the item with the giving key (logo). You can use the Root.Item("logo") method to request the item giving its key. */ key: null, /** * @description The caption field defines the item's caption. It supports ex-HTML format, and it is applied to "items" section only. * @type {string} Specifies the ex-HTML caption a item displays. * @example * * null {null}, indicates no caption * "caption" {string}, declares a plain-caption * "text" {string}, displays the text in bold * "logo" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add() method */ caption: null, /** * @description The image field specifies the name of the image/picture the item displays ("items" section only). The image can be added using the exontrol.HTMLPicture.Add() method * @type {string} Indicates the name of the image/picture the item displays. * @example * * null {null}, indicates no image * "logo" {string}, displays the "logo" image */ image: null, /** * @description The color field defines the item's background color to be shown on the "items" portion of the control. * @type {string} Indicates the CSS color to show within the "items" portion of the control. * @example * * null {null}, indicates no color * "red" {string}, defines a red-pie * "rgb(255,0,0)" {string}, defines a red-pie * "rgba(255,0,0,0.5)" {string}, defines a 50% red-pie */ color: null, /** * @description The subCaption field defines the item's caption (ex-HTML format, shown under the "sub-items" portion only) * @type {string} Specifies the item's caption to be shown on "sub-items" portion only * @example * * null {null}, indicates no caption * "caption" {string}, declares a plain-caption * "text" {string}, displays the text in bold * "logo" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add() method */ subCaption: null, /** * @description The subImage field defines the item's image to be displayed by "sub-items" section only. The image can be added using the exontrol.HTMLPicture.Add() method * @type {string} Indicates the name of the image/picture the item displays. * @example * * null {null}, indicates no image * "logo" {string}, displays the "logo" image */ subImage: null, /** * @description The subColor field defines the item's background color to be shown on the "sub-items" portion of the control. * @type {string} Indicates the CSS color to show within the "sub-items" portion of the control. * @example * * null {null}, indicates no color * "red" {string}, defines a red-pie * "rgb(255,0,0)" {string}, defines a red-pie * "rgba(255,0,0,0.5)" {string}, defines a 50% red-pie */ subColor: null, /** * @description The parent field retrieves the parent of the item * @type {Item} * @since 2.4 */ parent: null } /** * @description The exontrol.helpGridLineShape namespace provides additional-documentation for exontrol.S objects. */ exontrol.helpGridLineShape = { /** * @description The shape field includes definitions to draw shapes. * @type {object} An object of exontrol.Def.Shape type. */ shape: { /** * @description The gridLineColor field defines the color to show the object's grid lines. The control's grid-lines are shown between control' pies. * @type {string} Indicates the CSS color to show the object's grid lines. The primitive field defines type of the object's grid lines * @example * * null {null}, specifies no grid-lines * "transparent" or "rgba(0,0,0,0)" {string}, defines a transparent grid-lines * "red" {string}, defines a red-grid-lines * "rgb(255,0,0)" {string}, defines a red-grid-lines * "rgba(255,0,0,0.5)" {string}, defines a 50% red-grid-lines */ gridLineColor: null, /** * @description The gridLineSize field defines size of the object's grid lines. * @type {number} Defines size of the object's grid lines. * @example * * null {null}, draws the grid-lines, only if the gridLineColor is defined * 0 {number}, shows no grid-lines * 4 {number}, defines a 4-pixels grid-lines */ gridLineSize: null, /** * @description The gridLineDash field defines style of the object's grid lines. * @type {array} An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @example * * null {null}, defines a solid grid-lines * [] {array}, indicates a solid grid-lines * 2 {number}, will become [2, 2, ...] * [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...] */ gridLineDash: null, /** * @description The gridLineJoin field determines how two connecting segments into the object's grid lines are joined together. * @type {string} There are three possible values for this property as follows: * * "round", rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width. * "bevel", fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment. * "miter", connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. * * @example * * null {null}, defines a "miter" join * "round" {string}, rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. */ gridLineJoin: null, /** * @description The gridLineCap field determines how the end points of every line into the object's grid lines are drawn * @type {string} There are three possible values for this property as follows: * * "butt", the ends of lines are squared off at the endpoints. * "round", the ends of lines are rounded * "square", the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness. * * @example * * null {null}, indicates "but" style * "round" {string}, the ends of lines are rounded */ gridLineCap: null } }