fix: Expand the world info viewer so you can see content (#25)

Also update to latest x_ite.d.ts
  Resolves #22.

Reviewed-on: #25
Co-authored-by: Glen Whitney <glen@studioinfinity.org>
Co-committed-by: Glen Whitney <glen@studioinfinity.org>

etc/deps/x_ite/x_ite.d.ts

@@ -6,10 +6,10 @@ declare module 'https://create3000.github.io/code/x_ite/latest/x_ite.mjs' {
 export default X3D;
 export interface X3D {
    (callback?: () => void, fallback?: (error: Error) => void): Promise<void>;
-   createBrowser(): HTMLElement;
-   getBrowser(via?: string | HTMLElement): X3DBrowser;
+   createBrowser(): X3DCanvasElement;
+   getBrowser(via?: string | X3DCanvasElement): X3DBrowser;
    noConflict(): X3D;
-   X3DConstants: X3DConstant;
+   X3DConstants: X3DConstants;
    SFBool(arg: unknown): boolean;
    // NB. in all of the following `typeof Class` is an expression that
    // extracts the type of the constructor for Class.
@@ -65,6 +65,10 @@ export interface X3D {
    MFVec4f: typeof X3DArrayField<SFVec4>;
 }
 
+export interface X3DCanvasElement extends HTMLElement {
+   readonly browser: string;
+}
+
 type JSONValue =
    | string
    | number
@@ -156,6 +160,7 @@ export interface X3DBrowser {
       op: T, value: BrowserOption[T]): void;
    getRenderingProperty<T extends keyof RenderingProperty>(
       prop: T): RenderingProperty[T];
+   getContextMenu(): XiteContextMenu;
    addBrowserCallback(key: unknown, cb?: BrowserCallback): void;
    addBrowserCallback(
       key: unknown, event: number, // A Browser Event Constant
@@ -194,16 +199,74 @@ type MinimalArray<T> = {[index: number]: T, length: number}
 type ComponentInfoArray = MinimalArray<ComponentInfo>;
 interface ComponentInfo {
    readonly name: string;
-   readonly level?: number;
+   readonly level: number;
    readonly title: string;
    readonly providerURL: string;
 }
 
 type ProfileInfoArray = MinimalArray<ProfileInfo>;
-interface ProfileInfo extends ComponentInfo {
+interface ProfileInfo {
+   readonly name: string;
+   readonly title: string;
+   readonly providerURL: string;
    readonly components: ComponentInfoArray
 }
 
+type JQueryCtxMenuOpts = {
+   selector: string,
+   items: UserMenuItems,
+   appendTo?: string | HTMLElement,
+   triggers: string,
+   hideOnSecondTrigger?: boolean,
+   selectableSubMenu?: boolean,
+   reposition?: boolean,
+   delay?: number,
+   autoHide?: boolean,
+   zindex?: number | (($trigger: string, opt: JQueryCtxMenuOpts) => number)
+   className?: string,
+   classNames?: Record<string, string>,
+   animation?: {duration: number, show: string, hide: string},
+   events?: Record<string, (opt: JQueryCtxMenuOpts) => boolean>,
+   position?: (opt: unknown, x?: number|string, y?: number|string) => void,
+   determinePosition?: (menu: unknown) => void,
+   callback?: MenuCallback,
+   build?: ($triggerElement: unknown, e: Event) => JQueryCtxMenuOpts,
+   itemClickEvent?: string
+}
+
+type UserMenuCallback = () => UserMenuItems
+type UserMenuItems = Record<string, UserMenuItem>
+type MenuCallback = (
+   itemKey: string, opt: JQueryCtxMenuOpts, event: Event) => (boolean | void)
+type MenuIconCallback = (
+   opt: JQueryCtxMenuOpts, $itemElement: HTMLElement,
+   itemKey: string, item: unknown) => string
+type MenuBoolCallback = (itemKey: string, opt: JQueryCtxMenuOpts) => boolean
+type UserMenuItem = {
+   name: string,
+   isHtmlName?: boolean,
+   callback: MenuCallback,
+   className?: string,
+   icon?: string | MenuIconCallback,
+   disabled?: boolean | MenuBoolCallback,
+   visible?: boolean | MenuBoolCallback,
+   type?: string,
+   events?: Record<string, unknown>,
+   value?: string,
+   selected?: boolean | string,
+   radio?: string,
+   options?: Record<string|number, string>,
+   height?: number,
+   items?: UserMenuItems,
+   accesskey?: string,
+   dataAttr?: Record<string, string>
+}
+
+interface XiteContextMenu {
+   getUserMenu(): UserMenuCallback;
+   setUserMenu(cb: UserMenuCallback): void;
+}
+
 export interface X3DScene {
    readonly specificationVersion: string;
    readonly encoding: 'ASCII' | 'VRML' | 'XML' | 'BINARY'
@@ -274,7 +337,7 @@ export interface X3DExternProtoDeclaration {
    readonly fields: FieldDefinitionArray;
    readonly urls: X3DArrayField<string>;
    isExternProto: false;
-   readonly loadState: number; // A Load State Constant from X3DConstant
+   readonly loadState: number; // A Load State Constant from X3DConstants
    newInstance(): SFNode;
    loadNow(): Promise<void>;
    toVRMLString(options?: VRMLOptions): string;
@@ -297,7 +360,7 @@ type FieldCallback = (value: unknown) => void
    assign(other: X3DField): void;
    setValue(value: unknown): void;
    getValue(): unknown;
-   getType(): number; // one of the Field Type Constants from X3DConstant
+   getType(): number; // one of the Field Type Constants from X3DConstants
    getAccessType(): number; // one of the Access Type Constants
    isInitializable(): boolean;
    isInput(): boolean;
@@ -316,12 +379,12 @@ type FieldCallback = (value: unknown) => void
    addFieldCallback(key: unknown, callback: FieldCallback): void;
    removeFieldCallback(key: unknown): void;
    getFieldCallbacks(): Map<unknown, FieldCallback>;
-   addInputRoute(route: unknown): void; // what's the proper type for route?
-   removeInputRoute(route: unknown): void;
-   getInputRoutes(): Set<unknown>;
-   addOutputRoute(route: unknown): void; // ditto
-   removeOutputRoute(route: unknown): void;
-   getOutputRoutes(): Set<unknown>;
+   addInputRoute(route: X3DRoute): void;
+   removeInputRoute(route: X3DRoute): void;
+   getInputRoutes(): Set<X3DRoute>;
+   addOutputRoute(route: X3DRoute): void;
+   removeOutputRoute(route: X3DRoute): void;
+   getOutputRoutes(): Set<X3DRoute>;
    addRouteCallback(key: unknown, callback: FieldCallback): void;
    removeRouteCallback(key: unknown): void;
    getRouteCallbacks(): Map<unknown, FieldCallback>;
@@ -462,7 +525,7 @@ export interface SFNode extends X3DField {
    getField(name: string): X3DField;
    getNodeName(): string;
    getNodeDisplayName(): string;
-   getNodeType(): number[]; // Array of Node Type constants from X3DConstant
+   getNodeType(): number[]; // Array of Node Type constants from X3DConstants
    getNodeTypeName(): string;
    getNodeUserData(key: unknown): unknown;
    removeFieldCallback(key: unknown): void;
@@ -1765,7 +1828,7 @@ export class X3DArrayField<T> extends X3DField {
 }
 
 // would be better to make these enums...
-export interface X3DConstant {
+export interface X3DConstants {
    // Browser Event Constants
    CONNECTION_ERROR: 0;
    BROWSER_EVENT: 1;

src/giveAwrl.civet

@@ -6,7 +6,24 @@ certainlyHandled := '.x3d .gltf .glb .obj .stl .ply'.split ' '
 // The next line will need to change when we handle pages with more than
 // one link, since we will potentially need a canvas for each one.
 canvas := X3D.createBrowser()
-$(canvas).css width: '150px', height: '150px'
+
+// Fix up the css so the browser is a nice size and we can see the world info
+$(canvas).css width: '150px', height: '150px', overflow: 'visible'
+x_ite_shadow := canvas.shadowRoot
+if x_ite_shadow
+   x_ite_style := x_ite_shadow.querySelector('link')
+   if x_ite_style
+      $(x_ite_style).after '<style type="text/css">
+         .x_ite-private-world-info-overlay {
+            inset: unset;
+            width: 300px;
+            height: 300px;
+         }</style>'
+   x_ite_browser := x_ite_shadow.querySelector '.x_ite-private-browser'
+   if x_ite_browser
+      $(x_ite_browser).css overflow: 'visible'
+
+// Now get the browser and load the requested VRML, converting if need be
 browser := X3D.getBrowser canvas
 browser.setBrowserOption 'StraightenHorizon', false
 site := $('a[href^="http"]')