Joint.js Element Scaling

Question

{
            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?

I forgot to add that this happens inside stencil container, not with direct adding to a graph. Using markup with rectangle causes ports to be not correctly aligned. — Nick Shulzhenko, Aug 03 '17 at 13:22

score 1 · Accepted Answer · answered Dec 15 '18 at 06:34

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.

Joint.js Element Scaling

1 Answers1