Dmn diagram in angular 8?

Developers Modeler
1

Hello,
did any one try to edit dmn diagrams using Angular (8) ? I’m able to load the diagram and display the tabs, but when i click the next tabs, canvas is not refreshing with tab content.
can someone point me to any help/documentation URLs please…

2

We do not have an official example for using dmn-js in an Angular App. Can you maybe share your setup / your code base so we have the chance to understand what’s going on?

3

Hello Kiefer,
Sorry for not responding to your request. I’m able to solve this bysubscribing to
import.render.complete
Please see the following code

// following is my UI element to display DMN Diagram
@ViewChild('ref', { static: false }) private el: ElementRef;

//following is my constructor code
this.dmnDiagramModeler.on('import.done', ({ error, warnings }) => {
      if (!error) {
        const activeEditor = this.dmnDiagramModeler.getActiveViewer();
        const canvas = activeEditor.get('canvas');
        canvas.zoom('fit-viewport');
        activeEditor.attachTo(this.el.nativeElement);
        const view = this.dmnDiagramModeler.getViews()[0];
        this.dmnDiagramModeler.open(view);

        // Rendering tabs using angular Dynamic Component and a directive
        this.dmnDiagramTabsCompFactory = this.componentFactoryResolver.resolveComponentFactory(DmnDiagramTabsComponent);
        this.hostViewContainerRef = this.tabsDirectiveHost.viewContainerRef;
        this.hostViewContainerRef.clear();
        this.tabsComponentRef = this.hostViewContainerRef.createComponent(this.dmnDiagramTabsCompFactory);
        this.tabsComponentRef.instance.views = this.dmnDiagramModeler.getViews();
        this.tabClickSub = this.tabsComponentRef.instance.tabClick.subscribe(aView => {
          this.dmnDiagramModeler.open(aView);
        });
        // following "import.render.complete" solve my issue
        this.dmnDiagramModeler.on('import.render.complete', (aNewView,err,wrngs) => {
             const activeEditor1 = this.dmnDiagramModeler.getActiveViewer();
             activeEditor1.attachTo(this.el.nativeElement);
        });
      }
    });
  }

My Directive DmnDiagramTabsHolderDirective

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[jhiDmnDiagramTabsHolder]'
})
export class DmnDiagramTabsHolderDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

My Tabs Component DmnDiagramTabsComponent
for dynamic rendering the tabs

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'jhi-dmn-diagram-tabs-component',
  templateUrl: './dmn-diagram-tabs-component.html',
  styleUrls: ['./dmn-diagram-tabs-component.scss']
})
export class DmnDiagramTabsComponent {
  @Input() views: [];
  @Output() tabClick = new EventEmitter<any>();
  activeTabId = 0;

  CLASS_NAMES = {
    drd: 'dmn-icon-lasso-tool',
    decisionTable: 'dmn-icon-decision-table',
    literalExpression: 'dmn-icon-literal-expression'
  };

  getClassName(aView: any) {
    return this.CLASS_NAMES[aView.type];
  }

  onTabClick(aView: any, tabIndex: number) {
    this.tabClick.emit(aView);
    this.activeTabId = tabIndex;
  }
}

Tabs HTML for my above tabs component

    <div class="editor-tabs">
        <div *ngFor="let aView of views; index as i" 
            [ngClass]="(i==activeTabId)?'tab active':'tab'" 
            data-id="{{ i }}" 
            (click)="onTabClick(aView,i)">
                <span [class]="getClassName(aView)"></span>
                {{ aView.element.name }}
        </div>
    </div>

My main HTML where the DMN is displayed

<div class="row"  class="editor-parent">
   <div #ref class="editor-container">
      <ng-template jhiDmnDiagramTabsHolder></ng-template>
   </div>
</div>
4

Please mark this question as SOLVED
If anyone has any questions on how to render DMN diagram and decisiont ables using Angular 8, can drop a message to me here

5

Hi @mallesh,

How can I delete the pre-rendered DMN table present in canvas and then import a new one?