increment package version to 1.0.0 and remove old version files

Author: Sascha Braun

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-threejs-composer",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "main": "build/src/index.js",
   "typings": "build/src/index.d.ts",
   "repository": "https://github.com/sascha245/vue-threejs-composer",

src/components/AssetBundle.ts

@@ -1,12 +1,12 @@
-import Vue, { VNode } from "vue";
-import { Component, Mixins, Prop } from "vue-property-decorator";
+import { Component, Mixins, Prop, Provide, Vue } from "vue-property-decorator";
 
-import { AssetBundle as Bundle } from "../core";
-import { isThreeAssetComponent, ThreeComponent } from "./base";
+import { BundleHandle } from "../core";
+import { AppComponent } from "../mixins";
+import { stringToArray } from "../utils/toArray";
 
 @Component
-export class AssetBundle extends Mixins(ThreeComponent) {
-  @Prop({ type: String, default: "" })
+export class AssetBundle extends Mixins(AppComponent) {
+  @Prop({ type: String, required: true })
   public name!: string;
 
   @Prop({ type: Boolean, default: false })
@@ -15,82 +15,57 @@ export class AssetBundle extends Mixins(ThreeComponent) {
   @Prop({ type: [String, Array], default: () => [] })
   public dependencies!: string | string[];
 
-  private m_isActive = false;
-  private m_bundle!: Bundle;
+  @Provide("bundle")
+  private provideBundle = this.getBundle;
 
-  public mounted() {
-    const manager = this.app().assets;
-    this.m_bundle = manager.createBundle(this.name);
+  private getBundle() {
+    return this.m_bundle;
+  }
 
-    this.m_bundle.on("load", this.onLoadBundle);
-    this.m_bundle.on("unload", this.onUnloadBundle);
+  private m_active = false;
+  private m_bundle!: BundleHandle;
+
+  public mounted() {
+    this.m_bundle = this.app().assets.bundles.create(this.name);
+    this.m_bundle.onLoad.on(this.onLoad);
+    this.m_bundle.onUnload.on(this.onUnload);
 
-    // TODO handle preload on / off
-    // this.m_bundle.preload = this.preload;
+    this.m_bundle.preload = this.preload;
   }
 
-  public beforeDestroy() {
-    const manager = this.app().assets;
-    manager.deleteBundle(this.name);
+  public destroyed() {
+    this.app().assets.bundles.dispose(this.name);
   }
 
   public render(h: any) {
-    if (!this.m_isActive) {
+    if (!this.m_active) {
       return null;
     }
     return h("div", this.$slots.default);
   }
 
-  private async onLoadBundle(): Promise<void> {
-    this.m_isActive = true;
+  private async onLoad(): Promise<void> {
+    this.m_active = true;
 
     const bundles = this.getBundles(this.dependencies);
-    const depsPromises = this.m_bundle.registerDependencies(bundles);
+    const deps = this.m_bundle.registerDependencies(bundles);
 
     await Vue.nextTick();
-    await depsPromises;
-
-    this.registerAssets(this.$slots.default);
-
-    // console.log("registration for bundle done", this.name);
+    await deps;
   }
 
-  private async onUnloadBundle() {
-    this.m_isActive = false;
+  private async onUnload(): Promise<void> {
+    this.m_active = false;
     await Vue.nextTick();
   }
 
-  private registerAssets(nodes: VNode[] | undefined) {
-    if (nodes) {
-      for (const node of nodes) {
-        const component = node.componentInstance;
-        if (component && isThreeAssetComponent(component)) {
-          this.m_bundle.registerAsset(component.asset);
-        }
-        this.registerAssets(node.children);
-      }
-    }
-  }
-
-  private getBundles(dependencies: string | string[]): Bundle[] {
-    const manager = this.app().assets;
-    const bundles: Bundle[] = [];
+  private getBundles(pDependencies: string | string[]): BundleHandle[] {
+    const bundles: BundleHandle[] = [];
+    const dependencies = stringToArray(",", pDependencies);
+    const app = this.app();
 
-    if (!dependencies) {
-      return bundles;
-    }
-    if (typeof dependencies === "string") {
-      dependencies = dependencies.split(",").map(mat => mat.trim());
-    }
-    if (!Array.isArray(dependencies)) {
-      throw new Error(
-        `AssetBundle "${
-          this.name
-        }" could not be loaded: "dependencies" have to be either a string or an array`
-      );
-    }
-    (dependencies as string[]).forEach(dep => {
-      const bundle = manager.getBundle(dep);
+    dependencies.forEach(name => {
+      const bundle = app.assets.bundles.get(name);
       if (bundle) {
         bundles.push(bundle);
       }

src/components/Axes.ts

@@ -1,15 +1,10 @@
-import * as THREE from "three";
+import { AxesHelper } from "three";
 import { Component, Mixins, Prop, Provide } from "vue-property-decorator";
 
-import { AssetTypes, GeometryType, MaterialType } from "../types";
-import { ThreeComponent, ThreeObjectComponent, ThreeSceneComponent } from "./base";
+import { ObjectComponent } from "../mixins";
 
 @Component
-export class Axes extends Mixins(
-  ThreeComponent,
-  ThreeSceneComponent,
-  ThreeObjectComponent
-) {
+export class Axes extends Mixins(ObjectComponent) {
   @Prop({ type: String, default: "" })
   private name!: string;
 
@@ -22,29 +17,31 @@ export class Axes extends Mixins(
   private m_axes!: THREE.AxesHelper;
   private m_created = false;
 
-  public getObject(): THREE.Object3D {
+  public getObject() {
     return this.m_axes;
   }
 
   public async created() {
-    if (!this.scene && !this.object) {
+    const scene = this.scene() ? this.scene()!.get() : undefined;
+    if (!scene && !this.object()) {
       throw new Error(
         "Grid component can only be added as child to an object or mesh component"
       );
     }
 
-    this.m_axes = new THREE.AxesHelper(this.size);
+    this.m_axes = new AxesHelper(this.size);
     this.m_axes.name = this.name;
 
-    const parent = this.object ? this.object() : this.scene();
-    parent.add(this.m_axes);
+    const parent = this.object ? this.object() : scene;
+    parent!.add(this.m_axes);
 
     this.m_created = true;
   }
 
-  public beforeDestroy() {
-    const parent = this.object ? this.object() : this.scene();
-    parent.remove(this.m_axes);
+  public destroyed() {
+    const scene = this.scene() ? this.scene()!.get() : undefined;
+    const parent = this.object ? this.object() : scene;
+    parent!.remove(this.m_axes);
   }
 
   public render(h: any) {

src/components/Behaviour.ts

@@ -1,40 +1,68 @@
-import * as THREE from "three";
-import { Component, Mixins, Prop, Provide, Vue, Watch } from "vue-property-decorator";
+import { Component, Mixins, Prop, Provide, Vue } from "vue-property-decorator";
 
-import { CameraFactory } from "../types";
-import { ThreeComponent, ThreeSceneComponent } from "./base";
+import { CameraFactory, CameraHandle } from "../core";
+import { ObjectComponent } from "../mixins";
 
 @Component
-export class Camera extends Mixins(ThreeComponent, ThreeSceneComponent) {
+export class Camera extends Mixins(ObjectComponent) {
   @Prop({ required: true, type: String })
   private name!: string;
 
   @Prop({ required: true, type: Function })
   public factory!: CameraFactory;
 
   @Provide("object")
-  public provideObject = this.object;
+  public provideObject = this.getObject;
 
-  private m_created = false;
-  private m_camera!: THREE.Camera;
+  private m_active = false;
+  private m_camera!: CameraHandle;
 
-  public object(): THREE.Object3D {
-    return this.m_camera;
+  public getObject() {
+    return this.m_camera.get();
   }
 
+  public onActivate = async () => {
+    this.m_active = true;
+  };
+  public onDeactivate = async () => {
+    this.m_active = false;
+    await Vue.nextTick();
+  };
+
   public async created() {
-    this.m_camera = await this.factory(this.app());
-    this.m_camera.name = this.name;
-    this.app().cameraManager.set(this.name, this.m_camera);
-    this.m_created = true;
+    const app = this.app();
+    const sceneHandle = this.scene();
+    const scene = sceneHandle ? this.scene()!.get() : undefined;
+    if (!scene) {
+      throw new Error(
+        "Camera component can only be added as child to an object or scene component"
+      );
+    }
+
+    const camera = await this.factory(app);
+    camera.name = this.name;
+
+    this.m_camera = sceneHandle!.cameras.create(this.name);
+    this.m_camera.set(camera);
+    this.m_camera.onActivate.on(this.onActivate);
+    this.m_camera.onDeactivate.on(this.onDeactivate);
+
+    this.m_active = true;
+
+    const parent = this.object ? this.object() : scene;
+    parent!.add(this.m_camera.get()!);
   }
 
-  public beforeDestroy() {
-    this.app().cameraManager.remove(this.name);
+  public destroyed() {
+    const sceneHandle = this.scene();
+    const scene = sceneHandle ? this.scene()!.get() : undefined;
+    const parent = this.object ? this.object() : scene;
+    parent!.remove(this.m_camera.get()!);
+    sceneHandle!.cameras.dispose(this.name);
   }
 
   public render(h: any) {
-    if (!this.m_created) {
+    if (!this.m_active) {
       return null;
     }
     return h("div", this.$slots.default);