Fix page load for multi-page apps.

src/invent/ui/core/component.py

@@ -767,14 +767,3 @@ def update_children(self):
         """
         for counter, child in enumerate(self.content, start=1):
             self.update_child_wrapper(child, counter)
-
-    def as_dict(self):
-        """
-        Return a dict representation of the container, including the ordered
-        content of children.
-        """
-        result = super().as_dict()
-        result["properties"]["content"] = [
-            child.as_dict() for child in self.content
-        ]
-        return result

src/tools/builder/public/python/builder.py

@@ -35,10 +35,6 @@ def __init__(self):
         # It will be one of "left-of", "right-of", "above", "below".
         self._insertion_position = None
 
-        # TODO: We might eventually open with an existing app, but here we just create
-        # one with a single, empty page.
-        self.app = App(name="Invent Demo", content=[Page(name="Page 1")])
-
     def set_js_builder_model(self, js_builder_model):
         """
         Connects the Python side of the view model to the JS side.
@@ -99,6 +95,15 @@ def add_page(self, page_name):
 
         self._app.content.append(new_page)
 
+        # Inject the JS event handlers to make component selection and drag-and-drop
+        # work.
+        self._add_js_event_handlers_to_component(new_page)
+
+        # Add elements to the DOM to visualize empty containers.
+        self._manage_empty_element_in_container(new_page)
+
+        self.pprint_app()
+
         return json.dumps(new_page.as_dict())
 
     def delete_page(self, page_name):

src/tools/builder/src/views/builder/builder-model.ts

@@ -69,6 +69,8 @@ export class BuilderModel extends ViewModelBase {
 		// Load App.
 		BuilderUtilities.getAppFromDict(data.app);
 
+		// TODO: Not sure we need to do this on the next tick - please check after
+		// PyCon! :)
 		nextTick(() => {
 			this.getPages();
 			this.setDefaultPage();
@@ -101,7 +103,7 @@ export class BuilderModel extends ViewModelBase {
 		const psdc: any = BuilderUtilities.exportAsPyScriptApp(datastore, code);
 
 		return {
-			app: JSON.stringify(BuilderUtilities.getAppAsDict()),
+			app: JSON.stringify(BuilderUtilities.getAppAsDict(), null, 2),
 			blocks: JSON.stringify(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace())),
 			datastore: JSON.stringify(this.state.datastore),
 			psdc

src/tools/builder/src/views/builder/components/page-editor/page-editor-model.ts

@@ -25,9 +25,9 @@ class PageEditorModel extends ComponentModelBase {
 		`;
 	}
 
-	public onPageLoad(pages: Array<PageModel>, activePage: PageModel, addWidgetToPage: Function): void {
-		const pageEditor: HTMLIFrameElement = document.getElementById(`${activePage.properties.id}-editor`) as HTMLIFrameElement;
-		const pageElement: HTMLElement = BuilderUtilities.getPageElementById(activePage.properties.id);
+	public onPageLoad(pages: Array<PageModel>, page: PageModel, addWidgetToPage: Function): void {
+		const pageEditor: HTMLIFrameElement = document.getElementById(`${page.properties.id}-editor`) as HTMLIFrameElement;
+		const pageElement: HTMLElement = BuilderUtilities.getPageElementById(page.properties.id);
 		pageElement.style.display = "grid";
 		pageEditor.contentDocument?.body.insertBefore(pageElement, pageEditor.contentDocument?.body.firstChild);
 	}

src/tools/builder/src/views/builder/components/page-editor/page-editor.vue

@@ -7,7 +7,7 @@
             :id="`${page.properties.id}-editor`"
             :srcdoc="component.getSrcDoc()" 
             class="w-full h-full"
-            @load="component.onPageLoad(pages, activePage, addWidgetToPage)"
+            @load="component.onPageLoad(pages, page, addWidgetToPage)"
         />
     </div>
 </template>