Properties panel module

packages/form-js-editor/assets/form-js-editor.css

@@ -8,9 +8,6 @@
   --color-context-pad-item-fill: var(--color-grey-225-10-35);
   --color-context-pad-item-hover-fill: var(--color-black);
 
-  --color-properties-container-background: var(--color-white);
-  --color-properties-container-border: var(--color-grey-225-10-80);
-
   --color-dragula-background: var(--color-blue-205-100-45);
   --color-dragula-border: var(--color-blue-205-100-45);
   --color-dragula-mirror-background: var(--color-white);
@@ -27,6 +24,12 @@
   --color-palette-field-hover-background: var(--color-grey-225-10-95);
 }
 
+.fjs-properties-container {
+  --color-properties-container-background: var(--color-white);
+  --color-properties-container-border: var(--color-grey-225-10-80);
+  --properties-panel-width: 300px;
+}
+
 .fjs-editor-container {
   height: 100%;
   width: 100%;
@@ -41,7 +44,7 @@
 
 .fjs-editor-container .fjs-form-container,
 .fjs-editor-container .fjs-editor-palette-container,
-.fjs-editor-container .fjs-properties-container {
+.fjs-editor-container .fjs-editor-properties-container {
   overflow-y: auto;
   position: relative;
 }
@@ -188,22 +191,25 @@
  * Properties Panel
  */
 .fjs-editor-container .fjs-properties-container {
-  width: 300px;
+  height: 100%;
+}
+
+.fjs-properties-container {
   background-color: var(--color-properties-container-background);
+  width: var(--properties-panel-width);
   border-left: solid 1px var(--color-properties-container-border);
-  height: 100%;
   color: var(--color-text);
 }
 
-.fjs-editor-container .fjs-properties-panel {
+.fjs-properties-container .fjs-properties-panel {
   height: 100%;
 }
 
-.fjs-editor-container .fjs-properties-panel * {
+.fjs-properties-container .fjs-properties-panel * {
   box-sizing: border-box;
 }
 
-.fjs-editor-container .bio-properties-panel-header-icon svg {
+.fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
   transform: scale(1.3);
 }
 

packages/form-js-editor/src/FormEditor.js

@@ -9,6 +9,7 @@ import KeyboardModule from './features/keyboard';
 import ModelingModule from './features/modeling';
 import SelectionModule from './features/selection';
 import PaletteModule from './features/palette';
+import PropertiesPanelModule from './features/properties-panel';
 
 const ids = new Ids([ 32, 36, 1 ]);
 
@@ -298,7 +299,8 @@ export default class FormEditor {
       EditorActionsModule,
       KeyboardModule,
       SelectionModule,
-      PaletteModule
+      PaletteModule,
+      PropertiesPanelModule
     ];
   }
 

packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js

@@ -0,0 +1,128 @@
+import { PropertiesPanel } from '@bpmn-io/properties-panel';
+
+import {
+  useCallback,
+  useState,
+  useLayoutEffect
+} from 'preact/hooks';
+
+import { FormPropertiesPanelContext } from './context';
+
+import { PropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
+import { PropertiesPanelPlaceholderProvider } from './PropertiesPanelPlaceholderProvider';
+
+import {
+  CustomValuesGroup,
+  GeneralGroup,
+  ValidationGroup,
+  ValuesGroups
+} from './groups';
+
+function getGroups(field, editField) {
+
+  if (!field) {
+    return [];
+  }
+
+  const groups = [
+    GeneralGroup(field, editField),
+    ...ValuesGroups(field, editField),
+    ValidationGroup(field, editField),
+    CustomValuesGroup(field, editField)
+  ];
+
+  // contract: if a group returns null, it should not be displayed at all
+  return groups.filter(group => group !== null);
+}
+
+export default function FormPropertiesPanel(props) {
+  const {
+    eventBus,
+    injector
+  } = props;
+
+  const formEditor = injector.get('formEditor');
+  const modeling = injector.get('modeling');
+  const selection = injector.get('selection');
+
+  const { schema } = formEditor._getState();
+
+  const [ state, setState ] = useState({
+    selectedFormField: selection.get() || schema
+  });
+
+  const _update = (field) => {
+
+    setState({
+      ...state,
+      selectedFormField: field
+    });
+
+    // notify interested parties on property panel updates
+    eventBus.fire('propertiesPanel.updated', {
+      formField: field
+    });
+  };
+
+  useLayoutEffect(() => {
+    function onSelectionChange(event) {
+      _update(event.selection || schema);
+    }
+
+    eventBus.on('selection.changed', onSelectionChange);
+
+    return () => {
+      eventBus.off('selection.changed', onSelectionChange);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const onFieldChanged = () => {
+
+      /**
+       * TODO(pinussilvestrus): update with actual updated element,
+       * once we have a proper updater/change support
+       */
+      _update(selection.get() || schema);
+    };
+
+    eventBus.on('changed', onFieldChanged);
+
+    return () => {
+      eventBus.off('changed', onFieldChanged);
+    };
+  }, []);
+
+  const selectedFormField = state.selectedFormField;
+
+  const propertiesPanelContext = {
+    getService(type, strict = true) {
+      return injector.get(type, strict);
+    }
+  };
+
+  const onFocus = () => eventBus.fire('propertiesPanel.focusin');
+
+  const onBlur = () => eventBus.fire('propertiesPanel.focusout');
+
+  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [ modeling ]);
+
+  return (
+    <div
+      class="fjs-properties-panel"
+      data-field={ selectedFormField && selectedFormField.id }
+      onFocusCapture={ onFocus }
+      onBlurCapture={ onBlur }
+    >
+      <FormPropertiesPanelContext.Provider value={ propertiesPanelContext }>
+        <PropertiesPanel
+          element={ selectedFormField }
+          eventBus={ eventBus }
+          groups={ getGroups(selectedFormField, editField) }
+          headerProvider={ PropertiesPanelHeaderProvider }
+          placeholderProvider={ PropertiesPanelPlaceholderProvider }
+        />
+      </FormPropertiesPanelContext.Provider>
+    </div>
+  );
+}

packages/form-js-editor/src/render/components/properties-panel/PropertiesPanelHeaderProvider.js → packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -2,7 +2,7 @@ import {
   textToLabel
 } from './Util';
 
-import { iconsByType } from '../icons';
+import { iconsByType } from '../../render/components/icons';
 
 const labelsByType = {
   button: 'BUTTON',

packages/form-js-editor/src/features/properties-panel/PropertiesPanelRenderer.js

@@ -0,0 +1,103 @@
+import PropertiesPanel from './PropertiesPanel';
+
+import {
+  render
+} from 'preact';
+
+import {
+  domify,
+  query as domQuery
+} from 'min-dom';
+
+/**
+ * @typedef { { parent: Element } } PropertiesPanelConfig
+ * @typedef { import('../../core/EventBus').default } EventBus
+ * @typedef { import('../../types').Injector } Injector
+ */
+
+/**
+ * @param {PropertiesPanelConfig} propertiesPanelConfig
+ * @param {Injector} injector
+ * @param {EventBus} eventBus
+ */
+export default class PropertiesPanelRenderer {
+
+  constructor(propertiesPanelConfig, injector, eventBus) {
+    const {
+      parent
+    } = propertiesPanelConfig || {};
+
+    this._eventBus = eventBus;
+    this._injector = injector;
+
+    this._container = domify('<div class="fjs-properties-container" input-handle-modified-keys="y,z"></div>');
+
+    if (parent) {
+      this.attachTo(parent);
+    }
+
+    this._eventBus.once('formEditor.rendered', 500, () => {
+      this._render();
+    });
+  }
+
+
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
+   */
+  attachTo(container) {
+    if (!container) {
+      throw new Error('container required');
+    }
+
+    if (typeof container === 'string') {
+      container = domQuery(container);
+    }
+
+    // (1) detach from old parent
+    this.detach();
+
+    // (2) append to parent container
+    container.appendChild(this._container);
+
+    // (3) notify interested parties
+    this._eventBus.fire('propertiesPanel.attach');
+  }
+
+  /**
+   * Detach the properties panel from its parent node.
+   */
+  detach() {
+    const parentNode = this._container.parentNode;
+
+    if (parentNode) {
+      parentNode.removeChild(this._container);
+
+      this._eventBus.fire('propertiesPanel.detach');
+    }
+  }
+
+  _render() {
+    render(
+      <PropertiesPanel
+        eventBus={ this._eventBus }
+        injector={ this._injector }
+      />,
+      this._container
+    );
+
+    this._eventBus.fire('propertiesPanel.rendered');
+  }
+
+  _destroy() {
+    if (this._container) {
+      render(null, this._container);
+
+      this._eventBus.fire('propertiesPanel.destroyed');
+    }
+  }
+}
+
+PropertiesPanelRenderer.$inject = [ 'config.propertiesPanel', 'injector', 'eventBus' ];

packages/form-js-editor/src/features/properties-panel/context/FormPropertiesPanelContext.js

@@ -0,0 +1,15 @@
+import { createContext } from 'preact';
+
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
+ */
+function getService(type, strict) {}
+
+const PropertiesPanelContext = createContext({
+  getService
+});
+
+export default PropertiesPanelContext;

packages/form-js-editor/src/features/properties-panel/context/index.js

@@ -0,0 +1 @@
+export { default as FormPropertiesPanelContext } from './FormPropertiesPanelContext';

packages/form-js-editor/src/render/components/properties-panel/entries/ColumnsEntry.js → packages/form-js-editor/src/features/properties-panel/entries/ColumnsEntry.js

@@ -1,6 +1,6 @@
 import { Default } from '@bpmn-io/form-js-viewer';
 
-import { useService } from '../../../hooks';
+import { useService } from '../hooks';
 
 import { NumberFieldEntry, isNumberFieldEntryEdited } from '@bpmn-io/properties-panel';
 

packages/form-js-editor/src/render/components/properties-panel/entries/CustomValueEntry.js → packages/form-js-editor/src/features/properties-panel/entries/CustomValueEntry.js

@@ -1,6 +1,6 @@
 import { get } from 'min-dash';
 
-import { useService } from '../../../hooks';
+import { useService } from '../hooks';
 
 import { TextFieldEntry } from '@bpmn-io/properties-panel';
 

packages/form-js-editor/src/render/components/properties-panel/entries/DefaultValueEntry.js → packages/form-js-editor/src/features/properties-panel/entries/DefaultValueEntry.js

@@ -9,7 +9,7 @@ import {
 
 import { get } from 'min-dash';
 
-import { useService } from '../../../hooks';
+import { useService } from '../hooks';
 
 import { INPUTS, VALUES_INPUTS } from '../Util';
 

packages/form-js-editor/src/render/components/properties-panel/entries/DescriptionEntry.js → packages/form-js-editor/src/features/properties-panel/entries/DescriptionEntry.js

@@ -1,6 +1,6 @@
 import { get } from 'min-dash';
 
-import { useService } from '../../../hooks';
+import { useService } from '../hooks';
 
 import { INPUTS } from '../Util';
 

packages/form-js-editor/src/render/components/properties-panel/entries/IdEntry.js → packages/form-js-editor/src/features/properties-panel/entries/IdEntry.js

@@ -1,6 +1,6 @@
 import { get, isUndefined } from 'min-dash';
 
-import { useService } from '../../../hooks';
+import { useService } from '../hooks';
 
 import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 

packages/form-js-editor/src/render/components/properties-panel/entries/InputKeyValuesSourceEntry.js → packages/form-js-editor/src/features/properties-panel/entries/InputKeyValuesSourceEntry.js

@@ -1,6 +1,6 @@
 import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 import { get } from 'min-dash';
-import { useService } from '../../../hooks';
+import { useService } from '../hooks';
 import { VALUES_SOURCES, VALUES_SOURCES_PATHS } from './ValuesSourceUtil';
 
 export default function InputKeyValuesSourceEntry(props) {