sequential-workflow-designer 0.18.4 → 0.19.0

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { Step, BranchedStep, SequentialStep, Definition, Sequence, ComponentType, DefinitionWalker, StepOrName } from 'sequential-workflow-model';
+import { Definition, Step, Sequence, ComponentType, DefinitionWalker, StepOrName } from 'sequential-workflow-model';
 export * from 'sequential-workflow-model';
 
 declare class Icons {
@@ -68,25 +68,6 @@ type SimpleEventListener<T> = (value: T) => void;
 
 declare function race<A, B, C>(timeout: number, a: SimpleEvent<A>, b: SimpleEvent<B>, c?: SimpleEvent<C>): SimpleEvent<[A?, B?, C?]>;
 
-/**
- * @deprecated Use {@link Step} instead.
- */
-interface TaskStep extends Step {
-    componentType: 'task';
-}
-/**
- * @deprecated Use {@link BranchedStep} instead.
- */
-interface SwitchStep extends BranchedStep {
-    componentType: 'switch';
-}
-/**
- * @deprecated Use {@link SequentialStep} instead.
- */
-interface ContainerStep extends SequentialStep {
-    componentType: 'container';
-}
-
 interface Behavior {
     onStart(position: Vector): void;
     onMove(delta: Vector): Behavior | void;
@@ -296,13 +277,21 @@ declare class ComponentContext {
     private constructor();
 }
 
+declare class CustomActionController {
+    private readonly configuration;
+    private readonly state;
+    constructor(configuration: DesignerConfiguration, state: DesignerState);
+    trigger(action: CustomAction, step: Step | null, sequence: Sequence): void;
+    private notifyStepChanged;
+}
+
 declare class HistoryController {
     private readonly stack;
     private readonly state;
-    private readonly definitionModifier;
+    private readonly stateModifier;
     private readonly stackSize;
-    static create(initialStack: UndoStack | undefined, state: DesignerState, definitionModifier: DefinitionModifier, configuration: DesignerConfiguration): HistoryController;
-    constructor(stack: UndoStack, state: DesignerState, definitionModifier: DefinitionModifier, stackSize: number);
+    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;
@@ -351,23 +340,25 @@ declare class DesignerContext {
     readonly services: Services;
     readonly componentContext: ComponentContext;
     readonly definitionWalker: DefinitionWalker;
-    readonly definitionModifier: DefinitionModifier;
+    readonly stateModifier: StateModifier;
     readonly layoutController: LayoutController;
     readonly workspaceController: WorkspaceControllerWrapper;
     readonly behaviorController: BehaviorController;
+    readonly customActionController: CustomActionController;
     readonly historyController: HistoryController | undefined;
     static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
-    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, definitionModifier: DefinitionModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, behaviorController: BehaviorController, historyController: HistoryController | undefined);
+    constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, 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, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer;
+    static create(state: DesignerState, selectedStepIdProvider: SelectedStepIdProvider, definitionWalker: DefinitionWalker, handler: EditorRendererHandler): EditorRenderer;
     private currentStepId;
     private constructor();
     destroy(): void;
@@ -376,17 +367,26 @@ declare class EditorRenderer {
     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 definitionModifier;
-    constructor(state: DesignerState, definitionWalker: DefinitionWalker, definitionModifier: DefinitionModifier);
+    private readonly stateModifier;
+    constructor(state: DesignerState, definitionWalker: DefinitionWalker, stateModifier: StateModifier);
     isCollapsed(): boolean;
     isReadonly(): boolean;
     toggleIsCollapsed(): void;
     subscribeIsCollapsed(listener: SimpleEventListener<boolean>): void;
     getDefinition(): Definition;
-    runRenderer(rendererHandler: EditorRendererHandler): EditorRenderer;
+    addDefinitionModifierDependency(dependency: StateModifierDependency): void;
+    runRenderer(rendererHandler: EditorRendererHandler, customSelectedStepIdProvider: SelectedStepIdProvider | null): EditorRenderer;
     createStepEditorContext(stepId: string): StepEditorContext;
     createRootEditorContext(): RootEditorContext;
 }
@@ -396,10 +396,6 @@ declare class PathBarApi {
     private readonly definitionWalker;
     constructor(state: DesignerState, definitionWalker: DefinitionWalker);
     readonly onStateChanged: SimpleEvent<[(string[] | undefined)?, (DefinitionChangedEvent | undefined)?, unknown?]>;
-    /**
-     * @deprecated Don't use this method
-     */
-    subscribe(handler: () => void): void;
     setFolderPath(path: string[]): void;
     getFolderPath(): string[];
     getFolderPathStepNames(): string[];
@@ -476,6 +472,7 @@ declare class DesignerApi {
     readonly workspace: WorkspaceApi;
     readonly viewport: ViewportApi;
     readonly pathBar: PathBarApi;
+    readonly definitionWalker: DefinitionWalker;
     static create(context: DesignerContext): DesignerApi;
     private constructor();
 }
@@ -712,6 +709,7 @@ interface DesignerExtension {
     grid?: GridExtension;
     rootComponent?: RootComponentExtension;
     sequenceComponent?: SequenceComponentExtension;
+    contextMenu?: ContextMenuExtension;
     daemons?: DaemonExtension[];
 }
 interface StepExtension<S extends Step = Step> {
@@ -785,6 +783,17 @@ interface SequencePlaceIndicator {
 interface SequenceComponentExtension {
     create(parentElement: SVGElement, sequenceContext: SequenceContext, componentContext: ComponentContext): SequenceComponent;
 }
+interface ContextMenuExtension {
+    createItemsProvider?: (customActionController: CustomActionController) => ContextMenuItemsProvider;
+}
+interface ContextMenuItemsProvider {
+    getItems(step: Step | null, sequence: Sequence): ContextMenuItem[];
+}
+interface ContextMenuItem {
+    readonly label: string;
+    readonly order: number;
+    readonly callback?: () => void;
+}
 interface PlaceholderControllerExtension {
     create(): PlaceholderController;
 }
@@ -924,6 +933,7 @@ interface ToolboxGroupConfiguration {
     steps: StepDefinition[];
 }
 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;
@@ -984,11 +994,17 @@ declare enum DefinitionChangeType {
     rootReplaced = 8
 }
 
-declare class DefinitionModifier {
+declare class StateModifier {
     private readonly definitionWalker;
     private readonly state;
     private readonly configuration;
-    constructor(definitionWalker: DefinitionWalker, state: DesignerState, configuration: DesignerConfiguration);
+    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;
@@ -997,21 +1013,17 @@ declare class DefinitionModifier {
     isDuplicable(step: Step, parentSequence: Sequence): boolean;
     tryDuplicate(step: Step, parentSequence: Sequence): boolean;
     replaceDefinition(definition: Definition): void;
-    updateDependantFields(): void;
+    updateDependencies(): void;
 }
 
 declare class ControlBarApi {
     private readonly state;
     private readonly historyController;
-    private readonly definitionModifier;
+    private readonly stateModifier;
     private readonly viewportApi;
-    static create(state: DesignerState, historyController: HistoryController | undefined, definitionModifier: DefinitionModifier, viewportApi: ViewportApi): ControlBarApi;
+    static create(state: DesignerState, historyController: HistoryController | undefined, stateModifier: StateModifier, viewportApi: ViewportApi): ControlBarApi;
     private constructor();
     readonly onStateChanged: SimpleEvent<unknown>;
-    /**
-     * @deprecated Don't use this method
-     */
-    subscribe(handler: () => void): void;
     resetViewport(): void;
     zoomIn(): void;
     zoomOut(): void;
@@ -1029,7 +1041,7 @@ declare class ControlBarApi {
 declare class Editor {
     private readonly view;
     private readonly renderer;
-    static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, rootEditorClassName: string, rootEditorProvider: RootEditorProvider): Editor;
+    static create(parent: HTMLElement, api: EditorApi, stepEditorClassName: string, stepEditorProvider: StepEditorProvider, rootEditorClassName: string, rootEditorProvider: RootEditorProvider, customSelectedStepIdProvider: SelectedStepIdProvider | null): Editor;
     private constructor();
     destroy(): void;
 }
@@ -1037,6 +1049,7 @@ declare class Editor {
 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;
@@ -1114,10 +1127,6 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Moves the viewport to the step with the animation.
      */
     moveViewportToStep(stepId: string): void;
-    /**
-     * @deprecated Use `moveViewportToStep` instead.
-     */
-    moveViewPortToStep(stepId: string): void;
     /**
      * @description Rerender the root component and all its children.
      */
@@ -1197,16 +1206,6 @@ declare class StepsDesignerExtension implements DesignerExtension {
     readonly steps: StepExtension<Step>[];
     static create(configuration: StepsDesignerExtensionConfiguration): StepsDesignerExtension;
     protected constructor(steps: StepExtension<Step>[]);
-}
-/**
- * @deprecated Use `StepsDesignerExtension` instead.
- */
-declare class StepsExtension extends StepsDesignerExtension {
-}
-/**
- * @deprecated Use `StepsDesignerExtensionConfiguration` instead.
- */
-interface StepsExtensionConfiguration extends StepsDesignerExtensionConfiguration {
 }
 
-export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStep, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ControlBarApi, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, StepsExtension, StepsExtensionConfiguration, SwitchStep, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStep, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.18.4",
+	"version": "0.19.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

package/sass/designer.scss

@@ -33,6 +33,7 @@
 	z-index: 20;
 	box-sizing: border-box;
 	width: 130px;
+	-webkit-user-select: none;
 	user-select: none;
 }
 .sqd-toolbox-header {
@@ -222,6 +223,7 @@
 	flex: 1;
 	position: relative;
 	display: block;
+	-webkit-user-select: none;
 	user-select: none;
 }
 .sqd-workspace-canvas {