[#11] Adding icon component

package.json

@@ -39,7 +39,7 @@
     "css-element-queries": "^1.1.1",
     "interactjs": "^1.5.4",
     "lodash": "^4.17.11",
-    "polestar-icons": "^0.9.56",
+    "polestar-icons": "^0.9.60",
     "pouchdb": "^7.1.1",
     "qrcode": "^1.4.1",
     "react": "^16.9.0",

src/constants/components/icon/index.ts

@@ -0,0 +1,45 @@
+import { registerComponent } from 'aframe';
+import metadata from 'polestar-icons/lib/Example/polestar.json';
+
+const icons = (() => metadata.icons.reduce((prev: any, curr: any) => {
+    return Object.assign(prev, {
+        [curr.name]: curr,
+    });
+}, {}))();
+
+export default () => registerComponent('icon', {
+    schema: {
+        name: {
+            type: 'string',
+        },
+    },
+    init() {
+        const { name } = this.data;
+        this.drawIcon(name);
+    },
+    drawIcon(name: string) {
+        const canvas = document.createElement('canvas') as any;
+        canvas.width = 1024;
+        canvas.height = 1024;
+        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+        ctx.font = '900 200px polestar';
+        ctx.fillStyle = '#red';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        const icon = icons[name];
+        if (icons[name]) {
+            ctx.fillText(String.fromCharCode(parseInt(icon.unicode, 16)), canvas.width / 2, canvas.height / 2);
+        } else {
+            ctx.fillText(String.fromCharCode(parseInt(icons.map.unicode, 16)), canvas.width / 2, canvas.height / 2);
+        }
+        this.el.setAttribute('material', 'src', canvas.toDataURL());
+    },
+    update() {
+        console.log(icons);
+        const { name } = this.data;
+        console.log(name);
+        if (name && name.length) {
+            this.drawIcon(name);
+        }
+    },
+});

src/constants/components/index.ts

@@ -4,6 +4,7 @@ import screenshot from './screenshot';
 import classname from './classname';
 import hover from './hover';
 import click from './click';
+import icon from './icon';
 
 export default [
     name,
@@ -12,4 +13,5 @@ export default [
     screenshot,
     hover,
     click,
+    icon,
 ];

src/constants/primitives/a-icon/index.ts

@@ -0,0 +1,19 @@
+import { registerPrimitive } from 'aframe';
+
+export default () => registerPrimitive('a-icon', {
+    defaultComponents: {
+        icon: {
+            name: 'map',
+        },
+        geometry: {
+            primitive: 'plane',
+        },
+        material: {
+            side: 'double',
+            transparent: true,
+        },
+    },
+    mappings: {
+        icon: 'icon.name',
+    },
+});

src/constants/primitives/index.ts

@@ -1 +1,8 @@
+import icon from './a-icon';
+
 export * from './primitives';
+
+
+export default [
+    icon,
+];

src/constants/primitives/primitives.ts

@@ -28,6 +28,7 @@ export type PrimitiveType = 'a-box'
 | 'a-triangle'
 | 'a-video'
 | 'a-videosphere'
+| 'a-icon'
 ;
 
 export type ArType = 'a-marker'
@@ -398,6 +399,14 @@ export const primitives: IPrimitive[] = [
         url: 'https://aframe.io/docs/0.8.0/primitives/a-videosphere.html',
         attributes: [],
     },
+    {
+        key: 'a-icon',
+        type: 'a-icon',
+        title: 'Icon',
+        description: 'The Icon.',
+        url: '',
+        attributes: [],
+    },
 ];
 
 export const assetPrimitives: IPrimitive[] = [

src/tools/InspectorTools.ts

@@ -14,6 +14,7 @@ import {
 } from './';
 import Components from '../constants/components';
 import Systems from '../constants/systems';
+import Primitives from '../constants/primitives';
 import '../lib/GLTFExporter';
 
 export interface ICameras {
@@ -48,6 +49,7 @@ const defaultInspectorOptions: IInsepctorOptions = {
 
 Systems.forEach(System => System());
 Components.forEach(Comp => Comp());
+Primitives.forEach(Prim => Prim());
 
 class InspectorTools {
     sceneEl?: IScene;

tsconfig.json

@@ -10,6 +10,7 @@
         "strictNullChecks": false,
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
+        "resolveJsonModule": true,
         "jsx": "react",
         "module": "commonjs",
         "moduleResolution": "node",

tslint.json

@@ -10,7 +10,6 @@
       "indent": false,
       "prefer-for-of": false,
       "no-console": false,
-      "member-access": false,
       "member-ordering": false,
       "jsx-no-multiline-js": false,
       "semicolon": false,