diff --git a/apps/conv-learning-manager/src/assets/bg/dot-bg.jpg b/apps/conv-learning-manager/src/assets/bg/dot-bg.jpg new file mode 100644 index 0000000000..592bbda9d0 Binary files /dev/null and b/apps/conv-learning-manager/src/assets/bg/dot-bg.jpg differ diff --git a/libs/elements/layout/page-convl/src/lib/components/convl-sidemenu/convl-sidemenu.component.ts b/libs/elements/layout/page-convl/src/lib/components/convl-sidemenu/convl-sidemenu.component.ts index 3a4ec85a3d..1c5efbc28b 100644 --- a/libs/elements/layout/page-convl/src/lib/components/convl-sidemenu/convl-sidemenu.component.ts +++ b/libs/elements/layout/page-convl/src/lib/components/convl-sidemenu/convl-sidemenu.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewInit, Component, Inject, Input, OnDestroy } from '@angular/core'; import { Router } from '@angular/router'; import { SubSink } from 'subsink'; @@ -19,7 +19,7 @@ import { slideToggle, slideUp } from '../../providers/side-menu-constants.functi templateUrl: './convl-sidemenu.component.html', styleUrls: [ './convl-sidemenu.component.scss' ] }) -export class ConvlSideMenuComponent implements OnInit, OnDestroy +export class ConvlSideMenuComponent implements AfterViewInit, OnDestroy { private _sbS = new SubSink(); @@ -52,12 +52,6 @@ export class ConvlSideMenuComponent implements OnInit, OnDestroy ); } - ngOnInit() - { - this.projectName = this._env.project.name; - this.projectInfo = this._env.project.info; - } - ngAfterViewInit(): void { const featureName = this._router$$.url.split('/')[1]; diff --git a/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.html b/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.html index 904b72df18..9a570e2c37 100644 --- a/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.html +++ b/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.scss b/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.scss index c11f5796dc..22f03da213 100644 --- a/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.scss +++ b/libs/features/convs-mgr/modules/src/lib/components/modules-lessons-grid-view/modules-lessons-grid-view.component.scss @@ -1,6 +1,7 @@ .bot-cards { - display: grid; - gap: 20px; + display: flex; + gap: 40px; + flex-wrap: wrap; &.grid-evenly-spaced { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); @@ -21,6 +22,8 @@ background-color: white; border-radius: 10px; + min-width: 300px; + &::before { content: ''; position: absolute; diff --git a/libs/features/convs-mgr/stories/blocks/edit/blocks-edit/src/index.ts b/libs/features/convs-mgr/stories/blocks/edit/blocks-edit/src/index.ts index 4fba07a63c..cb271b835d 100644 --- a/libs/features/convs-mgr/stories/blocks/edit/blocks-edit/src/index.ts +++ b/libs/features/convs-mgr/stories/blocks/edit/blocks-edit/src/index.ts @@ -14,3 +14,4 @@ export * from './lib/components/video-input-block-edit/video-input-block-edit.co export * from './lib/components/image-input-block-edit/image-input-block-edit.component' export * from './lib/components/keyword-jump-block-edit/keyword-jump-block-edit.component'; export * from './lib/components/question-buttons-edit-forms/question-buttons-edit-forms.component' +export * from './lib/components/list-block-edit/list-block-edit.component'; diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts b/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts index fdca6ece12..fa0f2f2ebb 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts @@ -49,7 +49,7 @@ export class BlocksLibraryComponent implements OnInit, OnDestroy { { id: 'io-email-block', type: StoryBlockTypes.Email, message: 'Email', blockIcon: this.getBlockIcon(StoryBlockTypes.Email), blockCategory: 'questions-block' } as EmailMessageBlock, { id: 'io-phone-block', type: StoryBlockTypes.PhoneNumber, message: 'Phone', blockIcon: this.getBlockIcon(StoryBlockTypes.PhoneNumber), blockCategory: 'questions-block' } as PhoneMessageBlock, { id: 'input-video-block', type: StoryBlockTypes.Video, message: 'Video', blockIcon: this.getBlockIcon(StoryBlockTypes.Video), blockCategory: 'multimedia-block' } as VideoMessageBlock, - { id: 'input-sticker-block', type: StoryBlockTypes.Sticker, message: 'Sticker', blockIcon: this.getBlockIcon(StoryBlockTypes.Sticker), blockCategory: 'images-block' } as StickerMessageBlock, + // { id: 'input-sticker-block', type: StoryBlockTypes.Sticker, message: 'Sticker', blockIcon: this.getBlockIcon(StoryBlockTypes.Sticker), blockCategory: 'images-block' } as StickerMessageBlock, { id: 'io-list-block', type: StoryBlockTypes.List, message: 'List', blockIcon: this.getBlockIcon(StoryBlockTypes.List), blockCategory: 'questions-block' } as ListMessageBlock, // { id: 'input-reply-block', type: StoryBlockTypes.Reply, message: 'Reply', blockIcon: this.getBlockIcon(StoryBlockTypes.Reply) } as ReplyMessageBlock, { id: 'jump-story-block', type: StoryBlockTypes.JumpBlock, message: 'Jump', blockIcon: this.getBlockIcon(StoryBlockTypes.JumpBlock), blockCategory: 'questions-block' } as JumpBlock, diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html b/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html index 073c80e745..44ed63e50a 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.html @@ -1,25 +1,28 @@ + +
-
-
- + +
+ + +
+ +
+ +
-
\ No newline at end of file + +
+ + + diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss b/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss index 1d131c0f5a..36b4d7b9ab 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss @@ -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; } diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.ts b/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.ts index 0bf2cde7f4..2cba9cdc88 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.ts @@ -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; - @ViewChild('viewport', { read: ViewContainerRef, static: true }) viewport: ViewContainerRef; + private _sbS = new SubSink(); + + @ViewChild('editor') editorVC: ElementRef; + @ViewChild('viewport') viewport: ElementRef; + @ViewChild('draw', { read: ViewContainerRef, static: true }) drawArea: ViewContainerRef; @Output() frameLoaded = new EventEmitter; - @Output()pinchZoom = new EventEmitter() + @Output() zoomed = new EventEmitter(); + + + private _viewportBounds$$ = new BehaviorSubject(null as any as DOMRect); + /** Observable bounding box of the viewport */ + public viewportBounds$: Observable = 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(null as any as StoryEditorState); + public frameState$: Observable = 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(); } } diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.html b/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.html new file mode 100644 index 0000000000..28de2ba2d4 --- /dev/null +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.html @@ -0,0 +1,24 @@ +
+ + + + +
+ +
+
+ +
+ + +
+
+ +
+ diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.scss b/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.scss new file mode 100644 index 0000000000..c9b59f2069 --- /dev/null +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.scss @@ -0,0 +1,37 @@ +#minimap +{ + width: 100px; + height: 75px; + background-size: cover; + + position: absolute; + left: 10px; + bottom: 10px; + + box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25); + + z-index: 99999; + background-color: white; +} + +#viewport { + background-color: #ff000020; + border: 1px solid black; + display: block; +} + +.minimap-viewport-holder { + position:relative; + width: 100%; + height: 100%; +} + #viewport { + position: absolute; + z-index: 10; + } + +.block { + background-color: #444; + position: absolute; + z-index: 5; +} \ No newline at end of file diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.ts b/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.ts new file mode 100644 index 0000000000..bd7189a7f7 --- /dev/null +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/minimap/minimap.component.ts @@ -0,0 +1,101 @@ +import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; + +import { SubSink } from 'subsink'; +import { Observable, debounceTime } from 'rxjs'; //interval +// import html2canvas from 'dom-to-image'; + +import { StoryEditorState } from '@app/state/convs-mgr/story-editor'; +import { MINI_MAP_FACTOR } from '../../utils/frame-size'; + +@Component({ + selector: 'convl-story-editor-minimap', + templateUrl: './minimap.component.html', + styleUrls: ['./minimap.component.scss'] +}) +export class StoryEditorMiniMapComponent implements OnInit, OnDestroy +{ + private _sBs = new SubSink(); + + @Input() editorContainer: ElementRef; + + @Input() frameState$ : Observable; + @Input() viewport$ : Observable; + @Input() zoomFactor = 1; + + blocks: DOMRect[]; + + /** Base64 encoded background image */ + backgroundImg: string; + + /** Representation of the viewport within the larger editor frame */ + viewport: DOMRect; + + ngOnInit() + { + // Whenever the frame changes, take a screenshot of the frame div + // which acts as background image of the minimap. + // @see https://javascript.plainenglish.io/how-to-take-a-screenshot-of-a-div-with-javascript-641576de0f74 + // The above has strong performance issues. + + // -- Alternative approach, draw boxes for each block. + // TODO: Now all minimap-blocks have same dimensions. + // Possible optimalisation is to look at block type and draw approximate dimensions based on type. + // Or different colour per block type. + this._sBs.sink = + this.frameState$.subscribe(async (state) => + { + this.blocks = state.blocks.map(block => ({ + x: block.position.x/MINI_MAP_FACTOR, + y: block.position.y/MINI_MAP_FACTOR, + + width: 250/MINI_MAP_FACTOR, + height: 200/MINI_MAP_FACTOR + }) as DOMRect); + }); + + // @todo - this is a performance hog, needs to be optimised + // this._sBs.sink = + // interval(10000).subscribe(async () => { + // const el = this.editorContainer.nativeElement; + // // Take a screenshot of the frame div to use as background of the mini map. + // const viewpaneImg = await html2canvas.toJpeg(el, { quality: 0.1, height: STORY_EDITOR_HEIGHT * this.zoomFactor, width: STORY_EDITOR_WIDTH * this.zoomFactor }); + // this.backgroundImg = `url(${viewpaneImg})`; + // }); + + // Listen to viewport changes. + // Draw the viewport inside the minimap to show position + this.viewport$ + .pipe(debounceTime(10)) + .subscribe((viewport: DOMRect) => { + const { x, y, width, height } = viewport; + + // Apply transformation to downsize the viewport to be in line with the mini-map dimensions + this.viewport = { + x: x/MINI_MAP_FACTOR, + y: y/MINI_MAP_FACTOR, + + width: width/MINI_MAP_FACTOR, + height: height/MINI_MAP_FACTOR + } as DOMRect; + }); + } + + getPosition() + { + if(!this.viewport) + return ''; + + return { + position: 'absolute', + left: this.viewport.x * (1/this.zoomFactor) + 'px', + top: this.viewport.y * (1/this.zoomFactor) + 'px', + width: this.viewport.width * (1/this.zoomFactor) + 'px', + height: this.viewport.height * (1/this.zoomFactor) + 'px', + } as any; + } + + ngOnDestroy() + { + this._sBs.unsubscribe(); + } +} diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/pipes/block-category-pipe.pipe.ts b/libs/features/convs-mgr/stories/editor/src/lib/components/pipes/block-category-pipe.pipe.ts index 539875af2c..c7a0af0205 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/components/pipes/block-category-pipe.pipe.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/components/pipes/block-category-pipe.pipe.ts @@ -11,6 +11,6 @@ export class BlockCategoryPipe implements PipeTransform { return block.blockCategory === category; }); - return groupedBlocks + return groupedBlocks; } } diff --git a/libs/features/convs-mgr/stories/editor/src/lib/convl-story-editor.module.ts b/libs/features/convs-mgr/stories/editor/src/lib/convl-story-editor.module.ts index 4a6166ec7e..85f00210e2 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/convl-story-editor.module.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/convl-story-editor.module.ts @@ -32,6 +32,7 @@ import { PinchZoomDirective } from './directives/app-pinch-zoom.directive'; import { TrackCursorDirective } from './directives/track-cursor.directive'; import { BlockCategoryPipe } from './components/pipes/block-category-pipe.pipe'; +import { StoryEditorMiniMapComponent } from './components/minimap/minimap.component'; @@ -56,6 +57,7 @@ import { BlockCategoryPipe } from './components/pipes/block-category-pipe.pipe'; PinchZoomDirective, TrackCursorDirective, BlockCategoryPipe, + StoryEditorMiniMapComponent ], providers: [StoryEditorInitialiserService, ManageChannelStoryLinkService], diff --git a/libs/features/convs-mgr/stories/editor/src/lib/directives/app-pinch-zoom.directive.ts b/libs/features/convs-mgr/stories/editor/src/lib/directives/app-pinch-zoom.directive.ts index be75d0d594..6829bdde38 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/directives/app-pinch-zoom.directive.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/directives/app-pinch-zoom.directive.ts @@ -1,31 +1,24 @@ -import { clamp } from 'lodash'; -import { Directive, HostListener, Input, OnInit, Output } from '@angular/core'; -import { Subject } from 'rxjs'; +import { Directive, HostListener, Input, Output } from '@angular/core'; +import { Subject } from 'rxjs'; @Directive({ selector: '[convlPinchZoom]', }) -export class PinchZoomDirective implements OnInit { - @Input() scaleFactor = 0.03; - @Input() zoomThreshold = 2; - @Input() initialZoom = 1; +export class PinchZoomDirective +{ + //@Input() scaleFactor = 0.03; @Input() debounceTime = 100; // in ms - scale: number; @Output() pinch$: Subject = new Subject(); - ngOnInit(): void { - this.scale = this.initialZoom; - } + + @HostListener('wheel', ['$event']) onWheel($event: WheelEvent) { if (!$event.ctrlKey) return; $event.preventDefault(); - let scale = this.scale - $event.deltaY * this.scaleFactor; - scale = clamp(scale, 0.5, this.zoomThreshold); - this.calculatePinch(scale); - } - calculatePinch(scale: number) { - this.scale = scale; - this.pinch$.next(this.scale); + + const scale = $event.deltaY // * this.scaleFactor; + this.pinch$.next(scale); } + } diff --git a/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts b/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts index e64ca25c47..fd6cd5d5fb 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts @@ -1,4 +1,5 @@ import { v4 as uuidv4 } from 'uuid'; +import { BehaviorSubject, debounceTime, filter } from 'rxjs'; import { ElementRef, ViewContainerRef } from '@angular/core'; import { FormArray, FormBuilder } from '@angular/forms'; @@ -17,13 +18,15 @@ import { CreateDeleteButton, DeleteConnectorbyID } from '../providers/manage-jsP import { BlockConnectionsService } from '@app/state/convs-mgr/stories/block-connections'; import { Coordinate } from './coordinates.interface'; + /** * Model which holds the state of a story-editor. * * For each JsPlumb frame, an instance of this class is created which 1-on-1 manages the frame state. * Responsible for keeping track of editor data and for re-loading past saved states. */ -export class StoryEditorFrame { +export class StoryEditorFrame +{ loaded = false; private _state: StoryEditorState; @@ -33,15 +36,23 @@ export class StoryEditorFrame { private _connections: StoryBlockConnection[]; blocksArray: FormArray; - - constructor( - private _fb: FormBuilder, - private _jsPlumb: BrowserJsPlumbInstance, - private _blocksInjector: BlockInjectorService, - private _viewport: ViewContainerRef, - private _connectionsService: BlockConnectionsService, - private _edf: ElementRef - ) { + + + private _frameChanges$$: BehaviorSubject = new BehaviorSubject({ loading: true } as any as StoryEditorState); + /** Observable tracking the changes to frame state. Used in frontend rendering of the minimap, + * which takes a screenshot at each state change. */ + public frameChanges$ = this._frameChanges$$.pipe( + filter((state: any) => !state.loading), + debounceTime(500)); + + + constructor(private _fb: FormBuilder, + private _jsPlumb: BrowserJsPlumbInstance, + private _blocksInjector: BlockInjectorService, + private _viewport: ViewContainerRef, + private _connectionsService: BlockConnectionsService, + private _edf: ElementRef) + { this.loaded = true; } @@ -52,7 +63,8 @@ export class StoryEditorFrame { * @param story - Story visualised by the editor * @param blocks - Blocks to render on the story */ - async init(state: StoryEditorState) { + async init(state: StoryEditorState) + { this._state = state; this._story = state.story; this._blocks = state.blocks; @@ -75,18 +87,14 @@ export class StoryEditorFrame { this.drawBlocks(); - await new Promise((resolve) => setTimeout(() => resolve(true), 1000)); // gives some time for drawing to end + await new Promise((resolve) => setTimeout(() => resolve(true), 500)); // gives some time for drawing to end this.drawConnections(); //scroll to the middle of the screen when connections are done drawing // this.scroll(this._edf.nativeElement) - } - scroll(el: HTMLElement) { - const editorWidth = this._edf.nativeElement.offsetWidth / 2; - const editorHeight = this._edf.nativeElement.offsetHeight / 2; - el.scrollTo({top:editorHeight,left:editorWidth}); - // el.scrollIntoView({block: 'center', inline: 'center',behavior: 'smooth'}); + + this._frameChanges$$.next(state); } get jsPlumbInstance(): BrowserJsPlumbInstance { @@ -116,7 +124,8 @@ export class StoryEditorFrame { return this._injectBlockToFrame(block); } - createStartAnchor() { + createStartAnchor() + { const editorWidth = 100; const editorHeight = 100; const startAnchor = this._viewport.createComponent(AnchorBlockComponent); @@ -148,10 +157,10 @@ export class StoryEditorFrame { * Function which draw connections. * It draws the previously saved blocks on the screen. * Here we're perfoming a key feature of the frame which is drawing the existing - * connections from the connections collection - * + * connections from the connections collection */ - drawConnections() { + drawConnections() + { // returns a static NodeList representing a list of the document's elements // that match the specified selector. // here we're holding the elements in an array inorder to find the source @@ -228,6 +237,9 @@ export class StoryEditorFrame { }, }); } + + // Update the frame state listeners. + this._frameChanges$$.next(this._state); } /** @@ -255,6 +267,7 @@ export class StoryEditorFrame { } as StoryBlock; this._blocks.push(block); + return this._injectBlockToFrame(block); } @@ -263,15 +276,33 @@ export class StoryEditorFrame { * @see {BlockInjectorService} - package @app/features/convs-mgr/stories/blocks/library */ private _injectBlockToFrame(block: StoryBlock) { - return this._blocksInjector.newBlock( + const blck = this._blocksInjector.newBlock( block, this._jsPlumb, this._viewport, this.blocksArray ); + + // Update the frame state listeners. + this._frameChanges$$.next(this._state); + + return blck; } private _getID() { return uuidv4().slice(0, 8); } + + // Section -- Zoom management + + /** + * Set zoom level of the frame. + * + * @param zoom - Number between 0.25 and 1 that indicates the zoom + */ + public setZoom(zoom: number, repaint = false) + { + this._jsPlumb.setZoom(zoom, repaint); + } + } diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html index ae27a6143a..adc0f74a9a 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html +++ b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html @@ -1,21 +1,9 @@ + -
-
- - -
- +
@@ -32,34 +20,35 @@
+
-
- -
-
+
+ + + + +
- - + -
+
+
+ + @@ -78,9 +68,27 @@

{{'TOAST.ERROR-COUNT' | transloco}} {{errors.length}} {{'TOAST.ERRORS' | transloco}}

- +
+ + +
+ + +
\ No newline at end of file diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss index 7fade502e3..976542ba26 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss +++ b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss @@ -42,32 +42,11 @@ mat-sidenav { width: 80%; position: relative; - .toggle-btn { - position: absolute; - top: 10rem; - z-index: 999; - left: 1rem; - - button { - background-color: var(--endpoint-color); - border: none; - transition: transform 0.3s ease; - padding: 8px; - border-radius: 5px; - width: 3.5rem; - cursor: pointer; - color: var(--endpoint-outline); - - .tooltip { - font-size: 1.2rem; - } - } - } } .sub-bar { width: auto; - padding: 10px 5px; + padding: 10px; background-color: white; border-bottom: solid #eee 1px; // box-shadow: 0px 4px 8px slategrey; @@ -80,6 +59,22 @@ mat-sidenav { min-width: 100px; } + +.toggle-btn { + background-color: var(--endpoint-color); + border: none; + transition: transform 0.3s ease; + padding: 8px; + border-radius: 5px; + width: 3.5rem; + cursor: pointer; + color: var(--endpoint-outline); + + .tooltip { + font-size: 1.2rem; + } +} + .error-count{ color: #707070; text-align: right; @@ -134,3 +129,8 @@ mat-sidenav { ::ng-deep .mat-mini-fab .mat-button-wrapper { bottom: 0px; } + +// 30/10/23 - Fix bug where sub-bar is being pushed out of view by story editor load +convl-story-editor-frame { + overflow: hidden; +} \ No newline at end of file diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.ts b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.ts index 8de1816315..ed27f4ade3 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.ts @@ -1,19 +1,17 @@ -import { ChangeDetectorRef, Component, OnInit, OnDestroy, ComponentRef, Renderer2 } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, OnDestroy, ComponentRef, Renderer2, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; import { MatDialog } from '@angular/material/dialog'; import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal'; import { FormControl, FormGroup } from '@angular/forms'; import { SubSink } from 'subsink'; -import { BehaviorSubject, filter, Observable } from 'rxjs'; - -import { BrowserJsPlumbInstance, newInstance } from '@jsplumb/browser-ui'; +import { BehaviorSubject, filter, Observable, take } from 'rxjs'; import { Breadcrumb, Logger } from '@iote/bricks-angular'; import { StoryEditorState, StoryEditorStateService, CheckStoryErrorsService } from '@app/state/convs-mgr/story-editor'; -import { ErrorPromptModalComponent } from '@app/elements/layout/modals'; +import { SidemenuToggleService } from '@app/elements/layout/page-convl'; import { HOME_CRUMB, STORY_EDITOR_CRUMB } from '@app/elements/nav/convl/breadcrumbs'; import { ToastMessageTypeEnum, ToastStatus } from '@app/model/layout/toast'; @@ -26,6 +24,7 @@ import { BlockPortalService } from '../../providers/block-portal.service'; import { getActiveBlock } from '../../providers/fetch-active-block-component.function'; import { AddBotToChannelModal } from '../../modals/add-bot-to-channel-modal/add-bot-to-channel.modal'; +import { StoryEditorFrameComponent } from '../../components/editor-frame/editor-frame.component'; @Component({ @@ -45,6 +44,8 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy shownErrors: StoryError[] = []; toastType: ToastStatus = {type: ToastMessageTypeEnum.Error}; + @ViewChild('storyEditorFrame') storyEditorFrame: StoryEditorFrameComponent; + opened: boolean; pageName: string; @@ -62,11 +63,7 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy //TODO @CHESA LInk boolean to existence of story in DB storyHasBeenSaved = false; - zoomLevel: FormControl = new FormControl(100); - frameElement: HTMLElement; - frameZoom = 1; - frameZoomInstance: BrowserJsPlumbInstance; - + zoomLevel: FormControl = new FormControl({ value: 100, disabled: true}); constructor(private _editorStateService: StoryEditorStateService, private _dialog: MatDialog, @@ -74,14 +71,17 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy private _logger: Logger, private _blockPortalService: BlockPortalService, _router: Router, + private _sideMenu: SidemenuToggleService, private sideScreen: SideScreenToggleService, private _storyErrorCheck: CheckStoryErrorsService, private renderer: Renderer2 ) { + // Make sure screen is always closed on loading editor + this._sideMenu.toggleExpand(false); - - this._editorStateService.get() + // Load the editor + this._editorStateService.get().pipe(take(1)) .subscribe((state: StoryEditorState) => { this._logger.log(() => `Loaded editor for story ${state.story.id}. Logging state.`) @@ -94,6 +94,7 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy this.breadcrumbs = [HOME_CRUMB(_router), STORY_EDITOR_CRUMB(_router, story.id, story.name as string, true)]; this.loading.next(false); }); + } ngOnInit() @@ -141,46 +142,12 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy this.loading.pipe(filter(loading => !loading)) .subscribe(() => { this.frame.init(this.state); - this.setFrameZoom(); } ); this._cd.detectChanges(); } - - setFrameZoom() { - this.frameElement = document.getElementById('editor-frame') as HTMLElement; - this.frameZoomInstance = newInstance({ - container: this.frameElement - }) - this.zoom(this.frameZoom); - } - - // setZoomByPinch(value:number){ - // this.frameZoom=value - // this.zoom(this.frameZoom) - // } - - increaseFrameZoom() { - if (this.zoomLevel.value <= 100) this.zoom(this.frameZoom += 0.03); - } - - decreaseFrameZoom() { - if (this.zoomLevel.value > 25) this.zoom(this.frameZoom -= 0.03); - } - - zoom(frameZoom: number) { - this.frameElement.style.transform = `scale(${frameZoom})`; - this.frame.jsPlumbInstance.setZoom(frameZoom); - this.zoomLevel.setValue(Math.round(frameZoom / 1 * 100)); - } - - zoomChanged(event: any) { - const z = event.target.value / 100; - this.zoomLevel.setValue(z); - this.zoom(z); - } - + /** Save the changes made in the data model. */ save() { this.stateSaved = false; @@ -252,11 +219,13 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy this.scrollToBlock(error.blockId); break; - default: + default: + { const block = this.state.blocks.find(obj => obj.id === error.blockId); if (block) { this.scrollToBlock(block.id as string); } + } break; } } @@ -272,6 +241,39 @@ export class StoryEditorPageComponent implements OnInit, OnDestroy }, 5000); } + // Section - Zoom + + increaseZoom() { + if(this.zoomLevel.value >= 100) + return; + + const zoom = this.storyEditorFrame.increaseFrameZoom(); + return this.setZoom(zoom * 100, true); + } + decreaseZoom() { + if(this.zoomLevel.value <= 25) + return; + + const zoom = this.storyEditorFrame.decreaseFrameZoom(); + return this.setZoom(zoom * 100, true); + } + + /** + * + * @param val - Zoom value to set + * @param avoidUpdate - In case the call comes from internal ops such as increaseZoom or decreaseZoom, + * avoid updating the underlying structure as it already happened. + */ + setZoom(val: number, avoidUpdate = false) + { + if(val >= 25 && val <= 100) + { + this.zoomLevel.setValue(val); + if(!avoidUpdate) + this.storyEditorFrame.setFrameZoom(val / 100); + } + } + ngOnDestroy() { this._editorStateService.flush(); this._sb.unsubscribe(); diff --git a/libs/features/convs-mgr/stories/editor/src/lib/providers/fetch-active-block-component.function.ts b/libs/features/convs-mgr/stories/editor/src/lib/providers/fetch-active-block-component.function.ts index e4699d80cb..76aac553d8 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/providers/fetch-active-block-component.function.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/providers/fetch-active-block-component.function.ts @@ -1,6 +1,6 @@ import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main'; -import { QuestionButtonsEditFormsComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; +import { ListBlockEditComponent, QuestionButtonsEditFormsComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; import { LocationInputBlockEditComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; import { KeywordJumpBlockEditComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; import { OpenEndedQuestionEditComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; @@ -14,7 +14,7 @@ import { NameBlockEditComponent } from '@app/features/convs-mgr/stories/blocks/e import { PhoneBlockEditComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; import { WebhookEditComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; import { DefaultComponent } from '@app/features/convs-mgr/stories/blocks/edit/blocks-edit'; -import { ListBlockEditComponent } from 'libs/features/convs-mgr/stories/blocks/edit/blocks-edit/src/lib/components/list-block-edit/list-block-edit.component'; + export function getActiveBlock(type: StoryBlockTypes) { switch (type) { diff --git a/libs/features/convs-mgr/stories/editor/src/lib/providers/story-editor-initialiser.service.ts b/libs/features/convs-mgr/stories/editor/src/lib/providers/story-editor-initialiser.service.ts index 5108a52d3c..becd250d0a 100644 --- a/libs/features/convs-mgr/stories/editor/src/lib/providers/story-editor-initialiser.service.ts +++ b/libs/features/convs-mgr/stories/editor/src/lib/providers/story-editor-initialiser.service.ts @@ -1,7 +1,7 @@ import { ElementRef, Injectable, ViewContainerRef } from '@angular/core'; import { FormBuilder } from '@angular/forms'; -import { newInstance as initJsPlumb } from '@jsplumb/browser-ui'; +import { ContainmentType, newInstance as initJsPlumb } from '@jsplumb/browser-ui'; import { BlockInjectorService } from '@app/features/convs-mgr/stories/blocks/library/main'; @@ -10,26 +10,31 @@ import { BlockConnectionsService } from '@app/state/convs-mgr/stories/block-conn import { StoryEditorFrame } from '../model/story-editor-frame.model'; @Injectable() -export class StoryEditorInitialiserService { +export class StoryEditorInitialiserService +{ + constructor(private _fb: FormBuilder, - private _blocksInjector: BlockInjectorService, - private _connectionsService: BlockConnectionsService - ) { } + private _blocksInjector: BlockInjectorService, + private _connectionsService: BlockConnectionsService) + { } initialiseEditor(editorContainer: ElementRef, - viewport: ViewContainerRef) { + viewport: ViewContainerRef) + { // Get inner HTML element from reference const container = editorContainer.nativeElement; // Initialise div as a _jsPlumb instance const _jsplumb = initJsPlumb({ container, - + dragOptions:{ + containment: ContainmentType.parent + }, // paintStyle: { strokeWidth: 1 }, // anchors: [["Left", "Right", "Bottom"], ["Top", "Bottom"]], }); - _jsplumb.addClass(container, "jsplumb_instance") + _jsplumb.addClass(container, "jsplumb_instance"); return new StoryEditorFrame(this._fb, _jsplumb, this._blocksInjector, viewport, this._connectionsService, editorContainer); } diff --git a/libs/features/convs-mgr/stories/editor/src/lib/utils/frame-size.ts b/libs/features/convs-mgr/stories/editor/src/lib/utils/frame-size.ts new file mode 100644 index 0000000000..6b4c1ba5e0 --- /dev/null +++ b/libs/features/convs-mgr/stories/editor/src/lib/utils/frame-size.ts @@ -0,0 +1,26 @@ +// This file consists a set of consts to do with the story editor frame size. +// +// Adjustments made to this file will need to be reflected in CSS as well at the editor-frame +// @see libs/features/convs-mgr/stories/editor/src/lib/components/editor-frame/editor-frame.component.scss +// + +/** Max zoom out of the frame */ +export const MAX_ZOOM_LEVEL = 0.25; + +/** Width in pixels of the story editor */ +export const STORY_EDITOR_WIDTH = 5000; +/** Min width of the story editor assuming max applied zoom of 0.25 */ +export const MIN_STORY_EDITOR_WIDTH = STORY_EDITOR_WIDTH * MAX_ZOOM_LEVEL; + +/** Height in pixels of the story editor. Uses a 4:3 frame rate. */ +export const STORY_EDITOR_HEIGHT = 3750; +/** Min heifht of the story editor assuming applied zoom */ +export const MIN_STORY_EDITOR_HEIGHT = STORY_EDITOR_HEIGHT * MAX_ZOOM_LEVEL; + +/** Width in pixels of the mini map */ +export const MINI_MAP_WIDTH = 100; +/** Width in pixels of the mini map */ +export const MINI_MAP_HEIGHT = 75; + +/** How many pixels a single pixel on the mini map represents at the story editor level */ +export const MINI_MAP_FACTOR = STORY_EDITOR_WIDTH/MINI_MAP_WIDTH; diff --git a/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.html b/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.html index e7b28a1e13..da9ef2abbd 100644 --- a/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.html +++ b/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.html @@ -1,4 +1,5 @@ +
{{ 'BOTS.BOTS-PAGE.BOTS' | transloco }} @@ -11,9 +12,8 @@
- + +
@@ -22,9 +22,9 @@
- + +
+ diff --git a/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.ts b/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.ts index 4bb74a6bc5..79717af25a 100644 --- a/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.ts +++ b/libs/features/convs-mgr/stories/home/src/lib/pages/stories-dashboard/stories-dashboard.component.ts @@ -16,7 +16,8 @@ import { HOME_CRUMB } from '@app/elements/nav/convl/breadcrumbs'; templateUrl: './stories-dashboard.component.html', styleUrls: ['./stories-dashboard.component.scss'], }) -export class StoriesDashboardComponent implements OnInit { +export class StoriesDashboardComponent implements OnInit +{ title: string; breadcrumbs: Breadcrumb[] = []; @@ -25,10 +26,9 @@ export class StoriesDashboardComponent implements OnInit { loading = true; showAllCourses = false; - constructor( - private _botsServ$$: BotsStateService, - private _router$$: Router - ) { + constructor(private _botsServ$$: BotsStateService, + private _router$$: Router) + { this.breadcrumbs = [HOME_CRUMB(_router$$, true)]; } diff --git a/package.json b/package.json index 99c609f232..2b415cd71e 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@ngneat/transloco": "^4.1.0", "@nrwl/angular": "^14.4.2", "@popperjs/core": "^2.11.8", + "@types/dom-to-image": "^2.6.6", "@types/googlemaps": "^3.43.3", "@types/unzipper": "^0.10.6", "axios": "^0.27.2",