@isopodlabs/vscode_utils 0.1.1 → 0.2.0

package/dist/webview/shared.d.ts

@@ -0,0 +1,42 @@
+export declare const vscode: {
+    postMessage: (message: any) => void;
+    getState: () => any;
+    setState: (state: any) => void;
+};
+export declare function createElement<K extends keyof HTMLElementTagNameMap>(tag: K, options: Record<string, unknown>): HTMLElement;
+export declare function getFirstText(element: Element): string | undefined;
+export declare class Pool<T extends Element> {
+    private make;
+    private pool;
+    constructor(make: () => T);
+    get(): T;
+    discard(item: T): void;
+    discardElement(item: T): void;
+}
+export declare class Splitter {
+    private readonly splitter;
+    constructor(splitter: HTMLElement, notify: (split: number) => void);
+    set(x: number): void;
+}
+interface Container {
+    clientOffset: number;
+    clientPixels: number;
+    clientSize: number;
+    scrollOffset: number;
+    scrollSize: number;
+}
+export declare class ScrollBar {
+    horizontal: boolean;
+    container: any;
+    thumb: HTMLElement;
+    thumbSize: number;
+    constructor(parent: HTMLElement, container: Container | HTMLElement, horizontal: boolean);
+    update(): void;
+    setScroll(scroll: number): void;
+    setThumbSize(size: number): void;
+    setThumb(scroll: number): void;
+    setThumbPixel(pos: number): void;
+}
+export declare function template(template: HTMLElement, parent: HTMLElement, values: Record<string, string>[]): void;
+export declare function generateSelector(e: Node | null): string;
+export {};

package/dist/webview/shared.js

@@ -0,0 +1,288 @@
+"use strict";
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollBar = exports.Splitter = exports.Pool = exports.vscode = void 0;
+exports.createElement = createElement;
+exports.getFirstText = getFirstText;
+exports.template = template;
+exports.generateSelector = generateSelector;
+console.log("Hello from shared.ts!");
+exports.vscode = acquireVsCodeApi();
+//fix up icons in attributes
+document.querySelectorAll('[icon]').forEach(element => {
+    const value = element.getAttribute('icon');
+    if (value && value.includes('/')) {
+        element.removeAttribute('icon');
+        element.classList.add('icon');
+        element.style.setProperty('--icon', `url(${value})`);
+    }
+    const col = element.getAttribute('color');
+    if (col) {
+        element.removeAttribute('color');
+        element.style.setProperty('--icon-color', col);
+    }
+});
+document.querySelectorAll('.select').forEach(item => {
+    item.addEventListener('click', event => {
+        if (event.target === item) {
+            exports.vscode.postMessage({
+                command: 'select',
+                selector: generateSelector(item),
+                text: item.textContent,
+                ...item.dataset
+            });
+            event.stopPropagation();
+        }
+    });
+});
+function createElement(tag, options) {
+    const e = document.createElement(tag);
+    if (options) {
+        for (const [k, v] of Object.entries(options))
+            e[k] = v;
+    }
+    return e;
+}
+function getFirstText(element) {
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let i = 0; i < element.childNodes.length; i++) {
+        const node = element.childNodes[i];
+        if (isText(node)) {
+            const text = node.textContent?.trim();
+            if (text)
+                return text;
+        }
+    }
+}
+class Pool {
+    make;
+    pool = [];
+    constructor(make) {
+        this.make = make;
+    }
+    get() {
+        if (this.pool.length === 0)
+            this.pool.push(this.make());
+        return this.pool.length === 1
+            ? this.pool[0].cloneNode(true)
+            : this.pool.pop();
+    }
+    discard(item) {
+        this.pool.push(item);
+    }
+    discardElement(item) {
+        this.discard(item);
+        item.remove();
+    }
+}
+exports.Pool = Pool;
+//-------------------------------------
+// splitter
+//-------------------------------------
+class Splitter {
+    splitter;
+    constructor(splitter, notify) {
+        this.splitter = splitter;
+        splitter.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            splitter.setPointerCapture(e.pointerId);
+            const left = splitter.previousSibling;
+            const style = getComputedStyle(left);
+            let split = left.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+            const offset = split - e.clientX;
+            const min = parseFloat(style.minWidth);
+            const max = Math.min(parseFloat(style.maxWidth), splitter.parentElement?.clientWidth ?? 0 - 300);
+            left.style.width = `${split}px`;
+            left.style.flex = 'none';
+            function resizePanels(e) {
+                split = Math.min(Math.max(e.clientX + offset, min), max);
+                left.style.width = `${split}px`;
+            }
+            function stopResizing(e) {
+                notify(split);
+                //state.split = split;
+                //vscode.setState(state);
+                splitter.releasePointerCapture(e.pointerId);
+                document.removeEventListener('pointermove', resizePanels);
+                document.removeEventListener('pointerup', stopResizing);
+            }
+            document.addEventListener('pointermove', resizePanels);
+            document.addEventListener('pointerup', stopResizing);
+        });
+    }
+    set(x) {
+        const left = this.splitter.previousSibling;
+        left.style.width = `${x}px`;
+        left.style.flex = 'none';
+    }
+}
+exports.Splitter = Splitter;
+function VScrollContainer(container, offset = 0) {
+    return {
+        clientOffset: Math.max(container.clientTop, 0) + offset,
+        get clientPixels() { return container.clientHeight - offset; },
+        get clientSize() { return container.clientHeight - offset; },
+        get scrollOffset() { return container.scrollTop; },
+        get scrollSize() { return container.scrollHeight; },
+        set scrollOffset(x) { container.scrollTop = x; },
+    };
+}
+function HScrollContainer(container, offset = 0) {
+    return {
+        clientOffset: Math.max(container.clientLeft, 0) + offset,
+        get clientPixels() { return container.clientWidth - offset; },
+        get clientSize() { return container.clientWidth - offset; },
+        get scrollOffset() { return container.scrollLeft; },
+        get scrollSize() { return container.scrollWidth; },
+        set scrollOffset(x) { container.scrollLeft = x; },
+    };
+}
+class ScrollBar {
+    horizontal;
+    container;
+    thumb;
+    thumbSize = 0;
+    constructor(parent, container, horizontal) {
+        this.horizontal = horizontal;
+        const thumb = this.thumb = createElement('div', { className: horizontal ? 'hscrollbar' : 'vscrollbar' });
+        parent.appendChild(thumb);
+        this.container = container instanceof HTMLElement
+            ? horizontal ? HScrollContainer(container) : VScrollContainer(container)
+            : container;
+        this.update();
+        thumb.addEventListener("lostpointercapture", (e) => thumb.dispatchEvent(new MouseEvent('mouseup', e)));
+        thumb.addEventListener('pointerdown', event => {
+            console.log('down');
+            const pointerOffset = horizontal ? thumb.offsetLeft - event.clientX : thumb.offsetTop - event.clientY;
+            thumb.classList.add('active');
+            const onPointerMove = (event) => {
+                this.setThumbPixel(pointerOffset + (horizontal ? event.clientX : event.clientY));
+            };
+            const onPointerUp = () => {
+                console.log('up');
+                thumb.classList.remove('active');
+                window.removeEventListener('pointermove', onPointerMove);
+                window.removeEventListener('pointerup', onPointerUp);
+            };
+            if (thumb.setPointerCapture)
+                thumb.setPointerCapture(event.pointerId);
+            window.addEventListener('pointermove', onPointerMove);
+            window.addEventListener('pointerup', onPointerUp);
+        });
+    }
+    update() {
+        this.setThumb(this.container.scrollOffset);
+    }
+    setScroll(scroll) {
+        this.container.scrollOffset = scroll;
+        this.setThumb(scroll);
+    }
+    setThumbSize(size) {
+        if (size != this.thumbSize) {
+            this.thumbSize = size;
+            if (this.horizontal)
+                this.thumb.style.width = `${size}px`;
+            else
+                this.thumb.style.height = `${size}px`;
+        }
+    }
+    setThumb(scroll) {
+        const clientPixels = this.container.clientPixels;
+        const clientSize = this.container.clientSize;
+        const scrollSize = this.container.scrollSize;
+        const clientOffset = this.container.clientOffset;
+        let thumbPos, thumbSize;
+        if (clientSize >= scrollSize) {
+            this.thumb.classList.add('invisible');
+            thumbSize = scrollSize;
+            thumbPos = clientOffset;
+        }
+        else {
+            this.thumb.classList.remove('invisible');
+            thumbSize = Math.max(clientPixels * clientSize / scrollSize, 20);
+            thumbPos = clientOffset + scroll * (clientPixels - thumbSize) / (scrollSize - clientSize);
+        }
+        this.setThumbSize(thumbSize);
+        if (this.horizontal)
+            this.thumb.style.left = `${thumbPos}px`;
+        else
+            this.thumb.style.top = `${thumbPos}px`;
+    }
+    setThumbPixel(pos) {
+        const clientPixels = this.container.clientPixels;
+        const clientSize = this.container.clientSize;
+        const scrollSize = this.container.scrollSize;
+        const clientOffset = this.container.clientOffset;
+        const thumbPos = Math.min(Math.max(pos, clientOffset), clientOffset + clientPixels - this.thumbSize);
+        const scroll = (thumbPos - clientOffset) * (scrollSize - clientSize) / (clientPixels - this.thumbSize);
+        this.container.scrollOffset = scroll;
+        if (this.horizontal) {
+            this.thumb.style.left = `${thumbPos}px`;
+        }
+        else {
+            this.thumb.style.top = `${thumbPos}px`;
+        }
+    }
+}
+exports.ScrollBar = ScrollBar;
+let resizeTimeout;
+window.addEventListener('resize', () => {
+    document.documentElement.classList.add('resizing');
+    clearTimeout(resizeTimeout);
+    resizeTimeout = window.setTimeout(() => document.documentElement.classList.remove('resizing'), 500);
+});
+//-------------------------------------
+// template
+//-------------------------------------
+function replace(text, re, process) {
+    let i = 0;
+    let result = '';
+    for (let m; (m = re.exec(text)); i = re.lastIndex)
+        result += text.substring(i, m.index) + process(m);
+    return result + text.substring(i);
+}
+function isElement(n) { return n.nodeType === window.Node.ELEMENT_NODE; }
+function isText(n) { return n.nodeType === window.Node.TEXT_NODE; }
+function replace_in_element(e, re, process) {
+    if (e.id)
+        e.id = replace(e.id, re, process);
+    const name = e.attributes.getNamedItem('name');
+    if (name)
+        name.value = replace(name.value, re, process);
+    const childNodes = e.childNodes;
+    for (const node of childNodes) {
+        if (isText(node) && node.textContent)
+            node.textContent = replace(node.textContent, re, process);
+        else if (isElement(node))
+            replace_in_element(node, re, process);
+    }
+}
+function template(template, parent, values) {
+    const newnodes = values.map(i => {
+        const child = template.cloneNode(true);
+        child.hidden = false;
+        replace_in_element(child, /\$\((.*)\)/g, m => i[m[1]]);
+        return child;
+    });
+    //	const parent = after.parentNode;
+    //	const before = after.nextSibling;
+    const before = null;
+    for (const i of newnodes)
+        parent.insertBefore(i, before);
+}
+function generateSelector(e) {
+    const path = [];
+    while (e && isElement(e)) {
+        let index = 1;
+        for (let s = e; (s = s.previousElementSibling);) {
+            if (s.tagName === e.tagName)
+                index++;
+        }
+        //const selector = e.tagName.toLowerCase() + (index > 1 ? `:nth-of-type(${index})` : '');
+        const selector = `${e.tagName.toLowerCase()}:nth-of-type(${index})`;
+        path.unshift(selector);
+        e = e.parentNode;
+    }
+    return path.join(' > ');
+}

package/dist/webview/tree.d.ts

@@ -0,0 +1,12 @@
+export declare class Tree {
+    root: HTMLElement;
+    constructor(root: HTMLElement, notify: (caret: Element, down: boolean) => void);
+    open(element: Element): void;
+    close(element: Element): void;
+    close_all(): void;
+    all_open(): string[];
+    reveal(element: Element): void;
+    lastStuck(): HTMLElement | undefined;
+}
+export declare function lastStuck(tree?: HTMLElement): HTMLElement | undefined;
+export declare function updateStuck(): void;

package/dist/webview/tree.js

@@ -0,0 +1,80 @@
+"use strict";
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+exports.lastStuck = lastStuck;
+exports.updateStuck = updateStuck;
+const shared_1 = require("./shared");
+class Tree {
+    root;
+    constructor(root, notify) {
+        this.root = root;
+        this.root = root;
+        root.querySelectorAll('.caret').forEach(caret => {
+            caret.addEventListener('click', event => {
+                if (event.target === caret) {
+                    caret.classList.toggle('caret-down');
+                    notify(caret, caret.classList.contains('caret-down'));
+                    event.stopPropagation();
+                }
+            });
+        });
+    }
+    open(element) {
+        element?.classList.add('caret-down');
+    }
+    close(element) {
+        element?.classList.remove('caret-down');
+    }
+    close_all() {
+        this.root.querySelectorAll('.caret-down').forEach(e => e.classList.remove('caret-down'));
+    }
+    all_open() {
+        return Array.from(this.root.querySelectorAll('.caret-down'), element => (0, shared_1.generateSelector)(element));
+    }
+    reveal(element) {
+        if (element) {
+            for (let parent = element.parentNode; parent; parent = parent.parentNode) {
+                const p = parent;
+                if (p.classList?.contains('caret'))
+                    p.classList.add('caret-down');
+            }
+            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+    lastStuck() {
+        return lastStuck(this.root);
+    }
+}
+exports.Tree = Tree;
+function lastStuck(tree) {
+    let last_stuck;
+    if (tree) {
+        const x = tree.clientWidth - 20;
+        let y = 5;
+        for (;;) {
+            const e = document.elementFromPoint(x, y);
+            if (!e || getComputedStyle(e).getPropertyValue('position') != 'sticky')
+                break;
+            const bottom = e.getBoundingClientRect().bottom;
+            const next = e.nextElementSibling;
+            if (next?.getBoundingClientRect().top >= bottom)
+                break;
+            last_stuck = e;
+            y = bottom + 5;
+        }
+    }
+    return last_stuck;
+}
+let prev_stuck;
+function updateStuck() {
+    const last_stuck = lastStuck(document.querySelector('.tree'));
+    if (last_stuck !== prev_stuck) {
+        if (prev_stuck)
+            prev_stuck.classList.remove('stuck');
+        if (last_stuck)
+            last_stuck.classList.add('stuck');
+        prev_stuck = last_stuck;
+    }
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@isopodlabs/vscode_utils",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "vscode utilities",
   "exports": {
     "./fs": "./dist/fs.js",
     "./debug": "./dist/debug.js",
     "./icon-theme": "./dist/icon-theme.js",
-    "./jsx-runtime": "./dist/jsx-runtime.js"
+    "./jsx-runtime": "./dist/jsx-runtime.js",
+    "./webview": "./dist/webview/shared.js"
   },
   "files": [
     "dist",
@@ -14,7 +15,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "compile": "tsc",
     "test": "echo \"No tests specified\" && exit 0"
   },
   "keywords": [