Transformed shapes do not render correctly in overview and presentation

[Chaos99]

(this is for the demo implementation at strut.io/editor using Google Chrome 40.0.2214.69 (Official Build) beta-m)

Lines generated from scaling a rectangle from the shapes menu show up in the slide editor just fine, but are distorted to a small dot in the overview and the final presentation.

[mwcz]

Yuck. Yeah, it looks like this happens with all shapes. Sorry you ran into this! To reproduce with several different shapes, import the presentation below and run it (it's busted in Impress, Bespoke, and Handouts).

I poked at it briefly and it looks like scale.width and scale.height are not being applied to the svg elements in the overview or in the final presentation.

Here's the SVG element for the pentagon in the presentation below, in the slide editor:

<svg height="587.0000466237644" width="41.08071395442089" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 726 726" preserveAspectRatio="none">
    <polygon points="723,314 543,625.769145 183,625.769145 3,314 183,2.230855 543,2.230855 723,314"></polygon>
</svg>

And here it is in the final presentation:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 726 726" preserveAspectRatio="none">
    <polygon points="723,314 543,625.769145 183,625.769145 3,314 183,2.230855 543,2.230855 723,314"></polygon>
</svg>

Everything looks correct except for the missing width and height attributes. I'll try to make some time to fix this unless someone else wants to tackle it.

{
  "slides": [
    {
      "components": [
        {
          "markup": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 726 726\" preserveAspectRatio=\"none\"><polygon points=\"723,314 543,625.769145 183,625.769145 3,314 183,2.230855 543,2.230855 723,314\"/></svg>",
          "type": "Shape",
          "x": 234,
          "y": 110,
          "scale": {
            "width": 41.08071395442089,
            "height": 587.0000466237644
          },
          "selected": false,
          "rotate": 0
        },
        {
          "markup": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 50 50\" preserveAspectRatio=\"none\"><rect width=\"50\" height=\"50\"/></svg>",
          "type": "Shape",
          "x": 347,
          "y": 170,
          "scale": {
            "width": 2.873487257292742,
            "height": 419.80132854060446
          },
          "selected": false
        },
        {
          "markup": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" preserveAspectRatio=\"none\" viewBox=\"0 0 80 80\"><circle cx=\"40\" cy=\"40\" r=\"40\" /></svg>",
          "type": "Shape",
          "x": 304,
          "y": 138,
          "scale": {
            "width": 16.724493365706124,
            "height": 465.53301685635705
          },
          "selected": false
        },
        {
          "markup": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 50 50\" preserveAspectRatio=\"none\"><polygon points=\"25,0 50,50 0,50\"/></svg>",
          "type": "Shape",
          "x": 373,
          "y": 189,
          "scale": {
            "width": 27.4591801844967,
            "height": 389.13063356563003
          },
          "selected": false
        },
        {
          "markup": "<svg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" preserveAspectRatio=\"none\"><polygon points=\"156.427384220077,186.832815729997 43.5726157799226,186.832815729997 8.69857443566525,79.5015528100076 100,13.1671842700025 191.301425564335,79.5015528100076\" /></svg>",
          "type": "Shape",
          "x": 418,
          "y": 200,
          "scale": {
            "width": 21.96524470234602,
            "height": 388.04479969590227
          },
          "selected": false
        }
      ],
      "z": 0,
      "impScale": 3,
      "rotateX": 0,
      "rotateY": 0,
      "rotateZ": 0,
      "index": 0,
      "selected": true,
      "active": true,
      "x": 180,
      "y": 180
    }
  ],
  "activeSlide": {
    "components": [
      {
        "markup": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 726 726\" preserveAspectRatio=\"none\"><polygon points=\"723,314 543,625.769145 183,625.769145 3,314 183,2.230855 543,2.230855 723,314\"/></svg>",
        "type": "Shape",
        "x": 234,
        "y": 110,
        "scale": {
          "width": 41.08071395442089,
          "height": 587.0000466237644
        },
        "selected": false,
        "rotate": 0
      },
      {
        "markup": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 50 50\" preserveAspectRatio=\"none\"><rect width=\"50\" height=\"50\"/></svg>",
        "type": "Shape",
        "x": 347,
        "y": 170,
        "scale": {
          "width": 2.873487257292742,
          "height": 419.80132854060446
        },
        "selected": false
      },
      {
        "markup": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" preserveAspectRatio=\"none\" viewBox=\"0 0 80 80\"><circle cx=\"40\" cy=\"40\" r=\"40\" /></svg>",
        "type": "Shape",
        "x": 304,
        "y": 138,
        "scale": {
          "width": 16.724493365706124,
          "height": 465.53301685635705
        },
        "selected": false
      },
      {
        "markup": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 50 50\" preserveAspectRatio=\"none\"><polygon points=\"25,0 50,50 0,50\"/></svg>",
        "type": "Shape",
        "x": 373,
        "y": 189,
        "scale": {
          "width": 27.4591801844967,
          "height": 389.13063356563003
        },
        "selected": false
      },
      {
        "markup": "<svg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" preserveAspectRatio=\"none\"><polygon points=\"156.427384220077,186.832815729997 43.5726157799226,186.832815729997 8.69857443566525,79.5015528100076 100,13.1671842700025 191.301425564335,79.5015528100076\" /></svg>",
        "type": "Shape",
        "x": 418,
        "y": 200,
        "scale": {
          "width": 21.96524470234602,
          "height": 388.04479969590227
        },
        "selected": false
      }
    ],
    "z": 0,
    "impScale": 3,
    "rotateX": 0,
    "rotateY": 0,
    "rotateZ": 0,
    "index": 0,
    "selected": true,
    "active": true,
    "x": 180,
    "y": 180
  },
  "fileName": "presentation-2",
  "deckVersion": "1.0",
  "customBackgrounds": {
    "bgs": []
  },
  "overviewX": 180,
  "overviewY": 180
}

[tantaman]

@mwcz, this looks to be the problem: https://github.com/tantaman/Strut/blob/master/app/bundles/app/strut.presentation_generator.impress/ImpressGenerator.js#L107-L115

that is the function that renders the shape into the presentation.

[mwcz]

Thanks @tantaman, that was extremely helpful. #320 has a fix that works in my tests. I went ahead and merged the fix into my openshift strut deployment. Lemme know if I missed anything or the fix can be improved in any way!

[tuonglx]

@mwcz Could you pleas show me how to add a new shape?

[tuonglx]

Already done it by adding new PlatonicShape in ShapeCollection.js. Thanks