Basic Primitives

Pure JavaScript jQuery UI Widgets

  • Increase font size
  • Default font size
  • Decrease font size

primitives.js

Summary
primitives.js
Functions
primitives.common.isNullOrEmptyIndicates whether the specified string is null or an Empty string.
primitives.common.hashCodeReturns hash code for specified string value.
primitives.common.attrThis method assigns HTML element attributes only if one of them does not match its current value.
primitives.common.cssThis method assigns HTML element style attributes only if one of them does not match its current value.
primitives.common.stopPropogationThis method uses various approaches used in different browsers to stop event propagation.
primitives.common.indexOfThis method searches array for specified item and returns index (or -1 if not found) Parameters: vector - An array through which to search.
primitives.common.supportsSVGIndicates whether the browser supports SVG graphics.
primitives.common.supportsVMLIndicates whether the browser supports VML graphics.
primitives.common.supportsCanvasIndicates whether the browser supports HTML Canvas graphics.
primitives.common.getColorHexValueConverts color string into HEX color string.
primitives.common.getColorNameConverts color string into HTML color name string or return hex color string.
primitives.common.getRedGets red value of HEX color string.
primitives.common.getGreenGets green value of HEX color string.
primitives.common.getBlueGets blue value of HEX color string.
primitives.common.beforeOpacityCalculates before opacity color value producing color you need after applying opacity.
primitives.common.highestContrastThis function calculates contrast between base color and two optional first and second colors and returns optional color having highest contrast.
primitives.common.luminosityThis function calculates luminosity between two HEX string colors.
Enumerations
primitives.common.AdviserPlacementTypeDefines item placement in tree relative to parent.
primitives.common.VerticalAlignmentTypeDefines text label alignment inside text box boundaries.
primitives.common.UpdateModeDefines redraw mode of diagram.
primitives.text.TextOrientationTypeDefines label orientation type.
primitives.common.ConnectorShapeTypeDefines connector shape style between two rectangles.
primitives.common.SelectionPathModeDefines the display mode for items between root item of diagram and selected items.
primitives.common.RenderingModeThis enumeration is used as option in arguments of rendering events.
primitives.common.PlacementTypeDefines element placement relative to rectangular area.
primitives.common.PageFitModeDefines diagram auto fit mode.
primitives.common.OrientationTypeDefines diagram orientation type.
primitives.common.LineTypeDefines type of line pattern.
primitives.orgdiagram.ItemTypeDefines diagram item type.
primitives.common.HorizontalAlignmentTypeDefines text label alignment inside text box boundaries.
primitives.common.GroupByTypeDefines the way items grouped in multiparent chart.
primitives.ocommon.GraphicsTypeGraphics type.
primitives.common.EnabledDefines option state.
primitives.common.ConnectorTypeDefines diagram connectors style for dot and line elements.
primitives.common.ConnectorShapeTypeDefines connector shape style between two rectangles.
primitives.common.ColorsNamed colors.
primitives.common.ChildrenPlacementTypeDefines children placement shape.
primitives.common.AnnotationTypeDefines type of annotation object.
primitives.common.VisibilityDefines nodes visibility mode.
primitives.common.ZOrderTypeDefines elements Z order.
primitives.common.RenderEventArgsRendering event details class.
Properties
elementjQuery selector referencing template’s root element.
contextReference to item.
templateNameThis is template name used to render this item.
renderingModeThis option indicates current template state.
isCursorRendered item is cursor.
isSelectedRendered item is selected.
primitives.common.PointClass represents pair of x and y coordinates that defines a point in 2D plane.
Properties
xThe x coordinate.
yThe y coordinate.
Functions
distanceToReturns distance to point.
toStringReturns rectangle location in form of CSS style string.
primitives.common.RectClass describes the width, height and location of rectangle.
Properties
xThe location x coordinate.
yThe location y coordinate.
widthThe width of rectangle.
heightThe height of rectangle.
Functions
leftGets the x-axis value of the left side of the rectangle.
topGets the y-axis value of the top side of the rectangle.
rightGets the x-axis value of the right side of the rectangle.
bottomGets the y-axis value of the bottom of the rectangle.
verticalCenterGets the y-axis value of the center point of the rectangle.
horizontalCenterGets the x-axis value of the center point of the rectangle.
isEmptyGets the value that indicates whether the rectangle is the Empty rectangle.
offsetExpands the rectangle by using specified value in all directions.
translateMoves the rectangle to by the specified horizontal and vertical amounts.
invertInverts rectangle.
containsIndicates whether the rectangle contains the specified point.
cropByRectCrops the rectangle by the boundaries of specified rectangle.
overlapsReturns true if the rectangle overlaps specified rectangle.
addRectExpands the current rectangle to contain specified rectangle.
getCSSReturns rectangle location and size in form of CSS style object.
toStringReturns rectangle location and size in form of CSS style string.
primitives.common.SizeClass describes the size of an object.
Properties
widthThe value that specifies the width of the size class.
heightThe value that specifies the height of the size class.
Functions
invertSwaps width and height.
primitives.common.ThicknessClass describes the thickness of a frame around rectangle.
Properties
leftThe thickness for the left side of the rectangle.
topThe thickness for the upper side of the rectangle.
rightThe thickness for the right side of the rectangle.
bottomThe thickness for the bottom side of the rectangle.
Functions
isEmptyGets the value that indicates whether the thickness is the Empty.
toStringReturns thickness in form of CSS style string.
primitives.text.ConfigText options class.
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
textDirectionDirection style.
textText
verticalAlignmentVertical alignment.
horizontalAlignmentHorizontal alignment.
fontSizeFont size.
fontFamilyFont family.
colorColor.
Font weight.Font weight: normal | bold
Font style.Font style: normal | italic
Functions
updateMakes full redraw of text widget contents reevaluating all options.
primitives.callout.ConfigCallout options class.
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
pointerPlacementDefines pointer connection side or corner.
positionDefines callout body position.
snapPointCallout snap point.
cornerRadiusBody corner radius in percents or pixels.
offsetBody rectangle offset.
opacityBackground color opacity.
lineWidthBorder line width.
lineTypeConnector’s line pattern.
pointerWidthPointer base width in percents or pixels.
borderColorBorder Color.
fillColorFill Color.
Functions
updateMakes full redraw of callout widget contents reevaluating all options.
primitives.connector.ConfigConnector options class.
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
orientationTypeDiagram orientation.
connectorShapeTypeConnector shape type.
positionDefines connectors starting rectangle position.
positionDefines connectors ending rectangle position.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
colorConnector’s color.
lineTypeConnector’s line pattern.
labelAnnotation label text.
labelSizeDefines label size.
Functions
updateMakes full redraw of connector widget contents reevaluating all options.
primitives.famdiagram.EventArgsEvent details class.
Properties
oldContextReference to associated previous item in hierarchy.
contextReference to associated new item in hierarchy.
parentItemsCollection of immidiate parent items of item in context.
positionAbsolute item position on diagram.
nameRelative object name.
cancelAllows cancelation of coupled event processing.
primitives.famdiagram.TemplateConfigUser defines item template class.
Properties
nameEvery template should have unique name.
itemSizeThis is item size of type primitives.common.Size, templates should have fixed size, so famDiagram uses this value in order to layout items properly.
itemBorderWidthItem template border width.
itemTemplateItem template, if it is null then default item template is used.
minimizedItemSizeThis is size dot used to display item in minimized form, type of primitives.common.Size.
highlightPaddingThis padding around item defines relative size of highlight object, ts type is primitives.common.Thickness.
highlightBorderWidthHighlight border width.
highlightTemplateHighlight template, if it is null then default highlight template is used.
cursorPaddingThis padding around item defines relative size of cursor object, its type is primitives.common.Thickness.
cursorBorderWidthCursor border width.
cursorTemplateCursor template, if it is null then default cursor template is used.
primitives.famdiagram.ButtonConfigOptions class.
Properties
nameIt should be unique string name of the button.
iconName of icon used in jQuery UI.
textWhether to show any text -when set to false (display no text), icon must be enabled, otherwise it’ll be ignored.
labelText to show on the button.
tooltipButton tooltip content.
sizeSize of the button of type primitives.common.Size.
primitives.famdiagram.ConfigjQuery famDiagram Widget options class.
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
pageFitModeDefines the way diagram is fit into page.
minimalVisibilityDefines minimal allowed item form size for page fit mode.
orientationTypeChart orientation.
verticalAlignmentDefines items vertical alignment relative to each other within one level of hierarchy.
groupByTypeDefines the way items are grouped in multiparent chart.
emptyDiagramMessageEmpty message in order to avoid blank screen.
itemsThis is chart items collection.
annotationsDefines array of annotaions objects.
cursorItem
highlightItemHighlighted item id.
selectedItemsDefines array of selected item ids.
hasSelectorCheckboxThis option controls selection check boxes visibility.
selectCheckBoxLabelSelect check box label.
selectionPathModeDefines the way items between root item and selectedItems displayed in diagram.
templatesCustom user templates collection.
defaultTemplateNameThis is template name used to render items having no primitives.famdiagram.ItemConfig.templateName defined.
hasButtonsThis option controls user buttons visibility.
buttonsCustom user buttons displayed on right side of item.
Events
onHighlightChangingNotifies about changing highlight item primitives.famdiagram.Config.highlightItem in diagram.
onHighlightChangedNotifies about changed highlight item primitives.famdiagram.Config.highlightItem in diagram.
onCursorChangingNotifies about changing cursor item primitives.famdiagram.Config.cursorItem in diagram.
onCursorChangedNotifies about changed cursor item primitives.famdiagram.Config.cursorItem in diagram .
onSelectionChangingNotifies about changing selected items collection of primitives.famdiagram.Config.selectedItems.
onSelectionChangedNotifies about changes in collection of primitives.famdiagram.Config.selectedItems.
onButtonClickNotifies about click of custom user button defined in colelction of primitives.famdiagram.Config.buttons.
onMouseClickOn mouse click event.
onItemRenderItem templates don’t provide means to bind data of items into templates.
onHighlightRenderIf user defined custom highlight template for item template then this method is called to populate it with context data.
onCursorRenderIf user defined custom cursor template for item template then this method is called to populate it with context data.
Properties
normalLevelShiftDefines interval after level of items in diagram having items in normal state.
dotLevelShiftDefines interval after level of items in diagram having all items in dot state.
lineLevelShiftDefines interval after level of items in diagram having items in line state.
normalItemsIntervalDefines interval between items at the same level in diagram having items in normal state.
dotItemsIntervalDefines interval between items at the same level in diagram having items in dot state.
lineItemsIntervalDefines interval between items at the same level in diagram having items in line state.
cousinsIntervalMultiplierUse this interval multiplier between cousins in hiearchy.
Functions
updateMakes full redraw of diagram contents reevaluating all options.
Properties
itemTitleFirstFontColorThis property customizes default template title font color.
itemTitleSecondFontColorDefault template title second font color.
linesColorConnectors lines color.
linesWidthConnectors lines width.
linesTypeConnectors line pattern.
linesPaletteThis collection contains elements of type PaletteItemConfig.
showCalloutThis option controls callout visibility for dotted items.
defaultCalloutTemplateNameThis is template name used to render callouts for dotted items.
calloutfillColorAnnotation callout fill color.
calloutBorderColorAnnotation callout border color.
calloutOffsetAnnotation callout offset.
calloutCornerRadiusAnnotation callout corner radius.
calloutPointerWidthAnnotation callout pointer base width.
calloutLineWidthAnnotation callout border line width.
calloutOpacityAnnotation callout opacity.
buttonsPanelSizeUser buttons panel size.
groupTitlePanelSizeGroup title panel size.
checkBoxPanelSizeSelection check box panel size.
minimumScaleMinimum CSS3 scale transform.
maximumScaleMaximum CSS3 scale transform.
showLabelsThis option controls items labels visibility.
labelSizeDefines label size.
labelOffsetDefines label offset from dot in pixels.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to its dot.
labelFontSizeLabel font size.
labelFontFamilyLabel font family.
labelColorLabel color.
labelFontWeightFont weight: normal | bold
labelFontStyleFont style: normal | italic
enablePanningEnable chart panning with mouse drag & drop for desktop browsers.
primitives.famdiagram.ConnectorAnnotationConfigOptions class.
Properties
annotationTypeConnector shape type.
zOrderTypeDefines connector Z order placement relative to chart items.
fromItemReference to from item in hierarchy.
toItemReference to from item in hierarchy.
connectorShapeTypeConnector shape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
colorConnector’s color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.
primitives.famdiagram.ItemConfigDefines item in family chart hierarchy.
Properties
idUnique item id.
parentsCollection of parent id’s.
titleDefault template title property.
descriptionDefault template description element.
imageUrl to image.
contextUser context object.
itemTitleColorDefault template title background color.
groupTitleAuxiliary group title property.
groupTitleColorGroup title background color.
isVisibleIf it is true then item is shown and selectable in hierarchy.
hasSelectorCheckboxIf it is true then selection check box is shown for the item.
hasButtonsThis option controls buttons panel visibility.
templateNameThis is template name used to render this item.
showCalloutThis option controls items callout visibility.
calloutTemplateNameThis is template name used to render callout for dotted item.
labelItems label text.
showLabelThis option controls items label visibility.
labelSizeDefines label size.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to the item.
primitives.famdiagram.PaletteItemConfigThis class is used to define cross family connectors styles.
Properties
lineColorLine color.
lineWidthLine width.
lineTypeLine pattern.
primitives.famdiagram.ShapeAnnotationConfigOptions class.
Properties
annotationTypeConnector shape type.
zOrderTypeDefines shape Z order placement relative to chart items.
itemsArray of items ids in hierarchy.
shapeTypeShape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
cornerRadiusBody corner radius in percents or pixels.
opacityBackground color opacity.
borderColorShape border line color.
fillColorFill Color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.
labelPlacementDefines label placement relative to the shape.
labelOffsetDefines label offset from shape in pixels.
primitives.orgdiagram.EventArgsEvent details class.
Properties
oldContextReference to associated previous item in hierarchy.
contextReference to associated new item in hierarchy.
parentItemReference parent item of item in context.
positionAbsolute item position on diagram.
nameRelative object name.
cancelAllows cancelation of coupled event processing.
primitives.orgdiagram.TemplateConfigUser defines item template class.
Properties
nameEvery template should have unique name.
itemSizeThis is item size of type primitives.common.Size, templates should have fixed size, so orgDiagram uses this value in order to layout items properly.
itemBorderWidthItem template border width.
itemTemplateItem template, if it is null then default item template is used.
minimizedItemSizeThis is size dot used to display item in minimized form, type of primitives.common.Size.
highlightPaddingThis padding around item defines relative size of highlight object, ts type is primitives.common.Thickness.
highlightBorderWidthHighlight border width.
highlightTemplateHighlight template, if it is null then default highlight template is used.
cursorPaddingThis padding around item defines relative size of cursor object, its type is primitives.common.Thickness.
cursorBorderWidthCursor border width.
cursorTemplateCursor template, if it is null then default cursor template is used.
primitives.orgdiagram.ButtonConfigOptions class.
Properties
nameIt should be unique string name of the button.
iconName of icon used in jQuery UI.
textWhether to show any text -when set to false (display no text), icon must be enabled, otherwise it’ll be ignored.
labelText to show on the button.
tooltipButton tooltip content.
sizeSize of the button of type primitives.common.Size.
primitives.orgdiagram.ConfigjQuery orgDiagram Widget options class.
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
pageFitModeDefines the way diagram is fit into page.
minimalVisibilityDefines minimal allowed item form size for page fit mode.
orientationTypeChart orientation.
horizontalAlignmentDefines items horizontal alignment relative to their parent.
verticalAlignmentDefines items vertical alignment relative to each other within one level of hierarchy.
connectorTypeDefines connector lines style for dot and line elements.
emptyDiagramMessageEmpty message in order to avoid blank screen.
itemsThis is chart items collection.
annotationsDefines array of annotaions objects.
cursorItem
highlightItemHighlighted item id.
selectedItemsDefines array of selected item ids.
hasSelectorCheckboxThis option controls selection check boxes visibility.
selectCheckBoxLabelSelect check box label.
selectionPathModeDefines the way items between root item and selectedItems displayed in diagram.
templatesCustom user templates collection.
defaultTemplateNameThis is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined.
hasButtonsThis option controls user buttons visibility.
buttonsCustom user buttons displayed on right side of item.
Events
onHighlightChangingNotifies about changing highlight item primitives.orgdiagram.Config.highlightItem in diagram.
onHighlightChangedNotifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram.
onCursorChangingNotifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram.
onCursorChangedNotifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram .
onSelectionChangingNotifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems.
onSelectionChangedNotifies about changes in collection of primitives.orgdiagram.Config.selectedItems.
onButtonClickNotifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons.
onMouseClickOn mouse click event.
onItemRenderItem templates don’t provide means to bind data of items into templates.
onHighlightRenderIf user defined custom highlight template for item template then this method is called to populate it with context data.
onCursorRenderIf user defined custom cursor template for item template then this method is called to populate it with context data.
Properties
normalLevelShiftDefines interval after level of items in diagram having items in normal state.
dotLevelShiftDefines interval after level of items in diagram having all items in dot state.
lineLevelShiftDefines interval after level of items in diagram having items in line state.
normalItemsIntervalDefines interval between items at the same level in diagram having items in normal state.
dotItemsIntervalDefines interval between items at the same level in diagram having items in dot state.
lineItemsIntervalDefines interval between items at the same level in diagram having items in line state.
cousinsIntervalMultiplierUse this interval multiplier between cousins in hiearchy.
Functions
updateMakes full redraw of diagram contents reevaluating all options.
Properties
itemTitleFirstFontColorThis property customizes default template title font color.
itemTitleSecondFontColorDefault template title second font color.
linesColorConnectors lines color.
linesWidthConnectors lines width.
linesTypeConnectors line pattern.
highlightLinesColorConnectors highlight line color.
highlightLinesWidthConnectors highlight line width.
highlightLinesTypeConnectors highlight line pattern.
showCalloutThis option controls callout visibility for dotted items.
defaultCalloutTemplateNameThis is template name used to render callouts for dotted items.
calloutfillColorAnnotation callout fill color.
calloutBorderColorAnnotation callout border color.
calloutOffsetAnnotation callout offset.
calloutCornerRadiusAnnotation callout corner radius.
calloutPointerWidthAnnotation callout pointer base width.
calloutLineWidthAnnotation callout border line width.
calloutOpacityAnnotation callout opacity.
childrenPlacementTypeDefines children placement form.
leavesPlacementTypeDefines leaves placement form.
maximumColumnsInMatrixMaximum number of columns for matrix leaves layout.
buttonsPanelSizeUser buttons panel size.
groupTitlePanelSizeGroup title panel size.
checkBoxPanelSizeSelection check box panel size.
minimumScaleMinimum CSS3 scale transform.
maximumScaleMaximum CSS3 scale transform.
showLabelsThis option controls items labels visibility.
labelSizeDefines label size.
labelOffsetDefines label offset from dot in pixels.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to its dot.
labelFontSizeLabel font size.
labelFontFamilyLabel font family.
labelColorLabel color.
labelFontWeightFont weight: normal | bold
labelFontStyleFont style: normal | italic
enablePanningEnable chart panning with mouse drag & drop for desktop browsers.
primitives.orgdiagram.ConnectorAnnotationConfigOptions class.
Properties
annotationTypeConnector shape type.
zOrderTypeDefines connector Z order placement relative to chart items.
fromItemReference to from item in hierarchy.
toItemReference to from item in hierarchy.
connectorShapeTypeConnector shape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
colorConnector’s color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.
primitives.orgdiagram.PathAnnotationConfigOptions class.
Properties
annotationTypeConnector shape type.
itemsArray of item ids in hierarchy.
selectItemsMake items shown always shown in normal state.
primitives.orgdiagram.ItemConfigDefines item in diagram hierarchy.
Properties
idUnique item id.
parentParent id.
titleDefault template title property.
descriptionDefault template description element.
imageUrl to image.
contextUser context object.
itemTitleColorDefault template title background color.
groupTitleAuxiliary group title property.
groupTitleColorGroup title background color.
isVisibleIf it is true then item is shown and selectable in hierarchy.
hasSelectorCheckboxIf it is true then selection check box is shown for the item.
hasButtonsThis option controls buttons panel visibility.
itemTypeThis property defines how item should be shown.
adviserPlacementTypeIn case of item types primitives.orgdiagram.ItemType.Assistant and primitives.orgdiagram.ItemType.Adviser this option defines item placement side relative to parent.
childrenPlacementTypeDefines children placement form.
templateNameThis is template name used to render this item.
showCalloutThis option controls items callout visibility.
calloutTemplateNameThis is template name used to render callout for dotted item.
labelItems label text.
showLabelThis option controls items label visibility.
labelSizeDefines label size.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to the item.
primitives.orgdiagram.ShapeAnnotationConfigOptions class.
Properties
annotationTypeConnector shape type.
zOrderTypeDefines shape Z order placement relative to chart items.
itemsArray of items ids in hierarchy.
shapeTypeShape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
cornerRadiusBody corner radius in percents or pixels.
opacityBackground color opacity.
borderColorShape border line color.
fillColorFill Color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.
labelPlacementDefines label placement relative to the shape.
labelOffsetDefines label offset from shape in pixels.
primitives.connector.ConfigConnector options class.
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
orientationTypeDiagram orientation.
shapeTypeShape type.
positionDefines shapes rectangle position.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
cornerRadiusBody corner radius in percents or pixels.
opacityBackground color opacity.
borderColorShape border line color.
fillColorFill Color.
lineTypeConnector’s line pattern.
labelAnnotation label text.
labelSizeDefines label size.
labelPlacementDefines label placement relative to the shape.
labelOffsetDefines label offset from shape in pixels.
Functions
updateMakes full redraw of connector widget contents reevaluating all options.

Functions

primitives.common.isNullOrEmpty

primitives.common.isNullOrEmpty = function (value)

Indicates whether the specified string is null or an Empty string.

Parameters

valueThe string to test.  Returns: true if the value is null or an empty string(“”); otherwise, false.

primitives.common.hashCode

primitives.common.hashCode = function (value)

Returns hash code for specified string value.

Parameters

valueThe string to calculate hash code.  Returns: int hash code.

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

elementjQuery selector of element to be updated.
attrobject 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

elementjQuery selector of element to be updated.
attrobject containing style attributes.

primitives.common.stopPropogation

This method uses various approaches used in different browsers to stop event propagation.  Parameters: event - Event to be stopped.

primitives.common.indexOf

primitives.common.indexOf = function (vector,
item)

This method searches array for specified item and returns index (or -1 if not found) Parameters: vector - An array through which to search. item - The value to search for.  Returns: Index of search item or -1 if not found.

primitives.common.supportsSVG

primitives.common.supportsSVG = function ()

Indicates whether the browser supports SVG graphics.

Returns

true if browser supports SVG graphics.

primitives.common.supportsVML

primitives.common.supportsVML = function ()

Indicates whether the browser supports VML graphics.  It is applicable to Internet Explorer only.  This graphics mode is depricated in favour of SVG.

Returns

true if browser supports VML graphics.

primitives.common.supportsCanvas

primitives.common.supportsCanvas = function ()

Indicates whether the browser supports HTML Canvas graphics.

Returns

true if browser supports HTML Canvas graphics.

primitives.common.getColorHexValue

primitives.common.getColorHexValue = function (color)

Converts color string into HEX color string.

Parameters

colorregular HTML color string.

Returns

Color value in form of HEX string.

primitives.common.getColorName

primitives.common.getColorName = function (color)

Converts color string into HTML color name string or return hex color string.

Parameters

colorregular HTML color string.

Returns

HTML Color name or HEX string.

primitives.common.getRed

primitives.common.getRed = function (color)

Gets red value of HEX color string.

Parameters

colorHEX string color value.

Returns

Int value.

primitives.common.getGreen

primitives.common.getGreen = function (color)

Gets green value of HEX color string.

Parameters

colorHEX string color value.

Returns

Int value.

primitives.common.getBlue

primitives.common.getBlue = function (color)

Gets blue value of HEX color string.

Parameters

colorHEX string color value.

Returns

Int value.

primitives.common.beforeOpacity

primitives.common.beforeOpacity = function (color,
opacity)

Calculates before opacity color value producing color you need after applying opacity.

Parameters

colorColor you need after applying opacity.
opacityValue of opacity.

Returns

HEX color value.

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

baseColorBase color to compare with.
firstColorFirst color.
secondColorSecond color.

Returns

Color value.

primitives.common.luminosity

primitives.common.luminosity = function (firstColor,
secondColor)

This function calculates luminosity between two HEX string colors.

Parameters

firstColorFirst color.
secondColorSecond color.

Returns

Luminosity value

Enumerations

primitives.common.AdviserPlacementType

Defines item placement in tree relative to parent.

AutoLayout manager defined.
LeftItem placed on the left side of parent.
RightItem placed on the right side of parent.

primitives.common.VerticalAlignmentType

Defines text label alignment inside text box boundaries.

CenterPositooned in the middle of the text box
LeftAligned to the begging of the text box
RightAligned to the end of text box

primitives.common.UpdateMode

Defines redraw mode of diagram.

RecreateForces widget to make a full chart redraw.  It is equivalent to initial chart creation.  It removes everything from chart layout and recreares all elements again.  For example when you open chart in jQuery UI dDialog you have to use this mode, since jQuery UI invalidates VML graphics elements in the DOM, so the only way to update chart is to recreate its contents.
RefreshThis update mode is optimized for widget fast redraw caused by resize or changes of next options: primitives.orgdiagram.Config.items, primitives.orgdiagram.Config.cursorItem or primitives.orgdiagram.Config.selectedItems.
PositonHighlightThis update mode redraws only primitives.orgdiagram.Config.highlightItem.

See Also

primitives.orgdiagram.Config.update

primitives.text.TextOrientationType

Defines label orientation type.

HorizontalRegular horizontal text.
RotateLeftRotate all text 90 degree.
RotateRightRotate all text 270 degree.

primitives.common.ConnectorShapeType

Defines connector shape style between two rectangles.

SingleLineSingle line.
DoubleLineDouble line.

primitives.common.SelectionPathMode

Defines the display mode for items between root item of diagram and selected items.

NoneSelection path items placed and sized as regular diagram items.
FullStackSelection path items are shown in normal template mode.

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.

CreateTemplate is just created.
UpdateTemplate is reused and update needed.

primitives.common.PlacementType

Defines element placement relative to rectangular area.

AutoDepends on implementation
LeftLeft side
TopTop side
RightRight side
BottomBottom side
TopLeftTop left side
TopRightTop right side
BottomLeftBottom left side
BottomRightBottom right side
LeftTopLeft Top side
LeftBottomLeft Bottom side
RightTopRight Top side
RightBottomRight Bottom side

primitives.common.PageFitMode

Defines diagram auto fit mode.

NoneAll diagram items are shown in normal template mode.
PageWidthDiagram tries to layout and auto size items in order to fit diagram into available page width.
PageHeightDiagram tries to layout and auto size items in order to fit diagram into available page height.
FitToPageDiagram tries to layout and auto size items in order to fit diagram into available page size.

primitives.common.OrientationType

Defines diagram orientation type.

TopVertical orientation having root item at the top.
BottomVertical orientation having root item at the bottom.
LeftHorizontal orientation having root item on the left.
RightHorizontal orientation having root item on the right.

primitives.common.LineType

Defines type of line pattern.  Dash and dot intervals depend on line width.

SolidRegular solid line.
DottedDots.
DashedDashes.

primitives.orgdiagram.ItemType

Defines diagram item type.

RegularRegular item.
AssistantChild item which is placed at separate level above all other children, but below parent item.  It has connection on its side.
AdviserChild item which is placed at the same level as parent item.  It has connection on its side.
SubAssistantChild item which is placed at separate level above all other children, but below parent item.  It has connection on its top.
SubAdviserChild item placed at the same level as parent item.  It has connection on its top.
GeneralPartnerChild item placed at the same level as parent item and visually grouped with it together via sharing common parent and children.
LimitedPartnerChild item placed at the same level as parent item and visually grouped with it via sharing common children.
AdviserPartnerChild item placed at the same level as parent item.  It has connection on its side.  It is visually grouped with it via sharing common children.

primitives.common.HorizontalAlignmentType

Defines text label alignment inside text box boundaries.

CenterPositooned in the middle of the text box
LeftAligned to the begging of the text box
RightAligned to the end of text box

primitives.common.GroupByType

Defines the way items grouped in multiparent chart.

ParentsKeep parents together where it is possible.
ChildrenKeep children together.

primitives.ocommon.GraphicsType

Graphics type.

VMLVector Markup Language.  It is only graphics mode available in IE6, IE7 and IE8.
SVGScalable Vector Graphics.  Proportionally scales on majority of device.  It is not available on Android 2.3 devices and earlier.
CanvasHTML canvas graphics.  It is available everywhere except IE6, IE7 and IE8.  It requires widget redraw after zooming page.

primitives.common.Enabled

Defines option state.

AutoOption state is auto defined.
TrueEnabled.
FalseDisabled.

primitives.common.ConnectorType

Defines diagram connectors style for dot and line elements.

SquaredConnector lines use only right angles.
AngularConnector lines use angular lines comming from common vertex.
CurvedConnector lines are splines comming from common vertex.

primitives.common.ConnectorShapeType

Defines connector shape style between two rectangles.

SingleLineSingle line.
DoubleLineDouble line.

primitives.common.Colors

Named colors.

primitives.common.ChildrenPlacementType

Defines children placement shape.

AutoChildren placement auto defined.
VerticalChildren form vertical column.
HorizontalChildren placed horizontally.
MatrixChildren placed in form of matrix.

primitives.common.AnnotationType

Defines type of annotation object.

ConnectorConnector lines between two rectangular areas.
ShapeShape around rectanglur area.
HighlightPathUse highlight properties for connector lines between items.

primitives.common.Visibility

Defines nodes visibility mode.

AutoAuto select best visibility mode.
NormalShow node in normal template mode.
DotShow node as dot.
LineShow node as line.
InvisibleMake node invisible.

See Also

primitives.orgdiagram.Config.minimalVisibility

primitives.common.ZOrderType

Defines elements Z order.  This option is used to place annotations relative to chart.

AutoAuto selects best order depending on type of element.
BackgroundPlace element in chart background.
ForegroundPlace element into foreground.

primitives.common.RenderEventArgs

Rendering event details class.

Summary
Properties
elementjQuery selector referencing template’s root element.
contextReference to item.
templateNameThis is template name used to render this item.
renderingModeThis option indicates current template state.
isCursorRendered item is cursor.
isSelectedRendered item is selected.

Properties

element

jQuery selector referencing template’s root element.

context

Reference to item.

templateName

This is template name used to render this item.

See Also

primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates collection property.

renderingMode

This option indicates current template state.

Default

primitives.common.RenderingMode.Update

See also

primitives.common.RenderingMode

isCursor

Rendered item is cursor.

isSelected

Rendered item is selected.

primitives.common.Point

Class represents pair of x and y coordinates that defines a point in 2D plane.

Parameters

pointprimitives.common.Point object.

Parameters

xX coordinate of 2D point.
yY coordinate of 2D point.
Summary
Properties
xThe x coordinate.
yThe y coordinate.
Functions
distanceToReturns distance to point.
toStringReturns rectangle location in form of CSS style string.

Properties

x

The x coordinate.

y

The y coordinate.

Functions

distanceTo

primitives.common.Point.prototype.distanceTo = function (arg0,
arg1)

Returns distance to point.

Parameters

pointprimitives.common.Point object.

Parameters

xX coordinate of 2D point.
yY coordinate of 2D point.

toString

primitives.common.Point.prototype.toString = function (units)

Returns rectangle location in form of CSS style string.

Parameters

unitsThe string name of units.  Uses “px” if not defined.

Returns

CSS style string.

primitives.common.Rect

Class describes the width, height and location of rectangle.

Parameters

rectCopy constructor.  It takes as a parameter copy of primitives.common.Rect object.

Parameters

pointTopLeftTop left point primitives.common.Point object.
pointBottomRightBottom right point primitives.common.Point object.

Parameters

xThe x coordinate of top left corner.
yThe y coordinate of top left corner.
widthRect width.
heightRect height.
Summary
Properties
xThe location x coordinate.
yThe location y coordinate.
widthThe width of rectangle.
heightThe height of rectangle.
Functions
leftGets the x-axis value of the left side of the rectangle.
topGets the y-axis value of the top side of the rectangle.
rightGets the x-axis value of the right side of the rectangle.
bottomGets the y-axis value of the bottom of the rectangle.
verticalCenterGets the y-axis value of the center point of the rectangle.
horizontalCenterGets the x-axis value of the center point of the rectangle.
isEmptyGets the value that indicates whether the rectangle is the Empty rectangle.
offsetExpands the rectangle by using specified value in all directions.
translateMoves the rectangle to by the specified horizontal and vertical amounts.
invertInverts rectangle.
containsIndicates whether the rectangle contains the specified point.
cropByRectCrops the rectangle by the boundaries of specified rectangle.
overlapsReturns true if the rectangle overlaps specified rectangle.
addRectExpands the current rectangle to contain specified rectangle.
getCSSReturns rectangle location and size in form of CSS style object.
toStringReturns rectangle location and size in form of CSS style string.

Properties

x

The location x coordinate.

y

The location y coordinate.

width

The width of rectangle.

height

The height of rectangle.

Functions

left

primitives.common.Rect.prototype.left = function ()

Gets the x-axis value of the left side of the rectangle.

top

primitives.common.Rect.prototype.top = function ()

Gets the y-axis value of the top side of the rectangle.

right

primitives.common.Rect.prototype.right = function ()

Gets the x-axis value of the right side of the rectangle.

bottom

primitives.common.Rect.prototype.bottom = function ()

Gets the y-axis value of the bottom of the rectangle.

verticalCenter

primitives.common.Rect.prototype.verticalCenter = function ()

Gets the y-axis value of the center point of the rectangle.

horizontalCenter

primitives.common.Rect.prototype.horizontalCenter = function ()

Gets the x-axis value of the center point of the rectangle.

isEmpty

primitives.common.Rect.prototype.isEmpty = function ()

Gets the value that indicates whether the rectangle is the Empty rectangle.

offset

primitives.common.Rect.prototype.offset = function (arg0,
arg1,
arg2,
arg3)

Expands the rectangle by using specified value in all directions.

Parameters

valueThe amount by which to expand or shrink the sides of the rectangle.

Parameters

leftThe amount by which to expand or shrink the left side of the rectangle.
topThe amount by which to expand or shrink the top side of the rectangle.
rightThe amount by which to expand or shrink the right side of the rectangle.
bottomThe amount by which to expand or shrink the bottom side of the rectangle.

translate

primitives.common.Rect.prototype.translate = function (x,
y)

Moves the rectangle to by the specified horizontal and vertical amounts.

Parameters

xThe amount to move the rectangle horizontally.
yThe amount to move the rectangle vertically.

invert

primitives.common.Rect.prototype.invert = function ()

Inverts rectangle.

contains

primitives.common.Rect.prototype.contains = function (arg0,
arg1)

Indicates whether the rectangle contains the specified point.

Parameters

pointThe point to check.

Parameters

xThe x coordinate of the point to check.
yThe y coordinate of the point to check.

Returns

true if the rectangle contains the specified point; otherwise, false.

cropByRect

primitives.common.Rect.prototype.cropByRect = function (rect)

Crops the rectangle by the boundaries of specified rectangle.

Parameters

rectThe rectangle to use as the crop boundaries.

overlaps

primitives.common.Rect.prototype.overlaps = function (rect)

Returns true if the rectangle overlaps specified rectangle.

Parameters

rectThe rectangle to use as overlaping rectangle.

addRect

primitives.common.Rect.prototype.addRect = function (arg0,
arg1,
arg2,
arg3)

Expands the current rectangle to contain specified rectangle.

Parameters

rectThe rectangle to contain.

Parameters

xThe x coordinate of the point to contain.
yThe y coordinate of the point to contain.

Parameters

xThe x coordinate of top left corner.
yThe y coordinate of top left corner.
widthRect width.
heightRect height.

getCSS

primitives.common.Rect.prototype.getCSS = function (units)

Returns rectangle location and size in form of CSS style object.

Parameters

unitsThe string name of units.  Uses “px” if not defined.

Returns

CSS style object.

toString

primitives.common.Rect.prototype.toString = function (units)

Returns rectangle location and size in form of CSS style string.

Parameters

unitsThe string name of units.  Uses “px” if not defined.

Returns

CSS style string.

primitives.common.Size

Class describes the size of an object.

Parameters

sizeCopy constructor.  It takes as a parameter copy of primitives.common.Size object.

Parameters

widthThe initial width of the instance.
heightThe initial height of the instance.
Summary
Properties
widthThe value that specifies the width of the size class.
heightThe value that specifies the height of the size class.
Functions
invertSwaps width and height.

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

primitives.common.Size.prototype.invert = function ()

Swaps width and height.

primitives.common.Thickness

Class describes the thickness of a frame around rectangle.

Parameters

leftThe thickness for the left side of the rectangle.
heightThe thickness for the upper side of the rectangle.
rightThe thickness for the right side of the rectangle.
bottomThe thickness for the bottom side of the rectangle.
Summary
Properties
leftThe thickness for the left side of the rectangle.
topThe thickness for the upper side of the rectangle.
rightThe thickness for the right side of the rectangle.
bottomThe thickness for the bottom side of the rectangle.
Functions
isEmptyGets the value that indicates whether the thickness is the Empty.
toStringReturns thickness in form of CSS style string.

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

primitives.common.Thickness.prototype.isEmpty = function ()

Gets the value that indicates whether the thickness is the Empty.

toString

primitives.common.Thickness.prototype.toString = function (units)

Returns thickness in form of CSS style string.  It is conversion to padding style string.

Parameters

unitsThe string name of units.  Uses “px” if not defined.

Returns

CSS style string.

primitives.text.Config

Text options class.

Summary
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
textDirectionDirection style.
textText
verticalAlignmentVertical alignment.
horizontalAlignmentHorizontal alignment.
fontSizeFont size.
fontFamilyFont family.
colorColor.
Font weight.Font weight: normal | bold
Font style.Font style: normal | italic
Functions
updateMakes full redraw of text widget contents reevaluating all options.

Properties

graphicsType

Preferable graphics type.  If preferred graphics type is not supported widget switches to first available.

Default

<primitives.common.GraphicsType.SVG>

actualGraphicsType

Actual graphics type.

textDirection

Direction style.

Default

<primitives.text.TextDirection.Auto>

text

Text

verticalAlignment

horizontalAlignment

fontSize

Font size.

Default

15

fontFamily

Font family.

Default

”Arial”

color

Color.

Default

<primitives.common.Colors.Black>

Font weight.

Font weight: normal | bold

Default

”normal”

Font style.

Font style: normal | italic

Default

”normal”

Functions

update

Makes full redraw of text widget contents reevaluating all options.

primitives.callout.Config

Callout options class.

Summary
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
pointerPlacementDefines pointer connection side or corner.
positionDefines callout body position.
snapPointCallout snap point.
cornerRadiusBody corner radius in percents or pixels.
offsetBody rectangle offset.
opacityBackground color opacity.
lineWidthBorder line width.
lineTypeConnector’s line pattern.
pointerWidthPointer base width in percents or pixels.
borderColorBorder Color.
fillColorFill Color.
Functions
updateMakes full redraw of callout widget contents reevaluating all options.

Properties

graphicsType

Preferable graphics type.  If preferred graphics type is not supported widget switches to first available.

Default

<primitives.common.GraphicsType.SVG>

actualGraphicsType

Actual graphics type.

pointerPlacement

Defines pointer connection side or corner.

Default

primitives.common.PlacementType.Auto

position

Defines callout body position.

Type

primitives.common.Rect.

snapPoint

Callout snap point.

Type

primitives.common.Point.

cornerRadius

Body corner radius in percents or pixels.

offset

Body rectangle offset.

opacity

Background color opacity.

lineWidth

Border line width.

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

pointerWidth

Pointer base width in percents or pixels.

borderColor

Border Color.

Default

<primitives.common.Colors.Black>

fillColor

Fill Color.

Default

<primitives.common.Colors.Gray>

Functions

update

Makes full redraw of callout widget contents reevaluating all options.

primitives.connector.Config

Connector options class.

Summary
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
orientationTypeDiagram orientation.
connectorShapeTypeConnector shape type.
positionDefines connectors starting rectangle position.
positionDefines connectors ending rectangle position.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
colorConnector’s color.
lineTypeConnector’s line pattern.
labelAnnotation label text.
labelSizeDefines label size.
Functions
updateMakes full redraw of connector widget contents reevaluating all options.

Properties

graphicsType

Preferable graphics type.  If preferred graphics type is not supported widget switches to first available.

Default

<primitives.common.GraphicsType.SVG>

actualGraphicsType

Actual graphics type.

orientationType

Diagram orientation.

Default

primitives.common.OrientationType.Top

connectorShapeType

Connector shape type.

Default

<primitives.common.ConnectorShapeType.OneWay>

position

Defines connectors starting rectangle position.

Type

primitives.common.Rect.

position

Defines connectors ending rectangle position.

Type

primitives.common.Rect.

offset

Connector’s from and to points offset off the rectangles side.  Connectors connection points can be outside of rectangles and inside for negative offset value.  See also: primitives.common.Thickness

lineWidth

Border line width.

color

Connector’s color.

Default

<primitives.common.Colors.Black>

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

label

Annotation label text.  Label styled with css class name “bp-connector-label”.

labelSize

Defines label size.  It is needed to preserve space for label without overlapping connected items.

Default

new <primitives.common.Size>(60, 30);

Functions

update

Makes full redraw of connector widget contents reevaluating all options.

primitives.famdiagram.EventArgs

Event details class.

Summary
Properties
oldContextReference to associated previous item in hierarchy.
contextReference to associated new item in hierarchy.
parentItemsCollection of immidiate parent items of item in context.
positionAbsolute item position on diagram.
nameRelative object name.
cancelAllows cancelation of coupled event processing.

Properties

oldContext

Reference to associated previous item in hierarchy.

context

Reference to associated new item in hierarchy.

parentItems

Collection of immidiate parent items of item in context.

position

Absolute item position on diagram.

See also

primitives.common.Rect

name

Relative object name.

cancel

Allows cancelation of coupled event processing.  This option allows to cancel layout update and subsequent primitives.famdiagram.Config.onCursorChanged event in handler of primitives.famdiagram.Config.onCursorChanging event.

primitives.famdiagram.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.famdiagram.Config.templates

Summary
Properties
nameEvery template should have unique name.
itemSizeThis is item size of type primitives.common.Size, templates should have fixed size, so famDiagram uses this value in order to layout items properly.
itemBorderWidthItem template border width.
itemTemplateItem template, if it is null then default item template is used.
minimizedItemSizeThis is size dot used to display item in minimized form, type of primitives.common.Size.
highlightPaddingThis padding around item defines relative size of highlight object, ts type is primitives.common.Thickness.
highlightBorderWidthHighlight border width.
highlightTemplateHighlight template, if it is null then default highlight template is used.
cursorPaddingThis padding around item defines relative size of cursor object, its type is primitives.common.Thickness.
cursorBorderWidthCursor border width.
cursorTemplateCursor template, if it is null then default cursor template is used.

Properties

name

Every template should have unique name.  It is used as reference when custom template is defined in primitives.famdiagram.ItemConfig.templateName.

itemSize

This is item size of type primitives.common.Size, templates should have fixed size, so famDiagram 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.  It supposed to be div html element containing named elements inside for setting them in primitives.famdiagram.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.

highlightBorderWidth

Highlight border width.

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.famdiagram.Config.onHighlightRender event.

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.  It supposed to be div html element containing named elements inside for setting them in primitives.famdiagram.Config.onCursorRender event.

primitives.famdiagram.ButtonConfig

Options class.  Custom user button options class.  Buttons displayed on the right side of items.  See jQuery UI Button options description for details.  In order to receive button click event make binding to primitives.famdiagram.Config.onButtonClick.

See Also

primitives.famdiagram.Config.buttons

Summary
Properties
nameIt should be unique string name of the button.
iconName of icon used in jQuery UI.
textWhether to show any text -when set to false (display no text), icon must be enabled, otherwise it’ll be ignored.
labelText to show on the button.
tooltipButton tooltip content.
sizeSize of the button of type primitives.common.Size.

Properties

name

It should be unique string name of the button.  It is needed to distinguish click events from different butons.

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.

tooltip

Button tooltip content.

size

Size of the button of type primitives.common.Size.

primitives.famdiagram.Config

jQuery famDiagram Widget options class.  Multi-parent hierarchical chart configuration.

Summary
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
pageFitModeDefines the way diagram is fit into page.
minimalVisibilityDefines minimal allowed item form size for page fit mode.
orientationTypeChart orientation.
verticalAlignmentDefines items vertical alignment relative to each other within one level of hierarchy.
groupByTypeDefines the way items are grouped in multiparent chart.
emptyDiagramMessageEmpty message in order to avoid blank screen.
itemsThis is chart items collection.
annotationsDefines array of annotaions objects.
cursorItem
highlightItemHighlighted item id.
selectedItemsDefines array of selected item ids.
hasSelectorCheckboxThis option controls selection check boxes visibility.
selectCheckBoxLabelSelect check box label.
selectionPathModeDefines the way items between root item and selectedItems displayed in diagram.
templatesCustom user templates collection.
defaultTemplateNameThis is template name used to render items having no primitives.famdiagram.ItemConfig.templateName defined.
hasButtonsThis option controls user buttons visibility.
buttonsCustom user buttons displayed on right side of item.
Events
onHighlightChangingNotifies about changing highlight item primitives.famdiagram.Config.highlightItem in diagram.
onHighlightChangedNotifies about changed highlight item primitives.famdiagram.Config.highlightItem in diagram.
onCursorChangingNotifies about changing cursor item primitives.famdiagram.Config.cursorItem in diagram.
onCursorChangedNotifies about changed cursor item primitives.famdiagram.Config.cursorItem in diagram .
onSelectionChangingNotifies about changing selected items collection of primitives.famdiagram.Config.selectedItems.
onSelectionChangedNotifies about changes in collection of primitives.famdiagram.Config.selectedItems.
onButtonClickNotifies about click of custom user button defined in colelction of primitives.famdiagram.Config.buttons.
onMouseClickOn mouse click event.
onItemRenderItem templates don’t provide means to bind data of items into templates.
onHighlightRenderIf user defined custom highlight template for item template then this method is called to populate it with context data.
onCursorRenderIf user defined custom cursor template for item template then this method is called to populate it with context data.
Properties
normalLevelShiftDefines interval after level of items in diagram having items in normal state.
dotLevelShiftDefines interval after level of items in diagram having all items in dot state.
lineLevelShiftDefines interval after level of items in diagram having items in line state.
normalItemsIntervalDefines interval between items at the same level in diagram having items in normal state.
dotItemsIntervalDefines interval between items at the same level in diagram having items in dot state.
lineItemsIntervalDefines interval between items at the same level in diagram having items in line state.
cousinsIntervalMultiplierUse this interval multiplier between cousins in hiearchy.
Functions
updateMakes full redraw of diagram contents reevaluating all options.
Properties
itemTitleFirstFontColorThis property customizes default template title font color.
itemTitleSecondFontColorDefault template title second font color.
linesColorConnectors lines color.
linesWidthConnectors lines width.
linesTypeConnectors line pattern.
linesPaletteThis collection contains elements of type PaletteItemConfig.
showCalloutThis option controls callout visibility for dotted items.
defaultCalloutTemplateNameThis is template name used to render callouts for dotted items.
calloutfillColorAnnotation callout fill color.
calloutBorderColorAnnotation callout border color.
calloutOffsetAnnotation callout offset.
calloutCornerRadiusAnnotation callout corner radius.
calloutPointerWidthAnnotation callout pointer base width.
calloutLineWidthAnnotation callout border line width.
calloutOpacityAnnotation callout opacity.
buttonsPanelSizeUser buttons panel size.
groupTitlePanelSizeGroup title panel size.
checkBoxPanelSizeSelection check box panel size.
minimumScaleMinimum CSS3 scale transform.
maximumScaleMaximum CSS3 scale transform.
showLabelsThis option controls items labels visibility.
labelSizeDefines label size.
labelOffsetDefines label offset from dot in pixels.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to its dot.
labelFontSizeLabel font size.
labelFontFamilyLabel font family.
labelColorLabel color.
labelFontWeightFont weight: normal | bold
labelFontStyleFont style: normal | italic
enablePanningEnable chart panning with mouse drag & drop for desktop browsers.

Properties

graphicsType

Preferable graphics type.  If preferred graphics type is not supported widget switches to first available.

Default

<primitives.common.GraphicsType.SVG>

actualGraphicsType

Actual graphics type.

pageFitMode

Defines the way diagram is fit into page.  By default chart minimize items when it has not enough space to fit all of them into screen.  Chart has its maximum size when all items shown in full size and its minimal size when all items shown as dots.  It is equivalent of full zoom out of the chart items, dot size items are not readable, but such presentation of them gives possibility to overview chart layout.  So chart tryes to combine both presenation modes and keep chart as small as possible in order to give user possibility to see big picture.  Collapsed items provide ideal way for analitical reiew of diagram.  If chart shown in its maximum size when all items are unfolded, it becomes impossible to navigate betwen parents close to the root item.  In such mode chart is usable only at bottom levels when children are close to their parents.  If we try to navigate up to the root of hierarchy, gaps between parents sometimes as big as screen size.  So in order to solve these issues chart partially collapses hierarchy into dots and lines depending on this option.

See also

primitives.famdiagram.Config.minimalVisibility

Default

primitives.common.PageFitMode.FitToPage

minimalVisibility

Defines minimal allowed item form size for page fit mode.  See description for pageFitMode.

See also

primitives.famdiagram.Config.pageFitMode

Default

primitives.common.Visibility.Dot

orientationType

Chart orientation.  Chart can be rotated left, right and bottom.  Rotation to the right side is equivalent to left side placement in countries writing from right to left, so it is important for localization.

Default

primitives.common.OrientationType.Top

verticalAlignment

Defines items vertical alignment relative to each other within one level of hierarchy.  It does not affect levels having same size items.

Default

<primitives.common.VerticalAlignmentType.Middle>

groupByType

Defines the way items are grouped in multiparent chart.  By default chart tries to keep all parent close to each other.

Default

primitives.common.GroupByType.Parents

emptyDiagramMessage

Empty message in order to avoid blank screen.  This option is supposed to say user that chart is empty when no data inside.

items

This is chart items collection.  It is regular array of items of type ItemConfig.  Items reference each other via parents collection property.  So every item may have multiple parents in chart.  If parents collection is empty or set to null then item supposed to be root parent.  If items loop each other they are ignored as well.  It is applications responsiblity to avoid such issues.

See Also

primitives.famdiagram.ItemConfig primitives.famdiagram.ItemConfig.id primitives.famdiagram.ItemConfig.parents

annotations

Defines array of annotaions objects.  Chart supports several types of annotations.  They are drawn on top of chart and they may block view of some of them.  So chart’s layout mechanism does not account available annotations.  Don’t over use this feature.  The design assumes only few of them being displayed simultanuosly.  This is especially true for connectors.

See also

primitives.famdiagram.ConnectorAnnotationConfig primitives.famdiagram.ShapeAnnotationConfig

cursorItem

Cursor item idit is single item selection mode, user selects new cursor item on mouse click.  Cursor defines current local zoom placement or in other words current navigation item in the chart, all items relative to cursor always shoun in full size.  So user can see all possible items around cursor in full size and can continue navigation around chart.  So when user navigates from one item to another clicking on thems and changing cursor item in chart, chart minimizes items going out of cursor scope and shows in full size items relative to new cursor position.  If it is null then no cursor shown on diagram.

See Also

primitives.famdiagram.ItemConfig.id primitives.famdiagram.Config.onCursorChanging primitives.famdiagram.Config.onCursorChanged

highlightItem

Highlighted item id.  Highlight is mouse over affect, but using this option applicatin can set highlight at any item in the chart programmatically.  It can be used for chart syncronization with other controls on UI having mouse over effect.  See primitives.famdiagram.Config.update method arguments description for fast chart update.  If it is null then no highlight shown on diagram.

See Also

primitives.famdiagram.ItemConfig.id primitives.famdiagram.Config.onHighlightChanging primitives.famdiagram.Config.onHighlightChanged

selectedItems

Defines array of selected item ids.  Chart allows to select items via checking checkboxes under items.  Checkboxes are shown only for full size items.  So when item is selected it is always shown in full size, so check box always visible for selcted items.  User can navigate around large diagram and check intrested items in order to keep them opened.  So that way chart provides means to show several items on large diagram and fit everything into minimal space ideally into available screen space.  Application can select items programmatically using this array or receive notifications from chart about user selections with following events.

See Also

primitives.famdiagram.ItemConfig.id primitives.famdiagram.Config.onSelectionChanging primitives.famdiagram.Config.onSelectionChanged

hasSelectorCheckbox

This option controls selection check boxes visibility.

AutoCheckbox shown only for current cursor item only.
TrueEvery full size item has selection check box.
FalseNo check boxes.  Application can still programmatically select some items in the chart.  Application may provide custom item template having checkbox inside of item.  If application defined check box inside of item template has name=”checkbox” it is auto used as default selection check box.

Default

primitives.common.Enabled.Auto

See Also

primitives.famdiagram.ItemConfig.hasSelectorCheckbox primitives.famdiagram.Config.onSelectionChanging primitives.famdiagram.Config.onSelectionChanged

selectCheckBoxLabel

Select check box label.

selectionPathMode

Defines the way items between root item and selectedItems displayed in diagram.  Chart always shows all items between cursor item and its root in full size.  But if cursor positioned on root item, then chart shows in full size only selected items in the chart.  So this option controls items size between selected items and root item of the chart.  By default all items betwen root and selected items shown in full size.

Default

primitives.common.SelectionPathMode.FullStack

templates

Custom user templates collection.  TemplateConfig is complex object providing options to customize item’s content template, cursor tempate and highlight template.  Every template config should have unique name property, which is used by chart and its item configs to reference them.  Chart’s defaultTemplateName allows to make template default for all items in the chart.  On other hand user may define templates to individual items in the chart by templateName property of item config.

See also

primitives.famdiagram.TemplateConfig primitives.famdiagram.Config.defaultTemplateName primitives.famdiagram.ItemConfig.templateName

hasButtons

This option controls user buttons visibility.

AutoButtons visible only for cursor item.
TrueEvery normal item has buttons visible.
FalseNo buttons.

Default

primitives.common.Enabled.Auto

buttons

Custom user buttons displayed on right side of item.  This collection provides simple way to define context buttons for every item.  The only limitation, they are all the same.  So if you need to have unique buttons for every item, then you have to customize cursor templates and manually create custom buttons inside of them.

See also

primitives.famdiagram.ButtonConfig

Events

onHighlightChanging

Notifies about changing highlight item primitives.famdiagram.Config.highlightItem in diagram.  This coupled event with primitives.famdiagram.Config.onHighlightChanged, it is fired before highlight update.

See also

primitives.famdiagram.EventArgs

onHighlightChanged

Notifies about changed highlight item primitives.famdiagram.Config.highlightItem in diagram.

See also

primitives.famdiagram.EventArgs

onCursorChanging

Notifies about changing cursor item primitives.famdiagram.Config.cursorItem in diagram.  This coupled event with primitives.famdiagram.Config.onCursorChanged, it is fired before layout update.

See also

primitives.famdiagram.EventArgs

onCursorChanged

Notifies about changed cursor item primitives.famdiagram.Config.cursorItem in diagram .

See also

primitives.famdiagram.EventArgs

onSelectionChanging

Notifies about changing selected items collection of primitives.famdiagram.Config.selectedItems.

See also

primitives.famdiagram.EventArgs

onSelectionChanged

Notifies about changes in collection of primitives.famdiagram.Config.selectedItems.

See also

primitives.famdiagram.EventArgs

onButtonClick

Notifies about click of custom user button defined in colelction of primitives.famdiagram.Config.buttons.

See also

primitives.famdiagram.EventArgs

onMouseClick

On mouse click event.

See also

primitives.famdiagram.EventArgs

onItemRender

Item templates don’t provide means to bind data of items into templates.  So this event handler gives application such possibility.  If application uses custom templates then this method is called to populate template with items properties.

See also

primitives.common.RenderEventArgs primitives.famdiagram.TemplateConfig primitives.famdiagram.Config.templates

onHighlightRender

If user defined custom highlight template for item template then this method is called to populate it with context data.

See also

primitives.common.RenderEventArgs primitives.famdiagram.TemplateConfig primitives.famdiagram.Config.templates

onCursorRender

If user defined custom cursor template for item template then this method is called to populate it with context data.

See also

primitives.common.RenderEventArgs primitives.famdiagram.TemplateConfig primitives.famdiagram.Config.templates

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 all 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 between cousins in hiearchy.  The idea of this option to make extra space between cousins.  So children belonging to different parents have extra gap between them.

Functions

update

Makes full redraw of diagram contents reevaluating all options.

Parameters

updateMode: This parameter defines severaty of update primitives.common.UpdateMode.  For example primitives.common.UpdateMode.Refresh updates only items and selection reusing existing elements where ever it is possible.

See also

primitives.common.UpdateMode

Default

primitives.common.UpdateMode.Recreate

Properties

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.famdiagram.Config.itemTitleSecondFontColor.

See Also

primitives.famdiagram.ItemConfig.itemTitleColor primitives.famdiagram.Config.itemTitleSecondFontColor primitives.common.highestContrast

itemTitleSecondFontColor

Default template title second font color.

linesColor

Connectors lines color.  Connectors are basic connections betwen chart items defining their logical relationships, don’t mix with connector annotations.

linesWidth

Connectors lines width.

linesType

Connectors line pattern.

Default

primitives.common.LineType.Solid

linesPalette

This collection contains elements of type PaletteItemConfig.  It is used to draw connector lines between families in different styles.  It is similar concept to regular line chart having lines intersections.  If this collection is empty then default linesColor, linesWidth and linesType are used for all connector lines.

See Also

primitives.famdiagram.PaletteItemConfig

showCallout

This option controls callout visibility for dotted items.

Default

true

defaultCalloutTemplateName

This is template name used to render callouts for dotted items.  Actual callout template name is defined by following sequence: primitives.famdiagram.ItemConfig.calloutTemplateName primitives.famdiagram.ItemConfig.templateName primitives.famdiagram.Config.defaultCalloutTemplateName primitives.famdiagram.Config.defaultTemplateName

See Also

primitives.famdiagram.Config.templates collection property.

Default

null

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.

buttonsPanelSize

User buttons panel size.

groupTitlePanelSize

Group title panel size.

checkBoxPanelSize

Selection check box panel size.

minimumScale

Minimum CSS3 scale transform.  Available on mobile safary only.

maximumScale

Maximum CSS3 scale transform.  Available on mobile safary only.

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.

Autodepends on available space.
Truealways shown.
Falsehidden.

See Also

primitives.famdiagram.ItemConfig.label primitives.famdiagram.Config.labelSize primitives.famdiagram.Config.normalItemsInterval primitives.famdiagram.Config.dotItemsInterval primitives.famdiagram.Config.lineItemsInterval primitives.famdiagram.Config.normalLevelShift primitives.famdiagram.Config.dotLevelShift primitives.famdiagram.Config.lineLevelShift

Default

primitives.common.Enabled.Auto

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.

Default

new <primitives.common.Size>(80, 24);

labelOffset

Defines label offset from dot in pixels.

Default

1;

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.common.PlacementType.Top

labelFontSize

Label font size.

Default

10px

labelFontFamily

Label font family.

Default

”Arial”

labelColor

Label color.

Default

primitives.common.Colors.Black

labelFontWeight

Font weight: normal | bold

Default

”normal”

labelFontStyle

Font style: normal | italic

Default

”normal”

enablePanning

Enable chart panning with mouse drag & drop for desktop browsers.

Default

true

primitives.famdiagram.ConnectorAnnotationConfig

Options class.  Populate annotation collection with instances of this objects to draw connector between two items.

See Also

primitives.famdiagram.Config.annotations

Summary
Properties
annotationTypeConnector shape type.
zOrderTypeDefines connector Z order placement relative to chart items.
fromItemReference to from item in hierarchy.
toItemReference to from item in hierarchy.
connectorShapeTypeConnector shape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
colorConnector’s color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.

Properties

annotationType

Connector shape type.  Set this property to its default value if you create connector annotation without this prototype object.

Default

primitives.common.AnnotationType.Connector

zOrderType

Defines connector Z order placement relative to chart items.

Default

primitives.common.ZOrderType.Foreground

fromItem

Reference to from item in hierarchy.  See Also: primitives.famdiagram.ItemConfig.id

toItem

Reference to from item in hierarchy.  See Also: primitives.famdiagram.ItemConfig.id

connectorShapeType

Connector shape type.

Default

<primitives.common.ConnectorShapeType.OneWay>

offset

Connector’s from and to points offset off the rectangles side.  Connectors connection points can be outside of rectangles and inside for negative offset value.  See also: primitives.common.Thickness

lineWidth

Border line width.

color

Connector’s color.

Default

<primitives.common.Colors.Black>

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

selectItems

Make items shown always shown in normal state.

label

Annotation label text.  Label styled with css class name “bp-connector-label”.

labelSize

Annotation label size.

Default

new <primitives.common.Size>(60, 30);

primitives.famdiagram.ItemConfig

Defines item in family chart hierarchy.  User is supposed to create hierarchy of this items and assign it to primitives.famdiagram.Config.items collection property.  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.famdiagram.Config.items

Summary
Properties
idUnique item id.
parentsCollection of parent id’s.
titleDefault template title property.
descriptionDefault template description element.
imageUrl to image.
contextUser context object.
itemTitleColorDefault template title background color.
groupTitleAuxiliary group title property.
groupTitleColorGroup title background color.
isVisibleIf it is true then item is shown and selectable in hierarchy.
hasSelectorCheckboxIf it is true then selection check box is shown for the item.
hasButtonsThis option controls buttons panel visibility.
templateNameThis is template name used to render this item.
showCalloutThis option controls items callout visibility.
calloutTemplateNameThis is template name used to render callout for dotted item.
labelItems label text.
showLabelThis option controls items label visibility.
labelSizeDefines label size.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to the item.

Properties

id

Unique item id.

parents

Collection of parent id’s.  If parents collection is empty [] then item placed as a root item.

title

Default template title property.

description

Default template description element.

image

Url to image.  This property is used in default template.

context

User context object.

itemTitleColor

Default template title background color.

groupTitle

Auxiliary group title property.  Displayed vertically on the side of item.

groupTitleColor

Group title background color.

isVisible

If it is true then item is shown and selectable in hierarchy.  If item is hidden and it has visible children then only connector line is drawn instead of it.

TrueItem is shown.
FalseItem is hidden.

Default

true

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.

AutoDepends on primitives.famdiagram.Config.hasSelectorCheckbox setting.
TrueSelection check box is visible.
FalseNo selection check box.

Default

primitives.common.Enabled.Auto

hasButtons

This option controls buttons panel visibility.

AutoDepends on primitives.famdiagram.Config.hasButtons setting.
TrueHas buttons panel.
FalseNo buttons panel.

Default

primitives.common.Enabled.Auto

templateName

This is template name used to render this item.

See Also

primitives.famdiagram.TemplateConfig primitives.famdiagram.Config.templates collection property.

showCallout

This option controls items callout visibility.

Autodepends on primitives.famdiagram.Config.showCallout option
Trueshown
Falsehidden

Default

primitives.common.Enabled.Auto

calloutTemplateName

This is template name used to render callout for dotted item.  Actual callout template name is defined by following sequence: primitives.famdiagram.ItemConfig.calloutTemplateName primitives.famdiagram.ItemConfig.templateName primitives.famdiagram.Config.defaultCalloutTemplateName primitives.famdiagram.Config.defaultTemplateName

See Also

primitives.famdiagram.Config.templates collection property.  Default: null

label

Items label text.

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.

Autodepends on primitives.famdiagram.Config.labelOrientation setting.
Truealways shown.
Falsehidden.

See Also

primitives.famdiagram.ItemConfig.label primitives.famdiagram.Config.labelSize

Default

primitives.common.Enabled.Auto

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.famdiagram.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.famdiagram.Config.labelOrientation setting.

See Also

primitives.famdiagram.Config.labelOrientation primitives.text.TextOrientationType

Default

<primitives.text.TextOrientationType.Auto>

primitives.famdiagram.PaletteItemConfig

This class is used to define cross family connectors styles.  Multi-parent charts are supposed to have multiple cross hierarchy connectors, so in order to trace them more easely on chart every connector may have separate style.  It is the same strategy as for visualization of regular line charts.

See Also

primitives.famdiagram.Config.linesPalette

Summary
Properties
lineColorLine color.
lineWidthLine width.
lineTypeLine pattern.

Properties

lineColor

Line color.

Default

<primitives.common.Colors.Silver>

lineWidth

Line width.  Default: 1

lineType

primitives.famdiagram.ShapeAnnotationConfig

Options class.  Populate annotation collection with instances of this objects to draw shape benith or on top of several items.  Shape is drawn as rectangular area.  See Also: primitives.famdiagram.Config.annotations

Summary
Properties
annotationTypeConnector shape type.
zOrderTypeDefines shape Z order placement relative to chart items.
itemsArray of items ids in hierarchy.
shapeTypeShape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
cornerRadiusBody corner radius in percents or pixels.
opacityBackground color opacity.
borderColorShape border line color.
fillColorFill Color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.
labelPlacementDefines label placement relative to the shape.
labelOffsetDefines label offset from shape in pixels.

Properties

annotationType

Connector shape type.  Set this property to its default value if you create shape annotation without this prototype object.

Default

primitives.common.AnnotationType.Connector

zOrderType

Defines shape Z order placement relative to chart items.  Chart select the best order depending on shape type.

Default

primitives.common.ZOrderType.Auto

items

Array of items ids in hierarchy.  See Also: primitives.famdiagram.ItemConfig.id

shapeType

Shape type.

Default

<primitives.common.ShapeType.Rectangle>

offset

Connector’s from and to points offset off the rectangles side.  Connectors connection points can be outside of rectangles and inside for negative offset value.  See also: primitives.common.Thickness

lineWidth

Border line width.

cornerRadius

Body corner radius in percents or pixels.  For applicable shapes only.

opacity

Background color opacity.  For applicable shapes only.

borderColor

Shape border line color.

Default

null

fillColor

Fill Color.

Default

null

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

selectItems

Make items shown always shown in normal state.

label

Annotation label text.  Label styled with css class name “bp-connector-label”.

labelSize

Annotation label size.

Default

new <primitives.common.Size>(60, 30);

labelPlacement

labelOffset

Defines label offset from shape in pixels.

Default

4;

primitives.orgdiagram.EventArgs

Event details class.

Summary
Properties
oldContextReference to associated previous item in hierarchy.
contextReference to associated new item in hierarchy.
parentItemReference parent item of item in context.
positionAbsolute item position on diagram.
nameRelative object name.
cancelAllows cancelation of coupled event processing.

Properties

oldContext

Reference to associated previous item in hierarchy.

context

Reference to associated new item in hierarchy.

parentItem

Reference parent item of item in context.

position

Absolute item position on diagram.

See also

primitives.common.Rect

name

Relative object name.

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.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
nameEvery template should have unique name.
itemSizeThis is item size of type primitives.common.Size, templates should have fixed size, so orgDiagram uses this value in order to layout items properly.
itemBorderWidthItem template border width.
itemTemplateItem template, if it is null then default item template is used.
minimizedItemSizeThis is size dot used to display item in minimized form, type of primitives.common.Size.
highlightPaddingThis padding around item defines relative size of highlight object, ts type is primitives.common.Thickness.
highlightBorderWidthHighlight border width.
highlightTemplateHighlight template, if it is null then default highlight template is used.
cursorPaddingThis padding around item defines relative size of cursor object, its type is primitives.common.Thickness.
cursorBorderWidthCursor border width.
cursorTemplateCursor template, if it is null then default cursor template is used.

Properties

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.

itemBorderWidth

Item template border width.

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.

highlightBorderWidth

Highlight border width.

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.

cursorBorderWidth

Cursor border width.

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
nameIt should be unique string name of the button.
iconName of icon used in jQuery UI.
textWhether to show any text -when set to false (display no text), icon must be enabled, otherwise it’ll be ignored.
labelText to show on the button.
tooltipButton tooltip content.
sizeSize of the button of type primitives.common.Size.

Properties

name

It should be unique string name of the button.  It is needed to distinguish click events from different butons.

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.

tooltip

Button tooltip content.

size

Size of the button of type primitives.common.Size.

primitives.orgdiagram.Config

jQuery orgDiagram Widget options class.  Organizational chart configuration object.

Summary
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
pageFitModeDefines the way diagram is fit into page.
minimalVisibilityDefines minimal allowed item form size for page fit mode.
orientationTypeChart orientation.
horizontalAlignmentDefines items horizontal alignment relative to their parent.
verticalAlignmentDefines items vertical alignment relative to each other within one level of hierarchy.
connectorTypeDefines connector lines style for dot and line elements.
emptyDiagramMessageEmpty message in order to avoid blank screen.
itemsThis is chart items collection.
annotationsDefines array of annotaions objects.
cursorItem
highlightItemHighlighted item id.
selectedItemsDefines array of selected item ids.
hasSelectorCheckboxThis option controls selection check boxes visibility.
selectCheckBoxLabelSelect check box label.
selectionPathModeDefines the way items between root item and selectedItems displayed in diagram.
templatesCustom user templates collection.
defaultTemplateNameThis is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined.
hasButtonsThis option controls user buttons visibility.
buttonsCustom user buttons displayed on right side of item.
Events
onHighlightChangingNotifies about changing highlight item primitives.orgdiagram.Config.highlightItem in diagram.
onHighlightChangedNotifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram.
onCursorChangingNotifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram.
onCursorChangedNotifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram .
onSelectionChangingNotifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems.
onSelectionChangedNotifies about changes in collection of primitives.orgdiagram.Config.selectedItems.
onButtonClickNotifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons.
onMouseClickOn mouse click event.
onItemRenderItem templates don’t provide means to bind data of items into templates.
onHighlightRenderIf user defined custom highlight template for item template then this method is called to populate it with context data.
onCursorRenderIf user defined custom cursor template for item template then this method is called to populate it with context data.
Properties
normalLevelShiftDefines interval after level of items in diagram having items in normal state.
dotLevelShiftDefines interval after level of items in diagram having all items in dot state.
lineLevelShiftDefines interval after level of items in diagram having items in line state.
normalItemsIntervalDefines interval between items at the same level in diagram having items in normal state.
dotItemsIntervalDefines interval between items at the same level in diagram having items in dot state.
lineItemsIntervalDefines interval between items at the same level in diagram having items in line state.
cousinsIntervalMultiplierUse this interval multiplier between cousins in hiearchy.
Functions
updateMakes full redraw of diagram contents reevaluating all options.
Properties
itemTitleFirstFontColorThis property customizes default template title font color.
itemTitleSecondFontColorDefault template title second font color.
linesColorConnectors lines color.
linesWidthConnectors lines width.
linesTypeConnectors line pattern.
highlightLinesColorConnectors highlight line color.
highlightLinesWidthConnectors highlight line width.
highlightLinesTypeConnectors highlight line pattern.
showCalloutThis option controls callout visibility for dotted items.
defaultCalloutTemplateNameThis is template name used to render callouts for dotted items.
calloutfillColorAnnotation callout fill color.
calloutBorderColorAnnotation callout border color.
calloutOffsetAnnotation callout offset.
calloutCornerRadiusAnnotation callout corner radius.
calloutPointerWidthAnnotation callout pointer base width.
calloutLineWidthAnnotation callout border line width.
calloutOpacityAnnotation callout opacity.
childrenPlacementTypeDefines children placement form.
leavesPlacementTypeDefines leaves placement form.
maximumColumnsInMatrixMaximum number of columns for matrix leaves layout.
buttonsPanelSizeUser buttons panel size.
groupTitlePanelSizeGroup title panel size.
checkBoxPanelSizeSelection check box panel size.
minimumScaleMinimum CSS3 scale transform.
maximumScaleMaximum CSS3 scale transform.
showLabelsThis option controls items labels visibility.
labelSizeDefines label size.
labelOffsetDefines label offset from dot in pixels.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to its dot.
labelFontSizeLabel font size.
labelFontFamilyLabel font family.
labelColorLabel color.
labelFontWeightFont weight: normal | bold
labelFontStyleFont style: normal | italic
enablePanningEnable chart panning with mouse drag & drop for desktop browsers.

Properties

graphicsType

Preferable graphics type.  If preferred graphics type is not supported widget switches to first available.

Default

<primitives.common.GraphicsType.SVG>

actualGraphicsType

Actual graphics type.

pageFitMode

Defines the way diagram is fit into page.  By default chart minimize items when it has not enough space to fit all of them into screen.  Chart has its maximum size when all items shown in full size and its minimal size when all items shown as dots.  It is equivalent of full zoom out of the chart items, dot size items are not readable, but such presentation of them gives possibility to overview chart layout.  So chart tryes to combine both presenation modes and keep chart as small as possible in order to give user possibility to see big picture.  Collapsed items provide ideal way for analitical reiew of organizational diagram.  If chart shown in its maximum size when all items are unfolded, it becomes impossible to navigate betwen parents close to the root item.  In such mode chart is usable only at bottom levels when children are close to their parents.  If we try to navigate up to the root of hierarchy, gaps between parents sometimes as big as screen size.  So in order to solve these issues chart partially collapses hierarchy into dots and lines depending on this option.

See also

primitives.orgdiagram.Config.minimalVisibility

Default

primitives.common.PageFitMode.FitToPage

minimalVisibility

Defines minimal allowed item form size for page fit mode.  See description for pageFitMode.

See also

primitives.orgdiagram.Config.pageFitMode

Default

primitives.common.Visibility.Dot

orientationType

Chart orientation.  Chart can be rotated left, right and bottom.  Rotation to the right side is equivalent to left side placement in countries writing from right to left, so it is important for localization.

Default

primitives.common.OrientationType.Top

horizontalAlignment

Defines items horizontal alignment relative to their parent.  This is usefull for control localization for right-to-left countries.

Default

primitives.common.HorizontalAlignmentType.Center

verticalAlignment

Defines items vertical alignment relative to each other within one level of hierarchy.  It does not affect levels having same size items.

Default

<primitives.common.VerticalAlignmentType.Middle>

connectorType

Defines connector lines style for dot and line elements.  If elements are in their normal full size form they are connected with squired connection lines.  So this option controls connector lines style for dots only.

Default

primitives.common.ConnectorType.Squared

emptyDiagramMessage

Empty message in order to avoid blank screen.  This option is supposed to say user that chart is empty when no data inside.

items

This is chart items collection.  It is regular array of items of type ItemConfig.  Items reference each other via parent property.  So every item may have only one parent in chart.  If parent set to null then item displayed at root of chart.  Chart can have multiple root items simultaniously.  If item references missing item, then it is ignored.  If items loop each other they are ignored as well.  It is applications responsiblity to avoid such issues.

See Also

primitives.orgdiagram.ItemConfig primitives.orgdiagram.ItemConfig.id primitives.orgdiagram.ItemConfig.parent

annotations

Defines array of annotaions objects.  Chart supports several types of annotations.  They are drawn on top of chart and they may block view of some of them.  So chart’s layout mechanism does not account available annotations.  Don’t over use this feature.  The design assumes only few of them being displayed simultanuosly.  This is especially true for connectors.

See also

primitives.orgdiagram.ConnectorAnnotationConfig primitives.orgdiagram.ShapeAnnotationConfig

cursorItem

Cursor item idit is single item selection mode, user selects new cursor item on mouse click.  Cursor defines current local zoom placement or in other words current navigation item in the chart, all items relative to cursor always shoun in full size.  So user can see all possible items around cursor in full size and can continue navigation around chart.  So when user navigates from one item to another clicking on thems and changing cursor item in chart, chart minimizes items going out of cursor scope and shows in full size items relative to new cursor position.  If it is null then no cursor shown on diagram.

See Also

primitives.orgdiagram.ItemConfig.id primitives.orgdiagram.Config.onCursorChanging primitives.orgdiagram.Config.onCursorChanged

highlightItem

Highlighted item id.  Highlight is mouse over affect, but using this option applicatin can set highlight at any item in the chart programmatically.  It can be used for chart syncronization with other controls on UI having mouse over effect.  See primitives.orgdiagram.Config.update method arguments description for fast chart update.  If it is null then no highlight shown on diagram.

See Also

primitives.orgdiagram.ItemConfig.id primitives.orgdiagram.Config.onHighlightChanging primitives.orgdiagram.Config.onHighlightChanged

selectedItems

Defines array of selected item ids.  Chart allows to select items via checking checkboxes under items.  Checkboxes are shown only for full size items.  So when item is selected it is always shown in full size, so check box always visible for selcted items.  User can navigate around large diagram and check intrested items in order to keep them opened.  So that way chart provides means to show several items on large diagram and fit everything into minimal space ideally into available screen space.  Application can select items programmatically using this array or receive notifications from chart about user selections with following events.

See Also

primitives.orgdiagram.ItemConfig.id primitives.orgdiagram.Config.onSelectionChanging primitives.orgdiagram.Config.onSelectionChanged

hasSelectorCheckbox

This option controls selection check boxes visibility.

AutoCheckbox shown only for current cursor item only.
TrueEvery full size item has selection check box.
FalseNo check boxes.  Application can still programmatically select some items in the chart.  Application may provide custom item template having checkbox inside of item.  If application defined check box inside of item template has name=”checkbox” it is auto used as default selection check box.

Default

primitives.common.Enabled.Auto

See Also

primitives.orgdiagram.ItemConfig.hasSelectorCheckbox primitives.orgdiagram.Config.onSelectionChanging primitives.orgdiagram.Config.onSelectionChanged

selectCheckBoxLabel

Select check box label.

selectionPathMode

Defines the way items between root item and selectedItems displayed in diagram.  Chart always shows all items between cursor item and its root in full size.  But if cursor positioned on root item, then chart shows in full size only selected items in the chart.  So this option controls items size between selected items and root item of the chart.  By default all items betwen root and selected items shown in full size.

Default

primitives.common.SelectionPathMode.FullStack

templates

Custom user templates collection.  TemplateConfig is complex object providing options to customize item’s content template, cursor tempate and highlight template.  Every template config should have unique name property, which is used by chart and its item configs to reference them.  Chart’s defaultTemplateName allows to make template default for all items in the chart.  On other hand user may define templates to individual items in the chart by templateName property of item config.

See also

primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.defaultTemplateName primitives.orgdiagram.ItemConfig.templateName

hasButtons

This option controls user buttons visibility.

AutoButtons visible only for cursor item.
TrueEvery normal item has buttons visible.
FalseNo buttons.

Default

primitives.common.Enabled.Auto

buttons

Custom user buttons displayed on right side of item.  This collection provides simple way to define context buttons for every item.  The only limitation, they are all the same.  So if you need to have unique buttons for every item, then you have to customize cursor templates and manually create custom buttons inside of them.

See also

primitives.orgdiagram.ButtonConfig

Events

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

primitives.orgdiagram.EventArgs

onHighlightChanged

Notifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram.

See also

primitives.orgdiagram.EventArgs

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

primitives.orgdiagram.EventArgs

onCursorChanged

Notifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram .

See also

primitives.orgdiagram.EventArgs

onSelectionChanging

Notifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems.

See also

primitives.orgdiagram.EventArgs

onSelectionChanged

Notifies about changes in collection of primitives.orgdiagram.Config.selectedItems.

See also

primitives.orgdiagram.EventArgs

onButtonClick

Notifies about click of custom user button defined in colelction of primitives.orgdiagram.Config.buttons.

See also

primitives.orgdiagram.EventArgs

onMouseClick

On mouse click event.

See also

primitives.orgdiagram.EventArgs

onItemRender

Item templates don’t provide means to bind data of items into templates.  So this event handler gives application such possibility.  If application uses custom templates then this method is called to populate template with items properties.

See also

primitives.common.RenderEventArgs primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates

onHighlightRender

If user defined custom highlight template for item template then this method is called to populate it with context data.

See also

primitives.common.RenderEventArgs primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates

onCursorRender

If user defined custom cursor template for item template then this method is called to populate it with context data.

See also

primitives.common.RenderEventArgs primitives.orgdiagram.TemplateConfig primitives.orgdiagram.Config.templates

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 all 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 between cousins in hiearchy.  The idea of this option to make extra space between cousins.  So children belonging to different parents have extra gap between them.

Functions

update

Makes full redraw of diagram contents reevaluating all options.

Parameters

updateMode: This parameter defines severaty of update primitives.common.UpdateMode.  For example primitives.common.UpdateMode.Refresh updates only items and selection reusing existing elements where ever it is possible.

See also

primitives.common.UpdateMode

Default

primitives.common.UpdateMode.Recreate

Properties

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

itemTitleSecondFontColor

Default template title second font color.

linesColor

Connectors lines color.  Connectors are basic connections betwen chart items defining their logical relationships, don’t mix with connector annotations.

linesWidth

Connectors lines width.

linesType

Connectors line pattern.

Default

primitives.common.LineType.Solid

highlightLinesColor

Connectors highlight line color.  Connectors are basic connections betwen chart items defining their logical relationships, don’t mix with connector annotations.

highlightLinesWidth

Connectors highlight line width.

highlightLinesType

Connectors highlight line pattern.

Default

primitives.common.LineType.Solid

showCallout

This option controls callout visibility for dotted items.

Default

true

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

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.  Leaves are children having no sub children.

maximumColumnsInMatrix

Maximum number of columns for matrix leaves layout.  Leaves are children having no sub children.

buttonsPanelSize

User buttons panel size.

groupTitlePanelSize

Group title panel size.

checkBoxPanelSize

Selection check box panel size.

minimumScale

Minimum CSS3 scale transform.  Available on mobile safary only.

maximumScale

Maximum CSS3 scale transform.  Available on mobile safary only.

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.

Autodepends on available space.
Truealways shown.
Falsehidden.

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

primitives.common.Enabled.Auto

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.

Default

new <primitives.common.Size>(80, 24);

labelOffset

Defines label offset from dot in pixels.

Default

1;

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.common.PlacementType.Top

labelFontSize

Label font size.

Default

10px

labelFontFamily

Label font family.

Default

”Arial”

labelColor

Label color.

Default

primitives.common.Colors.Black

labelFontWeight

Font weight: normal | bold

Default

”normal”

labelFontStyle

Font style: normal | italic

Default

”normal”

enablePanning

Enable chart panning with mouse drag & drop for desktop browsers.

Default

true

primitives.orgdiagram.ConnectorAnnotationConfig

Options class.  Populate annotation collection with instances of this objects to draw connector between two items.

See Also

primitives.orgdiagram.Config.annotations

Summary
Properties
annotationTypeConnector shape type.
zOrderTypeDefines connector Z order placement relative to chart items.
fromItemReference to from item in hierarchy.
toItemReference to from item in hierarchy.
connectorShapeTypeConnector shape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
colorConnector’s color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.

Properties

annotationType

Connector shape type.  Set this property to its default value if you create connector annotation without this prototype object.

Default

primitives.common.AnnotationType.Connector

zOrderType

Defines connector Z order placement relative to chart items.

Default

primitives.common.ZOrderType.Foreground

fromItem

Reference to from item in hierarchy.  See Also: primitives.orgdiagram.ItemConfig.id

toItem

Reference to from item in hierarchy.  See Also: primitives.orgdiagram.ItemConfig.id

connectorShapeType

Connector shape type.

Default

<primitives.common.ConnectorShapeType.OneWay>

offset

Connector’s from and to points offset off the rectangles side.  Connectors connection points can be outside of rectangles and inside for negative offset value.  See also: primitives.common.Thickness

lineWidth

Border line width.

color

Connector’s color.

Default

<primitives.common.Colors.Black>

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

selectItems

Make items shown always shown in normal state.

label

Annotation label text.  Label styled with css class name “bp-connector-label”.

labelSize

Annotation label size.

Default

new <primitives.common.Size>(60, 30);

primitives.orgdiagram.PathAnnotationConfig

Options class.  Populate annotation collection with instances of this objects to draw path between items.  Path is drawn along base connection lines displaying relationships between item of the chart.  See Also: primitives.orgdiagram.Config.annotations

Summary
Properties
annotationTypeConnector shape type.
itemsArray of item ids in hierarchy.
selectItemsMake items shown always shown in normal state.

Properties

annotationType

Connector shape type.  Set this property to its default value if you create shape annotation without this prototype object.

Default

primitives.common.AnnotationType.Connector

items

Array of item ids in hierarchy.  See Also: primitives.orgdiagram.ItemConfig.id

selectItems

Make items shown always shown in normal state.

primitives.orgdiagram.ItemConfig

Defines item in diagram hierarchy.  User is supposed to create hierarchy of this items and assign it to primitives.orgdiagram.Config.items collection property.  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.items

Summary
Properties
idUnique item id.
parentParent id.
titleDefault template title property.
descriptionDefault template description element.
imageUrl to image.
contextUser context object.
itemTitleColorDefault template title background color.
groupTitleAuxiliary group title property.
groupTitleColorGroup title background color.
isVisibleIf it is true then item is shown and selectable in hierarchy.
hasSelectorCheckboxIf it is true then selection check box is shown for the item.
hasButtonsThis option controls buttons panel visibility.
itemTypeThis property defines how item should be shown.
adviserPlacementTypeIn case of item types primitives.orgdiagram.ItemType.Assistant and primitives.orgdiagram.ItemType.Adviser this option defines item placement side relative to parent.
childrenPlacementTypeDefines children placement form.
templateNameThis is template name used to render this item.
showCalloutThis option controls items callout visibility.
calloutTemplateNameThis is template name used to render callout for dotted item.
labelItems label text.
showLabelThis option controls items label visibility.
labelSizeDefines label size.
labelOrientationDefines label orientation.
labelPlacementDefines label placement relative to the item.

Properties

id

Unique item id.

parent

Parent id.  If parent is null then item placed as a root item.

title

Default template title property.

description

Default template description element.

image

Url to image.  This property is used in default template.

context

User context object.

itemTitleColor

Default template title background color.

groupTitle

Auxiliary group title property.  Displayed vertically on the side of item.

groupTitleColor

Group title background color.

isVisible

If it is true then item is shown and selectable in hierarchy.  If item is hidden and it has visible children then only connector line is drawn instead of it.

TrueItem is shown.
FalseItem is hidden.

Default

true

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.

AutoDepends on primitives.orgdiagram.Config.hasSelectorCheckbox setting.
TrueSelection check box is visible.
FalseNo selection check box.

Default

primitives.common.Enabled.Auto

hasButtons

This option controls buttons panel visibility.

AutoDepends on primitives.orgdiagram.Config.hasButtons setting.
TrueHas buttons panel.
FalseNo buttons panel.

Default

primitives.common.Enabled.Auto

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

primitives.orgdiagram.ItemType.Regular

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

primitives.common.AdviserPlacementType.Auto

childrenPlacementType

Defines children placement form.

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.

Autodepends on primitives.orgdiagram.Config.showCallout option
Trueshown
Falsehidden

Default

primitives.common.Enabled.Auto

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

label

Items label text.

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.

Autodepends on primitives.orgdiagram.Config.labelOrientation setting.
Truealways shown.
Falsehidden.

See Also

primitives.orgdiagram.ItemConfig.label primitives.orgdiagram.Config.labelSize

Default

primitives.common.Enabled.Auto

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>

primitives.orgdiagram.ShapeAnnotationConfig

Options class.  Populate annotation collection with instances of this objects to draw shape benith or on top of several items.  Shape is drawn as rectangular area.  See Also: primitives.orgdiagram.Config.annotations

Summary
Properties
annotationTypeConnector shape type.
zOrderTypeDefines shape Z order placement relative to chart items.
itemsArray of items ids in hierarchy.
shapeTypeShape type.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
cornerRadiusBody corner radius in percents or pixels.
opacityBackground color opacity.
borderColorShape border line color.
fillColorFill Color.
lineTypeConnector’s line pattern.
selectItemsMake items shown always shown in normal state.
labelAnnotation label text.
labelSizeAnnotation label size.
labelPlacementDefines label placement relative to the shape.
labelOffsetDefines label offset from shape in pixels.

Properties

annotationType

Connector shape type.  Set this property to its default value if you create shape annotation without this prototype object.

Default

primitives.common.AnnotationType.Connector

zOrderType

Defines shape Z order placement relative to chart items.  Chart select the best order depending on shape type.

Default

primitives.common.ZOrderType.Auto

items

Array of items ids in hierarchy.  See Also: primitives.orgdiagram.ItemConfig.id

shapeType

Shape type.

Default

<primitives.common.ShapeType.Rectangle>

offset

Connector’s from and to points offset off the rectangles side.  Connectors connection points can be outside of rectangles and inside for negative offset value.  See also: primitives.common.Thickness

lineWidth

Border line width.

cornerRadius

Body corner radius in percents or pixels.  For applicable shapes only.

opacity

Background color opacity.  For applicable shapes only.

borderColor

Shape border line color.

Default

null

fillColor

Fill Color.

Default

null

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

selectItems

Make items shown always shown in normal state.

label

Annotation label text.  Label styled with css class name “bp-connector-label”.

labelSize

Annotation label size.

Default

new <primitives.common.Size>(60, 30);

labelPlacement

labelOffset

Defines label offset from shape in pixels.

Default

4;

primitives.connector.Config

Connector options class.

Summary
Properties
graphicsTypePreferable graphics type.
actualGraphicsTypeActual graphics type.
orientationTypeDiagram orientation.
shapeTypeShape type.
positionDefines shapes rectangle position.
offsetConnector’s from and to points offset off the rectangles side.
lineWidthBorder line width.
cornerRadiusBody corner radius in percents or pixels.
opacityBackground color opacity.
borderColorShape border line color.
fillColorFill Color.
lineTypeConnector’s line pattern.
labelAnnotation label text.
labelSizeDefines label size.
labelPlacementDefines label placement relative to the shape.
labelOffsetDefines label offset from shape in pixels.
Functions
updateMakes full redraw of connector widget contents reevaluating all options.

Properties

graphicsType

Preferable graphics type.  If preferred graphics type is not supported widget switches to first available.

Default

<primitives.common.GraphicsType.SVG>

actualGraphicsType

Actual graphics type.

orientationType

Diagram orientation.

Default

primitives.common.OrientationType.Top

shapeType

Shape type.

Default

<primitives.common.ShapeType.Rectangle>

position

Defines shapes rectangle position.

Type

primitives.common.Rect.

offset

Connector’s from and to points offset off the rectangles side.  Connectors connection points can be outside of rectangles and inside for negative offset value.  See also: primitives.common.Thickness

lineWidth

Border line width.

cornerRadius

Body corner radius in percents or pixels.

opacity

Background color opacity.

borderColor

Shape border line color.

Default

<primitives.common.Colors.Black>

fillColor

Fill Color.

Default

<primitives.common.Colors.Gray>

lineType

Connector’s line pattern.

Default

primitives.common.LineType.Solid

label

Annotation label text.  Label styled with css class name “bp-connector-label”.

labelSize

Defines label size.  It is needed to preserve space for label without overlapping connected items.

Default

new <primitives.common.Size>(60, 30);

labelPlacement

labelOffset

Defines label offset from shape in pixels.

Default

4;

Functions

update

Makes full redraw of connector widget contents reevaluating all options.

primitives.common.isNullOrEmpty = function (value)
Indicates whether the specified string is null or an Empty string.
primitives.common.hashCode = function (value)
Returns hash code for specified string value.
primitives.common.attr = function (element,
attr)
This method assigns HTML element attributes only if one of them does not match its current value.
primitives.common.css = function (element,
attr)
This method assigns HTML element style attributes only if one of them does not match its current value.
primitives.common.indexOf = function (vector,
item)
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.supportsSVG = function ()
Indicates whether the browser supports SVG graphics.
primitives.common.supportsVML = function ()
Indicates whether the browser supports VML graphics.
primitives.common.supportsCanvas = function ()
Indicates whether the browser supports HTML Canvas graphics.
primitives.common.getColorHexValue = function (color)
Converts color string into HEX color string.
primitives.common.getColorName = function (color)
Converts color string into HTML color name string or return hex color string.
primitives.common.getRed = function (color)
Gets red value of HEX color string.
primitives.common.getGreen = function (color)
Gets green value of HEX color string.
primitives.common.getBlue = function (color)
Gets blue value of HEX color string.
primitives.common.beforeOpacity = function (color,
opacity)
Calculates before opacity color value producing color you need after applying opacity.
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.
primitives.common.luminosity = function (firstColor,
secondColor)
This function calculates luminosity between two HEX string colors.
primitives.common.Point.prototype.distanceTo = function (arg0,
arg1)
Returns distance to point.
primitives.common.Point.prototype.toString = function (units)
Returns rectangle location in form of CSS style string.
primitives.common.Rect.prototype.left = function ()
Gets the x-axis value of the left side of the rectangle.
primitives.common.Rect.prototype.top = function ()
Gets the y-axis value of the top side of the rectangle.
primitives.common.Rect.prototype.right = function ()
Gets the x-axis value of the right side of the rectangle.
primitives.common.Rect.prototype.bottom = function ()
Gets the y-axis value of the bottom of the rectangle.
primitives.common.Rect.prototype.verticalCenter = function ()
Gets the y-axis value of the center point of the rectangle.
primitives.common.Rect.prototype.horizontalCenter = function ()
Gets the x-axis value of the center point of the rectangle.
primitives.common.Rect.prototype.isEmpty = function ()
Gets the value that indicates whether the rectangle is the Empty rectangle.
primitives.common.Rect.prototype.offset = function (arg0,
arg1,
arg2,
arg3)
Expands the rectangle by using specified value in all directions.
primitives.common.Rect.prototype.translate = function (x,
y)
Moves the rectangle to by the specified horizontal and vertical amounts.
primitives.common.Rect.prototype.invert = function ()
Inverts rectangle.
primitives.common.Rect.prototype.contains = function (arg0,
arg1)
Indicates whether the rectangle contains the specified point.
primitives.common.Rect.prototype.cropByRect = function (rect)
Crops the rectangle by the boundaries of specified rectangle.
primitives.common.Rect.prototype.overlaps = function (rect)
Returns true if the rectangle overlaps specified rectangle.
primitives.common.Rect.prototype.addRect = function (arg0,
arg1,
arg2,
arg3)
Expands the current rectangle to contain specified rectangle.
primitives.common.Rect.prototype.getCSS = function (units)
Returns rectangle location and size in form of CSS style object.
primitives.common.Rect.prototype.toString = function (units)
Returns rectangle location and size in form of CSS style string.
primitives.common.Size.prototype.invert = function ()
Swaps width and height.
primitives.common.Thickness.prototype.isEmpty = function ()
Gets the value that indicates whether the thickness is the Empty.
primitives.common.Thickness.prototype.toString = function (units)
Returns thickness in form of CSS style string.
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.
Highlighted item id.
Defines array of selected item ids.
Custom user buttons displayed on right side of item.
This is template name used to render this item.
Highlighted item id.
Defines array of selected item ids.
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 chart items collection.
Makes full redraw of diagram contents reevaluating all options.
Defines minimal allowed item form size for page fit mode.
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.
Class describes the width, height and location of rectangle.
Positooned in the middle of the text box
Positooned in the middle of the text box
Depends on implementation
Regular solid line.
Vertical orientation having root item at the top.
Notifies about changed cursor item primitives.famdiagram.Config.cursorItem in diagram .
Notifies about changing cursor item primitives.famdiagram.Config.cursorItem in diagram.
Custom user templates collection.
Item templates don’t provide means to bind data of items into templates.
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.famdiagram.Config.buttons.
Defines minimal allowed item form size for page fit mode.
Diagram tries to layout and auto size items in order to fit diagram into available page size.
Defines the way diagram is fit into page.
Show node as dot.
Keep parents together where it is possible.
Defines item in family chart hierarchy.
Unique item id.
Collection of parent id’s.
Options class.
Options class.
Notifies about changing highlight item primitives.famdiagram.Config.highlightItem in diagram.
Notifies about changed highlight item primitives.famdiagram.Config.highlightItem in diagram.
Notifies about changing selected items collection of primitives.famdiagram.Config.selectedItems.
Notifies about changes in collection of primitives.famdiagram.Config.selectedItems.
Option state is auto defined.
If it is true then selection check box is shown for the item.
Selection path items are shown in normal template mode.
User defines item template class.
This is template name used to render items having no primitives.famdiagram.ItemConfig.templateName defined.
Every template should have unique name.
Options class.
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.items, primitives.orgdiagram.Config.cursorItem or primitives.orgdiagram.Config.selectedItems.
Forces widget to make a full chart redraw.
Default template title second font color.
Default template title background color.
This class is used to define cross family connectors styles.
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 all 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
Defines array of annotaions objects.
Connector lines between two rectangular areas.
Place element into foreground.
This is chart items collection.
This option controls selection check boxes visibility.
This option controls user buttons visibility.
This option controls callout visibility for dotted items.
Defines label orientation.
Defines label placement relative to its dot.
This collection contains elements of type PaletteItemConfig.
Auto selects best order depending on type of element.
Notifies about changed cursor item primitives.orgdiagram.Config.cursorItem in diagram .
Notifies about changing cursor item primitives.orgdiagram.Config.cursorItem in diagram.
Item templates don’t provide means to bind data of items into templates.
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.
Defines the way diagram is fit into page.
Connector lines use only right angles.
Defines item in diagram hierarchy.
Unique item id.
Parent id.
Options class.
Options class.
Notifies about changing highlight item primitives.orgdiagram.Config.highlightItem in diagram.
Notifies about changed highlight item primitives.orgdiagram.Config.highlightItem in diagram.
Notifies about changing selected items collection of primitives.orgdiagram.Config.selectedItems.
Notifies about changes in collection of primitives.orgdiagram.Config.selectedItems.
If it is true then selection check box is shown for the item.
This is template name used to render items having no primitives.orgdiagram.ItemConfig.templateName defined.
Every template should have unique name.
Options class.
Event details class.
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 all items in dot state.
Defines interval after level of items in diagram having items in line state.
Defines array of annotaions objects.
This option controls selection check boxes visibility.
This option controls user buttons visibility.
Defines diagram item type.
Regular item.
Layout manager defined.
This option controls callout visibility for dotted items.
Defines label orientation.
Defines label placement relative to its dot.

What is your?

JavaScript Widgets Library
 

What is your?

JavaScript MVC framework
 
Do you use graphics libraries?