Is there a way I can disable deletion of a particular node & edge?

[advayumare]

Hello Team,
First of all I have been looking for a angular diagramming library for years now, finally a wonderful option now. thanks for that.

I just wanted to know if there's an in built flag or api that allows disabling deletion of an edge and a node.

[piotrblaszczyk]

Hi @advayumare,
Thank you so much for the kind words! It genuinely means a lot to hear ngDiagram is the option you'd been waiting for. 🙏

To your question: there isn't a built-in deletable flag on nodes/edges (yet), but you can get exactly this behavior with a small custom middleware. Every deletion flows through the middleware chain first, so you can catch it and cancel.

Mark the elements you want to protect, e.g. data: { locked: true }, then:

import type { Middleware } from 'ng-diagram';

export const protectDeletion: Middleware<'protect-deletion'> = {
  name: 'protect-deletion',
  execute: ({ helpers }, next, cancel) => {
    const locked =
      helpers.getRemovedNodes().some((n) => n.data?.locked) ||
      helpers.getRemovedEdges().some((e) => e.data?.locked);

    locked ? cancel() : next();
  },
};

Register it on the component:

middlewares = createMiddlewares((defaults) => [protectDeletion, ...defaults]);
// <ng-diagram [middlewares]="middlewares" ... />

This covers everything: the Delete/Backspace key, programmatic deleteNodes()/deleteEdges(), all of it.

One heads-up: cancel() aborts the whole delete, so if someone selects a locked node together with normal ones, nothing gets deleted. If you'd rather delete the others and only spare the locked ones, re-add them instead of cancelling:

next({ nodesToAdd: lockedNodes, edgesToAdd: lockedEdges });