angular-three 2.0.0-beta.5 → 2.0.0-beta.6

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.
Files changed (40) hide show
  1. package/esm2022/index.mjs +1 -2
  2. package/esm2022/lib/canvas.mjs +3 -3
  3. package/esm2022/lib/di/ref.mjs +15 -10
  4. package/esm2022/lib/directives/args.mjs +3 -3
  5. package/esm2022/lib/directives/common.mjs +3 -3
  6. package/esm2022/lib/directives/parent.mjs +3 -3
  7. package/esm2022/lib/directives/repeat.mjs +3 -3
  8. package/esm2022/lib/loader.mjs +3 -3
  9. package/esm2022/lib/portal.mjs +12 -12
  10. package/esm2022/lib/renderer/renderer.mjs +6 -7
  11. package/esm2022/lib/renderer/store.mjs +11 -1
  12. package/esm2022/lib/renderer/utils.mjs +10 -4
  13. package/esm2022/lib/routed-scene.mjs +3 -3
  14. package/esm2022/lib/stores/signal.store.mjs +6 -7
  15. package/esm2022/lib/stores/store.mjs +3 -3
  16. package/esm2022/lib/utils/apply-props.mjs +1 -3
  17. package/esm2022/lib/utils/instance.mjs +22 -19
  18. package/esm2022/lib/utils/timing.mjs +3 -15
  19. package/fesm2022/angular-three.mjs +96 -107
  20. package/fesm2022/angular-three.mjs.map +1 -1
  21. package/index.d.ts +0 -1
  22. package/lib/utils/timing.d.ts +1 -3
  23. package/package.json +49 -49
  24. package/esm2022/lib/utils/signal.mjs +0 -24
  25. package/lib/utils/signal.d.ts +0 -2
  26. package/metadata.json +0 -1
  27. package/plugin/README.md +0 -11
  28. package/plugin/generators.json +0 -19
  29. package/plugin/package.json +0 -8
  30. package/plugin/src/generators/init/compat.d.ts +0 -2
  31. package/plugin/src/generators/init/compat.js +0 -6
  32. package/plugin/src/generators/init/compat.js.map +0 -1
  33. package/plugin/src/generators/init/init.d.ts +0 -5
  34. package/plugin/src/generators/init/init.js +0 -56
  35. package/plugin/src/generators/init/init.js.map +0 -1
  36. package/plugin/src/generators/init/schema.json +0 -6
  37. package/plugin/src/index.d.ts +0 -1
  38. package/plugin/src/index.js +0 -6
  39. package/plugin/src/index.js.map +0 -1
  40. package/web-types.json +0 -1
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { signal, computed, untracked, Injectable, Optional, Inject, ElementRef, inject, Injector, assertInInjectionContext, runInInjectionContext, ChangeDetectorRef, effect, InjectionToken, EventEmitter, ViewContainerRef, NgZone, TemplateRef, Directive, Input, getDebugNode, RendererFactory2, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, DestroyRef, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, ApplicationRef, SkipSelf, ContentChild } from '@angular/core';
2
+ import { signal, computed, untracked, Injectable, Optional, Inject, ElementRef, inject, Injector, assertInInjectionContext, runInInjectionContext, ChangeDetectorRef, effect, InjectionToken, EventEmitter, ViewContainerRef, NgZone, TemplateRef, Directive, Input, getDebugNode, RendererFactory2, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, DestroyRef, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, SkipSelf, ContentChild } from '@angular/core';
3
3
  import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
4
4
  import * as THREE from 'three';
5
5
  import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
@@ -8,36 +8,13 @@ import * as i1 from '@angular/router';
8
8
  import { ActivationEnd, RouterOutlet } from '@angular/router';
9
9
  import { filter } from 'rxjs';
10
10
 
11
- function createSignal(initialValue, options = {}) {
12
- const original = signal(initialValue, options);
13
- const originalSet = original.set.bind(original);
14
- const originalUpdate = original.update.bind(original);
15
- original.set = (...args) => {
16
- try {
17
- originalSet(...args);
18
- }
19
- catch {
20
- requestAnimationFrame(() => originalSet(...args));
21
- }
22
- };
23
- original.update = (...args) => {
24
- try {
25
- originalUpdate(...args);
26
- }
27
- catch {
28
- requestAnimationFrame(() => originalUpdate(...args));
29
- }
30
- };
31
- return original;
32
- }
33
-
34
11
  const STORE_COMPUTED_KEY = '__ngt_store_computed__';
35
12
  class NgtSignalStore {
36
13
  #state;
37
14
  #computedCache = new Map();
38
15
  constructor(initialState = {}) {
39
16
  initialState ??= {};
40
- this.#state = createSignal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }));
17
+ this.#state = signal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }));
41
18
  this.state = this.#state.asReadonly();
42
19
  }
43
20
  select(...keysAndOptions) {
@@ -88,10 +65,10 @@ class NgtSignalStore {
88
65
  };
89
66
  this.#state.update((previous) => ({ ...updater(previous), ...previous }));
90
67
  }
91
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore, deps: [{ token: 'INITIAL_STATE', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
92
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore }); }
68
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtSignalStore, deps: [{ token: 'INITIAL_STATE', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
69
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtSignalStore }); }
93
70
  }
94
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtSignalStore, decorators: [{
71
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtSignalStore, decorators: [{
95
72
  type: Injectable
96
73
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
97
74
  type: Optional
@@ -201,11 +178,11 @@ function invalidateInstance(instance) {
201
178
  function prepare(object, localState) {
202
179
  const instance = object;
203
180
  if (localState?.primitive || !instance.__ngt__) {
204
- const { objects = createSignal([]), nonObjects = createSignal([]), ...rest } = localState || {};
181
+ const { objects = signal([]), nonObjects = signal([]), ...rest } = localState || {};
205
182
  instance.__ngt__ = {
206
183
  previousAttach: null,
207
184
  store: null,
208
- parent: createSignal(null),
185
+ parent: signal(null),
209
186
  memoized: {},
210
187
  eventCount: 0,
211
188
  handlers: {},
@@ -213,22 +190,26 @@ function prepare(object, localState) {
213
190
  nonObjects,
214
191
  nativeProps: new NgtSignalStore({}),
215
192
  add: (object, type) => {
216
- const current = untracked(instance.__ngt__[type]);
217
- const foundIndex = current.indexOf((obj) => obj === object);
218
- if (foundIndex > -1) {
219
- // if we add an object with the same reference, then we switch it out
220
- // and update the BehaviorSubject
221
- current.splice(foundIndex, 1, object);
222
- instance.__ngt__[type].set(current);
223
- }
224
- else {
225
- instance.__ngt__[type].update((prev) => [...prev, object]);
226
- }
227
- notifyAncestors(untracked(instance.__ngt__.parent));
193
+ queueMicrotask(() => {
194
+ const current = untracked(instance.__ngt__[type]);
195
+ const foundIndex = current.indexOf((obj) => obj === object);
196
+ if (foundIndex > -1) {
197
+ // if we add an object with the same reference, then we switch it out
198
+ // and update the BehaviorSubject
199
+ current.splice(foundIndex, 1, object);
200
+ instance.__ngt__[type].set(current);
201
+ }
202
+ else {
203
+ instance.__ngt__[type].update((prev) => [...prev, object]);
204
+ }
205
+ notifyAncestors(untracked(instance.__ngt__.parent));
206
+ });
228
207
  },
229
208
  remove: (object, type) => {
230
- instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
231
- notifyAncestors(untracked(instance.__ngt__.parent));
209
+ queueMicrotask(() => {
210
+ instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
211
+ notifyAncestors(untracked(instance.__ngt__.parent));
212
+ });
232
213
  },
233
214
  ...rest,
234
215
  };
@@ -729,24 +710,12 @@ function safeDetectChanges(cdr) {
729
710
  }
730
711
  }
731
712
 
732
- function requestAnimationInInjectionContext(cb, injector) {
733
- injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
713
+ function requestAnimationFrameInInjectionContext(cb, injector) {
714
+ injector = assertInjectionContext(requestAnimationFrameInInjectionContext, injector);
734
715
  return requestAnimationFrame(() => {
735
716
  return runInInjectionContext(injector, cb);
736
717
  });
737
718
  }
738
- function queueMicrotaskInInjectionContext(cb, injector) {
739
- injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
740
- return queueMicrotask(() => {
741
- return runInInjectionContext(injector, cb);
742
- });
743
- }
744
- function queueMacrotaskInInjectionContext(cb, injector) {
745
- injector = assertInjectionContext(requestAnimationInInjectionContext, injector);
746
- return setTimeout(() => {
747
- return runInInjectionContext(injector, cb);
748
- });
749
- }
750
719
 
751
720
  const cached = new Map();
752
721
  function normalizeInputs(input) {
@@ -783,7 +752,7 @@ function injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgr
783
752
  return runInInjectionContext(injector, () => {
784
753
  const cdr = inject(ChangeDetectorRef);
785
754
  const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
786
- requestAnimationInInjectionContext(() => {
755
+ requestAnimationFrameInInjectionContext(() => {
787
756
  effect(() => {
788
757
  const originalUrls = inputs();
789
758
  Promise.all(effector()).then((results) => {
@@ -1027,7 +996,6 @@ function applyProps(instance, props) {
1027
996
  if (!THREE.ColorManagement && !rootState?.linear && isColor)
1028
997
  targetProp.convertSRGBToLinear();
1029
998
  }
1030
- localState?.nativeProps?.set({ [key]: targetProp });
1031
999
  }
1032
1000
  // else just overwrite the value
1033
1001
  else {
@@ -1044,7 +1012,6 @@ function applyProps(instance, props) {
1044
1012
  texture.encoding = rootState.gl.outputEncoding;
1045
1013
  }
1046
1014
  }
1047
- localState?.nativeProps?.set({ [key]: value });
1048
1015
  }
1049
1016
  checkUpdate(targetProp);
1050
1017
  invalidateInstance(instance);
@@ -1450,10 +1417,10 @@ class NgtStore extends NgtSignalStore {
1450
1417
  #invalidate() {
1451
1418
  effect(() => void this.state().invalidate(), { injector: this.#injector });
1452
1419
  }
1453
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
1454
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore }); }
1420
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
1421
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore }); }
1455
1422
  }
1456
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtStore, decorators: [{
1423
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore, decorators: [{
1457
1424
  type: Injectable
1458
1425
  }] });
1459
1426
  function computeInitialSize(canvas, defaultSize) {
@@ -1568,7 +1535,9 @@ function attachThreeChild(parent, child) {
1568
1535
  // attach
1569
1536
  if (cLS.isRaw) {
1570
1537
  if (cLS.parent) {
1571
- cLS.parent.set(parent);
1538
+ queueMicrotask(() => {
1539
+ cLS.parent.set(parent);
1540
+ });
1572
1541
  }
1573
1542
  // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
1574
1543
  if (child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */] === undefined)
@@ -1588,7 +1557,9 @@ function attachThreeChild(parent, child) {
1588
1557
  }
1589
1558
  pLS.add(child, added ? 'objects' : 'nonObjects');
1590
1559
  if (cLS.parent) {
1591
- cLS.parent.set(parent);
1560
+ queueMicrotask(() => {
1561
+ cLS.parent.set(parent);
1562
+ });
1592
1563
  }
1593
1564
  if (cLS.afterAttach)
1594
1565
  cLS.afterAttach.emit({ parent, node: child });
@@ -1599,7 +1570,9 @@ function removeThreeChild(parent, child, dispose) {
1599
1570
  const pLS = getLocalState(parent);
1600
1571
  const cLS = getLocalState(child);
1601
1572
  // clear parent ref
1602
- cLS.parent?.set(null);
1573
+ queueMicrotask(() => {
1574
+ cLS.parent?.set(null);
1575
+ });
1603
1576
  // remove child from parent
1604
1577
  if (untracked(pLS.objects))
1605
1578
  pLS.remove(child, 'objects');
@@ -1716,10 +1689,10 @@ class NgtCommonDirective {
1716
1689
  });
1717
1690
  }
1718
1691
  }
1719
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1720
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtCommonDirective, ngImport: i0 }); }
1692
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1693
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtCommonDirective, ngImport: i0 }); }
1721
1694
  }
1722
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCommonDirective, decorators: [{
1695
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCommonDirective, decorators: [{
1723
1696
  type: Directive
1724
1697
  }], ctorParameters: function () { return []; } });
1725
1698
 
@@ -1742,10 +1715,10 @@ class NgtArgs extends NgtCommonDirective {
1742
1715
  validate() {
1743
1716
  return !this.injected && !!this.#injectedArgs.length;
1744
1717
  }
1745
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
1746
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
1718
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
1719
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
1747
1720
  }
1748
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtArgs, decorators: [{
1721
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtArgs, decorators: [{
1749
1722
  type: Directive,
1750
1723
  args: [{ selector: '[args]', standalone: true }]
1751
1724
  }], propDecorators: { args: [{
@@ -1771,10 +1744,10 @@ class NgtParent extends NgtCommonDirective {
1771
1744
  validate() {
1772
1745
  return !this.injected && !!this.#injectedParent;
1773
1746
  }
1774
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
1775
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
1747
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
1748
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
1776
1749
  }
1777
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtParent, decorators: [{
1750
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtParent, decorators: [{
1778
1751
  type: Directive,
1779
1752
  args: [{ selector: '[parent]', standalone: true }]
1780
1753
  }], propDecorators: { parent: [{
@@ -1930,6 +1903,7 @@ class NgtRendererStore {
1930
1903
  return;
1931
1904
  }
1932
1905
  applyProps(node, { [name]: value });
1906
+ this.#updateNativeProps(node, name, value);
1933
1907
  }
1934
1908
  applyProperty(node, name, value) {
1935
1909
  const rS = node.__ngt_renderer__;
@@ -1963,6 +1937,7 @@ class NgtRendererStore {
1963
1937
  value = compound[1 /* NgtCompoundClassId.props */][name];
1964
1938
  }
1965
1939
  applyProps(node, { [name]: value });
1940
+ this.#updateNativeProps(node, name, value);
1966
1941
  }
1967
1942
  isCompound(name) {
1968
1943
  return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
@@ -2094,6 +2069,14 @@ class NgtRendererStore {
2094
2069
  this.removeChild(parent, node);
2095
2070
  }
2096
2071
  }
2072
+ #updateNativeProps(node, name, value) {
2073
+ const localState = getLocalState(node);
2074
+ if (!localState || !localState.nativeProps)
2075
+ return;
2076
+ queueMicrotask(() => {
2077
+ localState.nativeProps.set({ [name]: value });
2078
+ });
2079
+ }
2097
2080
  #firstNonInjectedDirective(dir) {
2098
2081
  let directive;
2099
2082
  let i = this.#comments.length - 1;
@@ -2178,10 +2161,10 @@ class NgtRendererFactory {
2178
2161
  }
2179
2162
  return renderer;
2180
2163
  }
2181
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2182
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory }); }
2164
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2165
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory }); }
2183
2166
  }
2184
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRendererFactory, decorators: [{
2167
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory, decorators: [{
2185
2168
  type: Injectable
2186
2169
  }] });
2187
2170
  /**
@@ -2229,7 +2212,7 @@ class NgtRenderer {
2229
2212
  return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } },
2230
2213
  // NOTE: we assign this manually to a raw value node
2231
2214
  // because we say it is a 'three' node but we're not using prepare()
2232
- { __ngt__: { isRaw: true, parent: createSignal(null) } }));
2215
+ { __ngt__: { isRaw: true, parent: signal(null) } }));
2233
2216
  }
2234
2217
  const { injectedArgs, injectedParent, store } = this.store.getCreationState();
2235
2218
  let parent = injectedParent;
@@ -2715,14 +2698,14 @@ class NgtCanvas extends NgtSignalStore {
2715
2698
  }
2716
2699
  });
2717
2700
  }
2718
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2719
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", scene: "scene", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
2701
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2702
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", scene: "scene", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
2720
2703
  <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
2721
2704
  <canvas #glCanvas style="display: block;"> </canvas>
2722
2705
  </div>
2723
2706
  `, isInline: true, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2724
2707
  }
2725
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtCanvas, decorators: [{
2708
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCanvas, decorators: [{
2726
2709
  type: Component,
2727
2710
  args: [{
2728
2711
  selector: 'ngt-canvas',
@@ -2798,13 +2781,12 @@ function injectBeforeRender(cb, { priority = 0, injector } = {}) {
2798
2781
 
2799
2782
  function injectNgtRef(initial = null, injector) {
2800
2783
  injector = assertInjectionContext(injectNgtRef, injector);
2784
+ const ref = is.ref(initial) ? initial : new ElementRef(initial);
2785
+ const signalRef = signal(ref.nativeElement);
2786
+ const readonlySignal = signalRef.asReadonly();
2787
+ const cached = new Map();
2801
2788
  return runInInjectionContext(injector, () => {
2802
2789
  const cdr = inject(ChangeDetectorRef);
2803
- const appRef = inject(ApplicationRef);
2804
- const ref = is.ref(initial) ? initial : new ElementRef(initial);
2805
- const signalRef = createSignal(ref.nativeElement);
2806
- const readonlySignal = signalRef.asReadonly();
2807
- const cached = new Map();
2808
2790
  inject(DestroyRef).onDestroy(() => void cached.clear());
2809
2791
  const children = (type = 'objects') => {
2810
2792
  if (!cached.has(type)) {
@@ -2827,9 +2809,16 @@ function injectNgtRef(initial = null, injector) {
2827
2809
  Object.defineProperty(ref, 'nativeElement', {
2828
2810
  set: (newElement) => {
2829
2811
  if (newElement !== untracked(signalRef)) {
2830
- signalRef.set(newElement);
2831
- // trigger CDR
2812
+ try {
2813
+ signalRef.set(newElement);
2814
+ }
2815
+ catch {
2816
+ requestAnimationFrame(() => {
2817
+ signalRef.set(newElement);
2818
+ });
2819
+ }
2832
2820
  requestAnimationFrame(() => void safeDetectChanges(cdr));
2821
+ // trigger CDR
2833
2822
  }
2834
2823
  },
2835
2824
  get: () => readonlySignal(),
@@ -2843,10 +2832,10 @@ class NgtRepeat extends NgForOf {
2843
2832
  set ngForRepeat(count) {
2844
2833
  this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
2845
2834
  }
2846
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
2847
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
2835
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
2836
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
2848
2837
  }
2849
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRepeat, decorators: [{
2838
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRepeat, decorators: [{
2850
2839
  type: Directive,
2851
2840
  args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
2852
2841
  }], propDecorators: { ngForRepeat: [{
@@ -2873,7 +2862,7 @@ class NgtPortalBeforeRender {
2873
2862
  this.renderPriority = 1;
2874
2863
  this.beforeRender = new EventEmitter();
2875
2864
  let oldClear;
2876
- queueMicrotaskInInjectionContext(() => {
2865
+ requestAnimationFrameInInjectionContext(() => {
2877
2866
  injectBeforeRender(({ delta, frame }) => {
2878
2867
  this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
2879
2868
  const { gl, scene, camera } = this.#portalStore.get();
@@ -2892,10 +2881,10 @@ class NgtPortalBeforeRender {
2892
2881
  }, { priority: this.renderPriority });
2893
2882
  });
2894
2883
  }
2895
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
2896
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
2884
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
2885
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
2897
2886
  }
2898
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
2887
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
2899
2888
  type: Directive,
2900
2889
  args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
2901
2890
  }], ctorParameters: function () { return []; }, propDecorators: { renderPriority: [{
@@ -2917,10 +2906,10 @@ class NgtPortalContent {
2917
2906
  delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
2918
2907
  }
2919
2908
  }
2920
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
2921
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
2909
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
2910
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
2922
2911
  }
2923
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortalContent, decorators: [{
2912
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalContent, decorators: [{
2924
2913
  type: Directive,
2925
2914
  args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
2926
2915
  }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
@@ -3035,8 +3024,8 @@ class NgtPortal extends NgtSignalStore {
3035
3024
  ...restInputsState,
3036
3025
  };
3037
3026
  }
3038
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3039
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: "portalState", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
3027
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3028
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: "portalState", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
3040
3029
  <ng-container #portalContentAnchor>
3041
3030
  <ng-container
3042
3031
  *ngIf="autoRender && portalContentRendered"
@@ -3049,7 +3038,7 @@ class NgtPortal extends NgtSignalStore {
3049
3038
  </ng-container>
3050
3039
  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "[ngtPortalBeforeRender]", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] }); }
3051
3040
  }
3052
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtPortal, decorators: [{
3041
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortal, decorators: [{
3053
3042
  type: Component,
3054
3043
  args: [{
3055
3044
  selector: 'ngt-portal',
@@ -3096,10 +3085,10 @@ class NgtRoutedScene {
3096
3085
  .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
3097
3086
  .subscribe(() => safeDetectChanges(cdr));
3098
3087
  }
3099
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
3100
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
3088
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
3089
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
3101
3090
  }
3102
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: NgtRoutedScene, decorators: [{
3091
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRoutedScene, decorators: [{
3103
3092
  type: Component,
3104
3093
  args: [{
3105
3094
  standalone: true,
@@ -3113,5 +3102,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
3113
3102
  * Generated bundle index. Do not edit.
3114
3103
  */
3115
3104
 
3116
- export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, NgtSignalStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, assertInjectionContext, checkNeedsUpdate, checkUpdate, createAttachFunction, createSignal, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, queueMacrotaskInInjectionContext, queueMicrotaskInInjectionContext, requestAnimationInInjectionContext, rootStateMap, safeDetectChanges, updateCamera };
3105
+ export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, NgtSignalStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, assertInjectionContext, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, requestAnimationFrameInInjectionContext, rootStateMap, safeDetectChanges, updateCamera };
3117
3106
  //# sourceMappingURL=angular-three.mjs.map