Labels shown outside container boxes

[bijwaard]

Hi Arnaud,

I recently get labels that are shown higher than in draw.io, see the picture below (flowcharting edit session below the flowcharting display). I noticed the coordinates of my chart started negative, so I moved the graphics down to make all coordinates positive. Unfortunately, this didn't make a difference. Note that placeholders are used for the the container and port labels. However, the port labels are displayed correctly.

Could this be a draw.io library issue? I see the same in flowcharting v0.8 and v0.7 snapshots.

Kind regards, Dennis

[bijwaard]

Hi Arnaud, It looks like it mainly happens only when the overflow=fill; style is used. When I use align=center;verticalAlign=top it displays within the container in flowcharting (only a little lower than it did with overflow in draw.io). Kind regards, Dennis

[algenty]

Hi Can you give me an xml example ? BR

[bijwaard]

Hi Arnaud, I took your example flow and modified it a bit with overflow=fill on most and verticalAlign=top on the influxdb shape.

`

<root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="26" value="My label" style="shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#808080;strokeWidth=5;shadow=1;labelBackgroundColor=#ffffff;fontColor=#000000;align=center;verticalAlign=top;" parent="1" vertex="1">
        <mxGeometry x="574.5" y="276" width="120" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="23" value="My label" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#808080;strokeWidth=5;shadow=1;overflow=fill;labelBackgroundColor=#ffffff;fontColor=#000000;" parent="1" vertex="1">
        <mxGeometry x="160" y="80" width="120" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="24" value="My label" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#808080;strokeWidth=5;shadow=1;fontSize=20;overflow=fill;fontColor=#FFFFFF;" parent="1" vertex="1">
        <mxGeometry x="392" y="160" width="138" height="110" as="geometry"/>
    </mxCell>
    <mxCell id="9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeColor=#808080;strokeWidth=5;shadow=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="27" target="24" edge="1">
        <mxGeometry relative="1" as="geometry">
            <mxPoint x="657" y="146" as="sourcePoint"/>
            <mxPoint x="540" y="219" as="targetPoint"/>
        </mxGeometry>
    </mxCell>
    <mxCell id="6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeColor=#808080;strokeWidth=5;shadow=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="23" edge="1">
        <mxGeometry relative="1" as="geometry">
            <mxPoint x="229" y="172" as="sourcePoint"/>
            <mxPoint x="270" y="256" as="targetPoint"/>
        </mxGeometry>
    </mxCell>
    <UserObject label="" link="https://jgraph.github.io/mxgraph/" tooltip="mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor." id="6bAWTHbqWUbAYT8Wy3y0-2">
        <mxCell style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://github.com/algenty/flowcharting-repository/blob/master/icons/mxgraph_logo.gif?raw=true;strokeWidth=5;strokeColor=#808080;" parent="1" vertex="1">
            <mxGeometry x="187" y="90" width="66" height="40" as="geometry"/>
        </mxCell>
    </UserObject>
    <UserObject label="" link="https://www.influxdata.com" tooltip="InfluxDB is a time series database designed to handle high write and query loads." id="6bAWTHbqWUbAYT8Wy3y0-12">
        <mxCell style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://github.com/algenty/flowcharting-repository/blob/master/icons/influxdb.png?raw=true;strokeWidth=5;strokeColor=#808080;" parent="1" vertex="1">
            <mxGeometry x="572.5" y="283" width="124" height="46" as="geometry"/>
        </mxCell>
    </UserObject>
    <mxCell id="27" value="My Label" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#808080;strokeWidth=5;shadow=1;labelBackgroundColor=#ffffff;fontColor=#000000;overflow=fill;" parent="1" vertex="1">
        <mxGeometry x="587.5" y="80" width="120" height="80" as="geometry"/>
    </mxCell>
</root>

`

Kind regards, Dennis

[algenty]

I don't know why at this time but with a previous libs of draw.io, it works I need to investigate Can u try this alpha ? agenty-flowcharting-panel-0.8.0-SNAPSHOT.zip

[bijwaard]

Hi Arnaud,

I just tested the alpha snapshot and it does show the labels correctly, thanks! I hope you can trace back what happened with the new drawio libs.

Kind regards, Dennis

[bijwaard]

Hi Arnaud,

This issue seems to occur again in flowcharting v0.8.1 and v0.9. Is there a work-around for this?

Kind regards, Dennis

[algenty]

HI Dennis (@bijwaard) How do you do ? With the help of drawio team this bug is solved since last week (see https://github.com/jgraph/drawio/issues/989) i need to test and push a fix.

br arnaud

[bijwaard]

Hi Arnaud,

I'm fine, have been working hard during the lock-down on kernel, C++, Python fixes and IoT maintenance (e.g. Influxdb out-of-memory on embedded), like most Internet nomads;-) How are you?

Thanks for taking this issue up with the drawio team, I'll be happy to try the fix after you pushed it.

Kind regards, Dennis

[algenty]

Hi, if possible, can you try version 0.9.1 downloadable at https://algenty.github.io/flowcharting-repository/ARCHIVES.html

[bijwaard]

Hi Arnaud, I just installed this 0.9.1 version and restarted grafana and refreshed webpage. Unfortunatelly, the label positions don't seems to have changed, they are still outside their containers. I noticed that also double clicking on a box on the chart sometimes enlarges the box below where I clicked (i.e. when I double-click in the bottom half of the upper box). I.e. when I double click near the misplaced label "ComplexPower" in the figure above, it takes me to the ComplexPower box below it. Kind regards from Paris, Dennis

[algenty]

Sorry Dennis, it's my fault, I see this fix is not included, can you download and try again this snapshot ? Welcome to France, be carefull with covid

[bijwaard]

Hi Arnaud,

Just checked and it works, thanks a lot.

Kind regards from La Rochelle, Dennis

⁣Sent from TypeApp ​

On Jul 8, 2020, 08:14, at 08:14, Arnaud GENTY notifications@github.com wrote:

Sorry Dennis, it's my mistake, I see this fix is not included, can you download and try again this snapshot ?

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/algenty/grafana-flowcharting/issues/147#issuecomment-655310332

[algenty]

fixed in next version 9.1