chore: updates on some components

ThatOpen · Jun 2, 2024 · 587dd21 · 587dd21
1 parent e9dca18
commit 587dd21
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 35 deletions.
diff --git a/packages/core/src/components/Input/index.ts b/packages/core/src/components/Input/index.ts
@@ -65,7 +65,7 @@ export class Input extends LitElement implements HasValue, HasName {
   icon?: string;
 
   @property({ type: Boolean, reflect: true })
-  vertical: boolean;
+  vertical = false;
 
   onValueChange = new Event("change");
 
@@ -100,11 +100,6 @@ export class Input extends LitElement implements HasValue, HasName {
     }
   }
 
-  constructor() {
-    super();
-    this.vertical = false;
-  }
-
   protected render() {
     return html`
       <div class="parent">

diff --git a/packages/core/src/components/Table/src/TableChildren.ts b/packages/core/src/components/Table/src/TableChildren.ts
@@ -14,6 +14,11 @@ export class TableChildren extends LitElement {
     :host([hidden]) {
       display: none;
     }
+
+    ::slotted(.branch.branch-vertical) {
+      top: 0;
+      bottom: 1.125rem;
+    }
   `;
 
   private _groups: TableGroup[] = [];
@@ -34,6 +39,7 @@ export class TableChildren extends LitElement {
   protected render() {
     this._groups = [];
     return html`
+      <slot></slot>
       ${this.data.map((group) => {
         const tableGroup = document.createElement(
           "bim-table-group",

diff --git a/packages/core/src/components/Table/src/TableGroup.ts b/packages/core/src/components/Table/src/TableGroup.ts
@@ -1,4 +1,4 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, render } from "lit";
 import { property } from "lit/decorators.js";
 import { Table } from "../index";
 import { RowCreatedEventDetail, TableGroupData } from "./types";
@@ -21,8 +21,6 @@ export class TableGroup extends LitElement {
     }
 
     .branch-vertical {
-      top: 1.125rem;
-      bottom: 1.125rem;
       border-left: 1px dotted var(--bim-ui_bg-contrast-40);
     }
 
@@ -87,6 +85,9 @@ export class TableGroup extends LitElement {
       <div class="branch branch-vertical"></div>
     `;
 
+    const verticalBranchRow = document.createDocumentFragment();
+    render(verticalBranchTemplate, verticalBranchRow);
+
     const horizontalBranch = document.createElement("div");
     horizontalBranch.classList.add("branch", "branch-horizontal");
     horizontalBranch.style.left = `${indentation - 1 + 0.5625}rem`;
@@ -147,6 +148,8 @@ export class TableGroup extends LitElement {
     }
 
     const row = document.createElement("bim-table-row");
+    if (this.data.children && !this.childrenHidden)
+      row.append(verticalBranchRow);
     row.table = this.table;
     row.data = this.data.data;
     this.table?.dispatchEvent(
@@ -163,15 +166,13 @@ export class TableGroup extends LitElement {
       this._children = children;
       children.table = this.table;
       children.data = this.data.children;
+      const verticalBranchChildren = document.createDocumentFragment();
+      render(verticalBranchTemplate, verticalBranchChildren);
+      children.append(verticalBranchChildren);
     }
 
     return html`
-      <div class="parent">
-        ${this.data.children && !this.childrenHidden
-          ? verticalBranchTemplate
-          : null}
-        ${row} ${!this.childrenHidden ? children : null}
-      </div>
+      <div class="parent">${row} ${!this.childrenHidden ? children : null}</div>
     `;
   }
 }
diff --git a/packages/core/src/components/Table/src/TableRow.ts b/packages/core/src/components/Table/src/TableRow.ts
@@ -11,6 +11,11 @@ export class TableRow extends LitElement {
       display: grid;
       min-height: 2.25rem;
     }
+
+    ::slotted(.branch.branch-vertical) {
+      top: 50%;
+      bottom: 0;
+    }
   `;
 
   @property({ attribute: false })

diff --git a/packages/core/src/components/Tabs/example.html b/packages/core/src/components/Tabs/example.html
@@ -63,7 +63,7 @@
         </div>
       </bim-tab>
     </bim-tabs>
-    <bim-tabs style="grid-area: panel-a">
+    <bim-tabs style="grid-area: panel-a" switchers-full>
       <bim-tab name="properties" label="Properties">
         <bim-panel-section label="My Section">
           <bim-dropdown label="Dropdown">

diff --git a/packages/core/src/components/Tabs/src/Tabs.ts b/packages/core/src/components/Tabs/src/Tabs.ts
@@ -45,6 +45,11 @@ export class Tabs extends LitElement {
         padding: 0rem 0.75rem;
         color: var(--bim-ui_bg-contrast-60);
         display: flex;
+        justify-content: center;
+      }
+
+      :host([switchers-full]) .switcher {
+        flex: 1;
       }
 
       .switcher:hover,
@@ -186,6 +191,9 @@ export class Tabs extends LitElement {
     return this._tab;
   }
 
+  @property({ type: Boolean, attribute: "switchers-full", reflect: true })
+  switchersFull = false;
+
   private getTabSwitcher(name: string) {
     const switcher = this._switchers.find(
       (swticher) => swticher.getAttribute("data-name") === name,

diff --git a/packages/core/src/components/TextInput/index.ts b/packages/core/src/components/TextInput/index.ts
@@ -185,6 +185,13 @@ export class TextInput extends LitElement implements HasName, HasValue {
     }, this.debounce) as unknown as number;
   }
 
+  focus() {
+    setTimeout(() => {
+      const input = this.shadowRoot?.querySelector("input");
+      input?.focus();
+    });
+  }
+
   protected render() {
     return html`
       <bim-input
@@ -194,7 +201,7 @@ export class TextInput extends LitElement implements HasName, HasValue {
         .vertical=${this.vertical}
       >
         <input
-          aria-label=${this.label || this.name || "Checkbox Input"}
+          aria-label=${this.label || this.name || "Text Input"}
           .type=${this.type}
           .value=${this.value}
           placeholder=${ifDefined(this.placeholder)}

diff --git a/packages/obc/src/components/tables/ElementProperties/example.ts b/packages/obc/src/components/tables/ElementProperties/example.ts
@@ -129,7 +129,7 @@ const propertiesPanel = BUI.Component.create(() => {
           <bim-button @click=${expandTable} label=${propertiesTable.expanded ? "Collapse" : "Expand"}></bim-button> 
           <bim-button @click=${copyAsTSV} label="Copy as TSV"></bim-button> 
         </div> 
-        <bim-text-input @input=${onTextInput} placeholder="Search Property"></bim-text-input>
+        <bim-text-input @input=${onTextInput} placeholder="Search Property" debounce="250"></bim-text-input>
         ${propertiesTable}
       </bim-panel-section>
     </bim-panel>

diff --git a/packages/obc/src/components/tables/ElementProperties/src/template.ts b/packages/obc/src/components/tables/ElementProperties/src/template.ts
@@ -60,7 +60,7 @@ const getAttributesRow = async (
   return attrsRow;
 };
 
-const getPsetRow = async (model: any, psetIDs: number[]) => {
+const getPsetRow = async (model: FRAGS.FragmentsGroup, psetIDs: number[]) => {
   const row: BUI.TableGroupData = { data: { Name: "Property Sets" } };
   for (const psetID of psetIDs) {
     const setAttrs = await model.getProperties(psetID);
@@ -93,7 +93,7 @@ const getPsetRow = async (model: any, psetIDs: number[]) => {
   return row;
 };
 
-const getQsetRow = async (model: any, psetIDs: number[]) => {
+const getQsetRow = async (model: FRAGS.FragmentsGroup, psetIDs: number[]) => {
   const row: BUI.TableGroupData = { data: { Name: "Quantity Sets" } };
   for (const psetID of psetIDs) {
     const setAttrs = await model.getProperties(psetID);
@@ -126,19 +126,25 @@ const getQsetRow = async (model: any, psetIDs: number[]) => {
   return row;
 };
 
-const getMaterialRow = async (model: any, materialIDs: number[]) => {
+const getMaterialRow = async (
+  model: FRAGS.FragmentsGroup,
+  materialIDs: number[],
+) => {
   const row: BUI.TableGroupData = { data: { Name: "Materials" } };
   for (const materialID of materialIDs) {
     const relAttrs = await model.getProperties(materialID);
-    if (relAttrs.type === WEBIFC.IFCMATERIALLAYERSETUSAGE) {
+    if (relAttrs && relAttrs.type === WEBIFC.IFCMATERIALLAYERSETUSAGE) {
       const layerSetID = relAttrs.ForLayerSet.value;
       const layerSetAttrs = await model.getProperties(layerSetID);
+      if (!layerSetAttrs) continue;
       for (const layerHandle of layerSetAttrs.MaterialLayers) {
         const { value: layerID } = layerHandle;
         const layerAttrs = await model.getProperties(layerID);
+        if (!layerAttrs) continue;
         const materialAttrs = await model.getProperties(
           layerAttrs.Material.value,
         );
+        if (!materialAttrs) continue;
         const layerRow = {
           data: {
             Name: "Layer",
@@ -162,10 +168,11 @@ const getMaterialRow = async (model: any, materialIDs: number[]) => {
         row.children.push(layerRow);
       }
     }
-    if (relAttrs.type === WEBIFC.IFCMATERIALLIST) {
+    if (relAttrs && relAttrs.type === WEBIFC.IFCMATERIALLIST) {
       for (const materialHandle of relAttrs.Materials) {
         const { value: materialID } = materialHandle;
         const materialAttrs = await model.getProperties(materialID);
+        if (!materialAttrs) continue;
         const materialRow: BUI.TableGroupData = {
           data: {
             Name: "Name",
@@ -176,8 +183,9 @@ const getMaterialRow = async (model: any, materialIDs: number[]) => {
         row.children.push(materialRow);
       }
     }
-    if (relAttrs.type === WEBIFC.IFCMATERIAL) {
+    if (relAttrs && relAttrs.type === WEBIFC.IFCMATERIAL) {
       const materialAttrs = await model.getProperties(materialID);
+      if (!materialAttrs) continue;
       const materialRow: BUI.TableGroupData = {
         data: {
           Name: "Name",
@@ -192,15 +200,16 @@ const getMaterialRow = async (model: any, materialIDs: number[]) => {
 };
 
 const getClassificationsRow = async (
-  model: any,
+  model: FRAGS.FragmentsGroup,
   classificationIDs: number[],
 ) => {
   const row: BUI.TableGroupData = { data: { Name: "Classifications" } };
   for (const classificationID of classificationIDs) {
     const relAttrs = await model.getProperties(classificationID);
-    if (relAttrs.type === WEBIFC.IFCCLASSIFICATIONREFERENCE) {
+    if (relAttrs && relAttrs.type === WEBIFC.IFCCLASSIFICATIONREFERENCE) {
       const { value: sourceID } = relAttrs.ReferencedSource;
       const sourceAttrs = await model.getProperties(sourceID);
+      if (!sourceAttrs) continue;
       const classificationRow: BUI.TableGroupData = {
         data: {
           Name: sourceAttrs.Name.value,

diff --git a/packages/obc/src/components/tables/ModelsList/src/template.ts b/packages/obc/src/components/tables/ModelsList/src/template.ts
@@ -3,34 +3,60 @@ import * as BUI from "@thatopen/ui";
 
 export interface ModelsListUIState {
   components: OBC.Components;
+  schemaTag?: boolean;
+  viewDefinitionTag?: boolean;
 }
 
 export const modelsListTemplate = (state: ModelsListUIState) => {
-  const { components } = state;
+  const { components, schemaTag, viewDefinitionTag } = state;
 
   const fragments = components.get(OBC.FragmentsManager);
 
   const table = document.createElement("bim-table");
-  table.columns = ["Model"];
+  table.addEventListener("cellcreated", ({ detail }) => {
+    const { cell } = detail;
+    cell.style.padding = "0.25rem 0";
+  });
+  table.hiddenColumns = ["modelID"];
   table.headersHidden = true;
 
   const rowGroups: BUI.TableGroupData[] = [];
   for (const [, model] of fragments.groups) {
     if (!model) continue;
     const rowGroup: BUI.TableGroupData = {
       data: {
-        Model: model.name || model.uuid,
-        Actions: model.uuid,
+        Name: model.name || model.uuid,
+        modelID: model.uuid,
       },
     };
     rowGroups.push(rowGroup);
   }
 
   table.dataTransform = {
-    Actions: (modelID) => {
-      if (typeof modelID !== "string") return modelID;
+    Name: (value, row) => {
+      const { modelID } = row;
+      if (typeof modelID !== "string") return value;
       const model = fragments.groups.get(modelID);
       if (!model) return modelID;
+
+      let schemaTagTemplate: BUI.TemplateResult | undefined;
+      const { schema } = model.ifcMetadata;
+      if ((schemaTag === undefined || schemaTag === true) && schema) {
+        schemaTagTemplate = BUI.html`
+          <bim-label style="background-color: var(--bim-ui_main-base); padding: 0 0.25rem; color: var(--bim-ui_main-contrast); border-radius: 0.25rem;">${schema}</bim-label>
+          `;
+      }
+
+      let viewDefinitionTagTemplate: BUI.TemplateResult | undefined;
+      if (
+        (viewDefinitionTag === undefined || viewDefinitionTag === true) &&
+        "viewDefinition" in model.ifcMetadata
+      ) {
+        viewDefinitionTagTemplate = BUI.html`
+          <bim-label style="background-color: var(--bim-ui_main-base); padding: 0 0.25rem; color: var(--bim-ui_main-contrast); border-radius: 0.25rem;">${model.ifcMetadata.viewDefinition}</bim-label>
+        `;
+      }
+
       const onDeleteClick = () => fragments.disposeGroup(model);
 
       const onHideClick = (e: Event) => {
@@ -40,13 +66,23 @@ export const modelsListTemplate = (state: ModelsListUIState) => {
       };
 
       return BUI.html`
-        <bim-button @click=${onHideClick} icon="mdi:eye"></bim-button>
-        <bim-button @click=${onDeleteClick} icon="mdi:delete"></bim-button>
+       <div style="display: flex; flex: 1; gap: var(--bim-ui_size-4xs); justify-content: space-between; overflow: auto;">
+        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--bim-ui_size-4xs); flex-grow: 1; overflow: auto;">
+          <div style="min-height: 1.75rem; overflow: auto; display: flex;">
+            <bim-label style="white-space: normal;">${value}</bim-label>
+          </div>
+          ${schemaTagTemplate}
+          ${viewDefinitionTagTemplate}
+        </div>
+        <div style="display: flex; gap: var(--bim-ui_size-4xs); align-self: flex-start; flex-shrink: 0;">
+          <bim-button @click=${onHideClick} icon="mdi:eye"></bim-button>
+          <bim-button @click=${onDeleteClick} icon="mdi:delete"></bim-button>
+        </div>
+       </div>
       `;
     },
   };
 
-  table.columns = ["Model", { name: "Actions", width: "auto" }];
   table.data = rowGroups;
 
   return BUI.html`

diff --git a/packages/obc/src/components/tables/RelationsTree/example.ts b/packages/obc/src/components/tables/RelationsTree/example.ts
@@ -54,16 +54,23 @@ const [relationsTree] = CUI.tables.relationsTree({
 });
 
 relationsTree.expanded = true;
+relationsTree.preserveStructureOnFilter = true;
 
 const panel = BUI.Component.create(() => {
   const [loadIfcBtn] = CUI.buttons.loadIfc({ components });
 
+  const onSearch = (e: Event) => {
+    const input = e.target as BUI.TextInput;
+    relationsTree.queryString = input.value;
+  };
+
   return BUI.html`
    <bim-panel label="Classifications Tree">
     <bim-panel-section label="Importing">
       ${loadIfcBtn}
     </bim-panel-section>
     <bim-panel-section label="Classifications">
+      <bim-text-input @input=${onSearch} placeholder="Search..." debounce="200"></bim-text-input>
       ${relationsTree}
     </bim-panel-section>
    </bim-panel>