narve / angular-bpmn Goto Github PK
View Code? Open in Web Editor NEWAngular 5 and BPMN-JS sample project
Angular 5 and BPMN-JS sample project
I'm new to the BPMN process and still trying things out. Is there a way to execute the diagrams created in angular-bpmn using Angular/TypeScript or maybe NodeJS as execute engine?
Hi,
how to add bpmn properties-panel, help really appreciated.
Thank youo
Hi Narve, You did awesome work on the camuda Bpmn part, i am appreciate your work and i amd also doing same like you Right now i ma using the Angular5 project i need to embedded the modular with the Angular5 tpm package and start the project , Project started successfully, But while creating the Modular its through the Error , like Id already exists,so i can't able to create the Module Could you tell me How to Resolve the Issue. its through the Error , like Id already exists,so i can't able to create the Module Could you tell me How to Resolve the Issue.
Hi.currently i am going trying to customize the palette in angular app in a way that i can hide/block the default tools from the palette.For example 'lasso-tools','hands tools' etc.In the bpmn example given in JS here it is fully possible by using the following code
`function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, translate) {
this._palette = palette;
this._create = create;
this._elementFactory = elementFactory;
this._spaceTool = spaceTool;
this._lassoTool = lassoTool;
this._handTool = handTool;
this._translate = translate;
palette.registerProvider(this);
}
`
at first and then in function getPaletteEntries we can just simply provide the list of actions/tools we want in palette in assign function.
But now currently in angular app we are inheriting the class IPaletteProvider as i am figuring out rest of methods.
Any help in this regard is highly appreciated
thanks
I need to add an icon to palette and assign a custom behaviour to that icon.
For that purpose I edited CustomPaletteProvider.ts and added a part from bpmn-js-nyan package (https://github.com/bpmn-io/bpmn-js-nyan/blob/master/lib/nyan/palette/NyanPaletteProvider.js)
With my code I can see a new element is already added to palette. But I can't set a baheviour to that item.
My version below this post.
import {IPalette, IPaletteProvider} from "../bpmn-js/bpmn-js";
export class CustomPaletteProvider implements IPaletteProvider {
static $inject = ['palette', 'originalPaletteProvider'];
myElementFactory;
myCreate;
// Note that names of arguments must match injected modules, see InjectionNames.
// I don't know why originalPaletteProvider matters but it breaks if it isn't there.
// I guess since this component is injected, and it requires an instance of originalPaletteProvider,
// originalPaletteProvider will be new'ed and thus call palette.registerProvider for itself.
// There probably is a better way.
constructor(private palette: IPalette, private originalPaletteProvider: IPaletteProvider) {
// console.log(this.constructor.name, "constructing", palette, originalPaletteProvider);
palette.registerProvider(this);
this.myElementFactory = originalPaletteProvider._elementFactory;
this.myCreate = originalPaletteProvider._create;
}
getPaletteEntries() {
function startCreate(event) {
var serviceTaskShape = this.myElementFactory.create(
'shape', { type: 'bpmn:ServiceTask' }
);
this.myCreate.start(event, serviceTaskShape);
}
return {
save: {
group: 'tools',
className: ['fa-save', 'fa'],
title: 'TEST',
action: {
click: () => console.log( 'TEST Action clicked!')
}
},
createservicetask: {
group: 'tools',
title: 'TEST3',
className: ['bpmn-icon-start-event-signal'],
action: {
dragstart: startCreate,
click: startCreate
}
}
};
}
}
I was trying this repository and noticed no keyboard inputs are working except text input. Other options like delete, search, undo, redo keyboard shortcuts are not working as it works in https://demo.bpmn.io/
Hi narve. I hope you are doing good. Can we have an extended properties panel as shown in the url. e.g when we click on an element. There is input /output tap shown in the properties panel https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/master/properties-panel/docs/screenshot.png.
Hi narve,
could you please guide me the steps where i will use double click event on pallate object to bind external form on it.
Hi,
I need to add colors in my BPMN diagram. Please help.
For adding a new shape I got https://github.com/bpmn-io/bpmn-js-example-custom-shapes library. How can I integrate that library with this one?
Hi.I am using bpmn with angular 4.When importing bpmn file and attaching customElements with the modeler i am facing the issue of undefined .The exact error on console is cannot read property ‘modeler’ of undefined The code in ngOnInit is:
` const url = 'assets/bpmn/initial.bpmn';
this.http.get(url, {
headers: {observe: 'response'}, responseType: 'text'
}).subscribe(
(x: any) =>
{
this.modeler.importXML(x, function(err){
if(err){
console.log(err);
}
this.modeler.get('canvas').zoom('fit-viewport');
this.modeler.addCustomElements(customElements);
});
},`
The code is simple.It basically import bpmn file and after that it attaches he customElements form json file with the xml.This part is important in my case.Attaching customElements with the xml file.My bpmn package version in package.json is
"bpmn-js": “^2.4.1”,
Any idea of why it crashes on runtime?
im getting the error when doing ng build --prod, the problem with propertiesPanel custom providers. Can i know how can i resolve the issue. I think the issue with minification for properties panel.js file
Erro - Error: No provider for "l"! (Resolving: propertiesPanel -> propertiesProvider -> l)
Hi Narve
Thanks for sharing your bmnjs integration with Angular5. I am using this as reference to integrate dmn-js. But I am struggling on how to inject DmnJS module into my app component since dmnjs doesn't have types. I would appreciate if you can give me some pointers on how can similarly include dmn-js?
Thank you.
Hello, i was looking to add palette events in CustomPaletteProvider, you gave us an example to add custom entry (SAVE) and event listener.
But in my case, i'm looking to override default palette entries, for eg: start, end, data-store palette entries in CustomPaletteProvider.ts, could you provide a sample, your help is so needful.
Thanks in advance
First of all, I've being using your project for some while and it is very good, congrats.
Lately I have found a problem when I have to create my custom tab according to the type of the object I'm working with.
For example:
if I select a Task, I need to show tab ABC, and If I select a StartEvent, I need to show tab DEF.
Trying to use element.type but it seems the tab is created before the selection of the object.
Hellow!
what is the best way to implement component translation?
Hi.i am running the project on locally.currently i am unable to load the saved work on the project and also could not able to save the work on my computer using the file extension .bpmn .As i am going through the documentation,i have found out that there is a file cycle of saving the xml doc.but its implementation is not present in angular code.The life cycle is following:
Thanks
I couldn't able to paste the properties to the worksheet. while dragging the property to the worksheet im getting a not symbol.
Can anyone help me with this issue
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.