fix: Expand the world info viewer so you can see content

Also update to latest x_ite.d.ts
  Resolves #22.
This commit is contained in:
Glen Whitney 2023-09-17 19:02:31 -07:00
parent af472d7bfe
commit 5c13278a4b
2 changed files with 96 additions and 16 deletions

View File

@ -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;

View File

@ -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"]')