LayerBands(Swim Lanes) layout for Angular 5 in typeScript

@kapiton09 wrote:

I am new to GoJS.
I am trying to convert the swimBands layout from JavaScript to TypeScript which I am not getting it right.

How do I do this override?

     // Perform a TreeLayout where commitLayers is overridden to modify the background Part whose key is "_BANDS".
      function BandedTreeLayout() {
        go.TreeLayout.call(this);
        this.layerStyle = go.TreeLayout.LayerUniform;  // needed for straight layers
      }
      go.Diagram.inherit(BandedTreeLayout, go.TreeLayout);
      /** @override */
      BandedTreeLayout.prototype.commitLayers = function(layerRects, offset) {
        // update the background object holding the visual "bands"
        var bands = this.diagram.findPartForKey("_BANDS");
        if (bands) {
          var model = this.diagram.model;
          bands.location = this.arrangementOrigin.copy().add(offset);
          // make each band visible or not, depending on whether there is a layer for it
          for (var it = bands.elements; it.next(); ) {
            var idx = it.key;
            var elt = it.value;  // the item panel representing a band
            elt.visible = idx < layerRects.length;
          }
          // set the bounds of each band via data binding of the "bounds" property
          var arr = bands.data.itemArray;
          for (var i = 0; i < layerRects.length; i++) {
            var itemdata = arr[i];
            if (itemdata) {
              model.setDataProperty(itemdata, "bounds", layerRects[i]);
            }
          }
        }
      };
      // end BandedTreeLayout

When I use it as a function, go.Diagram.inherit has issue? And, I am doing it inside Angular component constructor.

export class AppComponent extends MainComponent implements OnInit {
    @Input('parentController') parentController: QuotesComponent;

    private diagram: go.Diagram = new go.Diagram();
    private palette: go.Palette = new go.Palette();
    private HORIZONTAL = true;

    @ViewChild('diagramDiv')
    private diagramRef: ElementRef;

    @ViewChild('paletteDiv')
    private paletteRef: ElementRef;

    @Input()
    get model(): go.Model { return this.diagram.model; }
    set model(val: go.Model) { this.diagram.model = val; }

    @Output()
    nodeSelected = new EventEmitter<go.Node | null>();

    @Output()
    modelChanged = new EventEmitter<go.ChangedEvent>();

    constructor() {
        super();
        this.adminMode = true;

       // Perform a TreeLayout where commitLayers is overridden to modify the background Part whose key is "_BANDS".
  function BandedTreeLayout() {
    go.TreeLayout.call(this);
    this.layerStyle = go.TreeLayout.LayerUniform;  // needed for straight layers
  }
  go.Diagram.inherit(BandedTreeLayout, go.TreeLayout); ====>> This has issue
  /** @override */
  BandedTreeLayout.prototype.commitLayers = function(layerRects, offset) {
            // update the background object holding the visual "bands"
            var bands = this.diagram.findPartForKey("_BANDS");
            if (bands) {
                var model = this.diagram.model;
                bands.location = this.arrangementOrigin.copy().add(offset);
                // make each band visible or not, depending on whether there is a layer for it
                for (var it = bands.elements; it.next();) {
                    var idx = it.key;
                    var elt = it.value;  // the item panel representing a band
                    elt.visible = idx < layerRects.length;
                }
                // set the bounds of each band via data binding of the "bounds" property
                var arr = bands.data.itemArray;
                for (var i = 0; i < layerRects.length; i++) {
                    var itemdata = arr[i];
                    if (itemdata) {
                        model.setDataProperty(itemdata, "bounds", layerRects[i]);
                    }
                }
            }
        };
        // end BandedTreeLayout
        


        const $ = go.GraphObject.make;
        this.diagram = new go.Diagram();
        this.diagram.initialContentAlignment = go.Spot.Center;
        this.diagram.allowDrop = true;  // necessary for dragging from Palette
        this.diagram.undoManager.isEnabled = true;
        this.diagram.addDiagramListener("ChangedSelection",
            e => {
                const node = e.diagram.selection.first();
                this.nodeSelected.emit(node instanceof go.Node ? node : null);
            });
        this.diagram.addModelChangedListener(e => e.isTransactionFinished && this.modelChanged.emit(e));
        this.diagram.layout = $(BandedLayout, {
            angle: this.HORIZONTAL ? 0 : 90,
            arrangement: this.HORIZONTAL ? go.TreeLayout.ArrangementVertical : go.TreeLayout.ArrangementHorizontal
        });

        this.diagram.nodeTemplate =
            $(go.Node, go.Panel.Auto,
                $(go.Shape, "Rectangle",
                    { fill: "white" }),
                $(go.TextBlock, { margin: 5 },
                    new go.Binding("text", "key")));

        this.diagram.nodeTemplateMap.add("Bands",
            $(go.Part, "Position",
                new go.Binding("itemArray"),
                {
                    isLayoutPositioned: false,  // but still in document bounds
                    locationSpot: new go.Spot(0, 0, this.HORIZONTAL ? 0 : 16, this.HORIZONTAL ? 16 : 0),  // account for header height
                    layerName: "Background",
                    pickable: false,
                    selectable: false,
                    itemTemplate:
                        $(go.Panel, this.HORIZONTAL ? "Vertical" : "Horizontal",
                            new go.Binding("position", "bounds", function (b) { return b.position; }),
                            $(go.TextBlock,
                                {
                                    angle: this.HORIZONTAL ? 0 : 270,
                                    textAlign: "center",
                                    wrap: go.TextBlock.None,
                                    font: "bold 11pt sans-serif",
                                    background: $(go.Brush, "Linear", { 0: "aqua", 1: go.Brush.darken("aqua") })
                                },
                                new go.Binding("text"),
                                // always bind "width" because the angle does the rotation
                                new go.Binding("width", "bounds", function (r) { return this.HORIZONTAL ? r.width : r.height; })
                            ),
                            // option 1: rectangular bands:
                            $(go.Shape,
                                { stroke: null, strokeWidth: 0 },
                                new go.Binding("desiredSize", "bounds", function (r) { return r.size; }),
                                new go.Binding("fill", "itemIndex", function (i) { return i % 2 == 0 ? "whitesmoke" : go.Brush.darken("whitesmoke"); }).ofObject())
                            )
                        )
                }
            ));

        this.diagram.linkTemplate =
            $(go.Link,
                $(go.Shape)
            );
    }
}

Posts: 2

Participants: 2

Read full topic