We have created an application using GoXam and would like to create a web viewer for the diagrams. This viewer would not have the ability to edit diagrams or make any kind of changes, just display the contents for the files.
Besides loading the file data what kind of process would be required to display our existing nodes and links within GoJS. The nodes templates would have to be recreated in a different form but are the basics similar? I realize this will depend a lot on what we’ve done to our diagrams but is it much more difficult than settings locations, keys, etc. or is would there be other major steps?
First, I assume you have already considered rendering your GoXam diagrams as either images or SVG. Since you are here, I assume you would prefer the flexibility that comes with rendering it in the browser and potentially providing some interactivity – selection for showing details, tooltips, and maybe later arbitrary editing.
I’m not familiar with your app, but I assume you would want to send your GoXam model to the browser. You could send it as XML, if that is convenient for you, or you could convert it to JSON format. I’m assuming that you followed good practices so that your model does not have many rendering (“view”) details in it.
Your app might be able to data bind directly to the XML, since there is latent support for read-only binding to XML data in GoJS models. But more generally you would need to convert it to JavaScript objects, if you hadn’t already done so server-side.
The design of GoJS should seem familiar to anyone with knowledge of XAML and GoXam. But it’s a lot simpler without really losing any significant functionality. And it doesn’t use XAML/XML but plain JavaScript for defining templates.
As a followup I’ve been looking at the sample in the trial for using a SVG image on a node tiger.html. All our nodes are GoXam nodes are custom objects so I was trying to figure out the best way to create them.
In this case its difficult to set the size to something other then the original image paths. If I set the desired size of the part after all the shapes are added the entire image is clipped. Setting the parts scale does reduce the size but it is difficult to determine what the final size will be based on this. I also tried adding shape.geometryStretch = go.GraphObject.Fill; in the for loop that populates the panel with shapes but it did not help. Is there something I can do to have desiredSize automatically scale the image?
Are you using Shapes and setting Shape.geometryString? If you do not set desiredSize/width/height, it should get its natural size from the geometry. For more info: GoJS Geometry Path Strings -- Northwoods Software
I am setting desiredSize on the part after I add all the shapes but instead of scaling the image it is being clipped so anything outside the dimensions set in desiredSize is cut off.
Right now Im just trying to figure out how challenging it will be to take our GoXam node visuals and use them in GoJS so Im just adding the part to the diagram using Diagram.add(Part);
I was just asking for how the node is defined so that we could answer your question about stretching the geometry. Since you haven’t set Shape.geometryStretch, I don’t see an easy answer.
This is the code Im using to load the contents of the SVG document, its a slightly modified version of one of the GoJS samples:
function init() {
// the whole SVG drawing will go into a single Panel
var partdrawing = new go.Panel(); // this Panel holds all of the Shapes for the drawing
var xmldoc = new DOMParser().parseFromString(oilwellsvg, "text/xml");
var paths = xmldoc.getElementsByTagName("path");
for (var i = 0; i < paths.length; i++) {
// represent each SVG path by a Shape of type Path with its own fill and stroke
var path = paths<em>;
var shape = new go.Shape();
var style = path.getAttribute("style");
var styleitems = style.split(";");
var stroke = path.getAttribute("stroke");
var strokewidth = parseFloat(path.getAttribute("stroke-width"));
var id = path.getAttribute("id");
var fill = path.getAttribute("fill");
var data = path.getAttribute("d");
for (var j = 0; j < styleitems.length; j++)
{
var item = styleitems[j].split(":");
if (item[0] === "stroke") {
stroke = item[1];
}
if (item[0] === "stroke-width") {
strokewidth = parseFloat(item[1]);
}
if (item[0] === "fill") {
fill = item[1];
}
}
if (typeof stroke === "string" && stroke !== "none") {
shape.stroke = stroke;
} else {
shape.stroke = null;
}
if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;
if (typeof id === "string") shape.name = id;
if (typeof fill === "string" && fill !== "none") shape.fill = fill;
// convert the path data string into a go.Geometry
if (typeof data === "string") shape.geometry = go.Geometry.parse(data, true);
shape.geometryStretch = go.GraphObject.Uniform;
// collect these Shapes in the single Panel
partdrawing.add(shape);
}
// add the Panel as the only element in the Part
var part = new go.Part(); // doesn't need to be a Node for this sample
// the default position of the Panel drawing in the Part is (0,0)
part.add(partdrawing);
part.desiredSize = new go.Size(50, 50);
<span =“Apple-tab-span” style=“white-space:pre”>
// create the Diagram for the named DIV
var diagram = new go.Diagram(“myDiagram”);
// just add this single Part to the Diagram
diagram.add(part);
}
You are setting the desiredSize of the whole Part, which causes clipping of the bigger GraphObjects that are inside, or which leaves empty space if the objects are smaller.
This is just like what happens in WPF or Silverlight.
I think that you want to change the Part to be of type “Viewbox”. But I’m not sure what you want.