feat: Adds copy view URL button to bypass browser URL truncation

src/ui/url_hash_binding.ts

@@ -41,6 +41,13 @@ function encodeFragment(fragment: string) {
   );
 }
 
+/**
+ * Encodes a state object as a URL fragment string.
+ */
+export function encodeStateAsFragment(state: any): string {
+  return encodeFragment(JSON.stringify(state, bigintToStringJsonReplacer));
+}
+
 export interface UrlHashBindingOptions {
   defaultFragment?: string;
   updateDelayMilliseconds?: number;
@@ -96,9 +103,7 @@ export class UrlHashBinding extends RefCounted {
     const { generation } = cacheState;
     if (generation !== this.prevStateGeneration) {
       this.prevStateGeneration = cacheState.generation;
-      const stateString = encodeFragment(
-        JSON.stringify(cacheState.value, bigintToStringJsonReplacer),
-      );
+      const stateString = encodeStateAsFragment(cacheState.value);
       if (stateString !== this.prevStateString) {
         this.prevStateString = stateString;
         if (decodeURIComponent(stateString) === "{}") {

src/viewer.ts

@@ -27,6 +27,7 @@ import {
   makeCoordinateSpace,
   TrackableCoordinateSpace,
 } from "#src/coordinate_transform.js";
+
 import { getDefaultCredentialsManager } from "#src/credentials_provider/default_manager.js";
 import type { CredentialsManager } from "#src/credentials_provider/index.js";
 import { SharedCredentialsManager } from "#src/credentials_provider/shared.js";
@@ -100,11 +101,13 @@ import {
   MultiToolPaletteManager,
   MultiToolPaletteState,
 } from "#src/ui/tool_palette.js";
+import { encodeStateAsFragment } from "#src/ui/url_hash_binding.js";
 import {
   ViewerSettingsPanel,
   ViewerSettingsPanelState,
 } from "#src/ui/viewer_settings.js";
 import { AutomaticallyFocusedElement } from "#src/util/automatic_focus.js";
+import { setClipboard } from "#src/util/clipboard.js";
 import { TrackableRGB } from "#src/util/color.js";
 import type { Borrowed, Owned } from "#src/util/disposable.js";
 import { RefCounted } from "#src/util/disposable.js";
@@ -136,6 +139,7 @@ import type {
 import { WatchableVisibilityPriority } from "#src/visibility_priority/frontend.js";
 import { AnnotationToolStatusWidget } from "#src/widget/annotation_tool_status.js";
 import { CheckboxIcon } from "#src/widget/checkbox_icon.js";
+import { makeCopyUrlButton } from "#src/widget/copy_button.js";
 import { makeIcon } from "#src/widget/icon.js";
 import {
   MousePositionWidget,
@@ -879,7 +883,18 @@ export class Viewer extends RefCounted implements ViewerState {
       );
       topRow.appendChild(button);
     }
-
+    {
+      const button = makeCopyUrlButton({
+        title: "Copy view URL to clipboard",
+        onClick: () => {
+          const stateString = encodeStateAsFragment(this.state.toJSON());
+          const url = new URL(window.location.href);
+          url.hash = "#!" + stateString;
+          setClipboard(url.href);
+        },
+      });
+      topRow.appendChild(button);
+    }
     {
       const { helpPanelState } = this;
       const button = this.registerDisposer(

src/widget/copy_button.ts

@@ -14,10 +14,15 @@
  * limitations under the License.
  */
 
+import svg_clipboard from "ikonate/icons/clipboard.svg?raw";
 import svg_copy from "ikonate/icons/copy.svg?raw";
 import type { MakeIconOptions } from "#src/widget/icon.js";
 import { makeIcon } from "#src/widget/icon.js";
 
 export function makeCopyButton(options: MakeIconOptions = {}) {
   return makeIcon({ svg: svg_copy, ...options });
 }
+
+export function makeCopyUrlButton(options: MakeIconOptions = {}) {
+  return makeIcon({ svg: svg_clipboard, ...options });
+}