Fix rotation of subelements (e.g. horizontal label for an element).

[BigPackie]

Is there a way to freeze the rotation of elements such as label to keep them horizontal regardless of the parent element's angle?

I see that the label for links are by default horizontal: https://resources.jointjs.com/tutorial/link-labels.

[kumilingus]

There is a legacy concept of rotatable and scalable group in JointJS.

• The rotatable group will remain supported. It rotates its content based on the angle attribute. Anything outside the group is not rotated.
• The scalable group might be deprecated at some point. It scales the content to fit into the model's bounding box.

Here's a demo: https://jsfiddle.net/kumilingus/8d1ne5q3/

[BigPackie]

The solution with rotatable group does not work well, for example if the label in not centered, y dimension is 2 times x and you move the label to e.g. y: 'calc(0.8*h)', you will notice that your example is broken. So your example only works if the label is perfectly centered, which is far from a complete working solution.
I've tried to improve upon your example, but I still cannot manage to get it completely right. https://jsfiddle.net/9w7jsLaz/

The problem is even worse when trying to use it with rotation halo tools in the kitchensink demo.

[BigPackie]

Here is the behavior from the mentioned customized demo. I have a custom element with markup:

  [
        {
          tagName: 'g',
          selector: 'rotatable',
          children: [
            {
              tagName: 'polyline',
              selector: 'body',
            },
          ],
        },
        {
          tagName: 'image',
          selector: 'slotIcon',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
    ];

And attributes:

 attrs: {
            body: {
              width: 'calc(w)',
              height: 'calc(h)',
              refPoints: '2.5,0 2.5,241.5 119.5,241.5 119.5,0',
              fill: '#dcd7d7',
              stroke: '#33334e',
              strokeWidth: 5,
              cursor: 'pointer',
            },
            label: {
              text: 'Label',
              fontSize: 14,
              fontFamily: 'sans-serif',
              fill: '#333333',
              textVerticalAnchor: 'middle',
              textAnchor: 'middle',
              ref: 'body',
              refX: '50%',
              refY: '80%',
            },
            slotIcon: {
              iconColor: '#112EC0',
              ref: 'body',
              width: '50',
              height: '50',
              refX: '50%',
              refY: '50%',
              refX2: '-25',
              refY2: '-25',
            },
          },

Which behaves like this when rotating:

It seems the slotIcon and label does not translate relative to the body as it is not their parent anymore, because it needs to be wrapped inside rotatable. It seems the rotatable is a dead end because it prevents correct parent child nesting and relative translations.

Any idea how to fix this?

[kumilingus]

The proposed solution works as expected. The nodes outside the rotatable ignores the element's rotation (where the origin of the rotation is in the center of the element).

In your other example you have added ref attribute pointing to body. You made the label position relative to the body node position and size which keeps changing when the element being rotated.

If you want to make sure the element label is legible all the time, you have to compensate the label's rotation as shown in the example below (note that the order of transformation matter - translate followed by rotate).

https://jsfiddle.net/kumilingus/L8ehv56r/

[BigPackie]

Thank you. I think there was a misunderstanding about my intentions and indeed your second example regarding "making sure element label is legible all the time" is what I wanted to achieve.

Furthermore I would like to point out that using the transform attribute to manually compensate for translation and rotation works but you should not use positioning (x, y, refX, refY) anymore in the attributes of the element and watch out for inherited positioning attributes as well (when you are extending existing shapes) as they can mess up what you are trying to achieve (basically you would apply translation on top of another translation not overwriting it).

For future reference here is a more complete picture of the solution:

export class MyElement extends joint.dia.Element {
    override initialize(...args): void {
      super.initialize(...args);

      this.on('change', ({ changed }, opt) => {
        if ('angle' in changed) {
          this.adjustTransform(opt);
        }
        this.adjustTransform();
      });
    }
    
    adjustTransform(opt?) {
      const size = this.size();
      const angle = -this.angle();
      this.attr(
        {
           body: {
              refPoints: '2.5,0 2.5,241.5 119.5,241.5 119.5,0',
              width: 'calc(w)',
              height: 'calc(h)',
           },
          label: {
            transform: `translate(${size.width * 0.5}, ${
              size.height * 0.8
            }) rotate(${angle})`,
          },
        },
        opt
      );
    }  

    override defaults() {
      return joint.util.defaultsDeep(
        {
          type: 'app.MyElement',
          size: { width: 122, height: 244 },
          attrs: {
            label: {
              textVerticalAnchor: 'middle',
              textAnchor: 'middle',
              //position x,y, refX, refY managed manually via 'translate' in 'transform' attribute in adjustTransform()
              //if you create class by extending e.g. 'joint.shapes.standard.Polyline' there are some default
              //positioning attributes that you should reset otherwise they can mess up manual translation in transform
              fontSize: 11,
              fill: '#222138',
              text: 'Shape',
            },
          },
        },
        super.defaults
      );
    }

    markup = [
      {
        tagName: 'polyline',
        selector: 'body',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ];
 }

Thanks again. Hopefully the documentation for this library will be greatly improved in the near future, as I find it very lacking right now leading to a lot of irritation.

[kumilingus]

Internally the transform attribute is parsed first and then the rest of the attributes are added to the transformation (e.g. refX, refY) leading to rotate(..) translate(..).
You need a different order of transformations (i.e. translate() rotate()). To do so you could also create a wrapping group with translate transformation and then rotate the label inside.

https://jsfiddle.net/kumilingus/1zovakfb/

class Shape extends joint.dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'Shapes',
      size: {
        width: 120,
        height: 40
      },
      angle: 0,
      attrs: {
        body: {
          fill: '#ffffff',
          stroke: '#333333',
          strokeWidth: 2,
          width: 'calc(w)',
          height: 'calc(h)',
        },
        labelWrapper: {
          transform: 'translate(calc(.5*w), calc(h+20))'
        },
        label: {
          text: 'A',
          fontSize: 14,
          fontFamily: 'sans-serif',
          fill: '#333333',
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
        },
      }
    };
  }

  preinitialize() {
    this.markup = [{
      tagName: 'rect',
      selector: 'body'

    }, {
      tagName: 'g',
      selector: 'labelWrapper',
      children: [{
        tagName: 'text',
        selector: 'label'
      }]
    }];
  }

  initialize(...args) {
    super.initialize(...args);
    this.on('change', ({
      changed
    }, opt) => {
      if ('angle' in changed) {
        this.updateBindings(opt);
      }
    });
    this.updateBindings();
  }

  updateBindings(opt) {
    const size = this.size();
    const angle = -this.angle();
    this.attr({
      label: {
        transform: `rotate(${angle})`
      }
    }, opt);
  }
}