feat(domains): add *.speckle.systems domains to capabilities (#57 )

Update README.md
Merge pull request #56 from specklesystems/bimgeek/update-readme
2024-08-12 11:44:44 +02:00 · 2024-06-06 10:51:15 +03:00 · 2024-06-04 17:01:23 +03:00 · 2024-06-03 22:10:52 +03:00 · 2024-05-27 15:10:40 +02:00 · 2024-05-23 16:47:39 +02:00
44 changed files with 8135 additions and 1274 deletions
@@ -1,8 +1,9 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
  root: true,
-  parser: '@typescript-eslint/parser',
+  parser: 'vue-eslint-parser',
  parserOptions: {
+    parser: '@typescript-eslint/parser',
    requireConfigFile: false,
    ecmaVersion: 2020,
    sourceType: 'module'
@@ -10,6 +11,7 @@ const config = {
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
@@ -4,4 +4,6 @@ webpack.statistics.dev.html
 .tmp/
 webpack.statistics.prod.html
 .DS_Store
-.idea/
+.idea/
+webpack.statistics.html
+**/Thumbs.db
@@ -1,40 +1,35 @@
 {
-    "editor.tabSize": 4,
-    "editor.insertSpaces": true,
-    "files.eol": "\n",
-    "files.watcherExclude": {
-        "**/.git/objects/**": true,
-        "**/node_modules/**": true,
-        ".tmp": true
+  "editor.tabSize": 4,
+  "editor.insertSpaces": true,
+  "files.eol": "\n",
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/node_modules/**": true,
+    ".tmp": true
+  },
+  "files.exclude": {
+    ".tmp": true
+  },
+  "files.associations": {
+    "*.resjson": "json"
+  },
+  "search.exclude": {
+    ".tmp": true,
+    "typings": true
+  },
+  "json.schemas": [
+    {
+      "fileMatch": ["/pbiviz.json"],
+      "url": "./node_modules/powerbi-visuals-api/schema.pbiviz.json"
    },
-    "files.exclude": {
-        ".tmp": true
+    {
+      "fileMatch": ["/capabilities.json"],
+      "url": "./node_modules/powerbi-visuals-api/schema.capabilities.json"
    },
-    "files.associations": {
-        "*.resjson": "json"
-    },
-    "search.exclude": {
-        ".tmp": true,
-        "typings": true
-    },
-    "json.schemas": [
-        {
-            "fileMatch": [
-                "/pbiviz.json"
-            ],            
-            "url": "./node_modules/powerbi-visuals-api/schema.pbiviz.json"
-        },
-        {
-            "fileMatch": [
-                "/capabilities.json"
-            ],            
-            "url": "./node_modules/powerbi-visuals-api/schema.capabilities.json"
-        },
-        {
-            "fileMatch": [
-                "/dependencies.json"
-            ],            
-            "url": "./node_modules/powerbi-visuals-api/schema.dependencies.json"
-        }        
-    ]    
-}
+    {
+      "fileMatch": ["/dependencies.json"],
+      "url": "./node_modules/powerbi-visuals-api/schema.dependencies.json"
+    }
+  ],
+  "vue.codeActions.enabled": false
+}
@@ -1,12 +1,19 @@
+# ⚠️⚠️⚠️ Note: This repository is no longer maintained and has been merged with the [Speckle Power BI](https://github.com/specklesystems/speckle-powerbi) repository. ⚠️⚠️⚠️
+
+The functionalities and features of Speckle Power BI Visuals have been consolidated into the main [Speckle Power BI](https://github.com/specklesystems/speckle-powerbi) repository. Please visit the Speckle Power BI repository for the latest updates, installation instructions, and continued development.
+
+
+
 <h1 align="center">
  <img src="https://user-images.githubusercontent.com/2679513/131189167-18ea5fe1-c578-47f6-9785-3748178e4312.png" width="150px"/><br/>
  Speckle | PowerBI Visuals
 </h1>
 <h3 align="center">
    3D Viewer for PowerBI and more...
+    Expected use case is that the visual displays data pulled from Speckle via the Speckle Data Connector for PowerBI (https://github.com/specklesystems/speckle-powerbi)
 </h3>

-> ⚠️ This repo is still in very early stages of development, use at your own risk!
+> This repo is still in very early stages of development, use at your own risk!

 <p align="center"><b>Speckle</b> is data infrastructure for the AEC industry.</p><br/>

@@ -34,7 +41,7 @@ What is Speckle? Check our ![YouTube Video Views](https://img.shields.io/youtube

 Give Speckle a try in no time by:

- [![speckle XYZ](https://img.shields.io/badge/https://-speckle.xyz-0069ff?style=flat-square&logo=hackthebox&logoColor=white)](https://speckle.xyz) ⇒ creating an account at
+- [![speckle](https://img.shields.io/badge/https://-app.speckle.systems-0069ff?style=flat-square&logo=hackthebox&logoColor=white)](https://app.speckle.systems) ⇒ creating an account
 - [![create a droplet](https://img.shields.io/badge/Create%20a%20Droplet-0069ff?style=flat-square&logo=digitalocean&logoColor=white)](https://marketplace.digitalocean.com/apps/speckle-server?refcode=947a2b5d7dc1) ⇒ deploying an instance in 1 click

 ### Resources
@@ -1,12 +1,12 @@
 {
  "dataRoles": [
    {
-      "displayName": "Stream URL",
+      "displayName": "Model URL",
      "kind": "Grouping",
      "name": "stream"
    },
    {
-      "displayName": "Commit Object ID",
+      "displayName": "Version Object ID",
      "kind": "Grouping",
      "name": "parentObject"
    },
@@ -17,7 +17,7 @@
    },
    {
      "displayName": "Color By",
-      "kind": "GroupingOrMeasure",
+      "kind": "Grouping",
      "name": "objectColorBy"
    },
    {
@@ -37,18 +37,18 @@
          },
          "select": [
            {
-              "for": {
-                "in": "stream"
+              "bind": {
+                "to": "stream"
              }
            },
            {
-              "for": {
-                "in": "parentObject"
+              "bind": {
+                "to": "parentObject"
              }
            },
            {
-              "for": {
-                "in": "objectColorBy"
+              "bind": {
+                "to": "objectColorBy"
              }
            },
            {
@@ -72,58 +72,71 @@
  ],
  "objects": {
    "camera": {
-      "displayName": "Camera",
      "properties": {
        "defaultView": {
-          "displayName": "Default view",
          "type": {
            "enumeration": [
              {
                "displayName": "Perspective",
-                "displayNameKey": "perspective",
                "value": "perspective"
              },
              {
                "displayName": "Top",
-                "displayNameKey": "top",
                "value": "top"
              },
              {
                "displayName": "Front",
-                "displayNameKey": "front",
                "value": "front"
              },
              {
                "displayName": "Left",
-                "displayNameKey": "left",
                "value": "left"
              },
              {
                "displayName": "Back",
-                "displayNameKey": "back",
                "value": "back"
              },
              {
                "displayName": "Right",
-                "displayNameKey": "right",
                "value": "right"
              }
            ]
          }
        },
-        "orthoMode": {
-          "displayName": "Ortho mode",
+        "allowCameraUnder": {
          "type": {
            "bool": true
          }
+        },
+        "zoomOnDataChange": {
+          "type": {
+            "bool": true
+          }
+        },
+        "projection": {
+          "type": {
+            "enumeration": [
+              {
+                "displayName": "Perspective",
+                "value": "perspective"
+              },
+              {
+                "displayName": "Orthographic",
+                "value": "orthographic"
+              }
+            ]
+          }
        }
      }
    },
    "color": {
-      "displayName": "Color",
      "properties": {
-        "background": {
-          "displayName": "Background Color",
+        "enabled": {
+          "type": {
+            "bool": true
+          }
+        },
+        "fill": {
          "type": {
            "fill": {
              "solid": {
@@ -132,34 +145,57 @@
            }
          }
        },
-        "endColor": {
-          "displayName": "End Color",
+        "context": {
          "type": {
-            "fill": {
-              "solid": {
-                "color": true
+            "enumeration": [
+              {
+                "displayName": "Hidden",
+                "value": "hidden"
+              },
+              {
+                "displayName": "Ghosted",
+                "value": "ghosted"
              }
-            }
+            ]
+          }
+        }
+      }
+    },
+    "lighting": {
+      "properties": {
+        "enabled": {
+          "type": {
+            "bool": true
          }
        },
-        "midColor": {
-          "displayName": "Middle Color",
+        "intensity": {
          "type": {
-            "fill": {
-              "solid": {
-                "color": true
-              }
-            }
+            "numeric": true
          }
        },
-        "startColor": {
-          "displayName": "Start Color",
+        "elevation": {
          "type": {
-            "fill": {
-              "solid": {
-                "color": true
-              }
-            }
+            "numeric": true
+          }
+        },
+        "azimuth": {
+          "type": {
+            "numeric": true
+          }
+        },
+        "indirect": {
+          "type": {
+            "numeric": true
+          }
+        },
+        "shadows": {
+          "type": {
+            "bool": true
+          }
+        },
+        "shadowCatcher": {
+          "type": {
+            "bool": true
          }
        }
      }
@@ -171,6 +207,8 @@
      "name": "WebAccess",
      "parameters": [
        "https://speckle.xyz",
+        "https://app.speckle.systems",
+        "https://latest.speckle.systems",
        "https://*.speckle.xyz",
        "https://latest.speckle.dev",
        "https://*.speckle.dev",
@@ -181,6 +219,11 @@
    {
      "essential": false,
      "name": "ExportContent"
+    },
+    {
+      "essential": true,
+      "name": "LocalStorage",
+      "parameters": []
    }
  ],
  "sorting": {
@@ -190,6 +233,7 @@
  "supportsHighlight": true,
  "supportsKeyboardFocus": true,
  "supportsLandingPage": true,
+  "keepAllMetadataColumns": true,
  "supportsMultiVisualSelection": true,
  "supportsSynchronizingFilterState": true,
  "suppressDefaultTitle": true,
@@ -7,41 +7,71 @@
  },
  "license": "MIT",
  "scripts": {
-    "pbiviz": "pbiviz",
-    "start": "pbiviz start",
-    "package": "pbiviz package",
-    "lint": "eslint -c .eslintrc.js --ext .ts src/"
+    "pack": "webpack --config webpack.config.ts",
+    "build": "webpack --config webpack.config.dev.ts",
+    "serve": "webpack-dev-server --config webpack.config.dev.ts"
  },
  "dependencies": {
-    "@babel/runtime": "7.21.5",
-    "@babel/runtime-corejs2": "7.21.5",
-    "@speckle/viewer": "^2.13.3",
+    "@babel/runtime": "^7.21.5",
+    "@babel/runtime-corejs3": "^7.21.5",
+    "@headlessui/vue": "^1.7.13",
+    "@heroicons/vue": "^2.0.12",
+    "@speckle/tailwind-theme": "2.14.7",
+    "@speckle/ui-components": "2.14.7",
+    "@speckle/viewer": "^2.18.14",
    "color-interpolate": "^1.0.5",
-    "core-js": "3.30.2",
+    "core-js": "^3.30.2",
    "lodash": "^4.17.21",
+    "postcss-loader": "^7.3.0",
+    "postcss-preset-env": "^8.4.1",
    "powerbi-visuals-api": "~5.4.0",
-    "powerbi-visuals-utils-colorutils": "6.0.1",
-    "powerbi-visuals-utils-dataviewutils": "6.0.1",
+    "powerbi-visuals-utils-colorutils": "^6.0.1",
+    "powerbi-visuals-utils-dataviewutils": "^6.0.1",
    "powerbi-visuals-utils-formattingmodel": "^5.0.0",
-    "powerbi-visuals-utils-interactivityutils": "6.0.2",
-    "powerbi-visuals-utils-tooltiputils": "6.0.1",
-    "regenerator-runtime": "^0.13.11"
+    "powerbi-visuals-utils-interactivityutils": "^6.0.2",
+    "powerbi-visuals-utils-tooltiputils": "^6.0.1",
+    "regenerator-runtime": "^0.13.11",
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/eslint-parser": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
-    "@types/core-js": "^2.5.5",
+    "@tailwindcss/forms": "^0.5.3",
    "@types/lodash": "^4.14.194",
+    "@types/node": "^20.1.7",
    "@types/regenerator-runtime": "^0.13.1",
-    "@types/three": "^0.150.1",
+    "@types/three": "^0.152.0",
+    "@types/webpack": "^5.28.1",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "base64-inline-loader": "^2.0.1",
+    "css-loader": "^6.7.3",
    "eslint": "^8.40.0",
    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.13.0",
+    "extra-watch-webpack-plugin": "^1.0.3",
+    "json-loader": "^0.5.7",
+    "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.4.23",
+    "postcss-import": "^15.1.0",
+    "powerbi-visuals-webpack-plugin": "^4.0.0",
    "prettier": "^2.8.8",
+    "style-loader": "^3.3.2",
+    "tailwindcss": "^3.3.2",
    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
    "typescript": "^5.0.4",
-    "user-agent-data-types": "^0.3.1"
+    "user-agent-data-types": "^0.3.1",
+    "vue": "^3.3.4",
+    "vue-loader": "^17.1.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.83.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
  }
 }
@@ -4,7 +4,7 @@
    "displayName": "Speckle PowerBI Viewer",
    "guid": "powerbiSpeckleVisualAA98F06515D847E8ACB33BAB487244E0",
    "visualClassName": "Visual",
-    "version": "2.0.0-alpha8",
+    "version": "2.19.0",
    "description": "An interactive 3D viewer for Speckle Data",
    "supportUrl": "https://speckle.community",
    "gitHubUrl": "https://github.com/specklesystems/speckle-powerbi-visuals"
@@ -13,7 +13,7 @@
  "author": { "name": "Speckle Systems", "email": "info@speckle.systems" },
  "assets": { "icon": "assets/logo.png" },
  "externalJS": [],
-  "style": "style/visual.less",
+  "style": "style/visual.css",
  "capabilities": "capabilities.json",
  "dependencies": null,
  "stringResources": []
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-nesting': {}
+  }
+}
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import HomeView from './views/HomeView.vue'
+import ViewerView from './views/ViewerView.vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { storeKey } from 'src/injectionKeys'
+
+let store = useStore(storeKey)
+let status = computed(() => {
+  return store.state.status
+})
+</script>
+
+<template>
+  <ViewerView v-if="status == 'valid'" />
+  <HomeView v-else />
+</template>
+
+<style scoped></style>
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import {
+  VideoCameraIcon,
+  CubeIcon,
+  ArrowsPointingOutIcon,
+  PaintBrushIcon
+} from '@heroicons/vue/24/solid'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { CanonicalView, SpeckleView } from '@speckle/viewer'
+import ButtonToggle from 'src/components/controls/ButtonToggle.vue'
+import ButtonGroup from 'src/components/controls/ButtonGroup.vue'
+import ButtonSimple from 'src/components/controls/ButtonSimple.vue'
+import { inject, watch } from 'vue'
+import { hostKey, viewerHandlerKey } from 'src/injectionKeys'
+import { resetPalette } from 'src/utils/matrixViewUtils'
+
+const emits = defineEmits(['update:sectionBox', 'view-clicked', 'clear-palette'])
+const props = withDefaults(defineProps<{ sectionBox: boolean; views: SpeckleView[] }>(), {
+  sectionBox: false,
+  views: () => []
+})
+const viewerHandler = inject(viewerHandlerKey)
+const canonicalViews = [
+  { name: 'Top' },
+  { name: 'Front' },
+  { name: 'Left' },
+  { name: 'Back' },
+  { name: 'Right' }
+]
+
+const onZoomExtentsClicked = (ev: MouseEvent) => {
+  console.log('Zoom extents clicked', viewerHandler)
+  viewerHandler.zoomExtents()
+}
+const host = inject(hostKey)
+const onClearPalletteClicked = (ev: MouseEvent) => {
+  console.log('Clear pallette clicked')
+  resetPalette()
+  emits('clear-palette')
+}
+</script>
+
+<template>
+  <ButtonGroup>
+    <ButtonSimple flat secondary @click="onZoomExtentsClicked">
+      <ArrowsPointingOutIcon class="h-5 w-5" />
+    </ButtonSimple>
+    <Menu as="div" class="relative z-30">
+      <MenuButton v-slot="{ open }" as="template">
+        <ButtonToggle flat secondary :active="open">
+          <VideoCameraIcon class="h-5 w-5" />
+        </ButtonToggle>
+      </MenuButton>
+      <Transition
+        enter-active-class="transform ease-out duration-300 transition"
+        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <MenuItems
+          class="absolute w-60 left-2 -translate-y-8 bottom-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto outline outline-2 outline-primary-muted rounded-lg shadow-lg overflow-hidden flex flex-col"
+        >
+          <MenuItem
+            v-for="view in canonicalViews"
+            :key="view.name"
+            v-slot="{ active }"
+            as="template"
+          >
+            <button
+              :class="{
+                'bg-primary text-foreground-on-primary': active,
+                'text-foreground': !active,
+                'text-sm py-2 transition': true
+              }"
+              @click="$emit('view-clicked', view.name.toLowerCase() as CanonicalView)"
+            >
+              {{ view.name }}
+            </button>
+          </MenuItem>
+          <MenuItem v-for="view in views" :key="view.name" v-slot="{ active }" as="template">
+            <button
+              :class="{
+                'bg-primary text-foreground-on-primary': active,
+                'text-foreground': !active,
+                'text-sm py-2 transition': true
+              }"
+              @click="$emit('view-clicked', view)"
+            >
+              {{ view.view.name ?? view.name }}
+            </button>
+          </MenuItem>
+        </MenuItems>
+      </Transition>
+    </Menu>
+    <ButtonToggle
+      flat
+      secondary
+      :active="sectionBox"
+      @click="$emit('update:sectionBox', !sectionBox)"
+    >
+      <CubeIcon class="h-5 w-5" />
+    </ButtonToggle>
+    <ButtonSimple flat secondary @click="onClearPalletteClicked">
+      <PaintBrushIcon class="h-5 w-5" />
+    </ButtonSimple>
+  </ButtonGroup>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,184 @@
+<script async setup lang="ts">
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  Ref,
+  ref,
+  watch,
+  watchEffect
+} from 'vue'
+import { useStore } from 'vuex'
+import ViewerControls from 'src/components/ViewerControls.vue'
+import { CanonicalView, SpeckleView } from '@speckle/viewer'
+import { CommonLoadingBar } from '@speckle/ui-components'
+import ViewerHandler from 'src/handlers/viewerHandler'
+import { useClickDragged } from 'src/composables/useClickDragged'
+import { isMultiSelect } from 'src/utils/isMultiSelect'
+import {
+  selectionHandlerKey,
+  storeKey,
+  tooltipHandlerKey,
+  viewerHandlerKey
+} from 'src/injectionKeys'
+import { SpeckleDataInput } from 'src/types'
+import { debounce, throttle } from 'lodash'
+import { ContextOption } from 'src/settings/colorSettings'
+
+const selectionHandler = inject(selectionHandlerKey)
+const tooltipHandler = inject(tooltipHandlerKey)
+const store = useStore(storeKey)
+const { dragged } = useClickDragged()
+
+let viewerHandler: ViewerHandler = null
+let ac = new AbortController()
+
+const container = ref<HTMLElement>()
+let bboxActive = ref(false)
+let views: Ref<SpeckleView[]> = ref([])
+let updateTask: Ref<Promise<void>> = ref(null)
+let setupTask: Promise<void> = null
+
+const isLoading = computed(() => updateTask.value != null)
+const input = computed(() => store.state.input)
+const settings = computed(() => store.state.settings)
+
+const onCameraMoved = throttle((_) => {
+  const pos = tooltipHandler.currentTooltip?.worldPos
+  if (!pos) return
+  const screenPos = viewerHandler.getScreenPosition(pos)
+  tooltipHandler.move(screenPos)
+}, 50)
+
+onMounted(() => {
+  viewerHandler = new ViewerHandler(container.value)
+  provide<ViewerHandler>(viewerHandlerKey, viewerHandler)
+  setupTask = viewerHandler
+    .init()
+    .then(() => viewerHandler.addCameraUpdateEventListener(onCameraMoved))
+    .finally(async () => {
+      if (input.value) await cancelAndHandleDataUpdate()
+      viewerHandler.updateSettings(settings.value)
+    })
+})
+
+onBeforeUnmount(async () => {
+  await viewerHandler.dispose()
+})
+
+const debounceUpdate = throttle(cancelAndHandleDataUpdate, 500)
+const debounceSettingsUpdate = throttle(() => viewerHandler.updateSettings(settings.value), 500)
+watch(input, debounceUpdate)
+watch(settings, debounceSettingsUpdate)
+
+watchEffect(() => {
+  if (!isLoading.value) viewerHandler?.setSectionBox(bboxActive.value, input.value.objectIds)
+})
+
+function handleDataUpdate(input: Ref<SpeckleDataInput>, signal: AbortSignal) {
+  updateTask.value = setupTask
+    .then(async () => {
+      signal.throwIfAborted()
+      // Clear previous selection
+      await viewerHandler.selectObjects(null)
+
+      // Load
+      await viewerHandler.loadObjectsWithAutoUnload(
+        input.value.objectsToLoad,
+        console.log,
+        console.error,
+        signal
+      )
+
+      // Color
+      await viewerHandler.colorObjectsByGroup(input.value.colorByIds)
+
+      await viewerHandler.unIsolateObjects()
+      const objectsToIsolate =
+        input.value.selectedIds.length == 0 ? input.value.objectIds : input.value.selectedIds
+      if (settings.value.color.context.value != ContextOption.show)
+        await viewerHandler.isolateObjects(
+          objectsToIsolate,
+          settings.value.color.context.value === ContextOption.ghosted
+        )
+      if (settings.value.camera.zoomOnDataChange.value) viewerHandler.zoom(objectsToIsolate)
+
+      // Update available views
+      views.value = viewerHandler.getViews()
+    })
+    .catch((e: Error) => {
+      console.log('Loading operation was aborted', e)
+    })
+    .finally(() => {
+      updateTask.value = null
+    })
+}
+
+async function cancelAndHandleDataUpdate() {
+  console.log('Input has changed', input.value)
+  if (updateTask.value) {
+    ac.abort('New input is available')
+    console.log('Cancelling previous load job')
+    await updateTask.value
+    ac = new AbortController()
+  }
+  const signal = ac.signal
+  handleDataUpdate(input, signal)
+}
+
+async function onCanvasClick(ev: MouseEvent) {
+  if (dragged.value) return
+  const intersectResult = await viewerHandler.intersect({ x: ev.clientX, y: ev.clientY })
+  const multi = isMultiSelect(ev)
+  const hit = intersectResult?.hit
+  if (hit) {
+    const id = hit.object.id as string
+    if (multi || !selectionHandler.isSelected(id)) await selectionHandler.select(id, multi)
+    tooltipHandler.show(hit, { x: ev.clientX, y: ev.clientY })
+    const selection = selectionHandler.getCurrentSelection()
+    const ids = selection.map((s) => s.id)
+    await viewerHandler.selectObjects(ids)
+  } else {
+    tooltipHandler.hide()
+    if (!multi) {
+      selectionHandler.clear()
+      await viewerHandler.selectObjects(null)
+    }
+  }
+}
+
+async function onCanvasAuxClick(ev: MouseEvent) {
+  if (ev.button != 2 || dragged.value) return
+  const intersectResult = await viewerHandler.intersect({ x: ev.clientX, y: ev.clientY })
+  await selectionHandler.showContextMenu(ev, intersectResult?.hit)
+}
+
+function onClearPalette() {
+  cancelAndHandleDataUpdate()
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center">
+    <div
+      ref="container"
+      class="fixed h-full w-full z-0"
+      @click="onCanvasClick"
+      @auxclick="onCanvasAuxClick"
+    />
+    <div class="z-30 w-1/2 px-10">
+      <common-loading-bar :loading="isLoading" />
+    </div>
+    <viewer-controls
+      v-if="!isLoading"
+      v-model:section-box="bboxActive"
+      :views="views"
+      class="fixed bottom-6"
+      @view-clicked="(view) => viewerHandler.setView(view)"
+      @clearPalette="onClearPalette"
+    />
+  </div>
+</template>
+<style scoped></style>
@@ -0,0 +1,8 @@
+<template>
+  <button
+    class="bg-foundation text-foreground shadow-md rounded-lg h-10 flex justify-center space-x-2 px-1"
+  >
+    <slot></slot>
+  </button>
+</template>
+<script setup lang="ts"></script>
@@ -0,0 +1,45 @@
+<template>
+  <button
+    ref="button"
+    :class="`transition rounded-lg w-10 h-10 flex items-center justify-center ${shadowClasses} ${colorClasses} active:scale-[0.9] outline-none`"
+  >
+    <slot></slot>
+  </button>
+</template>
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+let active = ref(false)
+let button = ref<HTMLElement>()
+
+const props = defineProps<{
+  flat?: boolean
+  secondary?: boolean
+}>()
+
+const shadowClasses = computed(() => (props.flat ? '' : 'shadow-md'))
+
+const colorClasses = computed(() => {
+  const parts = []
+  if (active.value) {
+    if (props.secondary) parts.push('bg-foundation text-primary')
+    else parts.push('bg-primary text-foreground-on-primary')
+  } else {
+    parts.push('bg-foundation text-foreground')
+  }
+  return parts.join(' ')
+})
+
+const onPointerDown = () => (active.value = true)
+const onPointerUp = () => (active.value = false)
+
+onMounted(() => {
+  button.value.addEventListener('pointerdown', onPointerDown)
+  button.value.addEventListener('pointerup', onPointerUp)
+})
+
+onBeforeUnmount(() => {
+  button.value.removeEventListener('pointerdown', onPointerDown)
+  button.value.removeEventListener('pointerup', onPointerUp)
+})
+</script>
@@ -0,0 +1,29 @@
+<template>
+  <button
+    :class="`transition rounded-lg w-10 h-10 flex items-center justify-center ${shadowClasses} ${colorClasses} active:scale-[0.9] outline-none`"
+  >
+    <slot></slot>
+  </button>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  active?: boolean
+  flat?: boolean
+  secondary?: boolean
+}>()
+
+const shadowClasses = computed(() => (props.flat ? '' : 'shadow-md'))
+
+const colorClasses = computed(() => {
+  const parts = []
+  if (props.active) {
+    if (props.secondary) parts.push('bg-foundation text-primary')
+    else parts.push('bg-primary text-foreground-on-primary')
+  } else {
+    parts.push('bg-foundation text-foreground')
+  }
+  return parts.join(' ')
+})
+</script>
@@ -0,0 +1,51 @@
+import { ref, onMounted, onUnmounted, Ref } from 'vue'
+
+// by convention, composable function names start with "use"
+export function useClickDragged(threshold = 1) {
+  // state encapsulated and managed by the composable
+  const dragged = ref(false)
+  const distance = ref(0)
+  const start: Ref<{ x: number; y: number }> = ref(null)
+  const current: Ref<{ x: number; y: number }> = ref(null)
+  function onPointerMove(ev) {
+    distance.value = Math.sqrt(
+      Math.pow(ev.x - start.value.x, 2) * Math.pow(ev.y - start.value.y, 2)
+    )
+    if (distance.value > threshold) {
+      dragged.value = true
+    }
+  }
+
+  function onPointerDown(ev) {
+    dragged.value = false
+    start.value = { x: ev.x, y: ev.y }
+    current.value = start.value
+    distance.value = 0
+    document.addEventListener('pointermove', onPointerMove)
+  }
+
+  function onPointerUp(_) {
+    if (dragged.value === false) reset()
+
+    document.removeEventListener('pointermove', onPointerMove)
+  }
+  function reset() {
+    start.value = null
+    current.value = null
+    distance.value = 0
+  }
+
+  // a composable can also hook into its owner component's
+  // lifecycle to setup and teardown side effects.
+  onMounted(() => {
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('pointerup', onPointerUp)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('pointerdown', onPointerDown)
+    document.removeEventListener('pointerup', onPointerUp)
+  })
+
+  // expose managed state as return value
+  return { dragged, distance }
+}
@@ -1,68 +0,0 @@
-export default class LandingPageHandler {
-  public enabled = false
-  public landingPage: Element = null
-  public target: HTMLElement
-
-  constructor(target: HTMLElement) {
-    this.target = target
-    this.landingPage = createLandingPageElement(this.target)
-  }
-
-  public show() {
-    console.log('Show landing page')
-    if (!this.enabled) {
-      this.target.appendChild(this.landingPage)
-      this.enabled = true
-    }
-  }
-
-  public hide() {
-    console.log('Hide landing page')
-    if (this.enabled) {
-      this.target.removeChild(this.landingPage)
-      this.enabled = false
-    }
-  }
-}
-
-function createLandingPageElement(parent: HTMLElement): Element {
-  const container = parent.appendChild(document.createElement('div'));
-  container.classList.add('speckle-landing')
-
-  const img = document.createElement('div');
-  img.classList.add('speckle-logo')
-  container.appendChild(img)
-
-  const subtext = document.createElement('p');
-  subtext.classList.add('heading')
-  subtext.textContent = 'PowerBI 3D Viewer'
-  container.appendChild(subtext)
-
-  const tipContainer = document.createElement('div');
-  tipContainer.classList.add('tip-container')
-
-  const tip = document.createElement('p');
-  tip.textContent = 'Getting started 💡'
-  tip.classList.add('tip')
-  tipContainer.appendChild(tip)
-
-  const instructions = document.createElement('p');
-  instructions.classList.add('instructions')
-  instructions.textContent = 'Please connect the Stream ID and Object ID fields.'
-  tipContainer.appendChild(instructions)
-
-  const instructions2 = document.createElement('p')
-  instructions2.classList.add('instructions')
-  instructions2.textContent =
-    "Optionally, connect the 'Object Data' field to color the objects by a value"
-  tipContainer.appendChild(instructions2)
-
-  const instructions3 = document.createElement('p')
-  instructions3.classList.add('instructions')
-  instructions3.classList.add('docs')
-  instructions3.innerHTML = 'For more info, check our docs page <b>https://speckle.guide</b>'
-  tipContainer.appendChild(instructions3)
-
-  container.appendChild(tipContainer)
-  return container
-}
@@ -4,8 +4,6 @@ export default class SelectionHandler {
  private selectionManager: powerbi.extensibility.ISelectionManager
  private host: powerbi.extensibility.visual.IVisualHost

-  public PingScreenPosition: (worldPosition) => { x: number; y: number }
-
  public constructor(host: powerbi.extensibility.visual.IVisualHost) {
    this.host = host
    this.selectionManager = this.host.createSelectionManager()
@@ -8,8 +8,6 @@ export default class TooltipHandler {
  private tooltipService: ITooltipService
  public currentTooltip: SpeckleTooltip = null

-  public PingScreenPosition: (worldPosition) => { x: number; y: number } = null
-
  constructor(tooltipService) {
    this.tooltipService = tooltipService
    this.data = new Map<string, IViewerTooltip>()
@@ -39,6 +37,7 @@ export default class TooltipHandler {
    }

    this.tooltipService.show(tooltipData)
+    if (Object.keys(tooltipData.dataItems).length > 0) this.tooltipService.show(tooltipData)
  }

  public hide() {
@@ -46,9 +45,8 @@ export default class TooltipHandler {
    this.currentTooltip = null
  }

-  public move() {
+  public move(pos: { x: number; y: number }) {
    if (!this.currentTooltip) return
-    const pos = this.PingScreenPosition(this.currentTooltip.worldPos)
    this.currentTooltip.tooltip.coordinates = [pos.x, pos.y]
    this.tooltipService.move(this.currentTooltip.tooltip)
  }
@@ -1,65 +1,92 @@
 import {
  CanonicalView,
  FilteringState,
-  Viewer,
+  LegacyViewer,
  IntersectionQuery,
-  DefaultViewerParams
+  DefaultViewerParams,
+  Box3,
+  SpeckleView,
+  CameraController
 } from '@speckle/viewer'
-import { createViewerContainerDiv, pickViewableHit, projectToScreen } from '../utils/viewerUtils'
-import { SpeckleVisualSettings } from '../settings'
-import { SettingsChangedType, Tracker } from '../utils/mixpanel'
+import { pickViewableHit, projectToScreen } from '../utils/viewerUtils'
 import _ from 'lodash'
-
+import { SpeckleVisualSettingsModel } from 'src/settings/visualSettingsModel'
 export default class ViewerHandler {
-  private viewer: Viewer
+  private viewer: LegacyViewer
  private readonly parent: HTMLElement
  private state: FilteringState
  private loadedObjectsCache: Set<string> = new Set<string>()
-  private settings = {
+  private config = {
    authToken: null,
    batchSize: 25
  }
+  private currentSectionBox: Box3 = null
+  private currentSettings: SpeckleVisualSettingsModel

-  public OnCameraUpdate: () => void
+  public getViews() {
+    return this.viewer.getViews()
+  }
+
+  public updateSettings(settings: SpeckleVisualSettingsModel) {
+    // Camera settings
+    switch (settings.camera.projection.value) {
+      case 'perspective':
+        this.viewer.setPerspectiveCameraOn()
+        break
+      case 'orthographic':
+        this.viewer.setOrthoCameraOn()
+        break
+    }
+
+    this.viewer.getExtension(CameraController).controls.maxPolarAngle = settings.camera
+      .allowCameraUnder.value
+      ? Math.PI
+      : Math.PI / 2
+
+    // Lighting settings
+    const newConfig = settings.lighting.getViewerConfiguration()
+    this.viewer.setLightConfiguration(newConfig)
+
+    this.currentSettings = settings
+  }
+
+  public setView(view: SpeckleView | CanonicalView) {
+    this.viewer.setView(view)
+  }
+
+  public setSectionBox(active: boolean, objectIds: string[]) {
+    if (active) {
+      if (this.currentSectionBox === null) {
+        const bbox = this.viewer.getSectionBoxFromObjects(objectIds)
+        this.viewer.setSectionBox(bbox)
+        this.currentSectionBox = bbox
+      } else {
+        const bbox = this.viewer.getCurrentSectionBox()
+        if (bbox) this.currentSectionBox = bbox
+      }
+      this.viewer.sectionBoxOn()
+    } else {
+      this.viewer.sectionBoxOff()
+    }
+    this.viewer.requestRender()
+  }
+
+  public addCameraUpdateEventListener(listener: (ev) => void) {
+    this.viewer.getExtension(CameraController).controls.addEventListener('update', listener)
+  }

  public constructor(parent: HTMLElement) {
    this.parent = parent
  }

-  private onCameraUpdate(args) {
-    if (this.OnCameraUpdate) this.OnCameraUpdate()
-  }
-
-  public changeSettings(oldSettings: SpeckleVisualSettings, newSettings: SpeckleVisualSettings) {
-    console.log('Changing settings in viewer')
-    if (oldSettings.camera.orthoMode != newSettings.camera.orthoMode) {
-      Tracker.settingsChanged(SettingsChangedType.OrthoMode)
-      if (newSettings.camera.orthoMode) this.viewer.cameraHandler?.setOrthoCameraOn()
-      else this.viewer.cameraHandler?.setPerspectiveCameraOn()
-    }
-
-    if (oldSettings.camera.defaultView != newSettings.camera.defaultView) {
-      Tracker.settingsChanged(SettingsChangedType.DefaultCamera)
-      this.viewer.setView(newSettings.camera.defaultView as CanonicalView)
-    }
-  }
-
  public async init() {
    if (this.viewer) return
-    console.log('Initializing viewer')
-    const container = createViewerContainerDiv(this.parent)
    const viewerSettings = DefaultViewerParams
    viewerSettings.showStats = false
    viewerSettings.verbose = false
-    const viewer = new Viewer(container, viewerSettings)
-
+    const viewer = new LegacyViewer(this.parent, viewerSettings)
    await viewer.init()
-
-    // Setup any events here (progress, load-complete...)
-    viewer.cameraHandler.controls.addEventListener('update', this.onCameraUpdate.bind(this))
-
    this.viewer = viewer
-    console.log('Viewer initialized')
  }

  public async unloadObjects(
@@ -67,7 +94,6 @@ export default class ViewerHandler {
    signal?: AbortSignal,
    onObjectUnloaded?: (url: string) => void
  ) {
-    console.log('Unloading objects')
    for (const url of objects) {
      if (signal?.aborted) return
      await this.viewer
@@ -90,30 +116,30 @@ export default class ViewerHandler {
    await this.unloadObjects(objectsToUnload, signal)
    await this.loadObjects(objectUrls, onLoad, onError, signal)
  }
+
  public async loadObjects(
    objectUrls: string[],
    onLoad: (url: string, index: number) => void,
    onError: (url: string, error: Error) => void,
    signal: AbortSignal
  ) {
-    console.groupCollapsed('Loading objects')
    try {
      let index = 0
      let promises = []
      for (const url of objectUrls) {
-        if (signal?.aborted) return
+        signal.throwIfAborted()
        console.log('Attempting to load', url)
        if (!this.loadedObjectsCache.has(url)) {
          console.log('Object is not in cache')
          const promise = this.viewer
-            .loadObjectAsync(url, this.settings.authToken, false)
+            .loadObjectAsync(url, this.config.authToken, false)
            .then(() => onLoad(url, index++))
            .catch((e: Error) => onError(url, e))
            .finally(() => {
              if (!this.loadedObjectsCache.has(url)) this.loadedObjectsCache.add(url)
            })
          promises.push(promise)
-          if (promises.length == this.settings.batchSize) {
+          if (promises.length == this.config.batchSize) {
            //this.promises.push(Promise.resolve(this.later(1000)))
            await Promise.all(promises)
            promises = []
@@ -124,9 +150,8 @@ export default class ViewerHandler {
      }
      await Promise.all(promises)
    } catch (error) {
+      if (error.name === 'AbortError') return
      throw new Error(`Load objects failed: ${error}`)
-    } finally {
-      console.groupEnd()
    }
  }

@@ -149,7 +174,13 @@ export default class ViewerHandler {
      objects: res.objects
    }
  }
+  public zoom(objectIds?: string[]) {
+    this.viewer.zoom(objectIds)
+  }

+  public zoomExtents() {
+    this.viewer.zoom()
+  }
  public async unIsolateObjects() {
    if (this.state.isolatedObjects)
      this.state = await this.viewer.unIsolateObjects(this.state.isolatedObjects, 'powerbi', true)
@@ -165,7 +196,6 @@ export default class ViewerHandler {
      color: string
    }[]
  ) {
-    //@ts-ignore
    this.state = await this.viewer.setUserObjectColors(groups ?? [])
  }

@@ -175,17 +205,21 @@ export default class ViewerHandler {
  }

  public async selectObjects(objectIds: string[] = null) {
+    if (!this.viewer) return
    await this.viewer.resetHighlight()
    const objIds = objectIds ?? []
    this.state = await this.viewer.selectObjects(objIds)
  }

  public getScreenPosition(worldPosition): { x: number; y: number } {
-    return projectToScreen(this.viewer.cameraHandler.camera, worldPosition)
+    return projectToScreen(
+      this.viewer.getExtension(CameraController).controls.camera,
+      worldPosition
+    )
  }

  public dispose() {
-    this.viewer.cameraHandler.controls.removeAllEventListeners()
+    this.viewer.getExtension(CameraController).controls.removeAllEventListeners()
    this.viewer.dispose()
    this.viewer = null
  }
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const source: string
+  export default source
+}
@@ -0,0 +1,12 @@
+import { InjectionKey } from 'vue'
+import SelectionHandler from 'src/handlers/selectionHandler'
+import TooltipHandler from 'src/handlers/tooltipHandler'
+import { Store } from 'vuex'
+import { SpeckleVisualState } from 'src/store'
+import ViewerHandler from 'src/handlers/viewerHandler'
+
+export const selectionHandlerKey: InjectionKey<SelectionHandler> = Symbol()
+export const tooltipHandlerKey: InjectionKey<TooltipHandler> = Symbol()
+export const hostKey: InjectionKey<powerbi.extensibility.visual.IVisualHost> = Symbol()
+export const storeKey: InjectionKey<Store<SpeckleVisualState>> = Symbol()
+export const viewerHandlerKey: InjectionKey<ViewerHandler> = Symbol()
@@ -0,0 +1,35 @@
+import { formattingSettings as fs } from 'powerbi-visuals-utils-formattingmodel'
+
+export class CameraSettings extends fs.Card {
+  public defaultView: fs.SimpleSlice = new fs.AutoDropdown({
+    name: 'defaultView',
+    displayName: 'Default View',
+    value: 'perspective'
+  })
+
+  public projection = new fs.AutoDropdown({
+    name: 'projection',
+    displayName: 'Projection',
+    value: 'perspective'
+  })
+
+  public allowCameraUnder = new fs.ToggleSwitch({
+    name: 'allowCameraUnder',
+    displayName: 'Allow under model',
+    value: false
+  })
+
+  public zoomOnDataChange = new fs.ToggleSwitch({
+    name: 'zoomOnDataChange',
+    displayName: 'Zoom extent on change',
+    value: true
+  })
+  name = 'camera'
+  displayName = 'Camera'
+  slices: fs.Slice[] = [
+    this.defaultView,
+    this.projection,
+    this.allowCameraUnder,
+    this.zoomOnDataChange
+  ]
+}
@@ -0,0 +1,51 @@
+import { formattingSettings as fs } from 'powerbi-visuals-utils-formattingmodel'
+import {
+  createDataViewWildcardSelector,
+  DataViewWildcardMatchingOption
+} from 'powerbi-visuals-utils-dataviewutils/lib/dataViewWildcard'
+import VisualEnumerationInstanceKinds = powerbi.VisualEnumerationInstanceKinds
+
+export enum ContextOption {
+  hidden = 'hidden',
+  ghosted = 'ghosted',
+  show = 'show'
+}
+export class ColorSettings extends fs.Card {
+  public enabled = new fs.ToggleSwitch({
+    name: 'enabled',
+    displayName: 'Enabled',
+    value: true,
+    topLevelToggle: true
+  })
+
+  public fill = new fs.ColorPicker({
+    name: 'fill',
+    displayName: 'Color override',
+    description:
+      'Allows to override the colors of each object based on user-defined rules. Default color does not affect visualization.',
+    value: { value: '#c5c5c5' },
+    defaultColor: { value: '#c5c5c5' },
+    selector: createDataViewWildcardSelector(DataViewWildcardMatchingOption.InstancesAndTotals),
+    altConstantSelector: {
+      static: {}
+    },
+    instanceKind: VisualEnumerationInstanceKinds.ConstantOrRule
+  })
+
+  public context = new fs.AutoDropdown({
+    name: 'context',
+    displayName: 'Context display',
+    description: 'Determines how to display objects not present in the input data table.',
+    value: ContextOption.ghosted
+  })
+
+  name = 'color'
+  displayName = 'Object Display'
+  slices: fs.Slice[] = [this.context, this.fill]
+}
+
+export class ColorSelectorSettings extends fs.Card {
+  name = 'colorSelector'
+  displayName = 'Color Selector'
+  slices = []
+}
@@ -1,45 +0,0 @@
-'use strict'
-
-import { dataViewObjectsParser } from 'powerbi-visuals-utils-dataviewutils'
-import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser
-import _ from 'lodash'
-import { SpeckleVisualSettingsModel } from './visualSettingsModel'
-import { CanonicalView } from '@speckle/viewer/dist/IViewer'
-
-export class CameraSettings {
-  // Default color
-  public orthoMode = false
-  public defaultView: CanonicalView = '3D'
-}
-
-export class ColorSettings {
-  public startColor = '#31c116'
-  public midColor = '#fc8032'
-  public endColor = '#e70000'
-  public background = '#ffffff'
-}
-
-export class SpeckleVisualSettings extends DataViewObjectsParser {
-  public camera: CameraSettings
-  public color: ColorSettings
-  public static OnSettingsChanged: (oldSettings, newSettings) => void
-
-  public constructor() {
-    super()
-    this.camera = new CameraSettings()
-    this.color = new ColorSettings()
-  }
-
-  public static current: SpeckleVisualSettings = new SpeckleVisualSettings()
-
-  public static async handleSettingsUpdate(newSettings: SpeckleVisualSettings) {
-    const same = _.isEqual(this.current, newSettings)
-    if (same) return
-    this.OnSettingsChanged(this.current, newSettings)
-    this.current = newSettings
-  }
-
-  public static async handleSettingsModelUpdate(newSettings: SpeckleVisualSettingsModel) {
-    this.current.color.background = newSettings.colorsCard.backgroundColorSlice.value.value
-  }
-}
@@ -0,0 +1,85 @@
+import { formattingSettings as fs } from 'powerbi-visuals-utils-formattingmodel'
+import ValidatorType = powerbi.visuals.ValidatorType
+import { SunLightConfiguration } from '@speckle/viewer'
+
+export class LightingSettings extends fs.Card {
+  name = 'lighting'
+  displayName = 'Lighting'
+
+  public enabled = new fs.ToggleSwitch({
+    name: 'enabled',
+    displayName: 'Enabled',
+    value: true,
+    topLevelToggle: true
+  })
+
+  public intensity = new fs.Slider({
+    name: 'intensity',
+    displayName: 'Intensity',
+    options: {
+      minValue: { type: ValidatorType.Min, value: 1 },
+      maxValue: { type: ValidatorType.Max, value: 10 }
+    },
+    value: 5
+  })
+  public elevation = new fs.Slider({
+    name: 'elevation',
+    displayName: 'Elevation',
+    options: {
+      minValue: { type: ValidatorType.Min, value: 0 },
+      maxValue: { type: ValidatorType.Max, value: Math.PI }
+    },
+    value: 1.33
+  })
+  public azimuth = new fs.Slider({
+    name: 'azimuth',
+    displayName: 'azimuth',
+    options: {
+      minValue: { type: ValidatorType.Min, value: -Math.PI * 0.5 },
+      maxValue: { type: ValidatorType.Max, value: Math.PI * 0.5 }
+    },
+    value: 0.75
+  })
+  public indirect = new fs.Slider({
+    name: 'indirect',
+    displayName: 'indirect',
+    options: {
+      minValue: { type: ValidatorType.Min, value: 0.0 },
+      maxValue: { type: ValidatorType.Max, value: 5.0 }
+    },
+    value: 1.2
+  })
+
+  public shadows = new fs.ToggleSwitch({
+    name: 'shadows',
+    displayName: 'Cast shadows',
+    value: true
+  })
+
+  public shadowCatcher = new fs.ToggleSwitch({
+    name: 'shadowCatcher',
+    displayName: 'Catch Shadows',
+    value: true
+  })
+
+  slices: fs.Slice[] = [
+    this.intensity,
+    this.elevation,
+    this.azimuth,
+    this.indirect,
+    this.shadows,
+    this.shadowCatcher
+  ]
+
+  public getViewerConfiguration(): SunLightConfiguration {
+    return {
+      enabled: this.enabled.value,
+      castShadow: this.shadows.value,
+      intensity: this.intensity.value,
+      elevation: this.elevation.value,
+      azimuth: this.azimuth.value,
+      indirectLightIntensity: this.intensity.value,
+      shadowcatcher: this.shadowCatcher.value
+    }
+  }
+}
@@ -1,51 +1,17 @@
-import { formattingSettings } from 'powerbi-visuals-utils-formattingmodel'
-import { SpeckleVisualSettings } from './'
+import { formattingSettings as fs } from 'powerbi-visuals-utils-formattingmodel'
+import { ColorSelectorSettings, ColorSettings } from 'src/settings/colorSettings'
+import { CameraSettings } from 'src/settings/cameraSettings'
+import { LightingSettings } from 'src/settings/lightingSettings'

-import FormattingSettingsCard = formattingSettings.Card
-import FormattingSettingsModel = formattingSettings.Model
-import FormattingSettingsSlice = formattingSettings.Slice
-
-export class SpeckleVisualSettingsModel extends FormattingSettingsModel {
+export class SpeckleVisualSettingsModel extends fs.Model {
  // Building my visual formatting settings card
-  colorsCard: SpeckleVisualColorSettingsCard = new SpeckleVisualColorSettingsCard()
+  public color: ColorSettings = new ColorSettings()

-  // Add formatting settings card to cards list in model
-  cards = [this.colorsCard]
-}
-
-class SpeckleVisualColorSettingsCard extends FormattingSettingsCard {
-  public startColorSlice = new formattingSettings.ColorPicker({
-    name: 'startColor',
-    displayName: 'Start Color',
-    value: { value: '#ffffff' },
-    defaultColor: { value: '#ffffff' }
-  })
-
-  public midColorSlice = new formattingSettings.ColorPicker({
-    name: 'midColor',
-    displayName: 'Mid Color',
-    value: { value: SpeckleVisualSettings.current.color.midColor }
-  })
-
-  public endColorSlice = new formattingSettings.ColorPicker({
-    name: 'endColor',
-    displayName: 'End Color',
-    value: { value: SpeckleVisualSettings.current.color.endColor }
-  })
-
-  public backgroundColorSlice = new formattingSettings.ColorPicker({
-    name: 'backgroundColor',
-    displayName: 'Background Color',
-    value: { value: SpeckleVisualSettings.current.color.background }
-  })
-
-  name = 'speckleVisual_colors'
-  displayName = 'Colors'
-  analyticsPane = false
-  slices: Array<FormattingSettingsSlice> = [
-    this.startColorSlice,
-    this.midColorSlice,
-    this.endColorSlice,
-    this.backgroundColorSlice
-  ]
+  public colorSelector: ColorSelectorSettings = new ColorSelectorSettings()
+
+  public camera: CameraSettings = new CameraSettings()
+
+  public lighting: LightingSettings = new LightingSettings()
+
+  cards = [this.color, this.camera, this.lighting]
 }
@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/ban-types */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
@@ -0,0 +1,41 @@
+import { createStore } from 'vuex'
+import { SpeckleDataInput } from 'src/types'
+import { SpeckleVisualSettingsModel } from 'src/settings/visualSettingsModel'
+export type InputState = 'valid' | 'incomplete' | 'invalid'
+
+export interface SpeckleVisualState {
+  input?: SpeckleDataInput
+  status: InputState
+  settings: SpeckleVisualSettingsModel
+}
+
+// Create a new store instance.
+export const store = createStore<SpeckleVisualState>({
+  state() {
+    return {
+      input: null,
+      status: 'incomplete',
+      settings: null
+    }
+  },
+  mutations: {
+    setInput(state, input?: SpeckleDataInput) {
+      state.input = input
+    },
+    setStatus(state, status: InputState) {
+      state.status = status ?? 'invalid'
+    },
+    setSettings(state, settings: SpeckleVisualSettingsModel) {
+      state.settings = settings
+    },
+    clearInput(state) {
+      state.input = null
+    }
+  },
+  actions: {
+    update(context, status: InputState, input?: SpeckleDataInput) {
+      context.commit('setInput', input)
+      context.commit('setStatus', status)
+    }
+  }
+})
@@ -1,3 +1,4 @@
+import { formattingSettings as fs } from 'powerbi-visuals-utils-formattingmodel'
 export interface IViewerTooltipData {
  displayName: string
  value: string
@@ -8,11 +9,11 @@ export interface IViewerTooltip {
  data: IViewerTooltipData[]
 }

-export type SpeckleDataInput = {
+export interface SpeckleDataInput {
  objectsToLoad: string[]
  objectIds: string[]
  selectedIds: string[]
-  colorByIds: { objectIds: string[]; color: string }[]
+  colorByIds: { objectIds: string[]; slice: fs.ColorPicker; color: string }[]
  objectTooltipData: Map<string, IViewerTooltip>
  view: powerbi.DataViewMatrix
 }
@@ -1,8 +1,12 @@
 import powerbi from 'powerbi-visuals-api'
 import { IViewerTooltip, IViewerTooltipData, SpeckleDataInput } from '../types'
+import { formattingSettings as fs } from 'powerbi-visuals-utils-formattingmodel'
+import {
+  createDataViewWildcardSelector,
+  DataViewWildcardMatchingOption
+} from 'powerbi-visuals-utils-dataviewutils/lib/dataViewWildcard'
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions
-import { hasRole } from 'powerbi-visuals-utils-dataviewutils/lib/dataRoleHelper'
-import { LOD } from 'three'
+import { SpeckleVisualSettingsModel } from 'src/settings/visualSettingsModel'

 export function validateMatrixView(options: VisualUpdateOptions): {
  hasColorFilter: boolean
@@ -42,24 +46,27 @@ function processObjectValues(
  let shouldColor = true,
    shouldSelect = false

-  Object.keys(objectIdChild.values).forEach((key) => {
-    const value: powerbi.DataViewMatrixNodeValue = objectIdChild.values[key]
-    const k: unknown = key
-    const colInfo = matrixView.valueSources[k as number]
-    const highLightActive = value.highlight !== undefined
-    if (highLightActive) shouldColor = false
-    const isHighlighted = value.highlight !== null
+  if (objectIdChild.values)
+    Object.keys(objectIdChild.values).forEach((key) => {
+      const value: powerbi.DataViewMatrixNodeValue = objectIdChild.values[key]
+      const k: unknown = key
+      const colInfo = matrixView.valueSources[k as number]
+      const highLightActive = value.highlight !== undefined
+      if (highLightActive) {
+        shouldColor = false
+      }
+      const isHighlighted = value.highlight !== null

-    if (highLightActive && isHighlighted) {
-      shouldSelect = true
-      shouldColor = true
-    }
-    const propData: IViewerTooltipData = {
-      displayName: colInfo.displayName,
-      value: value.value.toString()
-    }
-    objectData.push(propData)
-  })
+      if (highLightActive && isHighlighted) {
+        shouldSelect = true
+        shouldColor = true
+      }
+      const propData: IViewerTooltipData = {
+        displayName: colInfo.displayName,
+        value: value.value.toString()
+      }
+      objectData.push(propData)
+    })
  return { data: objectData, shouldColor, shouldSelect }
 }

@@ -67,19 +74,34 @@ function processObjectNode(
  objectIdChild: powerbi.DataViewMatrixNode,
  host: powerbi.extensibility.visual.IVisualHost,
  matrixView: powerbi.DataViewMatrix
-) {
+): {
+  data: IViewerTooltipData[]
+  shouldColor: boolean
+  shouldSelect: boolean
+  id: string
+  selectionId: powerbi.visuals.ISelectionId
+  color?: string
+} {
  const objId = objectIdChild.value as string
  // Create selection IDs for each object
  const nodeSelection = host
    .createSelectionIdBuilder()
    .withMatrixNode(objectIdChild, matrixView.rows.levels)
    .createSelectionId()
-
  // Create value records for the tooltips
-  if (objectIdChild.values) {
-    var objectValues = processObjectValues(objectIdChild, matrixView)
+  const objectValues = processObjectValues(objectIdChild, matrixView)
+  const res = { id: objId, selectionId: nodeSelection, color: undefined, ...objectValues }
+  // Process node objects, if any.
+  if (objectIdChild.objects) {
+    //@ts-ignore
+    const color = objectIdChild.objects.color.fill.solid.color as string
+    console.log('⚠️ HAS objects', color)
+    if (color) {
+      res.color = color
+      res.shouldColor = true
+    }
  }
-  return { id: objId, selectionId: nodeSelection, ...objectValues }
+  return res
 }

 function processObjectIdLevel(
@@ -92,12 +114,16 @@ function processObjectIdLevel(
  )
 }

-var previousPalette = null
-var previousPaletteKey = null
+export let previousPalette = null
+
+export function resetPalette() {
+  previousPalette = null
+}
 export function processMatrixView(
  matrixView: powerbi.DataViewMatrix,
  host: powerbi.extensibility.visual.IVisualHost,
  hasColorFilter: boolean,
+  settings: SpeckleVisualSettingsModel,
  onSelectionPair: (objId: string, selectionId: powerbi.extensibility.ISelectionId) => void
 ): SpeckleDataInput {
  const objectUrlsToLoad = [],
@@ -105,6 +131,7 @@ export function processMatrixView(
    selectedIds = [],
    colorByIds = [],
    objectTooltipData = new Map<string, IViewerTooltip>()
+
  matrixView.rows.root.children.forEach((streamUrlChild) => {
    const url = streamUrlChild.value

@@ -113,11 +140,21 @@ export function processMatrixView(
      objectUrlsToLoad.push(`${url}/objects/${parentId}`)

      if (!hasColorFilter) {
-        console.log('🖌️❌ NO COLOR FILTER')
        processObjectIdLevel(parentObjectIdChild, host, matrixView).forEach((objRes) => {
          objectIds.push(objRes.id)
          onSelectionPair(objRes.id, objRes.selectionId)
          if (objRes.shouldSelect) selectedIds.push(objRes.id)
+          if (objRes.color) {
+            let group = colorByIds.find((g) => g.color === objRes.color)
+            if (!group) {
+              group = {
+                color: objRes.color,
+                objectIds: []
+              }
+              colorByIds.push(group)
+            }
+            group.objectIds.push(objRes.id)
+          }
          objectTooltipData.set(objRes.id, {
            selectionId: objRes.selectionId,
            data: objRes.data
@@ -126,15 +163,38 @@ export function processMatrixView(
      } else {
        if (previousPalette) host.colorPalette['colorPalette'] = previousPalette
        parentObjectIdChild.children?.forEach((colorByChild) => {
+          const colorSelectionId = host
+            .createSelectionIdBuilder()
+            .withMatrixNode(colorByChild, matrixView.rows.levels)
+            .createSelectionId()
+
          const color = host.colorPalette.getColor(colorByChild.value as string)
+          if (colorByChild.objects) {
+            console.log(
+              '⚠️COLOR NODE HAS objects',
+              colorByChild.objects,
+              colorByChild.objects.color?.fill
+            )
+          }
+
+          const colorSlice = new fs.ColorPicker({
+            name: 'selectorFill',
+            displayName: colorByChild.value.toString(),
+            value: {
+              value: color.value
+            },
+            selector: colorSelectionId.getSelector()
+          })
+
          const colorGroup = {
            color: color.value,
+            slice: colorSlice,
            objectIds: []
          }
+
          processObjectIdLevel(colorByChild, host, matrixView).forEach((objRes) => {
            objectIds.push(objRes.id)
            onSelectionPair(objRes.id, objRes.selectionId)
-
            if (objRes.shouldSelect) selectedIds.push(objRes.id)
            if (objRes.shouldColor) {
              colorGroup.objectIds.push(objRes.id)
@@ -0,0 +1,67 @@
+import powerbiVisualsApi from 'powerbi-visuals-api'
+import powerbi = powerbiVisualsApi
+
+import DataViewObject = powerbi.DataViewObject
+import DataViewObjects = powerbi.DataViewObjects
+import DataViewCategoryColumn = powerbi.DataViewCategoryColumn
+
+/**
+ * Gets property value for a particular object.
+ *
+ * @function
+ * @param {DataViewObjects} objects - Map of defined objects.
+ * @param {string} objectName       - Name of desired object.
+ * @param {string} propertyName     - Name of desired property.
+ * @param {T} defaultValue          - Default value of desired property.
+ */
+export function getValue<T>(
+  objects: DataViewObjects,
+  objectName: string,
+  propertyName: string,
+  defaultValue: T
+): T {
+  if (objects) {
+    const object = objects[objectName]
+    if (object) {
+      const property: T = <T>object[propertyName]
+      if (property !== undefined) {
+        return property
+      }
+    }
+  }
+  return defaultValue
+}
+
+/**
+ * Gets property value for a particular object in a category.
+ *
+ * @function
+ * @param {DataViewCategoryColumn} category - List of category objects.
+ * @param {number} index                    - Index of category object.
+ * @param {string} objectName               - Name of desired object.
+ * @param {string} propertyName             - Name of desired property.
+ * @param {T} defaultValue                  - Default value of desired property.
+ */
+export function getCategoricalObjectValue<T>(
+  category: DataViewCategoryColumn,
+  index: number,
+  objectName: string,
+  propertyName: string,
+  defaultValue: T
+): T {
+  const categoryObjects = category.objects
+
+  if (categoryObjects) {
+    const categoryObject: DataViewObject = categoryObjects[index]
+    if (categoryObject) {
+      const object = categoryObject[objectName]
+      if (object) {
+        const property: T = <T>object[propertyName]
+        if (property !== undefined) {
+          return property
+        }
+      }
+    }
+  }
+  return defaultValue
+}
@@ -1,5 +1,3 @@
-// MIT License
-
 // Copyright (c) 2022 Davide Aversa

 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { FormButton } from '@speckle/ui-components'
+import { inject } from 'vue'
+import { hostKey } from 'src/injectionKeys'
+
+const host = inject(hostKey)
+
+function goToForum() {
+  host.launchUrl('https://speckle.community/tag/powerbi')
+}
+
+function goToGuide() {
+  host.launchUrl('https://speckle.guide/user/powerbi')
+}
+</script>
+
+<template>
+  <div
+    id="speckle-home-view"
+    class="flex flex-col justify-center items-center h-full w-full bg-primary text-center text-foundation"
+  >
+    <div class="flex justify-center items-center">
+      <img src="@assets/logo-white.png" alt="Logo" class="w-1/3" />
+    </div>
+    <p class="heading">Speckle PowerBI 3D Visual</p>
+    <div class="flex justify-center mt-2 gap-1">
+      <FormButton color="invert" @click="goToForum">Help</FormButton>
+      <FormButton color="invert" @click="goToGuide">Getting started</FormButton>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import ViewerWrapper from 'src/components/ViewerWrapper.vue'
+import { inject } from 'vue'
+import { hostKey } from 'src/injectionKeys'
+
+const host = inject(hostKey)
+
+const goToSpeckleWebsite = () => host.launchUrl('https://speckle.systems')
+</script>
+
+<template>
+  <div id="overlay">
+    <img class="watermark" src="@assets/powered-by-speckle.png" @click="goToSpeckleWebsite" />
+  </div>
+  <viewer-wrapper id="speckle-3d-view" class="h-full w-full"></viewer-wrapper>
+</template>
+
+<style scoped>
+.watermark {
+  height: auto;
+  width: 60pt;
+  margin-top: 3pt;
+  margin-right: 3pt;
+}
+
+.watermark:hover {
+  cursor: pointer;
+}
+
+#overlay {
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+}
+</style>
@@ -1,18 +1,18 @@
 import 'core-js/stable'
 import 'regenerator-runtime/runtime'
-import './../style/visual.less'
-
+import '../style/visual.css'
 import * as _ from 'lodash'
 import { FormattingSettingsService } from 'powerbi-visuals-utils-formattingmodel'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { store } from 'src/store'
+import { hostKey, selectionHandlerKey, tooltipHandlerKey, storeKey } from 'src/injectionKeys'

 import { Tracker } from './utils/mixpanel'
 import { SpeckleDataInput } from './types'
 import { processMatrixView, validateMatrixView } from './utils/matrixViewUtils'
-import { SpeckleVisualSettings } from './settings'
 import { SpeckleVisualSettingsModel } from './settings/visualSettingsModel'

-import ViewerHandler from './handlers/viewerHandler'
-import LandingPageHandler from './handlers/landingPageHandler'
 import TooltipHandler from './handlers/tooltipHandler'
 import SelectionHandler from './handlers/selectionHandler'

@@ -20,221 +20,108 @@ import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructor
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions
 import IVisual = powerbi.extensibility.visual.IVisual
 import ITooltipService = powerbi.extensibility.ITooltipService
-import { isMultiSelect } from './utils/isMultiSelect'
+import {
+  createDataViewWildcardSelector,
+  DataViewWildcardMatchingOption
+} from 'powerbi-visuals-utils-dataviewutils/lib/dataViewWildcard'
+import { ColorSelectorSettings } from 'src/settings/colorSettings'

 // noinspection JSUnusedGlobalSymbols
 export class Visual implements IVisual {
-  private readonly target: HTMLElement
  private readonly host: powerbi.extensibility.visual.IVisualHost
-  private readonly viewerHandler: ViewerHandler
-
  private selectionHandler: SelectionHandler
-  private landingPageHandler: LandingPageHandler
  private tooltipHandler: TooltipHandler
+
  private formattingSettings: SpeckleVisualSettingsModel
  private formattingSettingsService: FormattingSettingsService
-  private updateTask: Promise<void>
-  private ac = new AbortController()
-  private moved = false

  // noinspection JSUnusedGlobalSymbols
  public constructor(options: VisualConstructorOptions) {
    Tracker.loaded()
    this.host = options.host
-    this.target = options.element
    this.formattingSettingsService = new FormattingSettingsService()

    console.log('🚀 Init handlers')
-
    this.selectionHandler = new SelectionHandler(this.host)
-    this.landingPageHandler = new LandingPageHandler(this.target)
-    this.viewerHandler = new ViewerHandler(this.target)
    this.tooltipHandler = new TooltipHandler(this.host.tooltipService as ITooltipService)

-    console.log('🚀 Setup handler events')
-
-    this.target.addEventListener('pointerdown', this.onPointerDown)
-    this.target.addEventListener('pointerup', this.onPointerUp)
-
-    this.target.addEventListener('click', this.onClick)
-    this.target.addEventListener('auxclick', this.onAuxClick)
-
-    this.viewerHandler.OnCameraUpdate = _.throttle((args) => {
-      this.tooltipHandler.move()
-    }, 1000.0 / 60.0).bind(this)
-
-    this.tooltipHandler.PingScreenPosition = this.viewerHandler.getScreenPosition.bind(
-      this.viewerHandler
-    )
-    this.selectionHandler.PingScreenPosition = this.viewerHandler.getScreenPosition.bind(
-      this.viewerHandler
-    )
-
-    SpeckleVisualSettings.OnSettingsChanged = (oldSettings, newSettings) => {
-      this.viewerHandler.changeSettings(oldSettings, newSettings)
-    }
-
-    //Show landing Page by default
-    this.landingPageHandler.show()
+    console.log('🚀 Init Vue App')
+    createApp(App)
+      .use(store, storeKey)
+      .provide(selectionHandlerKey, this.selectionHandler)
+      .provide(tooltipHandlerKey, this.tooltipHandler)
+      .provide(hostKey, options.host)
+      .mount(options.element)
  }

  private async clear() {
-    this.ac.abort()
-    await this.updateTask
-    await this.viewerHandler.clear()
    this.selectionHandler.clear()
-    this.ac = new AbortController()
  }

  public update(options: VisualUpdateOptions) {
+    // @ts-ignore
+    console.log('⤴️ Update type 👉', powerbi.VisualUpdateType[options.type])
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(
      SpeckleVisualSettingsModel,
      options.dataViews
    )
-    SpeckleVisualSettings.handleSettingsModelUpdate(this.formattingSettings)

+    console.log('Selector colors', this.formattingSettings.colorSelector)
+    let validationResult: { hasColorFilter: boolean; view: powerbi.DataViewMatrix } = null
    try {
      console.log('🔍 Validating input...', options)
-      var validationResult = validateMatrixView(options)
+      validationResult = validateMatrixView(options)
      console.log('✅Input valid', validationResult)
-      this.landingPageHandler.hide()
    } catch (e) {
      console.log('❌Input not valid:', (e as Error).message)
      this.host.displayWarningIcon(
        `Incomplete data input.`,
-        `"Stream URL" and "Object ID" data inputs are mandatory`
+        `"Model URL", "Version Object ID" and "Object ID" data inputs are mandatory. If your data connector does not output all these columns, please update it.`
      )
-      console.warn(`Incomplete data input. "Stream URL" and "Object ID" data inputs are mandatory`)
-      this.clear()
-      this.landingPageHandler.show()
+      console.warn(
+        `Incomplete data input. "Model URL", "Version Object ID" and "Object ID" data inputs are mandatory. If your data connector does not output all these columns, please update it.`
+      )
+      store.commit('setStatus', 'incomplete')
      return
    }

-    try {
-      switch (options.type) {
-        case powerbi.VisualUpdateType.Resize:
-        case powerbi.VisualUpdateType.ResizeEnd:
-        case powerbi.VisualUpdateType.Style:
-        case powerbi.VisualUpdateType.ViewMode:
-        case powerbi.VisualUpdateType.Resize + powerbi.VisualUpdateType.ResizeEnd:
-          return
-        default:
-          var input = processMatrixView(
+    switch (options.type) {
+      case powerbi.VisualUpdateType.Resize:
+      case powerbi.VisualUpdateType.ResizeEnd:
+      case powerbi.VisualUpdateType.Style:
+      case powerbi.VisualUpdateType.ViewMode:
+      case powerbi.VisualUpdateType.Resize + powerbi.VisualUpdateType.ResizeEnd:
+        return
+      default:
+        try {
+          const input = processMatrixView(
            validationResult.view,
            this.host,
            validationResult.hasColorFilter,
+            this.formattingSettings,
            (obj, id) => this.selectionHandler.set(obj, id)
          )
-          this.tooltipHandler.setup(input.objectTooltipData)
          this.throttleUpdate(input)
-      }
-    } catch (error) {
-      console.error('Data update error', error ?? 'Unknown')
+        } catch (error) {
+          console.error('Data update error', error ?? 'Unknown')
+        }
    }
  }
-
-  private async handleDataUpdate(input: SpeckleDataInput, signal: AbortSignal) {
-    console.log('DATA UPDATE', input)
-    await this.viewerHandler.selectObjects(null)
-    await this.viewerHandler.loadObjectsWithAutoUnload(
-      input.objectsToLoad,
-      this.onLoad,
-      this.onError,
-      signal
-    )
-    if (signal.aborted) {
-      console.warn('Aborted')
-      return
-    }
-
-    await this.viewerHandler.colorObjectsByGroup(input.colorByIds)
-    await this.viewerHandler.unIsolateObjects()
-    if (input.selectedIds.length == 0)
-      await this.viewerHandler.isolateObjects(input.objectIds, true)
-    else await this.viewerHandler.isolateObjects(input.selectedIds, true)
-  }
-
  public getFormattingModel(): powerbi.visuals.FormattingModel {
-    return this.formattingSettingsService.buildFormattingModel(this.formattingSettings)
+    console.log('Showing Formatting settings', this.formattingSettings)
+    const model = this.formattingSettingsService.buildFormattingModel(this.formattingSettings)
+    console.log('Formatting model was created', model)
+    return model
  }

  private throttleUpdate = _.throttle((input: SpeckleDataInput) => {
-    this.viewerHandler.init().then(async () => {
-      if (this.updateTask) {
-        this.ac.abort()
-        console.log('Cancelling previous load job')
-        await this.updateTask
-        this.ac = new AbortController()
-      }
-      // Handle the update in data passed to this visual
-      this.updateTask = this.handleDataUpdate(input, this.ac.signal).then(() => {
-        this.ac = new AbortController()
-        this.updateTask = undefined
-      })
-    })
+    this.tooltipHandler.setup(input.objectTooltipData)
+    store.commit('setInput', input)
+    store.commit('setStatus', 'valid')
+    store.commit('setSettings', this.formattingSettings)
  }, 500)

-  private onLoad(url: string, index: number) {
-    console.log(`Loaded object ${url} with index ${index}`)
-  }
-
-  private onError(url: string, error: Error) {
-    console.warn(`Error loading object ${url} with error`, error)
-    this.host.displayWarningIcon(
-      'Load error',
-      `One or more objects could not be loaded 
-      Please ensure that the stream you're trying to access is PUBLIC
-      The Speckle PowerBI Viewer cannot handle private streams yet.
-      `
-    )
-  }
-
-  private onPointerMove = (_) => {
-    this.moved = true
-  }
-  private onPointerDown = (_) => {
-    this.moved = false
-    this.target.addEventListener('pointermove', this.onPointerMove)
-  }
-  private onPointerUp = (_) => {
-    this.target.removeEventListener('pointermove', this.onPointerMove)
-  }
-
-  private onClick = async (ev) => {
-    if (this.moved) return
-    const intersectResult = await this.viewerHandler.intersect({ x: ev.clientX, y: ev.clientY })
-    const multi = isMultiSelect(ev)
-    const hit = intersectResult?.hit
-    if (hit) {
-      const id = hit.object.id as string
-
-      if (multi || !this.selectionHandler.isSelected(id))
-        await this.selectionHandler.select(id, multi)
-
-      this.tooltipHandler.show(hit, { x: ev.clientX, y: ev.clientY })
-      const selection = this.selectionHandler.getCurrentSelection()
-      const ids = selection.map((s) => s.id)
-      await this.viewerHandler.selectObjects(ids)
-    } else {
-      this.tooltipHandler.hide()
-      if (!multi) {
-        this.selectionHandler.clear()
-        await this.viewerHandler.selectObjects(null)
-      }
-    }
-  }
-  private onAuxClick = async (ev) => {
-    if (ev.button != 2 || this.moved) return
-    const intersectResult = await this.viewerHandler.intersect({ x: ev.clientX, y: ev.clientY })
-    await this.selectionHandler.showContextMenu(ev, intersectResult?.hit)
-  }
-
  public async destroy() {
    await this.clear()
-    this.viewerHandler.dispose()
-    this.target.removeEventListener('pointerup', this.onPointerUp)
-    this.target.removeEventListener('pointerdown', this.onPointerDown)
-    this.target.removeEventListener('click', this.onClick)
-    this.target.removeEventListener('auxclick', this.onAuxClick)
  }
 }
@@ -0,0 +1,4 @@
+@import '@speckle/ui-components/style.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -1,53 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
-
-p {
-  font-size: 15px;
-  font-family: "Space Grotesk", sans-serif;
-}
-
-.speckle-landing {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.speckle-logo {
-  background-image: url("../assets/logo-blue-2.png");
-  background-repeat: no-repeat;
-  background-size: contain;
-  min-width: 200px;
-  min-height: 60px;
-  background-color: transparent;
-}
-
-.heading {
-  font-size: 20px;
-  font-weight: bold;
-  margin: 10px;
-}
-
-.instructions {
-  color: grey;
-  margin: 0;
-}
-
-.tip-container {
-  background-color: gainsboro;
-  border-radius: 10px;
-  padding: 10px;
-}
-
-.tip {
-  font-weight: bold;
-  font-style: italic;
-  margin: 0;
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
@@ -0,0 +1,11 @@
+const speckleTheme = require("@speckle/tailwind-theme");
+const themeConfig = require("@speckle/tailwind-theme/tailwind-configure");
+const uiConfig = require("@speckle/ui-components/tailwind-configure");
+const formsPlugin = require("@tailwindcss/forms");
+
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  darkMode: "class",
+  content: ["./src/**/*.{js,ts,vue}", themeConfig.tailwindContentEntry(require), uiConfig.tailwindContentEntry(require)],
+  plugins: [speckleTheme.default, formsPlugin]
+};
@@ -11,8 +11,20 @@
    "lib": ["es2020", "dom"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
-    "types": []
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"],
+      "@assets/*": ["assets/*"]
+    }
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS",
+      "esModuleInterop": true
+    }
  },
  "files": ["./src/visual.ts"],
-  "include": ["./src/**/*.ts"]
+  "include": ["./src/**/*.ts", "./src/**/*.vue"],
+  "exclude": ["webpack.config.dev.ts"]
 }
@@ -0,0 +1,225 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import path from 'path'
+
+// api configuration
+import powerbi from 'powerbi-visuals-api'
+import ExtraWatchWebpackPlugin from 'extra-watch-webpack-plugin'
+import { BundleAnalyzerPlugin as Visualizer } from 'webpack-bundle-analyzer'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import { PowerBICustomVisualsWebpackPlugin } from 'powerbi-visuals-webpack-plugin'
+import webpack from 'webpack'
+import fs from 'fs'
+import { WebpackConfiguration } from 'webpack-cli'
+import { VueLoaderPlugin } from 'vue-loader'
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const powerbiApi: any = powerbi // Types for PowerBI seem to be off, so I'm instead forcing it to `any`
+
+// visual configuration json path
+const pbivizPath = './pbiviz.json'
+const pbivizFile = require(path.join(__dirname, pbivizPath))
+
+// the visual capabilities content
+const capabilitiesPath = './capabilities.json'
+const capabilitiesFile = require(path.join(__dirname, capabilitiesPath))
+
+const pluginLocation = './.tmp/precompile/visualPlugin.ts' // path to visual plugin file, the file generates by the plugin
+
+// string resources
+const resourcesFolder = path.join('.', 'stringResources')
+const localizationFolders = fs.existsSync(resourcesFolder) && fs.readdirSync(resourcesFolder)
+const statsLocation = '../../webpack.statistics.html'
+
+// babel options to support IE11
+const babelOptions = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          ie: '11'
+        },
+        useBuiltIns: 'entry',
+        corejs: 3,
+        modules: false
+      }
+    ]
+  ],
+  plugins: [],
+  sourceType: 'unambiguous', // tell to babel that the project can contain different module types, not only es2015 modules
+  cacheDirectory: path.join('.tmp', 'babelCache') // path for cache files
+}
+
+const config: WebpackConfiguration = {
+  entry: {
+    visual: pluginLocation
+  },
+  optimization: {
+    concatenateModules: false,
+    minimize: false // enable minimization for create *.pbiviz file less than 2 Mb, can be disabled for dev mode
+  },
+  devtool: 'source-map',
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: ['vue-loader']
+      },
+      {
+        parser: {
+          amd: false
+        }
+      },
+      {
+        test: /(\.ts)x|\.ts$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                // '@babel/react',
+                '@babel/env'
+              ]
+            }
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: false,
+              experimentalWatchApi: false,
+              appendTsSuffixTo: [/\.vue$/]
+            }
+          }
+        ],
+        exclude: [/node_modules/],
+        include: /.tmp|powerbi-visuals-|src|precompile\\visualPlugin.ts/
+      },
+      {
+        test: /(\.js)x|\.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions
+          }
+        ],
+        exclude: [/node_modules/]
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+        type: 'javascript/auto'
+      },
+      {
+        test: /\.(css|scss)?$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.(woff|ttf|ico|woff2|jpg|jpeg|png|webp|svg)$/i,
+        use: ['base64-inline-loader']
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '.css'],
+    alias: {
+      src: path.resolve(__dirname, 'src/'),
+      assets: path.resolve(__dirname, 'assets/')
+    },
+    plugins: [new TsconfigPathsPlugin()]
+  },
+  output: {
+    publicPath: '/assets',
+    path: path.join(__dirname, '/.tmp', 'drop'),
+    library: +powerbiApi.version.replace(/\./g, '') >= 320 ? pbivizFile.visual.guid : undefined,
+    libraryTarget: +powerbiApi.version.replace(/\./g, '') >= 320 ? 'var' : undefined
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, '.tmp', 'drop'), // path with assets for dev server, they are generated by webpack plugin
+      publicPath: '/assets'
+    },
+    compress: true,
+    port: 8080, // dev server port
+    hot: false,
+    https: {},
+    liveReload: false,
+    webSocketServer: false,
+    headers: {
+      'access-control-allow-origin': '*',
+      'cache-control': 'public, max-age=0'
+    }
+  },
+  externals:
+    powerbiApi.version.replace(/\./g, '') >= 320
+      ? {
+          'powerbi-visuals-api': 'null',
+          fakeDefine: 'false'
+        }
+      : {
+          'powerbi-visuals-api': 'null',
+          fakeDefine: 'false',
+          corePowerbiObject: "Function('return this.powerbi')()",
+          realWindow: "Function('return this')()"
+        },
+  plugins: [
+    new webpack.DefinePlugin({
+      __VUE_OPTIONS_API__: JSON.stringify(true),
+      __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'visual.css',
+      chunkFilename: '[id].css'
+    }),
+    new Visualizer({
+      reportFilename: statsLocation,
+      openAnalyzer: false,
+      analyzerMode: `static`
+    }),
+    // visual plugin regenerates with the visual source, but it does not require relaunching dev server
+    new webpack.WatchIgnorePlugin({
+      paths: [path.join(__dirname, pluginLocation), './.tmp/**/*.*']
+    }),
+    // custom visuals plugin instance with options
+    new PowerBICustomVisualsWebpackPlugin({
+      ...pbivizFile,
+      compression: 0,
+      capabilities: capabilitiesFile,
+      stringResources:
+        localizationFolders &&
+        localizationFolders.map((localization) =>
+          path.join(resourcesFolder, localization, 'resources.resjson')
+        ),
+      apiVersion: powerbiApi.version,
+      capabilitiesSchema: powerbiApi.schemas.capabilities,
+      pbivizSchema: powerbiApi.schemas.pbiviz,
+      stringResourcesSchema: powerbiApi.schemas.stringResources,
+      dependenciesSchema: powerbiApi.schemas.dependencies,
+      devMode: false,
+      generatePbiviz: false,
+      generateResources: true,
+      minifyJS: false,
+      minify: false,
+      modules: true,
+      visualSourceLocation: '../../src/visual',
+      pluginLocation: pluginLocation,
+      packageOutPath: path.join(__dirname, 'dist')
+    }),
+    new ExtraWatchWebpackPlugin({
+      files: [pbivizPath, capabilitiesPath]
+    }),
+    powerbiApi.version.replace(/\./g, '') >= 320
+      ? new webpack.ProvidePlugin({
+          define: 'fakeDefine'
+        })
+      : new webpack.ProvidePlugin({
+          window: 'realWindow',
+          define: 'fakeDefine',
+          powerbi: 'corePowerbiObject'
+        })
+  ]
+}
+
+export default config
@@ -0,0 +1,209 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import path from 'path'
+
+// api configuration
+import powerbi from 'powerbi-visuals-api'
+import ExtraWatchWebpackPlugin from 'extra-watch-webpack-plugin'
+import { BundleAnalyzerPlugin as Visualizer } from 'webpack-bundle-analyzer'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import { PowerBICustomVisualsWebpackPlugin } from 'powerbi-visuals-webpack-plugin'
+import webpack from 'webpack'
+import fs from 'fs'
+import { WebpackConfiguration } from 'webpack-cli'
+import { VueLoaderPlugin } from 'vue-loader'
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const powerbiApi: any = powerbi // Types for PowerBI seem to be off, so I'm instead forcing it to `any`
+
+// visual configuration json path
+const pbivizPath = './pbiviz.json'
+const pbivizFile = require(path.join(__dirname, pbivizPath))
+
+// the visual capabilities content
+const capabilitiesPath = './capabilities.json'
+const capabilitiesFile = require(path.join(__dirname, capabilitiesPath))
+
+const pluginLocation = './.tmp/precompile/visualPlugin.ts' // path to visual plugin file, the file generates by the plugin
+
+// string resources
+const resourcesFolder = path.join('.', 'stringResources')
+const localizationFolders = fs.existsSync(resourcesFolder) && fs.readdirSync(resourcesFolder)
+const statsLocation = '../../webpack.statistics.html'
+
+// babel options to support IE11
+const babelOptions = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          ie: '11'
+        },
+        useBuiltIns: 'entry',
+        corejs: 3,
+        modules: false
+      }
+    ]
+  ],
+  plugins: [],
+  sourceType: 'unambiguous', // tell to babel that the project can contain different module types, not only es2015 modules
+  cacheDirectory: path.join('.tmp', 'babelCache') // path for cache files
+}
+
+const config: WebpackConfiguration = {
+  entry: {
+    visual: pluginLocation
+  },
+  optimization: {
+    concatenateModules: false,
+    minimize: true // enable minimization for create *.pbiviz file less than 2 Mb, can be disabled for dev mode
+  },
+  devtool: 'source-map',
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: ['vue-loader']
+      },
+      {
+        parser: {
+          amd: false
+        }
+      },
+      {
+        test: /(\.ts)x|\.ts$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                // '@babel/react',
+                '@babel/env'
+              ]
+            }
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: false,
+              experimentalWatchApi: false,
+              appendTsSuffixTo: [/\.vue$/]
+            }
+          }
+        ],
+        exclude: [/node_modules/],
+        include: /.tmp|powerbi-visuals-|src|precompile\\visualPlugin.ts/
+      },
+      {
+        test: /(\.js)x|\.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions
+          }
+        ],
+        exclude: [/node_modules/]
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+        type: 'javascript/auto'
+      },
+      {
+        test: /\.(css|scss)?$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.(woff|ttf|ico|woff2|jpg|jpeg|png|webp|svg)$/i,
+        use: ['base64-inline-loader']
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '.css'],
+    alias: {
+      src: path.resolve(__dirname, 'src/'),
+      assets: path.resolve(__dirname, 'assets/')
+    },
+    plugins: [new TsconfigPathsPlugin()]
+  },
+  output: {
+    publicPath: '/assets',
+    path: path.join(__dirname, '/.tmp', 'drop'),
+    library: +powerbiApi.version.replace(/\./g, '') >= 320 ? pbivizFile.visual.guid : undefined,
+    libraryTarget: +powerbiApi.version.replace(/\./g, '') >= 320 ? 'var' : undefined
+  },
+  externals:
+    powerbiApi.version.replace(/\./g, '') >= 320
+      ? {
+          'powerbi-visuals-api': 'null',
+          fakeDefine: 'false'
+        }
+      : {
+          'powerbi-visuals-api': 'null',
+          fakeDefine: 'false',
+          corePowerbiObject: "Function('return this.powerbi')()",
+          realWindow: "Function('return this')()"
+        },
+  plugins: [
+    new webpack.DefinePlugin({
+      __VUE_OPTIONS_API__: JSON.stringify(true),
+      __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'visual.css',
+      chunkFilename: '[id].css'
+    }),
+    new Visualizer({
+      reportFilename: statsLocation,
+      openAnalyzer: false,
+      analyzerMode: `static`
+    }),
+    // visual plugin regenerates with the visual source, but it does not require relaunching dev server
+    new webpack.WatchIgnorePlugin({
+      paths: [path.join(__dirname, pluginLocation), './.tmp/**/*.*']
+    }),
+    // custom visuals plugin instance with options
+    new PowerBICustomVisualsWebpackPlugin({
+      ...pbivizFile,
+      compression: 9,
+      capabilities: capabilitiesFile,
+      stringResources:
+        localizationFolders &&
+        localizationFolders.map((localization) =>
+          path.join(resourcesFolder, localization, 'resources.resjson')
+        ),
+      apiVersion: powerbiApi.version,
+      capabilitiesSchema: powerbiApi.schemas.capabilities,
+      pbivizSchema: powerbiApi.schemas.pbiviz,
+      stringResourcesSchema: powerbiApi.schemas.stringResources,
+      dependenciesSchema: powerbiApi.schemas.dependencies,
+      devMode: false,
+      generatePbiviz: true,
+      generateResources: true,
+      minifyJS: true,
+      minify: true,
+      modules: true,
+      visualSourceLocation: '../../src/visual',
+      pluginLocation: pluginLocation,
+      packageOutPath: path.join(__dirname, 'dist')
+    }),
+    new ExtraWatchWebpackPlugin({
+      files: [pbivizPath, capabilitiesPath]
+    }),
+    powerbiApi.version.replace(/\./g, '') >= 320
+      ? new webpack.ProvidePlugin({
+          define: 'fakeDefine'
+        })
+      : new webpack.ProvidePlugin({
+          window: 'realWindow',
+          define: 'fakeDefine',
+          powerbi: 'corePowerbiObject'
+        })
+  ]
+}
+
+export default config
Author	SHA1	Message	Date
Iain Sproat	15d79e6606	feat(domains): add *.speckle.systems domains to capabilities (#57 )	2024-08-12 11:44:44 +02:00
Mucahit Bilal GOKER	bc5d16dfb8	Update README.md	2024-06-06 10:51:15 +03:00
Mucahit Bilal GOKER	e445d27b01	Merge pull request #56 from specklesystems/bimgeek/update-readme Update README.md	2024-06-04 17:01:23 +03:00
Mucahit Bilal GOKER	75c8a60cef	Update README.md	2024-06-03 22:10:52 +03:00
Alan Rynne	0f034c17d0	bump: 2.19	2024-05-27 15:10:40 +02:00
Alan Rynne	bded971ecf	chore: Bump viewer version to latest (#54 ) And bump visual version to `rc2`	2024-05-23 16:47:39 +02:00
Alan Rynne	77b13c2d89	bump: 2.19.0-rc	2024-05-14 18:37:20 +02:00
Alan Rynne	e3855a71c1	Merge pull request #53 from specklesystems/dev Update `main` with changes from `dev`	2024-05-14 17:21:50 +02:00
Alan Rynne	90c22211a9	bump to 2.19.0-wip (#52 )	2024-04-29 12:24:51 +02:00
Alan Rynne	b13eef0b18	bump: Viewer 2.18.15 + code changes (#51 )	2024-04-23 14:25:09 +02:00
Alan Rynne	31c75f5407	Merge branch 'main' into dev	2024-04-08 16:31:53 +02:00
Benjamin Ottensten	cd75dca5d7	Update web app link in README	2024-03-18 13:20:48 +01:00
Alan Rynne	72f1a836cb	bump: 2.18.0	2024-03-14 11:42:49 +01:00
Alan Rynne	0232c91d42	Merge pull request #50 from specklesystems/CNX-9113-Power-BI-Visual-Update-to-use-new-FE2-Terminology CNX-9113: FE2 -> fixed old naming in visual inputs and error message	2024-03-01 14:29:59 +01:00
Alan Rynne	38b2c55166	fixed old naming in visual inputs and error message	2024-03-01 13:36:36 +01:00
Alan Rynne	fac7d8e547	bump: 2.17.0	2023-11-27 11:05:50 +01:00
Alan Rynne	b19986ec35	Merge pull request #48 from specklesystems/dev Update main from dev	2023-11-27 11:00:34 +01:00
Alan Rynne	3430cba29a	Merge pull request #47 from specklesystems/alan/bump-2.16.0 Misc fixes and improvements for 2.17 release	2023-11-14 12:17:06 +01:00
Alan Rynne	6b57415d10	feat: Do not show Tooltip when no data is input	2023-11-12 23:26:56 +01:00
Alan Rynne	653dfb9910	fix: Selection when tooltip without color filter was active	2023-11-12 23:26:33 +01:00
Alan Rynne	30dbd19c52	feat: Adds watermark to loaded visual	2023-11-12 23:07:28 +01:00
Alan Rynne	cfc958f9fd	fix: do not upgrade ui dependencies yet	2023-11-10 10:49:10 +01:00
Alan Rynne	9cf6786e52	fix: Added images.d.ts	2023-10-31 12:43:59 +01:00
Alan Rynne	7ad8cd7e24	fix: Pack speckle logo with webpack correctly	2023-10-31 12:07:01 +01:00
Alan Rynne	71cbd55583	bump: Speckle dependencies to 2.16.0	2023-10-27 10:01:46 +02:00
Alan Rynne	c3ca9c80dd	Merge branch 'dev' into main	2023-07-07 14:41:25 +02:00
Alan Rynne	1966669a74	bump: Version 2.15.0-rc	2023-07-07 14:41:15 +02:00
Alan Rynne	12c7fbdf64	fix: Upgrade webpack plugin package and minor tweaks to webpack config (#40 ) Fixes issue where PowerBI desktop reported the visual as invalid	2023-06-20 14:44:50 +02:00
Alan Rynne	d7772ca558	Merge branch 'main' into dev	2023-06-19 17:03:15 +02:00
Alan Rynne	cc0113b8f9	fix: Miscellaneous fixes (#39 ) Fixes coloring issue when no tooltip data Adds ghosted/hidden context setting Minor tweaks on settings panel Added clear color palette button (temporary) Updates viewer to latest released version	2023-06-19 17:02:38 +02:00
garylzimmer	0e05ad8584	Update README.md (#38 ) added note about expected use case and link to relevant github for data connector	2023-06-12 17:33:55 +02:00
Alan Rynne	1b55d39787	feat: New setting spanel using `FormattingModel` (#37 ) * fix: Removed vue warning by setting env vars * fix: Tweaks in prod webpack config * chore: Removed unnecessary css classes * chore: Simplified vue loader * feat: Working formatting model * feat: Settings panel with lighting and camera options * feat: Working default color, gradient and rule based conditional formatting * feat: Improvements in settings panel and related areas	2023-06-06 11:31:17 +02:00
Alan Rynne	c7066c2242	feat: Webpack + Vue + Viewer toolbar (#36 ) * feat: Build with webpack * feat: Vue, tailwind + webpack working * feat(vue): Upgraded to vue3 Now using our ui-components, with section box and camera views support * chore: Minor cleanup of logs * fix: ColorBy must only be grouping in order to color always * fix: Bind to groupings to prevent conflicts with tooltipData inputs	2023-05-23 16:25:44 +02:00