DemoTechTree.html

<!DOCTYPE html>
<html>

<head>
  <title>Technology Tree Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../primitives.js"></script>
  <script type="text/javascript" src="../../javascriptsamples.js"></script>
  <script type="text/javascript" src="../data/techtree.js"></script>
  <link href="./css/styles.css" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var control = null;
    var timer;

    var optionsRender = javascriptsamples.getFamDiagramOptionsRender([], {
      /* Family Diagram Specific Options */
      neighboursSelectionMode: primitives.NeighboursSelectionMode.ParentsChildrenSiblingsAndSpouses,
      groupByType: primitives.GroupByType.Parents,
      alignBylevels: true,
      hideGrandParentsConnectors: false,

      /* On-screen annotations specific options */
      AnnotationOptions: {
        connectorPlacementType: primitives.ConnectorPlacementType.Offbeat,
        connectorShapeType: primitives.ConnectorShapeType.OneWay,
        labelPlacementType: primitives.ConnectorLabelPlacementType.Between,
        lineWidth: 2,
        lineType: primitives.LineType.Dashed,
        color: primitives.Colors.Red,
        offset: 5,
        zOrderType: primitives.ZOrderType.Auto
      },
      /* Layout */
      pageFitMode: primitives.PageFitMode.None,
      orientationType: primitives.OrientationType.Left,
      verticalAlignment: primitives.VerticalAlignmentType.Middle,
      horizontalAlignment: primitives.HorizontalAlignmentType.Center,
      childrenPlacementType: primitives.ChildrenPlacementType.Horizontal,
      leavesPlacementType: primitives.ChildrenPlacementType.Horizontal,
      maximumColumnsInMatrix: 6,
      minimalVisibility: primitives.Visibility.Dot,
      minimumVisibleLevels: 0,
      selectionPathMode: primitives.SelectionPathMode.FullStack,

      hasButtons: primitives.Enabled.True,
      hasSelectorCheckbox: primitives.Enabled.False,
      selectCheckBoxLabel: "Pinned",
      itemTitleFirstFontColor: primitives.Colors.White,
      itemTitleSecondFontColor: primitives.Colors.White,
      buttonsPanelSize: 32,
      groupTitlePanelSize: 24,
      checkBoxPanelSize: 24,

      /* group title options */
      groupTitlePlacementType: primitives.AdviserPlacementType.Left,
      groupTitleOrientation: primitives.TextOrientationType.RotateRight,
      groupTitleVerticalAlignment: primitives.VerticalAlignmentType.Middle,
      groupTitleHorizontalAlignment: primitives.HorizontalAlignmentType.Center,
      groupTitleFontSize: "12px",
      groupTitleFontFamily: "Arial",
      groupTitleColor: primitives.Colors.RoyalBlue,
      groupTitleFontWeight: "normal",
      groupTitleFontStyle: "normal",

      /* level title options */
      addLevelAnnotations: true,
      levelTitlePlacementType: primitives.AdviserPlacementType.Left,
      levelTitlePanelSize: 24,
      levelTitlePlaceInside: false,
      levelTitleOrientation: primitives.TextOrientationType.Auto,
      levelTitleVerticalAlignment: primitives.VerticalAlignmentType.Middle,
      levelTitleHorizontalAlignment: primitives.HorizontalAlignmentType.Center,
      levelTitleFontSize: "12px",
      levelTitleFontFamily: "Arial",
      levelTitleFontColor: primitives.Colors.White,
      levelTitleColor: primitives.Colors.RoyalBlue,
      levelTitleFontWeight: "normal",
      levelTitleFontStyle: "normal",

      /* Template */
      DefaultTemplateOptions: {
        minimizedItemCornerRadius: 6,
        minimizedItemSize: new primitives.Size(6, 6),
        highlightPadding: 3,
        minimizedItemShapeType: primitives.ShapeType.None,
        minimizedItemLineWidth: 0,
        minimizedItemLineType: primitives.LineType.Solid,
        minimizedItemBorderColor: null,
        minimizedItemFillColor: null,
        minimizedItemOpacity: 1.0
      },

      /* Intervals */
      normalLevelShift: 20,
      dotLevelShift: 12,
      lineLevelShift: 12,
      normalItemsInterval: 12,
      dotItemsInterval: 12,
      lineItemsInterval: 20,
      cousinsIntervalMultiplier: 1,

      /* Connectors */
      arrowsDirection: primitives.GroupByType.Parents,
      showExtraArrows: true,
      extraArrowsMinimumSpace: 20,
      connectorType: primitives.ConnectorType.Squared,
      elbowType: primitives.ElbowType.Round,
      bevelSize: 4,
      elbowDotSize: 4,
      linesType: primitives.LineType.Solid,
      linesColor: primitives.Colors.Black,
      linesWidth: 1,

      /* Labels */
      showLabels: primitives.Enabled.False,
      labelSize: new primitives.Size(80, 24),
      labelOrientation: primitives.TextOrientationType.Horizontal,
      labelPlacement: primitives.PlacementType.Top,
      labelOffset: 1,
      labelFontSize: "10px",
      labelFontFamily: "Arial",
      labelColor: primitives.Colors.Black,
      labelFontWeight: "normal",
      labelFontStyle: "normal",

      /* Callout */
      calloutMaximumVisibility: primitives.Visibility.Dot,
      showCallout: true,
      calloutPlacementOffset: 100,
      calloutfillColor: "#000000",
      calloutBorderColor: null,
      calloutOffset: 4,
      calloutCornerRadius: 4,
      calloutPointerWidth: "10%",
      calloutLineWidth: 1,
      calloutOpacity: 0.2,

      /* Interactivity */
      navigationMode: primitives.NavigationMode.Default,
      highlightGravityRadius: 40,
      enablePanning: true,
      scale: 1.0,
      
      /* Frame */
      showFrame: false,
      frameInnerPadding: 2,
      frameOuterPadding: 2,
      padding: new primitives.Thickness(10, 10, 10, 10)
    },
      /* On property change event handler */
      function () {
        control.setOptions(GetDiagramConfig());
        control.update(primitives.UpdateMode.Refresh);
      });

    document.addEventListener('DOMContentLoaded', function () {
      optionsRender.render(document.getElementById("westpanel"));
      control = primitives.FamDiagram(document.getElementById("centerpanel"),
        GetDiagramConfig()
      );

      window.addEventListener('resize', function (event) {
        onWindowResize();
      });
    });

    function GetDiagramConfig() {
      var options = optionsRender.getValues();

      primitives.mergeObjects(options, {
        templates: [getUnitTemplate(), getCalloutUnitTemplate(), getDotTemplate()],
        defaultTemplateName: "UnitTemplate",
        defaultCalloutTemplateName: "CalloutUnitTemplate",
        onItemRender: onTemplateRender,
        arrowsDirection: primitives.GroupByType.Children,
      })

      primitives.mergeObjects(options, {
        onCursorChanging: onCursorChanging,
        onCursorChanged: onCursorChanged,
        onHighlightChanging: onHighlightChanging,
        onHighlightChanged: onHighlightChanged,
        onSelectionChanged: onSelectionChanged
      });

      var annotations = [];
      // Populate annotations to visualize family ordering references
      for (var index = 0; index < famdata.length; index += 1) {
        var item = famdata[index];
        if (item.relativeItem != null) {
          annotations.push({
            annotationType: primitives.AnnotationType.Connector,
            fromItem: item.id,
            toItem: item.relativeItem,
            label: null,
            connectorShapeType: primitives.ConnectorShapeType.OneWay,
            color: primitives.Colors.Blue,
            offset: -5,
            lineWidth: 3,
            lineType: primitives.LineType.Dotted,
            connectorPlacementType: primitives.ConnectorPlacementType.Straight,
            selectItems: false
          });
        }
        if (item.primaryParent != null) {
          annotations.push({
            annotationType: primitives.AnnotationType.Connector,
            fromItem: item.id,
            toItem: item.primaryParent,
            label: null,
            connectorShapeType: primitives.ConnectorShapeType.OneWay,
            color: primitives.Colors.Red,
            offset: -5,
            lineWidth: 3,
            lineType: primitives.LineType.Dotted,
            connectorPlacementType: primitives.ConnectorPlacementType.Offbeat,
            selectItems: false
          });
        }
      }

      if(options.addLevelAnnotations) {
        for(index = 0; index < 20; index+=1) {
          annotations.push({
            annotationType: primitives.AnnotationType.Level,
            levels: [index],
            title: "Level " + index,
            offset: new primitives.Thickness(0, -1, 0, -1),
            opacity: (index % 2 > 0 ? 0.2 : 0)
          })
        }
      }

      primitives.mergeObjects(options, {
        items: famdata,
        cursorItem: 1,
        annotations: annotations
      }); // See dependencies.js

      return options;
    }

    function getDefaultTemplate(options) {
      var result = new primitives.TemplateConfig();
      result.name = "defaultTemplate";

      // If we don't change anything in template then all its properties stays default
      // So we change only minimized item properties
      primitives.mergeObjects(result, options.DefaultTemplateOptions);

      return result;
    }

    function getParentsList(data) {
      var message = "",
        index, len;

      if (data.parentItems.length > 0) {
        message += " Parent item <b>";
        for (index = 0, len = data.parentItems.length; index < len; index += 1) {
          if (index > 0) {
            message += ", ";
          }
          message += "'" + data.parentItems[index].title + "'";
        }
        message += "</b>";
      }

      return message;
    };

    function onSelectionChanged(e, data) {
      var selectedItems = control.getOption("selectedItems");
      var message = "";
      for (var index = 0; index < selectedItems.length; index += 1) {
        var itemConfig = selectedItems[index];
        if (message != "") {
          message += ", ";
        }
        message += "<b>'" + itemConfig.title + "'</b>";
      }
      message += getParentsList(data);
      document.getElementById("southpanel").innerHTML = "User selected following items: " + message;
    }

    function onHighlightChanging(e, data) {
      var message = (data.context != null) ? "User is hovering mouse over item <b>'" + data.context.title + "'</b>." : "";
      message += getParentsList(data);
      document.getElementById("southpanel").innerHTML = message;
    }

    function onHighlightChanged(e, data) {
      var message = (data.context != null) ? "User hovers mouse over item <b>'" + data.context.title + "'</b>." : "";
      message += getParentsList(data);
      document.getElementById("southpanel").innerHTML = message;
    }

    function onCursorChanging(e, data) {
      var message = "User is clicking on item '" + data.context.title + "'.";
      message += getParentsList(data);
      updateHighlightPathAnnotations(data);
      document.getElementById("southpanel").innerHTML = message;
    }

    function onCursorChanged(e, data) {
      var message = "User clicked on item '" + data.context.title + "'.";
      message += getParentsList(data);
      document.getElementById("southpanel").innerHTML = message;
    }

    function updateHighlightPathAnnotations(data) {
      var annotations = control.getOption("annotations");

      var newAnnotations = [];
      for (var index = 0, len = annotations.length; index < len; index += 1) {
        var annotation = annotations[index];
        if (annotation.annotationType != primitives.AnnotationType.HighlightPath) {
          newAnnotations.push(annotation);
        }
      }

      var items = [];
      items = items.concat(data.parentItems);
      items = items.concat(data.childrenItems);
      for (index = 0, len = items.length; index < len; index += 1) {
        var parent = items[index];
        var highlightid = data.context.id;
        var annotation = new primitives.HighlightPathAnnotationConfig({
          items: [highlightid, parent.id],
          color: primitives.Colors.Navy,
          opacity: 0.4,
          lineWidth: 6,
          zOrderType: primitives.ZOrderType.Background,
          showArrows: false
        });
        newAnnotations.push(annotation);
      }
      control.setOptions({ annotations: newAnnotations });
    }

    function onWindowResize() {
      if (timer == null) {
        timer = window.setTimeout(function () {
          control.update(primitives.UpdateMode.Refresh);
          window.clearTimeout(timer);
          timer = null;
        }, 300);
      }
    }

    function onTemplateRender(event, data) {
      var itemConfig = data.context,
        element = data.element;

      if (data.templateName == "dot") {
        var titleBackground = element;
        titleBackground.style.backgroundColor = itemConfig.itemTitleColor || primitives.Colors.RoyalBlue;
      }

      if (data.templateName == "UnitTemplate") {
        var titleBackground = element.firstChild;
        titleBackground.style.backgroundColor = itemConfig.itemTitleColor || primitives.Colors.RoyalBlue;

        var title = titleBackground.firstChild;
        title.textContent = itemConfig.title;
      }

      if (data.templateName == "CalloutUnitTemplate") {
        var titleBackground = element.firstChild;
        titleBackground.style.backgroundColor = itemConfig.itemTitleColor || primitives.Colors.RoyalBlue;

        var title = element.childNodes[1];
        title.textContent = itemConfig.title;

        var description = element.childNodes[2];
        description.textContent = itemConfig.description;
      }
    }

    function getDotTemplate() {
      var result = new primitives.TemplateConfig();
      result.name = "dot";

      result.isActive = false;
      result.itemSize = new primitives.Size(8, 8);
      result.minimizedItemSize = new primitives.Size(8, 8);
      result.minimizedItemCornerRadius = 4;
      result.minimizedItemLineWidth = 1;
      result.minimizedItemLineType = primitives.LineType.Solid;
      result.minimizedItemBorderColor = null; // Shape border line has the same color as item title background color 
      result.minimizedItemFillColor = null; // Shape background has the same color as item title background color 
      result.minimizedItemOpacity = 0.7; // Shape background opacity

      result.itemTemplate = ["div", {
        "style": {
          top: "2px",
          left: "2px",
          width: result.itemSize.width + "px",
          height: result.itemSize.height + "px"
        },
        "class": ["bp-corner-all"]
      }];

      return result;
    }

    function getUnitTemplate() {
      var result = new primitives.TemplateConfig();
      result.name = "UnitTemplate";

      result.itemSize = new primitives.Size(164, 34);
      result.minimizedItemSize = new primitives.Size(8, 8);
      result.minimizedItemCornerRadius = 4;
      result.minimizedItemLineWidth = 1;
      result.minimizedItemLineType = primitives.LineType.Solid;
      result.minimizedItemBorderColor = null; // Shape border line has the same color as item title background color 
      result.minimizedItemFillColor = null; // Shape background has the same color as item title background color 
      result.minimizedItemOpacity = 0.7; // Shape background opacity

      result.itemTemplate = ["div",
        {
          "style": {
            width: result.itemSize.width + "px",
            height: result.itemSize.height + "px"
          },
          "class": ["bp-item", "bp-corner-all", "bt-item-frame"]
        },
        ["div",
          {
            "name": "titleBackground",
            "class": ["bp-item", "bp-corner-all", "bp-title-frame"],
            "style": {
              top: "2px",
              left: "2px",
              width: "160px",
              height: "30px"
            }
          },
          ["div",
            {
              "name": "title",
              "class": "bp-item",
              "style": {
                top: "2px",
                left: "2px",
                width: "160px",
                height: "34px",
                fontSize: "12px"
              }
            }
          ]
        ]
      ];

      return result;
    }

    function getCalloutUnitTemplate() {
      var result = new primitives.TemplateConfig();
      result.name = "CalloutUnitTemplate";

      result.itemSize = new primitives.Size(320, 60);
      result.minimizedItemSize = new primitives.Size(8, 8);
      result.minimizedItemCornerRadius = 4;
      result.minimizedItemLineWidth = 1;
      result.minimizedItemLineType = primitives.LineType.Solid;
      result.minimizedItemBorderColor = null; // Shape border line has the same color as item title background color 
      result.minimizedItemFillColor = null; // Shape background has the same color as item title background color 
      result.minimizedItemOpacity = 0.7; // Shape background opacity

      result.itemTemplate = ["div",
        {
          "style": {
            top: "2px",
            left: "2px",
            width: result.itemSize.width + "px",
            height: result.itemSize.height + "px"
          },
          "class": ["bp-item", "bp-corner-all", "bt-item-frame"]
        },
        ["div",
          {
            "name": "titleBackground",
            "style": {
              top: "2px",
              left: "2px",
              width: "316px",
              height: "4px"
            },
            "class": ["bp-item", "bp-corner-all", "bp-title-frame"]
          }
        ],
        ["div",
          {
            name: "title",
            "class": "bp-item",
            "style": {
              top: "8px",
              left: "2px",
              width: "312px",
              height: "24px",
              fontSize: "12px"
            }
          }
        ],
        ["div",
          {
            name: "description",
            "class": "bp-item",
            "style": {
              top: "36px",
              left: "4px",
              width: "312px",
              height: "36px",
              fontSize: "10px"
            }
          }
        ]
      ];

      return result;
    }
  </script>

</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-4 col-lg-2 d-md-block bg-light sidebar collapse" style="position: fixed; top: 0; bottom: 0px; overflow-y: auto; float: none;">
        <div class="position-sticky pt-3">
          <div id="westpanel" class="flex-column"></div>
        </div>
      </nav>
  
      <main class="col-md-8 ms-sm-auto col-lg-10 px-md-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2">Technology Tree Demo</h1>
        </div>
        <div id="centerpanel" class="mediaPlaceholder my-2 w-100"></div>
        <div id="southpanel" class="alert alert-primary" style="min-height: 60px;" role="alert">
        </div>
      </main>
    </div>
  </div>
</body>

</html>