inline-style-editor/index.d.ts

Update CSS rules or add inline style to elements visualy

export default class InlineStyleEditor {
    constructor(options?: InlineStyleEditorOptions);
    close(): void;
    isOpened(): boolean;
    open(target: HTMLElement | SVGElement, x: number, y: number);
}

export interface ColorDefinition {
    type: 'color';
    getter: (el: HTMLElement) => string | null;
    setter: (el: SVGElement, val: string) => void;
}
export interface SelectDefinition {
    type: 'select';
    choices: () => string[]
    getter: (el: HTMLElement) => string | null;
    setter: (el: SVGElement, val: string) => void;
}
export interface SliderDefinition {
    type: "slider";
    min: number;
    max: number;
    step: number;
    getter: (el: HTMLElement) => number | null;
    setter: (el: SVGElement, val: number) => void;
}

export interface InlineStyleEditorOptions {
    onStyleChanged?: (
        target: HTMLElement | SVGElement,
        eventType: "inline" | CSSStyleRule,
        cssProp: string,
        value: string,
    ) => void;
    getElems?: (el: HTMLElement | SVGElement) => [HTMLElement | SVGElement, string][];
    listenOnClick?: boolean;
    customProps?: Record<string, ColorDefinition | SelectDefinition | SliderDefinition>;
    cssRuleFilter?: (el: HTMLElement | SVGElement, cssSelector: string) => boolean;
    getCssRuleName?: (ruleName: string, el: HTMLElement | SVGElement) => string;
    inlineDeletable?: (el: HTMLElement | SVGElement) => boolean;
    ignoredProps?: string[];
}