{
type: 'basic.Image',
size: { width: 53, height: 42 },
attrs: {
'.': {
'data-tooltip': 'Image',
'data-tooltip-position': 'left',
'data-tooltip-position-selector': '.joint-stencil'
},
image: {
width: 53,
height: 42,
'xlink:href': 'assets/image-icon1.svg'
},
text: {
text: 'image',
'font-family': 'Roboto Condensed',
'font-weight': 'Normal',
'font-size': 9,
display: '',
stroke: '#000',
'stroke-width': 0,
'fill': '#222138'
}
}
}
I am trying to change width and height of element using basic properties, but in a result element is always scaling automatically and looks like size is building as a proportion instead of using real px width.
<g id="j_5" model-id="7035b15a-67f6-4531-a437-2c3f12d27c35"
class="joint-theme-modern joint-cell joint-type-basic joint-type-basic-image joint-element" data-type="basic.Image"
fill="#ffffff" stroke="none" data-tooltip="Image" data-tooltip-position="left"
data-tooltip-position-selector=".joint-stencil" transform="translate(20,174.33962264150944)">
<g class="rotatable" id="v-71">
<g class="scalable" transform="scale(1.6981132075471699,1.6981132075471697)">
<image id="v-73" width="53" height="42" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="assets/image-icon1.svg"></image>
</g>
<text id="v-72" font-size="9" y="0.8em" xml:space="preserve" text-anchor="middle" fill="#222138" font-family="Roboto Condensed" font-weight="Normal" display="" stroke="#000" stroke-width="0" transform="matrix(1,0,0,1,45,91.3)"><tspan id="v-74" class="v-line" dy="0em" x="0">image</tspan></text>
</g>
</g>
This html I see then in inspection. This scalable g is affecting everything and ignores my width/height properties. Could someone tell me how can I change dimensions of my element in joint js without this auto-scale processing?
On below url you can get help.
https://resources.jointjs.com/docs/rappid/v2.4/ui.html#ui.Stencil
When you create stencil object then make layout: false then create group for stencil
App.config.stencil.groups = {
group1: { index: 1, label: 'Standard shapes'},
};
Once this done then create rect object dynamically as showing below
var rect = new joint.shapes.standard.Rectangle();
rect.position(5, 5);
rect.resize(230, 40);
rect.attr({
body: {
fill: 'transparent',
stroke: '#31d0c6',
strokeWidth: 2,
},
label: {
text: 'Hello',
fill: '#31d0c6',
}
});
Once done then add that object to stencil group.
App.config.stencil.shapes.group1.push(rect);
After that add group to stencil. On result you will see rect having correct width and height which you have specified previously.