0.11.3. (#29)

b4rtaz · web-flow · commit 4ce6415a46dd · 2023-11-15T23:52:25.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.11.3
+
+This version improves the behavior of the `Dynamic` value editor, when the sub editor contains a control visible in the property header.
+
 ## 0.11.2
 
 This version adds a generic type to the `ChoiceValueModel` interface.
diff --git a/demos/webpack-app/package.json b/demos/webpack-app/package.json
@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.2.0",
 		"sequential-workflow-designer": "^0.17.0",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.11.2",
-		"sequential-workflow-editor": "^0.11.2"
+		"sequential-workflow-editor-model": "^0.11.3",
+		"sequential-workflow-editor": "^0.11.3"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",
diff --git a/demos/webpack-app/src/editors/app.css b/demos/webpack-app/src/editors/app.css
@@ -0,0 +1,7 @@
+.string-magic-editor input {
+	background: #e9e8ff;
+	border-color: #c0bef0;
+}
+.string-magic-editor input:focus {
+	border-color: #9794d9;
+}
diff --git a/demos/webpack-app/src/editors/app.ts b/demos/webpack-app/src/editors/app.ts
@@ -1,17 +1,24 @@
 import { Designer, Uid } from 'sequential-workflow-designer';
-import { EditorProvider } from 'sequential-workflow-editor';
+import { EditorProvider, StringValueEditorEditorExtension } from 'sequential-workflow-editor';
 import { definitionModel } from './model/definition-model';
 
 import 'sequential-workflow-designer/css/designer.css';
 import 'sequential-workflow-designer/css/designer-light.css';
 import 'sequential-workflow-editor/css/editor.css';
+import './app.css';
 
 export class App {
 	public static create(): App {
 		const placeholder = document.getElementById('designer') as HTMLElement;
 
 		const editorProvider = EditorProvider.create(definitionModel, {
-			uidGenerator: Uid.next
+			uidGenerator: Uid.next,
+			extensions: [
+				StringValueEditorEditorExtension.create({
+					editorId: 'string-magic',
+					class: 'string-magic-editor'
+				})
+			]
 		});
 
 		const designer = Designer.create(placeholder, editorProvider.activateDefinition(), {
diff --git a/demos/webpack-app/src/editors/model/dynamic-step-model.ts b/demos/webpack-app/src/editors/model/dynamic-step-model.ts
@@ -3,7 +3,9 @@ import {
 	createBooleanValueModel,
 	createStepModel,
 	createDynamicValueModel,
-	createStringValueModel
+	createStringValueModel,
+	StringDictionary,
+	createStringDictionaryValueModel
 } from 'sequential-workflow-editor-model';
 import { Step } from 'sequential-workflow-model';
 
@@ -12,6 +14,7 @@ export interface DynamicStepModel extends Step {
 	componentType: 'task';
 	properties: {
 		example: Dynamic<string | boolean>;
+		twoHeaderControls: Dynamic<StringDictionary | string>;
 	};
 }
 
@@ -21,4 +24,10 @@ export const dynamicStepModel = createStepModel<DynamicStepModel>('dynamic', 'ta
 			models: [createStringValueModel({}), createBooleanValueModel({})]
 		})
 	);
+
+	step.property('twoHeaderControls').value(
+		createDynamicValueModel({
+			models: [createStringDictionaryValueModel({}), createStringValueModel({})]
+		})
+	);
 });
diff --git a/demos/webpack-app/src/editors/model/string-step-model.ts b/demos/webpack-app/src/editors/model/string-step-model.ts
@@ -20,11 +20,14 @@ export const stringStepModel = createStepModel<StringStepModel>('string', 'task'
 			defaultValue: 'Some default value'
 		})
 	);
-	step.property('minLength3').value(
-		createStringValueModel({
-			minLength: 3
-		})
-	);
+	step.property('minLength3')
+		.value(
+			createStringValueModel({
+				minLength: 3,
+				editorId: 'string-magic'
+			})
+		)
+		.hint('This editor has a different color than the others, because it uses the string editor with custom CSS class.');
 	step.property('patternYear').value(
 		createStringValueModel({
 			pattern: /^\d{4}$/
diff --git a/editor/css/editor.css b/editor/css/editor.css
@@ -116,7 +116,7 @@
 	border-style: dashed;
 }
 .swe-select-small {
-	padding: 3px 5px;
+	padding: 4px 5px;
 }
 .swe-prepended-input {
 	width: 100%;
@@ -198,3 +198,9 @@
 	margin-bottom: 10px;
 	color: #777;
 }
+
+/* dynamic */
+
+.swe-dynamic-sub-control {
+	margin-left: 6px;
+}
diff --git a/editor/package.json b/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.11.2",
+	"version": "0.11.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -46,11 +46,11 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.11.2",
+		"sequential-workflow-editor-model": "^0.11.3",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.11.2",
+		"sequential-workflow-editor-model": "^0.11.3",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {
diff --git a/editor/src/components/row-component.spec.ts b/editor/src/components/row-component.spec.ts
@@ -25,4 +25,12 @@ describe('RowComponent', () => {
 		expect(row.view.children[1].className).toBe('swe-col swe-col-2');
 		expect(row.view.children[2].className).toBe('swe-col');
 	});
+
+	it('adds custom class', () => {
+		const row = rowComponent([], {
+			class: 'custom-class'
+		});
+
+		expect(row.view.className).toBe('swe-row custom-class');
+	});
 });
diff --git a/editor/src/components/row-component.ts b/editor/src/components/row-component.ts
@@ -3,11 +3,17 @@ import { Component } from './component';
 
 export interface RowComponentConfiguration {
 	cols?: (number | null)[];
+	class?: string;
 }
 
 export function rowComponent(elements: HTMLElement[], configuration?: RowComponentConfiguration): Component {
+	let viewClass = 'swe-row';
+	if (configuration && configuration.class) {
+		viewClass += ' ' + configuration.class;
+	}
+
 	const view = Html.element('div', {
-		class: 'swe-row'
+		class: viewClass
 	});
 	elements.forEach((element, index) => {
 		const grow = configuration && configuration.cols ? configuration.cols[index] : 1;
diff --git a/editor/src/value-editors/dynamic/dynamic-value-editor.ts b/editor/src/value-editors/dynamic/dynamic-value-editor.ts
@@ -21,6 +21,10 @@ export function dynamicValueEditor(context: ValueContext<DynamicValueModel>, ser
 	function reloadEditor() {
 		if (editor) {
 			placeholder.removeChild(editor.view);
+			if (subControl) {
+				control.removeChild(subControl);
+				subControl = null;
+			}
 		}
 
 		const value = context.getValue();
@@ -32,6 +36,13 @@ export function dynamicValueEditor(context: ValueContext<DynamicValueModel>, ser
 		const childContext = context.createChildContext(model);
 		editor = services.valueEditorFactoryResolver.resolve(model.id, model.editorId)(childContext, services);
 		placeholder.appendChild(editor.view);
+		if (editor.controlView) {
+			subControl = Html.element('span', {
+				class: 'swe-dynamic-sub-control'
+			});
+			subControl.appendChild(editor.controlView);
+			control.appendChild(subControl);
+		}
 	}
 
 	function onTypeChanged() {
@@ -46,24 +57,31 @@ export function dynamicValueEditor(context: ValueContext<DynamicValueModel>, ser
 	}
 
 	const startValue = context.getValue();
+
+	const control = Html.element('div', {
+		class: 'swe-dynamic-control'
+	});
+
 	const subModelSelect = selectComponent({
 		size: 'small'
 	});
 	subModelSelect.setValues(context.model.subModels.map(model => model.label));
 	subModelSelect.selectIndex(context.model.subModels.findIndex(model => model.id === startValue.modelId));
 	subModelSelect.onSelected.subscribe(onTypeChanged);
+	control.appendChild(subModelSelect.view);
 
 	const placeholder = Html.element('div', {
 		class: 'swe-dynamic-placeholder'
 	});
 	const container = valueEditorContainerComponent([placeholder]);
 	let editor: ValueEditor | null = null;
+	let subControl: HTMLElement | null = null;
 
 	reloadEditor();
 
 	return {
 		view: container.view,
-		controlView: subModelSelect.view,
+		controlView: control,
 		reloadDependencies
 	};
 }
diff --git a/editor/src/value-editors/index.ts b/editor/src/value-editors/index.ts
@@ -1,2 +1,3 @@
+export * from './string';
 export * from './value-editor-factory-resolver';
 export * from './value-editor';
diff --git a/editor/src/value-editors/string/index.ts b/editor/src/value-editors/string/index.ts
@@ -0,0 +1,3 @@
+export * from './string-value-editor-configuration';
+export * from './string-value-editor-extension';
+export * from './string-value-editor';
diff --git a/editor/src/value-editors/string/string-value-editor-configuration.ts b/editor/src/value-editors/string/string-value-editor-configuration.ts
@@ -0,0 +1,4 @@
+export interface StringValueEditorConfiguration {
+	editorId: string;
+	class?: string;
+}
diff --git a/editor/src/value-editors/string/string-value-editor-extension.ts b/editor/src/value-editors/string/string-value-editor-extension.ts
@@ -0,0 +1,19 @@
+import { EditorExtension, ValueEditorExtension } from '../../editor-extension';
+import { ValueEditorFactory } from '../value-editor';
+import { createStringValueEditor } from './string-value-editor';
+import { StringValueEditorConfiguration } from './string-value-editor-configuration';
+
+export class StringValueEditorEditorExtension implements EditorExtension {
+	public static create(configuration: StringValueEditorConfiguration) {
+		return new StringValueEditorEditorExtension(configuration);
+	}
+
+	private constructor(private readonly configuration: StringValueEditorConfiguration) {}
+
+	public readonly valueEditors: ValueEditorExtension[] = [
+		{
+			editorId: this.configuration.editorId,
+			factory: createStringValueEditor(this.configuration) as ValueEditorFactory
+		}
+	];
+}
diff --git a/editor/src/value-editors/string/string-value-editor.ts b/editor/src/value-editors/string/string-value-editor.ts
@@ -5,38 +5,43 @@ import { valueEditorContainerComponent } from '../../components/value-editor-con
 import { rowComponent } from '../../components/row-component';
 import { InputComponent, inputComponent } from '../../components/input-component';
 import { TextareaComponent, textareaComponent } from '../../components/textarea-component';
+import { StringValueEditorConfiguration } from './string-value-editor-configuration';
 
 export const stringValueEditorId = 'string';
 
 const defaultMultiline = 4;
 
-export function stringValueEditor(context: ValueContext<StringValueModel>): ValueEditor<StringValueModel> {
-	function validate() {
-		validation.setDefaultError(context.validate());
-	}
+export function createStringValueEditor(configuration?: StringValueEditorConfiguration) {
+	return (context: ValueContext<StringValueModel>): ValueEditor<StringValueModel> => {
+		function validate() {
+			validation.setDefaultError(context.validate());
+		}
 
-	const startValue = context.getValue();
-	const multiline = context.model.configuration.multiline;
+		const startValue = context.getValue();
+		const multiline = context.model.configuration.multiline;
 
-	const input: InputComponent | TextareaComponent = multiline
-		? textareaComponent(startValue, {
-				rows: multiline === true ? defaultMultiline : multiline
-		  })
-		: inputComponent(startValue);
+		const input: InputComponent | TextareaComponent = multiline
+			? textareaComponent(startValue, {
+					rows: multiline === true ? defaultMultiline : multiline
+			  })
+			: inputComponent(startValue);
 
-	input.onChanged.subscribe(value => {
-		context.setValue(value);
-		validate();
-	});
+		input.onChanged.subscribe(value => {
+			context.setValue(value);
+			validate();
+		});
 
-	const row = rowComponent([input.view]);
+		const row = rowComponent([input.view], {
+			class: configuration?.class
+		});
 
-	const validation = validationErrorComponent();
-	const container = valueEditorContainerComponent([row.view, validation.view]);
+		const validation = validationErrorComponent();
+		const container = valueEditorContainerComponent([row.view, validation.view]);
 
-	validate();
+		validate();
 
-	return {
-		view: container.view
+		return {
+			view: container.view
+		};
 	};
 }
diff --git a/editor/src/value-editors/value-editor-factory-resolver.ts b/editor/src/value-editors/value-editor-factory-resolver.ts
@@ -1,5 +1,5 @@
 import { ValueEditorFactory } from './value-editor';
-import { stringValueEditor, stringValueEditorId } from './string/string-value-editor';
+import { createStringValueEditor, stringValueEditorId } from './string/string-value-editor';
 import { numberValueEditor, numberValueEditorId } from './number/number-value-editor';
 import { variableDefinitionsValueEditor, variableDefinitionsValueEditorId } from './variable-definitions/variable-definitions-value-editor';
 import { nullableVariableValueEditor, nullableVariableValueEditorId } from './nullable-variable/nullable-variable-value-editor';
@@ -26,7 +26,7 @@ const defaultMap: ValueEditorMap = {
 	[generatedStringValueEditorId]: generatedStringValueEditor as ValueEditorFactory,
 	[nullableVariableValueEditorId]: nullableVariableValueEditor as ValueEditorFactory,
 	[nullableVariableDefinitionValueEditorId]: nullableVariableDefinitionValueEditor as ValueEditorFactory,
-	[stringValueEditorId]: stringValueEditor as ValueEditorFactory,
+	[stringValueEditorId]: createStringValueEditor() as ValueEditorFactory,
 	[stringDictionaryValueModelId]: stringDictionaryValueEditor as ValueEditorFactory,
 	[numberValueEditorId]: numberValueEditor as ValueEditorFactory,
 	[variableDefinitionsValueEditorId]: variableDefinitionsValueEditor as ValueEditorFactory,
diff --git a/model/package.json b/model/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor-model",
-	"version": "0.11.2",
+	"version": "0.11.3",
 	"homepage": "https://nocode-js.com/",
 	"author": {
 		"name": "NoCode JS",

Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,7 @@`
`116`	`116`	`border-style: dashed;`
`117`	`117`	`}`
`118`	`118`	`.swe-select-small {`
`119`		`- padding: 3px 5px;`
	`119`	`+ padding: 4px 5px;`
`120`	`120`	`}`
`121`	`121`	`.swe-prepended-input {`
`122`	`122`	`width: 100%;`
`@@ -198,3 +198,9 @@`
`198`	`198`	`margin-bottom: 10px;`
`199`	`199`	`color: #777;`
`200`	`200`	`}`
	`201`	`+`
	`202`	`+/* dynamic */`
	`203`	`+`
	`204`	`+.swe-dynamic-sub-control {`
	`205`	`+ margin-left: 6px;`
	`206`	`+}`