feat(editor): render properties panel per default

Author: Niklas Kiefer

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/render/components/FormEditor.js

@@ -17,11 +17,9 @@ import useService from '../hooks/useService';
 
 import { DragAndDropContext } from '../context';
 
-import PropertiesPanel from './properties-panel/PropertiesPanel';
-
 import dragula from 'dragula';
 
-import { ListDeleteIcon } from './properties-panel/icons';
+import { ListDeleteIcon } from '../../features/properties-panel/icons';
 
 import { iconsByType } from './icons';
 
@@ -151,13 +149,16 @@ export default function FormEditor(props) {
         modeling = useService('modeling'),
         selection = useService('selection'),
         palette = useService('palette'),
-        paletteConfig = useService('config.palette');
+        paletteConfig = useService('config.palette'),
+        propertiesPanel = useService('propertiesPanel'),
+        propertiesPanelConfig = useService('config.propertiesPanel');
 
   const { schema } = formEditor._getState();
 
   const paletteRef = useRef(null);
+  const propertiesPanelRef = useRef(null);
 
-  const [ selectedFormField, setSelection ] = useState(schema);
+  const [ , setSelection ] = useState(schema);
 
   useEffect(() => {
     function handleSelectionChanged(event) {
@@ -254,7 +255,7 @@ export default function FormEditor(props) {
     };
   }, []);
 
-  // fire event after first render to notify interested parties
+  // fire event after render to notify interested parties
   useEffect(() => {
     eventBus.fire('formEditor.rendered');
   }, []);
@@ -295,8 +296,6 @@ export default function FormEditor(props) {
 
   const onReset = useCallback(() => {}, []);
 
-  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [ modeling ]);
-
   // attach default palette
   const hasDefaultPalette = defaultPalette(paletteConfig);
 
@@ -306,6 +305,15 @@ export default function FormEditor(props) {
     }
   }, [ palette, paletteRef, hasDefaultPalette ]);
 
+  // attach default properties panel
+  const hasDefaultPropertiesPanel = defaultPropertiesPanel(propertiesPanelConfig);
+
+  useEffect(() => {
+    if (hasDefaultPropertiesPanel) {
+      propertiesPanel.attachTo(propertiesPanelRef.current);
+    }
+  }, [ propertiesPanelRef, propertiesPanel, hasDefaultPropertiesPanel ]);
+
   return (
     <div class="fjs-form-editor">
 
@@ -323,9 +331,7 @@ export default function FormEditor(props) {
         <CreatePreview />
       </DragAndDropContext.Provider>
 
-      <div class="fjs-properties-container">
-        <PropertiesPanel field={ selectedFormField } editField={ editField } />
-      </div>
+      { hasDefaultPropertiesPanel && <div class="fjs-editor-properties-container" ref={ propertiesPanelRef } /> }
     </div>
   );
 }
@@ -379,4 +385,8 @@ function CreatePreview(props) {
 
 function defaultPalette(paletteConfig) {
   return !(paletteConfig && paletteConfig.parent);
+}
+
+function defaultPropertiesPanel(propertiesPanelConfig) {
+  return !(propertiesPanelConfig && propertiesPanelConfig.parent);
 }

packages/form-js-editor/test/spec/FormEditor.spec.js

@@ -592,6 +592,59 @@ describe('FormEditor', function() {
 
   describe('properties panel', function() {
 
+    it('should provide propertiesPanel module', async function() {
+
+      // when
+      formEditor = await createFormEditor({
+        container,
+        schema
+      });
+
+      expect(formEditor.get('propertiesPanel')).to.exist;
+    });
+
+
+    it('should render propertiesPanel per default', async function() {
+
+      // given
+      formEditor = await createFormEditor({
+        container,
+        schema
+      });
+
+      // when
+      const propertiesContainer = domQuery('.fjs-editor-properties-container', container);
+
+      // then
+      expect(propertiesContainer).to.exist;
+    });
+
+
+    it('should render propertiesPanel on given container', async function() {
+
+      // given
+      const propertiesParent = document.createElement('div');
+      document.body.appendChild(propertiesParent);
+
+      formEditor = await createFormEditor({
+        container,
+        schema,
+        propertiesPanel: {
+          parent: propertiesParent
+        }
+      });
+
+      // when
+      const propertiesContainer = domQuery('.fjs-properties-container', propertiesParent);
+
+      // then
+      expect(domQuery('.fjs-editor-properties-container', container)).to.not.exist;
+      expect(propertiesContainer).to.exist;
+
+      document.body.removeChild(propertiesParent);
+    });
+
+
     describe('selection behavior', function() {
 
       const schema = {