After updating to version 5.2.2, the gizmo cannot be displayed

[yywf77]

After updating to version 5.2.2, the gizmo cannot be displayed. When using version 4.5, everything is normal <ngt-canvas shadows [gl]="{ alpha: true, antialias: true}" [camera]="{position: [-500,500,500],far:200000, fov: 750}" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (mousemove)="mousemove($event)" (created)="onCreated($event)">

<sm-light-helper (ready)="editor.lights.push($event)">

<ngt-soba-loader *ngIf="false">

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { BufferGeometry, Camera, Group, Material, PerspectiveCamera, Scene, WebGLRenderer } from 'three'; import { Editor, EditorService } from '../../editor';

@Component({ selector: 'sm-gizmo-helper', templateUrl:` <ng-container *ngIf="true"> <ngt-soba-gizmo-helper name="GizmoHelper" [alignment]="alignment" [margin]="margin" [scale]="0.75" (ready)="onReady($event)">

  </ng-template>
</ngt-soba-gizmo-helper>

`, styleUrls: ['./gizmo-helper.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class GizmoHelperComponent{ @Input() mode: 'viewport' | 'viewcube' = 'viewcube'; @Input() alignment: | 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' = 'top-right'; @Input() margin: [number, number] = [80, 80]; @Output() ready = new EventEmitter();

editor!:Editor; constructor(private editorService:EditorService){ this.editorService.getEditor().subscribe(res=>this.editor=res); }

onReady(event:Group){ this.editor.gizmo = event; } }

[nartc]

Can you share a reproduce?

[yywf77]

I don't know why. It's just that I have encountered this problem, or is it a common problem.

[IRobot1]

There were a lot of typo's in your code above. However, I was able to get it to work using 5.2.2.

I commented out references to "editor" related stuff and stubbed in empty mouse, onReady and onCreate methods to get it to compile.

Here's the code that worked for me.

    <gizmo-helper></gizmo-helper>

<ng-container *ngIf="true">
  <ngt-soba-gizmo-helper name="GizmoHelper" [alignment]="alignment" [margin]="margin" [scale]="0.75" (ready)="onReady($event)">
    <ng-template ngt-soba-gizmo-helper-content>
      <ngt-soba-gizmo-viewcube *ngIf="mode === 'viewcube'; else viewport" [faces]="['右', '左', '上', '下', '前', '后']" font="4rem Inter var, Arial, sans-serif" opacity="1" color="#00c8d6" strokeColor="#00b0bd" textColor="black" hoverColor="#00b0bd"> </ngt-soba-gizmo-viewcube> <ng-template #viewport>
        <ngt-soba-gizmo-viewport [axisColors]="['red', 'green', 'blue']" labelColor="black" [hideNegativeAxes]="false">
        </ngt-soba-gizmo-viewport>
      </ng-template>
    </ng-template>
  </ngt-soba-gizmo-helper>
</ng-container>

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';

import { Group } from 'three';

@Component({
  selector: 'gizmo-helper',
  templateUrl: './gizmo-helper.component.html',
  styleUrls: ['./gizmo-helper.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GizmoHelperComponent {
  @Input() mode: 'viewport' | 'viewcube' = 'viewcube';
  @Input() alignment:
    | 'top-left'
    | 'top-right'
    | 'bottom-right'
    | 'bottom-left' = 'top-right';
  @Input() margin: [number, number] = [80, 80];
  @Output() ready = new EventEmitter();

  //editor!: Editor;
  //constructor(private editorService: EditorService) {
  //  this.editorService.getEditor().subscribe(res => this.editor = res);
  //}

  onReady(event: Group) {
    //this.editor.gizmo = event;
  }
}

In app.modele.ts

import {
  NgtSobaGizmoHelperModule,
  NgtSobaGizmoViewcubeModule,
  NgtSobaGizmoViewportModule,
} from '@angular-three/soba/abstractions';

  imports: [
    NgtSobaGizmoHelperModule,
    NgtSobaGizmoViewcubeModule,
    NgtSobaGizmoViewportModule,
  ]

[IRobot1]

I'll find some time to update the SOBA Gizmo Storybook Example to match DREI storybook example and submit a pull request.

[yywf77]

Thank you very much! I did it like you，But it still can not work normally and no error is reported, Maybe there's some conflicts elsewhere。

[yywf77]

Hi, I try it in app.compent.html, and it works. But it doesn't work on other pages

[yywf77]

It seems that routing to other pages is not work. Insert other pages directly into the app component. html is OK

[IRobot1]

Are other pages in modules? If yes, there's a known problem when mixing routes + modules. Routes to other pages in the app is okay, just not to components in modules.

Also, check your browser console for any warnings or errors.

[yywf77]

app-routing.module.ts

import { NgModule } from '@angular/core'; import { ExtraOptions, RouterModule, Routes } from '@angular/router'; import { AuthGuard } from './auth/auth.guard';

const routes: Routes = [

{ path: 'editor', canActivate:[AuthGuard], loadChildren: () => import('./editor/editor.module') .then(m => m.EditorModule), }, { path:'auth', loadChildren:() => import('./auth/auth.module') .then(m => m.AuthModule), }, { path: '', redirectTo: 'auth', pathMatch: 'full' }, { path: '**', redirectTo: 'auth' }, ];

const config:ExtraOptions={ useHash:true }

@NgModule({ imports: [RouterModule.forRoot(routes,config)], exports: [RouterModule] }) export class AppRoutingModule { }

[yywf77]

Please help me see why this app just can't display gizmos [Uploading sm-editor.zip…]()

[yywf77]

sm-editor.zip

[IRobot1]

Thanks. I'm able to repeat what you are seeing. No obvious reason why yet.

[IRobot1]

For testing, I changed bootstrap from AppComponent to EditorComponent and changed selector to app-root. The gizmo still does not show.

<layout>
    <ngt-canvas>
        <ngt-ambient-light intensity="0.5"></ngt-ambient-light>
        <ngt-spot-light [position]="10" angle="0.15" penumbra="1"></ngt-spot-light>
        <ngt-point-light [position]="-10"></ngt-point-light>
        <ngt-grid-helper [args]="[10000, 100, '#00b0bd','#ff0000']"></ngt-grid-helper>

        <ngt-soba-gizmo-helper name="GizmoHelper" [alignment]="'top-right'" [margin]="[80,80]" [scale]="0.75">
                <ngt-soba-gizmo-viewcube [faces]="['右', '左', '上', '下', '前', '后']" font="4rem Inter var, Arial, sans-serif" opacity="1" color="#00c8d6" strokeColor="#00b0bd" textColor="black" hoverColor="#00b0bd">
                </ngt-soba-gizmo-viewcube>
        </ngt-soba-gizmo-helper>
        <ngt-soba-orbit-controls></ngt-soba-orbit-controls>
    </ngt-canvas>
</layout>

However, when I remove <layout> and </layout> from around ngt-canvas, the gizmo shows as expected

Somehow, layout is interfering with showing the gizmo in the canvas. My guess is that when content projection is used to show the canvas, this interferes with subsequent content projections used by the gizmo. @nartc any thoughts on this?

In layout.component.html

<nb-layout>
    <nb-layout-column class="layout-column">
        <ng-content></ng-content> <!-- canvas injected here -->
    </nb-layout-column>
</nb-layout>

[nartc]

Give 5.2.4 a try. There's a bug in how GizmoHelper doesn't render without CDR. I think this might be a bigger bug than just GizmoHelper. I released a workaround (hack) for now to force CDR on GizmoHelper after 250ms.

[yywf77]

thanks!, I try it. and the gizmo shows as expected, but when I use router-outlet setting as blow, It can be displayed when no or less components are placed，When there is more components,It's gone again。

[yywf77]

sm-editor.zip

[nartc]

@yywf77 I can't download the zip

[yywf77]

Do you have an email? I'll send it to you

[yywf77]

nartc7789@gmail.com

[yywf77]

It has been sent to your email

[yywf77]

您的邮件被收件人（nartc7789@gmail.com）所在服务商判为垃圾邮件，对方不予接收。 host gmail-smtp-in.l.google.com[64.233.187.27] said: 552-5.7.0 This message was blocked because its content presents a potentialsecurity issue. Please visit https://support.google.com/mail/?p=BlockedMessage to review ourmessage content and attachment content guidelines. m26-20020a634c5a000000b003c5ecccbaa7si16382816pgl.827 - gsmtp (in reply to end of DATA command)

[nartc]

@yywf77 it'd be easier if you push your code in a repo and share the repo with me

[yywf77]

https://github.com/yywf77/sm-editor

[yywf77]

@nartc is this repo can be download, Did you see what I described，In addition, I found that the placement order of gizmo will also affect

[yywf77]

Thanks every one. The problem has been solved. Inspired by nartc practice, I also carried out delayed loading,then the gizmo shows.

<ng-container *ngIf="ready$ | async"> <ngt-soba-gizmo-helper

gizmohelper

name="GizmoHelper" 
[alignment]="alignment" 
[margin]="margin" 
[scale]="0.75"
(ready)="ready.emit($event);">
<ng-template ngt-soba-gizmo-helper-content>
  <ngt-soba-gizmo-viewcube *ngIf="mode === 'viewcube'; else viewport" 
    [faces]="['右', '左', '上', '下', '前', '后']"
    font="4rem Inter var, Arial, sans-serif" 
    opacity="1" color="#00c8d6" 
    strokeColor="#00b0bd" 
    textColor="black"
    hoverColor="#00b0bd"> 
  </ngt-soba-gizmo-viewcube>
  <ng-template #viewport>
    <ngt-soba-gizmo-viewport 
    [axisColors]="['red', 'green', 'blue']" 
    labelColor="black" 
    [hideNegativeAxes]="false">
    </ngt-soba-gizmo-viewport>
  </ng-template>
</ng-template>

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { map, timer } from 'rxjs';

@Component({ selector: 'sm-gizmo-helper', templateUrl: './gizmo-helper.component.html', styleUrls: ['./gizmo-helper.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class GizmoHelperComponent{ ready$ = timer(0).pipe(map(() => true)); @Input() mode: 'viewport' | 'viewcube' = 'viewcube'; @Input() alignment: | 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' = 'top-right'; @Input() margin: [number, number] = [80, 80]; @Output() ready = new EventEmitter(); }