@playcanvas/web-components 0.11.1 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/app.d.cts +246 -0
- package/dist/app.d.ts +38 -13
- package/dist/asset.d.cts +218 -0
- package/dist/asset.d.ts +145 -6
- package/dist/async-element.d.cts +103 -0
- package/dist/async-element.d.ts +11 -8
- package/dist/colors.d.cts +1 -0
- package/dist/components/button-component.d.cts +186 -0
- package/dist/components/button-component.d.ts +1 -1
- package/dist/components/camera-component.d.cts +253 -0
- package/dist/components/camera-component.d.ts +1 -1
- package/dist/components/collision-component.d.cts +73 -0
- package/dist/components/collision-component.d.ts +17 -1
- package/dist/components/component.d.cts +82 -0
- package/dist/components/component.d.ts +20 -1
- package/dist/components/element-component.d.cts +316 -0
- package/dist/components/element-component.d.ts +1 -1
- package/dist/components/gsplat-component.d.cts +108 -0
- package/dist/components/gsplat-component.d.ts +1 -1
- package/dist/components/layoutchild-component.d.cts +110 -0
- package/dist/components/layoutchild-component.d.ts +1 -1
- package/dist/components/layoutgroup-component.d.cts +136 -0
- package/dist/components/layoutgroup-component.d.ts +1 -1
- package/dist/components/light-component.d.cts +264 -0
- package/dist/components/light-component.d.ts +1 -1
- package/dist/components/listener-component.d.cts +20 -0
- package/dist/components/listener-component.d.ts +1 -1
- package/dist/components/particlesystem-component.d.cts +52 -0
- package/dist/components/particlesystem-component.d.ts +1 -1
- package/dist/components/render-component.d.cts +76 -0
- package/dist/components/render-component.d.ts +1 -1
- package/dist/components/rigidbody-component.d.cts +88 -0
- package/dist/components/rigidbody-component.d.ts +1 -1
- package/dist/components/screen-component.d.cts +70 -0
- package/dist/components/screen-component.d.ts +1 -1
- package/dist/components/script-component.d.cts +163 -0
- package/dist/components/script-component.d.ts +1 -1
- package/dist/components/script.d.cts +94 -0
- package/dist/components/script.d.ts +1 -1
- package/dist/components/scrollbar-component.d.cts +69 -0
- package/dist/components/scrollbar-component.d.ts +1 -1
- package/dist/components/scrollview-component.d.cts +178 -0
- package/dist/components/scrollview-component.d.ts +1 -1
- package/dist/components/sound-component.d.cts +108 -0
- package/dist/components/sound-component.d.ts +1 -1
- package/dist/components/sound-slot.d.cts +134 -0
- package/dist/components/sound-slot.d.ts +2 -2
- package/dist/custom-elements.json +1127 -179
- package/dist/entity-base.d.cts +67 -0
- package/dist/entity-base.d.ts +67 -0
- package/dist/entity.d.cts +131 -0
- package/dist/entity.d.ts +3 -38
- package/dist/index.d.cts +79 -0
- package/dist/index.d.ts +35 -32
- package/dist/loading-bar.d.cts +35 -0
- package/dist/material.d.cts +1011 -0
- package/dist/material.d.ts +2 -1
- package/dist/model.d.cts +72 -0
- package/dist/model.d.ts +27 -5
- package/dist/module.d.cts +29 -0
- package/dist/module.d.ts +16 -10
- package/dist/node.d.cts +253 -0
- package/dist/node.d.ts +253 -0
- package/dist/parse.d.cts +147 -0
- package/dist/pwc.cjs +1496 -200
- package/dist/pwc.cjs.map +1 -1
- package/dist/pwc.js +1497 -201
- package/dist/pwc.js.map +1 -1
- package/dist/pwc.min.js +1 -1
- package/dist/pwc.min.js.map +1 -1
- package/dist/pwc.min.mjs +1 -1
- package/dist/pwc.min.mjs.map +1 -1
- package/dist/pwc.mjs +1496 -202
- package/dist/pwc.mjs.map +1 -1
- package/dist/scene.d.cts +117 -0
- package/dist/scene.d.ts +1 -1
- package/dist/sky.d.cts +121 -0
- package/dist/sky.d.ts +1 -1
- package/dist/vscode.html-custom-data.json +127 -5
- package/dist/web-types.json +399 -59
- package/package.json +16 -7
- package/src/app.ts +137 -45
- package/src/asset.ts +439 -9
- package/src/async-element.ts +11 -8
- package/src/components/collision-component.ts +35 -0
- package/src/components/component.ts +93 -3
- package/src/entity-base.ts +136 -0
- package/src/entity.ts +23 -117
- package/src/index.ts +5 -0
- package/src/loading-bar.ts +2 -2
- package/src/material.ts +2 -2
- package/src/model.ts +79 -11
- package/src/module.ts +39 -20
- package/src/node.ts +715 -0
- package/src/sky.ts +0 -1
package/README.md
CHANGED
|
@@ -30,7 +30,7 @@ PlayCanvas Web Components are a set of custom HTML elements for building 3D inte
|
|
|
30
30
|
|
|
31
31
|
## Examples
|
|
32
32
|
|
|
33
|
-
<img width="
|
|
33
|
+
<img width="5120" height="2160" alt="examples" src="https://github.com/user-attachments/assets/92cf1156-c93f-46b5-8d05-e576967ceaf3" />
|
|
34
34
|
|
|
35
35
|
See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples
|
|
36
36
|
|
package/dist/app.d.cts
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { Entity } from 'playcanvas';
|
|
2
|
+
import { AppBase } from 'playcanvas';
|
|
3
|
+
import { AsyncElement } from './async-element.cjs';
|
|
4
|
+
import type { EntityBaseElement } from './entity-base.cjs';
|
|
5
|
+
/**
|
|
6
|
+
* The AppElement interface provides properties and methods for manipulating
|
|
7
|
+
* {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
|
|
8
|
+
* The AppElement interface also inherits the properties and methods of the
|
|
9
|
+
* {@link HTMLElement} interface.
|
|
10
|
+
*
|
|
11
|
+
* The element is sized like a replaced element such as `<video>`: a block-level box that the
|
|
12
|
+
* page's CSS controls, 300x150 by default. The application's canvas always fills the element,
|
|
13
|
+
* and the drawing buffer resolution follows the element's size (capped by `max-pixel-ratio`),
|
|
14
|
+
* tracked live via a ResizeObserver — so the element can be embedded at any size, resized by
|
|
15
|
+
* its container, or made fullscreen with ordinary CSS such as `width: 100vw; height: 100dvh`.
|
|
16
|
+
*
|
|
17
|
+
* @fires {ProgressEvent} progress - Fired while the application preloads its assets. `loaded` and
|
|
18
|
+
* `total` are asset counts, not bytes, and an asset that fails to load still counts as loaded.
|
|
19
|
+
* Fired at least once per boot, and the final event always has `loaded` equal to `total`. Does
|
|
20
|
+
* not bubble.
|
|
21
|
+
*
|
|
22
|
+
* @fires {ErrorEvent} error - Fired when the application cannot boot because no graphics device
|
|
23
|
+
* could be created (for example, a browser with WebGL disabled). `message` names the requested
|
|
24
|
+
* backends and `error` holds the underlying failure. The element never becomes ready
|
|
25
|
+
* and `app` stays `null` — listen for this event to show a fallback UI. Removing the element and
|
|
26
|
+
* re-inserting it retries the boot with its current attributes. Does not bubble.
|
|
27
|
+
*/
|
|
28
|
+
declare class AppElement extends AsyncElement {
|
|
29
|
+
/**
|
|
30
|
+
* The canvas element.
|
|
31
|
+
*/
|
|
32
|
+
private _canvas;
|
|
33
|
+
private _alpha;
|
|
34
|
+
private _backend;
|
|
35
|
+
private _antialias;
|
|
36
|
+
private _depthBuffer;
|
|
37
|
+
private _stencilBuffer;
|
|
38
|
+
private _maxPixelRatio;
|
|
39
|
+
private _loadingBar;
|
|
40
|
+
/**
|
|
41
|
+
* Set once the graphics options above have been handed to `createGraphicsDevice`, after which
|
|
42
|
+
* writing any of them changes nothing. Guards the warning in {@link _warnIfBooted}, and is
|
|
43
|
+
* cleared on disconnect so a re-connected element boots from its current attributes.
|
|
44
|
+
*/
|
|
45
|
+
private _optionsLocked;
|
|
46
|
+
private _bar;
|
|
47
|
+
/**
|
|
48
|
+
* Incremented on every connect and disconnect. Boot captures the value on entry and abandons
|
|
49
|
+
* itself wherever it resumes from an await if the value has moved on — so a boot whose
|
|
50
|
+
* element was removed cannot complete against a torn-down element, and a boot whose element
|
|
51
|
+
* was removed and re-inserted (which starts a boot of its own) cannot race the newer one.
|
|
52
|
+
*/
|
|
53
|
+
private _bootGeneration;
|
|
54
|
+
/**
|
|
55
|
+
* The elements backing this application's entities, keyed by the entity itself. Registered
|
|
56
|
+
* by EntityElement at creation (and NodeElement at binding) and removed when an entity is
|
|
57
|
+
* destroyed or unbound, this joins engine scene nodes back to their owning elements by
|
|
58
|
+
* identity - never by name.
|
|
59
|
+
*/
|
|
60
|
+
private _entityElements;
|
|
61
|
+
private _picker;
|
|
62
|
+
private _hasPointerListeners;
|
|
63
|
+
private _hoveredEntity;
|
|
64
|
+
private _pickToken;
|
|
65
|
+
private _pointerHandlers;
|
|
66
|
+
private _app;
|
|
67
|
+
private _loadProgress;
|
|
68
|
+
/**
|
|
69
|
+
* Tracks the element's box so the drawing buffer and picker follow it. Created per boot once
|
|
70
|
+
* the application exists, and disconnected on teardown. `null` where ResizeObserver is
|
|
71
|
+
* unavailable (jsdom), where the boot-time resolution set is the only sizing that happens.
|
|
72
|
+
*/
|
|
73
|
+
private _resizeObserver;
|
|
74
|
+
/**
|
|
75
|
+
* The PlayCanvas application instance. `null` until the element is ready, and again once it
|
|
76
|
+
* has been removed from the document — await {@link whenReady} or the element's `ready()`
|
|
77
|
+
* promise before accessing it.
|
|
78
|
+
* @returns The application instance, or `null`.
|
|
79
|
+
*/
|
|
80
|
+
get app(): AppBase | null;
|
|
81
|
+
/**
|
|
82
|
+
* The asset preload progress of the application, as a fraction from 0 to 1. It is 0 until
|
|
83
|
+
* preloading begins (and again once the element has been removed from the document), and 1
|
|
84
|
+
* once preloading has finished — including when there was nothing to preload. Read this to
|
|
85
|
+
* initialize a loading UI; subsequent updates arrive via the `progress` event.
|
|
86
|
+
* @returns The preload progress.
|
|
87
|
+
*/
|
|
88
|
+
get loadProgress(): number;
|
|
89
|
+
/**
|
|
90
|
+
* Creates a new AppElement instance.
|
|
91
|
+
*
|
|
92
|
+
* @ignore
|
|
93
|
+
*/
|
|
94
|
+
constructor();
|
|
95
|
+
connectedCallback(): Promise<void>;
|
|
96
|
+
disconnectedCallback(): void;
|
|
97
|
+
/**
|
|
98
|
+
* Syncs the drawing buffer and the picker to the canvas's current CSS size. The picker must
|
|
99
|
+
* track the buffer, or picks would land at stale coordinates after a resize. Skipped while
|
|
100
|
+
* an XR session presents - the session owns the buffer size.
|
|
101
|
+
*/
|
|
102
|
+
private _syncCanvasSize;
|
|
103
|
+
private _pickerCreate;
|
|
104
|
+
private _pickerDestroy;
|
|
105
|
+
/**
|
|
106
|
+
* Returns the `<pc-entity>` or `<pc-node>` element whose backing entity is `entity`, or
|
|
107
|
+
* `null` if the entity is not fronted by an element of this application - for example, an
|
|
108
|
+
* unbound node inside a model's instantiated hierarchy, or an entity created through the
|
|
109
|
+
* engine API.
|
|
110
|
+
*
|
|
111
|
+
* @param entity - The entity to look up.
|
|
112
|
+
* @returns The element fronting the entity, or `null`.
|
|
113
|
+
*/
|
|
114
|
+
elementFromEntity(entity: Entity): EntityBaseElement | null;
|
|
115
|
+
/**
|
|
116
|
+
* Resolves the element that owns a picked node: the nearest node up the parent chain -
|
|
117
|
+
* starting with the node itself - that is fronted by a `<pc-entity>` or `<pc-node>` of this
|
|
118
|
+
* application. A hit inside a model's instantiated hierarchy therefore resolves to the
|
|
119
|
+
* nearest bound `<pc-node>`, or failing that the element hosting the model.
|
|
120
|
+
*
|
|
121
|
+
* @param node - The picked node, or `null`.
|
|
122
|
+
* @returns The owning element, or `null`.
|
|
123
|
+
*/
|
|
124
|
+
private _elementFromNode;
|
|
125
|
+
/**
|
|
126
|
+
* Like {@link _elementFromNode}, but skips elements without a listener for `type`, so a hit
|
|
127
|
+
* on an unlistened child still reaches a listening ancestor.
|
|
128
|
+
*
|
|
129
|
+
* @param node - The picked node, or `null`.
|
|
130
|
+
* @param type - The pointer event type a listener is required for.
|
|
131
|
+
* @returns The nearest listening element, or `null`.
|
|
132
|
+
*/
|
|
133
|
+
private _elementWithListener;
|
|
134
|
+
private _getPickerCoordinates;
|
|
135
|
+
/**
|
|
136
|
+
* Picks the scene under the pointer and returns the graph node that was hit, or `null`.
|
|
137
|
+
*
|
|
138
|
+
* The read back is asynchronous because the synchronous {@link Picker.getSelection} is not
|
|
139
|
+
* supported on WebGPU, where it returns an empty selection rather than failing - which
|
|
140
|
+
* silently disabled every `onpointer*` handler once WebGPU became the resolved backend. The
|
|
141
|
+
* async variant works on both backends and does not block the main thread on a GPU read.
|
|
142
|
+
*
|
|
143
|
+
* @param event - The pointer event to pick under.
|
|
144
|
+
* @returns The graph node under the pointer, or `null` if nothing was hit.
|
|
145
|
+
*/
|
|
146
|
+
private _pickNode;
|
|
147
|
+
private _onPointerMove;
|
|
148
|
+
private _onPointerDown;
|
|
149
|
+
private _onPointerUp;
|
|
150
|
+
private _onPointerListenerAdded;
|
|
151
|
+
private _onPointerListenerRemoved;
|
|
152
|
+
/**
|
|
153
|
+
* Warns that a graphics option was written too late to have any effect. These options are read
|
|
154
|
+
* once, when the element connects and creates its graphics device, so a later write updates
|
|
155
|
+
* only the element's own property - silently, without this.
|
|
156
|
+
*
|
|
157
|
+
* @param name - The name of the option, as its attribute.
|
|
158
|
+
*/
|
|
159
|
+
private _warnIfBooted;
|
|
160
|
+
/**
|
|
161
|
+
* Sets whether the frame buffer has an alpha channel, which is what lets the page show through
|
|
162
|
+
* wherever the scene has not drawn. Read only when the application boots.
|
|
163
|
+
* @param value - The alpha flag.
|
|
164
|
+
*/
|
|
165
|
+
set alpha(value: boolean);
|
|
166
|
+
/**
|
|
167
|
+
* Gets whether the frame buffer has an alpha channel.
|
|
168
|
+
* @returns The alpha flag.
|
|
169
|
+
*/
|
|
170
|
+
get alpha(): boolean;
|
|
171
|
+
/**
|
|
172
|
+
* Sets whether the frame buffer is anti-aliased. Read only when the application boots.
|
|
173
|
+
* @param value - The antialias flag.
|
|
174
|
+
*/
|
|
175
|
+
set antialias(value: boolean);
|
|
176
|
+
/**
|
|
177
|
+
* Gets whether the frame buffer is anti-aliased.
|
|
178
|
+
* @returns The antialias flag.
|
|
179
|
+
*/
|
|
180
|
+
get antialias(): boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Sets the graphics backend. Defaults to 'webgpu', which falls back to 'webgl2' if WebGPU
|
|
183
|
+
* is not supported by the browser. Read only when the application boots.
|
|
184
|
+
* @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
|
|
185
|
+
*/
|
|
186
|
+
set backend(value: 'webgpu' | 'webgl2' | 'null');
|
|
187
|
+
/**
|
|
188
|
+
* Gets the graphics backend.
|
|
189
|
+
* @returns The graphics backend.
|
|
190
|
+
*/
|
|
191
|
+
get backend(): "webgpu" | "webgl2" | "null";
|
|
192
|
+
/**
|
|
193
|
+
* Sets whether the frame buffer has a depth buffer, which the renderer needs to resolve which
|
|
194
|
+
* surface is nearest the camera. Read only when the application boots.
|
|
195
|
+
* @param value - The depth buffer flag.
|
|
196
|
+
*/
|
|
197
|
+
set depthBuffer(value: boolean);
|
|
198
|
+
/**
|
|
199
|
+
* Gets whether the frame buffer has a depth buffer.
|
|
200
|
+
* @returns The depth buffer flag.
|
|
201
|
+
*/
|
|
202
|
+
get depthBuffer(): boolean;
|
|
203
|
+
/**
|
|
204
|
+
* Sets whether the application shows its built-in loading bar while it boots and preloads its
|
|
205
|
+
* assets. Enabled by default; setting `false` removes the bar immediately, while setting
|
|
206
|
+
* `true` has no effect until the element is next connected. The bar can be themed with the
|
|
207
|
+
* CSS custom properties `--pc-loading-bar-color`, `--pc-loading-bar-background` and
|
|
208
|
+
* `--pc-loading-bar-height`.
|
|
209
|
+
* @param value - The loading bar flag.
|
|
210
|
+
*/
|
|
211
|
+
set loadingBar(value: boolean);
|
|
212
|
+
/**
|
|
213
|
+
* Gets whether the application shows its built-in loading bar while it boots and preloads
|
|
214
|
+
* its assets.
|
|
215
|
+
* @returns The loading bar flag.
|
|
216
|
+
*/
|
|
217
|
+
get loadingBar(): boolean;
|
|
218
|
+
/**
|
|
219
|
+
* Sets the cap on the pixel ratio the application renders at. The canvas is sized by the
|
|
220
|
+
* smaller of this value and the display's own device pixel ratio, so the default of `Infinity`
|
|
221
|
+
* renders at full physical resolution, `1` renders at CSS resolution, and an intermediate
|
|
222
|
+
* value such as `2` keeps a dense display sharp without paying for every one of its pixels.
|
|
223
|
+
* Must be greater than 0. Unlike the other graphics options, this applies immediately.
|
|
224
|
+
* @param value - The maximum pixel ratio.
|
|
225
|
+
*/
|
|
226
|
+
set maxPixelRatio(value: number);
|
|
227
|
+
/**
|
|
228
|
+
* Gets the cap on the pixel ratio the application renders at.
|
|
229
|
+
* @returns The maximum pixel ratio.
|
|
230
|
+
*/
|
|
231
|
+
get maxPixelRatio(): number;
|
|
232
|
+
/**
|
|
233
|
+
* Sets whether the frame buffer has a stencil buffer, which stencil-based effects and UI
|
|
234
|
+
* masking need. Read only when the application boots.
|
|
235
|
+
* @param value - The stencil buffer flag.
|
|
236
|
+
*/
|
|
237
|
+
set stencilBuffer(value: boolean);
|
|
238
|
+
/**
|
|
239
|
+
* Gets whether the frame buffer has a stencil buffer.
|
|
240
|
+
* @returns The stencil buffer flag.
|
|
241
|
+
*/
|
|
242
|
+
get stencilBuffer(): boolean;
|
|
243
|
+
static get observedAttributes(): string[];
|
|
244
|
+
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
245
|
+
}
|
|
246
|
+
export { AppElement };
|
package/dist/app.d.ts
CHANGED
|
@@ -1,17 +1,29 @@
|
|
|
1
1
|
import type { Entity } from 'playcanvas';
|
|
2
2
|
import { AppBase } from 'playcanvas';
|
|
3
|
-
import { AsyncElement } from './async-element';
|
|
4
|
-
import type {
|
|
3
|
+
import { AsyncElement } from './async-element.js';
|
|
4
|
+
import type { EntityBaseElement } from './entity-base.js';
|
|
5
5
|
/**
|
|
6
6
|
* The AppElement interface provides properties and methods for manipulating
|
|
7
7
|
* {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
|
|
8
8
|
* The AppElement interface also inherits the properties and methods of the
|
|
9
9
|
* {@link HTMLElement} interface.
|
|
10
10
|
*
|
|
11
|
+
* The element is sized like a replaced element such as `<video>`: a block-level box that the
|
|
12
|
+
* page's CSS controls, 300x150 by default. The application's canvas always fills the element,
|
|
13
|
+
* and the drawing buffer resolution follows the element's size (capped by `max-pixel-ratio`),
|
|
14
|
+
* tracked live via a ResizeObserver — so the element can be embedded at any size, resized by
|
|
15
|
+
* its container, or made fullscreen with ordinary CSS such as `width: 100vw; height: 100dvh`.
|
|
16
|
+
*
|
|
11
17
|
* @fires {ProgressEvent} progress - Fired while the application preloads its assets. `loaded` and
|
|
12
18
|
* `total` are asset counts, not bytes, and an asset that fails to load still counts as loaded.
|
|
13
19
|
* Fired at least once per boot, and the final event always has `loaded` equal to `total`. Does
|
|
14
20
|
* not bubble.
|
|
21
|
+
*
|
|
22
|
+
* @fires {ErrorEvent} error - Fired when the application cannot boot because no graphics device
|
|
23
|
+
* could be created (for example, a browser with WebGL disabled). `message` names the requested
|
|
24
|
+
* backends and `error` holds the underlying failure. The element never becomes ready
|
|
25
|
+
* and `app` stays `null` — listen for this event to show a fallback UI. Removing the element and
|
|
26
|
+
* re-inserting it retries the boot with its current attributes. Does not bubble.
|
|
15
27
|
*/
|
|
16
28
|
declare class AppElement extends AsyncElement {
|
|
17
29
|
/**
|
|
@@ -41,8 +53,9 @@ declare class AppElement extends AsyncElement {
|
|
|
41
53
|
private _bootGeneration;
|
|
42
54
|
/**
|
|
43
55
|
* The elements backing this application's entities, keyed by the entity itself. Registered
|
|
44
|
-
* by EntityElement at creation and removed when an entity is
|
|
45
|
-
* scene nodes back to their owning elements by
|
|
56
|
+
* by EntityElement at creation (and NodeElement at binding) and removed when an entity is
|
|
57
|
+
* destroyed or unbound, this joins engine scene nodes back to their owning elements by
|
|
58
|
+
* identity - never by name.
|
|
46
59
|
*/
|
|
47
60
|
private _entityElements;
|
|
48
61
|
private _picker;
|
|
@@ -52,6 +65,12 @@ declare class AppElement extends AsyncElement {
|
|
|
52
65
|
private _pointerHandlers;
|
|
53
66
|
private _app;
|
|
54
67
|
private _loadProgress;
|
|
68
|
+
/**
|
|
69
|
+
* Tracks the element's box so the drawing buffer and picker follow it. Created per boot once
|
|
70
|
+
* the application exists, and disconnected on teardown. `null` where ResizeObserver is
|
|
71
|
+
* unavailable (jsdom), where the boot-time resolution set is the only sizing that happens.
|
|
72
|
+
*/
|
|
73
|
+
private _resizeObserver;
|
|
55
74
|
/**
|
|
56
75
|
* The PlayCanvas application instance. `null` until the element is ready, and again once it
|
|
57
76
|
* has been removed from the document — await {@link whenReady} or the element's `ready()`
|
|
@@ -75,23 +94,29 @@ declare class AppElement extends AsyncElement {
|
|
|
75
94
|
constructor();
|
|
76
95
|
connectedCallback(): Promise<void>;
|
|
77
96
|
disconnectedCallback(): void;
|
|
78
|
-
|
|
97
|
+
/**
|
|
98
|
+
* Syncs the drawing buffer and the picker to the canvas's current CSS size. The picker must
|
|
99
|
+
* track the buffer, or picks would land at stale coordinates after a resize. Skipped while
|
|
100
|
+
* an XR session presents - the session owns the buffer size.
|
|
101
|
+
*/
|
|
102
|
+
private _syncCanvasSize;
|
|
79
103
|
private _pickerCreate;
|
|
80
104
|
private _pickerDestroy;
|
|
81
105
|
/**
|
|
82
|
-
* Returns the `<pc-entity>` element whose backing entity is `entity`, or
|
|
83
|
-
* entity
|
|
84
|
-
* model's instantiated hierarchy, or an entity created through the
|
|
106
|
+
* Returns the `<pc-entity>` or `<pc-node>` element whose backing entity is `entity`, or
|
|
107
|
+
* `null` if the entity is not fronted by an element of this application - for example, an
|
|
108
|
+
* unbound node inside a model's instantiated hierarchy, or an entity created through the
|
|
109
|
+
* engine API.
|
|
85
110
|
*
|
|
86
111
|
* @param entity - The entity to look up.
|
|
87
|
-
* @returns The element
|
|
112
|
+
* @returns The element fronting the entity, or `null`.
|
|
88
113
|
*/
|
|
89
|
-
elementFromEntity(entity: Entity):
|
|
114
|
+
elementFromEntity(entity: Entity): EntityBaseElement | null;
|
|
90
115
|
/**
|
|
91
116
|
* Resolves the element that owns a picked node: the nearest node up the parent chain -
|
|
92
|
-
* starting with the node itself - that
|
|
93
|
-
* A hit inside a model's instantiated hierarchy therefore resolves to the
|
|
94
|
-
* the model.
|
|
117
|
+
* starting with the node itself - that is fronted by a `<pc-entity>` or `<pc-node>` of this
|
|
118
|
+
* application. A hit inside a model's instantiated hierarchy therefore resolves to the
|
|
119
|
+
* nearest bound `<pc-node>`, or failing that the element hosting the model.
|
|
95
120
|
*
|
|
96
121
|
* @param node - The picked node, or `null`.
|
|
97
122
|
* @returns The owning element, or `null`.
|
package/dist/asset.d.cts
ADDED
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
import { Asset } from 'playcanvas';
|
|
2
|
+
import { AsyncElement } from './async-element.cjs';
|
|
3
|
+
type AddressMode = 'repeat' | 'clamp' | 'mirror';
|
|
4
|
+
type MinFilterMode = 'nearest' | 'linear' | 'nearest-mip-nearest' | 'linear-mip-nearest' | 'nearest-mip-linear' | 'linear-mip-linear';
|
|
5
|
+
type MagFilterMode = 'nearest' | 'linear';
|
|
6
|
+
/**
|
|
7
|
+
* The AssetElement interface provides properties and methods for manipulating
|
|
8
|
+
* {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
|
|
9
|
+
* The AssetElement interface also inherits the properties and methods of the
|
|
10
|
+
* {@link HTMLElement} interface.
|
|
11
|
+
*
|
|
12
|
+
* The element becomes ready once the containing application has started and the asset is in the
|
|
13
|
+
* state declared by the markup: loaded for preloaded assets (even if loading failed — check the
|
|
14
|
+
* asset's `resource`), or registered and awaiting a load for `lazy` assets. Elements inserted
|
|
15
|
+
* while the application is running are created and registered on insertion, and begin loading
|
|
16
|
+
* immediately unless `lazy`. A `pc-asset` must be a direct child of `pc-app` — elements placed
|
|
17
|
+
* elsewhere, or with an unsupported asset type, never become ready.
|
|
18
|
+
*
|
|
19
|
+
* For `texture` and `textureatlas` assets, the texture options (`address-u`, `address-v`,
|
|
20
|
+
* `min-filter`, `mag-filter`, `anisotropy`, `mipmaps`, `srgb`, `flip-y`) apply when the texture is
|
|
21
|
+
* created and — like `lazy` — are observed: changing one updates a texture that has already
|
|
22
|
+
* loaded, and removing one restores the engine default. Changing `srgb` or `mipmaps` on a loaded
|
|
23
|
+
* texture recreates the underlying GPU resource, so prefer declaring those up front. Each option
|
|
24
|
+
* overrides the matching key in the `data` JSON; options left unset write nothing, leaving the
|
|
25
|
+
* engine's per-format defaults in force.
|
|
26
|
+
*
|
|
27
|
+
* Apart from `lazy` and the texture options, these attributes are read once when the asset is
|
|
28
|
+
* created, so changing them later has no effect.
|
|
29
|
+
*
|
|
30
|
+
* @attribute {string} id - The identifier used to reference the asset from other elements.
|
|
31
|
+
* @attribute {string} src - The URL of the asset to load.
|
|
32
|
+
* @attribute {string} type - The asset type. Inferred from the `src` file extension when omitted.
|
|
33
|
+
* @attribute {string} data - Additional asset data, as a JSON object.
|
|
34
|
+
* @attribute {string} atlas - For a `sprite` asset, the `id` of the texture atlas asset it uses.
|
|
35
|
+
* The atlas must be declared before the sprite.
|
|
36
|
+
* @attribute {string} frame-keys - For a `sprite` asset, the atlas frame keys it uses, separated
|
|
37
|
+
* by spaces or commas.
|
|
38
|
+
* @attribute {number} pixels-per-unit - For a `sprite` asset, the number of pixels per world unit.
|
|
39
|
+
* @attribute {'simple' | 'sliced' | 'tiled'} render-mode - For a `sprite` asset, how the sprite is
|
|
40
|
+
* rendered when resized.
|
|
41
|
+
*
|
|
42
|
+
* @fires {Event} load - Fired each time the asset finishes loading, including a `lazy` asset
|
|
43
|
+
* loaded later and any subsequent reloads. Does not bubble — listen on this element, or use a
|
|
44
|
+
* capture-phase listener on an ancestor to observe every asset.
|
|
45
|
+
* @fires {ErrorEvent} error - Fired when the asset fails to load, with the engine's error in
|
|
46
|
+
* `message`. Does not bubble. The element still becomes ready — readiness means the load settled,
|
|
47
|
+
* not that it succeeded.
|
|
48
|
+
*/
|
|
49
|
+
declare class AssetElement extends AsyncElement {
|
|
50
|
+
private _addressU;
|
|
51
|
+
private _addressV;
|
|
52
|
+
private _anisotropy;
|
|
53
|
+
private _flipY;
|
|
54
|
+
private _lazy;
|
|
55
|
+
private _magFilter;
|
|
56
|
+
private _minFilter;
|
|
57
|
+
private _mipmaps;
|
|
58
|
+
private _srgb;
|
|
59
|
+
/**
|
|
60
|
+
* The asset that is loaded. Available once the element is ready — await
|
|
61
|
+
* {@link whenReady} or the element's `ready()` promise before accessing it.
|
|
62
|
+
*/
|
|
63
|
+
asset: Asset | null;
|
|
64
|
+
connectedCallback(): Promise<void>;
|
|
65
|
+
disconnectedCallback(): void;
|
|
66
|
+
private _onAssetLoad;
|
|
67
|
+
private _onAssetError;
|
|
68
|
+
/**
|
|
69
|
+
* Builds the `data` object for the asset from an optional inline `data` attribute (JSON), the
|
|
70
|
+
* texture option attributes (for `texture` and `textureatlas` assets), and the sprite
|
|
71
|
+
* convenience attributes (`atlas`, `frame-keys`, `pixels-per-unit`, `render-mode`). An
|
|
72
|
+
* attribute overrides the matching `data` JSON key. Returns `undefined` when there is no data
|
|
73
|
+
* to apply.
|
|
74
|
+
* @param type - The resolved asset type.
|
|
75
|
+
* @returns The asset data, or `undefined`.
|
|
76
|
+
*/
|
|
77
|
+
private _buildData;
|
|
78
|
+
/**
|
|
79
|
+
* Returns the engine texture behind this asset, when there is one: the resource itself for a
|
|
80
|
+
* `texture` asset, the atlas's texture for a `textureatlas` asset, `null` otherwise
|
|
81
|
+
* (including before the asset has loaded).
|
|
82
|
+
* @returns The texture, or `null`.
|
|
83
|
+
*/
|
|
84
|
+
private _texture;
|
|
85
|
+
/**
|
|
86
|
+
* Writes one texture option through to the created asset, if any. The engine-JSON key is
|
|
87
|
+
* written into `asset.data`, mutated in place - replacing the whole object would make the
|
|
88
|
+
* registry re-patch every key, and a re-patched `srgb` or `mipmaps` recreates the texture
|
|
89
|
+
* even when unchanged. The in-place key is what a not-yet-started load reads at texture
|
|
90
|
+
* construction, and what any later reload reads. When the texture already exists, the
|
|
91
|
+
* corresponding property is assigned directly; `null` (attribute removed) deletes the key
|
|
92
|
+
* and restores the engine default. Assets of any other type are left untouched.
|
|
93
|
+
*
|
|
94
|
+
* @param key - The engine texture JSON key in `asset.data`.
|
|
95
|
+
* @param property - The Texture property to assign.
|
|
96
|
+
* @param dataValue - The engine-JSON value for `asset.data`, or `null` to delete the key.
|
|
97
|
+
* @param textureValue - The value for the Texture property, or `null` for the engine default.
|
|
98
|
+
*/
|
|
99
|
+
private _applyTextureOption;
|
|
100
|
+
private _destroyAsset;
|
|
101
|
+
/**
|
|
102
|
+
* Sets the texture's horizontal (U) address mode: how texture coordinates outside the 0 to 1
|
|
103
|
+
* range sample the texture. Applies to `texture` and `textureatlas` assets, both when the
|
|
104
|
+
* texture is created and after it has loaded.
|
|
105
|
+
* @param value - The address mode, or `null` to use the engine default of 'repeat'.
|
|
106
|
+
*/
|
|
107
|
+
set addressU(value: AddressMode | null);
|
|
108
|
+
/**
|
|
109
|
+
* Gets the texture's horizontal (U) address mode.
|
|
110
|
+
* @returns The address mode, or `null` when unset.
|
|
111
|
+
*/
|
|
112
|
+
get addressU(): AddressMode | null;
|
|
113
|
+
/**
|
|
114
|
+
* Sets the texture's vertical (V) address mode: how texture coordinates outside the 0 to 1
|
|
115
|
+
* range sample the texture. Applies to `texture` and `textureatlas` assets, both when the
|
|
116
|
+
* texture is created and after it has loaded.
|
|
117
|
+
* @param value - The address mode, or `null` to use the engine default of 'repeat'.
|
|
118
|
+
*/
|
|
119
|
+
set addressV(value: AddressMode | null);
|
|
120
|
+
/**
|
|
121
|
+
* Gets the texture's vertical (V) address mode.
|
|
122
|
+
* @returns The address mode, or `null` when unset.
|
|
123
|
+
*/
|
|
124
|
+
get addressV(): AddressMode | null;
|
|
125
|
+
/**
|
|
126
|
+
* Sets the texture's maximum anisotropic filtering level, which improves quality at oblique
|
|
127
|
+
* viewing angles. Applies to `texture` and `textureatlas` assets, both when the texture is
|
|
128
|
+
* created and after it has loaded.
|
|
129
|
+
* @param value - The anisotropy level, or `null` to use the engine default of 1.
|
|
130
|
+
*/
|
|
131
|
+
set anisotropy(value: number | null);
|
|
132
|
+
/**
|
|
133
|
+
* Gets the texture's maximum anisotropic filtering level.
|
|
134
|
+
* @returns The anisotropy level, or `null` when unset.
|
|
135
|
+
*/
|
|
136
|
+
get anisotropy(): number | null;
|
|
137
|
+
/**
|
|
138
|
+
* Sets whether the texture's image data is flipped vertically at upload. Applies to `texture`
|
|
139
|
+
* and `textureatlas` assets, both when the texture is created and after it has loaded.
|
|
140
|
+
* @param value - The flip flag, or `null` to use the engine default of `false`.
|
|
141
|
+
*/
|
|
142
|
+
set flipY(value: boolean | null);
|
|
143
|
+
/**
|
|
144
|
+
* Gets whether the texture's image data is flipped vertically at upload.
|
|
145
|
+
* @returns The flip flag, or `null` when unset.
|
|
146
|
+
*/
|
|
147
|
+
get flipY(): boolean | null;
|
|
148
|
+
/**
|
|
149
|
+
* Sets whether the asset should be loaded lazily.
|
|
150
|
+
* @param value - The lazy loading flag.
|
|
151
|
+
*/
|
|
152
|
+
set lazy(value: boolean);
|
|
153
|
+
/**
|
|
154
|
+
* Gets whether the asset should be loaded lazily.
|
|
155
|
+
* @returns The lazy loading flag.
|
|
156
|
+
*/
|
|
157
|
+
get lazy(): boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Sets the texture's magnification filter, used when the texture is displayed larger than its
|
|
160
|
+
* source size. Applies to `texture` and `textureatlas` assets, both when the texture is
|
|
161
|
+
* created and after it has loaded.
|
|
162
|
+
* @param value - The filter, or `null` to use the engine default of 'linear'.
|
|
163
|
+
*/
|
|
164
|
+
set magFilter(value: MagFilterMode | null);
|
|
165
|
+
/**
|
|
166
|
+
* Gets the texture's magnification filter.
|
|
167
|
+
* @returns The filter, or `null` when unset.
|
|
168
|
+
*/
|
|
169
|
+
get magFilter(): MagFilterMode | null;
|
|
170
|
+
/**
|
|
171
|
+
* Sets the texture's minification filter, used when the texture is displayed smaller than its
|
|
172
|
+
* source size. The mip variants blend within (and, for the second `linear`, between) mipmap
|
|
173
|
+
* levels. Applies to `texture` and `textureatlas` assets, both when the texture is created
|
|
174
|
+
* and after it has loaded.
|
|
175
|
+
* @param value - The filter, or `null` to use the engine default of 'linear-mip-linear'.
|
|
176
|
+
*/
|
|
177
|
+
set minFilter(value: MinFilterMode | null);
|
|
178
|
+
/**
|
|
179
|
+
* Gets the texture's minification filter.
|
|
180
|
+
* @returns The filter, or `null` when unset.
|
|
181
|
+
*/
|
|
182
|
+
get minFilter(): MinFilterMode | null;
|
|
183
|
+
/**
|
|
184
|
+
* Sets whether the texture generates and uses mipmaps. Changing this on a loaded texture
|
|
185
|
+
* recreates the underlying GPU resource, so prefer declaring it up front. Applies to
|
|
186
|
+
* `texture` and `textureatlas` assets.
|
|
187
|
+
* @param value - The mipmaps flag, or `null` to use the engine default of `true`.
|
|
188
|
+
*/
|
|
189
|
+
set mipmaps(value: boolean | null);
|
|
190
|
+
/**
|
|
191
|
+
* Gets whether the texture generates and uses mipmaps.
|
|
192
|
+
* @returns The mipmaps flag, or `null` when unset.
|
|
193
|
+
*/
|
|
194
|
+
get mipmaps(): boolean | null;
|
|
195
|
+
/**
|
|
196
|
+
* Sets whether the texture holds sRGB (gamma-encoded) color data, enabling hardware gamma
|
|
197
|
+
* decode. Free when set before the texture loads; changing it on a loaded texture recreates
|
|
198
|
+
* the underlying GPU resource. Applies to `texture` and `textureatlas` assets.
|
|
199
|
+
* @param value - The sRGB flag, or `null` to use the engine default of `false`.
|
|
200
|
+
*/
|
|
201
|
+
set srgb(value: boolean | null);
|
|
202
|
+
/**
|
|
203
|
+
* Gets whether the texture holds sRGB (gamma-encoded) color data.
|
|
204
|
+
* @returns The sRGB flag, or `null` when unset.
|
|
205
|
+
*/
|
|
206
|
+
get srgb(): boolean | null;
|
|
207
|
+
/**
|
|
208
|
+
* Returns the {@link Asset} created by the `<pc-asset>` element with the given `id`, or
|
|
209
|
+
* `undefined` if there is no such element or its asset has not been created yet.
|
|
210
|
+
*
|
|
211
|
+
* @param id - The `id` of the `<pc-asset>` element.
|
|
212
|
+
* @returns The asset, or `undefined`.
|
|
213
|
+
*/
|
|
214
|
+
static get(id: string): Asset | null | undefined;
|
|
215
|
+
static get observedAttributes(): string[];
|
|
216
|
+
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
217
|
+
}
|
|
218
|
+
export { AssetElement };
|