Prevent deleting a node

GoJS
1

Hello,

I tried deletable: false as new go.Binding(‘deletable’, ‘false’)) in Shape node, but its not working for me. Is there another way to define it?

2

Is there a reason you’re using a data binding?

If you just don’t want your nodes to be deletable, you can set that property in the node template:

$(go.Node, ...,
  { deletable: false, ... },
  ...
)
3

Also, if you want to use a data Binding, the source property name probably shouldn’t be “false”. You want the property value to be false or true, but the name of the property should probably be something like “deletable” or “removable” or something more meaningful than “false”.

4

Thanks for replies.
But I am using this property on API data value. So any suggestion, how to use it dynamically particular shape node in my .ts file?
E.g. “deletable”: “isEditable” …
So, here isEditable will be either true or false depending on server data.

FYI… Here is my scenario –
I am using simple angular demo project in which I have created my-diagram-component for gojs code and for data manipulation I have created another app-component in which I am binding data to gojs shape. Now I have added node to shape but I want to prevent particular node from deletion depends on condition.

e.g. my-diagram-component -

this.goJsObj(go.Node, ‘Auto’,
{ locationSpot: go.Spot.Center },
new go.Binding(‘location’, ‘loc’, go.Point.parse).makeTwoWay(go.Point.stringify),
this.goJsObj(go.Shape, ‘Rectangle’,
{
stroke: ‘gray’, strokeWidth: .5, width: 170,
fill: null, // the default fill, if there is no data-binding
portId: ‘’, cursor: ‘pointer’, // the Shape is the port, not the whole Node
// allow all kinds of links from and to this port
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},
new go.Binding(‘fill’, ‘color’)),
this.goJsObj(go.TextBlock,
{
font: ‘bold 12px sans-serif’, width: 160,
stroke: ‘#111’,
margin: 6,
isMultiline: false, // don’t allow newlines in text
editable: false, // allow in-place editing by user
textAlign: ‘left’,
verticalAlignment: go.Spot.Center,
text: ‘textAlign: “left”’
},
new go.Binding(‘text’, ‘cohortName’).makeTwoWay()),

In this code I want to apply deletable:false depends on server data. Can anyone tell me where exactly I put the deletable property and how to bind boolean value to deletable from app-component?

5 
  $$(go.Node, . . .,
      new go.Binding("deletable"),
      . . .
  )

Then you make sure that the data you send sets the “deletable” property on each node data object to the boolean value true or false.

If you do not set that property on the data, the value of Node.deletable remains at its default value of true.

You can name the data property whatever you want – pass that name as the second argument to the Binding constructor. I did not specify a source property name in the code above, so it uses the same name as the target property, in this case “deletable”.

Please read GoJS Using Models -- Northwoods Software and GoJS Data Binding -- Northwoods Software.

6

Hi Walter,

I tried your above solution also but still its not working for me. Even I tried new go.Binding(“deletable”,false); but its not helpful to me.
Is there another way to prevent particular node from deletion based on API data value?

7

Could you please show us an instance of your model data?

And could you please show us the properties and Bindings you have set on your Node template? Don’t bother showing us the contents of the Node template, because the GraphObjects inside the Node do not matter for this issue.

8

Please find my below code:

my-diagram-component.ts -->

const abc =
this.goJsObj(go.Node, ‘Auto’,
// { locationSpot: go.Spot.Center },
new go.Binding(‘location’, ‘loc’, go.Point.parse).makeTwoWay(go.Point.stringify),

    this.goJsObj(go.Picture,
      { width: 40, height: 40, source: 'abc.png' },
      { cursor: 'pointer', portId: '',
      fromLinkable: true, fromLinkableSelfNode: false, fromLinkableDuplicates: false,
      toLinkable: true, toLinkableSelfNode: false, toLinkableDuplicates: false }),

    this.goJsObj(go.TextBlock,
      {
        font: 'bold 11px sans-serif',
        stroke: '#111',
        margin: 2,
        isMultiline: false,  // don't allow newlines in text
        editable: false,  // allow in-place editing by user
        textAlign: 'left'
      },
      new go.Binding('text', 'name').makeTwoWay(),
      _new go.Binding('deletable', 'isEditable'))_

  );
const templmap = new go.Map<string, go.Node>();
templmap.add('category', abc);
this.diagram.nodeTemplateMap = templmap;

And for data - app.component.ts ==>

this.abcNode = {
‘key’ : 1,
‘loc’:’ 300 , 50’,
‘name’: ‘abcd’ ,
’isEditable’: false,
‘category’: ‘abcd’,
’

9

The problem is that you are trying to bind the TextBlock.deletable property – BUT THERE IS NO SUCH PROPERTY. You need to move the Binding to be on the Node.

You should have gotten a warning in the console, if you are using go-debug.js.

By the way, you have set TextBlock.editable to be false. Unless you expect to modify the TextBlock.text property programmatically, there is no reason to use a TwoWay Binding on the TextBlock.text property.

10

Its my bad, I was binding deletable property to TextBlock. Now its working for me. Thank you so much for your help.