sequential-workflow-designer-react 0.16.9 → 0.17.0

package/README.md

@@ -34,7 +34,7 @@ import {
 import {
   SequentialWorkflowDesigner,
   wrapDefinition,
-  useGlobalEditor,
+  useRootEditor,
   useStepEditor
 } from 'sequential-workflow-designer-react';
 ```
@@ -59,11 +59,11 @@ const stepsConfiguration: StepsConfiguration = { /* ... */ };
 const validatorConfiguration: ValidatorConfiguration = { /* ... */ };
 ```
 
-Create the global editor component:
+Create the root editor component:
 
 ```tsx
-function GlobalEditor() {
-  const { properties, setProperty, definition } = useGlobalEditor();
+function RootEditor() {
+  const { properties, setProperty, definition, isReadonly } = useRootEditor();
 
   function onSpeedChanged(e) {
     setProperty('speed', e.target.value);
@@ -82,7 +82,7 @@ Create the step editor component:
 
 ```tsx
 function StepEditor() {
-  const { type, componentType, name, setName, properties, setProperty, definition } = useStepEditor();
+  const { type, componentType, name, setName, properties, setProperty, definition, isReadonly } = useStepEditor();
 
   function onNameChanged(e) {
     setName(e.target.value);
@@ -108,7 +108,7 @@ At the end attach the designer.
   toolboxConfiguration={toolboxConfiguration}
   controlBar={true}
   contextMenu={true}
-  globalEditor={<GlobalEditor />}
+  rootEditor={<RootEditor />}
   stepEditor={<StepEditor />}>
   />
 ```
@@ -121,7 +121,7 @@ You can hide any UI component.
   toolboxConfiguration={false}
   controlBar={false}
   contextMenu={false}
-  globalEditor={false}
+  rootEditor={false}
   stepEditor={false}>
   />
 ```

package/lib/cjs/index.cjs

@@ -52,23 +52,28 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-if (!window.sqdGlobalEditorContext) {
-    window.sqdGlobalEditorContext = react.createContext(null);
+if (!window.sqdRootEditorContext) {
+    window.sqdRootEditorContext = react.createContext(null);
 }
-var globalEditorContext = window.sqdGlobalEditorContext;
-function useGlobalEditor() {
-    var wrapper = react.useContext(globalEditorContext);
+var rootEditorContext = window.sqdRootEditorContext;
+function useRootEditor() {
+    var wrapper = react.useContext(rootEditorContext);
     if (!wrapper) {
-        throw new Error('Cannot find global editor context');
+        throw new Error('Cannot find root editor context');
     }
     return wrapper;
 }
-function GlobalEditorWrapperContext(props) {
+/**
+ * @deprecated Use `useRootEditor` instead.
+ */
+var useGlobalEditor = useRootEditor;
+function RootEditorWrapperContext(props) {
     var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
     function createWrapper() {
         return {
             properties: props.definition.properties,
             definition: props.definition,
+            isReadonly: props.isReadonly,
             setProperty: setProperty
         };
     }
@@ -80,7 +85,7 @@ function GlobalEditorWrapperContext(props) {
         props.context.notifyPropertiesChanged();
         forward();
     }
-    return jsxRuntime.jsx(globalEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+    return jsxRuntime.jsx(rootEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
 }
 
 if (!window.sqdStepEditorContext) {
@@ -105,6 +110,7 @@ function StepEditorWrapperContext(props) {
             properties: props.step.properties,
             step: props.step,
             definition: props.definition,
+            isReadonly: props.isReadonly,
             setName: setName,
             setProperty: setProperty,
             notifyPropertiesChanged: notifyPropertiesChanged,
@@ -151,7 +157,7 @@ function SequentialWorkflowDesigner(props) {
     var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
     var onIsEditorCollapsedChangedRef = react.useRef(props.onIsEditorCollapsedChanged);
     var onIsToolboxCollapsedChangedRef = react.useRef(props.onIsToolboxCollapsedChanged);
-    var globalEditorRef = react.useRef(props.globalEditor);
+    var rootEditorRef = react.useRef(props.rootEditor);
     var stepEditorRef = react.useRef(props.stepEditor);
     var controllerRef = react.useRef(props.controller);
     var customActionHandlerRef = react.useRef(props.customActionHandler);
@@ -174,29 +180,32 @@ function SequentialWorkflowDesigner(props) {
     if (props.controlBar === undefined) {
         throw new Error('The "controlBar" property is not set');
     }
+    if (props.globalEditor) {
+        throw new Error('The "globalEditor" property is renamed to "rootEditor"');
+    }
     function forwardDefinition() {
         if (designerRef.current) {
             var def = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
             onDefinitionChangeRef.current(def);
         }
     }
-    function globalEditorProvider(def, context) {
-        if (!globalEditorRef.current) {
-            throw new Error('Global editor is not provided');
+    function rootEditorProvider(def, context, isReadonly) {
+        if (!rootEditorRef.current) {
+            throw new Error('Root editor is not provided');
         }
-        if (react.isValidElement(globalEditorRef.current)) {
-            return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
+        if (react.isValidElement(rootEditorRef.current)) {
+            return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(RootEditorWrapperContext, __assign({ definition: def, context: context, isReadonly: isReadonly }, { children: rootEditorRef.current })));
         }
-        return globalEditorRef.current(def, context);
+        return rootEditorRef.current(def, context, isReadonly);
     }
-    function stepEditorProvider(step, context, def) {
+    function stepEditorProvider(step, context, def, isReadonly) {
         if (!stepEditorRef.current) {
             throw new Error('Step editor is not provided');
         }
         if (react.isValidElement(stepEditorRef.current)) {
-            return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, definition: def, context: context }, { children: stepEditorRef.current })));
+            return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, definition: def, context: context, isReadonly: isReadonly }, { children: stepEditorRef.current })));
         }
-        return stepEditorRef.current(step, context, def);
+        return stepEditorRef.current(step, context, def, isReadonly);
     }
     function customActionHandler(action, step, sequence, context) {
         if (customActionHandlerRef.current) {
@@ -227,8 +236,8 @@ function SequentialWorkflowDesigner(props) {
         onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
     }, [props.onIsToolboxCollapsedChanged]);
     react.useEffect(function () {
-        globalEditorRef.current = props.globalEditor;
-    }, [props.globalEditor]);
+        rootEditorRef.current = props.rootEditor;
+    }, [props.rootEditor]);
     react.useEffect(function () {
         stepEditorRef.current = props.stepEditor;
     }, [props.stepEditor]);
@@ -277,10 +286,10 @@ function SequentialWorkflowDesigner(props) {
             controlBar: controlBar,
             contextMenu: contextMenu,
             keyboard: keyboard,
-            editors: globalEditorRef.current && stepEditorRef.current
+            editors: rootEditorRef.current && stepEditorRef.current
                 ? {
                     isCollapsed: isEditorCollapsed,
-                    globalEditorProvider: globalEditorProvider,
+                    rootEditorProvider: rootEditorProvider,
                     stepEditorProvider: stepEditorProvider
                 }
                 : false,
@@ -387,12 +396,13 @@ function useSequentialWorkflowDesignerController(deps) {
     return react.useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
 }
 
-exports.GlobalEditorWrapperContext = GlobalEditorWrapperContext;
 exports.Presenter = Presenter;
+exports.RootEditorWrapperContext = RootEditorWrapperContext;
 exports.SequentialWorkflowDesigner = SequentialWorkflowDesigner;
 exports.SequentialWorkflowDesignerController = SequentialWorkflowDesignerController;
 exports.StepEditorWrapperContext = StepEditorWrapperContext;
 exports.useGlobalEditor = useGlobalEditor;
+exports.useRootEditor = useRootEditor;
 exports.useSequentialWorkflowDesignerController = useSequentialWorkflowDesignerController;
 exports.useStepEditor = useStepEditor;
 exports.wrapDefinition = wrapDefinition;

package/lib/esm/index.js

@@ -50,23 +50,28 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-if (!window.sqdGlobalEditorContext) {
-    window.sqdGlobalEditorContext = createContext(null);
+if (!window.sqdRootEditorContext) {
+    window.sqdRootEditorContext = createContext(null);
 }
-var globalEditorContext = window.sqdGlobalEditorContext;
-function useGlobalEditor() {
-    var wrapper = useContext(globalEditorContext);
+var rootEditorContext = window.sqdRootEditorContext;
+function useRootEditor() {
+    var wrapper = useContext(rootEditorContext);
     if (!wrapper) {
-        throw new Error('Cannot find global editor context');
+        throw new Error('Cannot find root editor context');
     }
     return wrapper;
 }
-function GlobalEditorWrapperContext(props) {
+/**
+ * @deprecated Use `useRootEditor` instead.
+ */
+var useGlobalEditor = useRootEditor;
+function RootEditorWrapperContext(props) {
     var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
     function createWrapper() {
         return {
             properties: props.definition.properties,
             definition: props.definition,
+            isReadonly: props.isReadonly,
             setProperty: setProperty
         };
     }
@@ -78,7 +83,7 @@ function GlobalEditorWrapperContext(props) {
         props.context.notifyPropertiesChanged();
         forward();
     }
-    return jsx(globalEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+    return jsx(rootEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
 }
 
 if (!window.sqdStepEditorContext) {
@@ -103,6 +108,7 @@ function StepEditorWrapperContext(props) {
             properties: props.step.properties,
             step: props.step,
             definition: props.definition,
+            isReadonly: props.isReadonly,
             setName: setName,
             setProperty: setProperty,
             notifyPropertiesChanged: notifyPropertiesChanged,
@@ -149,7 +155,7 @@ function SequentialWorkflowDesigner(props) {
     var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
     var onIsEditorCollapsedChangedRef = useRef(props.onIsEditorCollapsedChanged);
     var onIsToolboxCollapsedChangedRef = useRef(props.onIsToolboxCollapsedChanged);
-    var globalEditorRef = useRef(props.globalEditor);
+    var rootEditorRef = useRef(props.rootEditor);
     var stepEditorRef = useRef(props.stepEditor);
     var controllerRef = useRef(props.controller);
     var customActionHandlerRef = useRef(props.customActionHandler);
@@ -172,29 +178,32 @@ function SequentialWorkflowDesigner(props) {
     if (props.controlBar === undefined) {
         throw new Error('The "controlBar" property is not set');
     }
+    if (props.globalEditor) {
+        throw new Error('The "globalEditor" property is renamed to "rootEditor"');
+    }
     function forwardDefinition() {
         if (designerRef.current) {
             var def = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
             onDefinitionChangeRef.current(def);
         }
     }
-    function globalEditorProvider(def, context) {
-        if (!globalEditorRef.current) {
-            throw new Error('Global editor is not provided');
+    function rootEditorProvider(def, context, isReadonly) {
+        if (!rootEditorRef.current) {
+            throw new Error('Root editor is not provided');
         }
-        if (isValidElement(globalEditorRef.current)) {
-            return Presenter.render(externalEditorClassName, editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
+        if (isValidElement(rootEditorRef.current)) {
+            return Presenter.render(externalEditorClassName, editorRootRef, jsx(RootEditorWrapperContext, __assign({ definition: def, context: context, isReadonly: isReadonly }, { children: rootEditorRef.current })));
         }
-        return globalEditorRef.current(def, context);
+        return rootEditorRef.current(def, context, isReadonly);
     }
-    function stepEditorProvider(step, context, def) {
+    function stepEditorProvider(step, context, def, isReadonly) {
         if (!stepEditorRef.current) {
             throw new Error('Step editor is not provided');
         }
         if (isValidElement(stepEditorRef.current)) {
-            return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, definition: def, context: context }, { children: stepEditorRef.current })));
+            return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, definition: def, context: context, isReadonly: isReadonly }, { children: stepEditorRef.current })));
         }
-        return stepEditorRef.current(step, context, def);
+        return stepEditorRef.current(step, context, def, isReadonly);
     }
     function customActionHandler(action, step, sequence, context) {
         if (customActionHandlerRef.current) {
@@ -225,8 +234,8 @@ function SequentialWorkflowDesigner(props) {
         onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
     }, [props.onIsToolboxCollapsedChanged]);
     useEffect(function () {
-        globalEditorRef.current = props.globalEditor;
-    }, [props.globalEditor]);
+        rootEditorRef.current = props.rootEditor;
+    }, [props.rootEditor]);
     useEffect(function () {
         stepEditorRef.current = props.stepEditor;
     }, [props.stepEditor]);
@@ -275,10 +284,10 @@ function SequentialWorkflowDesigner(props) {
             controlBar: controlBar,
             contextMenu: contextMenu,
             keyboard: keyboard,
-            editors: globalEditorRef.current && stepEditorRef.current
+            editors: rootEditorRef.current && stepEditorRef.current
                 ? {
                     isCollapsed: isEditorCollapsed,
-                    globalEditorProvider: globalEditorProvider,
+                    rootEditorProvider: rootEditorProvider,
                     stepEditorProvider: stepEditorProvider
                 }
                 : false,
@@ -385,4 +394,4 @@ function useSequentialWorkflowDesignerController(deps) {
     return useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
 }
 
-export { GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, StepEditorWrapperContext, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };
+export { Presenter, RootEditorWrapperContext, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, StepEditorWrapperContext, useGlobalEditor, useRootEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MutableRefObject, Context, ReactNode, DependencyList } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Definition, GlobalEditorContext, Designer, ToolboxConfiguration, GlobalEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, KeyboardConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
+import { Definition, RootEditorContext, Designer, ToolboxConfiguration, RootEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, KeyboardConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
 
 declare class Presenter {
     static render(className: string, rootRef: MutableRefObject<ReactDOM.Root | null>, element: JSX.Element): HTMLElement;
@@ -10,21 +10,31 @@ declare class Presenter {
 
 declare global {
     interface Window {
-        sqdGlobalEditorContext?: Context<GlobalEditorWrapper<Definition> | null>;
+        sqdRootEditorContext?: Context<RootEditorWrapper<Definition> | null>;
     }
 }
-interface GlobalEditorWrapper<TDefinition extends Definition> {
+interface RootEditorWrapper<TDefinition extends Definition> {
     readonly properties: TDefinition['properties'];
     readonly definition: TDefinition;
+    readonly isReadonly: boolean;
     setProperty(name: keyof TDefinition['properties'], value: TDefinition['properties'][typeof name]): void;
 }
-declare function useGlobalEditor<TDefinition extends Definition = Definition>(): GlobalEditorWrapper<TDefinition>;
-interface GlobalEditorWrapperContextProps {
+/**
+ * @deprecated Use `RootEditorWrapper` instead.
+ */
+type GlobalEditorWrapper<TDefinition extends Definition> = RootEditorWrapper<TDefinition>;
+declare function useRootEditor<TDefinition extends Definition = Definition>(): RootEditorWrapper<TDefinition>;
+/**
+ * @deprecated Use `useRootEditor` instead.
+ */
+declare const useGlobalEditor: typeof useRootEditor;
+interface RootEditorWrapperContextProps {
     children: ReactNode;
     definition: Definition;
-    context: GlobalEditorContext;
+    context: RootEditorContext;
+    isReadonly: boolean;
 }
-declare function GlobalEditorWrapperContext(props: GlobalEditorWrapperContextProps): JSX.Element;
+declare function RootEditorWrapperContext(props: RootEditorWrapperContextProps): JSX.Element;
 
 interface WrappedDefinition<TDefinition extends Definition = Definition> {
     readonly value: TDefinition;
@@ -64,7 +74,7 @@ interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
     selectedStepId?: string | null;
     onSelectedStepIdChanged?: (stepId: string | null) => void;
     isReadonly?: boolean;
-    globalEditor: false | JSX.Element | GlobalEditorProvider;
+    rootEditor: false | JSX.Element | RootEditorProvider;
     stepEditor: false | JSX.Element | StepEditorProvider;
     isEditorCollapsed?: boolean;
     onIsEditorCollapsedChanged?: (isCollapsed: boolean) => void;
@@ -100,6 +110,7 @@ interface StepEditorWrapper<TStep extends Step = Step, TDefinition extends Defin
     readonly properties: TStep['properties'];
     readonly step: TStep;
     readonly definition: TDefinition;
+    readonly isReadonly: boolean;
     setName(name: string): void;
     setProperty(name: keyof TStep['properties'], value: TStep['properties'][typeof name]): void;
     notifyPropertiesChanged(): void;
@@ -111,7 +122,8 @@ interface StepEditorWrapperContextProps {
     step: Step;
     definition: Definition;
     context: StepEditorContext;
+    isReadonly: boolean;
 }
 declare function StepEditorWrapperContext(props: StepEditorWrapperContextProps): JSX.Element;
 
-export { GlobalEditorWrapper, GlobalEditorWrapperContext, GlobalEditorWrapperContextProps, Presenter, ReactToolboxConfiguration, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, StepEditorWrapperContextProps, WrappedDefinition, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };
+export { GlobalEditorWrapper, Presenter, ReactToolboxConfiguration, RootEditorWrapper, RootEditorWrapperContext, RootEditorWrapperContextProps, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, StepEditorWrapperContextProps, WrappedDefinition, useGlobalEditor, useRootEditor, 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.16.9",
+	"version": "0.17.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.16.9"
+		"sequential-workflow-designer": "^0.17.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.16.9",
+		"sequential-workflow-designer": "^0.17.0",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",