Playing around with SVG and CouchDB

1

I will publish my code tomorrow but I was playing with SVG and it seems to work. Had to go back to Ember 2.18 to get the SVG’s to work so I still have to look at that. For now, my test seems to work. Play with it on:

https://my.couchcluster.com/paint/_design/couch-paint/_rewrite/

2

Source: GitHub - broerse/couch-paint

3

What part of your SVG was breaking in >2.18 ? … I’ve been running SVG in my components successfully all the way through the 3.* versions.

Here is an example from a component, in the component, I then use d3 to interactively manipulate the elements.

<svg viewBox={{viewBox}} class="bg-shade-1">

  <g class="floor">
    {{#each structures as |s|}}
      <g  style="transform: translate({{s.x}}px,{{s.y}}px)">
        {{{s.data}}}
      </g>
    {{/each}}
    {{#each data key="id" as |seat|}}
        <use  id="seat-{{seat.id}}"   fill={{seat.color}}
          transform="translate({{seat.x}}, {{seat.y}}) rotate({{seat.r}}, 5, 5)"
          xlink:href="{{if seat.selected "#roundSeat" "#rectSeat"}}"
          role="button"
          {{action this.seatClick seat}}
        >
        </use>
    {{/each}}
  </g>

</svg>

Note the xlink:href property has quotes around it, even though it shouldn’t need it. This seems to be a bug with Glimmer and namespaced properties.

Also +1 on using CouchDB, it’s a great tech, and works well with Ember, I’ve deployed a number of Couch+Ember apps, and always enjoy it!

4

If I just change back to ~3.9.0 I get this from glimmer ? Maybe an other bug?

Uncaught (in promise) Error: unreachable
    at unreachable (util.js:27)
    at Object.evaluate (runtime.js:1387)
    at AppendOpcodes.evaluate (runtime.js:73)
    at LowLevelVM.evaluateSyscall (runtime.js:3472)
    at LowLevelVM.evaluateInner (runtime.js:3418)
    at LowLevelVM.evaluateOuter (runtime.js:3410)
    at VM.next (runtime.js:5531)
    at TemplateIteratorImpl.next (runtime.js:5633)
    at RootState.render (glimmer.js:4805)
    at TransactionRunner.runInTransaction (metal.js:563)
5

More play. Show the Ember generated SVG direct from the database.