How to update dynamically fromLinkable etc?

GoJS
#1

Hi there,

I am using GoJS with angular. I have a directive for my diagram and it works fine.
I want though to make my diagram enabled and disabled for edit links betwween shapes with a switch button.
So i’ve got something like this in my directive:

scope.isEditable = true;

            // Update if when tab if opened
            scope.$on('editRelatisons', function (value, state) {
                if(state === 'true') {
                    scope.isEditable = true;
                } else {
                    scope.isEditable = false;
                }
                console.log(scope.isEditable);

            });

And in my diagram something like this:

//define a shape that holds the body
                            $GO(go.Shape, "RoundedRectangle", {
                                portId: "",
                                fromLinkable: scope.isEditable,
                                toLinkable: scope.isEditable,
                                fromLinkableSelfNode: false,
                                toLinkableSelfNode: false,
                                fromLinkableDuplicates: false,
                                toLinkableDuplicates: false,

I’m broadcasting the status to false or true correctly but it make no impact on my diagram. Links keeps the initial scope’s state.

Any idea?

Thanks

#2

In your JavaScript call to $GO, scope.isEditable was evaluated and returned a boolean. That is the only information that $GO received, so there is nothing to re-evaluate at some future time. Maybe you could establish a data binding, but I think there is a better alternative.

If you want to enable or disable user linking for the whole diagram it is more natural to modify the diagram instead of modifying every single node and/or link. Just set http://gojs.net/latest/api/symbols/Diagram.html#allowLink. Maybe you also want to set Diagram.allowRelink as well.

#3

Could you provide me an example if possible? I read about it but i haven’t managed to make it work.
How will i change it for example within my directive from an outside controller?

#4

Can’t you just watch something in your scope and have it set the Diagram.allowLink and Diagram.allowRelink properties?

Or in your ‘editRelatisons’ event handler modify the Diagram properties?

#5

Yes that’s what i was doing with the scope also but anything i update it doesn’t update the diagram also for some reason :/

#6

But at this @walter i do use all angular musts to make it work.
I just can’t make it work.
So simple to have a button to make the diagram editable or disabled for editing.
Any ideas?

#7

Well, in simple HTML, I would just do something like:

  <button onclick="myDiagram.allowLink = !myDiagram.allowLink">Toggle Linking</button>

Can you add something to your controller to execute this?

#8

Nope it wont. Well i do have to remind you that is an angular app. I think just with HTML i would not be able to make it happen :/

#9

Well i did it finally. That’s the way:

I’m broadcasting from controller to alter the directive like that:

In DOM:

<button ng-click="editRelations()">Enable edit</button>

In controller:

$scope.editRelations = function(){
     $scope.$broadcast('editRelations');
};

In directive:

scope.$on('editRelations', function () {
     diagram.allowLink = !diagram.allowLink;
});

Thanks