We have site where we use GoJS. In our node templates we use SVG images. Everything worked fine until we started using IdentityServer3 and HTTPS. After that SVG files in our node templates became invisible.
Is it GoJS issue and if so is there a way to overcome it?
This may be a CORS issue and not a GoJS issue per se. We cannot control what the browser allows to render onto the canvas, we can only call the draw commands.
You may want to set the Picture.sourceCrossOrigin property to see if that makes a difference. You will probably want to set it to “use-credentials” but I don’t know the details of your setup.
$(go.Picture,
{ width: 64, height: 64 },
{ sourceCrossOrigin: function(pict) { return "use-credentials"; } },
new go.Binding("source", "path"))
What should be pict in function(pict)?
And what details of my setup do you need?
The pict argument will be that Picture on which you declared the sourceCrossOrigin functional property.
It wouod be most expedient for you to try it and other posiibilities, than it would for us to ask and you to answer everything that might be relevant about the security issues.
Here is how my node template with SVG file looks like:
image1Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture,
{
source: "Images/ElectricalElements/Cell_1.svg",
sourceCrossOrigin: function (pict) { return "use-credentials"; }
},
new go.Binding("source", "path")),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.18, 0) })
);
But, I’m not sure how to create pict argument? Is it this image “Images/ElectricalElements/Cell_1.svg”?
No, the pict argument is the Picture object, so that the function can look at the Picture to decide what to return.
It’s no different than the second argument to GraphObject.click is the object that has the function as that property value.
Could you tell me, please, if it is correct what I wrote? I mean on last node template.
And how can I define pict object?
If it works, that’s good.
Have you read about CORS on the web, to see how your configuration matches?
Or particular questions such as:
When you say “your configuration”, what configuration do you mean?
How you are serving the web page and the images that you are using.
I use Visual Studio Development IISExpress. Do you mean on that?
I put the following in web.config file:
<customHeaders>
<clear/>
<add name="X-Powered-By" value="ASP.NET"/>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="Content-Type"/>
<add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS"/>
<add name="Access-Control-Allow-Credentials" value="true"/>
</customHeaders>
But, it doesn’t help.
This is probably not a CORS issue, but in case it is, there’s some information below on that.
The problem may be that you are not specifying the width and height for your SVG images, but I cannot be sure. Make sure you are folllowing every recommendation here: GoJS Pictures -- Northwoods Software
Once you have width and height set for the SVG (and make sure they equal the width/height that is in the viewport in the .svg definition, do you see anything differently?
If it is a CORS issue (this is unlikely unless you’re calling makeImage), here is a very simple test for CORS:
https://codepen.io/simonsarris/pen/mOJdQe
I am taking an image from Wikipedia and drawing it on the canvas (red), after it is drawn, I use canvas.toDataURL() to copy the canvas to an image (blue). If the cross-origin flag isn’t set, blue won’t work.
Red should work and is what GoJS is doing (unless you call makeImage, then blue needs to work too).
If your images do not work in this simple example, then its not something GoJS is doing, its a canvas or CORs or other issue.
This doesn’t work:
image1Template =
$(go.Node, "Vertical", nodeStyle(),
$(go.Picture,
{
source: "Images/ElectricalElements/Cell_1.svg",
width: 64, height: 64,
sourceCrossOrigin: function (pict) { return "use-credentials"; }
},
new go.Binding("source", "path")),
$(go.Shape, "Rectangle", portStyle1(),
{ portId: "", alignment: new go.Spot(0.18, 0) })
);