sequential-workflow-designer-react 0.9.2 → 0.10.0

package/lib/cjs/index.cjs

@@ -149,6 +149,8 @@ function SequentialWorkflowDesigner(props) {
     var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
     var globalEditorRef = react.useRef(props.globalEditor);
     var stepEditorRef = react.useRef(props.stepEditor);
+    var controllerRef = react.useRef(props.controller);
+    var customActionHandlerRef = react.useRef(props.customActionHandler);
     var designerRef = react.useRef(null);
     var editorRootRef = react.useRef(null);
     var definition = props.definition;
@@ -181,6 +183,22 @@ function SequentialWorkflowDesigner(props) {
         }
         return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
     }
+    function customActionHandler(action, step) {
+        if (customActionHandlerRef.current) {
+            customActionHandlerRef.current(action, step);
+        }
+    }
+    function tryDestroy() {
+        Presenter.tryDestroy(editorRootRef);
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(null);
+        }
+        if (designerRef.current) {
+            designerRef.current.destroy();
+            designerRef.current = null;
+            // console.log('sqd: designer destroyed');
+        }
+    }
     react.useEffect(function () {
         onDefinitionChangeRef.current = props.onDefinitionChange;
     }, [props.onDefinitionChange]);
@@ -193,6 +211,9 @@ function SequentialWorkflowDesigner(props) {
     react.useEffect(function () {
         stepEditorRef.current = props.stepEditor;
     }, [props.stepEditor]);
+    react.useEffect(function () {
+        customActionHandlerRef.current = props.customActionHandler;
+    }, [props.customActionHandler]);
     react.useEffect(function () {
         if (!placeholder) {
             return;
@@ -215,8 +236,7 @@ function SequentialWorkflowDesigner(props) {
                 }
                 return;
             }
-            designerRef.current.destroy();
-            designerRef.current = null;
+            tryDestroy();
         }
         var designer = sequentialWorkflowDesigner.Designer.create(placeholder, definition.value, {
             theme: theme,
@@ -230,8 +250,12 @@ function SequentialWorkflowDesigner(props) {
                     stepEditorProvider: stepEditorProvider
                 }
                 : false,
+            customActionHandler: customActionHandlerRef.current && customActionHandler,
             extensions: extensions
         });
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(designer);
+        }
         if (selectedStepId) {
             designer.selectStepById(selectedStepId);
         }
@@ -249,22 +273,62 @@ function SequentialWorkflowDesigner(props) {
         designerRef.current = designer;
     }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, extensions]);
     react.useEffect(function () {
-        return function () {
-            Presenter.tryDestroy(editorRootRef);
-            if (designerRef.current) {
-                designerRef.current.destroy();
-                designerRef.current = null;
-                // console.log('sqd: designer destroyed');
-            }
-        };
+        return tryDestroy;
     }, []);
-    return jsxRuntime.jsx("div", { ref: setPlaceholder, className: "sqd-designer-react" });
+    return jsxRuntime.jsx("div", { ref: setPlaceholder, "data-testid": "designer", className: "sqd-designer-react" });
+}
+
+var SequentialWorkflowDesignerController = /** @class */ (function () {
+    function SequentialWorkflowDesignerController() {
+        var _this = this;
+        this.designer = null;
+        /**
+         * @description Moves the viewport to the step with the animation.
+         */
+        this.moveViewportToStep = function (stepId) {
+            _this.getDesigner().moveViewportToStep(stepId);
+        };
+        /**
+         * @description Updates all badges.
+         */
+        this.updateBadges = function () {
+            _this.getDesigner().updateBadges();
+        };
+        // Nothing...
+    }
+    SequentialWorkflowDesignerController.create = function () {
+        return new SequentialWorkflowDesignerController();
+    };
+    /**
+     * @returns `true` if the controller is ready to be used, `false` otherwise.
+     */
+    SequentialWorkflowDesignerController.prototype.isReady = function () {
+        return !!this.designer;
+    };
+    SequentialWorkflowDesignerController.prototype.setDesigner = function (designer) {
+        if (designer && this.designer) {
+            throw new Error('Designer is already set');
+        }
+        this.designer = designer;
+    };
+    SequentialWorkflowDesignerController.prototype.getDesigner = function () {
+        if (!this.designer) {
+            throw new Error('Designer is not ready yet');
+        }
+        return this.designer;
+    };
+    return SequentialWorkflowDesignerController;
+}());
+function useSequentialWorkflowDesignerController(deps) {
+    return react.useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
 }
 
 exports.GlobalEditorWrapperContext = GlobalEditorWrapperContext;
 exports.Presenter = Presenter;
 exports.SequentialWorkflowDesigner = SequentialWorkflowDesigner;
+exports.SequentialWorkflowDesignerController = SequentialWorkflowDesignerController;
 exports.StepEditorWrapperContext = StepEditorWrapperContext;
 exports.useGlobalEditor = useGlobalEditor;
+exports.useSequentialWorkflowDesignerController = useSequentialWorkflowDesignerController;
 exports.useStepEditor = useStepEditor;
 exports.wrapDefinition = wrapDefinition;

package/lib/esm/index.js

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useEffect } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
 import { Designer } from 'sequential-workflow-designer';
 
 var Presenter = /** @class */ (function () {
@@ -147,6 +147,8 @@ function SequentialWorkflowDesigner(props) {
     var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
     var globalEditorRef = useRef(props.globalEditor);
     var stepEditorRef = useRef(props.stepEditor);
+    var controllerRef = useRef(props.controller);
+    var customActionHandlerRef = useRef(props.customActionHandler);
     var designerRef = useRef(null);
     var editorRootRef = useRef(null);
     var definition = props.definition;
@@ -179,6 +181,22 @@ function SequentialWorkflowDesigner(props) {
         }
         return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
     }
+    function customActionHandler(action, step) {
+        if (customActionHandlerRef.current) {
+            customActionHandlerRef.current(action, step);
+        }
+    }
+    function tryDestroy() {
+        Presenter.tryDestroy(editorRootRef);
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(null);
+        }
+        if (designerRef.current) {
+            designerRef.current.destroy();
+            designerRef.current = null;
+            // console.log('sqd: designer destroyed');
+        }
+    }
     useEffect(function () {
         onDefinitionChangeRef.current = props.onDefinitionChange;
     }, [props.onDefinitionChange]);
@@ -191,6 +209,9 @@ function SequentialWorkflowDesigner(props) {
     useEffect(function () {
         stepEditorRef.current = props.stepEditor;
     }, [props.stepEditor]);
+    useEffect(function () {
+        customActionHandlerRef.current = props.customActionHandler;
+    }, [props.customActionHandler]);
     useEffect(function () {
         if (!placeholder) {
             return;
@@ -213,8 +234,7 @@ function SequentialWorkflowDesigner(props) {
                 }
                 return;
             }
-            designerRef.current.destroy();
-            designerRef.current = null;
+            tryDestroy();
         }
         var designer = Designer.create(placeholder, definition.value, {
             theme: theme,
@@ -228,8 +248,12 @@ function SequentialWorkflowDesigner(props) {
                     stepEditorProvider: stepEditorProvider
                 }
                 : false,
+            customActionHandler: customActionHandlerRef.current && customActionHandler,
             extensions: extensions
         });
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(designer);
+        }
         if (selectedStepId) {
             designer.selectStepById(selectedStepId);
         }
@@ -247,16 +271,54 @@ function SequentialWorkflowDesigner(props) {
         designerRef.current = designer;
     }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, extensions]);
     useEffect(function () {
-        return function () {
-            Presenter.tryDestroy(editorRootRef);
-            if (designerRef.current) {
-                designerRef.current.destroy();
-                designerRef.current = null;
-                // console.log('sqd: designer destroyed');
-            }
-        };
+        return tryDestroy;
     }, []);
-    return jsx("div", { ref: setPlaceholder, className: "sqd-designer-react" });
+    return jsx("div", { ref: setPlaceholder, "data-testid": "designer", className: "sqd-designer-react" });
+}
+
+var SequentialWorkflowDesignerController = /** @class */ (function () {
+    function SequentialWorkflowDesignerController() {
+        var _this = this;
+        this.designer = null;
+        /**
+         * @description Moves the viewport to the step with the animation.
+         */
+        this.moveViewportToStep = function (stepId) {
+            _this.getDesigner().moveViewportToStep(stepId);
+        };
+        /**
+         * @description Updates all badges.
+         */
+        this.updateBadges = function () {
+            _this.getDesigner().updateBadges();
+        };
+        // Nothing...
+    }
+    SequentialWorkflowDesignerController.create = function () {
+        return new SequentialWorkflowDesignerController();
+    };
+    /**
+     * @returns `true` if the controller is ready to be used, `false` otherwise.
+     */
+    SequentialWorkflowDesignerController.prototype.isReady = function () {
+        return !!this.designer;
+    };
+    SequentialWorkflowDesignerController.prototype.setDesigner = function (designer) {
+        if (designer && this.designer) {
+            throw new Error('Designer is already set');
+        }
+        this.designer = designer;
+    };
+    SequentialWorkflowDesignerController.prototype.getDesigner = function () {
+        if (!this.designer) {
+            throw new Error('Designer is not ready yet');
+        }
+        return this.designer;
+    };
+    return SequentialWorkflowDesignerController;
+}());
+function useSequentialWorkflowDesignerController(deps) {
+    return useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
 }
 
-export { GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, StepEditorWrapperContext, useGlobalEditor, useStepEditor, wrapDefinition };
+export { GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, StepEditorWrapperContext, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { MutableRefObject, Context } from 'react';
+import { MutableRefObject, Context, DependencyList } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Definition, GlobalEditorContext, StepsConfiguration, ToolboxConfiguration, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
+import { Definition, GlobalEditorContext, Designer, StepsConfiguration, ToolboxConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
 
 declare class Presenter {
     static render(className: string, rootRef: MutableRefObject<ReactDOM.Root | null>, element: JSX.Element): HTMLElement;
@@ -30,6 +30,27 @@ interface WrappedDefinition<TDefinition extends Definition = Definition> {
 }
 declare function wrapDefinition<TDefinition extends Definition = Definition>(value: TDefinition, isValid?: boolean): WrappedDefinition<TDefinition>;
 
+declare class SequentialWorkflowDesignerController {
+    static create(): SequentialWorkflowDesignerController;
+    private designer;
+    private constructor();
+    /**
+     * @description Moves the viewport to the step with the animation.
+     */
+    readonly moveViewportToStep: (stepId: string) => void;
+    /**
+     * @description Updates all badges.
+     */
+    readonly updateBadges: () => void;
+    /**
+     * @returns `true` if the controller is ready to be used, `false` otherwise.
+     */
+    isReady(): boolean;
+    setDesigner(designer: Designer | null): void;
+    private getDesigner;
+}
+declare function useSequentialWorkflowDesignerController(deps?: DependencyList): SequentialWorkflowDesignerController;
+
 interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
     definition: WrappedDefinition<TDefinition>;
     onDefinitionChange: (state: WrappedDefinition<TDefinition>) => void;
@@ -46,6 +67,8 @@ interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
      * @description If true, the control bar will be displayed.
      */
     controlBar: boolean;
+    controller?: SequentialWorkflowDesignerController;
+    customActionHandler?: CustomActionHandler;
     extensions?: DesignerExtension[];
 }
 declare function SequentialWorkflowDesigner<TDefinition extends Definition>(props: SequentialWorkflowDesignerProps<TDefinition>): JSX.Element;
@@ -74,4 +97,4 @@ declare function StepEditorWrapperContext(props: {
     context: StepEditorContext;
 }): JSX.Element;
 
-export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useStepEditor, wrapDefinition };
+export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.9.2",
+	"version": "0.10.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.9.2"
+		"sequential-workflow-designer": "^0.10.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^2.8.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.9.2",
+		"sequential-workflow-designer": "^0.10.0",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",