Added grid color and size to controls

playcanvas · Oct 31, 2024 · fe77d48 · fe77d48
1 parent 3493c6a
commit fe77d48
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 5 deletions.
diff --git a/examples/src/examples/gizmos/transform-rotate.example.mjs b/examples/src/examples/gizmos/transform-rotate.example.mjs
@@ -86,7 +86,7 @@ data.set('camera', {
 
 // attach grid
 app.root.addComponent('script');
-const grid = app.root.script.create(Grid);
+const grid = /** @type {Grid} */ (app.root.script.create(Grid));
 grid.halfExtents = new pc.Vec2(2, 2);
 grid.attach(camera.camera);
 

diff --git a/examples/src/examples/gizmos/transform-scale.example.mjs b/examples/src/examples/gizmos/transform-scale.example.mjs
@@ -86,7 +86,7 @@ data.set('camera', {
 
 // attach grid
 app.root.addComponent('script');
-const grid = app.root.script.create(Grid);
+const grid = /** @type {Grid} */ (app.root.script.create(Grid));
 grid.halfExtents = new pc.Vec2(2, 2);
 grid.attach(camera.camera);
 

diff --git a/examples/src/examples/gizmos/transform-translate.example.mjs b/examples/src/examples/gizmos/transform-translate.example.mjs
@@ -86,7 +86,7 @@ data.set('camera', {
 
 // attach grid
 app.root.addComponent('script');
-const grid = app.root.script.create(Grid);
+const grid = /** @type {Grid} */ (app.root.script.create(Grid));
 grid.halfExtents = new pc.Vec2(2, 2);
 grid.attach(camera.camera);
 

diff --git a/examples/src/examples/misc/editor.controls.mjs b/examples/src/examples/misc/editor.controls.mjs
@@ -5,7 +5,7 @@ import * as pc from 'playcanvas';
  * @returns {JSX.Element} The returned JSX Element.
  */
 export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, ColorPicker } = ReactPCUI;
 
     const [type, setType] = React.useState('translate');
     const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
@@ -69,6 +69,37 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 })
             )
         ),
+        jsx(
+            Panel,
+            { headerText: 'Grid' },
+            jsx(
+                LabelGroup,
+                { text: 'Size' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.size' },
+                    min: 1,
+                    max: 10,
+                    precision: 0
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color X' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.colorX' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Z' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'grid.colorZ' }
+                })
+            )
+        ),
         jsx(
             Panel,
             { headerText: 'Camera' },

diff --git a/examples/src/examples/misc/editor.example.mjs b/examples/src/examples/misc/editor.example.mjs
@@ -130,9 +130,14 @@ orbitCamera.distance = 5 * camera.camera?.aspectRatio;
 
 // attach grid
 app.root.addComponent('script');
-const grid = app.root.script.create(Grid);
+const grid = /** @type {Grid} */ (app.root.script.create(Grid));
 grid.halfExtents = new pc.Vec2(4, 4);
 grid.attach(camera.camera);
+data.set('grid', {
+    size: 4,
+    colorX: Object.values(grid.colorX),
+    colorZ: Object.values(grid.colorZ)
+});
 
 // create light entity
 const light = new pc.Entity('light');
@@ -227,6 +232,8 @@ window.addEventListener('keyup', keyup);
 window.addEventListener('keypress', keypress);
 
 // gizmo and camera set handler
+const tmpVa = new pc.Vec2();
+const tmpC1 = new pc.Color();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
     const [category, key] = path.split('.');
     switch (category) {
@@ -253,6 +260,20 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
             gizmoHandler.gizmo[key] = value;
             break;
         }
+        case 'grid': {
+            switch (key) {
+                case 'size':
+                    grid.halfExtents = tmpVa.set(value, value);
+                    break;
+                case 'colorX':
+                    grid.colorX = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'colorZ':
+                    grid.colorZ = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+            }
+            break;
+        }
     }
 });