Skip to content

Commit

Permalink
chore(edit-page-v2): Add scroll while dragging content inside editor (#…
Browse files Browse the repository at this point in the history 
…28419)

* WIP - Draft

* PR Suggestions 1

* Removed pointer on dropzone on scrolling

* Added tests to scroll in drag

* Moved render conditionals to store

* Changed executor to unify and minify sdk-editor js file

* PR Suggestions - Moved logic from editor component to editor store

* Fix test

---------

Co-authored-by: KevinDavilaDotCMS <[email protected]>
  • Loading branch information
@KevinDavilaDotCMS @kevindaviladev
KevinDavilaDotCMS and kevindaviladev authored May 8, 2024
1 parent c02b4a1 commit 2dbee6a
Show file tree
Hide file tree
Showing 16 changed files with 363 additions and 422 deletions.
90 changes: 79 additions & 11 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {

import { EditEmaStore } from './dot-ema.store';

import { EmaDragItem } from '../../edit-ema-editor/components/ema-page-dropzone/types';
import { DotPageApiResponse, DotPageApiService } from '../../services/dot-page-api.service';
import { DEFAULT_PERSONA, MOCK_RESPONSE_HEADLESS } from '../../shared/consts';
import { EDITOR_MODE, EDITOR_STATE } from '../../shared/enums';
Expand Down Expand Up @@ -188,7 +189,11 @@ describe('EditEmaStore', () => {
lockedByUser: ''
},
variantId: undefined
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: true
});
done();
});
Expand Down Expand Up @@ -241,7 +246,11 @@ describe('EditEmaStore', () => {
variantId: undefined
},
showWorkflowActions: true,
showInfoDisplay: false
showInfoDisplay: false,
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: true
});
done();
});
Expand Down Expand Up @@ -292,7 +301,11 @@ describe('EditEmaStore', () => {
lockedByUser: ''
},
variantId: undefined
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: false
});
done();
});
Expand Down Expand Up @@ -333,7 +346,11 @@ describe('EditEmaStore', () => {
isLocked: false,
lockedByUser: ''
}
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: false
});
done();
});
Expand Down Expand Up @@ -374,7 +391,11 @@ describe('EditEmaStore', () => {
isLocked: false,
lockedByUser: ''
}
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: false
});
done();
});
Expand Down Expand Up @@ -415,7 +436,11 @@ describe('EditEmaStore', () => {
isLocked: false,
lockedByUser: ''
}
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: true
});
done();
});
Expand All @@ -425,7 +450,9 @@ describe('EditEmaStore', () => {
spectator.service.contentState$.subscribe((state) => {
expect(state).toEqual({
state: EDITOR_STATE.IDLE,
code: undefined
code: undefined,
isVTL: false,
changedFromLoading: true
});
done();
});
Expand Down Expand Up @@ -498,7 +525,38 @@ describe('EditEmaStore', () => {
isLocked: false,
lockedByUser: ''
}
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: true
});
done();
});
});

it('should update editor state to idle when dont have dragItem', (done) => {
spectator.service.updateEditorScrollState();

spectator.service.editorState$.subscribe((state) => {
expect(state).toEqual({
...state,
bounds: [],
state: EDITOR_STATE.IDLE
});
done();
});
});

it('should update editor state to dragginf when have dragItem', (done) => {
spectator.service.setDragItem({} as EmaDragItem);
spectator.service.updateEditorScrollState();

spectator.service.editorState$.subscribe((state) => {
expect(state).toEqual({
...state,
bounds: [],
state: EDITOR_STATE.DRAGGING
});
done();
});
Expand Down Expand Up @@ -974,7 +1032,11 @@ describe('EditEmaStore', () => {
lockedByUser: ''
},
variantId: undefined
}
},
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: true
});
done();
});
Expand All @@ -984,7 +1046,9 @@ describe('EditEmaStore', () => {
spectator.service.contentState$.subscribe((state) => {
expect(state).toEqual({
state: EDITOR_STATE.IDLE,
code: '<html><body><h1>Hello, World!</h1></body></html>'
code: '<html><body><h1>Hello, World!</h1></body></html>',
isVTL: true,
changedFromLoading: true
});
done();
});
Expand Down Expand Up @@ -1017,7 +1081,11 @@ describe('EditEmaStore', () => {
},
variantId: undefined
},
currentExperiment: null
currentExperiment: null,
dragItem: undefined,
showContentletTools: false,
showDropzone: false,
showPalette: true
});
done();
});
Expand Down
90 changes: 84 additions & 6 deletions core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,17 @@ import { Injectable } from '@angular/core';

import { MessageService } from 'primeng/api';

import { catchError, map, shareReplay, switchMap, take, tap } from 'rxjs/operators';
import {
catchError,
map,
pairwise,
shareReplay,
startWith,
switchMap,
take,
tap,
filter
} from 'rxjs/operators';

import {
DotContentletLockerService,
Expand Down Expand Up @@ -200,10 +210,28 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
readonly editorMode$ = this.select((state) => state.editorData.mode);
readonly editorData$ = this.select((state) => state.editorData);
readonly pageRendered$ = this.select((state) => state.editor.page.rendered);
readonly contentState$ = this.select(this.code$, this.stateLoad$, (code, state) => ({
state,
code
}));

readonly contentState$ = this.select(
this.code$,
this.stateLoad$,
this.clientHost$,
(code, state, clientHost) => ({
state,
code,
isVTL: !clientHost
})
).pipe(
startWith({ state: EDITOR_STATE.LOADING, code: '', isVTL: false }),
pairwise(),
filter(([_prev, curr]) => curr?.state === EDITOR_STATE.IDLE),
map(([prev, curr]) => ({
changedFromLoading: prev.state === EDITOR_STATE.LOADING,
isVTL: curr.isVTL,
code: curr.code,
state: curr.state
}))
);

readonly vtlIframePage$ = this.select(
this.pageRendered$,
this.isEnterpriseLicense$,
Expand Down Expand Up @@ -259,7 +287,27 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
iframeURL,
isEnterpriseLicense,
state: currentState,
dragItem
dragItem,
showContentletTools:
editorData.canEditVariant &&
!!contentletArea &&
!editorData.device &&
editor.page.canEdit &&
(currentState === EDITOR_STATE.IDLE ||
currentState === EDITOR_STATE.DRAGGING) &&
!editorData.page.isLocked,
showDropzone:
editorData.canEditVariant &&
!editorData.device &&
(currentState === EDITOR_STATE.DRAGGING ||
currentState === EDITOR_STATE.SCROLLING),
showPalette:
editorData.canEditVariant &&
isEnterpriseLicense &&
(editorData.mode === EDITOR_MODE.EDIT ||
editorData.mode === EDITOR_MODE.EDIT_VARIANT ||
editorData.mode === EDITOR_MODE.INLINE_EDITING) &&
editor.page.canEdit
};
}
);
Expand Down Expand Up @@ -319,6 +367,9 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
dragItem
}));

readonly isUserDragging$ = this.select((state) => state.editorState).pipe(
filter((state) => state === EDITOR_STATE.DRAGGING)
);
/**
* Concurrently loads page and license data to updat the state.
*
Expand Down Expand Up @@ -677,6 +728,19 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
editorState
}));

/**
* Update the editor state to scroll
*
* @memberof EditEmaStore
*/
readonly setScrollingState = this.updater((state) => {
return {
...state,
editorState: EDITOR_STATE.SCROLLING,
bounds: []
};
});

/**
* Update the preview state
*
Expand All @@ -693,6 +757,20 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
};
});

/**
* Updates the editor scroll state in the dot-ema store.
* If a drag item is present, we assume that scrolling was done during a drag and drop, and the state will automatically change to dragging.
* if there is no dragItem, we change the state to IDLE
*
* @returns The updated dot-ema store state.
*/
readonly updateEditorScrollState = this.updater((state) => {
return {
...state,
editorState: state.dragItem ? EDITOR_STATE.DRAGGING : EDITOR_STATE.IDLE
};
});

readonly setDevice = this.updater((state, device: DotDevice) => {
return {
...state,
Expand Down
3 changes: 3 additions & 0 deletions ...let/src/lib/edit-ema-editor/components/ema-page-dropzone/ema-page-dropzone.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@
context: { error: container | dotError : dragItem, container: container }
"></ng-container>
</div>

@if (containers.length > 0) {
<div class="pointer" [ngStyle]="pointerPosition"></div>
}

<ng-template #errorTemplate let-error="error" let-container="container">
<div
Expand Down
25 changes: 3 additions & 22 deletions ...web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,7 @@
mode="indeterminate"></p-progressBar>

<dot-ema-contentlet-tools
*ngIf="
es.editorData.canEditVariant &&
!!es.contentletArea &&
!es.editorData.device &&
es.editor.page.canEdit &&
(es.state === editorState.IDLE || es.state === editorState.DRAGGING) &&
!es.editorData.page.isLocked
"
*ngIf="es.showContentletTools"
[hide]="es.state === editorState.DRAGGING"
[contentletArea]="es.contentletArea"
(edit)="handleEditContentlet($event)"
Expand All @@ -70,27 +63,15 @@
(addContent)="dialog.addContentlet($event)"
data-testId="contentlet-tools" />
<dot-ema-page-dropzone
*ngIf="
es.editorData.canEditVariant &&
!!es.bounds.length &&
!es.editorData.device &&
es.state === editorState.DRAGGING
"
*ngIf="es.showDropzone"
[containers]="es.bounds"
[dragItem]="es.dragItem"
data-testId="dropzone" />
</div>
</div>

<dot-edit-ema-palette
*ngIf="
es.editorData.canEditVariant &&
es.isEnterpriseLicense &&
(es.editorData.mode === editorMode.EDIT ||
es.editorData.mode === editorMode.EDIT_VARIANT ||
es.editorData.mode === editorMode.INLINE_EDITING) &&
es.editor.page.canEdit
"
*ngIf="es.showPalette"
[languageId]="es.editor.viewAs.language.id"
[containers]="es.editor.containers"
data-testId="palette" />
Expand Down
Loading

0 comments on commit 2dbee6a

Please sign in to comment.