primitives.js
Summary
| primitives.js | |
| Functions | |
| primitives. | Indicates whether the specified string is null or an Empty string. |
| primitives. | Returns hash code for specified string value. |
| primitives. | This method assigns HTML element attributes only if one of them does not match its current value. |
| primitives. | This method assigns HTML element style attributes only if one of them does not match its current value. |
| primitives. | This method uses various approaches used in different browsers to stop event propagation. |
| primitives. | This method searches array for specified item and returns index (or -1 if not found) Parameters: vector - An array through which to search. |
| primitives. | Indicates whether the browser supports SVG graphics. |
| primitives. | Indicates whether the browser supports VML graphics. |
| primitives. | Indicates whether the browser supports HTML Canvas graphics. |
| primitives. | Converts color string into HEX color string. |
| primitives. | Converts color string into HTML color name string or return hex color string. |
| primitives. | Gets red value of HEX color string. |
| primitives. | Gets green value of HEX color string. |
| primitives. | Gets blue value of HEX color string. |
| primitives. | Calculates before opacity color value producing color you need after applying opacity. |
| primitives. | This function calculates contrast between base color and two optional first and second colors and returns optional color having highest contrast. |
| primitives. | This function calculates luminosity between two HEX string colors. |
| Enumerations | |
| primitives. | Defines item placement in tree relative to parent. |
| primitives. | Defines redraw mode of diagram. |
| primitives. | Defines label orientation type. |
| primitives. | Defines the display mode for items between root item of diagram and selected items. |
| primitives. | This enumeration is used as option in arguments of rendering events. |
| primitives. | Defines element placement relative to rectangular area. |
| primitives. | Defines diagram auto fit mode. |
| primitives. | Defines diagram orientation type. |
| primitives. | Defines diagram item type. |
| primitives. | Defines text label alignment inside text box boundaries. |
| primitives. | Graphics type. |
| primitives. | Defines option state. |
| primitives. | Defines diagram connectors style for dot and line elements. |
| primitives. | Named colors. |
| primitives. | Defines children placement shape. |
| primitives. | Defines text label alignment inside text box boundaries. |
| primitives. | Defines nodes visibility mode. |
| primitives. | Event details class. |
| Properties | |
| oldContext | Reference to associated previous item in rootItem hierarchy. |
| context | Reference to associated new item in rootItem hierarchy. |
| parentItem | Reference parent item of item in context. |
| position | Absolute item position on diagram. |
| name | Relative object name. |
| cancel | Allows cancelation of coupled event processing. |
| primitives. | Rendering event details class. |
| Properties | |
| element | jQuery selector referencing template’s root element. |
| context | Reference to itemConfig. |
| templateName | This is template name used to render this item. |
| renderingMode | This option indicates current template state. |
| isCursor | Rendered item is cursor. |
| isSelected | Rendered item is selected. |
| primitives. | Class represents pair of x and y coordinates that defines a point in 2D plane. |
| Properties | |
| x | The x coordinate. |
| y | The y coordinate. |
| Functions | |
| distanceTo | Returns distance to point. |
| toString | Returns rectangle location in form of CSS style string. |
| primitives. | Class describes the width, height and location of rectangle. |
| Properties | |
| x | The location x coordinate. |
| y | The location y coordinate. |
| width | The width of rectangle. |
| height | The height of rectangle. |
| Functions | |
| left | Gets the x-axis value of the left side of the rectangle. |
| top | Gets the y-axis value of the top side of the rectangle. |
| right | Gets the x-axis value of the right side of the rectangle. |
| bottom | Gets the y-axis value of the bottom of the rectangle. |
| verticalCenter | Gets the y-axis value of the center point of the rectangle. |
| horizontalCenter | Gets the x-axis value of the center point of the rectangle. |
| isEmpty | Gets the value that indicates whether the rectangle is the Empty rectangle. |
| offset | Expands the rectangle by using specified value in all directions. |
| translate | Moves the rectangle to by the specified horizontal and vertical amounts. |
| invert | Inverts rectangle. |
| contains | Indicates whether the rectangle contains the specified point. |
| cropByRect | Crops the rectangle by the boundaries of specified rectangle. |
| overlaps | Returns true if the rectangle overlaps specified rectangle. |
| addRect | Expands the current rectangle to contain specified rectangle. |
| getCSS | Returns rectangle location and size in form of CSS style object. |
| toString | Returns rectangle location and size in form of CSS style string. |
| primitives. | Class describes the size of an object. |
| Properties | |
| width | The value that specifies the width of the size class. |
| height | The value that specifies the height of the size class. |
| Functions | |
| invert | Swaps width and height. |
| primitives. | Class describes the thickness of a frame around rectangle. |
| Properties | |
| left | The thickness for the left side of the rectangle. |
| top | The thickness for the upper side of the rectangle. |
| right | The thickness for the right side of the rectangle. |
| bottom | The thickness for the bottom side of the rectangle. |
| Functions | |
| isEmpty | Gets the value that indicates whether the thickness is the Empty. |
| toString | Returns thickness in form of CSS style string. |
| primitives. | Text options class. |
| Properties | |
| graphicsType | Preferable graphics type. |
| actualGraphicsType | Actual graphics type. |
| textDirection | Direction style. |
| text | Text |
| verticalAlignment | Vertical alignment. |
| horizontalAlignment | Horizontal alignment. |
| fontSize | Font size. |
| fontFamily | Font family. |
| color | Color. |
| Font weight. | Font weight: normal | bold |
| Font style. | Font style: normal | italic |
| Functions | |
| update | Makes full redraw of text widget contents reevaluating all options. |
| primitives. | Callout options class. |
| Properties | |
| graphicsType | Preferable graphics type. |
| actualGraphicsType | Actual graphics type. |
| pointerPlacement | Defines pointer connection side or corner. |
| position | Defines callout body position. |
| snapPoint | Callout snap point. |
| cornerRadius | Body corner radius in percents or pixels. |
| offset | Body rectangle offset. |
| opacity | Background color opacity. |
| lineWidth | Border line width. |
| pointerWidth | Pointer base width in percents or pixels. |
| borderColor | Border Color. |
| fillColor | Fill Color. |
| Functions | |
| update | Makes full redraw of callout widget contents reevaluating all options. |
| primitives. | User defines item template class. |
| Properties | |
| name | Every template should have unique name. |
| itemSize | This is item size of type primitives.common.Size, templates should have fixed size, so orgDiagram uses this value in order to layout items properly. |
| itemBorderWidth | Item template border width. |
| itemTemplate | Item template, if it is null then default item template is used. |
| minimizedItemSize | This is size dot used to display item in minimized form, type of primitives.common.Size. |
| highlightPadding | This padding around item defines relative size of highlight object, ts type is primitives.common.Thickness. |
| highlightBorderWidth | Highlight border width. |
| highlightTemplate | Highlight template, if it is null then default highlight template is used. |
| cursorPadding | This padding around item defines relative size of cursor object, its type is primitives.common.Thickness. |
| cursorBorderWidth | Cursor border width. |
| cursorTemplate | Cursor template, if it is null then default cursor template is used. |
| primitives. | Options class. |
| Properties | |
| name | It should be unique string name of the button. |
| icon | Name of icon used in jQuery UI. |
| text | Whether to show any text -when set to false (display no text), icon must be enabled, otherwise it’ll be ignored. |
| label | Text to show on the button. |
| size | Size of the button of type primitives.common.Size. |
| primitives. | orgDiagram options class. |
| Properties | |
| graphicsType | Preferable graphics type. |
| actualGraphicsType | Actual graphics type. |
| pageFitMode | Defines the way diagram is fit into page. |
| orientationType | Diagram orientation. |
| verticalAlignment | Defines items vertical alignment relative to each other within one level of hierarchy. |
| horizontalAlignment | Defines items horizontal alignment relative to their parent. |
| connectorType | Defines connector lines style for dot and line elements. |
| emptyDiagramMessage | Empty message in order to avoid blank screen. |
| rootItem | This is the root of items hierarchy. |
| highlightItem | Defines item having highlight in diagram. |
| cursorItem | Defines item having cursor in diagram. |
| selectedItems | Defines array of selected items in form of references to items in rootItem hierarchy. |
| hasSelectorCheckbox | This option controls selection check boxes visibility. |
| selectionPathMode | Defines the way items between rootItem and selectedItems displayed in diagram. |
| minimalVisibility | Defines the way diagram collapses items when it has not enough space to fit all items. |
| templates | Custom user templates collection. |
| defaultTemplateName | This is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined. |
| hasButtons | This option controls user buttons visibility. |
| buttons | Custom user buttons displayed on right side of item. |
| Events | |
| onHighlightChanging | Notifies about changing highlight item primitives.orgdiagram.Config.highlightItem in diagram. |
| onHighlightChanged | Notifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram. |
| onCursorChanging | Notifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram. |
| onCursorChanged | Notifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram . |
| onSelectionChanging | Notifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems. |
| onSelectionChanged | Notifies about changes in collection of primitives.orgdiagram.Config.selectedItems. |
| onButtonClick | Notifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons. |
| onMouseClick | On mouse click event. |
| onItemRender | If user defined custom template for item then this method is called to populate it with context data. |
| onHighlightRender | If user defined custom highlight template for item template then this method is called to populate it with context data. |
| onCursorRender | If user defined custom cursor template for item template then this method is called to populate it with context data. |
| Properties | |
| normalLevelShift | Defines interval after level of items in diagram having items in normal state. |
| dotLevelShift | Defines interval after level of items in diagram having items in dot state. |
| lineLevelShift | Defines interval after level of items in diagram having items in line state. |
| normalItemsInterval | Defines interval between items at the same level in diagram having items in normal state. |
| dotItemsInterval | Defines interval between items at the same level in diagram having items in dot state. |
| lineItemsInterval | Defines interval between items at the same level in diagram having items in line state. |
| cousinsIntervalMultiplier | Use this interval multiplier for visual children grouping having distinct parents. |
| Functions | |
| update | Makes full redraw of diagram contents reevaluating all options. |
| Properties | |
| itemTitleFirstFontColor | This property customizes default template title font color. |
| itemTitleSecondFontColor | Default template title second font color. |
| selectCheckBoxLabel | Select check box label. |
| linesColor | Connectors lines color. |
| linesWidth | Connectors lines width. |
| showCallout | This option controls callout visibility for dotted items. |
| defaultCalloutTemplateName | This is template name used to render callouts for dotted items. |
| calloutfillColor | Annotation callout fill color. |
| calloutBorderColor | Annotation callout border color. |
| calloutOffset | Annotation callout offset. |
| calloutCornerRadius | Annotation callout corner radius. |
| calloutPointerWidth | Annotation callout pointer base width. |
| calloutLineWidth | Annotation callout border line width. |
| calloutOpacity | Annotation callout opacity. |
| childrenPlacementType | Defines children placement form. |
| leavesPlacementType | Defines leaves placement form. |
| maximumColumnsInMatrix | Maximum number of columns for matrix leaves layout. |
| buttonsPanelSize | User buttons panel size. |
| groupTitlePanelSize | Group title panel size. |
| checkBoxPanelSize | Selection check box panel size. |
| minimumScale | Minimum CSS3 scale transform. |
| maximumScale | Maximum CSS3 scale transform. |
| showLabels | This option controls items labels visibility. |
| labelSize | Defines label size. |
| labelOffset | Defines label offset from dot in pixels. |
| labelOrientation | Defines label orientation. |
| labelPlacement | Defines label placement relative to its dot. |
| labelFontSize | Label font size. |
| labelFontFamily | Label font family. |
| labelColor | Label color. |
| labelFontWeight | Font weight: normal | bold |
| labelFontStyle | Font style: normal | italic |
| enablePanning | Enable chart panning with mouse drag & drop for desktop browsers. |
| primitives. | Defines item in diagram hierarchy. |
| Properties | |
| title | Default template title property. |
| description | Default template description element. |
| image | Url to image. |
| itemTitleColor | Default template title background color. |
| groupTitle | Auxiliary group title property. |
| groupTitleColor | Group title background color. |
| isVisible | If it is true then item is shown and selectable in hierarchy. |
| hasSelectorCheckbox | If it is true then selection check box is shown for the item. |
| hasButtons | This option controls buttons panel visibility. |
| itemType | This property defines how item should be shown. |
| adviserPlacementType | In case of item types primitives.orgdiagram.ItemType.Assistant and primitives.orgdiagram.ItemType.Adviser this option defines item placement side relative to parent. |
| childrenPlacementType | Defines children placement form. |
| items | This is collection of children items. |
| templateName | This is template name used to render this item. |
| showCallout | This option controls items callout visibility. |
| calloutTemplateName | This is template name used to render callout for dotted item. |
| label | Items label text. |
| showLabel | This option controls items label visibility. |
| labelSize | Defines label size. |
| labelOrientation | Defines label orientation. |
| labelPlacement | Defines label placement relative to the item. |
primitives.common.attr
primitives.common.attr = function ( element, attr )
This method assigns HTML element attributes only if one of them does not match its current value. This function helps to reduce number of HTML page layout invalidations.
Parameters
| element | jQuery selector of element to be updated. |
| attr | object containg attributes and new values. |
primitives.common.css
primitives.common.css = function ( element, attr )
This method assigns HTML element style attributes only if one of them does not match its current value. This function helps to reduce number of HTML page layout invalidations.
Parameters
| element | jQuery selector of element to be updated. |
| attr | object containing style attributes. |
primitives.common.highestContrast
primitives.common.highestContrast = function ( baseColor, firstColor, secondColor )
This function calculates contrast between base color and two optional first and second colors and returns optional color having highest contrast.
Parameters
| baseColor | Base color to compare with. |
| firstColor | First color. |
| secondColor | Second color. |
Returns
Color value.
primitives.orgdiagram.UpdateMode
Defines redraw mode of diagram.
| Recreate | Force widget to make a full redraw. |
| Refresh | This update mode is optimized for widget fast redraw caused by resize or changes of next options: primitives.orgdiagram.Config.rootItem, primitives.orgdiagram.Config.cursorItem or primitives.orgdiagram.Config.selectedItems. |
| PositonHighlight | This update mode redraws only primitives.orgdiagram.Config.highlightItem. |
See Also
primitives.common.RenderingMode
This enumeration is used as option in arguments of rendering events. It helps to tell template initialization stage, for example user can widgitize some parts of template on create and update and refresh them in template update stage.
| Create | Template is just created. |
| Update | Template is reused and update needed. |
primitives.orgdiagram.PageFitMode
Defines diagram auto fit mode.
primitives.orgdiagram.ItemType
Defines diagram item type.
primitives.ocommon.GraphicsType
Graphics type.
primitives.orgdiagram.EventArgs
Event details class.
Summary
| Properties | |
| oldContext | Reference to associated previous item in rootItem hierarchy. |
| context | Reference to associated new item in rootItem hierarchy. |
| parentItem | Reference parent item of item in context. |
| position | Absolute item position on diagram. |
| name | Relative object name. |
| cancel | Allows cancelation of coupled event processing. |
cancel
Allows cancelation of coupled event processing. This option allows to cancel layout update and subsequent primitives.orgdiagram.Config.onCursorChanged event in handler of primitives.orgdiagram.Config.onCursorChanging event.
primitives.common.RenderEventArgs
Rendering event details class.
Summary
| Properties | |
| element | jQuery selector referencing template’s root element. |
| context | Reference to itemConfig. |
| templateName | This is template name used to render this item. |
| renderingMode | This option indicates current template state. |
| isCursor | Rendered item is cursor. |
| isSelected | Rendered item is selected. |
templateName
This is template name used to render this item.
See Also
primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates collection property.
renderingMode
primitives.common.Point
Class represents pair of x and y coordinates that defines a point in 2D plane.
Parameters
| point | primitives.common.Point object. |
Parameters
| x | X coordinate of 2D point. |
| y | Y coordinate of 2D point. |
Summary
| Properties | |
| x | The x coordinate. |
| y | The y coordinate. |
| Functions | |
| distanceTo | Returns distance to point. |
| toString | Returns rectangle location in form of CSS style string. |
distanceTo
primitives.common.Point.prototype.distanceTo = function ( arg0, arg1 )
Returns distance to point.
Parameters
| point | primitives.common.Point object. |
Parameters
| x | X coordinate of 2D point. |
| y | Y coordinate of 2D point. |
primitives.common.Rect
Class describes the width, height and location of rectangle.
Parameters
| rect | Copy constructor. It takes as a parameter copy of primitives.common.Rect object. |
Parameters
| pointTopLeft | Top left point primitives.common.Point object. |
| pointBottomRight | Bottom right point primitives.common.Point object. |
Parameters
| x | The x coordinate of top left corner. |
| y | The y coordinate of top left corner. |
| width | Rect width. |
| height | Rect height. |
Summary
| Properties | |
| x | The location x coordinate. |
| y | The location y coordinate. |
| width | The width of rectangle. |
| height | The height of rectangle. |
| Functions | |
| left | Gets the x-axis value of the left side of the rectangle. |
| top | Gets the y-axis value of the top side of the rectangle. |
| right | Gets the x-axis value of the right side of the rectangle. |
| bottom | Gets the y-axis value of the bottom of the rectangle. |
| verticalCenter | Gets the y-axis value of the center point of the rectangle. |
| horizontalCenter | Gets the x-axis value of the center point of the rectangle. |
| isEmpty | Gets the value that indicates whether the rectangle is the Empty rectangle. |
| offset | Expands the rectangle by using specified value in all directions. |
| translate | Moves the rectangle to by the specified horizontal and vertical amounts. |
| invert | Inverts rectangle. |
| contains | Indicates whether the rectangle contains the specified point. |
| cropByRect | Crops the rectangle by the boundaries of specified rectangle. |
| overlaps | Returns true if the rectangle overlaps specified rectangle. |
| addRect | Expands the current rectangle to contain specified rectangle. |
| getCSS | Returns rectangle location and size in form of CSS style object. |
| toString | Returns rectangle location and size in form of CSS style string. |
offset
primitives.common.Rect.prototype.offset = function ( arg0, arg1, arg2, arg3 )
Expands the rectangle by using specified value in all directions.
Parameters
| value | The amount by which to expand or shrink the sides of the rectangle. |
Parameters
| left | The amount by which to expand or shrink the left side of the rectangle. |
| top | The amount by which to expand or shrink the top side of the rectangle. |
| right | The amount by which to expand or shrink the right side of the rectangle. |
| bottom | The amount by which to expand or shrink the bottom side of the rectangle. |
contains
primitives.common.Rect.prototype.contains = function ( arg0, arg1 )
Indicates whether the rectangle contains the specified point.
Parameters
| point | The point to check. |
Parameters
| x | The x coordinate of the point to check. |
| y | The y coordinate of the point to check. |
Returns
true if the rectangle contains the specified point; otherwise, false.
addRect
primitives.common.Rect.prototype.addRect = function ( arg0, arg1, arg2, arg3 )
Expands the current rectangle to contain specified rectangle.
Parameters
| rect | The rectangle to contain. |
Parameters
| x | The x coordinate of the point to contain. |
| y | The y coordinate of the point to contain. |
Parameters
| x | The x coordinate of top left corner. |
| y | The y coordinate of top left corner. |
| width | Rect width. |
| height | Rect height. |
primitives.common.Size
Class describes the size of an object.
Parameters
| size | Copy constructor. It takes as a parameter copy of primitives.common.Size object. |
Parameters
| width | The initial width of the instance. |
| height | The initial height of the instance. |
Summary
| Properties | |
| width | The value that specifies the width of the size class. |
| height | The value that specifies the height of the size class. |
| Functions | |
| invert | Swaps width and height. |
primitives.common.Thickness
Class describes the thickness of a frame around rectangle.
Parameters
| left | The thickness for the left side of the rectangle. |
| height | The thickness for the upper side of the rectangle. |
| right | The thickness for the right side of the rectangle. |
| bottom | The thickness for the bottom side of the rectangle. |
Summary
| Properties | |
| left | The thickness for the left side of the rectangle. |
| top | The thickness for the upper side of the rectangle. |
| right | The thickness for the right side of the rectangle. |
| bottom | The thickness for the bottom side of the rectangle. |
| Functions | |
| isEmpty | Gets the value that indicates whether the thickness is the Empty. |
| toString | Returns thickness in form of CSS style string. |
primitives.text.Config
Text options class.
Summary
| Properties | |
| graphicsType | Preferable graphics type. |
| actualGraphicsType | Actual graphics type. |
| textDirection | Direction style. |
| text | Text |
| verticalAlignment | Vertical alignment. |
| horizontalAlignment | Horizontal alignment. |
| fontSize | Font size. |
| fontFamily | Font family. |
| color | Color. |
| Font weight. | Font weight: normal | bold |
| Font style. | Font style: normal | italic |
| Functions | |
| update | Makes full redraw of text widget contents reevaluating all options. |
primitives.callout.Config
Callout options class.
Summary
| Properties | |
| graphicsType | Preferable graphics type. |
| actualGraphicsType | Actual graphics type. |
| pointerPlacement | Defines pointer connection side or corner. |
| position | Defines callout body position. |
| snapPoint | Callout snap point. |
| cornerRadius | Body corner radius in percents or pixels. |
| offset | Body rectangle offset. |
| opacity | Background color opacity. |
| lineWidth | Border line width. |
| pointerWidth | Pointer base width in percents or pixels. |
| borderColor | Border Color. |
| fillColor | Fill Color. |
| Functions | |
| update | Makes full redraw of callout widget contents reevaluating all options. |
primitives.orgdiagram.TemplateConfig
User defines item template class. It may optionaly define template for item, custom cursor and highlight. If template is null then default template is used.
See Also
primitives.orgdiagram.Config.templates
Summary
| Properties | |
| name | Every template should have unique name. |
| itemSize | This is item size of type primitives.common.Size, templates should have fixed size, so orgDiagram uses this value in order to layout items properly. |
| itemBorderWidth | Item template border width. |
| itemTemplate | Item template, if it is null then default item template is used. |
| minimizedItemSize | This is size dot used to display item in minimized form, type of primitives.common.Size. |
| highlightPadding | This padding around item defines relative size of highlight object, ts type is primitives.common.Thickness. |
| highlightBorderWidth | Highlight border width. |
| highlightTemplate | Highlight template, if it is null then default highlight template is used. |
| cursorPadding | This padding around item defines relative size of cursor object, its type is primitives.common.Thickness. |
| cursorBorderWidth | Cursor border width. |
| cursorTemplate | Cursor template, if it is null then default cursor template is used. |
name
Every template should have unique name. It is used as reference when custom template is defined in primitives.orgdiagram.ItemConfig.templateName.
itemSize
This is item size of type primitives.common.Size, templates should have fixed size, so orgDiagram uses this value in order to layout items properly.
itemTemplate
Item template, if it is null then default item template is used. It supposed to be div html element containing named elements inside for setting them in primitives.orgdiagram.Config.onItemRender event.
minimizedItemSize
This is size dot used to display item in minimized form, type of primitives.common.Size.
highlightPadding
This padding around item defines relative size of highlight object, ts type is primitives.common.Thickness.
highlightTemplate
Highlight template, if it is null then default highlight template is used. It supposed to be div html element containing named elements inside for setting them in primitives.orgdiagram.Config.onHighlightRender event.
cursorPadding
This padding around item defines relative size of cursor object, its type is primitives.common.Thickness.
cursorTemplate
Cursor template, if it is null then default cursor template is used. It supposed to be div html element containing named elements inside for setting them in primitives.orgdiagram.Config.onCursorRender event.
primitives.orgdiagram.ButtonConfig
Options class. Custom user button options class. Buttons displayed on the right side of item. See jQuery UI Button options description for details. In order to receive button click event make binding to primitives.orgdiagram.Config.onButtonClick.
See Also
primitives.orgdiagram.Config.buttons
Summary
| Properties | |
| name | It should be unique string name of the button. |
| icon | Name of icon used in jQuery UI. |
| text | Whether to show any text -when set to false (display no text), icon must be enabled, otherwise it’ll be ignored. |
| label | Text to show on the button. |
| size | Size of the button of type primitives.common.Size. |
size
Size of the button of type primitives.common.Size.
primitives.orgdiagram.Config
orgDiagram options class.
Summary
| Properties | |
| graphicsType | Preferable graphics type. |
| actualGraphicsType | Actual graphics type. |
| pageFitMode | Defines the way diagram is fit into page. |
| orientationType | Diagram orientation. |
| verticalAlignment | Defines items vertical alignment relative to each other within one level of hierarchy. |
| horizontalAlignment | Defines items horizontal alignment relative to their parent. |
| connectorType | Defines connector lines style for dot and line elements. |
| emptyDiagramMessage | Empty message in order to avoid blank screen. |
| rootItem | This is the root of items hierarchy. |
| highlightItem | Defines item having highlight in diagram. |
| cursorItem | Defines item having cursor in diagram. |
| selectedItems | Defines array of selected items in form of references to items in rootItem hierarchy. |
| hasSelectorCheckbox | This option controls selection check boxes visibility. |
| selectionPathMode | Defines the way items between rootItem and selectedItems displayed in diagram. |
| minimalVisibility | Defines the way diagram collapses items when it has not enough space to fit all items. |
| templates | Custom user templates collection. |
| defaultTemplateName | This is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined. |
| hasButtons | This option controls user buttons visibility. |
| buttons | Custom user buttons displayed on right side of item. |
| Events | |
| onHighlightChanging | Notifies about changing highlight item primitives.orgdiagram.Config.highlightItem in diagram. |
| onHighlightChanged | Notifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram. |
| onCursorChanging | Notifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram. |
| onCursorChanged | Notifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram . |
| onSelectionChanging | Notifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems. |
| onSelectionChanged | Notifies about changes in collection of primitives.orgdiagram.Config.selectedItems. |
| onButtonClick | Notifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons. |
| onMouseClick | On mouse click event. |
| onItemRender | If user defined custom template for item then this method is called to populate it with context data. |
| onHighlightRender | If user defined custom highlight template for item template then this method is called to populate it with context data. |
| onCursorRender | If user defined custom cursor template for item template then this method is called to populate it with context data. |
| Properties | |
| normalLevelShift | Defines interval after level of items in diagram having items in normal state. |
| dotLevelShift | Defines interval after level of items in diagram having items in dot state. |
| lineLevelShift | Defines interval after level of items in diagram having items in line state. |
| normalItemsInterval | Defines interval between items at the same level in diagram having items in normal state. |
| dotItemsInterval | Defines interval between items at the same level in diagram having items in dot state. |
| lineItemsInterval | Defines interval between items at the same level in diagram having items in line state. |
| cousinsIntervalMultiplier | Use this interval multiplier for visual children grouping having distinct parents. |
| Functions | |
| update | Makes full redraw of diagram contents reevaluating all options. |
| Properties | |
| itemTitleFirstFontColor | This property customizes default template title font color. |
| itemTitleSecondFontColor | Default template title second font color. |
| selectCheckBoxLabel | Select check box label. |
| linesColor | Connectors lines color. |
| linesWidth | Connectors lines width. |
| showCallout | This option controls callout visibility for dotted items. |
| defaultCalloutTemplateName | This is template name used to render callouts for dotted items. |
| calloutfillColor | Annotation callout fill color. |
| calloutBorderColor | Annotation callout border color. |
| calloutOffset | Annotation callout offset. |
| calloutCornerRadius | Annotation callout corner radius. |
| calloutPointerWidth | Annotation callout pointer base width. |
| calloutLineWidth | Annotation callout border line width. |
| calloutOpacity | Annotation callout opacity. |
| childrenPlacementType | Defines children placement form. |
| leavesPlacementType | Defines leaves placement form. |
| maximumColumnsInMatrix | Maximum number of columns for matrix leaves layout. |
| buttonsPanelSize | User buttons panel size. |
| groupTitlePanelSize | Group title panel size. |
| checkBoxPanelSize | Selection check box panel size. |
| minimumScale | Minimum CSS3 scale transform. |
| maximumScale | Maximum CSS3 scale transform. |
| showLabels | This option controls items labels visibility. |
| labelSize | Defines label size. |
| labelOffset | Defines label offset from dot in pixels. |
| labelOrientation | Defines label orientation. |
| labelPlacement | Defines label placement relative to its dot. |
| labelFontSize | Label font size. |
| labelFontFamily | Label font family. |
| labelColor | Label color. |
| labelFontWeight | Font weight: normal | bold |
| labelFontStyle | Font style: normal | italic |
| enablePanning | Enable chart panning with mouse drag & drop for desktop browsers. |
templates
Custom user templates collection. Every template config should have unique name property.
See also
primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.defaultTemplateName primitives.orgdiagram.ItemConfig.templateName
defaultTemplateName
This is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined.
See Also
primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates collection property.
onHighlightChanging
Notifies about changing highlight item primitives.orgdiagram.Config.highlightItem in diagram. This coupled event with primitives.orgdiagram.Config.onHighlightChanged, it is fired before highlight update.
See also
onHighlightChanged
Notifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram.
See also
onCursorChanging
Notifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram. This coupled event with primitives.orgdiagram.Config.onCursorChanged, it is fired before layout update.
See also
onCursorChanged
Notifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram .
See also
onSelectionChanging
Notifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems.
See also
onSelectionChanged
Notifies about changes in collection of primitives.orgdiagram.Config.selectedItems.
See also
onButtonClick
Notifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons.
See also
update
Makes full redraw of diagram contents reevaluating all options.
Parameters
updateMode: Parameter defines the way diagram should be updated primitives.orgdiagram.UpdateMode. For example primitives.orgdiagram.UpdateMode.Refresh updates only items and selection reusing existing elements where ever it is possible.
itemTitleFirstFontColor
This property customizes default template title font color. Item background color sometimes play a role of logical value and can vary over a wide range, so as a result title having default font color may become unreadable. Widgets selects the best font color between this option and primitives.orgdiagram.Config.itemTitleSecondFontColor.
See Also
primitives.orgdiagram.ItemConfig.itemTitleColor primitives.orgdiagram.Config.itemTitleSecondFontColor primitives.common.highestContrast
defaultCalloutTemplateName
This is template name used to render callouts for dotted items. Actual callout template name is defined by following sequence: primitives.orgdiagram.ItemConfig.calloutTemplateName primitives.orgdiagram.ItemConfig.templateName primitives.orgdiagram.Config.defaultCalloutTemplateName primitives.orgdiagram.Config.defaultTemplateName
See Also
primitives.orgdiagram.Config.templates collection property. Default: null
showLabels
This option controls items labels visibility. Labels are displayed in form of divs having text inside, long strings are wrapped inside of them. User can control labels position relative to its item. Chart does not preserve space for labels, so if they overlap each other then horizontal or vertical intervals between rows and items shoud be manually increased.
| Auto | depends on available space. |
| True | always shown. |
| False | hidden. |
See Also
primitives.orgdiagram.ItemConfig.label primitives.orgdiagram.Config.labelSize primitives.orgdiagram.Config.normalItemsInterval primitives.orgdiagram.Config.dotItemsInterval primitives.orgdiagram.Config.lineItemsInterval primitives.orgdiagram.Config.normalLevelShift primitives.orgdiagram.Config.dotLevelShift primitives.orgdiagram.Config.lineLevelShift
Default
labelOrientation
labelPlacement
Defines label placement relative to its dot. Label is aligned to opposite side of its box.
See Also
primitives.common.PlacementType
Default
primitives.orgdiagram.ItemConfig
Defines item in diagram hierarchy. User is supposed to create hierarchy of this items and assign it to primitives.orgdiagram.Config.rootItem. Widget contains some generic properties used in default item template, but user can add as many custom properties to this class as needed. Just be careful and avoid widget malfunction.
See Also
primitives.orgdiagram.Config.rootItem
Summary
| Properties | |
| title | Default template title property. |
| description | Default template description element. |
| image | Url to image. |
| itemTitleColor | Default template title background color. |
| groupTitle | Auxiliary group title property. |
| groupTitleColor | Group title background color. |
| isVisible | If it is true then item is shown and selectable in hierarchy. |
| hasSelectorCheckbox | If it is true then selection check box is shown for the item. |
| hasButtons | This option controls buttons panel visibility. |
| itemType | This property defines how item should be shown. |
| adviserPlacementType | In case of item types primitives.orgdiagram.ItemType.Assistant and primitives.orgdiagram.ItemType.Adviser this option defines item placement side relative to parent. |
| childrenPlacementType | Defines children placement form. |
| items | This is collection of children items. |
| templateName | This is template name used to render this item. |
| showCallout | This option controls items callout visibility. |
| calloutTemplateName | This is template name used to render callout for dotted item. |
| label | Items label text. |
| showLabel | This option controls items label visibility. |
| labelSize | Defines label size. |
| labelOrientation | Defines label orientation. |
| labelPlacement | Defines label placement relative to the item. |
hasSelectorCheckbox
If it is true then selection check box is shown for the item. Selected items are always shown in normal form, so if item is selected then its selection check box is visible and checked.
| Auto | Depends on primitives.orgdiagram.Config.hasSelectorCheckbox setting. |
| True | Selection check box is visible. |
| False | No selection check box. |
Default
hasButtons
This option controls buttons panel visibility.
| Auto | Depends on primitives.orgdiagram.Config.hasButtons setting. |
| True | Has buttons panel. |
| False | No buttons panel. |
Default
itemType
This property defines how item should be shown. So far it is only possible to make it invisible.
See Also
primitives.orgdiagram.ItemType
Deafult
adviserPlacementType
In case of item types primitives.orgdiagram.ItemType.Assistant and primitives.orgdiagram.ItemType.Adviser this option defines item placement side relative to parent. By default items placed on the right side of parent item.
Deafult
templateName
This is template name used to render this item.
See Also
primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates collection property.
showCallout
This option controls items callout visibility.
| Auto | depends on primitives.orgdiagram.Config.showCallout option |
| True | shown |
| False | hidden |
Default
calloutTemplateName
This is template name used to render callout for dotted item. Actual callout template name is defined by following sequence: primitives.orgdiagram.ItemConfig.calloutTemplateName primitives.orgdiagram.ItemConfig.templateName primitives.orgdiagram.Config.defaultCalloutTemplateName primitives.orgdiagram.Config.defaultTemplateName
See Also
primitives.orgdiagram.Config.templates collection property. Default: null
showLabel
This option controls items label visibility. Label is displayed in form of div having text inside, long string is wrapped inside of it. User can control labels position relative to its item. Chart does not preserve space for label.
| Auto | depends on primitives.orgdiagram.Config.labelOrientation setting. |
| True | always shown. |
| False | hidden. |
See Also
primitives.orgdiagram.ItemConfig.label primitives.orgdiagram.Config.labelSize
Default
labelSize
Defines label size. It is needed to avoid labels overlapping. If one label overlaps another label or item it will be hidden. Label string is wrapped when its length exceeds available width. By default it is equal to charts primitives.orgdiagram.Config.labelSize.
See Also
primitives.common.Size Default: null;
labelOrientation
Defines label orientation. In default <primitives.text.TextOrientationType.Auto> mode it depends on chart primitives.orgdiagram.Config.labelOrientation setting.
See Also
primitives.orgdiagram.Config.labelOrientation primitives.text.TextOrientationType
Default
<primitives.text.TextOrientationType.Auto>
labelPlacement
Defines label placement relative to the item. In default primitives.common.PlacementType.Auto mode it depends on chart primitives.orgdiagram.Config.labelPlacement setting.
See Also
primitives.orgdiagram.Config.labelPlacement primitives.common.PlacementType
Default
Indicates whether the specified string is null or an Empty string.
primitives.common.isNullOrEmpty = function ( value )
Returns hash code for specified string value.
primitives.common.hashCode = function ( value )
This method assigns HTML element attributes only if one of them does not match its current value.
primitives.common.attr = function ( element, attr )
This method assigns HTML element style attributes only if one of them does not match its current value.
primitives.common.css = function ( element, attr )
This method searches array for specified item and returns index (or -1 if not found) Parameters: vector - An array through which to search.
primitives.common.indexOf = function ( vector, item )
Indicates whether the browser supports SVG graphics.
primitives.common.supportsSVG = function ()
Indicates whether the browser supports VML graphics.
primitives.common.supportsVML = function ()
Indicates whether the browser supports HTML Canvas graphics.
primitives.common.supportsCanvas = function ()
Converts color string into HEX color string.
primitives.common.getColorHexValue = function ( color )
Converts color string into HTML color name string or return hex color string.
primitives.common.getColorName = function ( color )
Gets red value of HEX color string.
primitives.common.getRed = function ( color )
Gets green value of HEX color string.
primitives.common.getGreen = function ( color )
Gets blue value of HEX color string.
primitives.common.getBlue = function ( color )
Calculates before opacity color value producing color you need after applying opacity.
primitives.common.beforeOpacity = function ( color, opacity )
This function calculates contrast between base color and two optional first and second colors and returns optional color having highest contrast.
primitives.common.highestContrast = function ( baseColor, firstColor, secondColor )
This function calculates luminosity between two HEX string colors.
primitives.common.luminosity = function ( firstColor, secondColor )
Returns distance to point.
primitives.common.Point.prototype.distanceTo = function ( arg0, arg1 )
Returns rectangle location in form of CSS style string.
primitives.common.Point.prototype.toString = function ( units )
Gets the x-axis value of the left side of the rectangle.
primitives.common.Rect.prototype.left = function ()
Gets the y-axis value of the top side of the rectangle.
primitives.common.Rect.prototype.top = function ()
Gets the x-axis value of the right side of the rectangle.
primitives.common.Rect.prototype.right = function ()
Gets the y-axis value of the bottom of the rectangle.
primitives.common.Rect.prototype.bottom = function ()
Gets the y-axis value of the center point of the rectangle.
primitives.common.Rect.prototype.verticalCenter = function ()
Gets the x-axis value of the center point of the rectangle.
primitives.common.Rect.prototype.horizontalCenter = function ()
Gets the value that indicates whether the rectangle is the Empty rectangle.
primitives.common.Rect.prototype.isEmpty = function ()
Expands the rectangle by using specified value in all directions.
primitives.common.Rect.prototype.offset = function ( arg0, arg1, arg2, arg3 )
Moves the rectangle to by the specified horizontal and vertical amounts.
primitives.common.Rect.prototype.translate = function ( x, y )
Inverts rectangle.
primitives.common.Rect.prototype.invert = function ()
Indicates whether the rectangle contains the specified point.
primitives.common.Rect.prototype.contains = function ( arg0, arg1 )
Crops the rectangle by the boundaries of specified rectangle.
primitives.common.Rect.prototype.cropByRect = function ( rect )
Returns true if the rectangle overlaps specified rectangle.
primitives.common.Rect.prototype.overlaps = function ( rect )
Expands the current rectangle to contain specified rectangle.
primitives.common.Rect.prototype.addRect = function ( arg0, arg1, arg2, arg3 )
Returns rectangle location and size in form of CSS style object.
primitives.common.Rect.prototype.getCSS = function ( units )
Returns rectangle location and size in form of CSS style string.
primitives.common.Rect.prototype.toString = function ( units )
Swaps width and height.
primitives.common.Size.prototype.invert = function ()
Gets the value that indicates whether the thickness is the Empty.
primitives.common.Thickness.prototype.isEmpty = function ()
Returns thickness in form of CSS style string.
primitives.common.Thickness.prototype.toString = function ( units )
Class describes the size of an object.
Class describes the thickness of a frame around rectangle.
This is template name used to render this item.
Defines item having highlight in diagram.
Defines item having cursor in diagram.
Defines array of selected items in form of references to items in rootItem hierarchy.
Custom user buttons displayed on right side of item.
Child item which is placed at separate level above all other children, but below parent item.
Child item which is placed at the same level as parent item.
This is the root of items hierarchy.
Makes full redraw of diagram contents reevaluating all options.
Defines the way diagram collapses items when it has not enough space to fit all items.
Class describes the width, height and location of rectangle.
Notifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram .
Notifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram.
User defines item template class.
Custom user templates collection.
Template is reused and update needed.
This enumeration is used as option in arguments of rendering events.
Class represents pair of x and y coordinates that defines a point in 2D plane.
Positooned in the middle of the text box
Positooned in the middle of the text box
Depends on implementation
If user defined custom template for item then this method is called to populate it with context data.
If user defined custom highlight template for item template then this method is called to populate it with context data.
If user defined custom cursor template for item template then this method is called to populate it with context data.
Notifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons.
Diagram tries to layout and auto size items in order to fit diagram into available page size.
Vertical orientation having root item at the top.
Connector lines use angular lines comming from common vertex.
Option state is auto defined.
Selection path items are shown in normal template mode.
Show node as dot.
This is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined.
Options class.
Notifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram.
Event details class.
Rendering event details class.
Defines redraw mode of diagram.
This update mode is optimized for widget fast redraw caused by resize or changes of next options: primitives.orgdiagram.Config.rootItem, primitives.orgdiagram.Config.cursorItem or primitives.orgdiagram.Config.selectedItems.
Default template title second font color.
Default template title background color.
This is template name used to render callout for dotted item.
This is template name used to render callouts for dotted items.
Items label text.
Defines label size.
Defines interval between items at the same level in diagram having items in normal state.
Defines interval between items at the same level in diagram having items in dot state.
Defines interval between items at the same level in diagram having items in line state.
Defines interval after level of items in diagram having items in normal state.
Defines interval after level of items in diagram having items in dot state.
Defines interval after level of items in diagram having items in line state.
Defines label orientation type.
Regular horizontal text.
Defines element placement relative to rectangular area.
Top side
This option controls selection check boxes visibility.
This option controls user buttons visibility.
Defines diagram item type.
Regular item.
Layout manager defined.
Defines item in diagram hierarchy.
This option controls callout visibility for dotted items.
Defines label orientation.
Defines label placement relative to its dot.
What is your?
What is your?
