for newly created shape there is transform:matrix (matrix(1 0 0 1 -270 -2790)) property that is set on the shape element. In my case if I add new component it is getting render over the sibling element, I want to change its position;
how can i change this?
@Niklas_Kiefer any help on this?
Update
this is how it looks on ui
this is how i am rendering
drawConnection = function (parent, shape) {
var conn = this.bpmnRenderer.drawShape(parent, shape);
attr(conn, {
stroke: 'red'
});
return conn;
}
drawShape = function (parent, shape) {
return this.drawCustomeShape(parent, shape);
}
drawCustomeShape(parent, shape) {
const elementShape = drawRect(270, 60, 30, '#FFFF');
attr(elementShape, {
stroke: "green",
"stroke-width": "1px",
});
append(parent, elementShape);
if (shape.businessObject.name) {
const headerRect = drawRect(150, 40, 0, '#ffffff')
attr(headerRect, {
x: 60,
y: -25,
strokeWidth: 2,
stroke: 'white',
transform: 'translate(10, 30)'
});
append(parent, headerRect);
let headingText = drawText('#4f7c9e', "bold", 'translate(15, 45)', 12, 170)
classes(headingText).add('djs-label');
attr(headingText, { x: 70, y: -10 });
append(headingText, document.createTextNode(shape.businessObject.name));
append(parent, headingText);
}
var textEle = drawText('#7291a8', "bold", 'translate(15, 45)', 12, 20)
classes(textEle).add('djs-label');
attr(textEle, { x: 50, y: 5 });
var text = "from_some_function";
append(textEle, document.createTextNode(text));
append(parent, textEle);
const rectHit = drawRect(180, 100, 0, 'white');
attr(rectHit, {
x: 0,
y: 0,
stroke: 'white',
strokeOpacity: '0',
strokeWidth: 15,
fill: 'none'
});
classes(rectHit).add('djs-hit');
classes(rectHit).add('djs-hit-all');
classes(rectHit).add('rectEle');
append(parent.parentNode, rectHit);
const rectOutline = drawRect(0, 0, 0, 'none');// update height width in css class accordingly
attr(rectOutline, {
x: -6,
y: -6
});
classes(rectOutline).add('djs-outline');
classes(rectOutline).add('rectEle');
append(parent.parentNode, rectOutline);
return elementShape;
}
function drawRect(width, height, borderRadius, color) {
const rect = create('rect');
attr(rect, {
width: width,
height: height,
rx: borderRadius,
ry: borderRadius,
fill: color
});
return rect;
}
function drawText(color, fontWeight, transform, fontSize, width) {
var textEle = create('text');
attr(textEle, {
fill: color,
fontWeight: fontWeight,
transform: transform,
fontSize: fontSize,
inlineSize: width
});
return textEle;
}