diff --git a/packages/form-js-editor/src/features/editor-actions/FormEditorActions.js b/packages/form-js-editor/src/features/editor-actions/FormEditorActions.js index 8ed8dc221..5bc1f0b4e 100644 --- a/packages/form-js-editor/src/features/editor-actions/FormEditorActions.js +++ b/packages/form-js-editor/src/features/editor-actions/FormEditorActions.js @@ -17,6 +17,7 @@ export default class FormEditorActions extends EditorActions { _registerDefaultActions(injector) { const commandStack = injector.get('commandStack', false), formFieldRegistry = injector.get('formFieldRegistry', false), + modeling = injector.get('modeling', false), selection = injector.get('selection', false); if (commandStack) { @@ -48,6 +49,25 @@ export default class FormEditorActions extends EditorActions { selection.set(formField); } }); + + } + + if (modeling && selection) { + + // @ts-ignore + this.register('removeSelection', () => { + const selectedFormField = selection.get(); + + if (!selectedFormField) { + return; + } + + const parentField = formFieldRegistry.get(selectedFormField._parent); + + const index = getFormFieldIndex(parentField, selectedFormField); + + modeling.removeFormField(selectedFormField, parentField, index); + }); } } } @@ -55,4 +75,19 @@ export default class FormEditorActions extends EditorActions { FormEditorActions.$inject = [ 'eventBus', 'injector' -]; \ No newline at end of file +]; + + +// helper //////////// + +function getFormFieldIndex(parent, formField) { + let fieldFormIndex = parent.components.length; + + parent.components.forEach(({ id }, index) => { + if (id === formField.id) { + fieldFormIndex = index; + } + }); + + return fieldFormIndex; +} \ No newline at end of file diff --git a/packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js b/packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js index 4825b79b1..4be2656f2 100644 --- a/packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js +++ b/packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js @@ -53,6 +53,19 @@ export default class FormEditorKeyboardBindings { } }); + // delete selected field + // DEL + addListener('removeSelection', (context) => { + + const { keyEvent } = context; + + if (isKey([ 'Backspace', 'Delete', 'Del' ], keyEvent)) { + + editorActions.trigger('removeSelection'); + + return true; + } + }); } } diff --git a/packages/form-js-playground/src/Playground.js b/packages/form-js-playground/src/Playground.js index 8fd8ba2d4..9adb3a308 100644 --- a/packages/form-js-playground/src/Playground.js +++ b/packages/form-js-playground/src/Playground.js @@ -11,7 +11,7 @@ import { PlaygroundRoot } from './components/PlaygroundRoot'; * actions?: { display: Boolean } * container?: Element * data: any - * editor?: { inlinePropertiesPanel: Boolean } + * editor?: { inlinePropertiesPanel: Boolean, keyboard?: { bindTo: Element } } * exporter?: { name: String, version: String } * schema: any * } } FormPlaygroundOptions diff --git a/packages/form-js-playground/src/components/PlaygroundRoot.js b/packages/form-js-playground/src/components/PlaygroundRoot.js index 10f537d71..4712481b7 100644 --- a/packages/form-js-playground/src/components/PlaygroundRoot.js +++ b/packages/form-js-playground/src/components/PlaygroundRoot.js @@ -35,7 +35,8 @@ export function PlaygroundRoot(props) { } = actionsConfig; const { - inlinePropertiesPanel = true + inlinePropertiesPanel = true, + keyboard = {} } = editorConfig; const paletteContainerRef = useRef(); @@ -107,7 +108,8 @@ export function PlaygroundRoot(props) { propertiesPanel: { parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current }, - exporter: exporterConfig + exporter: exporterConfig, + keyboard }); paletteRef.current = formEditor.get('palette'); diff --git a/packages/form-js-playground/test/spec/Playground.spec.js b/packages/form-js-playground/test/spec/Playground.spec.js index 63b3bfeff..8f976dd72 100644 --- a/packages/form-js-playground/test/spec/Playground.spec.js +++ b/packages/form-js-playground/test/spec/Playground.spec.js @@ -82,7 +82,10 @@ describe('playground', function() { playground = new Playground({ container, schema, - data + data, + editor: { + keyboard: { bindTo: document } + } }); // then