在 gojs 上绘制节点面板

Question

嗨，我想像正确的节点一样绘制我的节点，有什么想法可以用 GOjs 来完成

在左侧节点上，这是我尝试绘制它时得到的。 正确的节点才是我真正想画的。

他好像漏掉了一些部分。

我尝试在节点上构建 2 个面板，但由于形状是圆形的，我无法绘制所有面板。

    var simpleNode = $(
  go.Node,
  "Auto",
  new go.Binding("layerName", "category"),
  $(
    go.Panel,
    "Auto",

    $(
      go.Shape,
      "RoundedRectangle",
      {
        portId: "", // this Shape is the Node's port, not the whole Node
        fromLinkable: true,
        fromLinkableDuplicates: false,
        toLinkableDuplicates: false,
        toLinkable: true,
        cursor: "pointer",
      },
      new go.Binding("fill", "color"),


    ),
    $(
      go.Panel,
      "Horizontal",
      {
        alignment: go.Spot.Left,

        minSize: new go.Size(160, 0),
      },
      $(
        go.Panel,
        "Horizontal",
        {
          background: "#800080",
          stretch: go.GraphObject.Fill,
          margin: new go.Margin(0, 0, 0, 0),
        },
        $(
          go.Shape,

          {
            margin: new go.Margin(0, 15, 2, 15),
            fill: "white",
            strokeWidth: 0,
            background: "transparent",
            maxSize: new go.Size(20, 20),
            cursor: "pointer",
          },
          new go.Binding("geometry", geoFunc)
        )
      ),
      $(
        go.Panel,
        "Vertical",
        {
          background: "transparent",
        },
        $(
          go.TextBlock,
          {
            margin: new go.Margin(15, 15, 0, 15),
            editable: false, // editing the text automatically updates the model data
            stroke: "white",
            font: "14px Segoe UI",
          },

        ),
        $(
          go.TextBlock,
          {
            margin: new go.Margin(0, 15, 15, 15),
            editable: false, // editing the text automatically updates the model data
            stroke: "white",
            font: "12px Segoe UI",
            alignment: go.Spot.Left,
          },
          new go.Binding("text", "id")
        )
      )
    )
  )
);

Answer 1

如果你定义两个形状分别是圆角矩形的左侧和右侧，那么你可以很容易地做到这一点：

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
          new go.Binding("fill", "color")),
        $(go.Panel, "Horizontal", { margin: 3 }, // Margin will control how big the border is
          $(go.Shape, "RoundedLeftRectangle", { strokeWidth: 0, fill: 'red', width: 30, height: 60 }),
          $(go.Shape, "RoundedRightRectangle", { strokeWidth: 0, fill: 'purple', width: 100, height: 60 })
         )
      );

这些形状的定义：

go.Shape.defineFigureGenerator("RoundedLeftRectangle", function (shape, w, h) {
  // this figure takes one parameter, the size of the corner
  var p1 = 5;  // default corner size
  if (shape !== null) {
    var param1 = shape.parameter1;
    if (!isNaN(param1) && param1 >= 0) p1 = param1;  // can't be negative or NaN
  }
  p1 = Math.min(p1, w);  // limit by width & height
  p1 = Math.min(p1, h/3);
  var geo = new go.Geometry();
  // a single figure consisting of straight lines and quarter-circle arcs
  geo.add(new go.PathFigure(w, 0)
    .add(new go.PathSegment(go.PathSegment.Line, w, h))
    .add(new go.PathSegment(go.PathSegment.Line, p1, h))
    .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1))
    .add(new go.PathSegment(go.PathSegment.Line, 0, p1))
    .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1).close()));
  // don't intersect with two top corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
  geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
  return geo;
});

go.Shape.defineFigureGenerator("RoundedRightRectangle", function (shape, w, h) {
  // this figure takes one parameter, the size of the corner
  var p1 = 5;  // default corner size
  if (shape !== null) {
    var param1 = shape.parameter1;
    if (!isNaN(param1) && param1 >= 0) p1 = param1;  // can't be negative or NaN
  }
  p1 = Math.min(p1, w);  // limit by width & height
  p1 = Math.min(p1, h/3);
  var geo = new go.Geometry();
  // a single figure consisting of straight lines and quarter-circle arcs
  geo.add(new go.PathFigure(0, 0)
    .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
    .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
    .add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
    .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
    .add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
  // don't intersect with two bottom corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
  geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
  return geo;
});

现场示例：https://codepen.io/simonsarris/pen/RwLZxwp