wip Migrates to using web components

.babelrc

@@ -4,6 +4,7 @@
       "@babel/preset-typescript"
     ],
     "plugins": [
+      ["@babel/plugin-proposal-decorators", { "legacy": true }],
       "@babel/plugin-proposal-class-properties"
     ]
 }

README.md

@@ -35,13 +35,13 @@ It aims to move away from slow auditorial learning process like books to step in
 
 Finally Perspective.wiki is a public wiki anyone can edit the mind maps and maintain them just like wikipedia.
 
-## How we'll build it
-
-### Tecnical Stack
+### Stack
 
 1. Three.js
-2. Neo4j with Apollo
-3. Node
+2. Web components (Lit-Element)
+3. redux-observable & RxJS
+4. Neo4j with Apollo
+5. Node
 
 
 ## Contribute

app/elements/map-scene.ts

@@ -0,0 +1,35 @@
+import {
+  LitElement, html, css, customElement, property,
+} from 'lit-element';
+import { WebGLRenderer } from 'three';
+import api from '../api';
+import './three-scene';
+
+@customElement('map-scene')
+class MapScene extends LitElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback = () => {
+    api.getMap()
+      .then((res) => {
+        this.map = res.data.Map[0];
+      });
+  }
+
+  @property({ attribute: false })
+  map = null;
+
+  static getStyles() {
+    return css`
+      :host {
+        // display: block;
+        // height: 100%;
+        // width: 100%;
+      }
+    `;
+  }
+
+  render = () => html`<slot></slot>`
+}

app/elements/three-camera.ts

@@ -0,0 +1,13 @@
+import {
+  LitElement, html, css, customElement, property,
+} from 'lit-element';
+import { PerspectiveCamera } from 'three';
+
+@customElement('three-camera')
+export default class ThreeCamera extends LitElement {
+  constructor() {
+    super();
+    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.z = 5;
+  }
+}

app/elements/three-controls.ts

@@ -0,0 +1,13 @@
+import {
+  LitElement, html, css, customElement, property,
+} from 'lit-element';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+
+@customElement('three-controls')
+export default class ThreeControls extends LitElement {
+  constructor() {
+    super();
+    // const controls = new OrbitControls(camera, renderer.domElement);
+    // controls.update();
+  }
+}

app/elements/three-renderer.ts

@@ -0,0 +1,86 @@
+import {
+  LitElement, html, css, customElement, property, internalProperty,
+} from 'lit-element';
+import { WebGLRenderer } from 'three';
+
+@customElement('three-renderer')
+export default class ThreeRenderer extends LitElement {
+  constructor() {
+    super();
+    this.renderer = new WebGLRenderer();
+    this.renderer.setClearColor(this.clearColor);
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.appendChild(this.renderer.domElement);
+
+    // const render = () => {
+    //   renderer.render(scene, camera);
+    // };
+
+    // const animate = () => {
+    //   requestAnimationFrame(animate);
+
+    //   // controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
+
+    //   render();
+    // };
+
+    // animate();
+  }
+
+  @property({ type: String, attribute: 'clear-color' })
+  clearColor = 'red';
+
+  @property({ type: Number, reflect: true })
+  width = 0;
+
+  @property({ type: Number, reflect: true })
+  height = 0;
+
+  @internalProperty()
+  renderer: WebGLRenderer;
+
+  animateRenderer = () => {
+    requestAnimationFrame(this.animateRenderer);
+
+    // TODO: implement this
+    // this.renderer.render(scene, camera);
+  }
+
+  connectedCallback = () => {
+    super.connectedCallback();
+
+    this.animateRenderer();
+  }
+
+  attributeChangedCallback = (name: string, old: any, value: any) => {
+    super.attributeChangedCallback(name, old, value);
+
+    console.debug(`${name} changed`);
+
+    switch (name) {
+      case 'clear-color':
+        this.renderer.setClearColor(value);
+        break;
+      case 'width':
+        this.renderer.setSize(value, this.height);
+        break;
+      case 'height':
+        this.renderer.setSize(this.width, value);
+        break;
+      default:
+        console.debug(`${name} changed`);
+    }
+  }
+
+  static getStyles() {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    `;
+  }
+
+  render = () => html`<slot></slot>`
+}

app/elements/three-scene.ts

@@ -0,0 +1,17 @@
+import {
+  LitElement, html, css, customElement, property, internalProperty,
+} from 'lit-element';
+import { WebGLRenderer, Scene } from 'three';
+
+@customElement('three-scene')
+class ThreeScene extends LitElement {
+  constructor() {
+    super();
+    this.scene = new Scene();
+  }
+
+  @internalProperty()
+  scene: Scene;
+
+  render = () => html`<slot></slot>`
+}

app/index.ts

@@ -2,40 +2,49 @@ import {
   Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh,
 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import {
+  LitElement, html, css, customElement, property,
+} from 'lit-element';
 import renderApp from './app';
-
-const scene = new Scene();
-
-const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-
-const renderer = new WebGLRenderer();
-renderer.setClearColor('#111');
-renderer.setSize(window.innerWidth, window.innerHeight);
-document.body.appendChild(renderer.domElement);
-
-renderApp({ scene });
-
-camera.position.z = 5;
-const controls = new OrbitControls(camera, renderer.domElement);
-
-const render = () => {
-  renderer.render(scene, camera);
-};
-
-const animate = () => {
-  requestAnimationFrame(animate);
-
-  // controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
-
-  render();
-};
-
-animate();
-
-controls.update();
-
-const resize = () => {
-  renderer.setSize(window.innerWidth, window.innerHeight);
-};
-
-window.addEventListener('resize', resize);
+import './elements/three-renderer';
+import './elements/three-scene';
+import './elements/three-camera';
+import './elements/three-controls';
+import './elements/map-scene';
+
+@customElement('perspective-app')
+class PerspectiveApp extends LitElement {
+  constructor() {
+    super();
+
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+  }
+
+  static getStyles() {
+    return css`
+      :host {
+        height: 100%;
+        width: 100%;
+      }
+    `;
+  }
+
+  @property({ type: Number, attribute: false })
+  width = window.innerWidth;
+
+  @property({ type: Number, attribute: false })
+  height = window.innerHeight;
+
+  render = () => html`<three-renderer clear-color="red" width="${this.width}" height="${this.height}">
+            <three-scene>
+              <map-scene map="Music"><map-scene>
+            </three-scene>
+            <three-camera></three-camera>
+            <three-controls></three-controls>
+    </three-renderer>`
+}

package.json

@@ -31,6 +31,7 @@
     "@babel/cli": "^7.10.4",
     "@babel/core": "^7.10.4",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@typescript-eslint/eslint-plugin": "^3.5.0",
@@ -55,6 +56,7 @@
     "nodemon": "^2.0.4",
     "pm2": "^4.4.0",
     "three": "^0.118.3",
+    "lit-element": "^2.3.1",
     "ts-node": "^8.10.2",
     "tsc": "^1.20150623.0"
   },

public/css/main.css

@@ -261,3 +261,8 @@ textarea {
   }
 }
 
+
+html, body {
+  min-height: 100%;
+  height: 100%;
+}

public/index.html

@@ -1,2 +1,2 @@
-<!doctype html><html class="no-js" lang=""><head><meta charset="utf-8"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:title" content=""><meta property="og:type" content=""><meta property="og:url" content=""><meta property="og:image" content=""><link rel="manifest" href="site.webmanifest"><link rel="apple-touch-icon" href="icon.png"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/main.css"><meta name="theme-color" content="#fafafa"></head><body><script src="js/vendor/modernizr-3.11.2.min.js"></script><script src="js/plugins.js"></script><script src="js/main.js"></script><script>window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+<!doctype html><html class="no-js" lang=""><head><meta charset="utf-8"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:title" content=""><meta property="og:type" content=""><meta property="og:url" content=""><meta property="og:image" content=""><link rel="manifest" href="site.webmanifest"><link rel="apple-touch-icon" href="icon.png"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/main.css"><meta name="theme-color" content="#fafafa"></head><body><perspective-app></perspective-app><script>window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
     ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')</script><script src="https://www.google-analytics.com/analytics.js" async></script></body></html>

tsconfig.json

@@ -59,7 +59,7 @@
     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
     /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */