Material Design Sample

GoJS
1

Hi,
Our project uses Material Design as its UI frame work.
I know that we can use native HTML in a GOJS diagram.
Do you have a sample diagram that embeds material design into it ?

2

Actually, one cannot use any CSS rules to define the appearance of any GraphObject. That would include all Shapes and all TextBlocks.

3

OK,
But do you have any “Material Design Like” sample, namely, GraphObjects that “looks like” they were design by Material Design style ?

4

Do you have a screenshot of what you have so far? Then we could give you suggestions for how to change the “styling”.

5

md-2
md-2.JPG722×416 13 KB

For example, the white rectangle is a group. It has no border, yet it is floating creating a very smooth shadow.
The nodes are also floating over the group, creating a very smooth shadow too, almost unseen.
I wasn’t able to mimic the nodes/group look and feel.

6

The following page:

<!DOCTYPE html>
<html>
<head>
  <title>GoJS Material Design Sample</title>
  <!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
  <meta charset="UTF-8">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
  <script src="go.js"></script>
  <script id="code">
    function init() {
      var $ = go.GraphObject.make;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center  // for v1.*
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { isShadowed: true, shadowOffset: new go.Point(2, 2), shadowColor: "#DDD", shadowBlur: 6 },
          $(go.Shape,
            { fill: "#6200EE", strokeWidth: 0, portId: "" },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: new go.Margin(8, 16), font: "14pt Roboto, sans-serif", stroke: "white" },
            // this Binding only works in version 2:
            // new go.Binding("stroke", "color", function(c) { return go.Brush.isDark(c) ? "white" : "black"; }),
            new go.Binding("text"))
        );

      myDiagram.groupTemplate =
        $(go.Group, "Auto",
          { isShadowed: true, shadowOffset: new go.Point(2, 2), shadowColor: "#DDD", shadowBlur: 6 },
          $(go.Shape,
            { fill: "white", strokeWidth: 0 }),
          $(go.Placeholder, { padding: 12 })
        )

      myDiagram.model = new go.GraphLinksModel(
        [
          { key: 1, text: "Alpha" },
          { key: 2, text: "Beta", color: "#BA00E5" },
          { key: 3, text: "Gamma", color: "#09AF00", group: 5 },
          { key: 4, text: "Delta", color: "#EE6002", group: 5 },
          { key: 5, text: "Group", isGroup: true }
        ],
        [
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 2, to: 2 },
          { from: 3, to: 4 },
          { from: 4, to: 1 }
        ]);
    }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px; background: #F8F8F8;"></div>
</body>
</html>

produces:
image

7

Super,
Thanks