Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing #53

Closed
hediet opened this issue May 21, 2020 · 14 comments · Fixed by #87
Closed

Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing #53

hediet opened this issue May 21, 2020 · 14 comments · Fixed by #87
Labels
bug Something isn't working help wanted I'm very open for help on this one! I probably won't do it I might consider it if someone provides a PR for it. I Probably don't find time myself. Sorry!

Comments

@hediet
Copy link
Owner

hediet commented May 21, 2020

Uh oh, tiny issue... Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing. I confirmed that the svg's were present in the drawio source folder; but the logos are refusing to show up. Any idea?

image

It's not just these, the Docker image is also missing (which is part of a MS Azure pack according to the source code). Is the drawio master just broken, or is there something I can do?

Originally posted by @MagicLegend in #51 (comment)
@hediet hediet mentioned this issue May 21, 2020
Closed
@hediet hediet changed the title Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing. I confirmed that the svg's were present in the drawio source folder; but the logos are refusing to show up. Any idea? Some icons are missing! They show up as blanks; most notably all the Atlassian logos are missing May 21, 2020
@MagicLegend
Copy link

I have spent some time digging around in the source code; but I don't see any issue. Can you reproduce this when you package the extension?

@hediet
Copy link
Owner Author

hediet commented May 22, 2020

I'll try it tomorrow! Thanks for the research ;)

@MagicLegend
Copy link

I can confirm that when you save an .svg with an broken image on insiders; and reopen it with the published version in normal vscode that the logo shows up again. In the svg the logo is stored as follows:

<image x="146.5" y="369.5" width="66" height="66" xlink:href="data://text/data://text/img/lib/atlassian/Atlassian_Logo.svg"/>

I'm not sure where that path is supposed to lead; since it's relative. the text/ folder doesn't seem to exist? Anyhow; I still think it has to do something with an update of drawio. The preview of icons is also changed/broken (it is supposed to zoom in on the iconmap, but it doesn't now). Can you confirm this too?

@MagicLegend
Copy link

Hmm, adding working images to the drawing I start to see a pattern. All images that don't work are references to .svg files themselves. Note that the used URI for those images can never resolve, since the data://text/ is double here. Other icons from the Web Icons or Atlassian packs are being inserted as raw svg xml; or as HTML:

<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: 416px; margin-left: 261px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: #ffffff; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
                                &lt;/&gt;
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="280" y="420" fill="#ffffff" font-family="Helvetica" font-size="14px" text-anchor="middle" font-weight="bold">
                    &lt;/&gt;
                </text>
            </switch>
        </g>

=

image

Does this extension do anything with the file paths; or is this something ready to escalate to Drawio themselves?

@hediet
Copy link
Owner Author

hediet commented May 22, 2020 via email

@MagicLegend
Copy link

Well, I couldn't figure out how to actually run the included drawio without the extension. Since the drawio-desktop version is mismatched with the one here; I figured that it wasn't identical. It would also add a wrapper around drawio, which I can imagine could resolve the issue.

Do you know how I could run the included drawio without the wrapper of the extension? Feel free to answer tomorrow ;-)

@hediet
Copy link
Owner Author

hediet commented May 22, 2020 via email

@MagicLegend
Copy link

Ah yes. Didn't test that yet; good point.

The same does not happen, because it references an online image:

<image x="-0.5" y="-0.5" width="66" height="66" xlink:href="https://app.diagrams.net/img/lib/atlassian/Atlassian_Logo.svg"/>

Note that the behaviour of the website version and the extension version of referencing an .svg file and using the aforementioned HTML object is identical.

@MagicLegend
Copy link

I can confirm that this issue persists on c42d865 (current insiders build, v0.6.1).

@hediet
Copy link
Owner Author

hediet commented May 25, 2020 •
edited
Loading

I did some research.

This is the drawio xml node:

<mxCell id="11" value="" style="image;image=img/lib/atlassian/Atlassian_Logo.svg;" vertex="1" parent="1">
    <mxGeometry x="160" y="540" width="166" height="170" as="geometry"/>
</mxCell>

This is the svg node when exporting with my vscode extension:

<image xmlns="http://www.w3.org/2000/svg" x="119.5" y="519.5" width="166" height="170" xmlns:xlink="http://www.w3.org/1999/xlink"
  xlink:href="data://text/data://text/img/lib/atlassian/Atlassian_Logo.svg"/>

And this is the svg node when exporting with https://draw.io:

<image xmlns="http://www.w3.org/2000/svg" x="-0.5" y="239.5" width="446" height="280" xmlns:xlink="http://www.w3.org/1999/xlink"
  xlink:href="https://app.diagrams.net/img/lib/atlassian/Atlassian_Logo.svg"/>

Those images are referenced relatively to the hosting domain. This does not make sense for the VS Code extension (where the domain is data://...).
Also, this is very dangerous: The exported SVG will stop working once app.diagrams.net is offline or if you don't have internet.

Drawio must have some logic that makes these relatives references absolute.
This must be configured in a way that draw.io always uses https://app.diagrams.net/.

I played around with setting these:

window.GRAPH_IMAGE_PATH = "https://app.diagrams.net/img";
window.DRAWIO_BASE_URL = "https://app.diagrams.net";

But I didn't get it working.

I don't think I will spend much more time trying to fix this as I don't think much about this feature... Sorry!
But I will gladly accept PRs!

@hediet hediet added bug Something isn't working help wanted I'm very open for help on this one! I probably won't do it I might consider it if someone provides a PR for it. I Probably don't find time myself. Sorry! labels May 25, 2020
@ebousse
Copy link

ebousse commented May 27, 2020

Same problem with the "Clipart" shapes :
Capture d’écran de 2020-05-27 10-34-45

@hediet
Copy link
Owner Author

hediet commented May 27, 2020

If this feature is really important for you, you can consider to support me on github sponsors!
Since I don't need this feature, I already spent like 2 hours debugging this and there are other features that are a lot more fun to implement, I don't plan to fix this soon just for fun.

I happily accept PRs though.

@ebousse
Copy link

ebousse commented May 27, 2020

Since I don't need this feature, I already spent like 2 hours debugging this and there are other features that are a lot more fun to implement, I don't plan to fix this soon just for fun.

No problem, just wanted to add my observation to the thread :). I'm already very glad you made this very neat extension 👍 .

@razvangoga
Copy link

razvangoga commented May 27, 2020 •
edited
Loading

Just to add my observations on this: the problem seems to have been introduced after v0.4 (i've reverted back to it and all works as expected).

Unfortunately i don't see 0.5 or 0.5.1 in the previus versions list to narrow it down even more, but if i would venture a guess it would be due to this change :

- Does not spawn an http server anymore to host Draw.io from 0.5

image

@Speedy37 Speedy37 mentioned this issue Jun 13, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted I'm very open for help on this one! I probably won't do it I might consider it if someone provides a PR for it. I Probably don't find time myself. Sorry!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix mxUrlConverter.prototype.convert behavior with vscode Speedy37/vscode-drawio
4 participants
@razvangoga @hediet @MagicLegend @ebousse