feat: name and names prop types

Author: h-ikeda

docs/property-types.md

@@ -71,10 +71,7 @@ Following list shows all property types and parsing schemas.
   Parsed as an array of vector2s.
 - ***fog***
   Space-separated paramaters as color, near and far, corresponding [THREE.Fog](https://threejs.org/docs/#api/en/scenes/Fog)
+- ***name***
+  A string representing the component name. It must not contain any spaces.
 - ***names***
-  A string or an array of string.
-- ***shapes***
-  An array of vector2s or an array of
-  [THREE.Shape](https://threejs.org/docs/#api/en/extras/core/Shape),
-  corresponding to
-  [THREE.ExtrudeBufferGeometry](https://threejs.org/docs/#api/en/geometries/ExtrudeBufferGeometry)
+  Space separated strings or an array of string.

src/cameras/vgl-camera.js

@@ -1,7 +1,7 @@
 import { Camera, Vector3 } from 'three';
 import VglObject3d from '../core/vgl-object3d';
 import { parseVector3, parseSpherical } from '../parsers';
-import { vector3, spherical } from '../validators';
+import { vector3, spherical } from '../types';
 
 /**
  * This is abstract base component for cameras,

src/cameras/vgl-orthographic-camera.js

@@ -1,6 +1,6 @@
 import { OrthographicCamera } from 'three';
 import VglCamera from './vgl-camera';
-import { number } from '../validators';
+import { number } from '../types';
 
 /**
  * Camera that uses orthographic projection,

src/cameras/vgl-perspective-camera.js

@@ -1,6 +1,6 @@
 import { PerspectiveCamera } from 'three';
 import VglCamera from './vgl-camera';
-import { number } from '../validators';
+import { number } from '../types';
 
 /**
  * Camera that uses perspective projection,

src/core/vgl-geometry.js

@@ -1,5 +1,6 @@
 import { BufferGeometry, BufferAttribute } from 'three';
-import { string, floatArray } from '../validators';
+import { name, floatArray } from '../types';
+import { nameValidator } from '../validators';
 import { parseArray } from '../parsers';
 
 /**
@@ -16,7 +17,7 @@ export default {
   },
   props: {
     /** Name of the component. */
-    name: string,
+    name: { type: name, validator: nameValidator },
     /** The x, y, and z coordinates of each vertex in this geometry. */
     positionAttribute: floatArray,
     /** The red, green, and blue channels of vertex color of each vertex in this geometry. */
@@ -67,9 +68,9 @@ export default {
       },
       immediate: true,
     },
-    name(name, oldName) {
+    name(newName, oldName) {
       if (oldName !== undefined) this.vglNamespace.geometries.delete(oldName, this.inst);
-      if (name !== undefined) this.vglNamespace.geometries.set(name, this.inst);
+      if (newName !== undefined) this.vglNamespace.geometries.set(newName, this.inst);
     },
     positionAttribute(positionAttribute) {
       const positionArray = parseArray(positionAttribute);

src/core/vgl-namespace.js

@@ -10,6 +10,7 @@ import Namespace from './namespace';
  * - `vglNamespace.geometries`
  * - `vglNamespace.materials`
  * - `vglNamespace.textures`
+ * - `vglNamespace.curves`
  * - `vglNamespace.object3ds`
  *
  * Each namespace internally has a map of strings and objects, and has methods to access them.

src/core/vgl-object3d.js

@@ -6,8 +6,9 @@ import {
   euler,
   quaternion,
   boolean,
-  string,
-} from '../validators';
+  name,
+} from '../types';
+import { nameValidator } from '../validators';
 
 /**
  * This is the base mixin component for most object components in VueGL,
@@ -37,7 +38,7 @@ export default {
     /** Whether the material receives shadows. */
     receiveShadow: boolean,
     /** Optional name of the object. */
-    name: string,
+    name: { type: name, validator: nameValidator },
     /** Whether the object is visible. */
     hidden: boolean,
   },
@@ -93,15 +94,15 @@ export default {
     },
     parent(parent) { parent.add(this.inst); },
     name: [
-      function handler(name) { this.inst.name = name; },
+      function handler(newName) { this.inst.name = newName; },
       {
-        handler(name, oldName) {
+        handler(newName, oldName) {
           if (oldName !== undefined) {
             this.vglNamespace.object3ds.delete(oldName, this.inst);
-            if (name === undefined) this.vglObject3d.unlisten(this.emitAsObject3d);
+            if (newName === undefined) this.vglObject3d.unlisten(this.emitAsObject3d);
           }
-          if (name !== undefined) {
-            this.vglNamespace.object3ds.set(name, this.inst);
+          if (newName !== undefined) {
+            this.vglNamespace.object3ds.set(newName, this.inst);
             if (oldName === undefined) this.vglObject3d.listen(this.emitAsObject3d);
           }
         },

src/extras/vgl-curve-path.js

@@ -1,13 +1,22 @@
 import { CurvePath } from 'three';
 import VglCurve from './vgl-curve';
-import { boolean } from '../validators';
+import { boolean } from '../types';
+
+/**
+ * An abstract base component extending VglCurve, Corresponding
+ * [THREE.CurvePath](https://threejs.org/docs/index.html#api/extras/core/CurvePath).
+ *
+ * Properties of [VglCurve](vgl-curve) are also available as mixin.
+ */
 
 export default {
   mixins: [VglCurve],
   props: {
+    /** Whether or not to automatically close the path. */
     autoClose: boolean,
   },
   computed: {
+    /** The THREE.CurvePath instance. */
     inst: () => new CurvePath(),
   },
   watch: {

src/extras/vgl-curve.js

@@ -1,16 +1,23 @@
 import { Curve } from 'three';
-import { string } from '../validators';
+import { name } from '../types';
+import { nameValidator } from '../validators';
 
+/**
+ * An abstract base component for representing a curve, corresponding
+ * [THREE.Curve](https://threejs.org/docs/index.html#api/extras/core/Curve).
+ */
 export default {
   inject: {
     vglNamespace: {
       default() { throw new Error('VueGL components must be wraped by VglNamespace component.'); },
     },
   },
   props: {
-    name: string,
+    /** Name of the component. */
+    name: { type: name, validator: nameValidator },
   },
   computed: {
+    /** The THREE.Curve instance. */
     inst: () => new Curve(),
   },
   beforeDestroy() {
@@ -21,9 +28,9 @@ export default {
       handler(inst) { if (this.name !== undefined) this.vglNamespace.curves.set(this.name, inst); },
       immediate: true,
     },
-    name(name, oldName) {
+    name(newName, oldName) {
       if (oldName !== undefined) this.vglNamespace.curves.delete(oldName, this.inst);
-      if (name !== undefined) this.vglNamespace.curves.set(name, this.inst);
+      if (newName !== undefined) this.vglNamespace.curves.set(newName, this.inst);
     },
   },
   render(h) {

src/extras/vgl-path.js

@@ -1,11 +1,19 @@
 import { Path } from 'three';
 import VglCurvePath from './vgl-curve-path';
-import { vector2Array } from '../validators';
+import { vector2Array } from '../types';
 import { parseVector2Array } from '../parsers';
 
+/**
+ * A 2D path representation, Corresponding
+ * [THREE.Path](https://threejs.org/docs/index.html#api/extras/core/Path).
+ *
+ * Properties of [VglCurvePath](vgl-curve-path) are also available as mixin.
+ */
+
 export default {
   mixins: [VglCurvePath],
   props: {
+    /** The array of points as a LineCurve. */
     path: vector2Array,
   },
   computed: {