Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

examples: bpmn diagrams in dedicated function #26

Merged
merged 1 commit into from
Aug 6, 2020
Merged

examples: bpmn diagrams in dedicated function #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
240 changes: 124 additions & 116 deletions examples/custom-colors/custom-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,126 @@
const bpmn = `<?xml version="1.0" encoding="UTF-8"?>
const bpmn = bpmnDiagram();

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// default colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bpmnVisu.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default font color
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalDefaultFontColor = StyleConstant.DEFAULT_FONT_COLOR;
StyleConstant.DEFAULT_FONT_COLOR = 'Cyan';
const bpmnVisualizationCustomDefaultFontColor = new BpmnVisu(window.document.getElementById('graphCustomFontColor'));
bpmnVisualizationCustomDefaultFontColor.load(bpmn);

// restore StyleConstant defaults
StyleConstant.DEFAULT_FONT_COLOR = originalDefaultFontColor;


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default fill and stroke colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalConfigureCommonDefaultStyle = StyleConfigurator.prototype.configureCommonDefaultStyle;
StyleConfigurator.prototype.configureCommonDefaultStyle = function (style) {
originalConfigureCommonDefaultStyle(style);
style[mxConstants.STYLE_FILLCOLOR] = 'LemonChiffon';
style[mxConstants.STYLE_STROKECOLOR] = 'Orange';
}
// hack to ensure that the pool and lane label area fill color are kept untouched
const originalConfigureStyles = StyleConfigurator.prototype.configureStyles;
StyleConfigurator.prototype.configureStyles = function () {
originalConfigureStyles.apply(this);
[ShapeBpmnElementKind.LANE, ShapeBpmnElementKind.POOL].forEach(kind => {
const style = this.graph.getStylesheet().styles[kind];
style[mxConstants.STYLE_FILLCOLOR] = StyleConstant.DEFAULT_FILL_COLOR;
});
}
const bpmnVisualizationCustomDefaultColor = new BpmnVisu(window.document.getElementById('graphCustomDefaultColors'));
bpmnVisualizationCustomDefaultColor.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom fill and stroke colors depending on BPMN elements
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BpmnVisualizationCustomColors extends BpmnVisu {

constructor(containerId) {
super(window.document.getElementById(containerId));
this.configureStyle();
}

configureStyle() {
const styleSheet = this.graph.getStylesheet(); // mxStylesheet

ShapeUtil.topLevelBpmnEventKinds().forEach(kind => {
const style = styleSheet.styles[kind];
style[mxConstants.STYLE_FILLCOLOR] = 'Pink';
style[mxConstants.STYLE_STROKECOLOR] = 'FireBrick';
});

ShapeUtil.taskKinds().forEach(kind => {
const style = styleSheet.styles[kind];
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'White';
style[mxConstants.STYLE_FILLCOLOR] = 'Lavender';
style[mxConstants.STYLE_STROKECOLOR] = 'DarkBlue';
});

ShapeUtil.gatewayKinds().forEach(kind => {
const style = styleSheet.styles[kind];
style[mxConstants.STYLE_FILLCOLOR] = 'LightGoldenrodYellow';
style[mxConstants.STYLE_STROKECOLOR] = 'DarkOrange';
});

const poolStyle = styleSheet.styles[ShapeBpmnElementKind.POOL];
poolStyle[mxConstants.STYLE_FILLCOLOR] = 'PaleGreen';
poolStyle[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_SOUTH;
poolStyle[mxConstants.STYLE_GRADIENTCOLOR] = 'White';
}

}

// restore StyleConfigurator defaults
StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;
StyleConfigurator.prototype.configureStyles = originalConfigureStyles;


const bpmnVisualizationCustomColors = new BpmnVisualizationCustomColors('graphCustomColors');
bpmnVisualizationCustomColors.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom font color for User Task
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BpmnVisualizationCustomColorUserTask extends BpmnVisu {

constructor(containerId) {
super(window.document.getElementById(containerId));
this.configureStyle();
}

configureStyle() {
const styleSheet = this.graph.getStylesheet(); // mxStylesheet
const style = styleSheet.styles[ShapeBpmnElementKind.TASK_USER];
style[mxConstants.STYLE_FONTCOLOR] = '#2b992a';
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'White';
style[mxConstants.STYLE_FILLCOLOR] = 'Lavender';
style[mxConstants.STYLE_STROKECOLOR] = '#2b992a';
}
}

const bpmnVisualizationCustomFontColorUserTask = new BpmnVisualizationCustomColorUserTask('graphCustomFontColorUserTask');
bpmnVisualizationCustomFontColorUserTask.load(bpmn);

// restore StyleConfigurator defaults
StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;
StyleConfigurator.prototype.configureStyles = originalConfigureStyles;


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// BPMN
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function bpmnDiagram() {
return `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" id="Definitions_12nbmjq" targetNamespace="http://example.bpmn.com/schema/bpmn">
<bpmn:collaboration id="Collaboration_03068dc">
<bpmn:participant id="Participant_0nuvj8r" name="Pool 1" processRef="Process_0vbjbkf" />
Expand Down Expand Up @@ -257,118 +379,4 @@ const bpmn = `<?xml version="1.0" encoding="UTF-8"?>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>`;

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// default colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bpmnVisu.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default font color
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalDefaultFontColor = StyleConstant.DEFAULT_FONT_COLOR;
StyleConstant.DEFAULT_FONT_COLOR = 'Cyan';
const bpmnVisualizationCustomDefaultFontColor = new BpmnVisu(window.document.getElementById('graphCustomFontColor'));
bpmnVisualizationCustomDefaultFontColor.load(bpmn);

// restore StyleConstant defaults
StyleConstant.DEFAULT_FONT_COLOR = originalDefaultFontColor;


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default fill and stroke colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalConfigureCommonDefaultStyle = StyleConfigurator.prototype.configureCommonDefaultStyle;
StyleConfigurator.prototype.configureCommonDefaultStyle = function (style) {
originalConfigureCommonDefaultStyle(style);
style[mxConstants.STYLE_FILLCOLOR] = 'LemonChiffon';
style[mxConstants.STYLE_STROKECOLOR] = 'Orange';
}
// hack to ensure that the pool and lane label area fill color are kept untouched
const originalConfigureStyles = StyleConfigurator.prototype.configureStyles;
StyleConfigurator.prototype.configureStyles = function () {
originalConfigureStyles.apply(this);
[ShapeBpmnElementKind.LANE, ShapeBpmnElementKind.POOL].forEach(kind => {
const style = this.graph.getStylesheet().styles[kind];
style[mxConstants.STYLE_FILLCOLOR] = StyleConstant.DEFAULT_FILL_COLOR;
});
}
const bpmnVisualizationCustomDefaultColor = new BpmnVisu(window.document.getElementById('graphCustomDefaultColors'));
bpmnVisualizationCustomDefaultColor.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom fill and stroke colors depending on BPMN elements
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BpmnVisualizationCustomColors extends BpmnVisu {

constructor(containerId) {
super(window.document.getElementById(containerId));
this.configureStyle();
}

configureStyle() {
const styleSheet = this.graph.getStylesheet(); // mxStylesheet

ShapeUtil.topLevelBpmnEventKinds().forEach(kind => {
const style = styleSheet.styles[kind];
style[mxConstants.STYLE_FILLCOLOR] = 'Pink';
style[mxConstants.STYLE_STROKECOLOR] = 'FireBrick';
});

ShapeUtil.taskKinds().forEach(kind => {
const style = styleSheet.styles[kind];
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'White';
style[mxConstants.STYLE_FILLCOLOR] = 'Lavender';
style[mxConstants.STYLE_STROKECOLOR] = 'DarkBlue';
});

ShapeUtil.gatewayKinds().forEach(kind => {
const style = styleSheet.styles[kind];
style[mxConstants.STYLE_FILLCOLOR] = 'LightGoldenrodYellow';
style[mxConstants.STYLE_STROKECOLOR] = 'DarkOrange';
});

const poolStyle = styleSheet.styles[ShapeBpmnElementKind.POOL];
poolStyle[mxConstants.STYLE_FILLCOLOR] = 'PaleGreen';
poolStyle[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_SOUTH;
poolStyle[mxConstants.STYLE_GRADIENTCOLOR] = 'White';
}

}

// restore StyleConfigurator defaults
StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;
StyleConfigurator.prototype.configureStyles = originalConfigureStyles;


const bpmnVisualizationCustomColors = new BpmnVisualizationCustomColors('graphCustomColors');
bpmnVisualizationCustomColors.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom font color for User Task
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BpmnVisualizationCustomColorUserTask extends BpmnVisu {

constructor(containerId) {
super(window.document.getElementById(containerId));
this.configureStyle();
}

configureStyle() {
const styleSheet = this.graph.getStylesheet(); // mxStylesheet
const style = styleSheet.styles[ShapeBpmnElementKind.TASK_USER];
style[mxConstants.STYLE_FONTCOLOR] = '#2b992a';
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'White';
style[mxConstants.STYLE_FILLCOLOR] = 'Lavender';
style[mxConstants.STYLE_STROKECOLOR] = '#2b992a';
}
}

const bpmnVisualizationCustomFontColorUserTask = new BpmnVisualizationCustomColorUserTask('graphCustomFontColorUserTask');
bpmnVisualizationCustomFontColorUserTask.load(bpmn);

// restore StyleConfigurator defaults
StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;
StyleConfigurator.prototype.configureStyles = originalConfigureStyles;
}
125 changes: 66 additions & 59 deletions examples/custom-fonts/custom-fonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,69 @@
const bpmn = `<?xml version="1.0" encoding="UTF-8"?>
const bpmn = bpmnDiagram();

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// default colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bpmnVisu.load(bpmn);


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default font
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalDefaultFontFamily = StyleConstant.DEFAULT_FONT_FAMILY;
const originalDefaultFontSize = StyleConstant.DEFAULT_FONT_SIZE;
StyleConstant.DEFAULT_FONT_SIZE = '12';
StyleConstant.DEFAULT_FONT_FAMILY = 'Courier New,serif';

const originalConfigureCommonDefaultStyle = StyleConfigurator.prototype.configureCommonDefaultStyle;
StyleConfigurator.prototype.configureCommonDefaultStyle = function (style) {
originalConfigureCommonDefaultStyle(style);
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_ITALIC;
}

const bpmnVisualizationCustomDefaultFont = new BpmnVisu(window.document.getElementById('graphCustomDefaultFont'));
bpmnVisualizationCustomDefaultFont.load(bpmn);

// restore StyleConstant defaults
StyleConstant.DEFAULT_FONT_FAMILY = originalDefaultFontFamily;
StyleConstant.DEFAULT_FONT_SIZE = originalDefaultFontSize;
// restore StyleConfigurator defaults
StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom font depending on BPMN elements
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BpmnVisualizationCustomFonts extends BpmnVisu {

constructor(containerId) {
super(window.document.getElementById(containerId));
this.configureStyle();
}

configureStyle() {
const styleSheet = this.graph.getStylesheet(); // mxStylesheet

const userTaskStyle = styleSheet.styles[ShapeBpmnElementKind.TASK_USER];
userTaskStyle[mxConstants.STYLE_FONTFAMILY] = 'Courier New,serif';
userTaskStyle[mxConstants.STYLE_FONTSIZE] = '14';
userTaskStyle[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD + mxConstants.FONT_ITALIC;

const poolStyle = styleSheet.styles[ShapeBpmnElementKind.POOL];
poolStyle[mxConstants.STYLE_FONTFAMILY] = 'MS Gothic,Courier New,serif';
poolStyle[mxConstants.STYLE_FONTSIZE] = '20';
poolStyle[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
}

}

const bpmnVisualizationCustomFonts = new BpmnVisualizationCustomFonts('graphCustomFonts');
bpmnVisualizationCustomFonts.load(bpmn);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// BPMN
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function bpmnDiagram() {
return `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" id="Definitions_12nbmjq" targetNamespace="http://example.bpmn.com/schema/bpmn">
<bpmn:collaboration id="Collaboration_03068dc">
<bpmn:participant id="Participant_0nuvj8r" name="Pool 1" processRef="Process_0vbjbkf" />
Expand Down Expand Up @@ -217,62 +282,4 @@ const bpmn = `<?xml version="1.0" encoding="UTF-8"?>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>`;

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// default colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bpmnVisu.load(bpmn);


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default font
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalDefaultFontFamily = StyleConstant.DEFAULT_FONT_FAMILY;
const originalDefaultFontSize = StyleConstant.DEFAULT_FONT_SIZE;
StyleConstant.DEFAULT_FONT_SIZE = '12';
StyleConstant.DEFAULT_FONT_FAMILY = 'Courier New,serif';

const originalConfigureCommonDefaultStyle = StyleConfigurator.prototype.configureCommonDefaultStyle;
StyleConfigurator.prototype.configureCommonDefaultStyle = function (style) {
originalConfigureCommonDefaultStyle(style);
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_ITALIC;
}

const bpmnVisualizationCustomDefaultFont = new BpmnVisu(window.document.getElementById('graphCustomDefaultFont'));
bpmnVisualizationCustomDefaultFont.load(bpmn);

// restore StyleConstant defaults
StyleConstant.DEFAULT_FONT_FAMILY = originalDefaultFontFamily;
StyleConstant.DEFAULT_FONT_SIZE = originalDefaultFontSize;
// restore StyleConfigurator defaults
StyleConfigurator.prototype.configureCommonDefaultStyle = originalConfigureCommonDefaultStyle;


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom font depending on BPMN elements
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BpmnVisualizationCustomFonts extends BpmnVisu {

constructor(containerId) {
super(window.document.getElementById(containerId));
this.configureStyle();
}

configureStyle() {
const styleSheet = this.graph.getStylesheet(); // mxStylesheet

const userTaskStyle = styleSheet.styles[ShapeBpmnElementKind.TASK_USER];
userTaskStyle[mxConstants.STYLE_FONTFAMILY] = 'Courier New,serif';
userTaskStyle[mxConstants.STYLE_FONTSIZE] = '14';
userTaskStyle[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD + mxConstants.FONT_ITALIC;

const poolStyle = styleSheet.styles[ShapeBpmnElementKind.POOL];
poolStyle[mxConstants.STYLE_FONTFAMILY] = 'MS Gothic,Courier New,serif';
poolStyle[mxConstants.STYLE_FONTSIZE] = '20';
poolStyle[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
}

}

const bpmnVisualizationCustomFonts = new BpmnVisualizationCustomFonts('graphCustomFonts');
bpmnVisualizationCustomFonts.load(bpmn);
Loading