ui FreeTransform with custom markup on shapes.standard.Rectangle

[ahmad2smile]

If I don't have custom markup on shapes.standard.Rectangle, transform works perfectly, but I need custom markup to add svg/font based icons in the shape.

Any way I can make FreeTransform work on Rectangle with custom markup?

[kumilingus]

Could you share how you define the new shape? Here's a tutorial how to create a new shape with a custom markup - https://resources.jointjs.com/tutorial/custom-elements.

[ahmad2smile]

const BaseShape =shapes.standard.Rectangle.define(
    `some-identifier`,
    {
      attrs: {
        '.prefix-block-under-bg': {
          width: 100,
          height: 100,
        },
        '.prefix-block-bg': {
          width: 100,
          height: 100,
        },
        '.prefix-click-area': {
          width: 100,
          height: 100,
        },
        '.prefix-block-translate': {
          transform: `translate(${isTallerBlock ? `0, ${centeringOffset}` : `${centeringOffset}, 0`})`,
        },
        '.prefix-block-name': {
          width: 100,
          height: 40,
          y: 60,
          p: {},
        },
        '.prefix-block-icon': {
          transform: 'translate(14, 10)',
        },
      },
    },
    {
     // markup is svg and foreginObject combination, inline func is to remove new-line characters
      markup: inline(markup),
    },
  );

// Usage somewhere
... = new BaseShape();

[kumilingus]

Could you share the actual markup?

You need to use the special attributes - https://resources.jointjs.com/tutorial/special-attributes if you want the SVG to follow the model's size. The FreeTransform only changes the model's size and position.

e.g. This is absolute. The size of the block will be always 100x100.

'.prefix-block-under-bg': {
    width: 100,
    height: 100,
},

This size of the block will be the same as the model size (element.size()).

'.prefix-block-under-bg': {
    refWidth: '100%',
    refHeight: '100%',
},

[ahmad2smile]

I created an example of almost how we render the block:

https://codesandbox.io/s/quirky-moon-rv8ek?file=/src/App.tsx

Regarding sizes, we actually change the do change the dimensions when we create the shape (not shown in example), but the thing if I don't set custom markup, then even if I do, shape.resize(height, width) (i.e setting size on block creating) it still work with FreeTransform,

It only breaks when I have custom markup everything else can be the same.

[ahmad2smile]

refWith and refHeight did the trick, Thanks alot.