Dev Room > Layout library > Examples

Examples

Create Diagram Layout

var l = new IMCSDiagramLayout("UNIVERSAL");
l.addBox(1, 10, 20, 100, 50);
l.addBox(2, 40, 20, 100, 50);
l.addLine(3, 1, 2, {lineType:"ORTHOGONAL",startSides:8, endSides:2});
l.addLine(4, 1, 2, {lineType:"STRAIGHT",startSides:2, endSides:8});
l.addLineLabel(5, 3, 30, 10, "middle-right");
console.log("arrange");
var result = l.arrangeFromScratch();
console.log(result);

Create Dialog Layout

var components = {
  "1": {
     layoutName: "VerticalBox", // form
     children: [2],
     leftPadding: 10,
     rightPadding: 10,
     topPadding: 5,
     bottomPadding: 5,
  },
  "2": {
     minimumWidth: 220.0,
     minimumHeight: 55,
     layoutName: null, // e.g., button
     children: [],
  } };

var callback = {
   load: function(rComponent) { console.log("c.load",rComponent); },
   getAnchor: function(rComponent) { return "parent"; },
   getChildren: function(rComponent) { return components[rComponent].children; },
   getBounds: function(rComponent) { return components[rComponent]; },
   getHorizontalRelativeInfo: function(rComponent) { return components[rComponent]; },
   getVerticalRelativeInfo: function(rComponent) { return components[rComponent]; },
   getHorizontalRelativeInfoGroup: function(rComponent) { return 0; },
   getVerticalRelativeInfoGroup: function(rComponent) { return 0; },
   getLayoutName: function(rComponent) { return components[rComponent].layoutName; },
   layout: function(rComponent, x, y, w, h) { console.log("layout",rComponent,x,y,w,h); },
   destroy: function(rComponent) { console.log("c.destroy",rComponent); },
};

var l = new IMCSDialogLayout(callback);
l.loadAndLayout(1);