javascript/samples/javascript.controls/CaseFamilyChartMatrixLayout.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Family Chart Matrix Layout</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();

      var items = [
        { id: 1, title: "Thomas Williams", label: "Thomas Williams", description: "1", image: "images/photos/t.png" },
        { id: 2, title: "Mary Spencer", label: "Mary Spencer", description: "2", image: "images/photos/m.png" },
        { id: 3, title: "David Kirby", label: "David Kirby", description: "3", image: "images/photos/d.png" },
        { id: 4, title: "Brad Williams", label: "Brad Williams", description: "4", image: "images/photos/b.png" },
        { id: 5, title: "Mike Kirby", label: "Mike Kirby", description: "5", image: "images/photos/m.png" },
        { id: 6, title: "Lynette Maloney", label: "Lynette Maloney", description: "6", image: "images/photos/m.png" },
        { id: 7, title: "Sara Kemp", label: "Sara Kemp", description: "7", image: "images/photos/s.png" },
        { id: 8, title: "Leon Kemp", label: "Leon Kemp", description: "8", image: "images/photos/l.png" },
        { id: 9, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Thomas Williams", label: "Thomas Williams", description: "1", image: "images/photos/t.png" },
        { id: 10, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Mary Spencer", label: "Mary Spencer", description: "2", image: "images/photos/m.png" },
        { id: 11, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "David Kirby", label: "David Kirby", description: "3", image: "images/photos/d.png" },
        { id: 12, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Brad Williams", label: "Brad Williams", description: "4", image: "images/photos/b.png" },
        { id: 13, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Mike Kirby", label: "Mike Kirby", description: "5", image: "images/photos/m.png" },
        { id: 14, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Lynette Maloney", label: "Lynette Maloney", description: "6", image: "images/photos/m.png" },
        { id: 15, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Sara Kemp", label: "Sara Kemp", description: "7", image: "images/photos/s.png" },
        { id: 16, parents: [1, 2, 3, 4, 5, 6, 7, 8], title: "Leon Kemp", label: "Leon Kemp", description: "8", image: "images/photos/l.png" }
      ];

			options.pageFitMode = primitives.PageFitMode.AutoSize;
			options.autoSizeMinimum = new primitives.Size(100, 100);
			options.autoSizeMaximum = new primitives.Size(2000, 2000);
      options.items = items;
      options.cursorItem = 2;
      options.linesWidth = 1;
      options.linesColor = "black";
      options.hasSelectorCheckbox = primitives.Enabled.False;
      options.normalLevelShift = 20;
      options.dotLevelShift = 20;
      options.lineLevelShift = 20;
      options.normalItemsInterval = 10;
      options.dotItemsInterval = 10;
      options.lineItemsInterval = 10;
      options.arrowsDirection = primitives.GroupByType.Parents;
      options.showExtraArrows = false;
      options.enableMatrixLayout = true;

      options.defaultTemplateName = "info";
      options.templates = [getInfoTemplate()];
      options.onItemRender = onTemplateRender;

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

    function onTemplateRender(event, data) {
      switch (data.renderingMode) {
        case primitives.RenderingMode.Create:
          /* Initialize template content here */
          break;
        case primitives.RenderingMode.Update:
          /* Update template content here */
          break;
      }

      var itemConfig = data.context;

      if (data.templateName == "info") {
        var title = data.element.firstChild;
        title.textContent = itemConfig.title;
      }
    }

    function getInfoTemplate() {
      var result = new primitives.TemplateConfig();
      result.name = "info";

      result.itemSize = new primitives.Size(80, 36);
      result.minimizedItemSize = new primitives.Size(3, 3);
      result.highlightPadding = new primitives.Thickness(4, 4, 4, 4);

      result.itemTemplate =
        '<div class="bp-item bp-corner-all bt-item-frame" style="width:' + result.itemSize.width + 'px; height: ' + result.itemSize.height + 'px;">'
        + '<div name="title" class="bp-item" style="top: 3px; left: 6px; width: 68px; height: 28px; font-size: 12px;">'
        + '</div>'
        + '</div>';

      return result;
    }
  </script>
</head>

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

</html>