@kieler/klighd-core/lib/sidebar/sidebar-panel.d.ts

Core KLighD diagram visualization with Sprotty

import { VNode } from 'snabbdom';
import { IActionDispatcher } from 'sprotty';
import { PossibleQuickAction, QuickActionOption } from '../options/option-models';
import { RenderOptionsRegistry } from '../options/render-options-registry';
/**
 * A sidebar panel provides content that is shown by the sidebar.
 * An implementation has to be registered as a "SidebarPanel" DISymbol.
 */
export interface ISidebarPanel {
    /** Unique ID that identifies this panel in the DI container. */
    readonly id: string;
    /** Title that should be used if this panel is shown. */
    readonly title: string;
    /**
     * Icon used for the corresponding panel toggle.
     * For an icon source you should use feather-icons (https://feathericons.com)
     * and the FeatherIcon method from the folder feather-icons-snabbdom.
     *
     * Usage example: `<FeatherIcon iconId={"settings"}/>` where
     * settings is the name of the icon.
     */
    readonly icon: VNode;
    /**
     * A sidebar panel can provide a position for its trigger in the trigger stack.
     * The trigger at the top has the smallest position. If two panels specify the
     * same position, the panel that is resolved first by the DI container is placed on top.
     */
    readonly position: number;
    /** Registers a callback that is called when this panel should be re-rendered. */
    onUpdate(callback: () => void): void;
    /**
     * Renders this panel content and returns the content as a snabbdom VNode.
     * Learn more about snabbdom and how to use it here:
     * - https://www.npmjs.com/package/snabbdom
     * - https://www.npmjs.com/package/snabbdom-jsx (package not used anymore, but concept is still
     * the same)
     */
    render(): VNode;
}
/**
 * Abstract SidebarPanel that should be used as the base for a custom {@link ISidebarPanel}.
 *
 * This class simplifies the implementation around handling render updates.
 *
 *
 * To use these quick actions you have to use the getQuickActions() method to get the quick actions.
 * Furthermore you have to call the `assignQuickActions` method in update() and init().
 * Also make sure you add the renderOptionsRegistry to the constructor init() via
 * `this.renderOptionsRegistry.onChange(() => this.update())`
 * Furthermore, add the html create method in the `render()` method via `<QuickActionsBar/>`
 */
export declare abstract class SidebarPanel implements ISidebarPanel {
    private _updateCallbacks;
    private quickActions;
    protected renderOptionsRegistry: RenderOptionsRegistry;
    protected actionDispatcher: IActionDispatcher;
    abstract get id(): string;
    abstract get title(): string;
    abstract get icon(): VNode;
    readonly position: number;
    onUpdate(callback: () => void): void;
    /** Call this method if you want to trigger a re-render and update the UI. */
    update(): void;
    abstract render(): VNode;
    /**
     * This method inits the quick actions, if you want to use them for a panel.
     */
    protected assignQuickActions(): void;
    /**
     * Gets all available quick actions so tab panels can inherit it.
     * @returns The available quick actions so other classes can inherit it.
     */
    getQuickActions(): QuickActionOption[];
    /**
     * Handles the click on one quickaction element.
     * @param type The quickaction to handle.
     */
    protected handleQuickActionClick(type: PossibleQuickAction): void;
}
/**
 * The properties needed to create the quick actions bar.
 */
interface QuickActionsBarProps {
    /** The quick actions this bar should show */
    quickActions: QuickActionOption[];
    /**
     * callback method for when a quick action is clicked.
     * @param key The key of the quick action that was clicked.
     */
    onChange: (key: PossibleQuickAction) => void;
    /** The sidebar panel this quick actions bar is part of. */
    thisSidebarPanel: SidebarPanel;
}
/**
 * This method creates the quick actions bar as a resuable component.
 */
export declare function QuickActionsBar(props: QuickActionsBarProps): VNode;
export {};
//# sourceMappingURL=sidebar-panel.d.ts.map