105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import * as OBC from "@thatopen/components";
|
|
import * as OBF from "@thatopen/components-front";
|
|
import * as BUI from "@thatopen/ui";
|
|
import * as FRAGS from "@thatopen/fragments";
|
|
|
|
interface GroupingsUIState {
|
|
components: OBC.Components;
|
|
}
|
|
|
|
const serializeFragmentIdMap = (fragmentIdMap: FRAGS.FragmentIdMap) => {
|
|
const map: Record<string, number[]> = {};
|
|
for (const fragmentID in fragmentIdMap) {
|
|
map[fragmentID] = [...fragmentIdMap[fragmentID]];
|
|
}
|
|
return JSON.stringify(map);
|
|
};
|
|
|
|
export default (state: GroupingsUIState) => {
|
|
const { components } = state;
|
|
const classifier = state.components.get(OBC.Classifier);
|
|
|
|
const computeTableData = (components: OBC.Components) => {
|
|
const classifier = components.get(OBC.Classifier);
|
|
const data: BUI.TableGroupData[] = [];
|
|
if ("CustomSelections" in classifier.list) {
|
|
const customSelections = classifier.list.CustomSelections;
|
|
for (const group in customSelections) {
|
|
const fragmentIdMap = customSelections[group].map;
|
|
const groupRow: BUI.TableGroupData = {
|
|
data: {
|
|
Name: group,
|
|
fragmentIdMap: serializeFragmentIdMap(fragmentIdMap),
|
|
},
|
|
};
|
|
data.push(groupRow);
|
|
}
|
|
}
|
|
return data;
|
|
};
|
|
|
|
const table = document.createElement("bim-table");
|
|
table.headersHidden = true;
|
|
table.hiddenColumns = ["fragmentIdMap"];
|
|
|
|
table.dataTransform = {
|
|
Name: (value) => {
|
|
if (typeof value !== "string") return value;
|
|
const onDeleteGroup = () => {
|
|
if (!("CustomSelections" in classifier.list)) return;
|
|
delete classifier.list.CustomSelections[value];
|
|
table.data = computeTableData(state.components);
|
|
};
|
|
|
|
return BUI.html`
|
|
<div style=" display: flex; justify-content: space-between; flex: 1; align-items: center;">
|
|
<bim-label>${value}</bim-label>
|
|
<bim-button @click=${onDeleteGroup} style="flex: 0" icon="majesticons:delete-bin"></bim-button>
|
|
</div>
|
|
`;
|
|
},
|
|
};
|
|
|
|
table.addEventListener("cellcreated", ({ detail }) => {
|
|
const { cell } = detail;
|
|
cell.style.padding = "0.25rem 0";
|
|
});
|
|
|
|
table.addEventListener("rowcreated", ({ detail }) => {
|
|
const { row } = detail;
|
|
const { fragmentIdMap } = row.data;
|
|
if (typeof fragmentIdMap !== "string") return;
|
|
const idMap = JSON.parse(fragmentIdMap);
|
|
if (Object.keys(idMap).length === 0) return;
|
|
const highlighter = components.get(OBF.Highlighter);
|
|
row.onmouseover = () => {
|
|
row.style.setProperty("--bim-label--c", "var(--bim-ui_accent-base)");
|
|
row.style.cursor = "pointer";
|
|
highlighter.highlightByID(
|
|
"hover",
|
|
idMap,
|
|
true,
|
|
false,
|
|
highlighter.selection.select,
|
|
);
|
|
};
|
|
|
|
row.onmouseleave = () => {
|
|
row.style.removeProperty("--bim-label--c");
|
|
row.style.cursor = "default";
|
|
highlighter.clear("hover");
|
|
};
|
|
|
|
row.onclick = () => {
|
|
highlighter.highlightByID("select", idMap, true);
|
|
};
|
|
});
|
|
|
|
return BUI.Component.create<BUI.Table, GroupingsUIState>(
|
|
(state: GroupingsUIState) => {
|
|
table.data = computeTableData(state.components);
|
|
return BUI.html`${table}`;
|
|
},
|
|
state,
|
|
);
|
|
};
|