javascript/samples/javascript.controls/CaseMatrixLayoutInFamilyChart.html at master · wangscript007/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Matrix Nodes Layout In Family Chart</title>


  <script type="text/javascript" src="../../primitives.js"></script>
  <link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />

  <script type='text/javascript'>
    var control;

    document.addEventListener('DOMContentLoaded', function () {
      var options = new primitives.FamConfig();

      options.items = [
        { id: 1, parents: [], title: "Corp 1", label: "Corp 1", description: "Parent 1", image: "../images/photos/p.png" },
        { id: 2, parents: [], title: "Corp 2", label: "Corp 2", description: "Parent 2", image: "../images/photos/p.png" },
        { id: 101, parents: [], title: "Corp 3", label: "Corp 3", description: "Parent 3", image: "../images/photos/p.png" },
        { id: 102, parents: [], title: "Corp 4", label: "Corp 4", description: "Parent 4", image: "../images/photos/p.png" },
        { id: 3, parents: [1, 2, 101, 102], title: "Sibling 1", label: "Sibling 1", description: "Sibling 1", image: "../images/photos/s.png" },
        { id: 4, parents: [1, 2, 101, 102], title: "Sibling 2", label: "Sibling 2", description: "Sibling 2", image: "../images/photos/s.png" },
        { id: 5, parents: [1, 2, 101, 102], title: "Sibling 3", label: "Sibling 3", description: "Sibling 3", image: "../images/photos/s.png" },
        { id: 6, parents: [1, 2, 101, 102], title: "Sibling 4", label: "Sibling 4", description: "Sibling 4", image: "../images/photos/s.png" },
        { id: 7, parents: [1, 2, 101, 102], title: "Sibling 5", label: "Sibling 5", description: "Sibling 5", image: "../images/photos/s.png" },
        { id: 8, parents: [1, 2, 101, 102], title: "Sibling 6", label: "Sibling 6", description: "Sibling 6", image: "../images/photos/s.png" },
        { id: 9, parents: [1, 2, 101, 102], title: "Sibling 7", label: "Sibling 7", description: "Sibling 7", image: "../images/photos/s.png" },
        { id: 10, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 1", label: "Grand Child 1", description: "Grand Child 1", image: "../images/photos/c.png" },
        { id: 11, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 2", label: "Grand Child 2", description: "Grand Child 2", image: "../images/photos/c.png" },
        { id: 12, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 3", label: "Grand Child 3", description: "Grand Child 3", image: "../images/photos/c.png" },
        { id: 13, parents: [3, 4, 5, 6, 7, 8, 9], title: "Grand Child 4", label: "Grand Child 4", description: "Grand Child 4", image: "../images/photos/c.png" }
      ];


      options.cursorItem = 1;
      options.enableMatrixLayout = true;
      options.minimumMatrixSize = 3;
      options.hasSelectorCheckbox = primitives.Enabled.False;
      options.arrowsDirection = primitives.GroupByType.Children;
      options.pageFitMode = primitives.PageFitMode.None;

      /* Intervals */
      options.normalLevelShift = 20;
      options.dotLevelShift = 16;
      options.lineLevelShift = 10;
      options.normalItemsInterval = 20;
      options.dotItemsInterval = 10;
      options.lineItemsInterval = 5;
      options.cousinsIntervalMultiplier = 5;

      control = primitives.FamDiagram(document.getElementById('basicdiagram'), options);
    });

  </script>
</head>

<body>
  <div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
</body>

</html>