From 802a5859fbfa21eba4bc72d123299652a34619e5 Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 11:54:08 +0000 Subject: [PATCH 01/10] gizmo-disable-axes --- extras/gizmo/transform-gizmo.js | 40 ++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js index 1933b8ab968..9afc748906b 100644 --- a/extras/gizmo/transform-gizmo.js +++ b/extras/gizmo/transform-gizmo.js @@ -267,32 +267,40 @@ class TransformGizmo extends Gizmo { return; } - if (meshInstance) { - this._selectedAxis = this._getAxis(meshInstance); - this._selectedIsPlane = this._getIsPlane(meshInstance); - this._gizmoRotationStart.copy(this.root.getRotation()); - const pointInfo = this._calcPoint(x, y); - this._selectionStartPoint.copy(pointInfo.point); - this._selectionStartAngle = pointInfo.angle; - this._dragging = true; - this.fire(TransformGizmo.EVENT_TRANSFORMSTART); + if (!meshInstance) { + return; } + + this._selectedAxis = this._getAxis(meshInstance); + this._selectedIsPlane = this._getIsPlane(meshInstance); + this._gizmoRotationStart.copy(this.root.getRotation()); + const pointInfo = this._calcPoint(x, y); + this._selectionStartPoint.copy(pointInfo.point); + this._selectionStartAngle = pointInfo.angle; + this._dragging = true; + this.fire(TransformGizmo.EVENT_TRANSFORMSTART); }); this.on('pointer:move', (x, y, meshInstance) => { this._hover(meshInstance); - if (this._dragging) { - const pointInfo = this._calcPoint(x, y); - pointDelta.copy(pointInfo.point).sub(this._selectionStartPoint); - const angleDelta = pointInfo.angle - this._selectionStartAngle; - this.fire(TransformGizmo.EVENT_TRANSFORMMOVE, pointDelta, angleDelta); - this._hoverAxis = ''; - this._hoverIsPlane = false; + if (!this._dragging) { + return; } + + const pointInfo = this._calcPoint(x, y); + pointDelta.copy(pointInfo.point).sub(this._selectionStartPoint); + const angleDelta = pointInfo.angle - this._selectionStartAngle; + this.fire(TransformGizmo.EVENT_TRANSFORMMOVE, pointDelta, angleDelta); + + this._hoverAxis = ''; + this._hoverIsPlane = false; }); this.on('pointer:up', () => { + if (!this._dragging) { + return; + } this._dragging = false; this.fire(TransformGizmo.EVENT_TRANSFORMEND); From caa0fbac5126db02db173009c27cd80294e464d3 Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 13:25:32 +0000 Subject: [PATCH 02/10] added toggling of shapes for transform gizmo --- extras/gizmo/axis-shapes.js | 25 +++++++- extras/gizmo/gizmo.js | 7 ++- extras/gizmo/rotate-gizmo.js | 4 ++ extras/gizmo/scale-gizmo.js | 18 ++++-- extras/gizmo/transform-gizmo.js | 101 ++++++++++++++++++++++++++++++-- extras/gizmo/translate-gizmo.js | 18 ++++-- 6 files changed, 155 insertions(+), 18 deletions(-) diff --git a/extras/gizmo/axis-shapes.js b/extras/gizmo/axis-shapes.js index 94b6ad0dd2d..1509211526e 100644 --- a/extras/gizmo/axis-shapes.js +++ b/extras/gizmo/axis-shapes.js @@ -85,10 +85,14 @@ class AxisShape { _layers = []; + _disabled; + _defaultColor; _hoverColor; + _disabledColor; + device; axis; @@ -106,10 +110,26 @@ class AxisShape { this._rotation = options.rotation ?? new Vec3(); this._scale = options.scale ?? new Vec3(1, 1, 1); + this._disabled = options.disabled ?? false; + this._layers = options.layers ?? this._layers; this._defaultColor = options.defaultColor ?? Color.BLACK; this._hoverColor = options.hoverColor ?? Color.WHITE; + this._disabledColor = options.disabledColor ?? Color.GRAY_COLOR; + } + + set disabled(value) { + this._disabled = value ?? false; + if (value) { + for (let i = 0; i < this.meshInstances.length; i++) { + this.meshInstances[i].material = this._disabledColor; + } + } + } + + get disabled() { + return this._disabled; } _createRoot(name) { @@ -126,7 +146,7 @@ class AxisShape { _addRenderMeshes(entity, meshes) { const meshInstances = []; for (let i = 0; i < meshes.length; i++) { - const mi = new MeshInstance(meshes[i], this._defaultColor); + const mi = new MeshInstance(meshes[i], this._disabled ? this._disabledColor : this._defaultColor); meshInstances.push(mi); this.meshInstances.push(mi); } @@ -143,6 +163,9 @@ class AxisShape { } hover(state) { + if (this._disabled) { + return; + } const material = state ? this._hoverColor : this._defaultColor; for (let i = 0; i < this.meshInstances.length; i++) { this.meshInstances[i].material = material; diff --git a/extras/gizmo/gizmo.js b/extras/gizmo/gizmo.js index 3ef0d0a55ea..7f48b200adc 100644 --- a/extras/gizmo/gizmo.js +++ b/extras/gizmo/gizmo.js @@ -165,7 +165,12 @@ class Gizmo extends EventHandler { _scale = 1; /** - * Internal version of coordinate space. Defaults to {@link WORLD_COORD_SPACE}. + * Internal version of coordinate space. Can be: + * + * {@link LOCAL_COORD_SPACE} + * {@link WORLD_COORD_SPACE} + * + * Defaults to {@link WORLD_COORD_SPACE}. * * @type {string} * @protected diff --git a/extras/gizmo/rotate-gizmo.js b/extras/gizmo/rotate-gizmo.js index 3260d336395..bdfbeb14a04 100644 --- a/extras/gizmo/rotate-gizmo.js +++ b/extras/gizmo/rotate-gizmo.js @@ -31,6 +31,7 @@ class RotateGizmo extends TransformGizmo { rotation: new Vec3(90, 0, 90), defaultColor: this._materials.axis.z.cullBack, hoverColor: this._materials.hover.z.cullBack, + disabledColor: this._materials.disabled.cullBack, sectorAngle: 180 }), x: new AxisDisk(this._device, { @@ -39,6 +40,7 @@ class RotateGizmo extends TransformGizmo { rotation: new Vec3(0, 0, -90), defaultColor: this._materials.axis.x.cullBack, hoverColor: this._materials.hover.x.cullBack, + disabledColor: this._materials.disabled.cullBack, sectorAngle: 180 }), y: new AxisDisk(this._device, { @@ -47,6 +49,7 @@ class RotateGizmo extends TransformGizmo { rotation: new Vec3(0, 0, 0), defaultColor: this._materials.axis.y.cullBack, hoverColor: this._materials.hover.y.cullBack, + disabledColor: this._materials.disabled.cullBack, sectorAngle: 180 }), face: new AxisDisk(this._device, { @@ -55,6 +58,7 @@ class RotateGizmo extends TransformGizmo { rotation: this._getLookAtEulerAngles(this._camera.entity.getPosition()), defaultColor: this._materials.axis.face, hoverColor: this._materials.hover.face, + disabledColor: this._materials.disabled.cullBack, ringRadius: 0.55 }) }; diff --git a/extras/gizmo/scale-gizmo.js b/extras/gizmo/scale-gizmo.js index 435b70b0517..a29c40e12f3 100644 --- a/extras/gizmo/scale-gizmo.js +++ b/extras/gizmo/scale-gizmo.js @@ -29,7 +29,8 @@ class ScaleGizmo extends TransformGizmo { layers: [this._layer.id], rotation: new Vec3(0, 0, -90), defaultColor: this._materials.axis.x.cullNone, - hoverColor: this._materials.hover.x.cullNone + hoverColor: this._materials.hover.x.cullNone, + disabledColor: this._materials.disabled.cullNone }), xz: new AxisPlane(this._device, { axis: 'y', @@ -37,7 +38,8 @@ class ScaleGizmo extends TransformGizmo { layers: [this._layer.id], rotation: new Vec3(0, 0, 0), defaultColor: this._materials.axis.y.cullNone, - hoverColor: this._materials.hover.y.cullNone + hoverColor: this._materials.hover.y.cullNone, + disabledColor: this._materials.disabled.cullNone }), xy: new AxisPlane(this._device, { axis: 'z', @@ -45,28 +47,32 @@ class ScaleGizmo extends TransformGizmo { layers: [this._layer.id], rotation: new Vec3(90, 0, 0), defaultColor: this._materials.axis.z.cullNone, - hoverColor: this._materials.hover.z.cullNone + hoverColor: this._materials.hover.z.cullNone, + disabledColor: this._materials.disabled.cullNone }), x: new AxisBoxLine(this._device, { axis: 'x', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), defaultColor: this._materials.axis.x.cullBack, - hoverColor: this._materials.hover.x.cullBack + hoverColor: this._materials.hover.x.cullBack, + disabledColor: this._materials.disabled.cullBack }), y: new AxisBoxLine(this._device, { axis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), defaultColor: this._materials.axis.y.cullBack, - hoverColor: this._materials.hover.y.cullBack + hoverColor: this._materials.hover.y.cullBack, + disabledColor: this._materials.disabled.cullBack }), z: new AxisBoxLine(this._device, { axis: 'z', layers: [this._layer.id], rotation: new Vec3(90, 0, 0), defaultColor: this._materials.axis.z.cullBack, - hoverColor: this._materials.hover.z.cullBack + hoverColor: this._materials.hover.z.cullBack, + disabledColor: this._materials.disabled.cullBack }) }; diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js index 9afc748906b..0e497049a1f 100644 --- a/extras/gizmo/transform-gizmo.js +++ b/extras/gizmo/transform-gizmo.js @@ -34,6 +34,63 @@ const SEMI_BLUE_COLOR = new Color(0.3, 0.3, 1, 0.6); const YELLOW_COLOR = new Color(1, 1, 0.5); const WHITE_COLOR = new Color(1, 1, 1); const SEMI_WHITE_COLOR = new Color(1, 1, 1, 0.6); +const GRAY_COLOR = new Color(0.5, 0.5, 0.5, 0.5); + +/** + * Shape axis for the line X. + * + * @type {string} + */ +export const SHAPEAXIS_X = 'x'; + +/** + * Shape axis for the line Y. + * + * @type {string} + */ +export const SHAPEAXIS_Y = 'y'; + +/** + * Shape axis for the line Z. + * + * @type {string} + */ +export const SHAPEAXIS_Z = 'z'; + +/** + * Shape axis for the plane YZ. + * + * @type {string} + */ +export const SHAPEAXIS_YZ = 'yz'; + +/** + * Shape axis for the plane XZ. + * + * @type {string} + */ +export const SHAPEAXIS_XZ = 'xz'; + +/** + * Shape axis for the plane XY. + * + * @type {string} + */ +export const SHAPEAXIS_XY = 'xy'; + +/** + * Shape axis for all directions XYZ. + * + * @type {string} + */ +export const SHAPEAXIS_XYZ = 'xyz'; + +/** + * Shape axis for facing the camera. + * + * @type {string} + */ +export const SHAPEAXIS_FACE = 'face'; /** * The base class for all transform gizmos. @@ -116,6 +173,10 @@ class TransformGizmo extends Gizmo { }, face: this._createMaterial(YELLOW_COLOR), xyz: this._createMaterial(WHITE_COLOR) + }, + disabled: { + cullBack: this._createMaterial(GRAY_COLOR), + cullNone: this._createMaterial(GRAY_COLOR, CULLFACE_NONE) } }; @@ -149,12 +210,12 @@ class TransformGizmo extends Gizmo { _shapes = {}; /** - * Internal mapping of mesh instances to axis shapes for hovering. + * Internal mapping of mesh instances to axis shapes. * * @type {Map} * @private */ - _hoverShapeMap = new Map(); + _shapeMap = new Map(); /** * Internal currently hovered shape. @@ -263,6 +324,11 @@ class TransformGizmo extends Gizmo { }); this.on('pointer:down', (x, y, meshInstance) => { + const shape = this._shapeMap.get(meshInstance); + if (shape?.disabled) { + return; + } + if (this._dragging) { return; } @@ -282,6 +348,11 @@ class TransformGizmo extends Gizmo { }); this.on('pointer:move', (x, y, meshInstance) => { + const shape = this._shapeMap.get(meshInstance); + if (shape?.disabled) { + return; + } + this._hover(meshInstance); if (!this._dragging) { @@ -403,7 +474,7 @@ class TransformGizmo extends Gizmo { } this._hoverAxis = this._getAxis(meshInstance); this._hoverIsPlane = this._getIsPlane(meshInstance); - const shape = this._hoverShapeMap.get(meshInstance) || null; + const shape = this._shapeMap.get(meshInstance) || null; if (shape === this._hoverShape) { return; } @@ -581,11 +652,33 @@ class TransformGizmo extends Gizmo { meshInstances: shape.meshInstances }); for (let i = 0; i < shape.meshInstances.length; i++) { - this._hoverShapeMap.set(shape.meshInstances[i], shape); + this._shapeMap.set(shape.meshInstances[i], shape); } } } + /** + * Toggles the shape to be enabled or disabled. + * + * @param {string} shapeAxis - the shape axis. Can be: + * + * {@link SHAPEAXIS_X} + * {@link SHAPEAXIS_Y} + * {@link SHAPEAXIS_Z} + * {@link SHAPEAXIS_YZ} + * {@link SHAPEAXIS_XZ} + * {@link SHAPEAXIS_XY} + * {@link SHAPEAXIS_XYZ} + * {@link SHAPEAXIS_FACE} + */ + toggle(shapeAxis) { + if (!this._shapes.hasOwnProperty(shapeAxis)) { + return; + } + + this._shapes[shapeAxis].disabled = !this._shapes[shapeAxis].disabled; + } + /** * @override */ diff --git a/extras/gizmo/translate-gizmo.js b/extras/gizmo/translate-gizmo.js index 2881e7a9dab..784d76bd71f 100644 --- a/extras/gizmo/translate-gizmo.js +++ b/extras/gizmo/translate-gizmo.js @@ -26,7 +26,8 @@ class TranslateGizmo extends TransformGizmo { layers: [this._layer.id], rotation: new Vec3(0, 0, -90), defaultColor: this._materials.axis.x.cullNone, - hoverColor: this._materials.hover.x.cullNone + hoverColor: this._materials.hover.x.cullNone, + disabledColor: this._materials.disabled.cullNone }), xz: new AxisPlane(this._device, { axis: 'y', @@ -34,7 +35,8 @@ class TranslateGizmo extends TransformGizmo { layers: [this._layer.id], rotation: new Vec3(0, 0, 0), defaultColor: this._materials.axis.y.cullNone, - hoverColor: this._materials.hover.y.cullNone + hoverColor: this._materials.hover.y.cullNone, + disabledColor: this._materials.disabled.cullNone }), xy: new AxisPlane(this._device, { axis: 'z', @@ -42,28 +44,32 @@ class TranslateGizmo extends TransformGizmo { layers: [this._layer.id], rotation: new Vec3(90, 0, 0), defaultColor: this._materials.axis.z.cullNone, - hoverColor: this._materials.hover.z.cullNone + hoverColor: this._materials.hover.z.cullNone, + disabledColor: this._materials.disabled.cullNone }), x: new AxisArrow(this._device, { axis: 'x', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), defaultColor: this._materials.axis.x.cullBack, - hoverColor: this._materials.hover.x.cullBack + hoverColor: this._materials.hover.x.cullBack, + disabledColor: this._materials.disabled.cullBack }), y: new AxisArrow(this._device, { axis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), defaultColor: this._materials.axis.y.cullBack, - hoverColor: this._materials.hover.y.cullBack + hoverColor: this._materials.hover.y.cullBack, + disabledColor: this._materials.disabled.cullBack }), z: new AxisArrow(this._device, { axis: 'z', layers: [this._layer.id], rotation: new Vec3(90, 0, 0), defaultColor: this._materials.axis.z.cullBack, - hoverColor: this._materials.hover.z.cullBack + hoverColor: this._materials.hover.z.cullBack, + disabledColor: this._materials.disabled.cullBack }) }; From 35c3b7f425bf7679595f332cb17e9f24120e045f Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 13:48:23 +0000 Subject: [PATCH 03/10] changed color to material for clarity --- extras/gizmo/axis-shapes.js | 18 +++++++-------- extras/gizmo/rotate-gizmo.js | 24 ++++++++++---------- extras/gizmo/scale-gizmo.js | 40 ++++++++++++++++----------------- extras/gizmo/translate-gizmo.js | 36 ++++++++++++++--------------- 4 files changed, 59 insertions(+), 59 deletions(-) diff --git a/extras/gizmo/axis-shapes.js b/extras/gizmo/axis-shapes.js index 1509211526e..67cba2914cf 100644 --- a/extras/gizmo/axis-shapes.js +++ b/extras/gizmo/axis-shapes.js @@ -87,11 +87,11 @@ class AxisShape { _disabled; - _defaultColor; + _defaultMaterial; - _hoverColor; + _hoverMaterial; - _disabledColor; + _disabledMaterial; device; @@ -114,16 +114,16 @@ class AxisShape { this._layers = options.layers ?? this._layers; - this._defaultColor = options.defaultColor ?? Color.BLACK; - this._hoverColor = options.hoverColor ?? Color.WHITE; - this._disabledColor = options.disabledColor ?? Color.GRAY_COLOR; + this._defaultMaterial = options.defaultMaterial ?? Color.BLACK; + this._hoverMaterial = options.hoverMaterial ?? Color.WHITE; + this._disabledMaterial = options.disabledMaterial ?? Color.GRAY_COLOR; } set disabled(value) { this._disabled = value ?? false; if (value) { for (let i = 0; i < this.meshInstances.length; i++) { - this.meshInstances[i].material = this._disabledColor; + this.meshInstances[i].material = this._disabledMaterial; } } } @@ -146,7 +146,7 @@ class AxisShape { _addRenderMeshes(entity, meshes) { const meshInstances = []; for (let i = 0; i < meshes.length; i++) { - const mi = new MeshInstance(meshes[i], this._disabled ? this._disabledColor : this._defaultColor); + const mi = new MeshInstance(meshes[i], this._disabled ? this._disabledMaterial : this._defaultMaterial); meshInstances.push(mi); this.meshInstances.push(mi); } @@ -166,7 +166,7 @@ class AxisShape { if (this._disabled) { return; } - const material = state ? this._hoverColor : this._defaultColor; + const material = state ? this._hoverMaterial : this._defaultMaterial; for (let i = 0; i < this.meshInstances.length; i++) { this.meshInstances[i].material = material; } diff --git a/extras/gizmo/rotate-gizmo.js b/extras/gizmo/rotate-gizmo.js index bdfbeb14a04..f426f18148d 100644 --- a/extras/gizmo/rotate-gizmo.js +++ b/extras/gizmo/rotate-gizmo.js @@ -29,36 +29,36 @@ class RotateGizmo extends TransformGizmo { axis: 'z', layers: [this._layer.id], rotation: new Vec3(90, 0, 90), - defaultColor: this._materials.axis.z.cullBack, - hoverColor: this._materials.hover.z.cullBack, - disabledColor: this._materials.disabled.cullBack, + defaultMaterial: this._materials.axis.z.cullBack, + hoverMaterial: this._materials.hover.z.cullBack, + disabledMaterial: this._materials.disabled.cullBack, sectorAngle: 180 }), x: new AxisDisk(this._device, { axis: 'x', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), - defaultColor: this._materials.axis.x.cullBack, - hoverColor: this._materials.hover.x.cullBack, - disabledColor: this._materials.disabled.cullBack, + defaultMaterial: this._materials.axis.x.cullBack, + hoverMaterial: this._materials.hover.x.cullBack, + disabledMaterial: this._materials.disabled.cullBack, sectorAngle: 180 }), y: new AxisDisk(this._device, { axis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), - defaultColor: this._materials.axis.y.cullBack, - hoverColor: this._materials.hover.y.cullBack, - disabledColor: this._materials.disabled.cullBack, + defaultMaterial: this._materials.axis.y.cullBack, + hoverMaterial: this._materials.hover.y.cullBack, + disabledMaterial: this._materials.disabled.cullBack, sectorAngle: 180 }), face: new AxisDisk(this._device, { axis: 'face', layers: [this._layer.id], rotation: this._getLookAtEulerAngles(this._camera.entity.getPosition()), - defaultColor: this._materials.axis.face, - hoverColor: this._materials.hover.face, - disabledColor: this._materials.disabled.cullBack, + defaultMaterial: this._materials.axis.face, + hoverMaterial: this._materials.hover.face, + disabledMaterial: this._materials.disabled.cullBack, ringRadius: 0.55 }) }; diff --git a/extras/gizmo/scale-gizmo.js b/extras/gizmo/scale-gizmo.js index a29c40e12f3..dd58a0d0bd2 100644 --- a/extras/gizmo/scale-gizmo.js +++ b/extras/gizmo/scale-gizmo.js @@ -20,59 +20,59 @@ class ScaleGizmo extends TransformGizmo { xyz: new AxisBoxCenter(this._device, { axis: 'xyz', layers: [this._layer.id], - defaultColor: this._materials.axis.xyz, - hoverColor: this._materials.hover.xyz + defaultMaterial: this._materials.axis.xyz, + hoverMaterial: this._materials.hover.xyz }), yz: new AxisPlane(this._device, { axis: 'x', flipAxis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), - defaultColor: this._materials.axis.x.cullNone, - hoverColor: this._materials.hover.x.cullNone, - disabledColor: this._materials.disabled.cullNone + defaultMaterial: this._materials.axis.x.cullNone, + hoverMaterial: this._materials.hover.x.cullNone, + disabledMaterial: this._materials.disabled.cullNone }), xz: new AxisPlane(this._device, { axis: 'y', flipAxis: 'z', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), - defaultColor: this._materials.axis.y.cullNone, - hoverColor: this._materials.hover.y.cullNone, - disabledColor: this._materials.disabled.cullNone + defaultMaterial: this._materials.axis.y.cullNone, + hoverMaterial: this._materials.hover.y.cullNone, + disabledMaterial: this._materials.disabled.cullNone }), xy: new AxisPlane(this._device, { axis: 'z', flipAxis: 'x', layers: [this._layer.id], rotation: new Vec3(90, 0, 0), - defaultColor: this._materials.axis.z.cullNone, - hoverColor: this._materials.hover.z.cullNone, - disabledColor: this._materials.disabled.cullNone + defaultMaterial: this._materials.axis.z.cullNone, + hoverMaterial: this._materials.hover.z.cullNone, + disabledMaterial: this._materials.disabled.cullNone }), x: new AxisBoxLine(this._device, { axis: 'x', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), - defaultColor: this._materials.axis.x.cullBack, - hoverColor: this._materials.hover.x.cullBack, - disabledColor: this._materials.disabled.cullBack + defaultMaterial: this._materials.axis.x.cullBack, + hoverMaterial: this._materials.hover.x.cullBack, + disabledMaterial: this._materials.disabled.cullBack }), y: new AxisBoxLine(this._device, { axis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), - defaultColor: this._materials.axis.y.cullBack, - hoverColor: this._materials.hover.y.cullBack, - disabledColor: this._materials.disabled.cullBack + defaultMaterial: this._materials.axis.y.cullBack, + hoverMaterial: this._materials.hover.y.cullBack, + disabledMaterial: this._materials.disabled.cullBack }), z: new AxisBoxLine(this._device, { axis: 'z', layers: [this._layer.id], rotation: new Vec3(90, 0, 0), - defaultColor: this._materials.axis.z.cullBack, - hoverColor: this._materials.hover.z.cullBack, - disabledColor: this._materials.disabled.cullBack + defaultMaterial: this._materials.axis.z.cullBack, + hoverMaterial: this._materials.hover.z.cullBack, + disabledMaterial: this._materials.disabled.cullBack }) }; diff --git a/extras/gizmo/translate-gizmo.js b/extras/gizmo/translate-gizmo.js index 784d76bd71f..5c7cc1b41e6 100644 --- a/extras/gizmo/translate-gizmo.js +++ b/extras/gizmo/translate-gizmo.js @@ -25,51 +25,51 @@ class TranslateGizmo extends TransformGizmo { flipAxis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), - defaultColor: this._materials.axis.x.cullNone, - hoverColor: this._materials.hover.x.cullNone, - disabledColor: this._materials.disabled.cullNone + defaultMaterial: this._materials.axis.x.cullNone, + hoverMaterial: this._materials.hover.x.cullNone, + disabledMaterial: this._materials.disabled.cullNone }), xz: new AxisPlane(this._device, { axis: 'y', flipAxis: 'z', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), - defaultColor: this._materials.axis.y.cullNone, - hoverColor: this._materials.hover.y.cullNone, - disabledColor: this._materials.disabled.cullNone + defaultMaterial: this._materials.axis.y.cullNone, + hoverMaterial: this._materials.hover.y.cullNone, + disabledMaterial: this._materials.disabled.cullNone }), xy: new AxisPlane(this._device, { axis: 'z', flipAxis: 'x', layers: [this._layer.id], rotation: new Vec3(90, 0, 0), - defaultColor: this._materials.axis.z.cullNone, - hoverColor: this._materials.hover.z.cullNone, - disabledColor: this._materials.disabled.cullNone + defaultMaterial: this._materials.axis.z.cullNone, + hoverMaterial: this._materials.hover.z.cullNone, + disabledMaterial: this._materials.disabled.cullNone }), x: new AxisArrow(this._device, { axis: 'x', layers: [this._layer.id], rotation: new Vec3(0, 0, -90), - defaultColor: this._materials.axis.x.cullBack, - hoverColor: this._materials.hover.x.cullBack, - disabledColor: this._materials.disabled.cullBack + defaultMaterial: this._materials.axis.x.cullBack, + hoverMaterial: this._materials.hover.x.cullBack, + disabledMaterial: this._materials.disabled.cullBack }), y: new AxisArrow(this._device, { axis: 'y', layers: [this._layer.id], rotation: new Vec3(0, 0, 0), - defaultColor: this._materials.axis.y.cullBack, - hoverColor: this._materials.hover.y.cullBack, - disabledColor: this._materials.disabled.cullBack + defaultMaterial: this._materials.axis.y.cullBack, + hoverMaterial: this._materials.hover.y.cullBack, + disabledMaterial: this._materials.disabled.cullBack }), z: new AxisArrow(this._device, { axis: 'z', layers: [this._layer.id], rotation: new Vec3(90, 0, 0), - defaultColor: this._materials.axis.z.cullBack, - hoverColor: this._materials.hover.z.cullBack, - disabledColor: this._materials.disabled.cullBack + defaultMaterial: this._materials.axis.z.cullBack, + hoverMaterial: this._materials.hover.z.cullBack, + disabledMaterial: this._materials.disabled.cullBack }) }; From e580f31f1a50cbd37162c6663368aba8ea3893de Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 13:50:57 +0000 Subject: [PATCH 04/10] updated material on shsape being either enabled or disabled --- extras/gizmo/axis-shapes.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/extras/gizmo/axis-shapes.js b/extras/gizmo/axis-shapes.js index 67cba2914cf..eeb891a9215 100644 --- a/extras/gizmo/axis-shapes.js +++ b/extras/gizmo/axis-shapes.js @@ -120,12 +120,10 @@ class AxisShape { } set disabled(value) { - this._disabled = value ?? false; - if (value) { - for (let i = 0; i < this.meshInstances.length; i++) { - this.meshInstances[i].material = this._disabledMaterial; - } + for (let i = 0; i < this.meshInstances.length; i++) { + this.meshInstances[i].material = value ? this._disabledMaterial : this._defaultMaterial; } + this._disabled = value ?? false; } get disabled() { From 4e6e42828293166613274cb8ca54288da93c92e6 Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 14:37:32 +0000 Subject: [PATCH 05/10] change coord space constant names --- extras/gizmo/gizmo.js | 18 +++++++++--------- extras/gizmo/rotate-gizmo.js | 6 +++--- extras/gizmo/scale-gizmo.js | 4 ++-- extras/gizmo/translate-gizmo.js | 4 ++-- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/extras/gizmo/gizmo.js b/extras/gizmo/gizmo.js index 7f48b200adc..a70573b4150 100644 --- a/extras/gizmo/gizmo.js +++ b/extras/gizmo/gizmo.js @@ -25,14 +25,14 @@ const ORTHO_SCALE_RATIO = 0.32; * * @type {string} */ -export const LOCAL_COORD_SPACE = 'local'; +export const GIZMO_LOCAL = 'local'; /** * World coordinate space. * * @type {string} */ -export const WORLD_COORD_SPACE = 'world'; +export const GIZMO_GLOBAL = 'world'; /** * The base class for all gizmos. @@ -167,15 +167,15 @@ class Gizmo extends EventHandler { /** * Internal version of coordinate space. Can be: * - * {@link LOCAL_COORD_SPACE} - * {@link WORLD_COORD_SPACE} + * {@link GIZMO_LOCAL} + * {@link GIZMO_GLOBAL} * - * Defaults to {@link WORLD_COORD_SPACE}. + * Defaults to {@link GIZMO_GLOBAL}. * * @type {string} * @protected */ - _coordSpace = WORLD_COORD_SPACE; + _coordSpace = GIZMO_GLOBAL; /** * Internal reference to the app containing the gizmo. @@ -296,12 +296,12 @@ class Gizmo extends EventHandler { } /** - * The gizmo coordinate space. Defaults to {@link WORLD_COORD_SPACE}. + * The gizmo coordinate space. Defaults to {@link GIZMO_GLOBAL}. * * @type {string} */ set coordSpace(value) { - this._coordSpace = value ?? WORLD_COORD_SPACE; + this._coordSpace = value ?? GIZMO_GLOBAL; this._updateRotation(); } @@ -350,7 +350,7 @@ class Gizmo extends EventHandler { _updateRotation() { tmpV1.set(0, 0, 0); - if (this._coordSpace === LOCAL_COORD_SPACE && this.nodes.length !== 0) { + if (this._coordSpace === GIZMO_LOCAL && this.nodes.length !== 0) { tmpV1.copy(this.nodes[this.nodes.length - 1].getEulerAngles()); } this.root.setEulerAngles(tmpV1); diff --git a/extras/gizmo/rotate-gizmo.js b/extras/gizmo/rotate-gizmo.js index f426f18148d..026aa1ff69a 100644 --- a/extras/gizmo/rotate-gizmo.js +++ b/extras/gizmo/rotate-gizmo.js @@ -7,7 +7,7 @@ import { } from 'playcanvas'; import { AxisDisk } from './axis-shapes.js'; -import { LOCAL_COORD_SPACE } from './gizmo.js'; +import { GIZMO_LOCAL } from './gizmo.js'; import { TransformGizmo } from "./transform-gizmo.js"; // temporary variables @@ -337,7 +337,7 @@ class RotateGizmo extends TransformGizmo { tmpQ1.setFromAxisAngle(tmpV1, angleDelta); - if (!isFacing && this._coordSpace === LOCAL_COORD_SPACE) { + if (!isFacing && this._coordSpace === GIZMO_LOCAL) { tmpQ2.copy(this._nodeLocalRotations.get(node)).mul(tmpQ1); node.setLocalRotation(tmpQ2); } else { @@ -351,7 +351,7 @@ class RotateGizmo extends TransformGizmo { } } - if (this._coordSpace === LOCAL_COORD_SPACE) { + if (this._coordSpace === GIZMO_LOCAL) { this._updateRotation(); } } diff --git a/extras/gizmo/scale-gizmo.js b/extras/gizmo/scale-gizmo.js index dd58a0d0bd2..e7bc41a9bf7 100644 --- a/extras/gizmo/scale-gizmo.js +++ b/extras/gizmo/scale-gizmo.js @@ -3,7 +3,7 @@ import { } from 'playcanvas'; import { AxisBoxCenter, AxisBoxLine, AxisPlane } from './axis-shapes.js'; -import { LOCAL_COORD_SPACE } from './gizmo.js'; +import { GIZMO_LOCAL } from './gizmo.js'; import { TransformGizmo } from "./transform-gizmo.js"; // temporary variables @@ -76,7 +76,7 @@ class ScaleGizmo extends TransformGizmo { }) }; - _coordSpace = LOCAL_COORD_SPACE; + _coordSpace = GIZMO_LOCAL; /** * Internal mapping from each attached node to their starting scale. diff --git a/extras/gizmo/translate-gizmo.js b/extras/gizmo/translate-gizmo.js index 5c7cc1b41e6..923a504a1ef 100644 --- a/extras/gizmo/translate-gizmo.js +++ b/extras/gizmo/translate-gizmo.js @@ -4,7 +4,7 @@ import { } from 'playcanvas'; import { AxisArrow, AxisPlane } from './axis-shapes.js'; -import { LOCAL_COORD_SPACE } from './gizmo.js'; +import { GIZMO_LOCAL } from './gizmo.js'; import { TransformGizmo } from "./transform-gizmo.js"; // temporary variables @@ -254,7 +254,7 @@ class TranslateGizmo extends TransformGizmo { _setNodePositions(pointDelta) { for (let i = 0; i < this.nodes.length; i++) { const node = this.nodes[i]; - if (this._coordSpace === LOCAL_COORD_SPACE) { + if (this._coordSpace === GIZMO_LOCAL) { tmpV1.copy(pointDelta); node.parent.getWorldTransform().getScale(tmpV2); tmpV2.x = 1 / tmpV2.x; From a9419501c224f0232bab72480ce6a50a8229a5a6 Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 14:47:14 +0000 Subject: [PATCH 06/10] renamed GIZMO_GLOBAL to GIZMO_WORLD --- extras/gizmo/gizmo.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/extras/gizmo/gizmo.js b/extras/gizmo/gizmo.js index a70573b4150..c3e98f8f647 100644 --- a/extras/gizmo/gizmo.js +++ b/extras/gizmo/gizmo.js @@ -32,7 +32,7 @@ export const GIZMO_LOCAL = 'local'; * * @type {string} */ -export const GIZMO_GLOBAL = 'world'; +export const GIZMO_WORLD = 'world'; /** * The base class for all gizmos. @@ -168,14 +168,14 @@ class Gizmo extends EventHandler { * Internal version of coordinate space. Can be: * * {@link GIZMO_LOCAL} - * {@link GIZMO_GLOBAL} + * {@link GIZMO_WORLD} * - * Defaults to {@link GIZMO_GLOBAL}. + * Defaults to {@link GIZMO_WORLD}. * * @type {string} * @protected */ - _coordSpace = GIZMO_GLOBAL; + _coordSpace = GIZMO_WORLD; /** * Internal reference to the app containing the gizmo. @@ -296,12 +296,12 @@ class Gizmo extends EventHandler { } /** - * The gizmo coordinate space. Defaults to {@link GIZMO_GLOBAL}. + * The gizmo coordinate space. Defaults to {@link GIZMO_WORLD}. * * @type {string} */ set coordSpace(value) { - this._coordSpace = value ?? GIZMO_GLOBAL; + this._coordSpace = value ?? GIZMO_WORLD; this._updateRotation(); } From 85749894d1729ac678ef6bf6b1ad5180f1d3db8e Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 14:48:07 +0000 Subject: [PATCH 07/10] Fixed color static prop GRAY --- extras/gizmo/axis-shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extras/gizmo/axis-shapes.js b/extras/gizmo/axis-shapes.js index eeb891a9215..6b07640eae3 100644 --- a/extras/gizmo/axis-shapes.js +++ b/extras/gizmo/axis-shapes.js @@ -116,7 +116,7 @@ class AxisShape { this._defaultMaterial = options.defaultMaterial ?? Color.BLACK; this._hoverMaterial = options.hoverMaterial ?? Color.WHITE; - this._disabledMaterial = options.disabledMaterial ?? Color.GRAY_COLOR; + this._disabledMaterial = options.disabledMaterial ?? Color.GRAY; } set disabled(value) { From 160310efaaece0eba6f672658c542984aa97400c Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 15:11:24 +0000 Subject: [PATCH 08/10] resolved inconsistencies with axis shape materials; throw errors if not provided --- extras/gizmo/axis-shapes.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/extras/gizmo/axis-shapes.js b/extras/gizmo/axis-shapes.js index 6b07640eae3..fa19109578a 100644 --- a/extras/gizmo/axis-shapes.js +++ b/extras/gizmo/axis-shapes.js @@ -5,7 +5,7 @@ import { createPlane, createMesh, createTorus, - Color, + Material, MeshInstance, Entity, Quat, @@ -114,9 +114,20 @@ class AxisShape { this._layers = options.layers ?? this._layers; - this._defaultMaterial = options.defaultMaterial ?? Color.BLACK; - this._hoverMaterial = options.hoverMaterial ?? Color.WHITE; - this._disabledMaterial = options.disabledMaterial ?? Color.GRAY; + if (!(options.defaultMaterial instanceof Material)) { + throw new Error('No default material provided.'); + } + this._defaultMaterial = options.defaultMaterial; + + if (!(options.hoverMaterial instanceof Material)) { + throw new Error('No hover material provided.'); + } + this._hoverMaterial = options.hoverMaterial; + + if (!(options.disabledMaterial instanceof Material)) { + throw new Error('No disabled material provided.'); + } + this._disabledMaterial = options.disabledMaterial; } set disabled(value) { From 34ffcedca578531b27114aca39e8a06bff157517 Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 15:14:09 +0000 Subject: [PATCH 09/10] moved possible coordSpace values jsdoc to setter --- extras/gizmo/gizmo.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/extras/gizmo/gizmo.js b/extras/gizmo/gizmo.js index c3e98f8f647..567a7ca53e4 100644 --- a/extras/gizmo/gizmo.js +++ b/extras/gizmo/gizmo.js @@ -165,12 +165,7 @@ class Gizmo extends EventHandler { _scale = 1; /** - * Internal version of coordinate space. Can be: - * - * {@link GIZMO_LOCAL} - * {@link GIZMO_WORLD} - * - * Defaults to {@link GIZMO_WORLD}. + * Internal version of coordinate space. Defaults to {@link GIZMO_WORLD}. * * @type {string} * @protected @@ -296,7 +291,12 @@ class Gizmo extends EventHandler { } /** - * The gizmo coordinate space. Defaults to {@link GIZMO_WORLD}. + * The gizmo coordinate space. Can be: + * + * {@link GIZMO_LOCAL} + * {@link GIZMO_WORLD} + * + * Defaults to {@link GIZMO_WORLD}. * * @type {string} */ From 97b75e0751a7c37a4ce8569f76efd665a2493411 Mon Sep 17 00:00:00 2001 From: kpal Date: Fri, 26 Jan 2024 16:01:47 +0000 Subject: [PATCH 10/10] change toggle to set/get shape enabled --- extras/gizmo/transform-gizmo.js | 34 +++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js index 0e497049a1f..19a2eab4e4c 100644 --- a/extras/gizmo/transform-gizmo.js +++ b/extras/gizmo/transform-gizmo.js @@ -658,9 +658,9 @@ class TransformGizmo extends Gizmo { } /** - * Toggles the shape to be enabled or disabled. + * Set the shape to be enabled or disabled. * - * @param {string} shapeAxis - the shape axis. Can be: + * @param {string} shapeAxis - The shape axis. Can be: * * {@link SHAPEAXIS_X} * {@link SHAPEAXIS_Y} @@ -670,13 +670,39 @@ class TransformGizmo extends Gizmo { * {@link SHAPEAXIS_XY} * {@link SHAPEAXIS_XYZ} * {@link SHAPEAXIS_FACE} + * + * @param {boolean} enabled - The enabled state of shape. */ - toggle(shapeAxis) { + enableShape(shapeAxis, enabled) { if (!this._shapes.hasOwnProperty(shapeAxis)) { return; } - this._shapes[shapeAxis].disabled = !this._shapes[shapeAxis].disabled; + this._shapes[shapeAxis].disabled = !enabled; + } + + /** + * Get the enabled state of the shape. + * + * @param {string} shapeAxis - The shape axis. Can be: + * + * {@link SHAPEAXIS_X} + * {@link SHAPEAXIS_Y} + * {@link SHAPEAXIS_Z} + * {@link SHAPEAXIS_YZ} + * {@link SHAPEAXIS_XZ} + * {@link SHAPEAXIS_XY} + * {@link SHAPEAXIS_XYZ} + * {@link SHAPEAXIS_FACE} + * + * @returns {boolean} - Then enabled state of the shape + */ + isShapeEnabled(shapeAxis) { + if (!this._shapes.hasOwnProperty(shapeAxis)) { + return false; + } + + return !this._shapes[shapeAxis].disabled; } /**