Want to implement Local View on Diagram

GoJS
1

HI
I want to implement Local View for GraphLinkModel.

whenever i want to implement local view for GraphLinkModel my linkages are not visible in that case,

local view for reference: Local View

i am using same local View sample only replace the GraphLinkModel with TreeModel
and my layout is LayereDiagraphLayout.

2

You will also need to replace the code that creates the local model from the whole graph near the selected node. The sample assumes a tree structured graph, which would not apply to you. And you would need to choose link data as well as node data.

3

Hi
my Local View Diagram code is working Fine , but after Applying local View I am facing some issues like

  1. text Block editable property is not working.
  2. isSubGraphExpanded property of SubGraphExpanderButton is not working For Grouping,
    i am not able to expand my Group in Original and local View diagram as well.
4

Well, the first thing to notice in that sample is that the local view Diagram has Diagram.isReadOnly property set to true. That prevents editing in that diagram.

If you replace that setting with something like:

  . . .,
  allowCopy: false,
  allowDelete: false,
  . . .

then the user should be able to edit text or collapse/expand subgraphs.

Now that you are allowing editing in the local view, you probably want to turn on the UndoManager. Furthermore, because in that sample the same node data objects are being shared between two Models, you’ll want to update the full diagram when the local diagram has modified the data in the local model:

  new go.Diagram(. . .,
        {
            . . .
            //isReadOnly: true,
            allowCopy: false,
            allowDelete: false,
            // changes are allowed here, so we need to turn on the UndoManager
            "undoManager.isEnabled": true,
            // also update the full diagram when the local diagram model changes
            "ModelChanged": e => {
              if (e.isTransactionFinished) {  // but only at the end of any transaction or undo or redo
                const txn = e.object;
                if (!txn) return;
                // iterate over the ChangedEvents that were saved in the Transaction
                txn.changes.each(evt => {
                  // only care about ChangedEvents of the Model, and only property changes
                  if (evt.model !== null && evt.change === go.ChangedEvent.Property) {
                    const data = evt.object;
                    const part = myFullDiagram.findPartForData(data);
                    if (part) part.updateTargetBindings();
                  }
                });
              }
            }

I assume in your node template you have set TextBlock.editable to true and have added a TwoWay Binding on the TextBlock.text property. Having done so in my copy of the LocalView sample modified as above, editing text seems to work well.

[EDIT: I have improved the ModelChanged listener to be more efficient.]