Gizmo updates (#6992)

* refactored functions into arrow-funcs axis-shape * Moved each shape to separate file * cleaned up applying shadow to shapes * Applied eslint fixes * Removed extra app parameter from gizmo * removed ts imports * cleaned up shape creation * added shadows option to render * moved shadows to shape setting * added shadow toggling * Fixed updating shadows option on gizmos * default create gizmo layer * layer is checked to exist already before creating new layer * removed layer creation from editor example * renamed shadows to shading * renamed shadows to shading option * added option for single node in gizmo attach * set shading to be off by default * put update position and rotation inside update for two way binding * reverted local position and rotation * Added gizmo layer referencing for removal * only fire events on change * removed flip axis and fixed types * minor fixes * refactored shape shading * minor fixes * fixed tridata types issue * Fixed destroy issue * created separate layer per app * Update src/extras/gizmo/tri-data.js Co-authored-by: Will Eastcott <[email protected]> * fixed layer cleanup * Added description of the layer parameter to the gizmo * Use deviceCache instead of map for gizmo layer management * removed extra space * Modified layer to be supplied with static helper function * adjusted default params * updated default to be undefined for layerIndex --------- Co-authored-by: Will Eastcott <[email protected]>
playcanvas · Sep 27, 2024 · f052a53 · f052a53
1 parent e5bf252
commit f052a53
Show file tree

Hide file tree

Showing 22 changed files with 1,134 additions and 889 deletions.
diff --git a/examples/src/examples/gizmos/transform-rotate.controls.mjs b/examples/src/examples/gizmos/transform-rotate.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, ColorPicker, SliderInput, SelectInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
 
     const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
 
@@ -84,6 +84,15 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     max: 1,
                     precision: 2
                 })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Shading' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.shading' }
+                })
             )
         ),
         jsx(

diff --git a/examples/src/examples/gizmos/transform-rotate.example.mjs b/examples/src/examples/gizmos/transform-rotate.example.mjs
@@ -88,27 +88,18 @@ light.addComponent('light');
 app.root.addChild(light);
 light.setEulerAngles(0, 0, -60);
 
-// create layers
-const gizmoLayer = new pc.Layer({
-    name: 'Gizmo',
-    clearDepthBuffer: true,
-    opaqueSortMode: pc.SORTMODE_NONE,
-    transparentSortMode: pc.SORTMODE_NONE
-});
-const layers = app.scene.layers;
-layers.push(gizmoLayer);
-camera.camera.layers = camera.camera.layers.concat(gizmoLayer.id);
-
 // create gizmo
-const gizmo = new pc.RotateGizmo(app, camera.camera, gizmoLayer);
-gizmo.attach([box]);
+const layer = pc.Gizmo.createLayer(app);
+const gizmo = new pc.RotateGizmo(camera.camera, layer);
+gizmo.attach(box);
 data.set('gizmo', {
     size: gizmo.size,
     snapIncrement: gizmo.snapIncrement,
     xAxisColor: Object.values(gizmo.xAxisColor),
     yAxisColor: Object.values(gizmo.yAxisColor),
     zAxisColor: Object.values(gizmo.zAxisColor),
     colorAlpha: gizmo.colorAlpha,
+    shading: gizmo.shading,
     coordSpace: gizmo.coordSpace,
     ringTolerance: gizmo.ringTolerance,
     xyzTubeRadius: gizmo.xyzTubeRadius,

diff --git a/examples/src/examples/gizmos/transform-scale.controls.mjs b/examples/src/examples/gizmos/transform-scale.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, ColorPicker, SliderInput, SelectInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
 
     const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
 
@@ -72,6 +72,15 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     max: 1,
                     precision: 2
                 })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Shading' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.shading' }
+                })
             )
         ),
         jsx(

diff --git a/examples/src/examples/gizmos/transform-scale.example.mjs b/examples/src/examples/gizmos/transform-scale.example.mjs
@@ -88,27 +88,18 @@ light.addComponent('light');
 app.root.addChild(light);
 light.setEulerAngles(0, 0, -60);
 
-// create layers
-const gizmoLayer = new pc.Layer({
-    name: 'Gizmo',
-    clearDepthBuffer: true,
-    opaqueSortMode: pc.SORTMODE_NONE,
-    transparentSortMode: pc.SORTMODE_NONE
-});
-const layers = app.scene.layers;
-layers.push(gizmoLayer);
-camera.camera.layers = camera.camera.layers.concat(gizmoLayer.id);
-
 // create gizmo
-const gizmo = new pc.ScaleGizmo(app, camera.camera, gizmoLayer);
-gizmo.attach([box]);
+const layer = pc.Gizmo.createLayer(app);
+const gizmo = new pc.ScaleGizmo(camera.camera, layer);
+gizmo.attach(box);
 data.set('gizmo', {
     size: gizmo.size,
     snapIncrement: gizmo.snapIncrement,
     xAxisColor: Object.values(gizmo.xAxisColor),
     yAxisColor: Object.values(gizmo.yAxisColor),
     zAxisColor: Object.values(gizmo.zAxisColor),
     colorAlpha: gizmo.colorAlpha,
+    shading: gizmo.shading,
     coordSpace: gizmo.coordSpace,
     axisLineTolerance: gizmo.axisLineTolerance,
     axisCenterTolerance: gizmo.axisCenterTolerance,

diff --git a/examples/src/examples/gizmos/transform-translate.controls.mjs b/examples/src/examples/gizmos/transform-translate.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, ColorPicker, SliderInput, SelectInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
 
     const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
 
@@ -84,6 +84,15 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     max: 1,
                     precision: 2
                 })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Shading' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.shading' }
+                })
             )
         ),
         jsx(

diff --git a/examples/src/examples/gizmos/transform-translate.example.mjs b/examples/src/examples/gizmos/transform-translate.example.mjs
@@ -88,27 +88,18 @@ light.addComponent('light');
 app.root.addChild(light);
 light.setEulerAngles(0, 0, -60);
 
-// create layers
-const gizmoLayer = new pc.Layer({
-    name: 'Gizmo',
-    clearDepthBuffer: true,
-    opaqueSortMode: pc.SORTMODE_NONE,
-    transparentSortMode: pc.SORTMODE_NONE
-});
-const layers = app.scene.layers;
-layers.push(gizmoLayer);
-camera.camera.layers = camera.camera.layers.concat(gizmoLayer.id);
-
 // create gizmo
-const gizmo = new pc.TranslateGizmo(app, camera.camera, gizmoLayer);
-gizmo.attach([box]);
+const layer = pc.Gizmo.createLayer(app);
+const gizmo = new pc.TranslateGizmo(camera.camera, layer);
+gizmo.attach(box);
 data.set('gizmo', {
     size: gizmo.size,
     snapIncrement: gizmo.snapIncrement,
     xAxisColor: Object.values(gizmo.xAxisColor),
     yAxisColor: Object.values(gizmo.yAxisColor),
     zAxisColor: Object.values(gizmo.zAxisColor),
     colorAlpha: gizmo.colorAlpha,
+    shading: gizmo.shading,
     coordSpace: gizmo.coordSpace,
     axisLineTolerance: gizmo.axisLineTolerance,
     axisCenterTolerance: gizmo.axisCenterTolerance,

diff --git a/examples/src/examples/misc/editor.example.mjs b/examples/src/examples/misc/editor.example.mjs
@@ -135,20 +135,9 @@ light.addComponent('light', {
 app.root.addChild(light);
 light.setEulerAngles(0, 0, -60);
 
-// create layers
-const gizmoLayer = new pc.Layer({
-    name: 'Gizmo',
-    clearDepthBuffer: true,
-    opaqueSortMode: pc.SORTMODE_NONE,
-    transparentSortMode: pc.SORTMODE_NONE
-});
-const layers = app.scene.layers;
-layers.push(gizmoLayer);
-camera.camera.layers = camera.camera.layers.concat(gizmoLayer.id);
-
 // create gizmo
 let skipObserverFire = false;
-const gizmoHandler = new GizmoHandler(app, camera.camera, gizmoLayer);
+const gizmoHandler = new GizmoHandler(camera.camera);
 const setGizmoControls = () => {
     skipObserverFire = true;
     data.set('gizmo', {
@@ -261,6 +250,7 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
 });
 
 // selector
+const layers = app.scene.layers;
 const selector = new Selector(app, camera.camera, [layers.getLayerByName('World')]);
 selector.on('select', (/** @type {pc.GraphNode} */ node, /** @type {boolean} */ clear) => {
     if (gizmoHandler.hasPointer) {

diff --git a/examples/src/examples/misc/editor.gizmo-handler.mjs b/examples/src/examples/misc/editor.gizmo-handler.mjs
@@ -34,15 +34,14 @@ class GizmoHandler {
     _hasPointer = false;
 
     /**
-     * @param {pc.AppBase} app - The application.
      * @param {pc.CameraComponent} camera - The camera component.
-     * @param {pc.Layer} layer - The gizmo layer
      */
-    constructor(app, camera, layer) {
+    constructor(camera) {
+        const layer = pc.Gizmo.createLayer(camera.system.app);
         this._gizmos = {
-            translate: new pc.TranslateGizmo(app, camera, layer),
-            rotate: new pc.RotateGizmo(app, camera, layer),
-            scale: new pc.ScaleGizmo(app, camera, layer)
+            translate: new pc.TranslateGizmo(camera, layer),
+            rotate: new pc.RotateGizmo(camera, layer),
+            scale: new pc.ScaleGizmo(camera, layer)
         };
 
         for (const type in this._gizmos) {