// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Network component additional customization
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Network {
  view: true;
  toolbar: true;
  interactor: true;
  zooming: true;
}

// Configure the view
View {
  keepingAspectRatio: true;
  maxZoomXFactor: 10;
  maxZoomYFactor: 10;
}

// Configure the toolbar to disallow moving of objects.
ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
  button[1]: @+PanButton;
  button[2]: @+ZoomInButton;
  button[3]: @+ZoomOutButton;
  button[4]: @+ZoomBackButton;
  button[5]: @+ZoomResetButton;
  button[6]: @+FitToContentsButton;
  button[7]: @+ZoomViewButton;
}

#SelectButton {
  actionType: "Select";
  usingObjectInteractor: true;
  opaqueMove: true;
}

#PanButton {
  actionType: "Pan";
  usingObjectInteractor: false;
}

#ZoomInButton {
  actionType: "ZoomIn";
  zoomFactor: 1.1;
}

#ZoomOutButton {
  actionType: "ZoomOut";
  zoomFactor: 1.1;
}

#ZoomBackButton {
  actionType: "ZoomBack";
}

#ZoomResetButton {
  actionType: "ZoomReset";
}

#FitToContentsButton {
  actionType: "FitToContents";
  margins: "5";
}

#ZoomViewButton {
  actionType: "ZoomView";
  usingObjectInteractor: false;
}

Interactor {
  name: "Select";
}

Zooming {
  type: "Physical";
  decorationNames[0]: Comments;
  visibilityThresholds[0]: 0.5;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Customize subnetwork expansion mode
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#SubNetwork1 {
  expansion: IN_PLACE;
  subnetworkForeground: '#00000000';
}
#SubNetwork2 {
  expansion: IN_PLACE;
  subnetworkForeground: '#00000000';
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Customize Links
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

object."ilog.tgo.model.IltObject" {
  toolTipText: @name;
}

object."ilog.tgo.model.IltLink" {
  labelVisible: false;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Customize custom Class: SampleNetworkElement
// 
// The following selectors add an icon decoration, 
// which is attached to the bottom left corner 
// of the object base.
//
// This decoration is only present if the 
// attribute 'comments' has a value defined.
//
// The second selector adds the icon decoration
// when a 'comments' attribute is present. The
// first selector removes it when the 'comments'
// attribute of an object becomes empty or is
// removed.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

object."SampleNetworkElement" {
  children[0]: '';
  constraints[0]: '';
  children[1]: '';
  constraints[1]: '';
}

object."SampleNetworkElement"[comments] {
  children[0]: @+commentIcon;
  constraints[0]: @+commentIconConstraint;
}

object."SampleNetworkElement"[comments]:showComment {
  children[1]: @+commentWindow;
  constraints[1]: @+commentWindowConstraint;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// This selector creates an icon decoration.
//
// Here we show the use of built-in properties:
//  * ILPATTRIBUTE
//  * ILPDECORATIONNAME
//
// 1. To associate a decoration to an IlpAttribute
// specify the 'ILPATTRIBUTE' property as illustrated 
// below.
//
// This property is used to associate a graphic decoration
// to an attribute in the business model. 
//
// The ILPATTRIBUTE property type is String. Its value 
// should be an attribute name.
//
// Once this association is done, tooltips and interactors
// can be defined in CSS for the business attribute
// and will be displayed/triggered when the event 
// occurs in the decoration graphic.
//
// 2. To associate a decoration to a name specify
// the 'ILPDECORATIONNAME' property as illustrated
// below.
//
// The ILPDECORATIONNAME property type is a String.
// Its value should be a ilog.tgo.graphic.IltGraphicElementName 
// value.
// 
// Once this association is done, it will be possible
// to customize the layer policy and zoom policy to
// take into account your new decorations.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#commentIcon {
  class: 'ilog.views.graphic.IlvIcon';
  image: '@|image("commentIcon.png")';
  ILPATTRIBUTE: "comments";
  ILPDECORATIONNAME: "Comments";
}

#commentIconConstraint {
  class: 'ilog.views.graphic.composite.layout.IlvAttachmentConstraint';
  hotSpot: BottomLeft;
  anchor: BottomLeft;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// The following selectors are customizing a
// specific interactor to be associated with
// the new attribute decoration. 
//
// This interactor shows or hides a comment
// window when a click occurs on the comment
// icon decoration.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

object."SampleNetworkElement/comments"[comments] {
  interactor: @+showCommentInteractor;
  toolTipText: '@|concat(@name, " Comments")';
}
#showCommentInteractor {
  class: 'ilog.cpl.interactor.IlpDefaultObjectInteractor';
  action[0]: @+commentButton;
}
#commentButton {
  class: 'ilog.cpl.interactor.IlpGestureAction';
  gesture: BUTTON1_CLICKED;
  action: @+toggleCommentAction;
}
#toggleCommentAction {
  class: 'decoration.ToggleCommentWindowAction';
}

#commentWindow {
  class: 'ilog.views.graphic.composite.IlvCompositeGraphic';
  layout: @+centeredLayout;
  children[0]: @+commentsBalloon;
  children[1]: @+commentsLabel;
  ILPDECORATIONNAME: "Comments";
}

#commentWindowConstraint {
  class: 'ilog.views.graphic.composite.layout.IlvAttachmentConstraint';
  hotSpot: HotSpot;
  anchor: BottomLeft;
}

#centeredLayout {
  class: 'ilog.views.graphic.composite.layout.IlvCenteredLayout';
  insets: "2,5,2,5";
}

#commentsBalloon {
  class: 'ilog.views.graphic.composite.decoration.IlvRectBalloon';
  orientation: SOUTH_WEST;
  shadowThickness: 1;
  balloonColor: white;
}

#commentsLabel {
  class: 'ilog.views.graphic.IlvText';
  label: @comments;
  foreground: black;
  wrappingMode: 1;
  wrappingWidth: 75;
}