Picture treatment within makeSvg

ebbnormal · February 11, 2016, 5:11am

So I currently make an SVG of my Diagram in the following fashion.

I make a call to generateImages as you have defined here: GoJS Printing -- Northwoods Software

However, instead of calling Diagram.makeImage I call Diagram.makeSvg like so:

for (var i = 0; i < boundsheight; i += imgHeight) {
    for (var j = 0; j < boundswidth; j += imgWidth) {
                 img = confSheetDiagramRef.makeSvg({
        scale: 1,
                    details: 1,
        position: new go.Point(p.x + j, p.y + i),
        size: new go.Size(imgWidth, imgHeight)
      });
      img.className = 'images';
      imgDiv.appendChild(img);
      imgDiv.appendChild(document.createElement('br'));
    }
   }

Now for some reason, every single element of my Diagram (all of which are Nodes, with different sub parts), are perfectly copied in the resulting Svg regarding their height and width and x,y coordinates.
The nodes that I have, which contain a subpart Picture, however, are not copied properly. That is, they appear in the resulting SVG at a much smaller dimension.

Here is the Node template for the Node which contains a Picture, which is appearing in the SVG smaller than it appears in the Diagram

            var imagetemplate = GO(go.Node, "Horizontal",
                                                         new go.Binding("location", "shapePosition"),
                                                         new go.Binding("key", "key"),
                      GO(go.Picture,
                                                    new go.Binding("angle", "rotation"),
                                                  new go.Binding("width", "width"),
                                                    new go.Binding("source", "text"),
                                                  new go.Binding("height", "height"),
                                                    new go.Binding("maxSize", "bounds")
                                                )
                                            )

I imagine it is because the width and height of the Node is NAN so then it hits the part of generateImages which gives the width and height an arbitrary value?

walter · February 11, 2016, 2:32pm

The first issue I noticed about your template is unrelated to your question. That is that the Binding of Node.key doesn’t make sense because there is no Node.key property.

The second thing I noticed is that you bind the Picture.width and Picture.height. That’s good. Does your data actually have legitimate values for those two properties? What value does the data have for the “bounds” property?

ebbnormal · February 11, 2016, 8:03pm

Before I answer your question, am I sure Picture.width and Picture.height have legitimate properties, let me give a little more context to what is going on.

The error I explain above only happens for Nodes with Pictures whose dimensions I edit and does not happen when I do not edit the width and height properties of a picture. Which seems to show, logically, that, when I am editing a Picture contained in a Node, I am not actually setting Picture.width and Picture.height as I should be doing.

Here is how I add a image node (with the above template) to my Diagram

         ticketMasterDiagram.startTransaction("add node");
         ticketMasterDiagram.model.addNodeData({
         key:String(n),
         category:"image",
         rotation:0,
         width: imageWidth*ScaleFactor,
         height: imageHeight*ScaleFactor,
         text:SecureURL+ fileName.substring(1, fileName.length)});
        ticketMasterDiagram.commitTransaction("add node");

There doesn’t seem to be any issues with how Picture.width and PIcture.height is set here.

Here is how I edit the dimensions of a Picture within an image node:

    var data = ticketMasterDiagram.model.findNodeDataForKey(CurrentSelectedNode);
    width = ScaleFactor*Number(width);
    height = ScaleFactor*Number(height);
    ticketMasterDiagram.model.setDataProperty(data, "width", Number(width));
    ticketMasterDiagram.model.setDataProperty(data, "height", Number(height));

The above somehow gets me into trouble when I later call makeSvg, as it is only the Nodes that have been edited with the above few lines, that display at a different width and heighth in the resulting SVG than they do when in the original Diagram.

In regards to your question, how can I directly inspect Picture.width and Picture.height? Do I find the node for a given key, and then the the node data alert data.width ? and data.height? Doesn’t that assume the binding is being applied?

walter · February 11, 2016, 9:34pm

I don’t know what might be wrong. I would look at the Node.data properties for a Node that is rendered incorrectly.

GraphObject.width is just a short-hand for GraphObject.desiredSize.width. The default value is NaN.

The ResizingTool, for example, modifies the GraphObject.desiredSize of the object that the user resizes.

ebbnormal · February 12, 2016, 5:33pm

So when I write ticketMasterDiagram.model.setDataProperty(data, "width", Number(width)); what it really is doing is setting my Node.desiredSize.width? Is there a way of explicitly setting the Picture.width within the Node?

walter · February 12, 2016, 6:12pm

No, according to the template that you posted at the beginning of this topic, the Binding of “width” is on the Picture, not on the Node.

If you know that the value is a number, why bother calling Number(width)? And what was the actual value that was assigned to data.width?

ebbnormal · February 12, 2016, 6:33pm

You’re right, no need to wrap them as Number() although they are coming from an HTML <input> tag, so that is why I wrap in case that is a String.

data.width is set to 200 as an Int. I confirmed this for both cases, the first case in which the image height is set to value other than the natural image height (which, in this example image is 150). The second case is for the natural width and height of the image. The first case prints wonky (it is smaller in the Svg with regards to width and height), the second prints perfectly.

Here is the results of doing a Node.data log for both cases on the target Node of template type, "image"

Case 1 (With Print discrepancy between DIagram and Svg)

console.log(node.data)

 _gohashid:1134
category :"image"
height: 100
key: "145298539343"
rotation: 0 
shapePosition: Object
text : "http://path/to/image"
width: 200

Which accurately describes how the edited image looks in the GoJS Diagram before being copied as an SVG( you can see the GOJS versus SVG for this exact data in the image below) :

And the following is the Node.data for an "image" Node that has not had its properties edited with setDataProperty.

  _gohash_id : 1134
  category : "image"
  text: "http://path/to/image"
  rotation: 0
  height : 150
  width: 200
  shapePosition: Object
  key : "145243424424""

And here is the Diagram and the perfect facsimile of the Diagram with makeSvg called on the former:

walter · February 14, 2016, 3:53pm

Thanks for providing the extra detail. We can reproduce the problem. I’m sorry about the bug. We’ll fix it later this week.

walter · February 19, 2016, 9:03pm

OK, I believe this has been fixed in version 1.5.21: GoJS version 1.5.21

Sorry for the inconvenience.