How to take svg transformations into account when creating an element?

[Komar0ff]

Introduction

Hello. I am trying to create a jointjs element with a 'markup' field. In it add svg:

...
    const cell = new joint.dia.Element({
        position: { x: ..., y: ... },
        size: { width: ..., height: ... },
        markup: svgElement.outerHTML
        type: 'g-element',
    });
...

The svg itself has a transformation that mirrors the element horizontally.
The element is rendered correctly, but the selection is where the element would have been before the transformation

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[Komar0ff]

As I understood the problem is in ui.FreeTransform which doesn't realize that a transformation has been applied to the element.
Is there any way to explicitly specify that you need to shift based on matrix transformations?

[kumilingus]

ui.FreeTransform works with model, not with the view It does not look at the SVG at all.

[Komar0ff]

Apparently it's easier to solve this problem by mutating the incoming svg element

[kumilingus]

We've done the same thing with MS Visio. There is most likely an issue with the transformation logic.

---

Could you perhaps create an example e.g. diagram above, that can I run? (with inverted SVG on input)?

You can also start without reverting the y coordinate.
It looks to me that the SVG is flipped with matrix(1, 0, 0, -1, 0, 0) but it must be also translated with matrix(1, 0, 0, -1, 0, -HEIGHT).

---

const componentMatrix = element.transform.baseVal.consolidate().matrix

What element is this? The JointJS element is not rendered yet.

[Komar0ff]

@kumilingus
I put together a small example reproducing my problem with different diagrams. https://github.com/Komar0ff/react-joint.

What element is this? The JointJS element is not rendered yet.

element is an element that I get after implicitly adding svg to the DOM for more accurate sizing of the element (temporary solution). https://github.com/Komar0ff/react-joint/blob/main/src/convertToJointCells.js#L9

[Komar0ff]

@kumilingus

You can also start without reverting the y coordinate.
It looks to me that the SVG is flipped with matrix(1, 0, 0, -1, 0, 0) but it must be also translated with matrix(1, 0, 0, -1, 0, -HEIGHT)

Tried this method, but unfortunately it also did not solve my problem( Any other ideas?

[kumilingus]

It seems like the connectors and nodes require different logic (not sure how you converted them in the first place).

You can also start without reverting the y coordinate.
It looks to me that the SVG is flipped with matrix(1, 0, 0, -1, 0, 0) but it must be also translated with matrix(1, 0, 0, -1, 0, -HEIGHT)
Tried this method, but unfortunately it also did not solve my problem( Any other ideas?

It actually quite worked for me.

const generateComplexCell = (element, parentMatrix) => {
    const GET_BOX = element.getBBox()

    const componentMatrix = element.transform.baseVal.consolidate().matrix
    let sanitizeElement = null
    let mutateMatrix = null

    if (parentMatrix && componentMatrix) {
        mutateMatrix = combineTransforms(parentMatrix, componentMatrix)
        sanitizeElement = element.outerHTML.replace(
            /transform=".*?"/,
            `transform="matrix(${mutateMatrix.a}, ${mutateMatrix.b}, ${mutateMatrix.c}, ${mutateMatrix.d}, 0, ${GET_BOX.height})"`
        )
    }

    const cell = new dia.Element({
        position: {
            x: mutateMatrix?.e || componentMatrix.e,
            y: (mutateMatrix?.f || componentMatrix.f) - GET_BOX.height,
        },
        size: { width: GET_BOX.width, height: GET_BOX.height },
        markup: sanitizeElement || element.outerHTML,
        type: 'g-element',
    })

    cell.attr('root/title', 'autograph.Element')
    return cell
}

[Komar0ff]

@kumilingus
Thank you so much for your responses. It really works for the elements. Also you gave me an idea how to do it for text and connecting lines as well.
Really appreciate what you are doing. Thank you