How to control order of rough elements in svg

[maratumba]

Thank you for this, really useful.

Not really an issue, but it might be useful to someone.

When using this in SVG mode, the rough elements in the SVG end up always at the "top" because they're appended to the end of the RoughSvg element. To overcome this, you can use a "RoughGroup" component to contain the rough elements in specific places within the SVG:

// RoughG.vue
<template>
  <g ref="g">
    <slot />
  </g>
</template>

<script>
export default {
  created(){
    this.rough = this.$parent.rough;
  },
  methods: {
    remove(){
      if(this.$refs.g) {
        this.$refs.g.remove()
      }
    },
    append(x){
      if(this.$refs.g){
        this.$refs.g.append(x)
      }
    },
  }
}
</script>

Now, if you put the rough element within this component, it stays where you want it:

<RoughSvg>
  <RoughG>
      <RoughLine :x1="x1" :y1="y1" :x2="x2" :y2="y2" />
  </RoughG>
  <SomeOtherComponent />
</RoughSvg>