fix(soba): set up an effect for setting position of gizmo instead

Author: nartc

Diff for: libs/soba/gizmos/src/lib/pivot-controls/pivot-controls.ts

@@ -8,7 +8,16 @@ import {
 	output,
 	viewChild,
 } from '@angular/core';
-import { extend, getLocalState, injectBeforeRender, injectStore, NgtAnyRecord, omit, pick } from 'angular-three';
+import {
+	applyProps,
+	extend,
+	getLocalState,
+	injectBeforeRender,
+	injectStore,
+	NgtAnyRecord,
+	omit,
+	pick,
+} from 'angular-three';
 import { calculateScaleFactor } from 'angular-three-soba/misc';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { Box3, Group, Matrix4, Mesh, Vector3 } from 'three';
@@ -128,7 +137,7 @@ const defaultOptions: NgtsPivotControlsOptions = {
 	template: `
 		<ngt-group #parent>
 			<ngt-group #group [matrix]="matrix()" [matrixAutoUpdate]="false" [parameters]="parameters()">
-				<ngt-group #gizmo [visible]="visible()" [position]="offset()" [rotation]="rotation()">
+				<ngt-group #gizmo [visible]="visible()" [rotation]="rotation()">
 					@if (enabled()) {
 						@let _disableAxes = disableAxes();
 						@let _disableSliders = disableSliders();
@@ -268,6 +277,17 @@ export class NgtsPivotControls {
 	constructor() {
 		extend({ Group });
 
+		effect(() => {
+			const [anchor, offset] = [this.anchor(), this.offset()];
+			// if there is anchor, then the below effect will handle the position
+			if (anchor) return;
+			// if not, then we'll use the offset to set the position for gizmo
+			const gizmo = this.gizmoRef().nativeElement;
+			if (!gizmo) return;
+
+			applyProps(gizmo, { position: offset });
+		});
+
 		effect(() => {
 			const anchor = this.anchor();
 			if (!anchor) return;

Diff for: libs/soba/src/gizmos/pivot-controls.stories.ts

@@ -9,7 +9,7 @@ import { makeDecorators, makeStoryObject } from '../setup-canvas';
 		<ngts-pivot-controls [options]="options()">
 			<ngt-mesh>
 				<ngt-box-geometry />
-				<ngt-mesh-standard-material />
+				<ngt-mesh-standard-material [wireframe]="true" />
 			</ngt-mesh>
 		</ngts-pivot-controls>
 		<ngt-directional-light [position]="[10, 10, 5]" />