Skip to content

Instantly share code, notes, and snippets.

@adsl99801

adsl99801/angular cli.ts

Last active January 10, 2019 09:57
Show Gist options
  • Save adsl99801/90812bb2e563fe99bb10e3667fbecd3b to your computer and use it in GitHub Desktop.
Save adsl99801/90812bb2e563fe99bb10e3667fbecd3b to your computer and use it in GitHub Desktop.
Download ZIP
bpmn.io minimap fail in angular cli project
Raw
angular cli.ts
//file1
//bpmn-js.ts
import _Modeler from 'bpmn-js/lib/Modeler.js';
import * as _propertiesPanelModule from 'bpmn-js-properties-panel';
// import * as _propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import * as _BpmnPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/bpmn';
import * as _EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import _PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
import _CustomModeler from '../bpmn-js/custom-modeler';
import _nyanDrawModule from '../bpmn-js/custom-modeler/nyan/draw';
import _nyanPaletteModule from '../bpmn-js/custom-modeler/nyan/palette';
import _minimapModule from 'diagram-js-minimap';
export const minimapModule = _minimapModule;
export const nyanDrawModule = _nyanDrawModule;
export const nyanPaletteModule = _nyanPaletteModule;
export const CustomModeler = _CustomModeler;
export const Modeler = _Modeler;
export const EntryFactory = _EntryFactory;
export const propertiesPanelModule = _propertiesPanelModule;
// export const propertiesProviderModule = _propertiesProviderModule;
export const BpmnPropertiesProvider = _BpmnPropertiesProvider;
export interface IPaletteProvider {
getPaletteEntries(): any;
}
export interface IPalette {
registerProvider(provider: IPaletteProvider): any;
}
export interface IPropertiesProvider {
getTabs(elemnt): any;
}
//file 2
//bpmn.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// import camundaModdleDescriptor from '../../../assets/camunda.json';
import {
CustomModeler, propertiesPanelModule, BpmnPropertiesProvider
, minimapModule, Modeler
} from '../../bpmn-js/bpmn-js';
@Component({
selector: 'app-bpmn',
templateUrl: './bpmn.component.html',
styleUrls: ['./bpmn.component.css']
})
export class BpmnComponent implements OnInit, OnDestroy {
title = 'Angular/BPMN';
modeler;
constructor(private http: HttpClient) {
}
ngOnDestroy(): void {
console.log('ngOnDestroy save');
}
ngOnInit(): void {
this.modeler = new Modeler({
container: '#canvas',
width: '100%',
height: '100%',
keyboard: {
bindTo: document
},
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
propertiesPanelModule,
BpmnPropertiesProvider,
minimapModule
], moddleExtensions: {
// camunda: camundaModdleDescriptor
}
});
const xml = window.localStorage['xmlTemp'] || '';
if (xml) {
this.modeler.importXML(xml);
}
const canvas = this.modeler.get('canvas');
canvas.zoom('fit-viewport');
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}
}
read(): void {
console.log('Modeler:', this.modeler);
const elementRegistry = this.modeler.get('elementRegistry');
console.log('elementRegistry:', elementRegistry);
const elements = elementRegistry.getAll();
for (let _i = 0; _i < elements.length; _i++) {
const num = elements[_i];
console.log('name:' + num.name, num);
}
const task = elementRegistry.get('Task_0y8cmbf');
const sequenceFlow = task.businessObject;
console.log('sequenceFlow:', sequenceFlow);
}
load(): void {
// tslint:disable-next-line:max-line-length
this.modeler.importXML('<?xml version="1.0" encoding="UTF-8"?> <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <bpmn2:process id="Process_1" isExecutable="false"> <bpmn2:startEvent id="StartEvent_1"/> </bpmn2:process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"> <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </bpmn2:definitions>', this.handleError);
// const url = '/assets/bpmn/newDiagram.bpmn';
// this.http.get(url, {
// headers: { observe: 'response' }, responseType: 'text'
// }).subscribe(
// (x: any) => {
// console.log('Fetched XML, now importing: ', x);
// this.modeler.importXML(x, this.handleError);
// },
// this.handleError
// );
this.modeler.get('eventBus').on('element.click', function (e) {
console.log(e.element.id);
});
}
save(): void {
this.modeler.saveXML((err: any, xml: any) => {
window.localStorage['xmlTemp'] = xml;
console.log('Result of saving XML: ', err, xml);
}
);
}
}
//file3
//bpmn.component.css
.toolbox {
background-color: aquamarine
}
.modeler {
/* display: flex; */
background-color: gray;
width: 100%;
height: 100%;
}
#canvas {
flex: 8
}
#js-properties-panel {
flex: 2
}
//file4
//bpmn.component.html
<div class="toolbox">
<button (click)="load()">Load <i class="fa fa-folder-open"></i></button>
<button (click)="save()">Save <i class="fa fa-save"></i></button>
<button (click)="read()">read</button>
</div>
<div class="modeler">
<div id="canvas"></div>
<div id="js-properties-panel"></div>
</div>
//file 5
//angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bpmn-js/dist/assets/diagram-js.css",
"node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css",
"node_modules/diagram-js-minimap/assets/diagram-js-minimap.css",
"node_modules/bpmn-js-properties-panel/styles/properties.less",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demo:build"
},
"configurations": {
"production": {
"browserTarget": "demo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"demo-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "demo:serve"
},
"configurations": {
"production": {
"devServerTarget": "demo:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "demo"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment