BPMN Editor

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeBpmnEditor } from '@oge-ui/bpmn';
import type { OgeBpmnElementsChangedEvent } from '@oge-ui/bpmn';

@Component({
  selector: 'demo-root',
  imports: [OgeBpmnEditor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-bpmn-editor
      style="height: 480px"
      [(zoom)]="zoom"
      (elementsChanged)="onChanged($event)"
    />
  `,
})
export class Demo {
  // two-way zoom model: wheel zooming writes it back
  protected readonly zoom = signal(1);

  // fires on every command, undo/redo, import and newDiagram()
  protected onChanged(event: OgeBpmnElementsChangedEvent): void {
    console.log(event.source, event.label);
  }
}

import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
import { OgeBpmnEditor } from '@oge-ui/bpmn';
import type { BpmnImportWarning, OgeBpmnImportEvent } from '@oge-ui/bpmn';

const SAMPLE_BPMN_XML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ...>
  <bpmn:process id="Process_order">
    <bpmn:startEvent id="Start_1" name="Order received" />
    <bpmn:userTask id="Task_review" name="Review order" />
    <bpmn:exclusiveGateway id="Gateway_ok" name="Approved?" default="Flow_no" />
    <!-- ... end events, sequence flows and BPMN DI shapes/edges ... -->
  </bpmn:process>
</bpmn:definitions>`;

@Component({
  selector: 'demo-root',
  imports: [OgeBpmnEditor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-bpmn-editor #editor style="height: 420px" (importCompleted)="onImport($event)" />
    <textarea [value]="xml()" (input)="xml.set($any($event.target).value)"></textarea>
    <button type="button" (click)="importXml()">Import</button>
    <button type="button" (click)="exportXml()">Export</button>
  `,
})
export class Demo {
  private readonly editor = viewChild.required(OgeBpmnEditor);

  protected readonly xml = signal(SAMPLE_BPMN_XML);
  protected readonly warnings = signal<readonly BpmnImportWarning[]>([]);

  protected importXml(): void {
    // resolves with { model, warnings, error? }; a fatal parse
    // error leaves the current diagram untouched
    void this.editor().importXml(this.xml());
  }

  protected exportXml(): void {
    // deterministic BPMN 2.0 XML — same model, same bytes
    this.xml.set(this.editor().exportXml());
  }

  protected onImport(event: OgeBpmnImportEvent): void {
    this.warnings.set(event.warnings);
  }
}

import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { OgeBpmnEditor } from '@oge-ui/bpmn';
import type { OgeBpmnDiagramChangedEvent } from '@oge-ui/bpmn';

@Component({
  selector: 'demo-root',
  imports: [OgeBpmnEditor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-bpmn-editor
      #editor
      style="height: 420px"
      (diagramChanged)="onDiagramChanged($event)"
    />
    <button type="button" (click)="restore()">Restore last save</button>
  `,
})
export class Demo {
  private readonly editor = viewChild.required(OgeBpmnEditor);

  // fires once per settled change (autoSaveDebounceMs, default 500ms),
  // with the diagram already serialized to both JSON and XML — no
  // exportJson() call needed and never mid-drag
  protected onDiagramChanged(event: OgeBpmnDiagramChangedEvent): void {
    if (event.source === 'import' || event.source === 'new') return;
    localStorage.setItem('diagram', JSON.stringify(event.json));
    this.editor().markSaved();
  }

  protected restore(): void {
    const raw = localStorage.getItem('diagram');
    if (raw === null) return;
    // structural validation — a broken envelope never clobbers the canvas
    const { error } = this.editor().importJson(JSON.parse(raw));
    if (error !== undefined) console.warn(error);
  }
}

import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { OgeBpmnEditor } from '@oge-ui/bpmn';

@Component({
  selector: 'demo-root',
  imports: [OgeBpmnEditor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-bpmn-editor #editor style="height: 420px" />
    <button type="button" (click)="addBadge()">Add badge</button>
    <button type="button" (click)="clearBadges()">Clear</button>
  `,
})
export class Demo {
  private readonly editor = viewChild.required(OgeBpmnEditor);
  private count = 0;

  // attach a count bubble to the selected element; the badge tracks it
  // through pan, zoom and model changes, hides while the element is
  // gone and returns the handle for removeOverlay()
  protected addBadge(): void {
    const [id] = this.editor().getSelection();
    if (id === undefined) return;
    this.editor().addOverlay({
      elementId: id,
      // rendered through Angular's sanitizing [innerHTML]
      html: '<span class="badge">' + ++this.count + '</span>',
      position: 'top-right',
      offset: { x: 4, y: -4 },
    });
  }

  protected clearBadges(): void {
    this.editor().clearOverlays(); // or clearOverlays(elementId)
  }
}

import { ChangeDetectionStrategy, Component, afterNextRender, viewChild } from '@angular/core';
import { OgeBpmnEditor } from '@oge-ui/bpmn';

declare const PROCESS_XML: string; // e.g. fetched from your API

@Component({
  selector: 'demo-root',
  imports: [OgeBpmnEditor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-bpmn-editor #viewer style="height: 360px" [readOnly]="true" />
  `,
})
export class Demo {
  private readonly viewer = viewChild.required(OgeBpmnEditor);

  constructor() {
    // load the diagram once the view exists; readOnly blocks every
    // mutation (palette, context pad, keyboard editing, drags) but
    // keeps selection, pan, zoom and the accessible reading order
    afterNextRender(() => {
      void this.viewer().importXml(PROCESS_XML);
    });
  }
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeBpmnEditor, provideOgeBpmnConfig } from '@oge-ui/bpmn';
import type { OgeBpmnMessages } from '@oge-ui/bpmn';

@Component({
  selector: 'demo-root',
  imports: [OgeBpmnEditor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- per-instance override via the [messages] input -->
    <oge-bpmn-editor style="height: 420px" [messages]="turkish" />
  `,
})
export class Demo {
  // paletteLabels is a full record — every palette entry gets its label
  protected readonly turkish: Partial<OgeBpmnMessages> = {
    canvasLabel: 'BPMN diyagram editörü',
    canvasHint: 'Diyagramdan çıkmak için Escape sonra Tab',
    emptyText: 'Boş diyagram — paletten bir öğe seçin',
    paletteLabel: 'Öğe paleti',
    paletteLabels: {
      startEvent: 'Başlangıç olayı',
      endEvent: 'Bitiş olayı',
      intermediateThrowEvent: 'Ara fırlatma olayı',
      intermediateCatchEvent: 'Ara yakalama olayı',
      boundaryEvent: 'Sınır olayı',
      task: 'Görev',
      userTask: 'Kullanıcı görevi',
      serviceTask: 'Servis görevi',
      scriptTask: 'Betik görevi',
      callActivity: 'Çağrı aktivitesi',
      subProcess: 'Alt süreç',
      eventSubProcess: 'Olay alt süreci',
      transaction: 'İşlem',
      exclusiveGateway: 'Dışlayıcı geçit',
      parallelGateway: 'Paralel geçit',
      dataObject: 'Veri nesnesi',
      dataStore: 'Veri deposu',
      group: 'Grup',
      pool: 'Havuz',
      textAnnotation: 'Metin notu',
    },
  };
}

// or app-scoped defaults (merged over the built-ins):
export const appConfig = {
  providers: [
    provideOgeBpmnConfig({
      gridSize: 20, // placement + arrow-key step
      snapThreshold: 8, // neighbor-alignment snapping
      zoomMin: 0.5,
      zoomMax: 2,
      autoSaveDebounceMs: 1000, // diagramChanged settle time (0 = sync)
      colorPresets: ['#fee2e2', '#dcfce7', '#dbeafe'], // panel fill swatches
      messages: { emptyText: 'Boş diyagram — paletten bir öğe seçin' },
    }),
  ],
};