@pb33f/cowboy-components 0.2.0 → 0.2.2

package/dist/components/visualizer/explorer.js

@@ -0,0 +1,296 @@
+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, svg } from "lit";
+import visualizerCss from "./visualizer.css";
+import { Direction } from "./visualizer";
+import { NodeComponent } from "./node";
+import { OperationGraphNode } from "./operation";
+import { curveBundle, line } from "d3-shape";
+import ELK from "elkjs/lib/elk.bundled";
+let ExplorerComponent = class ExplorerComponent extends LitElement {
+    constructor() {
+        super();
+        this.nodeComponents = [];
+        this.scale = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.elk = new ELK();
+        this.ready = false;
+        this.direction = Direction.RIGHT;
+        this.nodeMap = new Map();
+        const targets = new Map();
+    }
+    mouseMove(evt) {
+        if (this.grabbed) {
+            this.translateX = evt.clientX - this.startX;
+            this.translateY = evt.clientY - this.startY;
+            this.svgGroup.style.transform = `scale(${this.scale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+        }
+    }
+    mouseDown(evt) {
+        this.grabbed = true;
+        this.startX = evt.clientX - this.translateX;
+        this.startY = evt.clientY - this.translateY;
+    }
+    mouseUp() {
+        this.grabbed = false;
+    }
+    onWheel(evt) {
+        evt.preventDefault();
+        //@ts-ignore
+        const delta = evt.deltaY || evt.deltaX;
+        const scaleStep = Math.abs(delta) < 50
+            ? 0.05 // touchpad pitch
+            : 0.25; // mouse wheel
+        const scaleDelta = delta < 0 ? scaleStep : -scaleStep;
+        const nextScale = this.scale + scaleDelta; // 'scale' is prev scale
+        // calc fixedPoint
+        const fixedPoint = { x: evt.clientX, y: evt.clientY };
+        this.scale = nextScale;
+        if (nextScale < 0.25) {
+            this.scale = 0.25;
+            return;
+        }
+        // if (nextScale > 5) {
+        //     this.scale = 5;
+        //     return
+        // }
+        const mouseX = evt.clientX;
+        const mouseY = evt.clientY;
+        const svgRect = this.svgItem.getBoundingClientRect();
+        const offsetX = mouseX - svgRect.left;
+        const offsetY = mouseY - svgRect.top;
+        this.svgGroup.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+        this.svgGroup.style.transform = `scale(${nextScale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+    }
+    buildLayout() {
+        this.elk.layout(this.graph, {
+            layoutOptions: {
+                'algorithm': 'layered'
+            },
+            logging: true,
+            measureExecutionTime: true
+        }).then(this.readyGo.bind(this));
+    }
+    buildGraph() {
+        const graph = {
+            id: "root",
+            layoutOptions: this.generateOptions(),
+            children: this.nodes,
+            edges: this.edges
+        };
+        this.graph = graph;
+        // build node map
+        this.nodeMap.clear();
+        this.nodes.forEach((node) => {
+            this.nodeMap.set(node.nodePath, node);
+        });
+        this.buildLayout();
+        return graph;
+    }
+    readyGo() {
+        this.ready = true;
+        this.requestUpdate();
+    }
+    reset() {
+        this.scale = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.svgGroup.style.transform = `scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`;
+    }
+    zoomIn() {
+        const nextScale = this.scale + 0.25; // 'scale' is prev scale
+        this.scale = nextScale;
+        this.svgGroup.style.transform = `scale(${nextScale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+    }
+    zoomOut() {
+        const nextScale = this.scale - 0.25; // 'scale' is prev scale
+        this.scale = nextScale;
+        this.svgGroup.style.transform = `scale(${nextScale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+    }
+    generateOptions() {
+        return {
+            'spacing.nodeNodeBetweenLayers': 40,
+            'spacing.nodeNode': 40,
+            'elk.nodeLabels.placement': 'INSIDE V_CENTER H_RIGHT',
+            'elk.algorithm': 'org.eclipse.elk.layered',
+            'elk.direction': this.direction,
+            'org.eclipse.elk.edgeRouting': 'ORTHOGONAL',
+            'elk.layered.unnecessaryBendpoints': 'true',
+            'elk.layered.spacing.edgeNodeBetweenLayers': 30,
+            'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+            'org.eclipse.elk.layered.cycleBreaking.strategy': 'DEPTH_FIRST',
+            'nodePlacement.strategy': 'BRANDES_KOEPF',
+            'org.eclipse.elk.spacing.edgeLabel': '0',
+            'org.eclipse.elk.spacing.edgeNode': '24',
+            'org.eclipse.elk.layered.edgeLabels.sideSelection': 'ALWAYS_UP',
+            'org.eclipse.elk.spacing.portPort': '10',
+        };
+    }
+    render() {
+        if (!this.ready) {
+            return html ``;
+        }
+        const nodes = this.graph.children?.map((child) => {
+            const nc = new NodeComponent();
+            nc.id = child.idHash;
+            if (child.x && child.y) {
+                nc.x = child.x;
+                nc.y = child.y;
+            }
+            nc.width = child.width;
+            nc.height = child.height;
+            // if (child.expanded) {
+            //     nc.visible = child.expanded;
+            // } else {
+            //debugger
+            let expanded = false;
+            // check if any of the edges have a target of this node, and then check
+            // if any of the source nodes are expanded
+            this.edges?.forEach((edge) => {
+                if (edge.targets.includes(child.id)) {
+                    edge.sources.forEach((source) => {
+                        const node = this.nodes.find((n) => n.id === source);
+                        if (node?.expanded) {
+                            expanded = true;
+                        }
+                    });
+                }
+            });
+            nc.visible = expanded;
+            // }
+            const op = new OperationGraphNode();
+            op.height = child.height - 2;
+            op.width = child.width - 2;
+            op.id = child.idHash;
+            op.label = child.label;
+            if (child.active) {
+                op.active = child.active;
+                nc.active = child.active;
+            }
+            nc.body = op;
+            this.nodeComponents.push(nc);
+            return nc.render();
+        });
+        const edges = this.graph.edges?.map((edge) => {
+            let x = 0;
+            const sections = edge.sections?.map((section) => {
+                // check if any of the targets for the edge are visible, if not, don't render the edge
+                let visible = false;
+                edge.targets.forEach((target) => {
+                    const node = this.nodes.find((n) => n.id === target);
+                    if (node?.expanded) {
+                        visible = true;
+                    }
+                    this.nodeComponents.forEach((nc) => {
+                        if (nc.visible && nc.id === target) {
+                            console.log(nc.id);
+                            visible = true;
+                        }
+                    });
+                });
+                // if (!visible) {
+                //     return svg``
+                // }
+                const points = section ? [section.startPoint, ...(section.bendPoints || []), section.endPoint] : [];
+                let pathFn = line().x((d) => d.x).y((d) => d.y);
+                pathFn = pathFn.curve(curveBundle.beta(1));
+                const lines = svg `
+                     <path id="edge-${edge.id}-${x}" 
+                        d="${pathFn(points)}" 
+                        class="edge ${edge.ref.length > 0 ? 'ref' : ''} ${edge.poly && edge.poly != '' ? edge.poly : ''}" 
+                        marker-end="url(#${edge.ref.length > 0 ? edge.poly ? 'arrow-poly' : 'arrow-ref' : 'arrow'})"/>`;
+                x++;
+                return lines;
+            });
+            return sections;
+        });
+        let base = 600;
+        let offset = 0;
+        this.graph.children.forEach(() => {
+            base += 5;
+            offset += 20;
+        });
+        if (offset > 900) {
+            offset = 900;
+        }
+        return svg `
+        <svg width="100%" height="100%" viewBox="${offset} 80 ${base} ${base}"
+                             @wheel="${this.onWheel}"
+                             @mousedown="${this.mouseDown}"
+                             @mouseup="${this.mouseUp}"
+                             @mousemove="${this.mouseMove}"
+                             @mouseout="${this.mouseUp}"
+                        >
+                            <defs>
+                             <filter id="glow">
+      <!-- First, apply a Gaussian blur -->
+      <feGaussianBlur stdDeviation="4.5" result="coloredBlur"/>
+      <!-- Then, apply a merge filter to add the blur effect back with the original graphic -->
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+                                <marker
+                                        id="arrow"
+                                        viewBox="0 0 12 12"
+                                        refX="8"
+                                        refY="5"
+                                        markerWidth="5"
+                                        markerHeight="5"
+                                        fill="var(--secondary-color)"
+                                        orient="auto-start-reverse">
+                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
+                                </marker>
+                                <marker
+                                        id="arrow-ref"
+                                        viewBox="0 0 12 12"
+                                        refX="8"
+                                        refY="5"
+                                        markerWidth="5"
+                                        markerHeight="5"
+                                        fill="var(--terminal-text)"
+                                        orient="auto-start-reverse">
+                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
+                                </marker>
+                                <marker
+                                        id="arrow-poly"
+                                        viewBox="0 0 12 12"
+                                        refX="8"
+                                        refY="5"
+                                        markerWidth="5"
+                                        markerHeight="5"
+                                        fill="var(--terminal-yellow)"
+                                        orient="auto-start-reverse">
+                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
+                                </marker>
+
+                            </defs>
+                            <g id="#svgGroup">
+                                ${nodes}
+                                ${edges}
+                            </g>
+                        </svg>
+        `;
+    }
+};
+ExplorerComponent.styles = [visualizerCss];
+__decorate([
+    query('svg')
+], ExplorerComponent.prototype, "svgItem", void 0);
+__decorate([
+    query('svg > g')
+], ExplorerComponent.prototype, "svgGroup", void 0);
+__decorate([
+    state()
+], ExplorerComponent.prototype, "ready", void 0);
+ExplorerComponent = __decorate([
+    customElement('pb33f-explorer')
+], ExplorerComponent);
+export { ExplorerComponent };

package/dist/components/visualizer/node.d.ts

@@ -0,0 +1,11 @@
+export declare class NodeComponent {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    body: any;
+    visible: boolean;
+    active: boolean | undefined;
+    render(): import("lit-html").TemplateResult<2>;
+}

package/dist/components/visualizer/node.js

@@ -0,0 +1,27 @@
+import { svg } from "lit";
+export class NodeComponent {
+    render() {
+        // if (!this.visible) {
+        //     return svg``;
+        // }
+        let body = "";
+        if (this.body) {
+            body = this.body;
+        }
+        else {
+            body = "Object Node";
+        }
+        // <!--<text x="${this.x + 6}" y="${this.y + 26}" class="text">${body}</text> -->
+        return svg `
+              <rect id="node-${this.id}" x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height}" class="node"/>
+                
+                <foreignObject x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height + 20}" class="fo">
+    <div xmlns="http://www.w3.org/1999/xhtml" class="node-body" style="height: ${this.height}px; width: ${this.width}px;">
+      ${body} 
+    </div>
+  </foreignObject>
+                
+                
+        `;
+    }
+}

package/dist/components/visualizer/operation.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/visualizer/operation.css.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+export default css `
+    
+    .operation-node {
+        border: 1px solid var(--primary-color);
+    }
+    
+    .operation-node:hover {
+        cursor: pointer;
+        border: 1px solid var(--secondary-color);
+    }
+
+    .operation-node:active {
+        cursor: pointer;
+        border: 1px solid var(--warn-color);
+    }
+    
+    .active {
+        border: 2px solid var(--error-color);
+        animation: pulse-animation 2.5s infinite
+    }
+
+    .operation-node.active:hover {
+        cursor: pointer;
+        border: 2px solid var(--error-color);
+    }
+ 
+    @keyframes pulse-animation {
+        0% {
+            box-shadow: 0 0 0 0 var(--error-color);
+        }
+        100% {
+            box-shadow: 0 0  30px 30px rgb(0, 0, 0, 0);
+        }
+    }
+
+    @keyframes dashdraw {
+        0% {
+            stroke-dashoffset: 10;
+        }
+    }
+    
+    .active-icon {
+        position: absolute;
+        right: calc(50% - 10px);
+        bottom: -8px;
+        font-size: 1.5rem;
+        color: var(--error-color);
+    }
+    
+
+
+`;

package/dist/components/visualizer/operation.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+export declare class OperationGraphNode extends LitElement {
+    static styles: import("lit").CSSResult[];
+    width: number;
+    height: number;
+    id: string;
+    label: string;
+    active: boolean;
+    constructor();
+    clicked(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/visualizer/operation.js

@@ -0,0 +1,52 @@
+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, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import operationCss from "./operation.css.js";
+import { ExplorerNodeClicked } from "../../events/doctor";
+let OperationGraphNode = class OperationGraphNode extends LitElement {
+    constructor() {
+        super();
+    }
+    clicked() {
+        this.dispatchEvent(new CustomEvent(ExplorerNodeClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                nodeHashId: this.id
+            }
+        }));
+    }
+    render() {
+        return html `
+            <div class="operation-node ${this.active ? 'active' : ''}" style="height: ${this.height}px; width: ${this.width - 2}px" @click="${this.clicked}">
+               <sl-icon name="code-slash"></sl-icon> ${this.label}
+               ${this.active ? html `<sl-icon name="arrow-up" class="active-icon"></sl-icon>` : html ``}  
+            </div>
+        `;
+    }
+};
+OperationGraphNode.styles = [operationCss];
+__decorate([
+    property({ type: Number })
+], OperationGraphNode.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], OperationGraphNode.prototype, "height", void 0);
+__decorate([
+    property()
+], OperationGraphNode.prototype, "id", void 0);
+__decorate([
+    property()
+], OperationGraphNode.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], OperationGraphNode.prototype, "active", void 0);
+OperationGraphNode = __decorate([
+    customElement('pb33f-operation-graphnode')
+], OperationGraphNode);
+export { OperationGraphNode };

package/dist/components/visualizer/visualizer.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/visualizer/visualizer.css.js

@@ -0,0 +1,157 @@
+import { css } from 'lit';
+export default css `
+    :host {
+        display: block;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+
+    .visualizer {
+        display: flex;
+    }
+
+    .explorer {
+        width: 75%;
+        height: 100%;
+    }
+
+    .model {
+        width: 25%;
+        height: 814px;
+        overflow: auto;
+        margin-top: 20px;
+    }
+
+    .model > .tree {
+        height: 300px;
+        overflow-y: auto;
+    }
+
+    .model > .renderer {
+        height: 492px;
+        margin-left: 10px;
+        border: 1px solid var(--primary-color);
+        padding: 10px;
+        overflow-y: auto;
+    }
+
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .svg-container {
+        border: 1px solid var(--primary-color);
+        width: 100%;
+        height: 800px;
+    }
+
+    .svg-container:active {
+        cursor: move;
+    }
+
+    .node {
+        fill: var(--background-color);
+        transition: opacity 0.3s;
+        animation: fadeIn 1s;
+    }
+
+    .node:hover {
+        cursor: pointer;
+        stroke: var(--warn-color);
+    }
+
+    .node:active {
+        cursor: pointer;
+        stroke: var(--secondary-color);
+    }
+
+    .fo {
+        transition: opacity 0.3s;
+        animation: fadeIn 1s;
+    }
+
+    .text {
+        font-size: 1.3rem;
+        fill: var(--primary-color);
+        font-family: var(--font-stack), monospace;
+        animation: fadeIn 1.5s;
+    }
+
+    .text:hover {
+        cursor: pointer;
+        fill: var(--warn-color);
+    }
+
+    .text:active {
+        cursor: pointer;
+        stroke: var(--secondary-color);
+    }
+
+    .glow {
+        filter: url(#glow);
+    }
+
+    .node-body {
+        font-size: 0.9rem;
+
+    }
+
+    //.arrow {
+    //    stroke: var(--primary-color);
+    //    stroke-width: 2;
+    //    fill: none;
+    //    animation: fadeIn 1s;
+    //}
+
+    .edge {
+        stroke-dasharray: 5;
+        stroke-width: 2;
+        stroke: var(--secondary-color);
+        animation: fadeIn 3s, dashdraw 1500ms linear infinite;
+        fill: none;
+    }
+
+    .ref {
+        stroke-dasharray: 1 5;
+        stroke-width: 2;
+        stroke-miterlimit: 1;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+        stroke: var(--terminal-text);
+        animation: dashdraw-fast 1200ms linear infinite;
+    }
+
+    .allOf, .oneOf, .anyOf {
+        stroke: var(--terminal-yellow);
+    }
+
+
+    @keyframes dashdraw {
+        from {
+            stroke-dashoffset: 10;
+        }
+    }
+
+    @keyframes dashdraw-fast {
+        from {
+            stroke-dashoffset: 30;
+        }
+    }
+
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+
+
+
+`;

package/dist/components/visualizer/visualizer.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from "lit";
+import { NodeComponent } from "./node";
+import { ModelTree } from "../model-tree/tree";
+import { NodeClickedEvent } from "../../events/doctor";
+import { RenderedNodeComponent } from "../model-renderer/rendered-node";
+import { ExplorerComponent } from "./explorer";
+export declare enum Direction {
+    UP = "UP",
+    DOWN = "DOWN",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export declare class Node {
+    id: string;
+    idHash: string;
+    nodePath: string;
+    parentId: string;
+    hash?: string;
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    expanded?: boolean;
+    treeExpanded?: boolean;
+    active?: boolean;
+    instance: any;
+    label: string;
+    nodes: Node[];
+    line: number;
+    type: string;
+}
+export declare class Edge {
+    id: string;
+    sources: string[];
+    targets: string[];
+    sections?: any[];
+    visible?: boolean;
+    ref: string;
+    poly?: string;
+}
+export declare class Visualizer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    ready: boolean;
+    svgContainer: HTMLElement;
+    direction: Direction;
+    private grabbed;
+    private grabbedNode;
+    nodeComponents: NodeComponent[];
+    scale: number;
+    renderedNode: RenderedNodeComponent;
+    nodeMap: Map<string, Node>;
+    renderedNodeMap: Map<string, Node>;
+    modelTree: ModelTree;
+    explorer: ExplorerComponent;
+    constructor();
+    explorerNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    rotate(): void;
+    modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}