- + (rotationChange)="gizmo.rotation = $event[0]; gizmo.rotationX = $event[1]" + [bounds]="(bounds$ | async)!" + [zoom]="11.5" + [interactive]="true" + camera="perspective" + > - +
- - + + [disablePositionChange]="disablePositionChange" + >
X: {{ (position$ | async)?.x }}
@@ -32,11 +67,19 @@
- - -
- - - + +
+ + +
diff --git a/apps/ccf-rui/src/app/modules/content/content.component.scss b/apps/ccf-rui/src/app/modules/content/content.component.scss index 7d48d66d0..38a22283e 100644 --- a/apps/ccf-rui/src/app/modules/content/content.component.scss +++ b/apps/ccf-rui/src/app/modules/content/content.component.scss @@ -2,7 +2,7 @@ display: block; width: 100%; height: 100%; - padding: .5rem; + padding: 0.5rem; overflow: hidden; .top-bar { diff --git a/apps/ccf-rui/src/app/modules/content/content.component.spec.ts b/apps/ccf-rui/src/app/modules/content/content.component.spec.ts index 4df570187..ad1f2a6b8 100644 --- a/apps/ccf-rui/src/app/modules/content/content.component.spec.ts +++ b/apps/ccf-rui/src/app/modules/content/content.component.spec.ts @@ -9,26 +9,17 @@ import { SceneState } from '../../core/store/scene/scene.state'; import { ContentComponent } from './content.component'; import { ContentModule } from './content.module'; - describe('ContentComponent', () => { let shallow: Shallow; beforeEach(() => { - const mockModelState = jasmine.createSpyObj( - 'ModelState', ['setViewType', 'setViewSide'] - ); + const mockModelState = jasmine.createSpyObj('ModelState', ['setViewType', 'setViewSide']); - const mockPageState = jasmine.createSpyObj( - 'PageStage', ['setUserName'] - ); + const mockPageState = jasmine.createSpyObj('PageStage', ['setUserName']); - const mockRegistrationState = jasmine.createSpyObj( - 'RegistrationState', ['register'] - ); + const mockRegistrationState = jasmine.createSpyObj('RegistrationState', ['register']); - const mockSceneState = jasmine.createSpyObj( - 'SceneState', ['nodes$'] - ); + const mockSceneState = jasmine.createSpyObj('SceneState', ['nodes$']); shallow = new Shallow(ContentComponent, ContentModule) .mock(ModelState, { @@ -37,15 +28,15 @@ describe('ContentComponent', () => { viewSide$: of('anterior' as ViewSide), position$: of({ x: 0, y: 0, z: 0 }), organDimensions$: of({ x: 0, y: 0, z: 0 }), - defaultPosition: { x: 0, y: 0, z: 0 } + defaultPosition: { x: 0, y: 0, z: 0 }, }) .mock(PageState, mockPageState) .mock(RegistrationState, { - ...mockRegistrationState + ...mockRegistrationState, }) .mock(SceneState, { ...mockSceneState, - nodes$: from([]) + nodes$: from([]), }); }); @@ -79,9 +70,7 @@ describe('ContentComponent', () => { // Constructors can't be arrow functions spyOn(resizeSensorModule, 'ResizeSensor').and.callFake(function (_el, callback) { sensorCallback = callback; - return jasmine.createSpyObj( - 'ResizeSensor', ['detach'] - ); + return jasmine.createSpyObj('ResizeSensor', ['detach']); }); }); diff --git a/apps/ccf-rui/src/app/modules/content/content.component.theme.scss b/apps/ccf-rui/src/app/modules/content/content.component.theme.scss index 1bb7f70b0..105926908 100644 --- a/apps/ccf-rui/src/app/modules/content/content.component.theme.scss +++ b/apps/ccf-rui/src/app/modules/content/content.component.theme.scss @@ -1,6 +1,5 @@ @use '@angular/material' as mat; - @mixin theme($theme) { $color-config: mat.get-color-config($theme); $primary: map-get($color-config, primary); diff --git a/apps/ccf-rui/src/app/modules/content/content.component.ts b/apps/ccf-rui/src/app/modules/content/content.component.ts index 42b47f118..309153b2d 100644 --- a/apps/ccf-rui/src/app/modules/content/content.component.ts +++ b/apps/ccf-rui/src/app/modules/content/content.component.ts @@ -1,5 +1,12 @@ import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnDestroy, OnInit + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + HostBinding, + Input, + OnDestroy, + OnInit, } from '@angular/core'; import { NodeDragEvent } from 'ccf-body-ui'; import { ResizeSensor } from 'css-element-queries'; @@ -11,7 +18,6 @@ import { PageState } from '../../core/store/page/page.state'; import { RegistrationState } from '../../core/store/registration/registration.state'; import { SceneState } from '../../core/store/scene/scene.state'; - /** * Main content component */ @@ -19,7 +25,7 @@ import { SceneState } from '../../core/store/scene/scene.state'; selector: 'ccf-content', templateUrl: './content.component.html', styleUrls: ['./content.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ContentComponent implements OnInit, OnDestroy { /** HTML class name */ @@ -28,22 +34,20 @@ export class ContentComponent implements OnInit, OnDestroy { @Input() disablePositionChange = false; readonly position$ = this.model.position$.pipe( - map(p => ({ x: Math.floor(p.x), y: Math.floor(p.y), z: Math.floor(p.z) })) + map((p) => ({ x: Math.floor(p.x), y: Math.floor(p.y), z: Math.floor(p.z) })), ); /** Whether the view type is 3d or register */ - readonly is3DView$ = this.model.viewType$.pipe( - map(type => type === '3d') - ); + readonly is3DView$ = this.model.viewType$.pipe(map((type) => type === '3d')); readonly bounds$ = this.model.organDimensions$.pipe( - map(dims => ({ + map((dims) => ({ x: Math.max(dims.x, this.model.defaultPosition.x + 40) / 1000, y: Math.max(dims.y, this.model.defaultPosition.y + 40) / 1000, - z: Math.max(dims.z, this.model.defaultPosition.z + 40) / 1000 + z: Math.max(dims.z, this.model.defaultPosition.z + 40) / 1000, })), distinctUntilKeyChanged('x'), - distinctUntilKeyChanged('y') + distinctUntilKeyChanged('y'), ); /** Whether the content area is very narrow */ @@ -77,8 +81,8 @@ export class ContentComponent implements OnInit, OnDestroy { readonly registration: RegistrationState, readonly scene: SceneState, private readonly rootRef: ElementRef, - private readonly cdr: ChangeDetectorRef - ) { } + private readonly cdr: ChangeDetectorRef, + ) {} /** * Sets up the resize sensor @@ -126,9 +130,9 @@ export class ContentComponent implements OnInit, OnDestroy { handleNodeDrag(event: NodeDragEvent): void { if (event.node['@id'] === '#DraftPlacement') { if (event.info.coordinate) { - const [a, b] = (event.info.coordinate as number[]).map(n => n * 1000) as [number, number]; + const [a, b] = (event.info.coordinate as number[]).map((n) => n * 1000) as [number, number]; const { position, viewSide, organDimensions } = this.model.snapshot; - const dims = [organDimensions.x, organDimensions.y, organDimensions.z].map(n => n / 2); + const dims = [organDimensions.x, organDimensions.y, organDimensions.z].map((n) => n / 2); let newPosition = position; switch (viewSide) { case 'anterior': diff --git a/apps/ccf-rui/src/app/modules/content/content.module.ts b/apps/ccf-rui/src/app/modules/content/content.module.ts index 167c47654..6e62bd9b3 100644 --- a/apps/ccf-rui/src/app/modules/content/content.module.ts +++ b/apps/ccf-rui/src/app/modules/content/content.module.ts @@ -4,11 +4,10 @@ import { MatRippleModule } from '@angular/material/core'; import { MatIconModule } from '@angular/material/icon'; import { BodyUiModule, StoreDebugModule } from 'ccf-shared'; +import { SpatialSearchKeyboardUIBehaviorModule } from 'ccf-shared'; import { ContentComponent } from '../content/content.component'; import { StageNavModule } from './stage-nav/stage-nav.module'; import { VideoModalLauncherModule } from './video-modal/video-modal-launcher/video-modal-launcher.module'; -import { SpatialSearchKeyboardUIBehaviorModule } from 'ccf-shared'; - @NgModule({ imports: [ @@ -19,9 +18,9 @@ import { SpatialSearchKeyboardUIBehaviorModule } from 'ccf-shared'; VideoModalLauncherModule, MatRippleModule, SpatialSearchKeyboardUIBehaviorModule, - BodyUiModule + BodyUiModule, ], declarations: [ContentComponent], - exports: [ContentComponent] + exports: [ContentComponent], }) -export class ContentModule { } +export class ContentModule {} diff --git a/apps/ccf-rui/src/app/modules/content/stage-nav/stage-nav.component.html b/apps/ccf-rui/src/app/modules/content/stage-nav/stage-nav.component.html index 3610c67b1..7c709865a 100644 --- a/apps/ccf-rui/src/app/modules/content/stage-nav/stage-nav.component.html +++ b/apps/ccf-rui/src/app/modules/content/stage-nav/stage-nav.component.html @@ -1,10 +1,14 @@ -