🐛 Fix inheritance between components

build.js

@@ -3,12 +3,12 @@ const { promise: clean } = require("delete");
 
 const component = (classe, props) => `import PComponent from "../Component";
 
-export default ({ ${classe} }) => ({
+export default (Pencil) => ({
  name: "P${classe}",
- extends: PComponent,
+ extends: PComponent(Pencil),
  props: ${JSON.stringify(props)},
  beforeMount () {
- this.$pencil = new ${classe}(${["position", ...props, "options"].map(p => `this.${p}`).join(", ")});
+ this.$pencil = new Pencil.${classe}(${["position", ...props, "options"].map(p => `this.${p}`).join(", ")});
  },
 });
 `;

src/components/Component.js

@@ -1,8 +1,8 @@
 import PContainer from "./Container";
 
-export default () => ({
+export default (Pencil) => ({
  name: "PComponent",
- extends: PContainer,
+ extends: PContainer(Pencil),
  props: ["draggable"],
  mounted () {
  if (!this.$pencil) {

src/components/Scene.js

@@ -16,9 +16,9 @@ const methods = mirroredFunctions.reduce((obj, prop) => {
  return obj;
 }, {});
 
-export default ({ Scene }) => ({
+export default (Pencil) => ({
  name: "PScene",
- extends: PContainer,
+ extends: PContainer(Pencil),
  template: "<div><slot/></div>",
  watch: {
  options () {
@@ -30,12 +30,12 @@ export default ({ Scene }) => ({
  beforeMount () {
  // Temporary scene to host children
  const container = document.createElement("div");
- this.$pencil = new Scene(container, this.options);
+ this.$pencil = new Pencil.Scene(container, this.options);
  },
  mounted () {
  const oldScene = this.$pencil;
  const container = this.$el.parentNode;
- this.$pencil = new Scene(container, this.options);
+ this.$pencil = new Pencil.Scene(container, this.options);
  container.replaceChild(this.$pencil.ctx.canvas, this.$el);
 
  // Transfer children from old to new scene