0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the sticky layout of Attribute View rows (#9655)

Browse source 
* Improve the sticky layout of Attribute View rows

* revert: action.ts

* fix: the issue of trailing cell abnormal width
This commit is contained in:
Yingyi / 颖逸 2023-11-15 09:02:17 +08:00 • committed by GitHub
parent cc98f68997
commit 5862811d96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 306 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/src/assets/scss/business/_av.scss
View file

@ -140,10 +140,12 @@
&--header,
&--footer {
background-color: var(--av-background);
position: relative;
z-index: 2;
}
&--footer {
display: flex;
display: inline-flex;
border-top: 1px solid var(--b3-theme-surface-lighter);
color: var(--b3-theme-on-surface);
position: relative;

12
app/src/protyle/render/av/render.ts
View file

@ -7,6 +7,7 @@ import {unicode2Emoji} from "../../../emoji";
import {focusBlock} from "../../util/selection";
import {isMac} from "../../util/compatibility";
import {hasClosestByClassName} from "../../util/hasClosest";
import {avScroll} from "./scroll";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
let avElements: Element[] = [];
@ -41,8 +42,6 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
e.firstElementChild.innerHTML = html;
}
const left = e.querySelector(".av__scroll")?.scrollLeft || 0;
const headerTransform = (e.querySelector(".av__row--header") as HTMLElement)?.style.transform;
const footerTransform = (e.querySelector(".av__row--footer") as HTMLElement)?.style.transform;
let selectCellId = "";
const selectCellElement = e.querySelector(".av__cell--select") as HTMLElement;
if (selectCellElement) {
@ -222,7 +221,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
<div class="av__counter fn__none"></div>
</div>
<div class="av__scroll">
<div style="float: left;">
<div class="av__body">
${tableHTML}
<div class="av__row--add">
<div class="av__colsticky">
@ -240,12 +239,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
if (left) {
e.querySelector(".av__scroll").scrollLeft = left;
}
if (headerTransform) {
(e.querySelector(".av__row--header") as HTMLElement).style.transform = headerTransform;
}
if (footerTransform) {
(e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform;
}
avScroll(protyle.contentElement, e);
if (selectCellId) {
const newCellElement = e.querySelector(`.av__row[data-id="${selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${selectCellId.split(Constants.ZWSP)[1]}"]`);
if (newCellElement) {

20
app/src/protyle/render/av/scroll.ts Normal file
View file

@ -0,0 +1,20 @@
import {stickyScrollY} from "../../scroll/stickyScroll";
export const avScroll = (
contentElement: HTMLElement,
nodeElement: HTMLElement,
) => {
const bodyElement = nodeElement.querySelector(".av__body") as HTMLElement;
if (bodyElement) {
const headerElement = bodyElement.querySelector(".av__row--header") as HTMLElement;
const footerElement = bodyElement.querySelector(".av__row--footer") as HTMLElement;
stickyScrollY(
contentElement,
bodyElement,
headerElement ? [{element: headerElement}] : [],
footerElement ? [{element: footerElement}] : [],
);
}
}

28
app/src/protyle/scroll/event.ts
View file

@ -4,6 +4,7 @@ import {fetchPost} from "../../util/fetch";
import {onGet} from "../util/onGet";
import {isMobile} from "../../util/functions";
import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest";
import {avScroll} from "../render/av/scroll";
let getIndexTimeout: number;
export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
@ -21,32 +22,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
}
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
if (item.dataset.render !== "true") {
return;
}
const scrollRect = item.querySelector(".av__scroll").getBoundingClientRect();
const headerElement = item.querySelector(".av__row--header") as HTMLElement;
if (headerElement) {
const distance = Math.floor(elementRect.top - scrollRect.top);
if (distance > 0 && distance < scrollRect.height) {
headerElement.style.transform = `translateY(${distance}px)`;
} else {
headerElement.style.transform = "";
}
}
const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
if (footerElement) {
if (footerElement.querySelector(".av__calc--ashow")) {
const distance = Math.floor(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom);
if (distance < 0 && -distance < scrollRect.height) {
footerElement.style.transform = `translateY(${distance}px)`;
} else {
footerElement.style.transform = "";
}
} else {
footerElement.style.transform = "";
}
}
avScroll(element, item);
});
if (!protyle.element.classList.contains("block__edit") && !isMobile()) {

276
app/src/protyle/scroll/stickyScroll.ts Normal file
View file

@ -0,0 +1,276 @@
export interface IStickyPositionY {
top: number;
bottom: number;
}
export interface IStickyElementY {
element: HTMLElement;
offset?: number;
}
export interface IStickyContextY extends IStickyElementY {
rect: DOMRect;
base: number;
origin: IStickyPositionY;
current: IStickyPositionY;
target: IStickyPositionY;
style: IStickyPositionY;
}
export const stickyScrollY = (
view: HTMLElement, // 视口元素
container: HTMLElement, // 容器元素
topElements: IStickyElementY[] = [], // 顶部粘性元素
bottomElements: IStickyElementY[] = [], // 底部粘性元素
) => {
if (topElements.length === 0 && bottomElements.length === 0) {
return;
}
const viewRect = view.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
/**
* ┏---------------┓
* | view |
* ┗---------------┛ → viewRect.bottom
* ┌-----------┐ --→ containerRect.top
* | container |
* └-----------┘
* ====== OR ======
* ┌-----------┐
* | container |
* └-----------┘ --→ containerRect.bottom
* ┏---------------┓ → viewRect.top
* | view |
* ┗---------------┛
*/
if (viewRect.bottom <= containerRect.top || containerRect.bottom <= viewRect.top) {
return;
}
const topContext: IStickyContextY[] = topElements.map(item => {
const rect = item.element.getBoundingClientRect();
const base = Number.parseFloat(item.element.style.top) || 0;
item.offset ??= 0;
return {
...item,
rect,
base,
origin: {
top: rect.top - base,
bottom: rect.bottom - base,
},
current: {
top: rect.top,
bottom: rect.bottom,
},
target: {
top: null,
bottom: null,
},
style: {
top: null,
bottom: null,
}
};
});
const bottomContext: IStickyContextY[] = bottomElements.map(item => {
const rect = item.element.getBoundingClientRect();
const base = Number.parseFloat(item.element.style.bottom) || 0;
item.offset ??= 0;
return {
...item,
rect,
base,
origin: {
top: rect.top + base,
bottom: rect.bottom + base,
},
current: {
top: rect.top,
bottom: rect.bottom,
},
target: {
top: null,
bottom: null,
},
style: {
top: null,
bottom: null,
}
};
});
let handleTop = false;
let handleBottom = false;
switch (true) {
/**
* ┏---------------┓ → viewRect.top
* | |
* | view |
* | ┌-----------┐ | → containerRect.top
* ┗-╊-----------╊-┛ → viewRect.bottom
* | container |
* └-----------┘ --→ containerRect.bottom
*/
case viewRect.top <= containerRect.top
&& containerRect.top <= viewRect.bottom
&& viewRect.top <= viewRect.bottom:
handleBottom = true;
break;
/**
* ┏---------------┓ → viewRect.top
* | view |
* | ┌-----------┐ | → containerRect.top
* | | container | |
* | └-----------┘ | → containerRect.bottom
* ┗---------------┛ → viewRect.bottom
*/
case viewRect.top <= containerRect.top
&& containerRect.bottom <= viewRect.bottom:
break;
/**
* ┌-----------┐ --→ containerRect.top
* ┏-╊-----------╊-┓ → viewRect.top
* | | | |}→ view
* ┗-╊-----------╊-┛ → viewRect.bottom
* | container |
* └-----------┘ --→ containerRect.bottom
*/
case containerRect.top <= viewRect.top
&& viewRect.bottom <= containerRect.bottom:
handleTop = true;
handleBottom = true;
break;
/**
* ┌-----------┐ --→ containerRect.top
* | container |
* ┏-╊-----------╊-┓ → viewRect.top
* | └-----------┘ | → containerRect.bottom
* | view |
* ┗-|-----------|-┛ → viewRect.bottom
*/
case containerRect.top <= viewRect.top
&& viewRect.top <= containerRect.bottom
&& containerRect.bottom <= viewRect.bottom:
handleTop = true;
break;
default:
break;
}
if (handleTop) {
if (topContext.length > 0) {
topContext.reduceRight((next, current) => {
switch (true) {
/**
* ┌-----------┐ --→ containerRect.top
* ┏-╊-----------╊-┓ → viewRect.top
* | | ┌┄┄┄┄┄┄┄┐ | | → current.target.top - current.offset
* | | ├╌╌╌╌╌╌╌┤ | | → current.origin.top
* | | └╌╌╌╌╌╌╌┘ | | → current.origin.bottom
* | | ┌╌╌╌╌╌╌╌┐ | | → next.origin.top
* | | └╌╌╌╌╌╌╌┘ | | → next.origin.bottom
* ┗-╊-----------╊-┛ → viewRect.bottom
* └-----------┘ --→ containerRect.bottom
*/
case viewRect.top <= (current.origin.top - current.offset):
current.target.top = current.origin.top;
current.target.bottom = current.origin.bottom;
current.style.top = null;
break;
/**
* ┌-----------┐ --→ containerRect.top
* | ┌╌╌╌╌╌╌╌┐ | --→ current.origin.top
* | └╌╌╌╌╌╌╌┘ | --→ current.origin.bottom
* ┏-╊-----------╊-┓ → viewRect.top
* | | ┌-------┐ | | → current.target.top
* | | └-------┘ | | → current.target.bottom
* ┗-╊-----------╊-┛ → viewRect.bottom
* | container |
* └-----------┘ --→ containerRect.bottom
*/
default:
current.target.top = viewRect.top + current.offset;
current.target.bottom = current.target.top + current.rect.height;
const nextTop = next
? Math.min(next.target.top, next.origin.top, containerRect.bottom)
: containerRect.bottom;
if (nextTop < current.target.bottom) {
const diff = nextTop - current.target.bottom;
current.target.top += diff;
current.target.bottom += diff;
}
current.style.top = current.base + (current.target.top - current.current.top);
break;
}
return current;
}, null);
}
}
if (handleBottom) {
if (bottomContext.length > 0) {
bottomContext.reduce((last, current) => {
switch (true) {
/**
* ┌-----------┐ --→ containerRect.top
* ┏-╊-----------╊-┓ → viewRect.top
* | | ┌╌╌╌╌╌╌╌┐ | | → last.origin.top
* | | └╌╌╌╌╌╌╌┘ | | → last.origin.bottom
* | | ┌╌╌╌╌╌╌╌┐ | | → current.origin.top
* | | ├╌╌╌╌╌╌╌┤ | | → current.origin.bottom
* | | └┄┄┄┄┄┄┄┘ | | → current.target.bottom + current.offset
* ┗-╊-----------╊-┛ → viewRect.bottom
* └-----------┘ --→ containerRect.bottom
*/
case (current.origin.bottom + current.offset) <= viewRect.bottom:
current.target.top = current.origin.top;
current.target.bottom = current.origin.bottom;
current.style.bottom = null;
break;
/**
* ┌-----------┐ --→ containerRect.top
* ┏-╊-----------╊-┓ → viewRect.top
* | | ┌-------┐ | | → current.target.top
* | | └-------┘ | | → current.target.bottom
* ┗-╊-----------╊-┛ → viewRect.bottom
* | ┌╌╌╌╌╌╌╌┐ | --→ current.origin.top
* | └╌╌╌╌╌╌╌┘ | --→ current.origin.bottom
* | container |
* └-----------┘ --→ containerRect.bottom
*/
default:
current.target.bottom = viewRect.bottom - current.offset;
current.target.top = current.target.bottom - current.rect.height;
const lastBottom = last
? Math.max(last.target.bottom, last.origin.bottom, containerRect.top)
: containerRect.top;
if (current.target.top < lastBottom) {
const diff = lastBottom - current.target.top;
current.target.top += diff;
current.target.bottom += diff;
}
current.style.bottom = current.base - (current.target.bottom - current.current.bottom);
break;
}
return current;
}, null);
}
}
[...topContext, ...bottomContext].forEach(item => {
item.element.style.top = item.style.top ? `${item.style.top}px` : null;
item.element.style.bottom = item.style.bottom ? `${item.style.bottom}px` : null;
});
}

2
app/src/protyle/wysiwyg/index.ts
View file

@ -77,6 +77,7 @@ import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar
import {commonClick} from "./commonClick";
import {avClick, avContextmenu, updateAVName} from "../render/av/action";
import {updateHeader} from "../render/av/row";
import {avScroll} from "../render/av/scroll";
export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};
@ -389,6 +390,7 @@ export class WYSIWYG {
scrollElement.querySelectorAll(".av__row, .av__row--footer").forEach(item => {
(item.querySelector(`[data-col-id="${dragColId}"]`) as HTMLElement).style.width = newWidth;
});
avScroll(protyle.contentElement, nodeElement);
}
};