Angular Diagram - Editing Restrictions

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { provideHttpClient, withFetch } from '@angular/common/http'; import notify from 'devextreme/ui/notify'; import { ArrayStore } from 'devextreme-angular/common/data'; import { DxDiagramModule, DxDiagramTypes } from 'devextreme-angular/ui/diagram'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, imports: [ DxDiagramModule, ], }) export class AppComponent { orgItemsDataSource: ArrayStore; constructor(service: Service) { this.orgItemsDataSource = new ArrayStore({ key: 'ID', data: service.getOrgItems(), }); } showToast(text: string) { notify({ position: { at: 'top', my: 'top', of: '#diagram', offset: '0 4', }, message: text, type: 'warning', delayTime: 2000, }); } requestLayoutUpdateHandler(e: DxDiagramTypes.RequestLayoutUpdateEvent) { for (let i = 0; i < e.changes.length; i += 1) { if (e.changes[i].type === 'remove') { e.allowed = true; } else if (e.changes[i].data.ParentID !== undefined && e.changes[i].data.ParentID !== null) { e.allowed = true; } } } requestEditOperationHandler(e) { const diagram = e.component.instance(); if (e.operation === 'addShape') { if (e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') { if (e.reason !== 'checkUIElementAvailability') { this.showToast("You can add only a 'Team' or 'Employee' shape."); } e.allowed = false; } } else if (e.operation === 'deleteShape') { if (e.args.shape.type === 'root') { if (e.reason !== 'checkUIElementAvailability') { this.showToast("You cannot delete the 'Development' shape."); } e.allowed = false; } if (e.args.shape.type === 'team') { for (let i = 0; i < e.args.shape.attachedConnectorIds.length; i += 1) { if ((diagram.getItemById(e.args.shape.attachedConnectorIds[i])).toId !== e.args.shape.id) { if (e.reason !== 'checkUIElementAvailability') { this.showToast("You cannot delete a 'Team' shape that has a child shape."); } e.allowed = false; break; } } } } else if (e.operation === 'resizeShape') { if (e.args.newSize.width < 1 || e.args.newSize.height < 0.75) { if (e.reason !== 'checkUIElementAvailability') { this.showToast('The shape size is too small.'); } e.allowed = false; } } else if (e.operation === 'changeConnection') { const shapeType = e.args.newShape?.type; if (shapeType === 'root' && e.args.connectorPosition === 'end') { if (e.reason !== 'checkUIElementAvailability') { this.showToast("The 'Development' shape cannot have an incoming connection."); } e.allowed = false; } if (shapeType === 'employee' && e.args.connectorPosition === 'start') { e.allowed = false; } } else if (e.operation === 'changeConnectorPoints') { if (e.args.newPoints.length > 2) { if (e.reason !== 'checkUIElementAvailability') { this.showToast('You cannot add points to a connector.'); } e.allowed = false; } } else if (e.operation === 'beforeChangeShapeText') { if (e.args.shape.type === 'root') { if (e.reason !== 'checkUIElementAvailability') { this.showToast("You cannot change the 'Development' shape's text."); } e.allowed = false; } } else if (e.operation === 'changeShapeText') { if (e.args.text === '') { if (e.reason !== 'checkUIElementAvailability') { this.showToast('A shape text cannot be empty.'); } e.allowed = false; } } else if (e.operation === 'beforeChangeConnectorText') { e.allowed = false; } } itemStyleExpr = ({ Type }: Record<string, string>) => ( { fill: { root: '#ffcfc3', team: '#b7e3fe', }[Type] || '#bbefcb', } ); } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), provideHttpClient(withFetch()), ], });

::ng-deep #diagram { height: 600px; }

import { Injectable } from '@angular/core'; export class OrgItem { ID: string; Name: string; Type?: string; ParentID?: string; } const orgItems: OrgItem[] = [ { ID: '106', Name: 'Development', Type: 'root', }, { ID: '107', Name: 'WinForms Team', Type: 'team', ParentID: '106', }, { ID: '109', Name: 'Javascript Team', Type: 'team', ParentID: '106', }, { ID: '110', Name: 'ASP.NET Team', Type: 'team', ParentID: '106', }, { ID: '112', Name: 'Ana Trujillo', Type: 'employee', ParentID: '107', }, { ID: '113', Name: 'Antonio Moreno', Type: 'employee', ParentID: '107', }, { ID: '115', Name: 'Christina Berglund', Type: 'employee', ParentID: '109', }, { ID: '116', Name: 'Hanna Moos', Type: 'employee', ParentID: '109', }, { ID: '119', Name: 'Laurence Lebihan', Type: 'employee', ParentID: '110', }, { ID: '122', Name: 'Patricio Simpson', Type: 'employee', ParentID: '110', }, { ID: '123', Name: 'Francisco Chang', Type: 'employee', ParentID: '110', }, ]; @Injectable() export class Service { getOrgItems() { return orgItems; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-diagram.min.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>