How to Change the Overview Box border

GoJS
1

I am trying to change the border of the overview box from the default magenta. I tried using the directions given in a previous post in 2014, but stroke is no longer an option.

myOverview.box.elt(0).stroke

There are other options, such as areaBackground.

I am working in Angular and this was my last try:
const myOverview =
(go.Overview, 'myOverviewDiv', // the HTML DIV element for the Overview { observed: myDiagram, contentAlignment: go.Spot.Center }); // tell it which Diagram to show and pan myOverview.box.elt(0).areaBackground = (go.Brush, go.Brush.Linear, {color: ‘orange’});
}

Can someone please point me in the right direction?

Thanks!

2

I found the solution:

const myOverview =
$(go.Overview, ‘myOverviewDiv’, // the HTML DIV element for the Overview
{ observed: myDiagram, contentAlignment: go.Spot.Center }); // tell it which Diagram to show and pan
const box = new go.Part();
const s = new go.Shape();
s.stroke = ‘orange’;
s.strokeWidth = 2;
s.fill = ‘transparent’;
s.name = ‘BOXSHAPE’;
box.selectable = true;
box.selectionObjectName = ‘BOXSHAPE’;
box.locationObjectName = ‘BOXSHAPE’;
box.resizeObjectName = ‘BOXSHAPE’;
box.cursor = ‘move’;
box.selectionAdorned = false;
box.add(s);
myOverview.box = box;
}

3

Yes, you can redefine the whole Overview.box. But I found that this worked, just as the 2014 forum post said:

      myOverview =
        $(go.Overview, "myOverviewDiv",
          {
            observed: myDiagram,
            contentAlignment: go.Spot.Center
          });
      myOverview.box.elt(0).stroke = "orange";
4

Thank you for your reply, Walter.

When I use that line stroke is underlined in red and I have a ts error that states "property stroke does not exist on type ‘GraphObject’.

Perhaps it is problem with the version of typescript I am using? I am using 3.1.6.

5

You didn’t give any hints that you were using TypeScript and that the error was a compile-time error, not a run-time error. I bet my code works correctly.

Panel.elt is declared to return a GraphObject, not a Shape, so you’ll need to cast it to a Shape.

6

I think you are probably right too, Walter. I will check it again later. Thank you!