forked from monginadiana/italanta-apps
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
25 changed files
with
583 additions
and
249 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...les/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 26 additions & 23 deletions
49
...ures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,28 @@ | ||
| <!-- Block editing till after proper load --> | ||
| <div id="loader" *ngIf="loading"><mat-progress-bar mode="indeterminate"></mat-progress-bar></div> | ||
|
|
||
| <div | ||
| id="frame-bg" | ||
| class="frame-bg" | ||
| fxLayout="column" | ||
| fxLayoutALign="start" | ||
| fxFlexFill | ||
| convlPinchZoom | ||
| (pinch$)="onPinch($event)" | ||
|
|
||
| > | ||
| <div | ||
| infinite-scroll | ||
| [scrollWindow]="true" | ||
| [horizontal]="true" | ||
| [infiniteScrollContainer]="editorVC" | ||
| [fromRoot]="false" | ||
| convlTrackCursor | ||
| [infiniteScrollDistance]="9" | ||
| [infiniteScrollThrottle]="150" | ||
| (scrolled)="onScroll()" | ||
| #editor id="editor-frame" style="position: relative" fxFlex="95"> | ||
| <ng-template id="viewport" #viewport></ng-template> | ||
| <!-- Viewport, what the user is seeing --> | ||
| <div id="viewport" class="frame-bg" fxLayout="column" fxLayoutALign="start" | ||
| #viewport | ||
| (scroll)="viewPortScrolled()" | ||
| (window:resize)="viewPortScrolled()" | ||
|
|
||
| convlPinchZoom | ||
| (pinch$)="onPinch($event)" > | ||
|
|
||
| <!-- Scroll control. Dynamically adjusts scroll based on frame zoom --> | ||
| <div id="scroll" [style.width]="frameWidth + 'px'" [style.min-height]="frameHeight + 'px'"> | ||
| <!-- Full frame, the total area on which a user can draw. --> | ||
| <div convlTrackCursor | ||
| #editor id="editor-frame"> | ||
| <ng-template id="draw" #draw></ng-template> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <convl-story-editor-minimap [editorContainer]="editorVC" | ||
| [frameState$]="frameState$" | ||
| [viewport$]="viewportBounds$" | ||
| [zoomFactor]="_zoom"> | ||
| </convl-story-editor-minimap> |
75 changes: 34 additions & 41 deletions
75
...ures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,40 @@ | ||
| #editor-frame { | ||
| min-height: 20000px!important; | ||
| min-width: 20000px!important; | ||
| overflow-y: scroll!important; | ||
| overflow-x: scroll!important; | ||
| } | ||
| .spinner{ | ||
| background-color: white; | ||
| min-height: 2000px!important; | ||
| min-width: 2000px!important; | ||
| position: sticky!important; | ||
| bottom: 0; | ||
| right: 0; | ||
| z-index: 2000; | ||
| } | ||
| mat-spinner { | ||
| position: sticky!important; | ||
| top: 30%; | ||
| left: 30%; | ||
| } | ||
| #viewport { | ||
| height: 100%; | ||
| width: 100%; | ||
| overflow: auto; | ||
| overflow-y: scroll; | ||
| overflow-x: scroll; | ||
|
|
||
| #editor-frame .block { | ||
| position: absolute; | ||
| background-color: darkgray; | ||
| } | ||
|
|
||
| .block { | ||
| text-align: center; | ||
| cursor: move; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: absolute; | ||
| } | ||
| #scroll { | ||
| overflow: hidden; | ||
| display: block; | ||
| } | ||
|
|
||
| app-message-block { | ||
| position: relative; | ||
| } | ||
| // Make sure the values here are the same as defined in ../../utils/frame-size.ts ! | ||
| #editor-frame { | ||
| min-width: 5000px; | ||
| min-height: 3750px; | ||
|
|
||
| background-image: url(^/assets/bg/dot-bg.jpg); | ||
| background-repeat: repeat; | ||
|
|
||
| -webkit-box-shadow: 0px 0px 5px 0px #888; | ||
| box-shadow: 0px 0px 5px 0px #888; | ||
| transform-origin: 0 0; | ||
| } | ||
|
|
||
|
|
||
| #loader { | ||
| height: 100%; | ||
| width: 100%; | ||
| background-color: #00000020; | ||
|
|
||
| position: absolute; | ||
| left: 0; | ||
| bottom: 0; | ||
|
|
||
| .frame-bg { | ||
| background-color: white; | ||
| background: papayawhip; | ||
| background-image: url(^/assets/bg/pattern-bg.png); | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| overflow: scroll; | ||
| position: fixed; | ||
| z-index: 9999999999999999; | ||
| } |
130 changes: 120 additions & 10 deletions
130
...atures/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,144 @@ | ||
| import { AfterViewInit, Component, ElementRef, Output, EventEmitter, ViewChild, ViewContainerRef } from '@angular/core'; | ||
| import { StoryEditorFrame } from '../../model/story-editor-frame.model'; | ||
| import { AfterViewInit, Component, ElementRef, Output, EventEmitter, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core'; | ||
| import { BehaviorSubject, Observable, debounceTime, filter } from 'rxjs'; | ||
|
|
||
| import { StoryEditorState } from '@app/state/convs-mgr/story-editor'; | ||
|
|
||
| import { StoryEditorFrame } from '../../model/story-editor-frame.model'; | ||
| import { StoryEditorInitialiserService } from '../../providers/story-editor-initialiser.service'; | ||
| import { SubSink } from 'subsink'; | ||
| import { STORY_EDITOR_HEIGHT, STORY_EDITOR_WIDTH } from '../../utils/frame-size'; | ||
|
|
||
| @Component({ | ||
| selector: 'convl-story-editor-frame', | ||
| templateUrl: './editor-frame.component.html', | ||
| styleUrls: ['./editor-frame.component.scss'] | ||
| }) | ||
| export class StoryEditorFrameComponent implements AfterViewInit //implements OnDestroy | ||
| export class StoryEditorFrameComponent implements AfterViewInit, OnDestroy //implements OnDestroy | ||
| { | ||
| @ViewChild('editor') editorVC: ElementRef<HTMLElement>; | ||
| @ViewChild('viewport', { read: ViewContainerRef, static: true }) viewport: ViewContainerRef; | ||
| private _sbS = new SubSink(); | ||
|
|
||
| @ViewChild('editor') editorVC: ElementRef<HTMLElement>; | ||
| @ViewChild('viewport') viewport: ElementRef<HTMLElement>; | ||
| @ViewChild('draw', { read: ViewContainerRef, static: true }) drawArea: ViewContainerRef; | ||
|
|
||
| @Output() frameLoaded = new EventEmitter<StoryEditorFrame>; | ||
| @Output()pinchZoom = new EventEmitter<number>() | ||
| @Output() zoomed = new EventEmitter<number>(); | ||
|
|
||
|
|
||
| private _viewportBounds$$ = new BehaviorSubject<DOMRect>(null as any as DOMRect); | ||
| /** Observable bounding box of the viewport */ | ||
| public viewportBounds$: Observable<DOMRect> = this._viewportBounds$$.pipe(filter(f => !!f)); | ||
|
|
||
| // Set frame width and height at minimum on load. | ||
| _zoom = 1; | ||
| frameWidth = STORY_EDITOR_WIDTH; | ||
| frameHeight = STORY_EDITOR_HEIGHT; | ||
|
|
||
| private _frame: StoryEditorFrame; | ||
| private _frameState$$ = new BehaviorSubject<StoryEditorState>(null as any as StoryEditorState); | ||
| public frameState$: Observable<StoryEditorState> = this._frameState$$.pipe(filter(f => !!f)); | ||
|
|
||
| loading = true; | ||
|
|
||
| constructor(private _frameInitialiser: StoryEditorInitialiserService) { } | ||
|
|
||
|
|
||
| ngAfterViewInit() { | ||
| const frame = this._frameInitialiser.initialiseEditor(this.editorVC, this.viewport); | ||
| this._frame = this._frameInitialiser.initialiseEditor(this.editorVC, this.drawArea); | ||
|
|
||
| // Transfer listener for frame state changes. | ||
| // This transfer is necessary as the listener is initialised async and | ||
| // can thus be null in the child components in case they render too fast. | ||
| // Debounce 1 second for performance issues | ||
| this._sbS.sink = | ||
| this._frame.frameChanges$ | ||
| .pipe(debounceTime(1000)) | ||
| .subscribe(f => | ||
| { | ||
| if(f) | ||
| this._frameState$$.next(f); | ||
|
|
||
| this.viewPortScrolled(); | ||
|
|
||
| // Release loading state after 1 second cooldown to avoid loading delays | ||
| if(this.loading) setTimeout(() => this.loading = false, 1000); | ||
| }); | ||
|
|
||
| this.frameLoaded.emit(frame); | ||
| this.frameLoaded.emit(this._frame); | ||
| this._applyZoom(); | ||
| } | ||
|
|
||
| viewPortScrolled(): void | ||
| { | ||
| const editorPosition = this.editorVC.nativeElement.getBoundingClientRect(); | ||
| const viewportDimensions = this.viewport.nativeElement.getBoundingClientRect(); | ||
|
|
||
| const viewportBounds = { | ||
| x: viewportDimensions.x - editorPosition.x, | ||
| y: viewportDimensions.y - editorPosition.y, | ||
| width: viewportDimensions.width, | ||
| height: viewportDimensions.height | ||
| } as DOMRect; | ||
|
|
||
| onScroll(): void { } | ||
| this._viewportBounds$$.next(viewportBounds); | ||
| } | ||
|
|
||
| // | ||
| // SECTION - ZOOM | ||
|
|
||
| onPinch(level:number){ | ||
| this.pinchZoom.emit(level) | ||
| return level < 0 ? this.increaseFrameZoom() : this.decreaseFrameZoom(); | ||
| } | ||
|
|
||
| /** Increase the frame zoom size */ | ||
| increaseFrameZoom() { | ||
| if (this._zoom < 1) | ||
| { | ||
| this._zoom = this._zoom += 0.03; | ||
| this._applyZoom(); | ||
| } | ||
|
|
||
| return this._zoom; | ||
| } | ||
|
|
||
| /** Decrease the frame zoom size */ | ||
| decreaseFrameZoom() { | ||
| if (this._zoom >= 0.25) | ||
| { | ||
| this._zoom = this._zoom -= 0.03; | ||
| this._applyZoom(); | ||
| } | ||
| return this._zoom; | ||
| } | ||
|
|
||
| /** Apply a zoom to the story editor */ | ||
| setFrameZoom(value: number) { | ||
| if(value >= 0.25 && value <= 1) | ||
| { | ||
| this._zoom = value; | ||
| this._applyZoom(); | ||
| } | ||
|
|
||
| return this._zoom; | ||
| } | ||
|
|
||
| private _applyZoom(repaint = false) | ||
| { | ||
| // this.viewport.nativeElement.style.transform = `scale(${this._zoom})`; | ||
| this.editorVC.nativeElement.style.transform = `scale(${this._zoom})`; | ||
| this._frame.setZoom(this._zoom); | ||
|
|
||
| // Apply bounding box transformations | ||
| this.frameWidth = STORY_EDITOR_WIDTH * this._zoom; | ||
| this.frameHeight = STORY_EDITOR_HEIGHT * this._zoom; | ||
|
|
||
| this.zoomed.emit(this._zoom); | ||
| } | ||
|
|
||
| // SECTION - CLEANUP | ||
| // | ||
|
|
||
| ngOnDestroy(): void { | ||
| this._sbS.unsubscribe(); | ||
| } | ||
| } |
24 changes: 24 additions & 0 deletions
24
libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <div id="minimap" | ||
| [style.transform]="'scale('+ zoomFactor +')'"> | ||
|
|
||
| <!-- TODO: show dynamic background. Requires performance fix. --> | ||
| <!-- *ngIf="backgroundImg" [style.background-image]="backgroundImg" --> | ||
|
|
||
| <div class="minimap-viewport-holder"> | ||
|
|
||
| <div id="viewport" *ngIf="viewport" | ||
| [ngStyle]="getPosition()"> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- display blocks --> | ||
| <div *ngFor="let block of blocks" class="block" | ||
| [style.left]="block.x + 'px'" | ||
| [style.top]="block.y + 'px'" | ||
| [style.width]="block.width + 'px'" | ||
| [style.height]="block.height + 'px'"> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
Oops, something went wrong.