Mapping didn't detect id of container

[thomasbromkapsdata]

Hello,

I am trying to work with your plugin and draw.io (or https://app.diagrams.net/). With draw.io you can add the plugin svgdata that allow to export "id" attribute. However draw.io seems to put every object in a container with and the id of the container seems to be not detected by the "add all SVG element IDs" or by the "mapping on click" feature. I don't know yet if the fact that the id is attributed to a container and not the object will cause trouble to animate stuff... my main goal is to put text from influxdb data.

An example of an draw.io export:

<g id="cell-R0gdoYABMyfOS7Dsw60P-1">
  <path d="M 80 0 L 120 40 L 80 80 L 40 40 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
</g>

id I do something like it's work, but It is not convenient to do it in the svg code manually.

Thank you for the work.

[acedrew]

@thomasbromkapsdata You can always type the mapping yourself into the new mapping field, I understand that's not very convenient though. Can you provide a full sample of the entire SVG doc for @evannorton to test against?

@evannorton there's logic that walks down to style XHTML text embeds? Similar to that, when clicked, if the clicked element doesn't have an ID, it should walk up to the first parent with an ID, I thought this was already implemented, can you take a look?

https://github.com/ACE-IoT-Solutions/ace-svg-react/blob/1473c1b6e77fd6eecf4a5da9b8b57e7fe3a58434/src/ACESVGjsPanel.tsx#L154

[thomasbromkapsdata]

@acedrew yes I can, but draw.io don't allow to modify object ID (or i didn't found how) so it is really annoying, with mapping on click I will be able to select the object with the random ID and give it a understandable map name. (So for the moment I send my svg file to inkscape which give id to every object and where you can modify the id, i found that yesterday)

Full sample of a test document juste exported from draw.io:

<defs/>
<g>
    <g id="cell-HNqUMUfvkGt2sw0h28Q4-1">
        <ellipse cx="40" cy="35" rx="40" ry="35" fill="#ffffff" stroke="#000000" pointer-events="all"/>
    </g>
    <g id="cell-HNqUMUfvkGt2sw0h28Q4-2">
        <rect x="220" y="155" width="70" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/>
    </g>
    <g id="cell-HNqUMUfvkGt2sw0h28Q4-3">
        <rect x="20" y="175" width="40" height="20" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 185px; margin-left: 21px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Text</div>
                        </div>
                    </div>
                </foreignObject>
                <text x="40" y="189" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Text</text>
            </switch>
        </g>
    </g>
    <g id="cell-HNqUMUfvkGt2sw0h28Q4-4">
        <rect x="235" y="25" width="40" height="20" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 35px; margin-left: 236px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Text</div>
                        </div>
                    </div>
                </foreignObject>
                <text x="255" y="39" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Text</text>
            </switch>
        </g>
    </g>
</g>
<switch>
    <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
    <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
        <text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text>
    </a>
</switch>

[acedrew]

@evannorton I found this, it's likely the culprit: https://stackoverflow.com/questions/39706869/add-onclick-event-to-a-group-element-svg-with-react

Let's think about the best way to manage that bounding box flag on the group elements.