sequential-workflow-designer/lib/index.d.ts

Customizable no-code component for building flow-based programming applications.

import { Definition, Step, Sequence, ComponentType, DefinitionWalker, StepWithParentSequence, StepOrName } from 'sequential-workflow-model';
export * from 'sequential-workflow-model';

declare class Icons {
    static folderIn: string;
    static folderOut: string;
    static center: string;
    static zoomIn: string;
    static zoomOut: string;
    static undo: string;
    static redo: string;
    static move: string;
    static delete: string;
    static folderUp: string;
    static close: string;
    static options: string;
    static expand: string;
    static alert: string;
    static play: string;
    static stop: string;
    static folder: string;
    static appendPath(parent: SVGElement, pathClassName: string, d: string, size: number): SVGGElement;
    static createSvg(className: string, d: string): SVGElement;
}

declare class ObjectCloner {
    static deepClone<T>(instance: T): T;
}

interface Attributes {
    [name: string]: string | number;
}
declare class Dom {
    static svg<K extends keyof SVGElementTagNameMap>(name: K, attributes?: Attributes): SVGElementTagNameMap[K];
    static translate(element: SVGElement, x: number, y: number): void;
    static attrs(element: Element, attributes: Attributes): void;
    static element<T extends keyof HTMLElementTagNameMap>(name: T, attributes?: Attributes): HTMLElementTagNameMap[T];
    static toggleClass(element: Element, isEnabled: boolean, className: string): void;
}

declare class Vector {
    readonly x: number;
    readonly y: number;
    constructor(x: number, y: number);
    add(v: Vector): Vector;
    subtract(v: Vector): Vector;
    multiplyByScalar(s: number): Vector;
    divideByScalar(s: number): Vector;
    round(): Vector;
    distance(): number;
}

declare function getAbsolutePosition(element: Element): Vector;

declare class Uid {
    static next(): string;
}

declare class SimpleEvent<T> {
    private readonly listeners;
    subscribe(listener: SimpleEventListener<T>): void;
    unsubscribe(listener: SimpleEventListener<T>): void;
    readonly forward: (value: T) => void;
    count(): number;
    first(): Promise<T>;
}
type SimpleEventListener<T> = (value: T) => void;

declare function race<A, B, C, D>(timeout: number, a: SimpleEvent<A>, b: SimpleEvent<B>, c?: SimpleEvent<C>, d?: SimpleEvent<D>): SimpleEvent<[A?, B?, C?, D?]>;

interface Behavior {
    onStart(position: Vector): void;
    onMove(delta: Vector): Behavior | void;
    onEnd(interrupt: boolean, element: Element | null, previousEndToken: BehaviorEndToken | null): BehaviorEndToken | void;
}
interface BehaviorEndToken {
    type: string;
}

declare class BehaviorController {
    private readonly dom;
    private readonly shadowRoot;
    static create(shadowRoot: ShadowRoot | undefined): BehaviorController;
    private previousEndToken;
    private state;
    private constructor();
    start(startPosition: Vector, behavior: Behavior): void;
    private bind;
    private unbind;
    private readonly onMouseMove;
    private readonly onTouchMove;
    private readonly onMouseUp;
    private readonly onTouchEnd;
    private readonly onTouchStart;
    private move;
    private stop;
}

interface DefinitionChangedEvent {
    changeType: DefinitionChangeType;
    stepId: string | null;
}
declare class DesignerState {
    definition: Definition;
    isReadonly: boolean;
    isToolboxCollapsed: boolean;
    isEditorCollapsed: boolean;
    readonly onViewportChanged: SimpleEvent<Viewport>;
    readonly onSelectedStepIdChanged: SimpleEvent<string | null>;
    readonly onFolderPathChanged: SimpleEvent<string[]>;
    readonly onIsReadonlyChanged: SimpleEvent<boolean>;
    readonly onIsDraggingChanged: SimpleEvent<boolean>;
    readonly onIsDragDisabledChanged: SimpleEvent<boolean>;
    readonly onDefinitionChanged: SimpleEvent<DefinitionChangedEvent>;
    readonly onIsToolboxCollapsedChanged: SimpleEvent<boolean>;
    readonly onIsEditorCollapsedChanged: SimpleEvent<boolean>;
    viewport: Viewport;
    selectedStepId: string | null;
    folderPath: string[];
    isDragging: boolean;
    isDragDisabled: boolean;
    constructor(definition: Definition, isReadonly: boolean, isToolboxCollapsed: boolean, isEditorCollapsed: boolean);
    setSelectedStepId(stepId: string | null): void;
    pushStepIdToFolderPath(stepId: string): void;
    setFolderPath(path: string[]): void;
    tryGetLastStepIdFromFolderPath(): string | null;
    setDefinition(definition: Definition): void;
    notifyDefinitionChanged(changeType: DefinitionChangeType, stepId: string | null): void;
    setViewport(viewport: Viewport): void;
    setIsReadonly(isReadonly: boolean): void;
    setIsDragging(isDragging: boolean): void;
    setIsDragDisabled(isDragDisabled: boolean): void;
    setIsToolboxCollapsed(isCollapsed: boolean): void;
    setIsEditorCollapsed(isCollapsed: boolean): void;
}

declare class DefinitionValidator {
    private readonly configuration;
    private readonly state;
    constructor(configuration: ValidatorConfiguration | undefined, state: DesignerState);
    validateStep(step: Step, parentSequence: Sequence): boolean;
    validateRoot(): boolean;
}

declare class IconProvider {
    private readonly configuration;
    constructor(configuration: StepsConfiguration);
    getIconUrl(step: StepDefinition): string | null;
}

type Services = Required<DesignerExtension>;
declare class ServicesResolver {
    static resolve(extensions: DesignerExtension[] | undefined, configuration: DesignerConfiguration): Services;
}

declare class StepExtensionResolver {
    private readonly dict;
    static create(services: Services): StepExtensionResolver;
    private constructor();
    resolve(componentType: ComponentType): StepExtension<Step>;
}

interface Component {
    view: ComponentView;
    findById(stepId: string): StepComponent | null;
    resolveClick(click: ClickDetails): ClickCommand | null;
    resolvePlaceholders(skipComponent: StepComponent | undefined, result: FoundPlaceholders): void;
    updateBadges(result: BadgesResult): void;
}
interface FoundPlaceholders {
    placeholders: Placeholder[];
    components: StepComponent[];
}
interface ComponentView {
    g: SVGGElement;
    width: number;
    height: number;
    joinX: number;
}
interface StepComponentView extends ComponentView {
    sequenceComponents: SequenceComponent[] | null;
    placeholders: Placeholder[] | null;
    hasOutput: boolean;
    haveCollapsedChildren?: boolean;
    /**
     * @param click Details about the click.
     * @returns `true` if selected a step, a click command if clicked a specific action, `null` if not clicked at this view.
     */
    resolveClick(click: ClickDetails): true | ClickCommand | null;
    setIsDragging(isDragging: boolean): void;
    setIsSelected(isSelected: boolean): void;
    setIsDisabled(isDisabled: boolean): void;
    getClientPosition(): Vector;
}
interface SequenceComponent extends Component {
    hasOutput: boolean;
}
interface ClickDetails {
    element: Element;
    position: Vector;
    scale: number;
}
type ClickCommand = SelectStepClickCommand | RerenderStepClickCommand | OpenFolderClickCommand | TriggerCustomActionClickCommand;
interface BaseClickCommand {
    type: ClickCommandType;
}
interface SelectStepClickCommand extends BaseClickCommand {
    type: ClickCommandType.selectStep;
    component: StepComponent;
}
interface RerenderStepClickCommand extends BaseClickCommand {
    type: ClickCommandType.rerenderStep;
    step: Step;
    beforeCallback?: () => void;
}
interface OpenFolderClickCommand extends BaseClickCommand {
    type: ClickCommandType.openFolder;
    step: Step;
}
interface TriggerCustomActionClickCommand extends BaseClickCommand {
    type: ClickCommandType.triggerCustomAction;
    step: Step | null;
    sequence: Sequence;
    action: CustomAction;
}
declare enum ClickCommandType {
    selectStep = 1,
    rerenderStep = 2,
    openFolder = 3,
    triggerCustomAction = 4
}
interface BadgeView {
    g: SVGGElement;
    width: number;
    height: number;
}
interface Badge {
    view: BadgeView | null;
    update(result: unknown): unknown;
    resolveClick(click: ClickDetails): ClickCommand | null;
}
type BadgesResult = unknown[];
interface Placeholder {
    view: PlaceholderView;
    parentSequence: Sequence;
    index: number;
    getClientRect(): DOMRect;
    setIsHover(isHover: boolean): void;
    setIsVisible(isVisible: boolean): void;
    resolveClick(click: ClickDetails): ClickCommand | null;
}
declare enum PlaceholderDirection {
    none = 0,
    in = 1,
    out = 2
}
interface PlaceholderView {
    g: SVGGElement;
}

declare class StepComponent implements Component {
    readonly view: StepComponentView;
    readonly step: Step;
    readonly parentSequence: Sequence;
    readonly hasOutput: boolean;
    private readonly badges;
    static create(view: StepComponentView, stepContext: StepContext, componentContext: ComponentContext): StepComponent;
    private constructor();
    findById(stepId: string): StepComponent | null;
    resolveClick(click: ClickDetails): ClickCommand | null;
    resolvePlaceholders(skipComponent: StepComponent | undefined, result: FoundPlaceholders): void;
    setIsDragging(isDragging: boolean): void;
    setIsSelected(isSelected: boolean): void;
    setIsDisabled(isDisabled: boolean): void;
    updateBadges(result: BadgesResult): void;
}

declare class StepComponentFactory {
    private readonly stepExtensionResolver;
    constructor(stepExtensionResolver: StepExtensionResolver);
    create(parentElement: SVGElement, stepContext: StepContext, componentContext: ComponentContext): StepComponent;
}

declare class ComponentContext {
    readonly shadowRoot: ShadowRoot | undefined;
    readonly validator: DefinitionValidator;
    readonly iconProvider: IconProvider;
    readonly placeholderController: PlaceholderController;
    readonly stepComponentFactory: StepComponentFactory;
    readonly definitionWalker: DefinitionWalker;
    readonly services: Services;
    readonly preferenceStorage: PreferenceStorage;
    readonly i18n: I18n;
    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, placeholderController: PlaceholderController, i18n: I18n, services: Services): ComponentContext;
    private constructor();
}

declare class CustomActionController {
    private readonly configuration;
    private readonly state;
    private readonly stateModifier;
    constructor(configuration: DesignerConfiguration, state: DesignerState, stateModifier: StateModifier);
    trigger(action: CustomAction, step: Step | null, sequence: Sequence): void;
    private createCustomActionHandlerContext;
    private notifyStepChanged;
}

declare class HistoryController {
    private readonly stack;
    private readonly state;
    private readonly stateModifier;
    private readonly stackSize;
    static create(initialStack: UndoStack | undefined, state: DesignerState, stateModifier: StateModifier, configuration: DesignerConfiguration): HistoryController;
    constructor(stack: UndoStack, state: DesignerState, stateModifier: StateModifier, stackSize: number);
    canUndo(): boolean;
    undo(): void;
    canRedo(): boolean;
    redo(): void;
    dump(): UndoStack;
    replaceDefinition(definition: Definition): void;
    private rememberCurrent;
    private remember;
    private commit;
}

declare class LayoutController {
    private readonly placeholder;
    constructor(placeholder: HTMLElement);
    isMobile(): boolean;
}

interface WorkspaceController {
    resolvePlaceholders(skipComponent: StepComponent | undefined): FoundPlaceholders;
    getComponentByStepId(stepId: string): StepComponent;
    getCanvasPosition(): Vector;
    getCanvasSize(): Vector;
    getRootComponentSize(): Vector;
    updateBadges(): void;
    updateRootComponent(): void;
    updateCanvasSize(): void;
}
declare class WorkspaceControllerWrapper implements WorkspaceController {
    private controller?;
    set(controller: WorkspaceController): void;
    private get;
    resolvePlaceholders(skipComponent: StepComponent | undefined): FoundPlaceholders;
    getComponentByStepId(stepId: string): StepComponent;
    getCanvasPosition(): Vector;
    getCanvasSize(): Vector;
    getRootComponentSize(): Vector;
    updateBadges(): void;
    updateRootComponent(): void;
    updateCanvasSize(): void;
}

declare class DesignerContext {
    readonly theme: string;
    readonly state: DesignerState;
    readonly configuration: DesignerConfiguration;
    readonly services: Services;
    readonly componentContext: ComponentContext;
    readonly definitionWalker: DefinitionWalker;
    readonly i18n: I18n;
    readonly stateModifier: StateModifier;
    readonly layoutController: LayoutController;
    readonly workspaceController: WorkspaceControllerWrapper;
    readonly placeholderController: PlaceholderController;
    readonly behaviorController: BehaviorController;
    readonly customActionController: CustomActionController;
    readonly historyController: HistoryController | undefined;
    static create(placeholder: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, placeholderController: PlaceholderController, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
    setWorkspaceController(controller: WorkspaceController): void;
}

type EditorRendererHandler = (step: Step | null) => void;
declare class EditorRenderer {
    private readonly state;
    private readonly selectedStepIdProvider;
    private readonly definitionWalker;
    private readonly handler;
    private readonly raceEvent;
    static create(state: DesignerState, selectedStepIdProvider: SelectedStepIdProvider, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer;
    private currentStepId;
    private constructor();
    destroy(): void;
    private render;
    private renderIfStepChanged;
    private readonly raceEventHandler;
}

interface StateModifierDependency {
    update(): void;
}

interface SelectedStepIdProvider {
    onSelectedStepIdChanged: SimpleEvent<string | null>;
    selectedStepId: string | null;
}
declare class EditorApi {
    private readonly state;
    private readonly definitionWalker;
    private readonly stateModifier;
    constructor(state: DesignerState, definitionWalker: DefinitionWalker, stateModifier: StateModifier);
    isCollapsed(): boolean;
    isReadonly(): boolean;
    toggleIsCollapsed(): void;
    subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
    getDefinition(): Definition;
    addDefinitionModifierDependency(dependency: StateModifierDependency): void;
    runRenderer(rendererHandler: EditorRendererHandler, customSelectedStepIdProvider: SelectedStepIdProvider | null): EditorRenderer;
    createStepEditorContext(stepId: string): StepEditorContext;
    createRootEditorContext(): RootEditorContext;
}

declare class PathBarApi {
    private readonly state;
    private readonly definitionWalker;
    constructor(state: DesignerState, definitionWalker: DefinitionWalker);
    readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?, unknown?]>;
    setFolderPath(path: string[]): void;
    getFolderPath(): string[];
    getFolderPathStepNames(): string[];
}

declare class ToolboxDataProvider {
    private readonly iconProvider;
    private readonly i18n;
    private readonly configuration;
    constructor(iconProvider: IconProvider, i18n: I18n, configuration: ToolboxConfiguration | false);
    getAllGroups(): ToolboxGroupData[];
    private readonly createItemData;
    applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
}
interface ToolboxGroupData {
    name: string;
    items: ToolboxItemData[];
}
interface ToolboxItemData {
    iconUrl: string | null;
    label: string;
    lowerCaseLabel: string;
    description: string;
    step: StepDefinition;
}

declare class ToolboxApi {
    private readonly state;
    private readonly designerContext;
    private readonly behaviorController;
    private readonly toolboxDataProvider;
    private readonly uidGenerator;
    constructor(state: DesignerState, designerContext: DesignerContext, behaviorController: BehaviorController, toolboxDataProvider: ToolboxDataProvider, uidGenerator: UidGenerator | undefined);
    isCollapsed(): boolean;
    toggleIsCollapsed(): void;
    subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
    getAllGroups(): ToolboxGroupData[];
    applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
    /**
     * @param position Mouse or touch position.
     * @param step Step definition.
     * @returns If started dragging returns true, otherwise returns false.
     */
    tryDrag(position: Vector, step: StepDefinition): boolean;
    private activateStep;
}

declare class ViewportApi {
    private readonly state;
    private readonly workspaceController;
    private readonly viewportController;
    private readonly animator;
    constructor(state: DesignerState, workspaceController: WorkspaceControllerWrapper, viewportController: ViewportController);
    limitScale(scale: number): number;
    resetViewport(): void;
    zoom(direction: boolean): void;
    moveViewportToStep(stepId: string): void;
    handleWheelEvent(e: WheelEvent): void;
}

declare class WorkspaceApi {
    private readonly state;
    private readonly definitionWalker;
    private readonly workspaceController;
    constructor(state: DesignerState, definitionWalker: DefinitionWalker, workspaceController: WorkspaceControllerWrapper);
    getViewport(): Viewport;
    setViewport(viewport: Viewport): void;
    getCanvasPosition(): Vector;
    getCanvasSize(): Vector;
    getRootComponentSize(): Vector;
    updateRootComponent(): void;
    updateBadges(): void;
    updateCanvasSize(): void;
    getRootSequence(): WorkspaceRootSequence;
}
interface WorkspaceRootSequence {
    sequence: Sequence;
    parentStep: StepWithParentSequence | null;
}

declare class DesignerApi {
    readonly shadowRoot: ShadowRoot | undefined;
    readonly controlBar: ControlBarApi;
    readonly toolbox: ToolboxApi;
    readonly editor: EditorApi;
    readonly workspace: WorkspaceApi;
    readonly viewport: ViewportApi;
    readonly pathBar: PathBarApi;
    readonly definitionWalker: DefinitionWalker;
    readonly i18n: I18n;
    static create(context: DesignerContext): DesignerApi;
    private constructor();
}

declare const TYPE = "selectStep";
declare class SelectStepBehaviorEndToken implements BehaviorEndToken {
    readonly stepId: string;
    readonly time: number;
    static is(token: BehaviorEndToken | null): token is SelectStepBehaviorEndToken;
    readonly type = "selectStep";
    constructor(stepId: string, time: number);
}

declare class Badges {
    private readonly badges;
    private readonly decorator;
    static createForStep(stepContext: StepContext, view: StepComponentView, componentContext: ComponentContext): Badges;
    static createForRoot(parentElement: SVGGElement, position: Vector, componentContext: ComponentContext): Badges;
    private constructor();
    update(result: BadgesResult): void;
    resolveClick(click: ClickDetails): ClickCommand | null;
}

interface ValidationErrorBadgeViewConfiguration {
    size: number;
    iconSize: number;
}

interface ValidationErrorBadgeExtensionConfiguration {
    view: ValidationErrorBadgeViewConfiguration;
}

declare class ValidationErrorBadgeExtension implements BadgeExtension {
    private readonly configuration;
    static create(configuration?: ValidationErrorBadgeExtensionConfiguration): ValidationErrorBadgeExtension;
    readonly id = "validationError";
    private constructor();
    createForStep(parentElement: SVGElement, view: StepComponentView, stepContext: StepContext<Step>, componentContext: ComponentContext): Badge;
    createForRoot(parentElement: SVGElement, componentContext: ComponentContext): Badge;
    readonly createStartValue: () => boolean;
}

declare class ComponentDom {
    static stepG(componentClassName: string, type: string, id: string): SVGGElement;
}

declare class InputView {
    private readonly root;
    static createRectInput(parent: SVGElement, x: number, y: number, size: number, radius: number, iconSize: number, iconUrl: string | null): InputView;
    static createRoundInput(parent: SVGElement, x: number, y: number, size: number): InputView;
    private constructor();
    setIsHidden(isHidden: boolean): void;
}

declare class JoinView {
    static createStraightJoin(parent: SVGElement, start: Vector, height: number): void;
    static createJoins(parent: SVGElement, start: Vector, targets: Vector[]): void;
}

interface LabelViewConfiguration {
    minWidth: number;
    height: number;
    paddingX: number;
    radius: number;
}

declare class LabelView {
    readonly g: SVGGElement;
    readonly width: number;
    readonly height: number;
    static create(parent: SVGElement, y: number, cfg: LabelViewConfiguration, text: string, theme: 'primary' | 'secondary'): LabelView;
    constructor(g: SVGGElement, width: number, height: number);
}

declare class OutputView {
    private readonly root;
    static create(parent: SVGElement, x: number, y: number, size: number): OutputView;
    constructor(root: SVGElement);
    setIsHidden(isHidden: boolean): void;
}

declare class DefaultSequenceComponentView implements ComponentView {
    readonly g: SVGGElement;
    readonly width: number;
    readonly height: number;
    readonly joinX: number;
    readonly placeholders: Placeholder[];
    readonly components: StepComponent[];
    static create(parent: SVGElement, sequenceContext: SequenceContext, componentContext: ComponentContext): DefaultSequenceComponentView;
    private constructor();
    hasOutput(): boolean;
}

declare class DefaultSequenceComponent implements SequenceComponent {
    readonly view: DefaultSequenceComponentView;
    readonly hasOutput: boolean;
    static create(parentElement: SVGElement, sequenceContext: SequenceContext, context: ComponentContext): DefaultSequenceComponent;
    private constructor();
    resolveClick(click: ClickDetails): ClickCommand | null;
    findById(stepId: string): StepComponent | null;
    resolvePlaceholders(skipComponent: StepComponent | undefined, result: FoundPlaceholders): void;
    updateBadges(result: BadgesResult): void;
}

interface StartStopRootComponentViewConfiguration {
    size: number;
    defaultIconSize: number;
    folderIconSize: number;
    folderIconD: string;
    startIconD: string;
    stopIconD: string;
}

interface StartStopRootComponentExtensionConfiguration {
    view: StartStopRootComponentViewConfiguration;
}

declare class StartStopRootComponentExtension implements RootComponentExtension {
    private readonly configuration;
    static create(configuration?: StartStopRootComponentExtensionConfiguration): StartStopRootComponentExtension;
    private constructor();
    create(parentElement: SVGElement, sequence: Sequence, parentPlaceIndicator: SequencePlaceIndicator | null, context: ComponentContext): Component;
}

interface ContainerStepComponentViewConfiguration {
    paddingTop: number;
    paddingX: number;
    inputSize: number;
    inputRadius: number;
    inputIconSize: number;
    autoHideInputOnDrag: boolean;
    label: LabelViewConfiguration;
}

interface ContainerStepExtensionConfiguration {
    view: ContainerStepComponentViewConfiguration;
}

declare const createContainerStepComponentViewFactory: (cfg: ContainerStepComponentViewConfiguration) => StepComponentViewFactory;

interface LineGridConfiguration {
    gridSizeX: number;
    gridSizeY: number;
}

interface SwitchStepComponentViewConfiguration {
    minContainerWidth: number;
    paddingX: number;
    /**
     * The distance between the top of the container and the center point of the input.
     */
    paddingTop1: number;
    /**
     * The distance between the center point of the input and the name label.
     */
    paddingTop2: number;
    connectionHeight: number;
    inputSize: number;
    inputIconSize: number;
    autoHideInputOnDrag: boolean;
    inputRadius: number;
    nameLabel: LabelViewConfiguration;
    branchNameLabel: LabelViewConfiguration;
}

declare const createSwitchStepComponentViewFactory: (cfg: SwitchStepComponentViewConfiguration) => StepComponentViewFactory;

interface SwitchStepExtensionConfiguration {
    view: SwitchStepComponentViewConfiguration;
}

interface TaskStepComponentViewConfiguration {
    paddingLeft: number;
    paddingRight: number;
    paddingY: number;
    textMarginLeft: number;
    minTextWidth: number;
    iconSize: number;
    radius: number;
    inputSize: number;
    outputSize: number;
}

declare const createTaskStepComponentViewFactory: (isInterrupted: boolean, cfg: TaskStepComponentViewConfiguration) => StepComponentViewFactory;

interface TaskStepExtensionConfiguration {
    view: TaskStepComponentViewConfiguration;
}

declare class CenteredViewportCalculator {
    static center(padding: number, canvasSize: Vector, rootComponentSize: Vector): Viewport;
    static getFocusedOnComponent(canvasSize: Vector, viewport: Viewport, componentPosition: Vector, componentSize: Vector): Viewport;
}

declare class ClassicWheelController implements WheelController {
    private readonly api;
    static create(api: ViewportApi): ClassicWheelController;
    private constructor();
    onWheel(e: WheelEvent): void;
}

declare class ClassicWheelControllerExtension implements WheelControllerExtension {
    readonly create: typeof ClassicWheelController.create;
}

interface DefaultViewportControllerConfiguration {
    scales: number[];
    smoothDeltaYLimit: number;
    padding: number;
}

declare class DefaultViewportController implements ViewportController {
    readonly smoothDeltaYLimit: number;
    private readonly nqn;
    private readonly api;
    private readonly padding;
    static create(api: WorkspaceApi, configuration?: DefaultViewportControllerConfiguration): DefaultViewportController;
    private constructor();
    getDefault(): Viewport;
    getZoomed(direction: boolean): Viewport | null;
    getFocusedOnComponent(componentPosition: Vector, componentSize: Vector): Viewport;
    getNextScale(scale: number, direction: boolean): NextScale;
    limitScale(scale: number): number;
}

type DefaultViewportControllerExtensionConfiguration = DefaultViewportControllerConfiguration;
declare class DefaultViewportControllerExtension implements ViewportControllerExtension {
    private readonly configuration;
    static create(configuration?: DefaultViewportControllerExtensionConfiguration): DefaultViewportControllerExtension;
    private constructor();
    create(api: WorkspaceApi): DefaultViewportController;
}

interface RectPlaceholderConfiguration {
    gapWidth: number;
    gapHeight: number;
    radius: number;
    iconSize: number;
}

declare class RectPlaceholderView implements PlaceholderView {
    readonly rect: SVGElement;
    readonly g: SVGGElement;
    static create(parent: SVGElement, width: number, height: number, radius: number, iconSize: number, direction: PlaceholderDirection): RectPlaceholderView;
    private constructor();
    setIsHover(isHover: boolean): void;
    setIsVisible(isVisible: boolean): void;
}

declare class RectPlaceholder implements Placeholder {
    readonly view: RectPlaceholderView;
    readonly parentSequence: Sequence;
    readonly index: number;
    static create(parent: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number, configuration: RectPlaceholderConfiguration): RectPlaceholder;
    constructor(view: RectPlaceholderView, parentSequence: Sequence, index: number);
    getClientRect(): DOMRect;
    setIsHover(isHover: boolean): void;
    setIsVisible(isVisible: boolean): void;
    resolveClick(): null;
}

declare class DefaultRegionView implements RegionView {
    private readonly lines;
    private readonly width;
    private readonly height;
    static create(parent: SVGElement, widths: number[], height: number): DefaultRegionView;
    constructor(lines: SVGLineElement[], width: number, height: number);
    getClientPosition(): Vector;
    resolveClick(click: ClickDetails): true | null;
    setIsSelected(isSelected: boolean): void;
}

declare class DefaultRegionComponentViewExtension implements RegionComponentViewExtension {
    create(parentElement: SVGElement, componentClassName: string, stepContext: StepContext, _: StepComponentViewContext, contentFactory: RegionComponentViewContentFactory): StepComponentView;
}

interface DesignerExtension {
    steps?: StepExtension[];
    stepComponentViewWrapper?: StepComponentViewWrapperExtension;
    stepBadgesDecorator?: StepBadgesDecoratorExtension;
    clickBehaviorWrapperExtension?: ClickBehaviorWrapperExtension;
    badges?: BadgeExtension[];
    uiComponents?: UiComponentExtension[];
    draggedComponent?: DraggedComponentExtension;
    wheelController?: WheelControllerExtension;
    viewportController?: ViewportControllerExtension;
    placeholderController?: PlaceholderControllerExtension;
    placeholder?: PlaceholderExtension;
    regionComponentView?: RegionComponentViewExtension;
    grid?: GridExtension;
    rootComponent?: RootComponentExtension;
    sequenceComponent?: SequenceComponentExtension;
    contextMenu?: ContextMenuExtension;
    daemons?: DaemonExtension[];
}
interface StepExtension<S extends Step = Step> {
    componentType: ComponentType;
    createComponentView(parentElement: SVGElement, stepContext: StepContext<S>, viewContext: StepComponentViewContext): StepComponentView;
}
type StepComponentViewFactory = StepExtension['createComponentView'];
interface StepComponentViewContext {
    i18n: I18n;
    getStepName(): string;
    getStepIconUrl(): string | null;
    createSequenceComponent(parentElement: SVGElement, sequence: Sequence): SequenceComponent;
    createPlaceholderForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
    createRegionComponentView(parentElement: SVGElement, componentClassName: string, contentFactory: RegionComponentViewContentFactory): StepComponentView;
    getPreference(key: string): string | null;
    setPreference(key: string, value: string): void;
}
interface StepContext<S extends Step = Step> {
    parentSequence: Sequence;
    step: S;
    depth: number;
    position: number;
    isInputConnected: boolean;
    isOutputConnected: boolean;
    isPreview: boolean;
}
interface SequenceContext {
    sequence: Sequence;
    depth: number;
    isInputConnected: boolean;
    isOutputConnected: boolean;
    isPreview: boolean;
}
interface StepComponentViewWrapperExtension {
    wrap(view: StepComponentView, stepContext: StepContext): StepComponentView;
}
interface StepBadgesDecoratorExtension {
    create(g: SVGGElement, view: StepComponentView, badges: (Badge | null)[]): BadgesDecorator;
}
interface BadgesDecorator {
    update(): void;
}
interface ClickBehaviorWrapperExtension {
    create(customActionController: CustomActionController): ClickBehaviorWrapper;
}
interface ClickBehaviorWrapper {
    wrap(behavior: Behavior, commandOrNull: ClickCommand | null): Behavior;
}
interface BadgeExtension {
    id: string;
    createForStep(parentElement: SVGElement, view: StepComponentView, stepContext: StepContext, componentContext: ComponentContext): Badge;
    createForRoot?: (parentElement: SVGElement, componentContext: ComponentContext) => Badge;
    createStartValue(): unknown;
}
interface WheelControllerExtension {
    create(viewportApi: ViewportApi, workspaceApi: WorkspaceApi): WheelController;
}
interface WheelController {
    onWheel(e: WheelEvent): void;
}
interface UiComponentExtension {
    create(root: HTMLElement, api: DesignerApi): UiComponent;
}
interface UiComponent {
    updateLayout(): void;
    destroy(): void;
}
interface DraggedComponentExtension {
    create(parentElement: HTMLElement, step: Step, componentContext: ComponentContext): DraggedComponent;
}
interface DraggedComponent {
    width: number;
    height: number;
    destroy(): void;
}
interface GridExtension {
    create(): Grid;
}
interface Grid {
    size: Vector;
    element: SVGElement;
    setScale(scale: number, scaledSize: Vector): void;
}
interface RootComponentExtension {
    create(parentElement: SVGElement, sequence: Sequence, parentPlaceIndicator: SequencePlaceIndicator | null, context: ComponentContext): Component;
}
interface SequencePlaceIndicator {
    sequence: Sequence;
    index: number;
}
interface SequenceComponentExtension {
    create(parentElement: SVGElement, sequenceContext: SequenceContext, componentContext: ComponentContext): SequenceComponent;
}
interface ContextMenuExtension {
    createItemsProvider?: (customActionController: CustomActionController) => ContextMenuItemsProvider;
}
interface ContextMenuItemsProvider {
    getItems(step: Step | null, parentSequence: Sequence, definition: Definition): ContextMenuItem[];
}
interface ContextMenuItem {
    readonly label: string;
    readonly order: number;
    readonly callback?: () => void;
}
interface PlaceholderControllerExtension {
    create(): PlaceholderController;
}
interface PlaceholderController {
    canCreate(sequence: Sequence, index: number): boolean;
    canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean;
}
interface PlaceholderExtension {
    gapSize: Vector;
    createForGap(parentElement: SVGElement, sequence: Sequence, index: number): Placeholder;
    createForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
}
interface ViewportControllerExtension {
    create(api: WorkspaceApi): ViewportController;
}
interface ViewportController {
    smoothDeltaYLimit: number;
    getDefault(): Viewport;
    getZoomed(direction: boolean): Viewport | null;
    getFocusedOnComponent(componentPosition: Vector, componentSize: Vector): Viewport;
    getNextScale(scale: number, direction: boolean): NextScale;
    limitScale(scale: number): number;
}
interface NextScale {
    current: number;
    next: number;
}
interface Viewport {
    readonly position: Vector;
    readonly scale: number;
}
interface DaemonExtension {
    create(api: DesignerApi): Daemon;
}
interface Daemon {
    destroy(): void;
}
interface RegionView {
    getClientPosition(): Vector;
    /**
     * @returns `true` if the click is inside the region, `null` if it's outside. The view may return a command to be executed.
     */
    resolveClick(click: ClickDetails): true | ClickCommand | null;
    setIsSelected(isSelected: boolean): void;
}
type RegionViewFactory = (parent: SVGElement, widths: number[], height: number) => RegionView;
type RegionComponentViewContentFactory = (g: SVGGElement, regionViewFactory: RegionViewFactory) => StepComponentView;
interface RegionComponentViewExtension {
    create(parentElement: SVGElement, componentClassName: string, stepContext: StepContext, viewContext: StepComponentViewContext, contentFactory: RegionComponentViewContentFactory): StepComponentView;
}

interface DesignerConfiguration<TDefinition extends Definition = Definition> {
    /**
     * @description The theme of the designer.
     * @default `light`
     */
    theme?: string;
    /**
     * @description The readonly mode of the designer.
     */
    isReadonly?: boolean;
    /**
     * @description The depth of the undo stack. If not set, undo/redo feature will be disabled.
     */
    undoStackSize?: number;
    /**
     * @description The initial undo stack. If not set, the undo stack will be empty.
     */
    undoStack?: UndoStack;
    /**
     * @description The common configuration of the steps.
     */
    steps: StepsConfiguration;
    /**
     * @description The configuration of the toolbox. If not set, the toolbox will be hidden.
     */
    toolbox: false | ToolboxConfiguration;
    /**
     * @description The configuration of the smart editor. If not set, the smart editor will be hidden.
     */
    editors: false | EditorsConfiguration<TDefinition>;
    /**
     * @description If true, the control bar will be displayed. In the next version, this property will be required.
     */
    controlBar: boolean;
    /**
     * @description If false, the context menu will be disabled. By default, the context menu is enabled.
     */
    contextMenu?: boolean;
    /**
     * @description The configuration of validators.
     */
    validator?: ValidatorConfiguration;
    /**
     * @description The configuration of the keyboard shortcuts. By default, the keyboard shortcuts are enabled (`true`). If `false`, the keyboard shortcuts are disabled.
     */
    keyboard?: boolean | KeyboardConfiguration;
    /**
     * @description The handler that handles custom actions.
     */
    customActionHandler?: CustomActionHandler;
    /**
     * @description The extensions of the designer.
     */
    extensions?: DesignerExtension[];
    /**
     * @description Custom definition walker.
     */
    definitionWalker?: DefinitionWalker;
    /**
     * @description Custom preference storage. By default, all preferences are stored in the memory.
     */
    preferenceStorage?: PreferenceStorage;
    /**
     * @description Custom generator of unique identifiers.
     */
    uidGenerator?: UidGenerator;
    /**
     * @description Custom translation function.
     */
    i18n?: I18n;
    /**
     * @description Pass the shadow root of the shadow root to the designer if the designer is placed inside the shadow DOM.
     */
    shadowRoot?: ShadowRoot;
}
type UidGenerator = () => string;
type I18n = (key: string, defaultValue: string) => string;
type CustomActionHandler = (action: CustomAction, step: Step | null, sequence: Sequence, context: CustomActionHandlerContext) => void;
interface CustomAction {
    type: string;
}
interface CustomActionHandlerContext {
    /**
     * @description Notifies the designer that the name of the step has changed.
     * @param stepId The id of the step whose name has changed.
     */
    notifyStepNameChanged(stepId: string): void;
    /**
     * @description Notifies the designer that the properties of the step have changed.
     * @param stepId The id of the step whose properties have changed.
     */
    notifyStepPropertiesChanged(stepId: string): void;
    /**
     * @description Notifies the designer that the step has been inserted.
     * @param stepId The id of the inserted step.
     */
    notifyStepInserted(stepId: string): void;
    /**
     * @description Notifies the designer that the step has been moved.
     * @param stepId The id of the moved step.
     */
    notifyStepMoved(stepId: string): void;
    /**
     * @description Notifies the designer that the step has been deleted.
     * @param stepId The id of the deleted step.
     */
    notifyStepDeleted(stepId: string): void;
}
interface ToolboxConfiguration {
    labelProvider?: StepLabelProvider;
    descriptionProvider?: StepDescriptionProvider;
    isCollapsed?: boolean;
    groups: ToolboxGroupConfiguration[];
}
type StepDefinition = Omit<Step, 'id'>;
type StepLabelProvider = (step: StepDefinition) => string;
type StepDescriptionProvider = (step: StepDefinition) => string;
interface ToolboxGroupConfiguration {
    name: string;
    steps: StepDefinition[];
}
interface PreferenceStorage {
    setItem(key: string, value: string): void;
    getItem(key: string): string | null;
}
interface StepsConfiguration {
    isSelectable?: (step: Step, parentSequence: Sequence) => boolean;
    canInsertStep?: (step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
    isDraggable?: (step: Step, parentSequence: Sequence) => boolean;
    canMoveStep?: (sourceSequence: Sequence, step: Step, targetSequence: Sequence, targetIndex: number) => boolean;
    isDeletable?: (step: Step, parentSequence: Sequence) => boolean;
    canDeleteStep?: (step: Step, parentSequence: Sequence) => boolean;
    isDuplicable?: (step: Step, parentSequence: Sequence) => boolean;
    /**
     * @description The designer automatically selects the step after it is dropped. If true, the step will not be selected.
     */
    isAutoSelectDisabled?: boolean;
    iconUrlProvider?: StepIconUrlProvider;
}
type StepIconUrlProvider = (componentType: ComponentType, type: string) => string | null;
interface ValidatorConfiguration {
    step?: StepValidator;
    root?: RootValidator;
}
type StepValidator = (step: Step, parentSequence: Sequence, definition: Definition) => boolean;
type RootValidator = (definition: Definition) => boolean;
interface KeyboardConfiguration {
    canHandleKey?: (action: KeyboardAction, event: KeyboardEvent) => boolean;
}
declare enum KeyboardAction {
    delete = "delete"
}
interface EditorsConfiguration<TDefinition extends Definition = Definition> {
    isCollapsed?: boolean;
    stepEditorProvider: StepEditorProvider<TDefinition>;
    rootEditorProvider: RootEditorProvider<TDefinition>;
}
interface StepEditorContext {
    notifyNameChanged(): void;
    notifyPropertiesChanged(): void;
    notifyChildrenChanged(): void;
}
type StepEditorProvider<TDefinition extends Definition = Definition> = (step: Step, context: StepEditorContext, definition: TDefinition, isReadonly: boolean) => HTMLElement;
interface RootEditorContext {
    notifyPropertiesChanged(): void;
}
type RootEditorProvider<TDefinition extends Definition = Definition> = (definition: TDefinition, context: RootEditorContext, isReadonly: boolean) => HTMLElement;
interface UndoStack {
    index: number;
    items: UndoStackItem[];
}
interface UndoStackItem {
    definition: Definition;
    changeType: DefinitionChangeType;
    stepId: string | null;
}
declare enum DefinitionChangeType {
    stepNameChanged = 1,
    stepPropertyChanged = 2,
    stepChildrenChanged = 3,
    stepDeleted = 4,
    stepMoved = 5,
    stepInserted = 6,
    rootPropertyChanged = 7,
    rootReplaced = 8
}

declare class StateModifier {
    private readonly definitionWalker;
    private readonly state;
    private readonly configuration;
    private readonly dependencies;
    static create(definitionWalker: DefinitionWalker, state: DesignerState, configuration: DesignerConfiguration): StateModifier;
    constructor(definitionWalker: DefinitionWalker, state: DesignerState, configuration: DesignerConfiguration, dependencies: StateModifierDependency[]);
    addDependency(dependency: StateModifierDependency): void;
    isSelectable(step: Step, parentSequence: Sequence): boolean;
    trySelectStep(step: Step, parentSequence: Sequence): void;
    trySelectStepById(stepId: string): void;
    isDeletable(stepId: string): boolean;
    tryDelete(stepId: string): boolean;
    tryInsert(step: Step, targetSequence: Sequence, targetIndex: number): boolean;
    isDraggable(step: Step, parentSequence: Sequence): boolean;
    tryMove(sourceSequence: Sequence, step: Step, targetSequence: Sequence, targetIndex: number): boolean;
    isDuplicable(step: Step, parentSequence: Sequence): boolean;
    tryDuplicate(step: Step, parentSequence: Sequence): boolean;
    replaceDefinition(definition: Definition): void;
    updateDependencies(): void;
}

declare class ControlBarApi {
    private readonly state;
    private readonly historyController;
    private readonly stateModifier;
    static create(state: DesignerState, historyController: HistoryController | undefined, stateModifier: StateModifier): ControlBarApi;
    private constructor();
    readonly onStateChanged: SimpleEvent<unknown>;
    isDragDisabled(): boolean;
    setIsDragDisabled(isDragDisabled: boolean): void;
    toggleIsDragDisabled(): void;
    isUndoRedoSupported(): boolean;
    tryUndo(): boolean;
    canUndo(): boolean;
    tryRedo(): boolean;
    canRedo(): boolean;
    tryDelete(): boolean;
    canDelete(): boolean;
}

declare class DefaultViewportControllerDesignerExtension implements DesignerExtension {
    readonly viewportController: ViewportControllerExtension;
    static create(configuration: DefaultViewportControllerExtensionConfiguration): DesignerExtension;
    private constructor();
}

declare class LineGrid implements Grid {
    readonly size: Vector;
    readonly element: SVGPathElement;
    static create(size: Vector): LineGrid;
    private constructor();
    setScale(_: number, scaledSize: Vector): void;
}

declare class LineGridExtension implements GridExtension {
    private readonly configuration;
    static create(configuration?: LineGridConfiguration): LineGridExtension;
    private constructor();
    create(): LineGrid;
}

declare class LineGridDesignerExtension implements DesignerExtension {
    readonly grid: LineGridExtension;
    static create(configuration?: LineGridConfiguration): DesignerExtension;
    private constructor();
}

declare class StartStopRootComponentDesignerExtension implements DesignerExtension {
    readonly rootComponent: RootComponentExtension;
    static create(configuration: StartStopRootComponentExtensionConfiguration): DesignerExtension;
    private constructor();
}

interface StepsDesignerExtensionConfiguration {
    container?: ContainerStepExtensionConfiguration;
    switch?: SwitchStepExtensionConfiguration;
    task?: TaskStepExtensionConfiguration;
}
declare class StepsDesignerExtension implements DesignerExtension {
    readonly steps: StepExtension<Step>[];
    static create(configuration: StepsDesignerExtensionConfiguration): StepsDesignerExtension;
    protected constructor(steps: StepExtension<Step>[]);
}

declare class Editor {
    private readonly view;
    private readonly renderer;
    static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, rootEditorClassName: string, rootEditorProvider: RootEditorProvider, customSelectedStepIdProvider: SelectedStepIdProvider | null): Editor;
    private constructor();
    destroy(): void;
}

declare class Designer<TDefinition extends Definition = Definition> {
    private readonly view;
    private readonly state;
    private readonly stateModifier;
    private readonly walker;
    private readonly historyController;
    private readonly api;
    /**
     * Creates a designer.
     * @param placeholder Placeholder where the designer will be attached.
     * @param startDefinition Start definition of a flow.
     * @param configuration Designer's configuration.
     * @returns An instance of the designer.
     */
    static create<TDef extends Definition>(placeholder: HTMLElement, startDefinition: TDef, configuration: DesignerConfiguration<TDef>): Designer<TDef>;
    private constructor();
    /**
     * @description Fires when the designer is initialized and ready to use.
     */
    readonly onReady: SimpleEvent<void>;
    /**
     * @description Fires when the definition has changed.
     */
    readonly onDefinitionChanged: SimpleEvent<TDefinition>;
    /**
     * @description Fires when the viewport has changed.
     */
    readonly onViewportChanged: SimpleEvent<Viewport>;
    /**
     * @description Fires when the selected step has changed.
     */
    readonly onSelectedStepIdChanged: SimpleEvent<string | null>;
    /**
     * @description Fires when the toolbox is collapsed or expanded.
     */
    readonly onIsToolboxCollapsedChanged: SimpleEvent<boolean>;
    /**
     * @description Fires when the editor is collapsed or expanded.
     */
    readonly onIsEditorCollapsedChanged: SimpleEvent<boolean>;
    /**
     * @returns the current definition of the workflow.
     */
    getDefinition(): TDefinition;
    /**
     * @returns the validation result of the current definition.
     */
    isValid(): boolean;
    /**
     * @returns the readonly flag.
     */
    isReadonly(): boolean;
    /**
     * @description Changes the readonly flag.
     */
    setIsReadonly(isReadonly: boolean): void;
    /**
     * @returns current selected step id or `null` if nothing is selected.
     */
    getSelectedStepId(): string | null;
    /**
     * @description Selects a step by the id.
     */
    selectStepById(stepId: string): void;
    /**