-
Notifications
You must be signed in to change notification settings - Fork 35
Visual Objects
Note
Attributes and methods described in this section are available only on Visual Objects and Connections (i.e., boxes and connections that appear on a diagram and inherit from DiagramModelObject and DiagramModelConnection).
Some attributes and methods apply only to Visual Objects, not Visual Connections
Colors are coded as hex triplet (red, green, blue) with a leading hash. For example red is coded as "#ff0000".
.add(element)
.borderType
.bounds
.bringForward()
.bringToFront()
.concept
.createObject()
.createViewReference()
.deriveLineColor
.figureType
.fillColor
.fontColor
.fontName
.fontSize
.fontStyle
.gradient
.iconColor
.image
.imageSource
.imagePosition
.index
.labelExpression
.labelValue
.lineColor
.lineWidth
.opacity
.outlineOpacity
.refView
.sendBackward()
.sendToBack()
.showIcon
.specialization
.text
.textAlignment
.textPosition
.view
Create and return a new nested visual object referencing an ArchiMate element with given bounds.
element is an existing ArchiMate element.
Setting width or height to -1 uses the default width and height as set in Archi's Preferences.
add(element, x, y, width, height) Example:
var object= groupObject.add(businessActor, 10, 200, -1, -1);
var object= groupObject.add(businessRole, 10, 200, 50, 70);Get/set the border type for Note and Group objects.
Allowed values for Notes are defined as constants:
BORDER.DOGEAR (value of 0)
BORDER.RECTANGLE (value of 1)
BORDER.NONE (value of 2)
note.borderType = BORDER.DOGEAR;Allowed values for Groups are defined as constants:
BORDER.TABBED (value of 0)
BORDER.RECTANGLE (value of 1)
group.borderType = BORDER.TABBED;Get/set the bounds of a visual object. Setting width or height to -1 uses the default width and height as set in Archi's Preferences.
x, y, width and height are optional
diagramObject.bounds = {x: 10, y: 10, width: 120, height: 55};
diagramObject.bounds = {x: 10, y: 10, width: -1, height: -1};
diagramObject.bounds = {x: 10, y: 10};var x = diagramObject.bounds.x;
var y = diagramObject.bounds.y;
var width = diagramObject.bounds.width;
var height = diagramObject.bounds.height;Since 1.7
Change the z-order of a visual object so that it is brought forward.
diagramObject.bringForward();Since 1.7
Change the z-order of a visual object so that it is brought to the front.
diagramObject.bringToFront();Get the ArchiMate concept related to a visual object or connection.
var concept = object.concept; // => given that object is a View Object, return the related ArchiMate concept
var concept = connection.concept; // => given that connection is a View Connection, return the related ArchiMate conceptCreate and return a new visual object of type with given bounds.
type can be one of diagram-model-note (or note) or diagram-model-group (or group)
Setting width or height to -1 uses the default width and height as set in Archi's Preferences.
createObject(type, x, y, width, height)Example:
var group = selectedView.createObject("diagram-model-group", 10, 200, -1, -1); // Create top-level Group
var note = group.createObject("diagram-model-note", 10, 10, 150, 70); // Add a Note in this GroupCreate and return a new View reference object with given bounds.
view is an existing View (diagram model)
Setting width or height to -1 uses the default width and height as set in Archi's Preferences.
createViewReference(view, x, y, width, height)Example:
var view1 = $('view').get(0); // Choose first view in the model
var diagramElement = ...; // Get an element in another View
var viewRef = diagramElement.createViewReference(view1, 10, 10, -1, -1); // Create and add a view referenceGet/set whether to derive the line color from the fill color of a visual object.
Example:
diagramObject.deriveLineColor = true;
diagramObject.deriveLineColor = false;Get/set the figure type for of a visual object. This applies to ArchiMate element diagram objects that support two different figure types.
Permitted values are 0 and 1.
var type = object.figureType();
var type = object.figureType;
object.figureType = 1;
object.setFigureType(0);Get/set the fill color for a visual object. Does not apply to connections. Setting to null sets as user's default color.
diagramObject.fillColor = "#ff0000"; // Sets fill color to red
diagramObject.fillColor = "#00ff00"; // Sets fill color to green
diagramObject.fillColor = null; // Sets fill color to default color.Get/set the font color. A null value sets to default.
diagramObject.fontColor = "#ff0000"; // Sets font color to red
diagramObject.fontColor = "#00ff00"; // Sets font color to green
diagramObject.fontColor = null; // Sets font color to default color.Get/set the font name.
diagramObject.fontName= "Arial";Get/set the font size (height).
diagramObject.fontSize = 12;Get/set the font style (normal, bold, italic, bolditalic).
diagramObject.fontStyle = "normal";
diagramObject.fontStyle = "bold";
diagramObject.fontStyle = "italic";
diagramObject.fontStyle = "bolditalic";Get/set the gradient for a visual object (does not apply to connections).
Allowed values are defined as constants:
GRADIENT.NONE (value of -1)
GRADIENT.TOP (value of 0)
GRADIENT.LEFT (value of 1)
GRADIENT.RIGHT (value of 2)
GRADIENT.BOTTOM (value of 3)
Example:
diagramObject.gradient = GRADIENT.TOP;
Get/set the color of the ArchiMate icon in the top-right corner of an ArchiMate object.
A null value or empty string sets to default color.
diagramObject.iconColor = "#ff0000"; // Sets icon color to red
diagramObject.iconColor = "#00ff00"; // Sets icon color to green
diagramObject.iconColor = ""; // Sets icon color to default color.Get/set the image for the visual object (does not apply to connections).
If the object is an ArchiMate element, the image will only display if the value of .imageSource is set to IMAGE_SOURCE.CUSTOM.
Example:
// Load an image and assign it to an ArchiMate element
object.imageSource = IMAGE_SOURCE.CUSTOM;
object.image = model.createImage("path_to/cat.png");
// Use an image from another object in the same model and assign it to another object
object.imageSource = IMAGE_SOURCE.CUSTOM; // Only needed if this is an ArchiMate object
object.image = anotherObject.image;
// Load an image and assign it to a Note or Group
object.image = model.createImage("path_to/cat.png");Get/set the type of image source type for ArchiMate elements (does not apply to connections). This does not apply to Notes and Groups.
Allowed values are defined as constants:
IMAGE_SOURCE.SPECIALIZATION (value of 0)
IMAGE_SOURCE.CUSTOM (value of 1)
Example:
archimateDiagramObject.imageSource = IMAGE_SOURCE.CUSTOM;
Get/set the image position for visual object (does not apply to connections).
Allowed values are defined as constants:
IMAGE_POSITION.TOP_LEFT (value of 0)
IMAGE_POSITION.TOP_CENTRE (value of 1)
IMAGE_POSITION.TOP_RIGHT (value of 2)
IMAGE_POSITION.MIDDLE_LEFT (value of 3)
IMAGE_POSITION.MIDDLE_CENTRE (value of 4)
IMAGE_POSITION.MIDDLE_RIGHT (value of 5)
IMAGE_POSITION.BOTTOM_LEFT (value of 6)
IMAGE_POSITION.BOTTOM_CENTRE (value of 7)
IMAGE_POSITION.BOTTOM_RIGHT (value of 8)
IMAGE_POSITION.FILL (value of 9)
Example:
diagramObject.imagePosition = IMAGE_POSITION.FILL;
Since 1.7
Get/set the z-position index of a visual object. A value of -1 is equivalent to "Bring to Front".
An exception is thrown if index is greater than the count of sibling objects.
// get current index position of object
var indexPos = diagramObject.index;
// set new index position
diagramObject.index = 1;
// this is equivalent to "Send to Back"
diagramObject.index = 0;
// this is equivalent to "Bring to Front"
diagramObject.index = -1;
// this is equivalent to "Send Backward"
diagramObject.index--;
// this is equivalent to "Bring Forward"
diagramObject.index++; See .labelExpression
See .labelValue
Get/set the line color of a visual object or connection. If preference for line color derived from fill color is set, this has no effect. A null value sets to default.
diagramObject.lineColor = "#ff0000"; // Sets line color to red
diagramConnection.lineColor = "#00ff00"; // Sets line color to green
diagramObject.lineColor = null; // Sets line color to default color.Get/set the line width of a visual object or connection.
diagramObject.lineWidth = 1; // Sets line width to normal
diagramObject.lineWidth = 2; // Sets line width to medium
diagramConnection.lineWidth = 3; // Sets line width to heavyGet/set the opacity of a visual object. Does nothing on connections. Value range 0-255.
diagramObject.opacity = 100; // Sets opacity to halfGet/set the outline opacity of a visual object. Does nothing on connections. Value range 0-255.
diagramObject.outlineOpacity = 100; // Sets outline opacity to halfGet the referenced View of a View reference object. Applies only to a View reference object.
var view = viewRef.refView;Since 1.7
Change the z-order of a visual object so that it is sent backward.
diagramObject.sendBackward();Since 1.7
Change the z-order of a visual object so that it is sent to the back.
diagramObject.sendToBack();Get/set whether to show the small icon for an ArchiMate object or View Reference.
Allowed values are defined as constants:
SHOW_ICON.IF_NO_IMAGE (value of 0)
SHOW_ICON.ALWAYS (value of 1)
SHOW_ICON.NEVER (value of 2)
Example:
diagramObject.showIcon = SHOW_ICON.NEVER;
See .specialization
Get/set the text for a Note object.
var note = archimateView.createObject("note", 10, 200, 150, 200);
note.setText("This is a note.");
console.log(note.text);Get/set the text alignment for a visual object or connection.
Allowed values are defined as constants:
TEXT_ALIGNMENT.LEFT (value of 1)
TEXT_ALIGNMENT.CENTER (value of 2)
TEXT_ALIGNMENT.RIGHT (value of 4)
diagramObject.textAlignment = TEXT_ALIGNMENT.LEFT;
connection.textAlignment = TEXT_ALIGNMENT.CENTER;Get/set the text position for a visual object or connection.
Allowed values for objects are defined as constants:
TEXT_POSITION.TOP (value of 0)
TEXT_POSITION.CENTER (value of 1)
TEXT_POSITION.BOTTOM (value of 2)
diagramObject.textPosition = TEXT_POSITION.CENTER;Allowed values for connections are defined as constants:
CONNECTION_TEXT_POSITION.SOURCE (value of 0)
CONNECTION_TEXT_POSITION.MIDDLE (value of 1)
CONNECTION_TEXT_POSITION.TARGET (value of 2)
Example:
connection.textPosition = CONNECTION_TEXT_POSITION.TARGET;Get the view that contains this visual object or connection.
var view = object.view; // => given that object is a View Object, return the containing View
var view = connection.view; // => given that connection is a View Connection, return the containing ViewIf you value and use Archi please consider making a donation. Thanks!