@pb33f/cowboy-components 0.2.0 → 0.2.2

package/dist/components/visualizer/visualizer.js

@@ -0,0 +1,137 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, query, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import visualizerCss from "./visualizer.css.js";
+import { ModelService } from "../../services/model-service";
+import { ModelTree } from "../model-tree/tree";
+import { ExplorerNodeClicked, ModelTreeNodeClicked } from "../../events/doctor";
+import { RenderedNodeComponent } from "../model-renderer/rendered-node";
+import { ExplorerComponent } from "./explorer";
+export var Direction;
+(function (Direction) {
+    Direction["UP"] = "UP";
+    Direction["DOWN"] = "DOWN";
+    Direction["LEFT"] = "LEFT";
+    Direction["RIGHT"] = "RIGHT";
+})(Direction || (Direction = {}));
+export class Node {
+}
+export class Edge {
+}
+let Visualizer = class Visualizer extends LitElement {
+    constructor() {
+        super();
+        this.nodeComponents = [];
+        this.scale = 1;
+        this.direction = Direction.RIGHT;
+        this.renderedNode = new RenderedNodeComponent();
+        this.nodeMap = new Map();
+        this.renderedNodeMap = new Map();
+        const targets = new Map();
+        this.modelTree = new ModelTree();
+        this.explorer = new ExplorerComponent();
+        // @ts-ignore
+        this.modelTree.addEventListener(ModelTreeNodeClicked, this.modelTreeNodeClicked.bind(this));
+        ModelService.doctorEndpoint = 'http://localhost:9090';
+        ModelService.createGraph().then((result) => {
+            this.modelTree.node = result.nodes[0];
+            this.explorer.nodes = result.nodes;
+            this.explorer.edges = result.edges;
+            this.explorer.models = result.nodesRendered;
+            for (let i = 0; i < result.nodesRendered.length; i++) {
+                this.renderedNodeMap.set(result.nodesRendered[i].idHash, result.nodesRendered[i]);
+            }
+            this.explorer.buildGraph();
+            this.explorer.buildLayout();
+        });
+        // @ts-ignore
+        this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
+    }
+    explorerNodeClicked(evt) {
+        this.explorer.nodes.forEach((node) => {
+            if (node.idHash === evt.detail.nodeHashId) {
+                const renderedNode = this.renderedNodeMap.get(node.idHash);
+                if (renderedNode) {
+                    this.renderedNode.node = renderedNode;
+                }
+                node.active = true;
+            }
+            else {
+                node.active = false;
+            }
+        });
+        this.modelTree.explorerClicked(evt.detail.nodeHashId);
+        this.explorer.requestUpdate();
+    }
+    rotate() {
+        switch (this.direction) {
+            case Direction.UP:
+                this.explorer.direction = Direction.RIGHT;
+                break;
+            case Direction.RIGHT:
+                this.explorer.direction = Direction.DOWN;
+                break;
+            case Direction.DOWN:
+                this.explorer.direction = Direction.LEFT;
+                break;
+            case Direction.LEFT:
+                this.explorer.direction = Direction.UP;
+                break;
+        }
+        this.explorer.buildGraph();
+    }
+    modelTreeNodeClicked(evt) {
+        this.explorer.nodes.forEach((node) => {
+            if (node.idHash === evt.detail.nodeHashId.replaceAll('model-', '')) {
+                // lookup rendered node
+                const renderedNode = this.renderedNodeMap.get(node.idHash);
+                if (renderedNode) {
+                    this.renderedNode.node = renderedNode;
+                }
+                node.active = true;
+            }
+            else {
+                node.active = false;
+            }
+        });
+        this.explorer.requestUpdate();
+    }
+    render() {
+        return html `
+            <div class="visualizer">
+                <div class="explorer">
+                    <sl-icon-button name="arrow-90deg-right" @click="${this.rotate}"></sl-icon-button>
+                    <sl-icon-button name="zoom-in" @click="${this.explorer.zoomIn}"></sl-icon-button>
+                    <sl-icon-button name="zoom-out" @click="${this.explorer.zoomOut}"></sl-icon-button>
+                    <sl-icon-button name="arrow-clockwise" @click="${this.explorer.reset}"></sl-icon-button>
+                    <div class="svg-container">
+                        ${this.explorer}
+                    </div>
+                </div>
+                <div class="model">
+                    <div class="tree">
+                        ${this.modelTree}
+                    </div>
+                    <div class="renderer">
+                        ${this.renderedNode}
+                </div>
+            </div>
+        `;
+    }
+};
+Visualizer.styles = [visualizerCss];
+__decorate([
+    state()
+], Visualizer.prototype, "ready", void 0);
+__decorate([
+    query('.svg-container')
+], Visualizer.prototype, "svgContainer", void 0);
+Visualizer = __decorate([
+    customElement("pb33f-visualizer")
+], Visualizer);
+export { Visualizer };

package/dist/cowboy-components.d.ts

@@ -15,6 +15,7 @@ import './components/attention-box/attention-box.js';
 import './components/render-operation-path/render-operation-path.js';
 import './components/render-json-path/render-json-path.js';
 import './components/footer/footer.js';
+import './components/visualizer/visualizer.js';
 import './components/problem-list/problem-list.js';
 import './components/problem-list/problem-item.js';
 import './components/the-doctor/the-doctor.js';

package/dist/cowboy-components.js

@@ -15,6 +15,8 @@ import './components/attention-box/attention-box.js';
 import './components/render-operation-path/render-operation-path.js';
 import './components/render-json-path/render-json-path.js';
 import './components/footer/footer.js';
+// visualizer
+import './components/visualizer/visualizer.js';
 // problems
 import './components/problem-list/problem-list.js';
 import './components/problem-list/problem-item.js';