npm - @operato/board - Versions diffs - 1.0.25 → 1.0.26 - Mend

@operato/board 1.0.25 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.0.26](https://github.com/hatiolab/operato/compare/v1.0.25...v1.0.26) (2022-10-12)
+### :bug: Bug Fix
+* board inspector ([71c224b](https://github.com/hatiolab/operato/commit/71c224b78ff28f7a45dd68ebb10fb4e03cd31bd6))
 ### [1.0.25](https://github.com/hatiolab/operato/compare/v1.0.24...v1.0.25) (2022-10-10)

package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts CHANGED Viewed

@@ -1,14 +1,17 @@
+import '@operato/input/ox-input-search.js';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import Sortable from 'sortablejs';
 import { Component, Scene } from '@hatiolab/things-scene';
 export declare class SceneInspector extends LitElement {
     static styles: import("lit").CSSResult[];
     scene?: Scene;
+    private searchText;
     private _extendedMap;
     private show;
     render(): TemplateResult<1>;
     firstUpdated(): void;
     updated(change: PropertyValues<this>): void;
+    refresh(): void;
     sortableConfig: Sortable.Options;
     onSort(e: Sortable.SortableEvent): void;
     disconnectedCallback(): void;
@@ -20,5 +23,6 @@ export declare class SceneInspector extends LitElement {
     toggleExtended(component: Component): void;
     toggleHidden(component: Component): void;
     selectComponent(component: Component): void;
+    shouldBeShown(component: Component): boolean;
     renderComponent(component: Component, depth: number): TemplateResult;
 }

package/dist/src/modeller/property-sidebar/inspector/inspector.js CHANGED Viewed

@@ -1,10 +1,12 @@
 import { __decorate } from "tslib";
+import '@operato/input/ox-input-search.js';
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import Sortable from 'sortablejs';
 export class SceneInspector extends LitElement {
     constructor() {
         super(...arguments);
+        this.searchText = '';
         this.show = false;
         this.sortableConfig = {
             group: 'inspector',
@@ -15,7 +17,12 @@ export class SceneInspector extends LitElement {
         };
     }
     render() {
-        return html ` ${!this.scene ? html `` : this.renderComponent(this.scene.root, 0)} `;
+        return html `
+      <ox-input-search
+        @change=${(e) => (this.searchText = e.target.value)}
+      ></ox-input-search>
+      <div result>${!this.scene ? html `` : this.renderComponent(this.scene.root, 0)}</div>
+    `;
     }
     firstUpdated() {
         dispatchEvent(new Event('resize'));
@@ -44,18 +51,18 @@ export class SceneInspector extends LitElement {
                             parent = parent.parent;
                         }
                     });
-                    this.requestUpdate();
+                    this.refresh();
                 });
                 this.scene.on('execute', () => {
-                    this.requestUpdate();
+                    this.refresh();
                 });
                 this.scene.on('undo', () => {
                     this.extendedMap.set(this.scene.root, true);
-                    this.requestUpdate();
+                    this.refresh();
                 });
                 this.scene.on('redo', () => {
                     this.extendedMap.set(this.scene.root, true);
-                    this.requestUpdate();
+                    this.refresh();
                 });
             }
         }
@@ -65,6 +72,9 @@ export class SceneInspector extends LitElement {
             });
         });
     }
+    refresh() {
+        this.scene && this.requestUpdate();
+    }
     onSort(e) {
         if (!this.scene)
             return;
@@ -79,8 +89,8 @@ export class SceneInspector extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        delete this.scene;
-        delete this._extendedMap;
+        this.scene = undefined;
+        this._extendedMap = undefined;
     }
     _onclick(e) {
         e.stopPropagation();
@@ -110,7 +120,7 @@ export class SceneInspector extends LitElement {
                 this.style.height = this.show ? '100%' : '';
             }
         }
-        this.requestUpdate();
+        this.refresh();
     }
     _ondblclick(e) {
         e.stopPropagation();
@@ -127,11 +137,12 @@ export class SceneInspector extends LitElement {
         if (component && component.isContainer()) {
             this.toggleExtended(component);
         }
-        this.requestUpdate();
+        this.refresh();
     }
     get extendedMap() {
         if (!this._extendedMap) {
             this._extendedMap = new WeakMap();
+            this._extendedMap.set(this.scene.root, true);
         }
         return this._extendedMap;
     }
@@ -154,23 +165,32 @@ export class SceneInspector extends LitElement {
         else {
             this.extendedMap.set(component, !extended);
         }
-        this.requestUpdate();
+        this.refresh();
     }
     toggleHidden(component) {
         component.set('hidden', !component.hidden);
-        this.requestUpdate();
+        this.refresh();
     }
     selectComponent(component) {
         this.scene.selected = [component];
-        this.requestUpdate();
+        this.refresh();
+    }
+    shouldBeShown(component) {
+        const { type, name, id, tag } = component.state;
+        return !!(!this.searchText ||
+            `${type} ${name || ''} ${id || ''} ${tag || ''}`.search(this.searchText) > -1 ||
+            (component.components || []).find((child) => this.shouldBeShown(child)));
     }
     renderComponent(component, depth) {
         var _a;
         if (!component) {
             return html ``;
         }
+        if (!this.shouldBeShown(component)) {
+            return html ``;
+        }
         const children = (component.isContainer() && component.components) || [];
-        const extended = this.isExtended(component) ? children : [];
+        const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : [];
         const { type, id, tag, class: clazz } = component.state;
         const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '');
         return html `
@@ -203,9 +223,21 @@ export class SceneInspector extends LitElement {
 SceneInspector.styles = [
     css `
       :host {
+        display: flex;
+        flex-direction: column;
         color: var(--scene-inspector-color);
       }
+      div[result] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
       .component {
         display: block;
         overflow: hidden;
@@ -285,4 +317,7 @@ SceneInspector.styles = [
 __decorate([
     property({ type: Object })
 ], SceneInspector.prototype, "scene", void 0);
+__decorate([
+    state()
+], SceneInspector.prototype, "searchText", void 0);
 //# sourceMappingURL=inspector.js.map

package/dist/src/modeller/property-sidebar/inspector/inspector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\nexport class SceneInspector extends LitElement {\n static styles = [\n css`\n :host {\n color: var(--scene-inspector-color);\n }\n\n .component {\n display: block;\n overflow: hidden;\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n font-size: 14px;\n }\n\n .component[selected] {\n background-color: var(--scene-inspector-selected-background-color);\n border-top: var(--scene-inspector-selected-border);\n border-bottom: var(--scene-inspector-selected-border);\n }\n [selected] .type {\n font-weight: bold;\n }\n\n span,\n i {\n display: inline-block;\n }\n\n span.type {\n text-overflow: ellipses;\n }\n\n span.name {\n background-color: var(--scene-inspector-name-background-color);\n border-radius: var(--border-radius);\n padding: 0 4px;\n color: #fff;\n font-size: 0.8em;\n }\n\n .eye {\n margin: 0 0 0 5px;\n vertical-align: middle;\n opacity: 0.7;\n font-size: 1.1em;\n color: var(--scene-inspector-eye-icon-color);\n }\n\n .collapsed::before,\n .extended::before,\n .collapsespace::before {\n background: var(--url-icon-shell-inspector) no-repeat;\n width: 16px;\n height: 18px;\n display: inline-block;\n content: '';\n opacity: 0.6;\n }\n\n .collapsed::before {\n background-position: 100% -195px;\n }\n\n .extended::before {\n background-position: 100% -295px;\n }\n\n .collapsespace::before {\n background-position: 100% -395px;\n opacity: 0.9;\n width: 16px;\n }\n .collapsed,\n .extended,\n .collapsespace {\n border-left: 1px dotted rgba(0, 0, 0, 0.1);\n }\n\n pre {\n display: inline;\n }\n `\n ]\n\n @property({ type: Object }) scene?: Scene\n\n private _extendedMap: any\n private show: boolean = false\n\n render() {\n return html` ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)} `\n }\n\n firstUpdated() {\n dispatchEvent(new Event('resize'))\n this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n if (change.has('scene')) {\n let oldScene = change.get('scene') as Scene\n\n if (oldScene) {\n oldScene.off('selected')\n oldScene.off('execute')\n oldScene.off('undo')\n oldScene.off('redo')\n\n delete this._extendedMap\n }\n\n if (this.scene && this.scene.root) {\n // root 는 기본상태가 extended 되도록 하기위해서임.\n this.extendedMap.set(this.scene.root, true)\n\n this.scene.on('selected', (after: Component[], before: Component[]) => {\n let selected = after\n\n selected.forEach(component => {\n let parent = component.parent\n while (parent && !this.extendedMap.get(parent)) {\n this.extendedMap.set(parent, true)\n parent = parent.parent\n }\n })\n\n this.requestUpdate()\n })\n\n this.scene.on('execute', () => {\n this.requestUpdate()\n })\n\n this.scene.on('undo', () => {\n this.extendedMap.set(this.scene!.root, true)\n this.requestUpdate()\n })\n\n this.scene.on('redo', () => {\n this.extendedMap.set(this.scene!.root, true)\n this.requestUpdate()\n })\n }\n }\n\n this.updateComplete.then(() => {\n this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n new Sortable(sortable as HTMLElement, this.sortableConfig)\n })\n })\n }\n\n sortableConfig: Sortable.Options = {\n group: 'inspector',\n animation: 150,\n draggable: '.component',\n swapThreshold: 1,\n onSort: this.onSort.bind(this)\n }\n\n onSort(e: Sortable.SortableEvent) {\n if (!this.scene) return\n\n var component = (e.item as HTMLElement & { component: Component }).component\n var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n var to_index = e.newIndex! - 1\n\n this.scene.move(component, to_container, to_index)\n\n this.show = false\n this.updateComplete.then(() => {\n this.show = true\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n delete this.scene\n delete this._extendedMap\n }\n\n _onclick(e: MouseEvent) {\n e.stopPropagation()\n\n var targetElement = e.target as HTMLElement & { component: Component }\n var classList = targetElement.classList\n var component\n\n while (!component && targetElement) {\n component = targetElement.component\n\n if (component) break\n\n targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n if (!targetElement \|\| targetElement === this.renderRoot) break\n }\n\n if (component) {\n if (classList.contains('eye')) {\n this.toggleHidden(component)\n } else if (classList.contains('extended') \|\| classList.contains('collapsed')) {\n this.toggleExtended(component)\n }\n\n this.selectComponent(component)\n } else {\n if (classList.contains('inspector')) {\n this.show = !this.show\n this.style.height = this.show ? '100%' : ''\n }\n }\n\n this.requestUpdate()\n }\n\n _ondblclick(e: MouseEvent) {\n e.stopPropagation()\n\n var targetElement = e.target as HTMLElement & { component: Component }\n var component\n\n while (!component && targetElement) {\n component = targetElement.component\n\n if (component) break\n\n targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n if (!targetElement \|\| targetElement === this.renderRoot) break\n }\n\n if (component && component.isContainer()) {\n this.toggleExtended(component)\n }\n\n this.requestUpdate()\n }\n\n get extendedMap() {\n if (!this._extendedMap) {\n this._extendedMap = new WeakMap()\n }\n\n return this._extendedMap\n }\n\n getNodeHandleClass(component: Component) {\n if (component.isContainer() && (component as Container).components.length > 0) {\n return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n } else {\n return 'collapsespace'\n }\n }\n\n isExtended(component: Component) {\n return !!this.extendedMap.get(component)\n }\n\n toggleExtended(component: Component) {\n var extended = this.isExtended(component)\n\n if (extended) {\n this.extendedMap.delete(component)\n } else {\n this.extendedMap.set(component, !extended)\n }\n\n this.requestUpdate()\n }\n\n toggleHidden(component: Component) {\n component.set('hidden', !component.hidden)\n\n this.requestUpdate()\n }\n\n selectComponent(component: Component) {\n this.scene!.selected = [component]\n\n this.requestUpdate()\n }\n\n renderComponent(component: Component, depth: number): TemplateResult {\n if (!component) {\n return html``\n }\n\n const children = (component.isContainer() && (component as Container).components) \|\| []\n const extended = this.isExtended(component) ? children : []\n const { type, id, tag, class: clazz } = component.state\n\n const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')\n\n return html`\n <div\n class=\"component\"\n ?selected=${(this.scene?.selected \|\| []).indexOf(component) > -1}\n .component=${component}\n ?sortable=${component.isContainer()}\n >\n <span>\n ${depth > 0\n ? html`\n <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>\n <pre>${' '.repeat(depth)}</pre>\n `\n : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n <span class=${this.getNodeHandleClass(component)}> </span>\n\n <span class=\"type\">${depth == 0 ? 'ROOT' : type}</span> ${name\n ? html` <span class=\"name\">${name}</span> `\n : html``}\n </span>\n\n ${extended.map(child => this.renderComponent(child, depth + 1))}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\nexport class SceneInspector extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n color: var(--scene-inspector-color);\n }\n\n div[result] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n overflow-y: auto;\n }\n\n .component {\n display: block;\n overflow: hidden;\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n font-size: 14px;\n }\n\n .component[selected] {\n background-color: var(--scene-inspector-selected-background-color);\n border-top: var(--scene-inspector-selected-border);\n border-bottom: var(--scene-inspector-selected-border);\n }\n [selected] .type {\n font-weight: bold;\n }\n\n span,\n i {\n display: inline-block;\n }\n\n span.type {\n text-overflow: ellipses;\n }\n\n span.name {\n background-color: var(--scene-inspector-name-background-color);\n border-radius: var(--border-radius);\n padding: 0 4px;\n color: #fff;\n font-size: 0.8em;\n }\n\n .eye {\n margin: 0 0 0 5px;\n vertical-align: middle;\n opacity: 0.7;\n font-size: 1.1em;\n color: var(--scene-inspector-eye-icon-color);\n }\n\n .collapsed::before,\n .extended::before,\n .collapsespace::before {\n background: var(--url-icon-shell-inspector) no-repeat;\n width: 16px;\n height: 18px;\n display: inline-block;\n content: '';\n opacity: 0.6;\n }\n\n .collapsed::before {\n background-position: 100% -195px;\n }\n\n .extended::before {\n background-position: 100% -295px;\n }\n\n .collapsespace::before {\n background-position: 100% -395px;\n opacity: 0.9;\n width: 16px;\n }\n .collapsed,\n .extended,\n .collapsespace {\n border-left: 1px dotted rgba(0, 0, 0, 0.1);\n }\n\n pre {\n display: inline;\n }\n `\n ]\n\n @property({ type: Object }) scene?: Scene\n\n @state() private searchText: string = ''\n\n private _extendedMap: any\n private show: boolean = false\n\n render() {\n return html`\n <ox-input-search\n @change=${(e: Event) => (this.searchText = (e.target as HTMLInputElement).value)}\n ></ox-input-search>\n <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>\n `\n }\n\n firstUpdated() {\n dispatchEvent(new Event('resize'))\n this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n if (change.has('scene')) {\n let oldScene = change.get('scene') as Scene\n\n if (oldScene) {\n oldScene.off('selected')\n oldScene.off('execute')\n oldScene.off('undo')\n oldScene.off('redo')\n\n delete this._extendedMap\n }\n\n if (this.scene && this.scene.root) {\n // root 는 기본상태가 extended 되도록 하기위해서임.\n this.extendedMap.set(this.scene.root, true)\n\n this.scene.on('selected', (after: Component[], before: Component[]) => {\n let selected = after\n\n selected.forEach(component => {\n let parent = component.parent\n while (parent && !this.extendedMap.get(parent)) {\n this.extendedMap.set(parent, true)\n parent = parent.parent\n }\n })\n\n this.refresh()\n })\n\n this.scene.on('execute', () => {\n this.refresh()\n })\n\n this.scene.on('undo', () => {\n this.extendedMap.set(this.scene!.root, true)\n this.refresh()\n })\n\n this.scene.on('redo', () => {\n this.extendedMap.set(this.scene!.root, true)\n this.refresh()\n })\n }\n }\n\n this.updateComplete.then(() => {\n this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n new Sortable(sortable as HTMLElement, this.sortableConfig)\n })\n })\n }\n\n refresh() {\n this.scene && this.requestUpdate()\n }\n\n sortableConfig: Sortable.Options = {\n group: 'inspector',\n animation: 150,\n draggable: '.component',\n swapThreshold: 1,\n onSort: this.onSort.bind(this)\n }\n\n onSort(e: Sortable.SortableEvent) {\n if (!this.scene) return\n\n var component = (e.item as HTMLElement & { component: Component }).component\n var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n var to_index = e.newIndex! - 1\n\n this.scene.move(component, to_container, to_index)\n\n this.show = false\n this.updateComplete.then(() => {\n this.show = true\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.scene = undefined\n this._extendedMap = undefined\n }\n\n _onclick(e: MouseEvent) {\n e.stopPropagation()\n\n var targetElement = e.target as HTMLElement & { component: Component }\n var classList = targetElement.classList\n var component\n\n while (!component && targetElement) {\n component = targetElement.component\n\n if (component) break\n\n targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n if (!targetElement \|\| targetElement === this.renderRoot) break\n }\n\n if (component) {\n if (classList.contains('eye')) {\n this.toggleHidden(component)\n } else if (classList.contains('extended') \|\| classList.contains('collapsed')) {\n this.toggleExtended(component)\n }\n\n this.selectComponent(component)\n } else {\n if (classList.contains('inspector')) {\n this.show = !this.show\n this.style.height = this.show ? '100%' : ''\n }\n }\n\n this.refresh()\n }\n\n _ondblclick(e: MouseEvent) {\n e.stopPropagation()\n\n var targetElement = e.target as HTMLElement & { component: Component }\n var component\n\n while (!component && targetElement) {\n component = targetElement.component\n\n if (component) break\n\n targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n if (!targetElement \|\| targetElement === this.renderRoot) break\n }\n\n if (component && component.isContainer()) {\n this.toggleExtended(component)\n }\n\n this.refresh()\n }\n\n get extendedMap() {\n if (!this._extendedMap) {\n this._extendedMap = new WeakMap()\n this._extendedMap.set(this.scene!.root, true)\n }\n\n return this._extendedMap\n }\n\n getNodeHandleClass(component: Component) {\n if (component.isContainer() && (component as Container).components.length > 0) {\n return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n } else {\n return 'collapsespace'\n }\n }\n\n isExtended(component: Component) {\n return !!this.extendedMap.get(component)\n }\n\n toggleExtended(component: Component) {\n var extended = this.isExtended(component)\n\n if (extended) {\n this.extendedMap.delete(component)\n } else {\n this.extendedMap.set(component, !extended)\n }\n\n this.refresh()\n }\n\n toggleHidden(component: Component) {\n component.set('hidden', !component.hidden)\n\n this.refresh()\n }\n\n selectComponent(component: Component) {\n this.scene!.selected = [component]\n\n this.refresh()\n }\n\n shouldBeShown(component: Component): boolean {\n const { type, name, id, tag } = component.state\n\n return !!(\n !this.searchText \|\|\n `${type} ${name \|\| ''} ${id \|\| ''} ${tag \|\| ''}`.search(this.searchText) > -1 \|\|\n ((component as Container).components \|\| []).find((child: Component) => this.shouldBeShown(child))\n )\n }\n\n renderComponent(component: Component, depth: number): TemplateResult {\n if (!component) {\n return html``\n }\n\n if (!this.shouldBeShown(component)) {\n return html``\n }\n\n const children = (component.isContainer() && (component as Container).components) \|\| []\n const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : []\n const { type, id, tag, class: clazz } = component.state\n\n const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')\n\n return html`\n <div\n class=\"component\"\n ?selected=${(this.scene?.selected \|\| []).indexOf(component) > -1}\n .component=${component}\n ?sortable=${component.isContainer()}\n >\n <span>\n ${depth > 0\n ? html`\n <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>\n <pre>${' '.repeat(depth)}</pre>\n `\n : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n <span class=${this.getNodeHandleClass(component)}> </span>\n\n <span class=\"type\">${depth == 0 ? 'ROOT' : type}</span> ${name\n ? html` <span class=\"name\">${name}</span> `\n : html``}\n </span>\n\n ${extended.map(child => this.renderComponent(child, depth + 1))}\n </div>\n `\n }\n}\n"]}