feat(viewer): integration

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)
         }
       }
     }

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<UnknownObject>,
+  currentFilterState: null as Nullable<FilteringState>,
   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 })
 }

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
 }

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'

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'
 

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

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 {

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

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,

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

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'