diff --git a/examples/embedded_tab_title.html b/examples/embedded_tab_title.html
new file mode 100644
index 0000000..4d77a84
--- /dev/null
+++ b/examples/embedded_tab_title.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+ Configurable tab title
+
+
+
+
+
+
+
+
+
+
+
+
+ Sets both the browser tab title and the toolbar heading (normally
+ "COMPAS ThreeJs").
+
+
+
+
+
+
+
+
diff --git a/src/components/layout/Toolbar.vue b/src/components/layout/Toolbar.vue
index bfcc0e0..59ed388 100644
--- a/src/components/layout/Toolbar.vue
+++ b/src/components/layout/Toolbar.vue
@@ -6,7 +6,7 @@
id="toolbar"
>
- COMPAS ThreeJs
+ {{ toolbarTitle }}
@@ -29,6 +29,7 @@ import DisplayGroup from "@/components/tools/display/DisplayGroup.vue";
import {
isHorizontalPlacement,
useToolbarPlacement,
+ useToolbarTitle,
useViewerRuntime,
} from "@/viewer/viewer_context";
import { useHover } from "@/composables/useHover";
@@ -43,6 +44,7 @@ const { isHovered } = useHover(toolbarElement);
const { theme, blockPicker } = useViewerRuntime().store;
const placement = useToolbarPlacement();
const isHorizontal = isHorizontalPlacement(placement);
+const toolbarTitle = useToolbarTitle();
watchEffect(() => {
blockPicker.value = isHovered.value;
diff --git a/src/library/index.ts b/src/library/index.ts
index e59a794..f764548 100644
--- a/src/library/index.ts
+++ b/src/library/index.ts
@@ -7,6 +7,7 @@ import {
objectActionsPlacementKey,
openbarPlacementKey,
toolbarPlacementKey,
+ toolbarTitleKey,
useViewerRuntime,
viewerRuntimeKey,
} from "../viewer/viewer_context";
@@ -48,6 +49,10 @@ export function createViewer(
);
}
+ if (options.title) {
+ document.title = options.title;
+ }
+
const runtime = markRaw(new ViewerRuntime(container, options));
const app = createApp(App, {
runtime,
@@ -58,6 +63,9 @@ export function createViewer(
app.provide(toolbarPlacementKey, options.toolbarPlacement ?? "left");
app.provide(openbarPlacementKey, options.openbarPlacement ?? "left");
app.provide(metadataPlacementKey, options.metadataPlacement ?? "right");
+ if (options.title) {
+ app.provide(toolbarTitleKey, options.title);
+ }
app.provide(
objectActionsPlacementKey,
options.objectActionsPlacement ?? "right",
diff --git a/src/library/public.d.ts b/src/library/public.d.ts
index 30b8939..d6ff600 100644
--- a/src/library/public.d.ts
+++ b/src/library/public.d.ts
@@ -43,6 +43,8 @@ export interface CompasViewerOptions {
websocket?: ViewerWebSocketOptions;
defaultLighting?: boolean;
showToolbar?: boolean;
+ /** Browser tab title to apply for this viewer instance. Leaves `document.title` untouched if omitted. */
+ title?: string;
/**
* Extra toolbar modules mounted after the built-in groups - e.g. a component
* installed from an npm package. Each module owns its own icons/behavior/ids the
diff --git a/src/library/types.ts b/src/library/types.ts
index 1c5da84..70045c7 100644
--- a/src/library/types.ts
+++ b/src/library/types.ts
@@ -18,6 +18,8 @@ export interface CompasViewerOptions {
websocket?: ViewerWebSocketOptions;
defaultLighting?: boolean;
showToolbar?: boolean;
+ /** Browser tab title to apply for this viewer instance. Leaves `document.title` untouched if omitted. */
+ title?: string;
/**
* Extra toolbar modules to mount after the built-in groups - e.g. a `.vue` group
* installed from an npm package. Each module owns its own icons/behavior/ids the
diff --git a/src/main.ts b/src/main.ts
index 2c05801..6573345 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,11 @@ import { createViewer } from "./library";
const container = document.querySelector("#app");
if (!container) throw new Error("Standalone viewer requires an #app container");
+const title =
+ new URLSearchParams(window.location.search).get("title") ?? undefined;
+
createViewer(container, {
mode: "websocket",
showToolbar: true,
+ title,
});
diff --git a/src/viewer/viewer_context.ts b/src/viewer/viewer_context.ts
index 0928c4e..4b9fadf 100644
--- a/src/viewer/viewer_context.ts
+++ b/src/viewer/viewer_context.ts
@@ -7,6 +7,10 @@ export const viewerRuntimeKey: InjectionKey = Symbol(
"compas-viewer-runtime",
);
+export const toolbarTitleKey: InjectionKey = Symbol(
+ "compas-viewer-toolbar-title",
+);
+
export function useViewerRuntime(): ViewerRuntime {
const runtime = inject(viewerRuntimeKey);
if (!runtime) {
@@ -15,6 +19,10 @@ export function useViewerRuntime(): ViewerRuntime {
return runtime;
}
+export function useToolbarTitle(): string {
+ return inject(toolbarTitleKey, "COMPAS ThreeJs");
+}
+
/**
* Which edge of the viewer a panel docks to. Panels sharing an edge stack along it, in
* a fixed priority order (toolbar, openbar, metadata, objectActions) - see App.vue.