Overview GOJS highlight box is taking full box

GoJS
#1

At first overview Highlight box is taking full size of outer box but after clicking on it it is going to its state
PFA image for your reference
overview

#2

When do you set Overview.observed? Has the observed Diagram’s model already been loaded or not?

#3

At Start Diagram is not Loaded.
But I am reassigning the Diagram once it is loaded.

HTML:

<div class="nav-map-container" [hidden]="!displayNavigator">
    <gojs-overview
        #myOverview
        [initOverview]="initOverview"    
        [divClassName]="oDivClassName"
        [observedDiagram]="observedDiagram"
    ></gojs-overview>
</div>

TS:

export class MapNavigatorComponent implements OnInit {
    observedDiagram: DiagramComponent['diagram'];
    displayNavigator :boolean = false;
    public oDivClassName = 'myOverviewDiv';

    this.service.updateDiagram.subscribe(() => {
        this.cdr.detectChanges();
        this.observedDiagram = this.service.diagram;
    }); 
    showNavigator = () => {
        this.displayNavigator = !this.displayNavigator;
    };
    public initOverview(): go.Overview {
        const make = go.GraphObject.make;
        const overview = make(go.Overview);
        const box = new go.Part();
        const shape = new go.Shape();
        shape.stroke = '#fd4f00'; // Blood Orange Color
        shape.strokeWidth = 1;
        shape.fill = 'transparent';
        shape.name = 'BOXSHAPE';
        box.selectable = true;
        box.selectionObjectName = 'BOXSHAPE';
        box.locationObjectName = 'BOXSHAPE';
        box.resizeObjectName = 'BOXSHAPE';
        box.cursor = 'move';
        box.selectionAdorned = false;
        box.add(shape);
        overview.box = box;
        return overview;
    }
}
#4

Maybe you shouldn’t set the Overview.observed until you have the initialized Diagram available.

#5

observed diagram is not set, it is just been declared:

Setting observedDiagram once it is loaded.

#6

I was wondering if that statement, this.observedDiagram = this.service.diagram was being called when the Diagram wasn’t ready yet.

In the debugger you could check whether that instance of Diagram had a Diagram.div and that that HTMLDivElement had the proper width and height.

#7

Yes it has a Div
and also have width and height as 1110 and 460 respectively.

#8

I do not know how to reproduce any problem.

At a time when you see the overview’s viewport filled with orange, could you please use the debugger to check the value of Overview.scale and Overview.viewportBounds? I really don’t know what’s going on in your app.

#9

At the time of orangebox:
Overview.scale is 0.0005398244706751153 and
Overview.viewportBounds is
{x: -555, y: -20.000000000000227, width: 1852.4540000000002, height: 1852.4540000000002, s: true}

And Late it is :

Overview.scale is 0.03832753741793318 and
Overview.viewportBounds is
{x: -555, y: -20.000000000000227, width: 3156.999070422535, height: 1852.4540000000002, s: true}

#10

That’s interesting. Initially the Diagram.scale is really small. A bit less than 1/2000. Which oddly enough is the inverse of about how tall the viewport is. So I bet the value of Overview.documentBounds is 1x1. Could you check that please? And the value of the observed Diagram.documentBounds – what is it?

If so, then the problem is that the Overview, even though you say it is observing a Diagram with an HTMLDivElement, is overviewing a diagram with nothing in it. I’m not sure why it zooms out so far, though.

#11

Initially I am keeping the Overview Hidden,
Just for testing I have kept the overview visible at initial state and it is working fine.
But my requirement is that initially it must be hidden.

#12

Right now i have leave but will check it tomorrow and will update you…

#13

Ah, I don’t remember your mentioning that before. I’m guessing that initially the Overview is in a hidden Div with a minimal or zero size, and that causes the computations to be all wrong. But a click on it causes it to notice that the Div has a new size when it became visible in the DOM.

Please read: https://gojs.net/latest/intro/resizing.html
I think you’ll need to call Diagram.requestUpdate on any Diagram or Overview that has its HTMLDivElement change size on it. There’s no DOM event for us to notice such a change, so GoJS has to depend on the app to tell it if the Div has changed size.

#14

Yes, Now the orange box is going but the scale is still very low…
image

#15

Does the observed Diagram’s Div ever change size too?

#16

No It has Never been changed

#17

And now clicking in the Overview causes it to show the observed Diagram’s contents? That’s very odd.

I know this is not a problem normally, because we have a few samples that use Overviews, such as https://gojs.net/latest/samples/orgChartStatic.html, and we have a bunch of regression tests that do, and none of them exhibit this problem.

But I wonder if there’s something about gojs-angular’s components or about how you are using those components that has some kind of race condition in it causing initialization to fail in some circumstances.

Once an Overview knows about the Overview.observed Diagram, it automatically keeps the view up-to-date. (And I already told you about one exception, where the Div changes size and GoJS cannot know about it.)

I’m wondering if you could try setting things up in a different order, time-wise, to avoid this initialization problem.

It would also help if you could tell us how to reproduce the problem.