From f49d86046a3afd3e2fe2b8e9c3db8ab18e7ddbbd Mon Sep 17 00:00:00 2001 From: Dimitrie Stefanescu Date: Tue, 23 Aug 2022 09:28:28 +0300 Subject: [PATCH] feat(viewer): integration --- .../components/viewer/ObjectPropertiesRow.vue | 46 ++++------ .../commit-object-viewer/stateManager.ts | 84 +++++-------------- packages/viewer/src/index.ts | 6 +- .../viewer/src/modules/SpeckleRenderer.ts | 2 +- packages/viewer/src/modules/Viewer.ts | 2 +- .../viewer/src/modules/batching/Batcher.ts | 4 +- .../src/modules/filtering/FilteringManager.ts | 38 ++++++--- .../modules/{ => legacy}/FilteringManager.js | 4 +- .../modules/{ => legacy}/FilteringManager.ts | 10 +-- .../viewer/src/modules/legacy/SceneObjects.js | 2 +- .../viewer/src/modules/materials/Materials.ts | 4 +- 11 files changed, 84 insertions(+), 118 deletions(-) rename packages/viewer/src/modules/{ => legacy}/FilteringManager.js (98%) rename packages/viewer/src/modules/{ => legacy}/FilteringManager.ts (99%) diff --git a/packages/frontend/src/main/components/viewer/ObjectPropertiesRow.vue b/packages/frontend/src/main/components/viewer/ObjectPropertiesRow.vue index 3e5d628e5..f593ed248 100644 --- a/packages/frontend/src/main/components/viewer/ObjectPropertiesRow.vue +++ b/packages/frontend/src/main/components/viewer/ObjectPropertiesRow.vue @@ -129,8 +129,6 @@ import { computed } from 'vue' import gql from 'graphql-tag' import { hideObjects2, - hideTree, - showTree, showObjects2, isolateObjects2, unIsolateObjects2, @@ -197,43 +195,35 @@ export default { } }, visible() { - if (!this.viewerState.currentFilterState) return true - if (!this.viewerState.currentFilterState.visibilityState) return true - const stateName = this.viewerState.currentFilterState.visibilityState.name - if (stateName !== 'hiddenObjectState') return true + if (!this.viewerState.currentFilterState?.hiddenObjects) return true if (this.prop.type === 'object') { - return !this.viewerState.currentFilterState?.visibilityState?.ids.includes( + return !this.viewerState.currentFilterState?.hiddenObjects?.includes( this.prop.value.referencedId ) } if (this.prop.type === 'array') { const ids = this.prop.value.map((o) => o.referencedId) - const targetIds = - this.viewerState.currentFilterState?.visibilityState?.ids.filter( - (val) => ids.indexOf(val) !== -1 - ) + const targetIds = this.viewerState.currentFilterState?.hiddenObjects?.filter( + (val) => ids.indexOf(val) !== -1 + ) if (targetIds.length === 0) return true else return false // TODO: return "partial" or "full", depending on state } return true }, isolated() { - if (!this.viewerState.currentFilterState) return false - if (!this.viewerState.currentFilterState.visibilityState) return false - const stateName = this.viewerState.currentFilterState.visibilityState.name - if (stateName !== 'isolateObjectsState') return false + if (!this.viewerState.currentFilterState?.isolatedObjects) return false if (this.prop.type === 'object') { - return this.viewerState.currentFilterState?.visibilityState?.ids.includes( + return this.viewerState.currentFilterState?.isolatedObjects?.includes( this.prop.value.referencedId ) } if (this.prop.type === 'array') { const ids = this.prop.value.map((o) => o.referencedId) - const targetIds = - this.viewerState.currentFilterState?.visibilityState?.ids.filter( - (val) => ids.indexOf(val) !== -1 - ) + const targetIds = this.viewerState.currentFilterState?.isolatedObjects?.filter( + (val) => ids.indexOf(val) !== -1 + ) if (targetIds.length === 0) return false else return true // return "partial" or "full", depending on state } @@ -245,34 +235,34 @@ export default { toggleVisibility() { if (this.prop.type === 'object') { if (this.visible) { - hideTree(this.prop.value.referencedId, 'ui-vis') + hideObjects2([this.prop.value.referencedId], 'ui-vis', true) } else { - showTree(this.prop.value.referencedId, 'ui-vis') + showObjects2([this.prop.value.referencedId], 'ui-vis', true) } } if (this.prop.type === 'array') { const targetIds = this.prop.value.map((o) => o.referencedId) if (this.visible) { - hideObjects2(targetIds, 'ui-vis', undefined, undefined, undefined, true) + hideObjects2(targetIds, 'ui-vis', true) } else { - showObjects2(targetIds, 'ui-vis', undefined, undefined, undefined, true) + showObjects2(targetIds, 'ui-vis', true) } } }, toggleFilter() { if (this.prop.type === 'object') { if (this.isolated) { - unIsolateObjects2([this.prop.value.referencedId], 'ui-iso') + unIsolateObjects2([this.prop.value.referencedId], 'ui-iso', true) } else { - isolateObjects2([this.prop.value.referencedId], 'ui-iso') + isolateObjects2([this.prop.value.referencedId], 'ui-iso', true) } } if (this.prop.type === 'array') { const targetIds = this.prop.value.map((o) => o.referencedId) if (this.isolated) { - unIsolateObjects2(targetIds, 'ui-iso') + unIsolateObjects2(targetIds, 'ui-iso', true) } else { - isolateObjects2(targetIds, 'ui-iso') + isolateObjects2(targetIds, 'ui-iso', true) } } } diff --git a/packages/frontend/src/main/lib/viewer/commit-object-viewer/stateManager.ts b/packages/frontend/src/main/lib/viewer/commit-object-viewer/stateManager.ts index 4463e1e05..5345e81e6 100644 --- a/packages/frontend/src/main/lib/viewer/commit-object-viewer/stateManager.ts +++ b/packages/frontend/src/main/lib/viewer/commit-object-viewer/stateManager.ts @@ -8,7 +8,10 @@ import { DefaultViewerParams, Viewer, SelectionEvent, - PropertyInfo + PropertyInfo, + NumericPropertyInfo, + StringPropertyInfo, + FilteringState } from '@speckle/viewer' import emojis from '@/main/store/emojis' import { cloneDeep, has, isArray } from 'lodash' @@ -67,7 +70,7 @@ const commitObjectViewerState = makeVar({ commentReactions: ['❤️', '✏️', '🔥', '⚠️'], emojis, // TODO: new filtering shit - currentFilterState: null as Nullable, + currentFilterState: null as Nullable, selectedObjects: [] as UnknownObject[] }) @@ -255,106 +258,63 @@ export function resetSelection() { export function isolateObjects2( objectIds: string[], - filterKey: string, - resourceUrl: string, - ghost = false + stateKey: string, + includeDescendants = false ) { const result = getInitializedViewer().FilteringManager.isolateObjects( objectIds, - filterKey, - resourceUrl, - ghost + stateKey, + includeDescendants ) - const state = { ...commitObjectViewerState() } - state.currentFilterState = result console.log(result) - updateState(state) + updateState({ currentFilterState: result }) } export function unIsolateObjects2( objectIds: string[], - filterKey: string, - resourceUrl: string, - ghost = false + stateKey: string, + includeDescendants = false ) { const result = getInitializedViewer().FilteringManager.unIsolateObjects( objectIds, - filterKey, - resourceUrl, - ghost - ) - updateState({ currentFilterState: result }) -} - -export function hideTree( - objectId: string, - filterKey: string, - resourceUrl: string, - ghost = false -) { - const result = getInitializedViewer().FilteringManager.hideTree( - objectId, - filterKey, - resourceUrl, - ghost - ) - updateState({ currentFilterState: result }) -} - -export function showTree(objectId: string, filterKey: string, resourceUrl: string) { - const result = getInitializedViewer().FilteringManager.showTree( - objectId, - filterKey, - resourceUrl + stateKey, + includeDescendants ) updateState({ currentFilterState: result }) } export function hideObjects2( objectIds: string[], - filterKey: string, - resourceUrl: string, - ghost = false, + stateKey: string, includeDescendants = false ) { const result = getInitializedViewer().FilteringManager.hideObjects( objectIds, - filterKey, - resourceUrl, - ghost, + stateKey, includeDescendants ) updateState({ currentFilterState: result }) + console.log(result) } export function showObjects2( objectIds: string[], - filterKey: string, - resourceUrl: string, + stateKey: string, includeDescendants = false ) { const result = getInitializedViewer().FilteringManager.showObjects( objectIds, - filterKey, - resourceUrl, + stateKey, includeDescendants ) + console.log(result) const state = { ...commitObjectViewerState() } state.currentFilterState = result updateState(state) } -export function setColorFilter( - property: PropertyInfo, - resourceUrl: string, - ghostNonMatchingObjects = true -) { - const result = getInitializedViewer().FilteringManager.setColorFilter( - JSON.parse(JSON.stringify(property)), // TODO: HACK, is the filtering manager mutating the prop? BAD - resourceUrl, - ghostNonMatchingObjects - ) - // "#" + value.toString(16) +export function setColorFilter(property: PropertyInfo) { + const result = getInitializedViewer().FilteringManager.setColorFilter(property) console.log(result) updateState({ currentFilterState: result }) } diff --git a/packages/viewer/src/index.ts b/packages/viewer/src/index.ts index 49d8a8bc1..8cd7b889b 100644 --- a/packages/viewer/src/index.ts +++ b/packages/viewer/src/index.ts @@ -2,7 +2,10 @@ import { Viewer } from './modules/Viewer' import Converter from './modules/converter/Converter' import { DefaultViewerParams, IViewer, SelectionEvent } from './IViewer' import SpeckleLineMaterial from './modules/materials/SpeckleLineMaterial' -import { FilterMaterialType } from './modules/filtering/FilteringManager' +import { + FilterMaterialType, + FilteringState +} from './modules/filtering/FilteringManager' import { PropertyInfo, StringPropertyInfo, @@ -30,5 +33,6 @@ export type { PropertyInfo, StringPropertyInfo, NumericPropertyInfo, + FilteringState, SunLightConfiguration } diff --git a/packages/viewer/src/modules/SpeckleRenderer.ts b/packages/viewer/src/modules/SpeckleRenderer.ts index 94b5a28f6..6a1c62189 100644 --- a/packages/viewer/src/modules/SpeckleRenderer.ts +++ b/packages/viewer/src/modules/SpeckleRenderer.ts @@ -27,7 +27,7 @@ import { Batch, GeometryType } from './batching/Batch' import Batcher from './batching/Batcher' import { Geometry } from './converter/Geometry' import { SpeckleType } from './converter/GeometryConverter' -import { FilterMaterial } from './FilteringManager' +import { FilterMaterial } from './filtering/FilteringManager' import Input, { InputOptionsDefault } from './input/Input' import { Intersections } from './Intersections' import SpeckleDepthMaterial from './materials/SpeckleDepthMaterial' diff --git a/packages/viewer/src/modules/Viewer.ts b/packages/viewer/src/modules/Viewer.ts index 4609d7c60..781d3c46b 100644 --- a/packages/viewer/src/modules/Viewer.ts +++ b/packages/viewer/src/modules/Viewer.ts @@ -21,7 +21,7 @@ import { World } from './World' import { TreeNode, WorldTree } from './tree/WorldTree' import SpeckleRenderer from './SpeckleRenderer' import { FilterMaterialType, FilteringManager } from './filtering/FilteringManager' -import { FilteringManager as FMO } from './FilteringManager' +import { FilteringManager as FMO } from './legacy/FilteringManager' import { PropertyManager } from './filtering/PropertyManager' import { SpeckleType } from './converter/GeometryConverter' diff --git a/packages/viewer/src/modules/batching/Batcher.ts b/packages/viewer/src/modules/batching/Batcher.ts index 158686ac9..374d8fd2b 100644 --- a/packages/viewer/src/modules/batching/Batcher.ts +++ b/packages/viewer/src/modules/batching/Batcher.ts @@ -7,9 +7,9 @@ import Materials from '../materials/Materials' import { NodeRenderView } from '../tree/NodeRenderView' import { Batch, BatchUpdateRange, GeometryType, HideAllBatchUpdateRange } from './Batch' import PointBatch from './PointBatch' -import { FilterMaterialType } from '../FilteringManager' +// import { FilterMaterialType } from '../FilteringManager' import { WebGLRenderer } from 'three' -import { FilterMaterial } from '../FilteringManager' +import { FilterMaterial, FilterMaterialType } from '../filtering/FilteringManager' export default class Batcher { public materials: Materials diff --git a/packages/viewer/src/modules/filtering/FilteringManager.ts b/packages/viewer/src/modules/filtering/FilteringManager.ts index db8285952..18c7c85f6 100644 --- a/packages/viewer/src/modules/filtering/FilteringManager.ts +++ b/packages/viewer/src/modules/filtering/FilteringManager.ts @@ -27,14 +27,21 @@ export enum FilterMaterialType { HIDDEN } +export interface FilterMaterial { + filterType: FilterMaterialType + rampIndex?: number + rampIndexColor?: Color + rampTexture?: Texture +} + export class FilteringManager { public WTI: WorldTree private Renderer: SpeckleRenderer private StateKey: string = null private VisibilityState = new VisibilityState() - private ColorStringFilterState = new ColorStringFilterState() - private ColorNumericFilterState = new ColorNumericFilterState() + private ColorStringFilterState = null + private ColorNumericFilterState = null private SelectionState = new GenericRvState() private OverlayState = new GenericRvState() @@ -101,7 +108,10 @@ export class FilteringManager { command: Command, includeDescendants = false ): FilteringState { - if (stateKey !== this.StateKey || command !== this.VisibilityState.command) { + if ( + stateKey !== this.StateKey || + Math.abs(command - this.VisibilityState.command) > 1 + ) { this.VisibilityState.reset() } @@ -125,6 +135,10 @@ export class FilteringManager { ] } + this.VisibilityState.ids = this.VisibilityState.ids.filter( + (id) => id !== undefined && id !== null + ) + const enabled = this.VisibilityState.ids.length !== 0 if (!enabled) { this.VisibilityState.command = Command.NONE @@ -254,8 +268,8 @@ export class FilteringManager { } public removeColorFilter(): FilteringState { - this.ColorStringFilterState = new ColorStringFilterState() - this.ColorNumericFilterState = new ColorNumericFilterState() + this.ColorStringFilterState = null + this.ColorNumericFilterState = null return this.setFilters() } @@ -295,8 +309,8 @@ export class FilteringManager { public reset(): FilteringState { this.Renderer.clearFilter() this.VisibilityState = new VisibilityState() - this.ColorStringFilterState = new ColorStringFilterState() - this.ColorNumericFilterState = new ColorNumericFilterState() + this.ColorStringFilterState = null + this.ColorNumericFilterState = null this.SelectionState = new GenericRvState() this.OverlayState = new GenericRvState() this.StateKey = null @@ -403,11 +417,11 @@ export class FilteringManager { } enum Command { - HIDE, - SHOW, - ISOLATE, - UNISOLATE, - NONE + HIDE = 10, + SHOW = 11, + ISOLATE = 20, + UNISOLATE = 21, + NONE = 30 } class VisibilityState { diff --git a/packages/viewer/src/modules/FilteringManager.js b/packages/viewer/src/modules/legacy/FilteringManager.js similarity index 98% rename from packages/viewer/src/modules/FilteringManager.js rename to packages/viewer/src/modules/legacy/FilteringManager.js index 8463806c0..2eb982967 100644 --- a/packages/viewer/src/modules/FilteringManager.js +++ b/packages/viewer/src/modules/legacy/FilteringManager.js @@ -1,7 +1,7 @@ import * as THREE from 'three' import Rainbow from 'rainbowvis.js' -import SpeckleStandardMaterial from './materials/SpeckleStandardMaterial' -import { Geometry } from './converter/Geometry' +import SpeckleStandardMaterial from '../materials/SpeckleStandardMaterial' +import { Geometry } from '../converter/Geometry' /** * LEGACY diff --git a/packages/viewer/src/modules/FilteringManager.ts b/packages/viewer/src/modules/legacy/FilteringManager.ts similarity index 99% rename from packages/viewer/src/modules/FilteringManager.ts rename to packages/viewer/src/modules/legacy/FilteringManager.ts index f31946610..5634ecdc0 100644 --- a/packages/viewer/src/modules/FilteringManager.ts +++ b/packages/viewer/src/modules/legacy/FilteringManager.ts @@ -1,10 +1,10 @@ import { Color, Texture, MathUtils } from 'three' -import flatten from '../helpers/flatten' -import { TreeNode, WorldTree } from './tree/WorldTree' -import { Assets } from './Assets' +import flatten from '../../helpers/flatten' +import { TreeNode, WorldTree } from '../tree/WorldTree' +import { Assets } from '../Assets' // import { NodeRenderView } from './tree/NodeRenderView' -import { Viewer } from './Viewer' -import SpeckleRenderer from './SpeckleRenderer' +import { Viewer } from '../Viewer' +import SpeckleRenderer from '../SpeckleRenderer' export enum FilterMaterialType { SELECT, diff --git a/packages/viewer/src/modules/legacy/SceneObjects.js b/packages/viewer/src/modules/legacy/SceneObjects.js index 94b5d32e7..538054cea 100644 --- a/packages/viewer/src/modules/legacy/SceneObjects.js +++ b/packages/viewer/src/modules/legacy/SceneObjects.js @@ -1,7 +1,7 @@ import * as THREE from 'three' import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils' import { Geometry } from '../converter/Geometry' -import FilteringManager from '../FilteringManager' +import FilteringManager from '../legacy/FilteringManager' /** * Container for the scene objects, to allow loading/unloading/filtering/coloring/grouping diff --git a/packages/viewer/src/modules/materials/Materials.ts b/packages/viewer/src/modules/materials/Materials.ts index af7f4d31a..625206bca 100644 --- a/packages/viewer/src/modules/materials/Materials.ts +++ b/packages/viewer/src/modules/materials/Materials.ts @@ -8,17 +8,15 @@ import { Vector2 } from 'three' import { GeometryType } from '../batching/Batch' -// import { getConversionFactor } from '../converter/Units' import { TreeNode } from '../tree/WorldTree' import { DisplayStyle, NodeRenderView, RenderMaterial } from '../tree/NodeRenderView' import SpeckleLineMaterial from './SpeckleLineMaterial' import SpeckleStandardMaterial from './SpeckleStandardMaterial' import SpecklePointMaterial from './SpecklePointMaterial' -import { FilterMaterialType } from '../FilteringManager' +import { FilterMaterial, FilterMaterialType } from '../filtering/FilteringManager' import SpeckleStandardColoredMaterial from './SpeckleStandardColoredMaterial' import defaultGradient from '../../assets/gradient.png' import { Assets } from '../Assets' -import { FilterMaterial } from '../FilteringManager' import { getConversionFactor } from '../converter/Units' import SpeckleGhostMaterial from './SpeckleGhostMaterial'