A subcomponent of #6, add individual light properties

Author: jsantell

src/app/data/lights.js

@@ -0,0 +1,140 @@
+import transform from './object-transform.js';
+import renderable from './object-renderable.js';
+
+const base = [{
+  name: 'Color',
+  prop: 'color',
+  type: 'color',
+}, {
+  name: 'Intensity',
+  prop: 'intensity',
+  type: 'number',
+}];
+
+const objectProps = [
+  transform,
+  renderable,
+];
+
+const castShadow = {
+  name: 'Cast Shadow',
+  prop: 'castShadow',
+  type: 'boolean',
+  default: false,
+};
+
+const target = {
+  name: 'Target',
+  prop: 'target',
+  type: 'vec3',
+};
+      
+const decay = {
+  name: 'Decay',
+  prop: 'decay',
+  type: 'number',
+  default: 1,
+};
+const distance = {
+  name: 'Distance',
+  prop: 'distance',
+  type: 'number',
+  default: 0,
+};
+const power = {
+  name: 'Power',
+  prop: 'power',
+  type: 'number',
+  default: Math.PI * 4,
+};
+
+const Light = {
+  type: 'light',
+  props: [
+    ...base,
+    ...objectProps
+  ],
+}
+
+export default {
+  Light: Light,
+  AmbientLight: Light,
+  DirectionalLight: {
+    type: 'object',
+    props: [
+      ...base,
+      castShadow,
+      target,
+      ...objectProps,
+    ],
+  },
+  HemisphereLight: {
+    type: 'object',
+    props: [
+      ...base,
+      castShadow,
+      {
+        name: 'Ground Color',
+        prop: 'groundColor',
+        type: 'color'
+      },
+      ...objectProps,
+    ],
+  },
+  PointLight: {
+    type: 'object',
+    props: [
+      ...base,
+      castShadow,
+      decay,
+      distance,
+      power,
+      ...objectProps,
+    ],
+  },
+  RectAreaLight: {
+    type: 'object',
+    props: [
+      ...base,
+      castShadow,
+      {
+        name: 'Width',
+        prop: 'width',
+        type: 'number'
+      }, {
+        name: 'Height',
+        prop: 'height',
+        type: 'number'
+      },
+      ...objectProps,
+    ],	  
+  },
+  SpotLight: {
+    type: 'object',
+    props: [
+      ...base,
+      castShadow,
+      {
+        name: 'Angle',
+        prop: 'angle',
+        type: 'angle',
+        default: Math.PI/3,
+        min: 0,
+        max: Math.PI/2,
+      },
+      decay,
+      distance,
+      power,
+      {
+        name: 'Penumbra',
+        prop: 'penumbra',
+        type: 'number',
+        default: 0,
+        min: 0,
+        max: 1,
+      },
+      target,
+      ...objectProps,
+    ],
+  },
+};

src/app/data/objects.js

@@ -27,11 +27,6 @@ const GeometryRenderable = {
   ]
 }
 
-const Light = {
-  type: 'light',
-  props: object,
-}
-
 const Scene = {
   type: 'scene',
   props: object,
@@ -60,14 +55,6 @@ export default {
   LineSegments: GeometryRenderable,
   Points: GeometryRenderable,
 
-  AmbientLight: Light,
-  DirectionalLight: Light,
-  HemisphereLight: Light,
-  PointLight: Light,
-  RectAreaLight: Light,
-  SpotLight: Light,
-
-  ArrowHelper: Helper,
   AxesHelper: Helper,
   BoxHelper: Helper,
   Box3Helper: Helper,

src/app/elements/ParametersViewElement.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from '../../../web_modules/lit-element.js'
 import ObjectTypes from '../data/objects.js';
+import LightTypes from '../data/lights.js';
 import MaterialTypes from '../data/materials.js';
 import GeometryTypes from '../data/geometry.js';
 import TextureTypes from '../data/textures.js';
@@ -114,6 +115,7 @@ export default class ParametersViewElement extends LitElement {
 
     if (entityData) {
       let definition = ObjectTypes[entityData.baseType] ||
+                        LightTypes[entityData.baseType] ||
                         MaterialTypes[entityData.baseType] ||
                         GeometryTypes[entityData.baseType] ||
                         TextureTypes[entityData.baseType];

src/app/elements/values/KeyValueElement.js

@@ -108,6 +108,7 @@ export default class KeyValueElement extends LitElement {
           break;
         case 'number':
         case 'int':
+        case 'angle':
           valueElement = html`<number-input
             .id="${this._id}"
             .value="${this.value}"