Skip to content

Commit 1f33c1b

Browse files
LaviniaStiliadouLaviniaStiliadou
authored
Add files via upload
1 parent 8799317 commit 1f33c1b

40 files changed

+17241
-0
lines changed

‎README.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Angular BPMN Sample project
2+
3+
This is a simple project demonstrating how to integrate Angular (~~5~~ ~~6~~ 7) with the
4+
BPMN-JS components. It is the start of a rewrite of my previous project integrating
5+
Angular2 with BPMN-JS: https://github.com/narve/ang2-bpmnjs.
6+
7+
The previous project was created in an ancient period when Angular2 was still hot,
8+
and suffered from several problems,
9+
chief among them the complicated setup (lots of webpack configuration) and difficulty
10+
of upgrading components.
11+
12+
This time around I wanted to use the Angular CLI and as many defaults, standards and conventions as possible.
13+
The main objective is to have a simple, standardized solution, making it easy to maintain and
14+
upgrade the code.
15+
16+
NB: This project is not affiliated with / created by / endorsed by (etc) Camunda/BPMN.IO or anybody but myself.
17+
18+
19+
# Feedback
20+
21+
Feedback is welcome, as issues, pull requests, comments, whatever. Without feedback this project
22+
will be left unmaintained.
23+
24+
25+
# Documentation
26+
27+
The documentation is kept to a bare minimum in order to avoid out-of-date information.
28+
Especially Angular is a moving target.
29+
Consult the documentation for Typescript/Angular/AngularCLI/BPMN-JS. Remember to check that
30+
you are viewing the correct version!
31+
32+
To run this project with live-reload etc:
33+
34+
git clone [email protected]:narve/angular-bpmn.git
35+
cd angular-bpmn
36+
npm install
37+
npm start
38+
39+
Then look at http://localhost:4200.
40+
41+
Or else, to run using plain http-server
42+
43+
npm run build
44+
npx run http-server dist
45+
46+
47+
NB: The prod-mode is currently not working - it builds but fails at runtime.
48+
49+
To run in prod-mode:
50+
51+
npm run start-prod
52+
53+
or
54+
55+
npm run build-prod
56+
npx run http-server dist
57+
58+
# Requirements / Tested on
59+
60+
- Linux (Mint)
61+
- Windows (plain Powershell, not Git Bash)
62+
- Linux-On-Windows (WSL)
63+
64+
- npm v9.2.11 (probably works on other versions)
65+
66+
# Features / Status
67+
68+
- Angular CLI based project (see `docs` and `package.json` for exact versions).
69+
- No installation / setup required, besides `node`/`npm`
70+
71+
- Async loading of a sample BPMN diagram
72+
- Properties panel
73+
- Custom properties (extending original)
74+
- Custom palette (extending original)
75+
76+
- Surprisingly little actual code (including configuration files!)
77+
- Hopefully usable as a template / inspiration for actual production use
78+
- Hopefully as future-proof as any front-end code can be these days
79+
80+
81+
# Known bugs / limitations
82+
83+
- Let me know :)

‎angular.json

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"proc-vis-web": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"architect": {
11+
"build": {
12+
"builder": "@angular-devkit/build-angular:browser",
13+
"options": {
14+
"outputPath": "dist",
15+
"index": "src/index.html",
16+
"main": "src/main.ts",
17+
"tsConfig": "src/tsconfig.app.json",
18+
"polyfills": "src/polyfills.ts",
19+
"assets": [
20+
"src/assets",
21+
"src/favicon.ico"
22+
],
23+
"styles": [
24+
"src/styles.scss",
25+
"node_modules/bpmn-js/dist/assets/diagram-js.css",
26+
"node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css",
27+
"node_modules/bpmn-js-properties-panel/styles/properties.less"
28+
],
29+
"scripts": []
30+
},
31+
"configurations": {
32+
"production": {
33+
"optimization": true,
34+
"outputHashing": "all",
35+
"sourceMap": false,
36+
"extractCss": true,
37+
"namedChunks": false,
38+
"aot": true,
39+
"extractLicenses": true,
40+
"vendorChunk": false,
41+
"buildOptimizer": true,
42+
"fileReplacements": [
43+
{
44+
"replace": "src/environments/environment.ts",
45+
"with": "src/environments/environment.prod.ts"
46+
}
47+
]
48+
}
49+
}
50+
},
51+
"serve": {
52+
"builder": "@angular-devkit/build-angular:dev-server",
53+
"options": {
54+
"browserTarget": "proc-vis-web:build"
55+
},
56+
"configurations": {
57+
"production": {
58+
"browserTarget": "proc-vis-web:build:production"
59+
}
60+
}
61+
},
62+
"extract-i18n": {
63+
"builder": "@angular-devkit/build-angular:extract-i18n",
64+
"options": {
65+
"browserTarget": "proc-vis-web:build"
66+
}
67+
},
68+
"test": {
69+
"builder": "@angular-devkit/build-angular:karma",
70+
"options": {
71+
"main": "src/test.ts",
72+
"karmaConfig": "./karma.conf.js",
73+
"polyfills": "src/polyfills.ts",
74+
"tsConfig": "src/tsconfig.spec.json",
75+
"scripts": [],
76+
"styles": [
77+
"src/styles.scss",
78+
"node_modules/bpmn-js/dist/assets/diagram-js.css",
79+
"node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css",
80+
"node_modules/bpmn-js-properties-panel/styles/properties.less"
81+
],
82+
"assets": [
83+
"src/assets",
84+
"src/favicon.ico"
85+
]
86+
}
87+
},
88+
"lint": {
89+
"builder": "@angular-devkit/build-angular:tslint",
90+
"options": {
91+
"tsConfig": [
92+
"src/tsconfig.app.json",
93+
"src/tsconfig.spec.json"
94+
],
95+
"exclude": [
96+
"**/node_modules/**"
97+
]
98+
}
99+
}
100+
}
101+
},
102+
"proc-vis-web-e2e": {
103+
"root": "e2e",
104+
"sourceRoot": "e2e",
105+
"projectType": "application",
106+
"architect": {
107+
"e2e": {
108+
"builder": "@angular-devkit/build-angular:protractor",
109+
"options": {
110+
"protractorConfig": "./protractor.conf.js",
111+
"devServerTarget": "proc-vis-web:serve"
112+
}
113+
},
114+
"lint": {
115+
"builder": "@angular-devkit/build-angular:tslint",
116+
"options": {
117+
"tsConfig": [
118+
"e2e/tsconfig.e2e.json"
119+
],
120+
"exclude": [
121+
"**/node_modules/**"
122+
]
123+
}
124+
}
125+
}
126+
}
127+
},
128+
"defaultProject": "proc-vis-web",
129+
"schematics": {
130+
"@schematics/angular:component": {
131+
"prefix": "app",
132+
"styleext": "css"
133+
},
134+
"@schematics/angular:directive": {
135+
"prefix": "app"
136+
}
137+
}
138+
}

‎e2e/app.e2e-spec.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { AppPage } from './app.po';
2+
3+
describe('proc-vis-web App', () => {
4+
let page: AppPage;
5+
6+
beforeEach(() => {
7+
page = new AppPage();
8+
});
9+
10+
it('should display welcome message', () => {
11+
page.navigateTo();
12+
expect(page.getParagraphText()).toEqual('Welcome to app!');
13+
});
14+
});

‎e2e/app.po.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { browser, by, element } from 'protractor';
2+
3+
export class AppPage {
4+
navigateTo() {
5+
return browser.get('/');
6+
}
7+
8+
getParagraphText() {
9+
return element(by.css('app-root h1')).getText();
10+
}
11+
}

‎e2e/tsconfig.e2e.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../out-tsc/e2e",
5+
"baseUrl": "./",
6+
"module": "commonjs",
7+
"target": "es5",
8+
"types": [
9+
"jasmine",
10+
"jasminewd2",
11+
"node"
12+
]
13+
}
14+
}

‎karma.conf.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client:{
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
coverageIstanbulReporter: {
19+
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
20+
fixWebpackSourcePaths: true
21+
},
22+
23+
reporters: ['progress', 'kjhtml'],
24+
port: 9876,
25+
colors: true,
26+
logLevel: config.LOG_INFO,
27+
autoWatch: true,
28+
browsers: ['Chrome'],
29+
singleRun: false
30+
});
31+
};

0 commit comments

Comments
 (0)