Hi,
I've attached a sample layout image of my application node.
It has main image at the center and first image at the top-left corner and second image at the top-right corner and third image below the second image and fourth image at the bottom-right corner and a text box in the left-bottom corner.
I've defined a CompositeNode like below. But the node displayed in the diagram is NOT like the attached sample image layout.
OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2", { component: "GridPanel", id: "id", rowDefinitions: ["*"], columnDefinitions: ["22"], children: [ { component: "GridPanel", rowDefinitions: ["18", "5"], columnDefinitions: ["18", "5"], children: [ { gridColumn: 0, component: "Image", name: "MainImage", autoProperty: true, location: "MainImage.png", margin: "3", imageAlign: "TopLeft" }, { gridColumn: 0, component: "Image", name: "FirstImage", autoProperty: true, location: "FirstImage.png", margin: "3, 3, 0, 0", imageAlign: "TopLeft" }, { gridColumn: 1, component: "Image", name: "SecondImage", autoProperty: true, location: "SecondImage.png", margin: "3, 3, -50, 5", imageAlign: "TopRight" }, { gridColumn: 1, component: "Image", name: "ThirdImage", autoProperty: true, location: "ThirdImage.png", margin: "3, 30, -50, 3", imageAlign: "TopRight", width: "3" }, { gridColumn: 1, component: "Image", name: "FourthImage", autoProperty: true, location: "FourthImage.png", margin: "3, 50, -50, 3", imageAlign: "BottomRight", width: "3" }, { gridColumn: 0, component: "Text", name: "NoOfElementsText", autoProperty: true, text: "title", margin: "3, 40, 0, 0", font: "Verdana 12px", textAlign: "BottomLeft" }, ] }, });
I've set the images and text like this,
var node = new this.OrgChartNode2(); node.setMainImage("./../../../../images/MainImage.png"); node.setFirstImage("./../../../../images/First.png"); node.setSecondImage("./../../../../images/Second.png"); node.setThirdImage("./../../../../images/Third.png"); node.setFourthImage("./../../../../images/Fourth.png"); node.setNoOfElementsText("8");
this.diagram.addItem(node);
My requirement is, all the small images should be shown within the main image as described above. But the images are not properly placed using the above code.
Also I need the following, * Image/Text are dynamically set visible * Image/Text position also set dynamically * Image/Text size also set dynamically
May I know how to solve this issue? Thank you !
Regards, Kannan
|