sequential-workflow-editor - npm Package Compare versions

Comparing version 0.12.1 to 0.13.0

dist/index.umd.js

@@ -21,2 +21,10 @@ (function (global, factory) {
 	    }
+	    static toggleClass(element, isEnabled, className) {
+	        if (isEnabled) {
+	            element.classList.add(className);
+	        }
+	        else {
+	            element.classList.remove(className);
+	        }
+	    }
 	}
@@ -95,4 +103,9 @@
 	    });
+	    const onIsHiddenChanged = new sequentialWorkflowEditorModel.SimpleEvent();
 	    let child = null;
+	    function isHidden() {
+	        return child === null;
+	    }
 	    function setError(error) {
+	        const oldState = isHidden();
 	        if (child) {
@@ -109,2 +122,6 @@ view.removeChild(child);
 	        }
+	        const newState = isHidden();
+	        if (oldState !== newState) {
+	            onIsHiddenChanged.forward(newState);
+	        }
 	    }
@@ -115,3 +132,5 @@ function setDefaultError(result) {
 	    return {
+	        onIsHiddenChanged,
 	        view,
+	        isHidden,
 	        setError,
@@ -998,2 +1017,10 @@ setDefaultError
 
+	function hiddenValueEditor() {
+	    const container = valueEditorContainerComponent([]);
+	    return {
+	        view: container.view,
+	        isHidden: () => true
+	    };
+	}
+
 	const defaultMap = {
@@ -1012,4 +1039,4 @@ [anyVariablesValueEditorId]: anyVariablesValueEditor,
 	    [variableDefinitionsValueEditorId]: variableDefinitionsValueEditor,
-	    [sequentialWorkflowEditorModel.sequenceValueModelId]: null,
-	    [sequentialWorkflowEditorModel.branchesValueModelId]: null
+	    [sequentialWorkflowEditorModel.sequenceValueModelId]: hiddenValueEditor,
+	    [sequentialWorkflowEditorModel.branchesValueModelId]: hiddenValueEditor
 	};
@@ -1043,13 +1070,2 @@ class ValueEditorFactoryResolver {
 	    }
-	    isHidden(valueModelId, editorId) {
-	        const id = editorId !== null && editorId !== void 0 ? editorId : valueModelId;
-	        const editor = this.map[editorId !== null && editorId !== void 0 ? editorId : valueModelId];
-	        if (editor === null) {
-	            return true;
-	        }
-	        if (editor !== undefined) {
-	            return false;
-	        }
-	        throw new Error(`Editor id ${id} is not supported`);
-	    }
 	}
@@ -1249,3 +1265,4 @@
 	        view: validation.view,
-	        validate
+	        validate,
+	        isHidden: validation.isHidden
 	    };
@@ -1285,5 +1302,7 @@ }
 	        const nameClassName = propertyModel.path.last();
+	        const pathStr = propertyModel.path.toString();
 	        const view = Html.element('div', {
 	            class: `swe-property swe-name-${nameClassName}`
 	        });
+	        view.setAttribute('data-path', pathStr);
 	        const header = Html.element('div', {
@@ -1296,3 +1315,3 @@ class: 'swe-property-header'
 	        const i18nPrefix = stepType ? `step.${stepType}.property:` : 'root.property:';
-	        label.innerText = editorServices.i18n(i18nPrefix + propertyModel.path.toString(), propertyModel.label);
+	        label.innerText = editorServices.i18n(i18nPrefix + pathStr, propertyModel.label);
 	        header.appendChild(label);
@@ -1312,4 +1331,5 @@ view.appendChild(header);
 	        view.appendChild(valueEditor.view);
+	        let control = null;
 	        if (valueEditor.controlView) {
-	            const control = Html.element('div', {
+	            control = Html.element('div', {
 	                class: 'swe-property-header-control'
@@ -1320,23 +1340,43 @@ });
 	        }
-	        let validationError = null;
+	        let propertyValidationError = null;
 	        if (propertyModel.validator) {
 	            const valueContext = sequentialWorkflowEditorModel.ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext, editorServices.i18n);
 	            const validatorContext = sequentialWorkflowEditorModel.PropertyValidatorContext.create(valueContext);
-	            validationError = propertyValidationErrorComponent(propertyModel.validator, validatorContext);
-	            view.appendChild(validationError.view);
+	            propertyValidationError = propertyValidationErrorComponent(propertyModel.validator, validatorContext);
+	            view.appendChild(propertyValidationError.view);
 	        }
-	        const editor = new PropertyEditor(view, valueContext.onValueChanged, valueEditor, validationError);
-	        if (propertyModel.validator) {
+	        const editor = new PropertyEditor(view, valueContext.onValueChanged, valueEditor, control, propertyValidationError);
+	        if (propertyValidationError) {
 	            valueContext.onValueChanged.subscribe(editor.onValueChangedHandler);
 	        }
+	        if (valueEditor.onIsHiddenChanged) {
+	            valueEditor.onIsHiddenChanged.subscribe(editor.onEditorIsHiddenChanged);
+	        }
+	        editor.reloadVisibility();
 	        return editor;
 	    }
-	    constructor(view, onValueChanged, valueEditor, validationError) {
+	    constructor(view, onValueChanged, valueEditor, control, propertyValidationError) {
 	        this.view = view;
 	        this.onValueChanged = onValueChanged;
 	        this.valueEditor = valueEditor;
-	        this.validationError = validationError;
+	        this.control = control;
+	        this.propertyValidationError = propertyValidationError;
+	        this.onReloadVisibilityRequested = new StackedSimpleEvent();
+	        this.reloadVisibility = () => {
+	            const isValueEditorHidden = this.valueEditor.isHidden ? this.valueEditor.isHidden() : false;
+	            const isValidationErrorHidden = this.propertyValidationError ? this.propertyValidationError.isHidden() : true;
+	            const isPropertyEditorHidden = isValueEditorHidden && isValidationErrorHidden;
+	            Html.toggleClass(this.view, isPropertyEditorHidden, 'swe-hidden');
+	            Html.toggleClass(this.valueEditor.view, isValueEditorHidden, 'swe-hidden');
+	            if (this.control) {
+	                Html.toggleClass(this.control, isValueEditorHidden, 'swe-hidden');
+	            }
+	        };
 	        this.onValueChangedHandler = () => {
-	            this.revalidate();
+	            this.validateProperty();
 	        };
+	        this.onEditorIsHiddenChanged = () => {
+	            this.onReloadVisibilityRequested.push();
+	        };
+	        this.onReloadVisibilityRequested.subscribe(this.reloadVisibility);
 	    }
@@ -1347,7 +1387,8 @@ reloadDependencies() {
 	        }
-	        this.revalidate();
+	        this.validateProperty();
+	        this.onReloadVisibilityRequested.push();
 	    }
-	    revalidate() {
-	        if (this.validationError) {
-	            this.validationError.validate();
+	    validateProperty() {
+	        if (this.propertyValidationError) {
+	            this.propertyValidationError.validate();
 	        }
@@ -1391,5 +1432,2 @@ }
 	        for (const propertyModel of propertyModels) {
-	            if (editorServices.valueEditorFactoryResolver.isHidden(propertyModel.value.id, propertyModel.value.editorId)) {
-	                continue;
-	            }
 	            const propertyEditor = PropertyEditor.create(propertyModel, stepType, definitionContext, editorServices);
@@ -1396,0 +1434,0 @@ root.appendChild(propertyEditor.view);

lib/esm/index.js

@@ -18,2 +18,10 @@ import { SimpleEvent, DefaultValueContext, GeneratedStringContext, stringDictionaryValueModelId, sequenceValueModelId, branchesValueModelId, ValueContext, PropertyValidatorContext, defaultI18n, ModelActivator, DefinitionValidator, DefinitionContext, StepValidatorContext } from 'sequential-workflow-editor-model';
     }
+    static toggleClass(element, isEnabled, className) {
+        if (isEnabled) {
+            element.classList.add(className);
+        }
+        else {
+            element.classList.remove(className);
+        }
+    }
 }
@@ -92,4 +100,9 @@
     });
+    const onIsHiddenChanged = new SimpleEvent();
     let child = null;
+    function isHidden() {
+        return child === null;
+    }
     function setError(error) {
+        const oldState = isHidden();
         if (child) {
@@ -106,2 +119,6 @@ view.removeChild(child);
         }
+        const newState = isHidden();
+        if (oldState !== newState) {
+            onIsHiddenChanged.forward(newState);
+        }
     }
@@ -112,3 +129,5 @@ function setDefaultError(result) {
     return {
+        onIsHiddenChanged,
         view,
+        isHidden,
         setError,
@@ -995,2 +1014,10 @@ setDefaultError
 
+function hiddenValueEditor() {
+    const container = valueEditorContainerComponent([]);
+    return {
+        view: container.view,
+        isHidden: () => true
+    };
+}
+
 const defaultMap = {
@@ -1009,4 +1036,4 @@ [anyVariablesValueEditorId]: anyVariablesValueEditor,
     [variableDefinitionsValueEditorId]: variableDefinitionsValueEditor,
-    [sequenceValueModelId]: null,
-    [branchesValueModelId]: null
+    [sequenceValueModelId]: hiddenValueEditor,
+    [branchesValueModelId]: hiddenValueEditor
 };
@@ -1040,13 +1067,2 @@ class ValueEditorFactoryResolver {
     }
-    isHidden(valueModelId, editorId) {
-        const id = editorId !== null && editorId !== void 0 ? editorId : valueModelId;
-        const editor = this.map[editorId !== null && editorId !== void 0 ? editorId : valueModelId];
-        if (editor === null) {
-            return true;
-        }
-        if (editor !== undefined) {
-            return false;
-        }
-        throw new Error(`Editor id ${id} is not supported`);
-    }
 }
@@ -1063,3 +1079,4 @@
         view: validation.view,
-        validate
+        validate,
+        isHidden: validation.isHidden
     };
@@ -1099,5 +1116,7 @@ }
         const nameClassName = propertyModel.path.last();
+        const pathStr = propertyModel.path.toString();
         const view = Html.element('div', {
             class: `swe-property swe-name-${nameClassName}`
         });
+        view.setAttribute('data-path', pathStr);
         const header = Html.element('div', {
@@ -1110,3 +1129,3 @@ class: 'swe-property-header'
         const i18nPrefix = stepType ? `step.${stepType}.property:` : 'root.property:';
-        label.innerText = editorServices.i18n(i18nPrefix + propertyModel.path.toString(), propertyModel.label);
+        label.innerText = editorServices.i18n(i18nPrefix + pathStr, propertyModel.label);
         header.appendChild(label);
@@ -1126,4 +1145,5 @@ view.appendChild(header);
         view.appendChild(valueEditor.view);
+        let control = null;
         if (valueEditor.controlView) {
-            const control = Html.element('div', {
+            control = Html.element('div', {
                 class: 'swe-property-header-control'
@@ -1134,23 +1154,43 @@ });
         }
-        let validationError = null;
+        let propertyValidationError = null;
         if (propertyModel.validator) {
             const valueContext = ValueContext.createFromDefinitionContext(propertyModel.value, propertyModel, definitionContext, editorServices.i18n);
             const validatorContext = PropertyValidatorContext.create(valueContext);
-            validationError = propertyValidationErrorComponent(propertyModel.validator, validatorContext);
-            view.appendChild(validationError.view);
+            propertyValidationError = propertyValidationErrorComponent(propertyModel.validator, validatorContext);
+            view.appendChild(propertyValidationError.view);
         }
-        const editor = new PropertyEditor(view, valueContext.onValueChanged, valueEditor, validationError);
-        if (propertyModel.validator) {
+        const editor = new PropertyEditor(view, valueContext.onValueChanged, valueEditor, control, propertyValidationError);
+        if (propertyValidationError) {
             valueContext.onValueChanged.subscribe(editor.onValueChangedHandler);
         }
+        if (valueEditor.onIsHiddenChanged) {
+            valueEditor.onIsHiddenChanged.subscribe(editor.onEditorIsHiddenChanged);
+        }
+        editor.reloadVisibility();
         return editor;
     }
-    constructor(view, onValueChanged, valueEditor, validationError) {
+    constructor(view, onValueChanged, valueEditor, control, propertyValidationError) {
         this.view = view;
         this.onValueChanged = onValueChanged;
         this.valueEditor = valueEditor;
-        this.validationError = validationError;
+        this.control = control;
+        this.propertyValidationError = propertyValidationError;
+        this.onReloadVisibilityRequested = new StackedSimpleEvent();
+        this.reloadVisibility = () => {
+            const isValueEditorHidden = this.valueEditor.isHidden ? this.valueEditor.isHidden() : false;
+            const isValidationErrorHidden = this.propertyValidationError ? this.propertyValidationError.isHidden() : true;
+            const isPropertyEditorHidden = isValueEditorHidden && isValidationErrorHidden;
+            Html.toggleClass(this.view, isPropertyEditorHidden, 'swe-hidden');
+            Html.toggleClass(this.valueEditor.view, isValueEditorHidden, 'swe-hidden');
+            if (this.control) {
+                Html.toggleClass(this.control, isValueEditorHidden, 'swe-hidden');
+            }
+        };
         this.onValueChangedHandler = () => {
-            this.revalidate();
+            this.validateProperty();
         };
+        this.onEditorIsHiddenChanged = () => {
+            this.onReloadVisibilityRequested.push();
+        };
+        this.onReloadVisibilityRequested.subscribe(this.reloadVisibility);
     }
@@ -1161,7 +1201,8 @@ reloadDependencies() {
         }
-        this.revalidate();
+        this.validateProperty();
+        this.onReloadVisibilityRequested.push();
     }
-    revalidate() {
-        if (this.validationError) {
-            this.validationError.validate();
+    validateProperty() {
+        if (this.propertyValidationError) {
+            this.propertyValidationError.validate();
         }
@@ -1205,5 +1246,2 @@ }
         for (const propertyModel of propertyModels) {
-            if (editorServices.valueEditorFactoryResolver.isHidden(propertyModel.value.id, propertyModel.value.editorId)) {
-                continue;
-            }
             const propertyEditor = PropertyEditor.create(propertyModel, stepType, definitionContext, editorServices);
@@ -1210,0 +1248,0 @@ root.appendChild(propertyEditor.view);

lib/index.d.ts

@@ -81,2 +81,4 @@ import { SimpleEvent, I18n, ValueContext, ValidationResult, ValueType, SimpleEventListener, ValueModel, ModelActivator, StringValueModel, UidGenerator, DefinitionModel } from 'sequential-workflow-editor-model';
 interface ValidationErrorComponent extends Component {
+    onIsHiddenChanged: SimpleEvent<boolean>;
+    isHidden(): boolean;
     setError(error: string | null): void;
@@ -99,2 +101,3 @@ setDefaultError(result: ValidationResult): void;
     static element<T extends keyof HTMLElementTagNameMap>(name: T, attributes?: Attributes): HTMLElementTagNameMap[T];
+    static toggleClass(element: Element, isEnabled: boolean, className: string): void;
 }
@@ -145,8 +148,9 @@
     resolve(valueModelId: string, editorId: string | undefined): ValueEditorFactory;
-    isHidden(valueModelId: string, editorId: string | undefined): boolean;
 }
 
 interface ValueEditor<TValueModel extends ValueModel = ValueModel> extends Component {
+    onIsHiddenChanged?: SimpleEvent<boolean>;
     controlView?: HTMLElement;
     reloadDependencies?: () => void;
+    isHidden?: () => boolean;
 }
@@ -153,0 +157,0 @@ type ValueEditorFactory<TValueModel extends ValueModel = ValueModel> = (context: ValueContext<TValueModel>, services: EditorServices) => ValueEditor<TValueModel>;

package.json

 {
 	"name": "sequential-workflow-editor",
-	"version": "0.12.1",
+	"version": "0.13.0",
 	"type": "module",
@@ -49,7 +49,7 @@ "main": "./lib/esm/index.js",
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.12.1",
+		"sequential-workflow-editor-model": "^0.13.0",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.12.1",
+		"sequential-workflow-editor-model": "^0.13.0",
 		"sequential-workflow-model": "^0.2.0"
@@ -56,0 +56,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

182820

increased by2.88%

Lines of code

4631

increased by2.61%

Dependency changes

• + Addedsequential-workflow-editor-model@0.13.2(transitive)

• - Removedsequential-workflow-editor-model@0.12.1(transitive)

• Updatedsequential-workflow-editor-model@^0.13.0