diff --git a/src/invent/ui/core/component.py b/src/invent/ui/core/component.py index f161bf7..9e37bb8 100644 --- a/src/invent/ui/core/component.py +++ b/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 diff --git a/src/tools/builder/public/python/builder.py b/src/tools/builder/public/python/builder.py index 0a4183c..afc3963 100644 --- a/src/tools/builder/public/python/builder.py +++ b/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): diff --git a/src/tools/builder/src/views/builder/builder-model.ts b/src/tools/builder/src/views/builder/builder-model.ts index fa7badb..d20c591 100644 --- a/src/tools/builder/src/views/builder/builder-model.ts +++ b/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 diff --git a/src/tools/builder/src/views/builder/components/page-editor/page-editor-model.ts b/src/tools/builder/src/views/builder/components/page-editor/page-editor-model.ts index 8defde8..c285150 100644 --- a/src/tools/builder/src/views/builder/components/page-editor/page-editor-model.ts +++ b/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, 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, 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); } diff --git a/src/tools/builder/src/views/builder/components/page-editor/page-editor.vue b/src/tools/builder/src/views/builder/components/page-editor/page-editor.vue index f17accb..6a493d6 100644 --- a/src/tools/builder/src/views/builder/components/page-editor/page-editor.vue +++ b/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)" />