angular-three-tweakpane 4.0.0-next.119 → 4.0.0-next.121

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 (2) hide show
  1. package/README.md +70 -44
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -22,46 +22,88 @@ npm install angular-three-tweakpane tweakpane
22
22
 
23
23
  The recommended way to create controls:
24
24
 
25
+ 1. Add `tweakpaneAnchor` directive to your `ngt-canvas`
26
+ 2. Add `<tweakpane-pane>` somewhere in your scene
27
+ 3. Use `tweaks()` in any component within the canvas
28
+
25
29
  ```typescript
26
- import { Component, ChangeDetectionStrategy } from '@angular/core';
27
- import { tweaks, TweakpaneAnchor } from 'angular-three-tweakpane';
30
+ import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
31
+ import { tweaks, TweakpaneAnchor, TweakpanePane } from 'angular-three-tweakpane';
28
32
 
29
33
  @Component({
30
34
  template: `
31
- <tweakpane-anchor />
32
35
  <ngt-mesh [position]="[params.x(), params.y(), params.z()]">
33
36
  <ngt-box-geometry />
34
37
  <ngt-mesh-standard-material [color]="params.color()" />
35
38
  </ngt-mesh>
39
+
40
+ <tweakpane-pane title="Controls" />
36
41
  `,
37
- imports: [TweakpaneAnchor],
42
+ imports: [TweakpanePane],
43
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
38
44
  changeDetection: ChangeDetectionStrategy.OnPush,
39
45
  })
40
46
  export class SceneGraph {
41
- params = tweaks({
47
+ params = tweaks('Position', {
42
48
  x: { value: 0, min: -5, max: 5 },
43
49
  y: { value: 0, min: -5, max: 5 },
44
50
  z: { value: 0, min: -5, max: 5 },
45
51
  color: { value: '#ff0000', color: true },
46
52
  });
47
53
  }
54
+
55
+ @Component({
56
+ template: `
57
+ <ngt-canvas tweakpaneAnchor>
58
+ <app-scene-graph *canvasContent />
59
+ </ngt-canvas>
60
+ `,
61
+ imports: [NgtCanvas, TweakpaneAnchor, SceneGraph],
62
+ })
63
+ export class Experience {}
48
64
  ```
49
65
 
50
66
  ### Nested Folders
51
67
 
52
68
  ```typescript
53
- params = tweaks({
54
- position: tweaks.folder({
69
+ params = tweaks('Settings', {
70
+ basic: 42,
71
+ position: tweaks.folder('Position', {
55
72
  x: { value: 0, min: -5, max: 5 },
56
73
  y: { value: 0, min: -5, max: 5 },
57
74
  z: { value: 0, min: -5, max: 5 },
58
75
  }),
59
- material: tweaks.folder({
76
+ material: tweaks.folder('Material', {
60
77
  color: { value: '#ff0000', color: true },
61
78
  metalness: { value: 0.5, min: 0, max: 1 },
62
79
  roughness: { value: 0.5, min: 0, max: 1 },
63
80
  }),
64
81
  });
82
+
83
+ // Access nested values
84
+ this.params.position.x(); // Signal<number>
85
+ this.params.material.color(); // Signal<string>
86
+ ```
87
+
88
+ ### Two-Way Binding with Existing Signals
89
+
90
+ ```typescript
91
+ filteringEnabled = signal(true);
92
+ gravity = signal(9.8);
93
+
94
+ params = tweaks('Settings', {
95
+ filteringEnabled: this.filteringEnabled, // two-way binding
96
+ gravity: this.gravity,
97
+ });
98
+ ```
99
+
100
+ ### Buttons (Actions)
101
+
102
+ ```typescript
103
+ params = tweaks('Actions', {
104
+ reset: { action: () => this.reset(), label: 'Reset All' },
105
+ randomize: { action: () => this.randomize() },
106
+ });
65
107
  ```
66
108
 
67
109
  ### Component-Based API
@@ -80,13 +122,13 @@ import {
80
122
 
81
123
  @Component({
82
124
  template: `
83
- <tweakpane-pane [options]="{ title: 'Controls' }">
84
- <tweakpane-folder [options]="{ title: 'Position' }">
85
- <tweakpane-number [(value)]="x" [options]="{ label: 'X', min: -5, max: 5 }" />
125
+ <tweakpane-pane title="Controls">
126
+ <tweakpane-folder title="Position">
127
+ <tweakpane-number [(value)]="x" label="X" [params]="{ min: -5, max: 5 }" />
86
128
  </tweakpane-folder>
87
- <tweakpane-color [(value)]="color" [options]="{ label: 'Color' }" />
88
- <tweakpane-checkbox [(value)]="visible" [options]="{ label: 'Visible' }" />
89
- <tweakpane-button [options]="{ title: 'Reset' }" (click)="reset()" />
129
+ <tweakpane-color [(value)]="color" label="Color" />
130
+ <tweakpane-checkbox [(value)]="visible" label="Visible" />
131
+ <tweakpane-button title="Reset" (click)="reset()" />
90
132
  </tweakpane-pane>
91
133
  `,
92
134
  imports: [TweakpanePane, TweakpaneFolder, TweakpaneNumber, TweakpaneColor, TweakpaneCheckbox, TweakpaneButton],
@@ -106,39 +148,23 @@ export class Controls {
106
148
 
107
149
  ## Control Types
108
150
 
109
- | Component | Description | Config Type |
110
- | ------------------- | ---------------------------------- | ----------------------- |
111
- | `TweakpaneNumber` | Numeric input with optional slider | `{ min?, max?, step? }` |
112
- | `TweakpaneText` | Text input | `{ label? }` |
113
- | `TweakpaneCheckbox` | Boolean toggle | `{ label? }` |
114
- | `TweakpaneColor` | Color picker | `{ color: true }` |
115
- | `TweakpaneList` | Dropdown select | `{ options: [...] }` |
116
- | `TweakpanePoint` | 2D/3D/4D point input | `{ x?, y?, z?, w? }` |
117
- | `TweakpaneButton` | Clickable button | `{ title }` |
118
- | `TweakpaneFolder` | Collapsible group | `{ title, expanded? }` |
151
+ | Component | Description | Config Type |
152
+ | ------------------- | ---------------------------------- | -------------------------------- |
153
+ | `TweakpaneNumber` | Numeric input with optional slider | `{ value, min?, max?, step? }` |
154
+ | `TweakpaneText` | Text input | `{ value }` |
155
+ | `TweakpaneCheckbox` | Boolean toggle | `{ value }` |
156
+ | `TweakpaneColor` | Color picker | `{ value, color: true }` |
157
+ | `TweakpaneList` | Dropdown select | `{ value, options: [...] }` |
158
+ | `TweakpanePoint` | 2D/3D/4D point input | `{ value, x?, y?, z?, w? }` |
159
+ | `TweakpaneButton` | Clickable button | `{ action: () => void, label? }` |
160
+ | `TweakpaneFolder` | Collapsible group | `tweaks.folder(name, config)` |
119
161
 
120
162
  ## Pane Positioning
121
163
 
122
164
  ```typescript
123
- <tweakpane-pane [options]="{
124
- title: 'Debug',
125
- position: 'top-right' // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
126
- }">
165
+ <tweakpane-pane title="Debug" top="8px" right="8px">
166
+ <!-- controls -->
167
+ </tweakpane-pane>
127
168
  ```
128
169
 
129
- ## Binding to Objects
130
-
131
- Use `TweakpaneBinding` to bind directly to object properties:
132
-
133
- ```typescript
134
- @Component({
135
- template: `
136
- <tweakpane-pane>
137
- <tweakpane-binding [target]="mesh.position" property="x" [options]="{ min: -5, max: 5 }" />
138
- </tweakpane-pane>
139
- `,
140
- })
141
- export class Controls {
142
- mesh = viewChild.required<ElementRef<Mesh>>('mesh');
143
- }
144
- ```
170
+ Available position inputs: `top`, `right`, `bottom`, `left`, `width`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "angular-three-tweakpane",
3
- "version": "4.0.0-next.119",
3
+ "version": "4.0.0-next.121",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },