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.

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

Get biggest z index of element #1437

Merged
merged 14 commits into from
Nov 30, 2022
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import DragAndDropContext, { DNDDirectionX, DnDDirectionY } from './types/DragAn
import DragAndDropHandler from '../../pluginUtils/DragAndDropHandler';
import DragAndDropHelper from '../../pluginUtils/DragAndDropHelper';
import getGeneratedImageSize from './editInfoUtils/getGeneratedImageSize';
import getLatestZIndex from './editInfoUtils/getLastZIndex';
import ImageEditInfo from './types/ImageEditInfo';
import ImageHtmlOptions from './types/ImageHtmlOptions';
import { Cropper, getCropHTML } from './imageEditors/Cropper';
@@ -374,7 +375,7 @@ export default class ImageEdit implements EditorPlugin {
}
});

this.insertImageWrapper(this.image, this.wrapper, this.editor.getZoomScale());
this.insertImageWrapper(this.editor, this.image, this.wrapper, this.editor.getZoomScale());
}

private toggleImageVisibility(image: HTMLImageElement, showImage: boolean) {
@@ -407,8 +408,14 @@ export default class ImageEdit implements EditorPlugin {
return element;
}

private insertImageWrapper(image: HTMLImageElement, wrapper: HTMLSpanElement, scale: number) {
private insertImageWrapper(
editor: IEditor,
image: HTMLImageElement,
wrapper: HTMLSpanElement,
scale: number
) {
this.zoomWrapper = this.copyImageSize(image, this.createZoomWrapper(wrapper, scale));
this.zoomWrapper.style.zIndex = `${getLatestZIndex(editor.getScrollContainer()) + 1}`;
this.editor.getDocument().body.appendChild(this.zoomWrapper);
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { getTagOfNode } from 'roosterjs-editor-dom';

/**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add "@internal" in comment

I need to check why the build tool doesn't fail since "@internal" is required here.

* @internal
* Search through from editor div to it's root for the latest z-index value
* @param editorDiv the editor div element
* @returns the z index value
*/
export default function getLatestZIndex(editorDiv: HTMLElement) {
let child: HTMLElement | null = editorDiv;
let zIndex = 0;
while (child && getTagOfNode(child) !== 'BODY') {
if (child.style.zIndex) {
zIndex = parseInt(child.style.zIndex);
}
child = child.parentElement;
}
return zIndex;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import getLatestZIndex from '../../lib/plugins/ImageEdit/editInfoUtils/getLastZIndex';

describe('getLatestZIndex', () => {
function runTest(element: HTMLElement, expected: number) {
const result = getLatestZIndex(element);
expect(result).toBe(expected);
}

it('should return parentNode zIndex', () => {
const div = document.createElement('div');
div.style.zIndex = '20';
const span = document.createElement('span');
span.style.zIndex = '10';
div.appendChild(span);
runTest(span, 20);
});

it('should return child zIndex', () => {
const div = document.createElement('div');
const span = document.createElement('span');
span.style.zIndex = '30';
div.appendChild(span);
runTest(span, 30);
});

it('should return middle element zIndex', () => {
const div = document.createElement('div');
const spanParent = document.createElement('div');
spanParent.style.zIndex = '30';
div.appendChild(spanParent);
const span = document.createElement('span');
span.style.zIndex = '20';
spanParent.appendChild(span);
runTest(span, 30);
});
});