@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/visualizer/search.js

@@ -15,9 +15,7 @@ import { ModelTreeNodeClicked } from "../../events/doctor.js";
 let SearchControlsComponent = class SearchControlsComponent extends LitElement {
     constructor() {
         super();
-        this.searchWorker = new SearchWorker();
-        this.results = [];
-        this.searchWorker.addEventListener("message", (event) => {
+        this.handleWorkerMessage = (event) => {
             if (event.data.nodes) {
                 this.results = event.data.nodes;
             }
@@ -26,11 +24,21 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
             for (let node of this.results) {
                 this.unlightItem(node.id);
             }
-        });
+        };
+        this.searchWorker = new SearchWorker();
+        this.results = [];
+        this.searchWorker.addEventListener("message", this.handleWorkerMessage);
         this.currentSearch = '';
         this.activeNodeIndex = -1;
         this.activeNodeId = '';
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.searchWorker) {
+            this.searchWorker.removeEventListener("message", this.handleWorkerMessage);
+            this.searchWorker.terminate();
+        }
+    }
     disableSearchPanel() {
         this.searchActive = false;
         if (this.searchInput)
@@ -45,7 +53,7 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
         this.searchActive = true;
         this.currentSearch = this.searchInput.value;
         if (this.graphResponse.nodes) {
-            this.searchWorker.postMessage({ searchGraph: this.graphResponse, searchKeyword: this.currentSearch, objects: this.currentObjects });
+            this.searchWorker.postMessage({ searchGraph: this.graphResponse, searchKeyword: this.currentSearch });
         }
     }
     highlightItem(id) {
@@ -62,12 +70,7 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
         const modelIcon = this.shadowRoot?.getElementById('model_icon_' + id);
         const result = this.shadowRoot?.getElementById(id);
         if (modelIcon) {
-            if (modelIcon.dataset['filter'] === 'true') {
-                modelIcon.color = IconColor.filtered;
-            }
-            else {
-                modelIcon.color = IconColor.secondary;
-            }
+            modelIcon.color = IconColor.secondary;
         }
         if (result) {
             result.classList.remove('search-result-active');
@@ -130,10 +133,10 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
     render() {
         return html `
             <div class="control">
-                <sl-input class="search-input" placeholder="Search OpenAPI Graph" size="small"
+                <sl-input class="search-input" placeholder="SEARCH OPENAPI GRAPH" size="small"
                           @sl-input="${this.inputChanged}" @keydown="${this.keyboardControls}">
-                    <sl-icon name="search" slot="prefix"></sl-icon>
-                    <sl-icon-button @click=${this.disableSearchPanel} name="x-lg" slot="suffix"
+                    <sl-icon name="search" slot="prefix" aria-hidden="true"></sl-icon>
+                    <sl-icon-button @click=${this.disableSearchPanel} name="x-lg" label="Close search" slot="suffix"
                                     style="${this.searchActive ? 'display: block' : 'display: none'}"></sl-icon-button>
                 </sl-input>
             </div>
@@ -150,28 +153,18 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
                 label = node.searchMatch;
             }
             let labelValue = html `${label}`;
-            let color = '';
-            if (node.filtered) {
-                color = IconColor.filtered;
-            }
-            else {
-                color = IconColor.secondary;
-            }
             return html `
-                            <div id="${node.id}" 
-                                 class="search-result" 
+                            <div id="${node.id}"
+                                 class="search-result"
                                  @mouseenter="${() => this.highlightItem(node.id)}"
                                  @mouseleave="${() => this.unlightItem(node.id)}"
                                  @click="${() => this.selectResult(node)}">
-                                <pb33f-model-icon id="model_icon_${node.id}" icon="${node.type}" color="${color}"
-                                                  size="small" data-filter=${node.filtered}></pb33f-model-icon>
-                                ${labelValue} ${node.filtered ? html `<sl-icon name="eye-slash" 
-                                                                             style="vertical-align: middle;"></sl-icon>` : ''}
-                                
+                                <pb33f-model-icon id="model_icon_${node.id}" icon="${node.type}" color="${IconColor.secondary}"
+                                                  size="small"></pb33f-model-icon>
+                                ${labelValue}
                                 ${(node.searchKey) ? html `<span style="color: var(--font-color-sub2)">
                                         (${node.searchKey}${(node.keyLine) ?
                 html `<span style="color: var(--font-color-sub2)">:${node.keyLine}</span>` : ``})</span>` : ``}
-                                
                             </div>`;
         })}
                 ${this.results.length == 0 ? html `<div class="search-result-empty">No results found for '<span style="color: var(--secondary-color)">${this.currentSearch}</span>'</div>` : ``}

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

@@ -12,6 +12,7 @@ export default css `
     }
     
     .node {
+        position: relative;
         border-left: 2px solid var(--primary-color);
         border-right: 2px solid var(--primary-color);
         border-right: 2px solid var(--primary-color);
@@ -20,7 +21,8 @@ export default css `
     }
     
     .node.active {
-        border-bottom: 8px solid var(--warn-400);
+        border-bottom: 3px solid var(--warn-400);
+        box-shadow: 0 3px 0 0 var(--warn-400);
     }
 
     .ref {
@@ -57,7 +59,19 @@ export default css `
         font-size: 1.5rem;
         color: var(--warn-400);
     }
-    
+
+    .pov-icon {
+        position: absolute;
+        bottom: -8px;
+        left: 2px;
+        font-size: 16px;
+        color: var(--primary-color);
+    }
+
+    .pov-icon:hover {
+        color: var(--secondary-color);
+    }
+
     .rendered-element {
         overflow: hidden;
         border: 1px solid var(--primary-color);
@@ -79,7 +93,8 @@ export default css `
     .header {
         color: var(--font-color);
         font-family: var(--font-stack-bold), monospace;
-        text-align: center;
+        text-align: left;
+        padding-left: 25px;
         border-bottom: 1px solid var(--primary-color);
     }
     
@@ -101,7 +116,37 @@ export default css `
         padding-top: 2px;
         display: flex;
     }
-    
+
+    .load-more-btn {
+        align-items: center;
+        gap: 2px;
+        cursor: pointer;
+        color: var(--primary-color);
+        font-size: 11px;
+        position: absolute;
+        right: 0;
+        bottom: -28px;
+    }
+
+    .load-more-btn:hover {
+        color: var(--secondary-color);
+    }
+
+    .load-more-btn sl-icon {
+        font-size: 14px;
+        vertical-align: bottom;
+        margin-right: 3px;
+    }
+
+    .single-line .active-icon,
+    .single-line .pov-icon {
+        bottom: -35px;
+    }
+
+    .single-line .vacuum-results {
+        bottom: -25px;
+    }
+
    .header-node {
        color: var(--font-color);
        font-family: var(--font-stack), monospace;
@@ -116,6 +161,9 @@ export default css `
     .header-text {
         flex-grow: 3;
         text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .dependent-node {
@@ -124,24 +172,13 @@ export default css `
 
     .array-type {
         position: absolute;
-        bottom: 14px;
-        right: -1px;
-        font-size: 0.7rem;
-        color: var(--font-color-sub1);
-    }
-
-    .active > .array-type {
-        bottom: 6px
-    }
-    
-    .array-type {
-        position: absolute;
-        bottom: 14px;
-        right: -1px;
+        bottom: -19px;
+        right: -5px;
         font-size: 0.7rem;
         color: var(--font-color-sub1);
     }
     
+
     .chevron {
         color: var(--secondary-color);
     }

package/dist/components/visualizer/templates/svg-markers.d.ts

@@ -0,0 +1,2 @@
+import { SVGTemplateResult } from 'lit';
+export declare function renderSvgMarkers(): SVGTemplateResult;

package/dist/components/visualizer/templates/svg-markers.js

@@ -0,0 +1,73 @@
+import { svg } from 'lit';
+export function renderSvgMarkers() {
+    return svg `
+        <defs>
+            <marker
+                id="leaf"
+                viewBox="0 0 6 12"
+                refX="3"
+                refY="3"
+                markerWidth="6"
+                markerHeight="12"
+                fill="var(--primary-color)"
+                orient="auto">
+                <rect x="0" y="0" width="3" height="6"/>
+            </marker>
+            <marker
+                id="leaf-poly"
+                viewBox="0 0 6 12"
+                refX="3"
+                refY="3"
+                markerWidth="6"
+                markerHeight="12"
+                fill="var(--warn-color)"
+                orient="auto">
+                <rect x="0" y="0" width="3" height="6"/>
+            </marker>
+            <marker
+                id="leaf-ref"
+                viewBox="0 0 6 12"
+                refX="3"
+                refY="3"
+                markerWidth="6"
+                markerHeight="12"
+                fill="var(--terminal-text)"
+                orient="auto">
+                <rect x="0" y="0" width="3" height="6"/>
+            </marker>
+            <marker
+                id="arrow"
+                viewBox="0 0 12 12"
+                refX="9"
+                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"/>
+            </marker>
+            <marker
+                id="arrow-ref"
+                viewBox="0 0 12 12"
+                refX="9"
+                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"/>
+            </marker>
+            <marker
+                id="arrow-poly"
+                viewBox="0 0 12 12"
+                refX="9"
+                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>
+    `;
+}

package/dist/components/waiting-line/waiting-line.css.d.ts

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

package/dist/components/waiting-line/waiting-line.css.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+export default css `
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+        background: var(--background-color);
+    }
+
+    .fallback {
+        height: 100%;
+        background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+        opacity: 0.3;
+        animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% { opacity: 0.2; }
+        50% { opacity: 0.5; }
+    }
+`;

package/dist/components/waiting-line/waiting-line.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class WaitingLine extends LitElement {
+    static styles: import("lit").CSSResult[];
+    height: number;
+    canvas: HTMLCanvasElement;
+    private webglSupported;
+    private gl;
+    private program;
+    private animationId;
+    private startTime;
+    private uniformLocations;
+    private observer;
+    private colors;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(_changedProperties: PropertyValues): void;
+    private initWebGL;
+    private handleResize;
+    private setupShader;
+    private compileShader;
+    private isLightMode;
+    private updateColorsFromCSS;
+    private parseColor;
+    private resizeCanvas;
+    private renderFrame;
+    private startAnimation;
+    private stopAnimation;
+    private cleanup;
+    render(): import("lit-html").TemplateResult<1>;
+}