API Docs for: 2.0.0
Show:

Component Class

Module: BIMSURFER

Component is the base class for all components within a Viewer.


Contents


Component IDs

Every Component has an ID that's unique within the parent Viewer. the Viewer generates the IDs automatically by default, however you can also specify them yourself. In the example below, we're creating a viewer comprised of Viewer, Material, Geometry and GameObject components, while letting BIMSURFER generate its own ID for the Geometry:

``
## <a name="componentProps">Properties</a>
Almost every property in a Viewer Component fires a change event when you update it. For example, we can subscribe
 to the Material/diffuse:event event that a
 Material fires when its Material/diffuse:property
 property is updated, like so:
``javascript
 // Bind a change callback to a property
 var handle = material.on("diffuse", function(diffuse) {
    console.log("Material diffuse color has changed to: [" + diffuse[0] + ", " + diffuse[1] + "," + diffuse[2] + "]");
});
// Change the property value, which fires the callback
 material.diffuse = [ 0.0, 0.5, 0.5 ];
// Unsubscribe from the property change event
 material.off(handle);

We can also subscribe to changes in the way components are attached to each other, since components are properties of other components. For example, we can subscribe to the 'GameObject/material:event' event that a GameObject fires when its GameObject/material:property property is set to a different Material:

 // Bind a change callback to the GameObject's Material
 object1.on("material", function(material) {
    console.log("GameObject's Material has changed to: " + material.id);
});
// Now replace that Material with another
 object1.material = new BIMSURFER.Material({
    id: "myOtherMaterial",
    diffuse: [ 0.3, 0.3, 0.6 ]
    //..
});

Metadata

You can set optional metadata on your Components, which can be anything you like. These are intended to help manage your components within your application code or content pipeline. You could use metadata to attach authoring or version information, like this:

 // Viewer with authoring metadata
 var viewer = new BIMSURFER.Viewer({
    id: "myViewer",
    metadata: {
        title: "My awesome 3D viewer",
        author: "@xeolabs",
 date: "February 13 2015"
 }
 });
// Material with descriptive metadata
 var material = new BIMSURFER.Material(viewer, {
    id: "myMaterial",
    diffuse: [1, 0, 0],
    metadata: {
        description: "Bright red color with no textures",
        version: "0.1",
        foo: "bar"
    }
});

As with all properties, you can subscribe and change the metadata like this:

 // Subscribe to changes to the Material's metadata
 material.on("metadata", function(value) {
    console.log("Metadata changed: " + JSON.stringify(value));
});
// Change the Material's metadata, firing our change handler
 material.metadata = {
    description: "Bright red color with no textures",
    version: "0.2",
    foo: "baz"
};

Logging

Components have methods to log ID-prefixed messages to the JavaScript console:

 material.log("Everything is fine, situation normal.");
 material.warn("Wait, whats that red light?");
 material.error("Aw, snap!");

The logged messages will look like this in the console:

 [LOG]   myMaterial: Everything is fine, situation normal.
 [WARN]  myMaterial: Wait, whats that red light..
 [ERROR] myMaterial: Aw, snap!

Destruction

Get notification of destruction directly on the Components:

 material.on("destroyed", function() {
    this.log("Component was destroyed: " + this.id);
});

Or get notification of destruction of any Component within its Viewer, indiscriminately:

 viewer.on("componentDestroyed", function(component) {
    this.log("Component was destroyed: " + component.id);
});

Then destroy a component like this:

 material.destroy();

Other Components that are linked to it will fall back on a default of some sort. For example, any GameObject that were linked to our Material will then automatically link to the Viewer's default Viewer/material:property.

Constructor

Component

(
  • [viewer]
  • [cfg]
)

Parameters:

  • [viewer] Viewer optional

    Parent Viewer - creates this Component within the default Viewer when omitted.

  • [cfg] optional

    Component configuration

    • [id] String optional

      Optional ID, unique among all components in the parent Viewer, generated automatically when omitted.

    • [meta] String:Object optional

      Optional map of user-defined metadata to attach to this Component.

Methods

destroy

()

Destroys this component.

Removes this Component from its Viewer.

Fires a destroyed event on this Component.

error

(
  • message
)

Logs an error for this component to the JavaScript console.

The console message will have this format: [ERROR] <component id>: <message>

Parameters:

  • message String

    The message to log

fire

(
  • event
  • value
  • [forget=false]
)

Fires an event on this component.

Notifies existing subscribers to the event, retains the event to give to any subsequent notifications on that location as they are made.

Parameters:

  • event String

    The event type name

  • value Object

    The event

  • [forget=false] Boolean optional

    When true, does not retain for subsequent subscribers

log

(
  • message
)

Logs a console debugging message for this component.

The console message will have this format: [LOG] <component id>: <message>

Parameters:

  • message String

    The message to log

off

(
  • handle
)

Cancels an event subscription that was previously made with on or once.

Parameters:

  • handle String

    Subscription handle

on

(
  • event
  • callback
  • [scope=this]
)
String

Subscribes to an event on this component.

The callback is be called with this component as scope.

Parameters:

  • event String

    Publication event

  • callback Function

    Called when fresh data is available at the event

  • [scope=this] Object optional

    Scope for the callback

Returns:

String:

Handle to the subscription, which may be used to unsubscribe with {@link #off}.

once

(
  • event
  • callback
  • [scope=this]
)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is handled.

Parameters:

  • event String

    Data event to listen to

  • callback Function(data)

    Called when fresh data is available at the event

  • [scope=this] Object optional

    Scope for the callback

warn

(
  • message
)

Logs a warning for this component to the JavaScript console.

The console message will have this format: [WARN] <component id>: <message>

Parameters:

  • message String

    The message to log

Properties

className

String final

JavaScript class name for this Component.

destroyed

Boolean

True as soon as this Component has been destroyed

id

String final

Unique ID for this Component within its parent Viewer.

Items in this map

Unknown

metadata

Object

Metadata on this component.

viewer

Viewer final

The Viewer that contains this Component.

Events

destroyed

Fired when this Component is destroyed.