update framework packages.

Author: b4rtaz

angular/designer/src/designer.component.ts

@@ -29,6 +29,7 @@ import {
 	ToolboxConfiguration,
 	UidGenerator,
 	ValidatorConfiguration,
+	PlaceholderConfiguration,
 	I18n,
 	PreferenceStorage
 } from 'sequential-workflow-designer';
@@ -69,6 +70,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	public stepsConfiguration?: StepsConfiguration;
 	@Input('validatorConfiguration')
 	public validatorConfiguration?: ValidatorConfiguration;
+	@Input('placeholderConfiguration')
+	public placeholderConfiguration?: PlaceholderConfiguration;
 	@Input('toolboxConfiguration')
 	public toolboxConfiguration?: AngularToolboxConfiguration | false;
 	@Input('controlBar')
@@ -214,6 +217,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 						},
 				steps: this.stepsConfiguration,
 				validator: this.validatorConfiguration,
+				placeholder: this.placeholderConfiguration,
 				toolbox: this.toolboxConfiguration
 					? {
 							isCollapsed: this.isToolboxCollapsed,

react/src/SequentialWorkflowDesigner.tsx

@@ -18,7 +18,8 @@ import {
 	StepEditorProvider,
 	KeyboardConfiguration,
 	I18n,
-	PreferenceStorage
+	PreferenceStorage,
+	PlaceholderConfiguration
 } from 'sequential-workflow-designer';
 import { RootEditorWrapperContext } from './RootEditorWrapper';
 import { StepEditorWrapperContext } from './StepEditorWrapper';
@@ -46,6 +47,7 @@ export interface SequentialWorkflowDesignerProps<TDefinition extends Definition>
 	undoStackSize?: number;
 	stepsConfiguration: StepsConfiguration;
 	validatorConfiguration?: ValidatorConfiguration;
+	placeholderConfiguration?: PlaceholderConfiguration;
 	toolboxConfiguration: false | ReactToolboxConfiguration;
 	isToolboxCollapsed?: boolean;
 	onIsToolboxCollapsedChanged?: (isCollapsed: boolean) => void;
@@ -63,7 +65,7 @@ export interface SequentialWorkflowDesignerProps<TDefinition extends Definition>
 }
 
 export function SequentialWorkflowDesigner<TDefinition extends Definition>(props: SequentialWorkflowDesignerProps<TDefinition>) {
-	const [placeholder, setPlaceholder] = useState<HTMLElement | null>(null);
+	const [root, setRoot] = useState<HTMLElement | null>(null);
 
 	const onDefinitionChangeRef = useRef(props.onDefinitionChange);
 	const onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
@@ -84,6 +86,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 	const undoStackSize = props.undoStackSize;
 	const steps = props.stepsConfiguration;
 	const validator = props.validatorConfiguration;
+	const placeholder = props.placeholderConfiguration;
 	const toolbox = props.toolboxConfiguration;
 	const isEditorCollapsed = props.isEditorCollapsed;
 	const isToolboxCollapsed = props.isToolboxCollapsed;
@@ -181,7 +184,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 	}, [props.customActionHandler]);
 
 	useEffect(() => {
-		if (!placeholder) {
+		if (!root) {
 			return;
 		}
 
@@ -215,7 +218,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 			tryDestroy();
 		}
 
-		const designer = Designer.create(placeholder, definition.value, {
+		const designer = Designer.create(root, definition.value, {
 			theme,
 			undoStackSize,
 			toolbox: toolbox
@@ -226,6 +229,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 				: false,
 			steps,
 			validator,
+			placeholder,
 			controlBar,
 			contextMenu,
 			keyboard,
@@ -272,7 +276,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 
 		designerRef.current = designer;
 	}, [
-		placeholder,
+		root,
 		definition,
 		selectedStepId,
 		isReadonly,
@@ -287,6 +291,7 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 		controlBar,
 		steps,
 		validator,
+		placeholder,
 		extensions,
 		i18n
 	]);
@@ -295,5 +300,5 @@ export function SequentialWorkflowDesigner<TDefinition extends Definition>(props
 		return tryDestroy;
 	}, []);
 
-	return <div ref={setPlaceholder} data-testid="designer" className="sqd-designer-react"></div>;
+	return <div ref={setRoot} data-testid="designer" className="sqd-designer-react"></div>;
 }

svelte/src/lib/SequentialWorkflowDesigner.svelte

@@ -11,6 +11,7 @@
 		type RootEditorContext,
 		type UndoStack,
 		type ValidatorConfiguration,
+		type PlaceholderConfiguration,
 		type UidGenerator,
 		type DesignerExtension,
 		type EditorsConfiguration,
@@ -50,6 +51,7 @@
 	export let undoStackSize: number | undefined = undefined;
 	export let undoStack: UndoStack | undefined = undefined;
 	export let validator: ValidatorConfiguration | undefined = undefined;
+	export let placeholder: PlaceholderConfiguration | undefined = undefined;
 	export let definitionWalker: DefinitionWalker | undefined = undefined;
 	export let extensions: DesignerExtension[] | undefined = undefined;
 	export let i18n: I18n | undefined = undefined;
@@ -79,7 +81,7 @@
 
 	let isFirstChange = true;
 	let designer: Designer | null = null;
-	let placeholder: HTMLElement;
+	let root: HTMLElement;
 
 	function init() {
 		const editors: EditorsConfiguration | false =
@@ -123,7 +125,7 @@
 				}
 			: false;
 
-		const d = Designer.create(placeholder, definition, {
+		const d = Designer.create(root, definition, {
 			steps,
 			controlBar,
 			toolbox: _toolbox,
@@ -135,6 +137,7 @@
 			undoStackSize,
 			undoStack,
 			validator,
+			placeholder,
 			definitionWalker,
 			extensions,
 			isReadonly,
@@ -205,4 +208,4 @@
 	});
 </script>
 
-<div bind:this={placeholder} class="sqd-designer-svelte" />
+<div bind:this={root} class="sqd-designer-svelte" />