Image shrinks on Change of Orientation

GoJS
1

HI,

I am running into a this weird issue and I am unable to pin point the root cause.

I have a node which has a picture and a textblock surrounded with ports. Similar to what is seen in

I am running to issues in 2 scenarios and that is reproducible only in browsers available in iPad. It works as expected in Desktop Browsers.

  1. On Add of port the Image shrinks.( I addded a background to go.Picture. The Picture element retains the size, but, its the svg which is bound to the Picture shrinks)

  2. On Change on Orientation in iPad, the Images shrink in all the nodes in the canvas.

thanks
Vishal

2

That’s odd. So both before and after adding a port, your Pictures are correctly showing SVG files in desktop Firefox and InternetExplorer and Safari, but not in iPad Safari. What about Android browsers? Does the resolution matter in desktop Safari?

I guess we can try to reproduce the problem, but it would be a lot easier if you gave us an SVG file and a minimal template that exhibits the problem.

3

I’m not seeing any iPad issues with Pictures with SVG sources, at least in terms of orientation.

Can we see your node template and the SVG source you’re using?

4

HI Simon,

Here is the template that I am using.

$(go.Node,{
        	dragComputation: stayInGroup
        }, 'Table', nodeStyle(),
     
        $(go.Panel, 'Auto', {
            row: 1,
            column: 1,
            name: 'BODY',
            stretch: go.GraphObject.Default
        },
        $(go.Shape, 'Rectangle', {
            fill: '#AC193D',
            stroke: null,
            strokeWidth: 0
        }, new go.Binding('figure', 'figure'), new go.Binding('fill',
            'fill'),new go.Binding('fill', 'isSelected',function(sel){
                if(sel){
                    return '#424949';
                  }else{
                    return 'transparent';
                  }
                }).ofObject('')),

        $(go.Picture, {
        	margin:new go.Margin(9, 10, 22, 10),
        	alignment: go.Spot.Top,
        	background: "yellow",
        	imageStretch: go.GraphObject.Fill/*,
           desiredSize: new go.Size(50, 50)*/
        }, new go.Binding('source', 'source', boFactory.changeicon)),

        $(go.TextBlock, {
            textAlign: 'center',
            font: '400 24px noto_sansregular',
            stroke:'#ebeff0',
            editable: false,
            margin:new go.Margin(70, 0, 0, 0),
            isMultiline: true,
            alignment: go.Spot.Bottom,
            stretch: go.GraphObject.Horizontal
        }, 
        new go.Binding('text', 'name').makeTwoWay(),
       
        new go.Binding('stroke', 'textColor',function(textColor){
            if(textColor === null){
                return '#ebeff0';
              }else{
                return textColor;
              }
            }))),
        $(go.Panel, 'Horizontal', new go.Binding('itemArray','topArray'), {
        	row: 0,
        	column: 1,
        	itemTemplate: $(go.Panel, {
                _side: 'top',
                fromSpot: go.Spot.Top,
                toSpot: go.Spot.Top,
                fromLinkable: true,
                toLinkable: true,
                cursor: 'pointer',
                stretch: go.GraphObject.Horizontal
                	
                //contextMenu: portMenu
            }, new go.Binding('portId', 'portId'), $(go.Shape,
                'Rectangle', {
                    stroke: null,
                    strokeWidth: 0,
                    desiredSize: portSize,
                    margin: new go.Margin(0, 1)
                }, new go.Binding('fill', 'portColor')))
            // end itemTemplate
    }), $(go.Panel, 'Vertical', new go.Binding('itemArray',
        'rightArray'), {
        row: 1,
        column: 2,
        
        itemTemplate: $(go.Panel, {
                _side: 'right',
                fromSpot: go.Spot.Right,
                toSpot: go.Spot.Right,
                fromLinkable: true,
                toLinkable: true,
                cursor: 'pointer',
                stretch: go.GraphObject.Vertical,
                //contextMenu: portMenu 
            }, new go.Binding('portId', 'portId'), $(go.Shape,
                'Rectangle', {
                    stroke: null,
                    strokeWidth: 0,
                    desiredSize: portSize,
                    margin: new go.Margin(1, 0)
                }, new go.Binding('fill', 'portColor')))
            // end itemTemplate
    }), $(go.Panel, 'Horizontal', new go.Binding('itemArray',
        'bottomArray'), {
        row: 2,
        column: 1,
        
        itemTemplate: $(go.Panel, {
                _side: 'bottom',
                fromSpot: go.Spot.Bottom,
                toSpot: go.Spot.Bottom,
                fromLinkable: true,
                toLinkable: true,
                cursor: 'pointer',
                stretch: go.GraphObject.Horizontal
                //contextMenu: portMenu 
            }, new go.Binding('portId', 'portId'), $(go.Shape,
                'Rectangle', {
                    stroke: null,
                    strokeWidth: 0,
                    desiredSize: portSize,
                    margin: new go.Margin(0, 1)
                }, new go.Binding('fill', 'portColor')))
            // end itemTemplate
    }), $(go.Panel, 'Vertical', new go.Binding('itemArray',
        'leftArray'), {
        row: 1,
        column: 0,
        
        itemTemplate: $(go.Panel, {
                _side: 'left', // internal property to make it easier to tell which side it's on
                fromSpot: go.Spot.Left,
                toSpot: go.Spot.Left,
                fromLinkable: true,
                toLinkable: true,
                cursor: 'pointer',
                stretch: go.GraphObject.Vertical
                //contextMenu: portMenu 
            }, new go.Binding('portId', 'portId'), $(go.Shape,
                'Rectangle', {
                    stroke: null,
                    strokeWidth: 0,
                    desiredSize: portSize,
                    margin: new go.Margin(1, 0)
                }, new go.Binding('fill', 'portColor')))
            // end itemTemplate
    }),
    {
            selectionAdornmentTemplate:
              $(go.Adornment, 'Auto',
                $(go.Shape,
                { fill: null, stroke: null, strokeWidth: 0}),
                $(go.Placeholder)
              )  // end Adornment
          });

This is almost the same template using in Dynamic Port sample.

Unfortunately, the Editor here does not allow me to up load the SVG file.

I am also unable to paste the SVG file content as well.

5

So Far What I have seen is, when I bind the Picture tag with Physical location of the svg it seem to work fine.

But in my case I get the svg from an API which sends it in base64 format, something like this :

data:image/svg+xml;base64,PHN2ZyBpZD0ic2hhcGUtbGF5ZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUzLjM3OXB4IiBoZWlnaHQ9IjUwLjI5MXB4IiB2aWV3Qm94PSIwIDAgNTMuMzc5IDUwLjI5MSI+PHRpdGxlPkJPLVN0YWtlaG9sZGVyLXRlc3QyMDE2MTAxOTwvdGl0bGU+PHBhdGggZD0iTTUwLjcxNCwxNy4yOTFIMzkuNjlWMTIuNzM4YTEzLDEzLDAsMCwwLTI2LDB2NC41NTNIMi42NjdMMCw1MC4yOTFINTMuMzc5Wk0xNy42OSwxMi43MzhhOSw5LDAsMCwxLDE4LDB2NC41NTNoLTE4VjEyLjczOFoiIGZpbGw9IiNlYmVmZjAiLz48L3N2Zz4=

Not sure if this is something which is causing the issue

6

That SVG image has, inside of it: width="53.379px" height="50.291px"

Can you set these to whole integers? Something like: width="54" height="51"

Does it work then?

With that SVG (without even changing the width and height) I don’t seem to see any orientation issues on the iPad (iPad mini, A1599, running the latest)

7

I tried that as well. Still not working. :(