feat: Add PreviewBounds component, written with Vue

pan3d/dataset_viewer.py

@@ -23,6 +23,7 @@
 from pan3d import catalogs as pan3d_catalogs
 from pan3d.dataset_builder import DatasetBuilder
 from pan3d.ui import AxisDrawer, MainDrawer, Toolbar, RenderOptions, BoundsConfigure
+from pan3d.ui.vue import module
 from pan3d.utils import (
     initial_state,
     has_gpu_rendering,
@@ -56,6 +57,7 @@ def __init__(
             builder._viewer = self
         self.builder = builder
         self.server = get_server(server, client_type="vue3")
+        self.server.enable_module(module)
         self.current_event_loop = asyncio.get_event_loop()
         self.pool = concurrent.futures.ThreadPoolExecutor(max_workers=1)
         self._ui = None

pan3d/ui/bounds_configure.py

@@ -1,6 +1,8 @@
 from trame.widgets import html
 from trame.widgets import vuetify3 as vuetify
 
+from .preview_bounds import PreviewBounds
+
 
 class BoundsConfigure(vuetify.VMenu):
     def __init__(
@@ -54,6 +56,16 @@ def __init__(
                 vuetify.VCheckbox(
                     v_model=(cube_view_mode,), label="Cube View", hide_details=True
                 )
+                with html.Div(v_if=(cube_view_mode,)):
+                    PreviewBounds(
+                        preview=(cube_preview,),
+                        axes=(cube_preview_axes,),
+                        coordinates=(da_coordinates,),
+                        update_bounds=(
+                            coordinate_change_bounds_function,
+                            "[$event.name, $event.bounds]",
+                        ),
+                    )
                 with html.Div(
                     v_for=(f"coord in {da_coordinates}",),
                 ):

pan3d/ui/preview_bounds.py

@@ -0,0 +1,14 @@
+from trame_client.widgets.core import HtmlElement
+
+
+class PreviewBounds(HtmlElement):
+    def __init__(self, children=None, **kwargs):
+        super().__init__("preview-bounds", children, **kwargs)
+        self._attr_names += [
+            "preview",
+            "axes",
+            "coordinates",
+        ]
+        self._event_names += [
+            ("update_bounds", "update-bounds"),
+        ]

pan3d/ui/vue/.eslintrc.cjs

@@ -0,0 +1,12 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};

pan3d/ui/vue/.gitignore

@@ -0,0 +1,7 @@
+serve
+serve/*.map
+serve/*.html
+serve/*.common.*
+serve/*-light.*
+serve/*.umd.js
+package-lock.json

pan3d/ui/vue/module/__init__.py

@@ -0,0 +1,13 @@
+from pathlib import Path
+
+# Compute local path to serve
+serve_path = str(Path(__file__).parent.with_name("serve").resolve())
+
+# Serve directory for JS/CSS files
+serve = {"__pan3d_components": serve_path}
+
+# List of JS files to load (usually from the serve path above)
+scripts = ["__pan3d_components/pan3d-components.umd.js"]
+
+# List of Vue plugins to install/load
+vue_use = ["pan3d_components"]

pan3d/ui/vue/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "pan3d-components",
+  "version": "0.0.0",
+  "description": "Vue component for pan3d",
+  "main": "./dist/pan3d-components.umd.js",
+  "unpkg": "./dist/pan3d-components.umd.js",
+  "exports": {
+    ".": {
+      "require": "./dist/pan3d-components.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --emptyOutDir",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore --ignore-pattern public",
+    "semantic-release": "semantic-release"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "vue": "^2.7.0 || >=3.0.0"
+  },
+  "devDependencies": {
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "eslint": "^8.33.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "prettier": "^2.7.1",
+    "vite": "^4.1.0",
+    "vue": "^3.0.0"
+  },
+  "author": "Kitware Inc",
+  "license": "MIT",
+  "keywords": [
+    "Kitware",
+    "pan3d"
+  ],
+  "files": [
+    "dist/*",
+    "src/*",
+    "*.json",
+    "*.js"
+  ]
+}