Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(edit-page-v2): Add scroll while dragging content inside editor #28419

Merged
merged 9 commits into from
May 8, 2024
Merged

chore(edit-page-v2): Add scroll while dragging content inside editor #28419

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8e2ab33
WIP - Draft
kevindaviladev May 2, 2024
31fd317
PR Suggestions 1
kevindaviladev May 3, 2024
43b75f1
Removed pointer on dropzone on scrolling
kevindaviladev May 3, 2024
776c801
Added tests to scroll in drag
kevindaviladev May 6, 2024
ce9cc70
Moved render conditionals to store
kevindaviladev May 6, 2024
2d9246a
Changed executor to unify and minify sdk-editor js file
kevindaviladev May 7, 2024
d41d40c
PR Suggestions - Moved logic from editor component to editor store
kevindaviladev May 7, 2024
38811df
Merged manually with master to resolve conflicts
kevindaviladev May 7, 2024
03c6477
Fix test
kevindaviladev May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Open in desktop
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
Open in desktop
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),
zJaaal marked this conversation as resolved.
Show resolved Hide resolved
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: []
};
});
KevinDavilaDotCMS marked this conversation as resolved.
Show resolved Hide resolved

/**
* 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
Open in desktop
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
Open in desktop
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
Loading