added al-graph-editor

Author: edsilv

README.md

@@ -24,7 +24,7 @@ It can be used to display GLTF and DICOM files. GLTF can be used in conjunction
 
 Aleph is highly componentised, using a combination of reusable [A-Frame components](https://aframe.io/docs/0.9.0/core/component.html) and [StencilJS Web Components](https://stenciljs.com/docs/decorators).
 
-[Redux](https://redux.js.org) is used to manage state, with A-Frame custom elements being rendered reactively.
+[Redux](https://redux.js.org) is used to manage state, with A-Frame custom elements rendered reactively.
 
 ### A-Frame Components
 
@@ -36,8 +36,8 @@ Aleph is highly componentised, using a combination of reusable [A-Frame componen
   - [al-edge](/src/aframe/components/AlEdgeComponent.ts)
   - [al-fixed-to-orbit-camera](/src/aframe/components/AlFixedToOrbitCamera.ts)
   - [al-gltf-model](/src/aframe/components/AlGltfModelComponent.ts)
-  - [al-node](/src/aframe/components/AlNodeComponent.ts)
   - [al-node-spawner](/src/aframe/components/AlNodeSpawnerComponent.ts)
+  - [al-node](/src/aframe/components/AlNodeComponent.ts)
   - [al-orbit-control](/src/aframe/components/AlOrbitControlComponent.ts)
   - [al-render-order](/src/aframe/components/AlRenderOrderComponent.ts)
   - [al-render-overlaid](/src/aframe/components/AlRenderOverlaidComponent.ts)
@@ -57,6 +57,8 @@ Aleph is highly componentised, using a combination of reusable [A-Frame componen
   - [al-url-picker](/src/components/al-url-picker/readme.md)
   - [al-viewer](/src/components/al-viewer/readme.md)
 
+The two top-level components are `al-control-panel` and `al-viewer`. `al-control-panel` wraps up the tabs-based interface containing `al-url-picker`, `al-settings`, `al-graph-editor`, and `al-console`. `al-viewer` contains the A-Frame scene and all 3D rendering logic. It also contains the Redux store and acts as single source of truth. `al-viewer` can be used without `al-control-panel`, which provides additional options. 
+
 ## Example
 
 https://aframe-viewer.com

src/aframe/index.ts

@@ -1,6 +1,6 @@
 import "./components/AlAngleComponent";
 import "./components/AlBackgroundComponent";
-import "./components/AlBillboard";
+import "./components/AlBillboardComponent";
 import "./components/AlBoundingBoxComponent";
 import "./components/AlCursorComponent";
 import "./components/AlEdgeComponent";

src/components.d.ts

@@ -61,6 +61,13 @@ export namespace Components {
   interface AlEdgeEditor {
     'edge': [string, AlEdge];
   }
+  interface AlGraphEditor {
+    'angles': Map<string, AlAngle> | null;
+    'edges': Map<string, AlEdge> | null;
+    'node': [string, AlNode];
+    'nodes': Map<string, AlNode> | null;
+    'selected': string | null;
+  }
   interface AlNodeEditor {
     'node': [string, AlNode];
   }
@@ -167,6 +174,12 @@ declare global {
     new (): HTMLAlEdgeEditorElement;
   };
 
+  interface HTMLAlGraphEditorElement extends Components.AlGraphEditor, HTMLStencilElement {}
+  var HTMLAlGraphEditorElement: {
+    prototype: HTMLAlGraphEditorElement;
+    new (): HTMLAlGraphEditorElement;
+  };
+
   interface HTMLAlNodeEditorElement extends Components.AlNodeEditor, HTMLStencilElement {}
   var HTMLAlNodeEditorElement: {
     prototype: HTMLAlNodeEditorElement;
@@ -207,6 +220,7 @@ declare global {
     'al-console': HTMLAlConsoleElement;
     'al-control-panel': HTMLAlControlPanelElement;
     'al-edge-editor': HTMLAlEdgeEditorElement;
+    'al-graph-editor': HTMLAlGraphEditorElement;
     'al-node-editor': HTMLAlNodeEditorElement;
     'al-node-list': HTMLAlNodeListElement;
     'al-settings': HTMLAlSettingsElement;
@@ -250,6 +264,13 @@ declare namespace LocalJSX {
     'onDeleteEdge'?: (event: CustomEvent<any>) => void;
     'onSaveEdge'?: (event: CustomEvent<any>) => void;
   }
+  interface AlGraphEditor extends JSXBase.HTMLAttributes<HTMLAlGraphEditorElement> {
+    'angles'?: Map<string, AlAngle> | null;
+    'edges'?: Map<string, AlEdge> | null;
+    'node'?: [string, AlNode];
+    'nodes'?: Map<string, AlNode> | null;
+    'selected'?: string | null;
+  }
   interface AlNodeEditor extends JSXBase.HTMLAttributes<HTMLAlNodeEditorElement> {
     'node'?: [string, AlNode];
     'onDeleteNode'?: (event: CustomEvent<any>) => void;
@@ -329,6 +350,7 @@ declare namespace LocalJSX {
     'al-console': AlConsole;
     'al-control-panel': AlControlPanel;
     'al-edge-editor': AlEdgeEditor;
+    'al-graph-editor': AlGraphEditor;
     'al-node-editor': AlNodeEditor;
     'al-node-list': AlNodeList;
     'al-settings': AlSettings;

src/components/al-angle-editor/readme.md

@@ -24,12 +24,12 @@
 
 ### Used by
 
- - [al-control-panel](..\al-control-panel)
+ - [al-graph-editor](..\al-graph-editor)
 
 ### Graph
 ```mermaid
 graph TD;
-  al-control-panel --> al-angle-editor
+  al-graph-editor --> al-angle-editor
   style al-angle-editor fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/al-control-panel/al-control-panel.tsx

@@ -47,36 +47,6 @@ export class AlSettings {
     return "";
   }
 
-  private _getSelectedNode(): [string, AlNode] | null {
-    if (this.selected && this.nodes) {
-      const n = this.nodes.get(this.selected);
-      if (n) {
-        return [this.selected, n];
-      }
-    }
-    return null;
-  }
-
-  private _getSelectedEdge(): [string, AlEdge] | null {
-    if (this.selected && this.edges) {
-      const e = this.edges.get(this.selected);
-      if (e) {
-        return [this.selected, e];
-      }
-    }
-    return null;
-  }
-
-  private _getSelectedAngle(): [string, AlAngle] | null {
-    if (this.selected && this.angles) {
-      const a = this.angles.get(this.selected);
-      if (a) {
-        return [this.selected, a];
-      }
-    }
-    return null;
-  }
-
   public render() {
     const tabContentHeight: string =
       this.tabContentHeight || this.el.parentElement.clientHeight + "px";
@@ -126,16 +96,7 @@ export class AlSettings {
           {this.graphTabEnabled ? (
             <ion-tab tab="graph">
               <Scroll height={tabContentHeight}>
-                <al-node-list
-                  nodes={this.nodes}
-                  selected={this.selected}
-                ></al-node-list>
-                <ion-item-divider></ion-item-divider>
-                <al-node-editor node={this._getSelectedNode()}></al-node-editor>
-                <al-edge-editor edge={this._getSelectedEdge()}></al-edge-editor>
-                <al-angle-editor
-                  angle={this._getSelectedAngle()}
-                ></al-angle-editor>
+                <al-graph-editor selected={this.selected} nodes={this.nodes} angles={this.angles} edges={this.edges}></al-graph-editor>
               </Scroll>
             </ion-tab>
           ) : null}

src/components/al-control-panel/readme.md

@@ -33,10 +33,7 @@
 - [al-tabs](..\al-tabs)
 - [al-url-picker](..\al-url-picker)
 - [al-settings](..\al-settings)
-- [al-node-list](..\al-node-list)
-- [al-node-editor](..\al-node-editor)
-- [al-edge-editor](..\al-edge-editor)
-- [al-angle-editor](..\al-angle-editor)
+- [al-graph-editor](..\al-graph-editor)
 - [al-console](..\al-console)
 
 ### Graph
@@ -45,11 +42,12 @@ graph TD;
   al-control-panel --> al-tabs
   al-control-panel --> al-url-picker
   al-control-panel --> al-settings
-  al-control-panel --> al-node-list
-  al-control-panel --> al-node-editor
-  al-control-panel --> al-edge-editor
-  al-control-panel --> al-angle-editor
+  al-control-panel --> al-graph-editor
   al-control-panel --> al-console
+  al-graph-editor --> al-node-list
+  al-graph-editor --> al-node-editor
+  al-graph-editor --> al-edge-editor
+  al-graph-editor --> al-angle-editor
   style al-control-panel fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/al-edge-editor/readme.md

@@ -24,12 +24,12 @@
 
 ### Used by
 
- - [al-control-panel](..\al-control-panel)
+ - [al-graph-editor](..\al-graph-editor)
 
 ### Graph
 ```mermaid
 graph TD;
-  al-control-panel --> al-edge-editor
+  al-graph-editor --> al-edge-editor
   style al-edge-editor fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/al-graph-editor/al-graph-editor.css

@@ -0,0 +1,61 @@
+import { Component, h, Prop } from "@stencil/core";
+import { AlAngle, AlEdge, AlNode } from "../../interfaces";
+
+@Component({
+  tag: "al-graph-editor",
+  styleUrl: "al-graph-editor.css",
+  shadow: true
+})
+export class AlGraphEditor {
+
+  @Prop({ mutable: true }) public node: [string, AlNode];
+  @Prop({ mutable: true }) public nodes: Map<string, AlNode> | null = null;
+  @Prop({ mutable: true }) public angles: Map<string, AlAngle> | null = null;
+  @Prop({ mutable: true }) public edges: Map<string, AlEdge> | null = null;
+  @Prop({ mutable: true }) public selected: string | null = null;
+
+  private _getSelectedNode(): [string, AlNode] | null {
+    if (this.selected && this.nodes) {
+      const n = this.nodes.get(this.selected);
+      if (n) {
+        return [this.selected, n];
+      }
+    }
+    return null;
+  }
+
+  private _getSelectedEdge(): [string, AlEdge] | null {
+    if (this.selected && this.edges) {
+      const e = this.edges.get(this.selected);
+      if (e) {
+        return [this.selected, e];
+      }
+    }
+    return null;
+  }
+
+  private _getSelectedAngle(): [string, AlAngle] | null {
+    if (this.selected && this.angles) {
+      const a = this.angles.get(this.selected);
+      if (a) {
+        return [this.selected, a];
+      }
+    }
+    return null;
+  }
+
+  public render() {
+    return [
+      <al-node-list
+        nodes={this.nodes}
+        selected={this.selected}
+      ></al-node-list>,
+      <ion-item-divider></ion-item-divider>,
+      <al-node-editor node={this._getSelectedNode()}></al-node-editor>,
+      <al-edge-editor edge={this._getSelectedEdge()}></al-edge-editor>,
+      <al-angle-editor
+        angle={this._getSelectedAngle()}
+      ></al-angle-editor>
+    ];
+  }
+}

src/components/al-graph-editor/al-graph-editor.tsx

@@ -0,0 +1,45 @@
+# al-graph-editor
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description | Type                   | Default     |
+| ---------- | ---------- | ----------- | ---------------------- | ----------- |
+| `angles`   | --         |             | `Map<string, AlAngle>` | `null`      |
+| `edges`    | --         |             | `Map<string, AlEdge>`  | `null`      |
+| `node`     | --         |             | `[string, AlNode]`     | `undefined` |
+| `nodes`    | --         |             | `Map<string, AlNode>`  | `null`      |
+| `selected` | `selected` |             | `string`               | `null`      |
+
+
+## Dependencies
+
+### Used by
+
+ - [al-control-panel](..\al-control-panel)
+
+### Depends on
+
+- [al-node-list](..\al-node-list)
+- [al-node-editor](..\al-node-editor)
+- [al-edge-editor](..\al-edge-editor)
+- [al-angle-editor](..\al-angle-editor)
+
+### Graph
+```mermaid
+graph TD;
+  al-graph-editor --> al-node-list
+  al-graph-editor --> al-node-editor
+  al-graph-editor --> al-edge-editor
+  al-graph-editor --> al-angle-editor
+  al-control-panel --> al-graph-editor
+  style al-graph-editor fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/al-graph-editor/readme.md

@@ -24,12 +24,12 @@
 
 ### Used by
 
- - [al-control-panel](..\al-control-panel)
+ - [al-graph-editor](..\al-graph-editor)
 
 ### Graph
 ```mermaid
 graph TD;
-  al-control-panel --> al-node-editor
+  al-graph-editor --> al-node-editor
   style al-node-editor fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/al-node-editor/readme.md

@@ -24,12 +24,12 @@
 
 ### Used by
 
- - [al-control-panel](..\al-control-panel)
+ - [al-graph-editor](..\al-graph-editor)
 
 ### Graph
 ```mermaid
 graph TD;
-  al-control-panel --> al-node-list
+  al-graph-editor --> al-node-list
   style al-node-list fill:#f9f,stroke:#333,stroke-width:4px
 ```