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
Merged

Get biggest z index of element #1437

merged 14 commits into from
Nov 30, 2022

Conversation

juliaroldi
Copy link
Contributor

@juliaroldi juliaroldi commented Nov 28, 2022

Add getBiggestZIndex api that search from an elements to it's root for the biggest z-index value.
In ImageEdit use getBiggestZIndex api to find the biggest index above the editor and add it plus one to the image wrapper.

zIndex

@juliaroldi juliaroldi marked this pull request as ready for review November 28, 2022 22:43
@juliaroldi juliaroldi requested review from JiuqingSong, BryanValverdeU, Andres-CT98 and ianeli1 and removed request for JiuqingSong November 28, 2022 22:43
* @param element the parent element
* @returns
*/
export default function getBiggestZIndex(element: HTMLElement) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

This function is now only used by image edit plugin, so let's put it there and no need to export, to reduce the size of dom package

const parent: HTMLElement | null = child?.parentElement;
if (parent) {
const parentZIndex = parent.style?.zIndex ? parseInt(parent.style.zIndex) : 0;
if (parentZIndex > zIndex) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

no, what we need is not the largest z index, but the last z index. e.g.

<body>
 <div zIndex = 1>
   <div zIndex = 100>
    ...

Although 1 < 100, but since 1 is the last zindex, we use it instead of 100

this.editor.getDocument().body.appendChild(this.zoomWrapper);
}

private getEditorDiv(editor: IEditor) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Let's try to avoid getting editor div directly. Plugin should not know editor DIV at all.

You can use editor.getScrollContainer() as the first element.

@juliaroldi juliaroldi marked this pull request as draft November 29, 2022 14:48
@juliaroldi juliaroldi marked this pull request as ready for review November 29, 2022 16:10
@@ -0,0 +1,22 @@
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.

*/
export default function getLatestZIndex(editorDiv: HTMLElement) {
let child: HTMLElement | null = editorDiv;
let zIndex = child.style.zIndex ? parseInt(child.style.zIndex) : 0;
Copy link
Collaborator

Choose a reason for hiding this comment

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

you can simplify this to something like:

let zIndex = 0;
while (child && getTagOfNode(child) != 'BODY') {
  if (child.style.zIndex) {
     zIndex = parseInt(child.style.zIndex);
  }
  child = child.parentElement;
}

@juliaroldi juliaroldi merged commit 2b379a7 into master Nov 30, 2022
@juliaroldi juliaroldi deleted the u/juliaroldi/z-index branch November 30, 2022 13:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants