feat(playground): support components to be rendered flexible

Closes #292

Author: Niklas Kiefer

packages/form-js-playground/package.json

@@ -61,6 +61,7 @@
   ],
   "devDependencies": {
     "css-loader": "^6.3.0",
+    "min-dash": "^3.8.1",
     "min-dom": "^3.2.1",
     "rollup-plugin-css-only": "^3.1.0",
     "style-loader": "^3.3.0"

packages/form-js-playground/src/Playground.js

@@ -8,10 +8,11 @@ import { PlaygroundRoot } from './components/PlaygroundRoot';
 
 /**
  * @typedef { {
- *  container: Element,
+ *  container?: Element,
  *  schema: any,
  *  data: any,
  *  editor?: { inlinePropertiesPanel: Boolean }
+ *  actions?: { display: Boolean }
  * } } FormPlaygroundOptions
  */
 
@@ -36,7 +37,9 @@ export default function Playground(options) {
 
   container.classList.add('fjs-pgl-parent');
 
-  parent.appendChild(container);
+  if (parent) {
+    parent.appendChild(container);
+  }
 
   const handleDrop = fileDrop('Drop a form file', function(files) {
     const file = files[0];
@@ -51,6 +54,16 @@ export default function Playground(options) {
     }
   });
 
+  const withRef = function(fn) {
+    return function(...args) {
+      if (!ref) {
+        throw new Error('Playground is not initialized.');
+      }
+
+      fn(...args);
+    };
+  };
+
   container.addEventListener('dragover', handleDrop);
 
   render(
@@ -93,4 +106,28 @@ export default function Playground(options) {
   this.destroy = function() {
     this.emit('destroy');
   };
+
+  this.attachEditorContainer = withRef(function(node) {
+    return ref.attachEditorContainer(node);
+  });
+
+  this.attachPreviewContainer = withRef(function(node) {
+    return ref.attachFormContainer(node);
+  });
+
+  this.attachDataContainer = withRef(function(node) {
+    return ref.attachDataContainer(node);
+  });
+
+  this.attachResultContainer = withRef(function(node) {
+    return ref.attachResultContainer(node);
+  });
+
+  this.attachPaletteContainer = withRef(function(node) {
+    return ref.attachPaletteContainer(node);
+  });
+
+  this.attachPropertiesPanelContainer = withRef(function(node) {
+    return ref.attachPropertiesPanelContainer(node);
+  });
 }

packages/form-js-playground/src/components/PlaygroundRoot.js

@@ -24,10 +24,15 @@ import './PlaygroundRoot.css';
 export function PlaygroundRoot(props) {
 
   const {
+    actions: actionsConfig = {},
     editor: editorConfig = {},
     emit
   } = props;
 
+  const {
+    display: displayActions = true
+  } = actionsConfig;
+
   const {
     inlinePropertiesPanel = true
   } = editorConfig;
@@ -39,10 +44,12 @@ export function PlaygroundRoot(props) {
   const resultContainerRef = useRef();
   const propertiesPanelContainerRef = useRef();
 
+  const paletteRef = useRef();
   const formEditorRef = useRef();
   const formRef = useRef();
   const dataEditorRef = useRef();
   const resultViewRef = useRef();
+  const propertiesPanelRef = useRef();
 
   const [ showEmbed, setShowEmbed ] = useState(false);
 
@@ -57,6 +64,12 @@ export function PlaygroundRoot(props) {
   // pipe to playground API
   useEffect(() => {
     props.onInit({
+      attachDataContainer: (node) => dataEditorRef.current.attachTo(node),
+      attachEditorContainer: (node) => formEditorRef.current.attachTo(node),
+      attachFormContainer: (node) => formRef.current.attachTo(node),
+      attachPaletteContainer: (node) => paletteRef.current.attachTo(node),
+      attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),
+      attachResultContainer: (node) => resultViewRef.current.attachTo(node),
       get: (name, strict) => formEditorRef.current.get(name, strict),
       setSchema: setInitialSchema
     });
@@ -89,6 +102,9 @@ export function PlaygroundRoot(props) {
       }
     });
 
+    paletteRef.current = formEditor.get('palette');
+    propertiesPanelRef.current = formEditor.get('propertiesPanel');
+
     formEditor.on('changed', () => {
       setSchema(formEditor.getSchema());
     });
@@ -178,19 +194,26 @@ export function PlaygroundRoot(props) {
       <div class="fjs-pgl-main">
 
         <Section name="Form Definition">
-          <Section.HeaderItem>
-            <button
-              class="fjs-pgl-button"
-              title="Download form definition"
-              onClick={ handleDownload }
-            >Download</button>
-          </Section.HeaderItem>
-          <Section.HeaderItem>
-            <button
-              class="fjs-pgl-button"
-              onClick={ showEmbedModal }
-            >Embed</button>
-          </Section.HeaderItem>
+
+          {
+            displayActions && <Section.HeaderItem>
+              <button
+                class="fjs-pgl-button"
+                title="Download form definition"
+                onClick={ handleDownload }
+              >Download</button>
+            </Section.HeaderItem>
+          }
+
+          {
+            displayActions && <Section.HeaderItem>
+              <button
+                class="fjs-pgl-button"
+                onClick={ showEmbedModal }
+              >Embed</button>
+            </Section.HeaderItem>
+          }
+
           <div ref={ editorContainerRef } class="fjs-pgl-form-container"></div>
         </Section>
         <Section name="Form Preview">