@kispace-io/core 0.7.0

package/src/parts/k-contextmenu.ts

@@ -0,0 +1,245 @@
+import {css, html, nothing} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
+import {KElement} from "./k-element";
+import {
+    CommandContribution,
+    Contribution,
+    ContributionChangeEvent,
+    contributionRegistry,
+    HTMLContribution,
+    TOPIC_CONTRIBUTEIONS_CHANGED
+} from "../core/contributionregistry";
+import {Signal} from '@lit-labs/signals';
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import {subscribe} from "../core/events";
+import {createRef, ref} from "lit/directives/ref.js";
+
+@customElement('k-contextmenu')
+export class KContextMenu extends KElement {
+    @property({type: Boolean, attribute: 'is-editor'})
+    private isEditor: boolean = false;
+
+    @property({attribute: false})
+    public partContextMenuRenderer?: () => any = undefined;
+
+    @state()
+    private contributions: Contribution[] = [];
+
+    @state()
+    private isOpen: boolean = false;
+
+    @state()
+    private position: { x: number, y: number } = { x: 0, y: 0 };
+
+    private anchorRef = createRef<HTMLElement>();
+    private dropdownRef = createRef<HTMLElement>();
+
+    protected doBeforeUI() {
+        const id = this.getAttribute("id");
+        if (id) {
+            this.loadContributions(id);
+        }
+        
+        subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event: ContributionChangeEvent) => {
+            if (!id) return;
+            
+            const shouldReload = this.matchesTarget(id, event.target);
+            if (shouldReload) {
+                this.loadContributions(id);
+                this.requestUpdate();
+            }
+        });
+    }
+
+
+    private matchesTarget(id: string, target: string): boolean {
+        if (target === id) return true;
+        
+        if (!id.includes(':')) return false;
+        
+        const [prefix] = id.split(':');
+        if (target === `${prefix}:*`) return true;
+        
+        const targetParts = target.split(':');
+        if (targetParts.length === 2) {
+            const categoryToken = targetParts[1];
+            if (categoryToken === 'system.editors' || categoryToken === '.system.editors') {
+                return this.isEditor && id.startsWith(`${prefix}:`);
+            }
+        }
+        
+        return false;
+    }
+
+    private loadContributions(id: string) {
+        const specific = contributionRegistry.getContributions(id);
+        
+        if (!id.includes(':')) {
+            this.contributions = specific;
+            return;
+        }
+        
+        const [prefix] = id.split(':');
+        const wildcardId = `${prefix}:*`;
+        const wildcard = contributionRegistry.getContributions(wildcardId);
+        
+        const categoryMatches: Contribution[] = [];
+        
+        if (this.isEditor) {
+            const allCategories = ['system.editors', '.system.editors'];
+            for (const category of allCategories) {
+                const categoryId = `${prefix}:${category}`;
+                const matches = contributionRegistry.getContributions(categoryId);
+                categoryMatches.push(...matches);
+            }
+        }
+        
+        this.contributions = [...wildcard, ...categoryMatches, ...specific];
+    }
+
+    /**
+     * Gets the element at the given point, traversing shadow DOM boundaries recursively.
+     * This is necessary because elementFromPoint() doesn't penetrate shadow roots.
+     */
+    private getElementFromPoint(x: number, y: number): Element | null {
+        let element: Element | null = document.elementFromPoint(x, y);
+        if (!element) return null;
+
+        // Recursively traverse shadow DOM boundaries
+        while (element) {
+            const shadowRoot = (element as any).shadowRoot as ShadowRoot | undefined;
+            if (shadowRoot) {
+                const shadowElement: Element | null = shadowRoot.elementFromPoint(x, y);
+                if (shadowElement && shadowElement !== element) {
+                    element = shadowElement;
+                    continue;
+                }
+            }
+            break;
+        }
+
+        return element;
+    }
+
+    /**
+     * Triggers a click on the element under the cursor to update selection before showing context menu.
+     */
+    private triggerClickUnderCursor(mouseEvent: MouseEvent): void {
+        const elementUnderCursor = this.getElementFromPoint(mouseEvent.clientX, mouseEvent.clientY);
+        if (elementUnderCursor) {
+            const clickEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+                clientX: mouseEvent.clientX,
+                clientY: mouseEvent.clientY,
+                screenX: mouseEvent.screenX,
+                screenY: mouseEvent.screenY,
+                button: 0,
+                buttons: 0,
+                detail: 1,
+                which: 1
+            });
+            elementUnderCursor.dispatchEvent(clickEvent);
+        }
+    }
+
+    public show(position: { x: number, y: number }, mouseEvent?: MouseEvent) {
+        // Trigger click before showing context menu to update selection
+        if (mouseEvent) {
+            this.triggerClickUnderCursor(mouseEvent);
+        }
+        
+        this.position = position;
+        this.isOpen = true;
+    }
+
+    private onClose() {
+        this.isOpen = false;
+    }
+
+    private handleCommandClick(commandId: string, params?: Record<string, any>) {
+        return async () => {
+            this.executeCommand(commandId, params || {});
+        };
+    }
+
+    private renderContribution(contribution: Contribution) {
+        if ("command" in contribution) {
+            const commandContribution = contribution as CommandContribution;
+            return html`
+                <wa-dropdown-item 
+                    @click=${this.handleCommandClick(commandContribution.command, commandContribution.params)}
+                    ?disabled="${(commandContribution.disabled as Signal.Computed<boolean>)?.get()}">
+                    ${commandContribution.icon ? html`<wa-icon slot="icon" name=${commandContribution.icon}></wa-icon>` : ''}
+                    ${commandContribution.label}
+                </wa-dropdown-item>
+            `;
+        } else if ("html" in contribution) {
+            const contents = (contribution as HTMLContribution).html;
+            if (contents instanceof Function) {
+                return contents();
+            }
+            return unsafeHTML(contents);
+        }
+        return nothing;
+    }
+
+    render() {
+        if (!this.isOpen) return nothing;
+
+        const partContent = this.partContextMenuRenderer ? this.partContextMenuRenderer() : nothing;
+
+        return html`
+            <wa-dropdown 
+                ${ref(this.dropdownRef)}
+                ?open=${this.isOpen}
+                @wa-after-hide=${this.onClose}
+                placement="bottom-start"
+                distance="0">
+                
+                <div 
+                    slot="trigger"
+                    ${ref(this.anchorRef)}
+                    style="position: fixed; 
+                           left: ${this.position.x}px; 
+                           top: ${this.position.y}px; 
+                           width: 1px; 
+                           height: 1px; 
+                           pointer-events: none;">
+                </div>
+                
+                ${partContent}
+                ${this.contributions.map(c => this.renderContribution(c))}
+            </wa-dropdown>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+            z-index: 10000;
+        }
+
+        wa-dropdown {
+            pointer-events: auto;
+            min-width: 200px;
+        }
+        
+        wa-dropdown::part(panel) {
+            min-width: 200px;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-contextmenu': KContextMenu
+    }
+}
+

package/src/parts/k-dialog-content.ts

@@ -0,0 +1,31 @@
+import { html, TemplateResult, css } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+import { KElement } from "./k-element";
+
+export abstract class KDialogContent extends KElement {
+    static styles = [
+        css`
+            .dialog-message {
+                margin-bottom: 0.5rem;
+                color: var(--wa-color-text-normal);
+            }
+        `
+    ];
+
+    dispose(): void | Promise<void> {
+    }
+
+    getResult(): any {
+        return undefined;
+    }
+
+    protected renderMessage(message: string, markdown: boolean = false): TemplateResult {
+        if (markdown) {
+            const htmlContent = marked.parse(message, { async: false }) as string;
+            return html`<div class="dialog-message" style="white-space: normal;">${unsafeHTML(htmlContent)}</div>`;
+        }
+        return html`<div class="dialog-message" style="white-space: pre-line;">${message}</div>`;
+    }
+}
+

package/src/parts/k-element.ts

@@ -0,0 +1,100 @@
+import {KWidget} from "../widgets/k-widget";
+import {appSettings} from "../core/settingsservice";
+
+export abstract class KElement extends KWidget {
+    /**
+     * Unique settings key for this element, used for persisting dialog settings.
+     * Automatically initialized on first access via getDialogSetting() or setDialogSetting().
+     */
+    private settingsKey: string | null = null;
+
+    /**
+     * Builds a unique DOM tree path for this element.
+     * Uses id attribute if available, otherwise builds a path based on tag names and indices.
+     * Useful for generating unique settings keys.
+     * 
+     * @returns A string representing the DOM path, or null if path cannot be determined
+     */
+    private buildDOMTreePath(): string | null {
+        const pathParts: string[] = [];
+        let current: HTMLElement | null = this;
+        
+        while (current && current !== document.body && current !== document.documentElement) {
+            const id = current.getAttribute("id");
+            if (id) {
+                pathParts.unshift(`#${id}`);
+                break;
+            }
+            
+            const tagName = current.tagName.toLowerCase();
+            const parent: HTMLElement | null = current.parentElement;
+            
+            if (!parent) {
+                break;
+            }
+            
+            const siblings = Array.from(parent.children).filter(
+                (child: Element) => child.tagName.toLowerCase() === tagName
+            ) as HTMLElement[];
+            const index = siblings.indexOf(current);
+            
+            if (index >= 0) {
+                pathParts.unshift(`${tagName}:${index}`);
+            } else {
+                pathParts.unshift(tagName);
+            }
+            
+            current = parent;
+        }
+        
+        return pathParts.length > 0 ? pathParts.join(" > ") : null;
+    }
+
+    /**
+     * Initializes the settings key for this element using the element's tag name.
+     * Called automatically on first access via getDialogSetting() or setDialogSetting().
+     */
+    private initializeSettingsKey(): void {
+        if (!this.settingsKey) {
+            const prefix = this.tagName.toLowerCase();
+            const id = this.getAttribute("id");
+            if (id) {
+                this.settingsKey = `${prefix}:${id}`;
+                return;
+            }
+            
+            const path = this.buildDOMTreePath();
+            if (path) {
+                this.settingsKey = `${prefix}:${path}`;
+            }
+        }
+    }
+
+    /**
+     * Gets a dialog setting value for this element.
+     * Automatically initializes the settings key on first access if not already set.
+     * 
+     * @returns The persisted setting value, or undefined if not found
+     */
+    protected async getDialogSetting(): Promise<any> {
+        this.initializeSettingsKey();
+        if (!this.settingsKey) {
+            return undefined;
+        }
+        return await appSettings.getDialogSetting(this.settingsKey);
+    }
+
+    /**
+     * Saves a dialog setting value for this element.
+     * Automatically initializes the settings key on first access if not already set.
+     * 
+     * @param value - The value to persist
+     */
+    protected async setDialogSetting(value: any): Promise<void> {
+        this.initializeSettingsKey();
+        if (!this.settingsKey) {
+            return;
+        }
+        await appSettings.setDialogSetting(this.settingsKey, value);
+    }
+}

package/src/parts/k-part.ts

@@ -0,0 +1,158 @@
+import {KContainer} from "./k-container";
+import {property} from "lit/decorators.js";
+import {PropertyValues, TemplateResult, nothing} from "lit";
+import {partDirtySignal, activePartSignal} from "../core/appstate";
+import {CommandStack} from "../core/commandregistry";
+import {TabContribution} from "../core/contributionregistry";
+
+export abstract class KPart extends KContainer {
+    @property()
+    private dirty: boolean = false
+
+    public tabContribution?: TabContribution;
+    
+    public isEditor: boolean = false;
+
+    protected commandStack?: CommandStack;
+
+    public getCommandStack(): CommandStack | undefined {
+        return this.commandStack;
+    }
+
+    /**
+     * Override this method to provide toolbar content for this part.
+     * This is a lightweight alternative to registering toolbar contributions
+     * for actions that are scoped to this part instance.
+     * 
+     * IMPORTANT: Event handlers MUST use arrow functions to preserve the component's 'this' context.
+     * The toolbar template is rendered in a different component (k-toolbar), so direct method 
+     * references lose their binding.
+     * 
+     * ✅ Correct:
+     *   @click=${() => this.myMethod()}
+     *   @click=${(e) => this.handleClick(e)}
+     * 
+     * ❌ Wrong (this will be bound to the toolbar, not your component):
+     *   @click=${this.myMethod}
+     * 
+     * Example:
+     * ```typescript
+     * protected renderToolbar() {
+     *     return html`
+     *         <wa-button @click=${() => this.save()} title="Save">
+     *             <wa-icon name="save"></wa-icon>
+     *         </wa-button>
+     *     `;
+     * }
+     * ```
+     * 
+     * @returns TemplateResult with toolbar items, or nothing if no toolbar needed
+     */
+    protected renderToolbar(): TemplateResult | typeof nothing {
+        return nothing;
+    }
+
+    /**
+     * Call this method to update the toolbar when the component's state changes.
+     * This triggers a re-render of the toolbar with the latest content from renderToolbar().
+     */
+    protected updateToolbar(): void {
+        this.dispatchEvent(new CustomEvent('part-toolbar-changed', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    /**
+     * Override this method to provide context menu content for this part.
+     * This is a lightweight alternative to registering context menu contributions
+     * for actions that are scoped to this part instance.
+     * 
+     * IMPORTANT: Event handlers MUST use arrow functions to preserve the component's 'this' context.
+     * The context menu is rendered in a different component (k-contextmenu), so direct method 
+     * references lose their binding.
+     * 
+     * ✅ Correct:
+     *   @click=${() => this.myMethod()}
+     *   @click=${(e) => this.handleClick(e)}
+     * 
+     * ❌ Wrong (this will be bound to the context menu, not your component):
+     *   @click=${this.myMethod}
+     * 
+     * Example:
+     * ```typescript
+     * protected renderContextMenu() {
+     *     return html`
+     *         <wa-dropdown-item @click=${() => this.open()}>
+     *             <wa-icon name="folder-open"></wa-icon>
+     *             Open
+     *         </wa-dropdown-item>
+     *         <wa-divider></wa-divider>
+     *         <wa-dropdown-item @click=${() => this.delete()}>
+     *             <wa-icon name="trash"></wa-icon>
+     *             Delete
+     *         </wa-dropdown-item>
+     *     `;
+     * }
+     * ```
+     * 
+     * @returns TemplateResult with context menu items, or nothing if no context menu needed
+     */
+    protected renderContextMenu(): TemplateResult | typeof nothing {
+        return nothing;
+    }
+
+    /**
+     * Call this method to update the context menu when the component's state changes.
+     * This triggers a re-render of the context menu with the latest content from renderContextMenu().
+     */
+    protected updateContextMenu(): void {
+        this.dispatchEvent(new CustomEvent('part-contextmenu-changed', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    protected updated(_changedProperties: PropertyValues) {
+        super.updated(_changedProperties);
+
+        if (_changedProperties.has("dirty")) {
+            const dirty = _changedProperties.get("dirty")
+            if (dirty !== undefined) {
+                this.dispatchEvent(new CustomEvent("dirty", {detail: this.dirty, bubbles: true}))
+            }
+        }
+    }
+
+    protected doClose() {
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Don't automatically close when disconnected - the element might just be moving
+        // Call close() explicitly when actually closing the part
+    }
+
+    public close() {
+        this.doClose()
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    save() {
+    }
+
+    public isDirty() {
+        return this.dirty
+    }
+
+    public markDirty(dirty: boolean) {
+        this.dirty = dirty
+        partDirtySignal.set(null as unknown as KPart)
+        partDirtySignal.set(this)
+        activePartSignal.set(null as unknown as KPart)
+        activePartSignal.set(this)
+    }
+}