Print diagram to A1 paper

Developers Modeler
1

Hi , we want to print Diagram on A1 paper size but at this moment when we print it just cover some area of the paper and that is around left corner of A1 paper size. How can we cover all area of A1 paper size.

Thanks
Vicky

2

I guess that depends on your printer’s settings.

1 Like
3

than you very much for response. Pelase see this example it does not automatically cover page area and it shows same on printed page as well… I am show example of A1 page

image

4

Instead of printing the web page try exporting the diagram as SVG and print the exported image. :wink:

5

Actually we added few colors to diagrams elements which does not go with svg file.

6

How are you adding the color?

7

I created custom attribute in properties panel which add the color class in svg element and then through css fill the color

8

There is an API for changing element colors:

modeling.setColor(element, {
  fill: 'red',
  stroke: 'green'
});

This the color will be exported. When using CSS the color won’t be exported.

9

Thanks alot , where can i place this code in property panel?

10

It depends on what you want to achieve inside the PropertiesPanel.

11

i have dropdown with colors Hexa code and i want to set them in diagram. How can i set color if properties panel custom attribute change.

Many thanks,
Vicky

12

Can you please share the code of this dropdown control implementation for your properties panel extension?

13

Sure

Define an Entry

module.exports = AttribPropertiesProvider;

},{"./parts/ColorProps":5,“bpmn-js-properties-panel/lib/PropertiesActivator”:8,“bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps”:32,“bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps”:33,“bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps”:34,“bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps”:35,“bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps”:36,“bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps”:37,“inherits”:313}],4:[function(require,module,exports){
module.exports = {
init: [ ‘propertiesProvider’ ],
propertiesProvider: [ ‘type’, require(’./AttribPropertiesProvider’) ]
};
},{"./AttribPropertiesProvider":3}],5:[function(require,module,exports){
‘use strict’;

var entryFactory = require(‘bpmn-js-properties-panel/lib/factory/EntryFactory’);

//var is = require(‘bpmn-js/lib/util/ModelUtil’).is;

module.exports = function(group, element) {

// Only return an entry, if the currently selected
// element is a start event.

//if (is(element, ‘bpmn:StartEvent’)) {

group.entries.push(entryFactory.selectBox({
  id : 'color',
  description : 'Element background Color',
  label : 'Color',
  modelProperty : 'color',
 selectOptions : [ 
 { name: 'None', value: 'no' },
 { name: 'Light Red', value: 'A43010' },
 { name: 'Green', value: '91A94C' },
 { name: 'Light Green', value: 'C4CFAD' }, 
 {name:'Grey', value:'D8D8D8'},
 {name:'Olive', value:'756E54'},
 {name:'Yellow', value:'ffcc00'},
 {name:'Pink', value:'ffc0cb'},
 {name:'Blue', value:'add8e6'},
 {name:'Orange', value:'ffa500'},
 {name:'Purple', value:'b19cd9'},
 ]

}));

//}

Moddle Extension

module.exports={
“name”: “Attrib”,
“prefix”: “attrib”,
“uri”: “http://attrib”,
“xml”: {
“tagAlias”: “lowerCase”
},
“associations”: [],
“types”: [
{
“name”: “BewitchedStartEvent”,
“extends”: [
“bpmn:StartEvent”,
“bpmn:Task”,
“bpmn:EndEvent”,
“bpmn:ExclusiveGateway”,
“bpmn:SubProcess”,
“bpmn:IntermediateThrowEvent”
],
“properties”: [
{
“name”: “color”,
“isAttr”: true,
“type”: “String”
},
]
},
]
}
}

14

https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks

Please make sure to make your code contributions readable.

15

You can use the set handler to define what to happen when you change the selection of the selectBox. You can have a look at the CallActivityProps implementation for an example.

16

Many thanks for you help. Sorry i am bit noivice with Node js… How can set colors code of selected element in diagram while using CallActivityProps.

Many Thanks again your help.

17

It has nothing to do with call activity props, I just wanted to give you an example on how to use this set handler to declare what happens when the selection change. Sorry if I confused you.

In your case, if I understand you correctly, you would have to declare such a set handler and set the color for the element.

set: function(element, values, node) {
   var color = values.color;

   modeling.setColor(element, {
       fill: color
   });
}

To make it clearer, you could also use the commandHelper directly.


set: function(element, values, node) {
   var color = values.color;

   var di = {};

   assign(di, { fill: color });

   return cmdHelper.updateProperties(element,  {
       di: di
     }
   });
}

which basically does the same as modeling#setColor

18

so it will automatically get the modeling object or do i have to do something for it?

19

You will have to get it from outside, like as the group and element injection

module.exports = function(group, element, modeling) {
// .....
}

Once again, please make sure to format your code from your comment above, since it’s very hard to read it.

20

Thanks for you help looks like am getting coloser to my task. But now I am getting error now Cannot read property ‘setColor’ of undfined at Object.set after injecting the set color code please see the below full code.

,{“./descriptors/attrib”:1,“./provider/attrib”:4,“bpmn-js-properties-panel”:7,“bpmn-js/lib/Modeler”:47,“jquery”:316,“lodash/function/debounce”:342}],3:[function(require,module,exports){
‘use strict’;

var inherits = require(‘inherits’);

var PropertiesActivator = require(‘bpmn-js-properties-panel/lib/PropertiesActivator’);

// Require all properties you need from existing providers.
// In this case all available bpmn relevant properties without camunda extensions.
var processProps = require(‘bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps’),
eventProps = require(‘bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps’),
linkProps = require(‘bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps’),
documentationProps = require(‘bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps’),
idProps = require(‘bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps’),
nameProps = require(‘bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps’);

// Require your custom property entries.
var colorProps = require(‘./parts/ColorProps’);

// The general tab contains all bpmn relevant properties.
// The properties are organized in groups.
function createGeneralTabGroups(element, bpmnFactory, elementRegistry) {

var generalGroup = {
id: ‘general’,
label: ‘General’,
entries:
};
idProps(generalGroup, element, elementRegistry);
nameProps(generalGroup, element);
processProps(generalGroup, element);

var detailsGroup = {
id: ‘details’,
label: ‘Details’,
entries:
};
linkProps(detailsGroup, element);
eventProps(detailsGroup, element, bpmnFactory, elementRegistry);

var documentationGroup = {
id: ‘documentation’,
label: ‘Activity Description’,
entries:
};

documentationProps(documentationGroup, element, bpmnFactory);

return[
generalGroup,
detailsGroup,
documentationGroup
];
}

// Create the custom attrib tab
function createAttribTabGroups(element, elementRegistry) {

// Create a group called “Black Attrib”.
var colorAttribGroup = {
id: ‘color-attrib’,
label: ‘Color Attrib’,
entries:
};
// Public core
// Add the spell props to the black attrib group.
colorProps(colorAttribGroup, element);

return [
colorAttribGroup
];
}

function AttribPropertiesProvider(eventBus, bpmnFactory, elementRegistry) {

PropertiesActivator.call(this, eventBus);

this.getTabs = function(element) {

var generalTab = {
  id: 'general',
  label: 'General',
  groups: createGeneralTabGroups(element, bpmnFactory, elementRegistry)
};

// The "attrib" tab
var attribTab = {
  id: 'attrib',
  label: 'Colours',
  groups: createAttribTabGroups(element, elementRegistry)
};

// Show general + "attrib" tab
return [
  generalTab,
  attribTab
];

};
}

inherits(AttribPropertiesProvider, PropertiesActivator);

module.exports = AttribPropertiesProvider;

},{“./parts/ColorProps”:5,“bpmn-js-properties-panel/lib/PropertiesActivator”:8,“bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps”:32,“bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps”:33,“bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps”:34,“bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps”:35,“bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps”:36,“bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps”:37,“inherits”:313}],4:[function(require,module,exports){
module.exports = {
init: [ ‘propertiesProvider’ ],
propertiesProvider: [ ‘type’, require(‘./AttribPropertiesProvider’) ]
};
},{“./AttribPropertiesProvider”:3}],5:[function(require,module,exports){
‘use strict’;

var entryFactory = require(‘bpmn-js-properties-panel/lib/factory/EntryFactory’);

module.exports = function(group, element, modeling) {

group.entries.push(entryFactory.selectBox({
id : ‘color’,
description : ‘Element background Color’,
label : ‘Color’,
modelProperty : ‘color’,
selectOptions : [
{ name: ‘None’, value: ‘no’ },
{ name: ‘Light Red’, value: ‘A43010’ },
{ name: ‘Green’, value: ‘91A94C’ },
{ name: ‘Light Green’, value: ‘C4CFAD’ },
{name:‘Grey’, value:‘D8D8D8’},
{name:‘Olive’, value:‘756E54’},
{name:‘Yellow’, value:‘ffcc00’},
]

,
set: function(element, values, node) {
var color = values.color;
modeling.setColor(element, {
fill: color
});
}
}));

};