Images in 1.6.24

GoJS
1

Hi, I’m taking a look at 1.6.24 (we are currently using 1.6.15). In Chrome our images now look like this (shifted down by half the height of the node). In IE there’s no image at all. Is there something we’re missing in our code/template?

2

That’s very odd. Can I see the template and image?

3

It’s happening with any image. The whole template is rather complex, but here’s the part for the image. We have a 3 by 3 table panel and in most cases only the centre cell is populated

private makeNodeImages(): go.Panel {
    return go.GraphObject.make(go.Panel, "Table",
      {
        stretch: go.GraphObject.Fill
      },
      this.getNodeImageTemplate(1, 0, "imageN"),
      this.getNodeImageTemplate(1, 2, "imageS"),
      this.getNodeImageTemplate(2, 1, "imageE"),
      this.getNodeImageTemplate(0, 1, "imageW"),
      this.getNodeImageTemplate(2, 0, "imageNE"),
      this.getNodeImageTemplate(0, 0, "imageNW"),
      this.getNodeImageTemplate(2, 2, "imageSE"),
      this.getNodeImageTemplate(0, 2, "imageSW"),
      // main image
      go.GraphObject.make(go.Picture,
        {
          row: 1,
          column: 1,
          sourceCrossOrigin: (): string => { return null; }
        },
        new go.Binding("source", "image"),
        new go.Binding("stretch", "imageStretch")
      )
    );
  }

  private getNodeImageTemplate(col: number, row: number, source: string): go.Picture {
    var imageStretch: go.EnumValue = go.GraphObject.Default;

    switch (source) {
      case "imageW":
      case "imageE":
        imageStretch = go.GraphObject.Vertical;
        break;
      case "imageN":
      case "imageS":
        imageStretch = go.GraphObject.Horizontal;
        break;
    }

    return go.GraphObject.make(go.Picture,
      {
        row: row,
        column: col,
        stretch: imageStretch,
        sourceCrossOrigin: (): string => { return null; }
      },
      new go.Binding("source", source)
    );
  }
4

If I set the background and default separator strokes of the table panel then I get this

So it looks like the empty first row isn’t being collapsed, but the empty columns are

5

Trying your code, it seems OK to me. What’s different?

6

I guess it’s the rest of the template causing it to happen. I will have a closer look here and let you know what I find

7

I’ve partially fixed this by removing
sourceCrossOrigin: (): string => { return null; }
from all our images, is that no longer required?

IE is now behaving like Chrome, showing half an image in some cases. I can fix that by removing
locationSpot: go.Spot.Center
from our node template. But that will mess up our layout elsewhere

8

Does the new Picture | GoJS API property help?

9

The problem was caused by images with no source set. Previously the table panel rows and columns collapsed when the images inside them had no source but that isn’t happening in 1.7 (although it is in your example!). I now just hide the images with no source and the columns and rows collapse as I’d like. So problem solved, we can now think about upgrading!