Skip to content

iteration through siblings #619

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

iteration through siblings #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
47f3b15
init
jalal246 Feb 25, 2023
66e6adc
wip
jalal246 Feb 25, 2023
42b42ae
wip
jalal246 Feb 25, 2023
d43865d
wip
jalal246 Feb 25, 2023
7017db0
wip
jalal246 Feb 26, 2023
d15a1cf
wip
jalal246 Feb 26, 2023
65025cd
init
jalal246 Feb 26, 2023
380e800
wip
jalal246 Feb 26, 2023
a8c804c
wip
jalal246 Feb 27, 2023
c154f50
wip
jalal246 Feb 27, 2023
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
189 changes: 102 additions & 87 deletions packages/dflex-core-instance/src/Element/DFlexCoreElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@ export interface DFlexElementInput {
readonly: boolean;
}

function resetDOMStyle(DOM: HTMLElement): void {
DOM.style.removeProperty("transform");

if (!DOM.getAttribute("style")) {
DOM.removeAttribute("style");
}
}

class DFlexCoreElement extends DFlexBaseElement {
private _initialPosition: PointNum;

Expand Down Expand Up @@ -127,23 +135,6 @@ class DFlexCoreElement extends DFlexBaseElement {
this.rect.setByPointAndDimensions(top, left, height, width);
}

private _updateCurrentIndicators(newPos: AxesPoint): void {
this.translate!.increase(newPos);

/**
* This offset related directly to translate Y and Y. It's isolated from
* element current offset and effects only top and left.
*/
this.rect.setAxes(
this._initialPosition.x + this.translate!.x,
this._initialPosition.y + this.translate!.y
);

if (!this.isVisible) {
this.hasPendingTransform = true;
}
}

getDimensions(DOM: HTMLElement): PointNum {
if (this._computedDimensions) {
return this._computedDimensions;
Expand Down Expand Up @@ -185,23 +176,27 @@ class DFlexCoreElement extends DFlexBaseElement {
this.isVisible = isVisible;

if (this.hasPendingTransform && this.isVisible) {
this.transform(DOM);
this._transform(DOM);
this.hasPendingTransform = false;
}
}

transform(DOM: HTMLElement): void {
private _transform(DOM: HTMLElement, cb?: () => void): void {
if (this.animatedFrame !== null) {
cancelAnimationFrame(this.animatedFrame);
}

this.animatedFrame = requestAnimationFrame(() => {
DFlexCoreElement.transform(DOM, this.translate!.x, this.translate!.y);
DFlexCoreElement.transform(DOM, this.translate.x, this.translate.y);

if (this.hasPendingTransform) {
this.hasPendingTransform = false;
}

if (cb) {
cb();
}

this.animatedFrame = null;
});
}
Expand All @@ -211,17 +206,7 @@ class DFlexCoreElement extends DFlexBaseElement {
this.VDOMOrder.self = i;
}

private _updateOrderIndexing(DOM: HTMLElement, i: number) {
const { self: oldIndex } = this.VDOMOrder;

const newIndex = oldIndex + i;

this.updateIndex(DOM, newIndex);

return { oldIndex, newIndex };
}

assignNewPosition(branchIDsOrder: string[], newIndex: number): void {
assignNewIndex(branchIDsOrder: string[], newIndex: number): void {
if (newIndex < 0 || newIndex > branchIDsOrder.length - 1) {
if (__DEV__) {
// eslint-disable-next-line no-console
Expand Down Expand Up @@ -252,7 +237,7 @@ class DFlexCoreElement extends DFlexBaseElement {
branchIDsOrder[newIndex] = this.id;
}

private _leaveToNewPosition(
private _leaveToNewIndex(
branchIDsOrder: string[],
newIndex: number,
oldIndex: number
Expand All @@ -262,40 +247,34 @@ class DFlexCoreElement extends DFlexBaseElement {
branchIDsOrder[newIndex] = this.id;
}

/**
* Set a new translate position and store the old one.
*/
private _seTranslate(
axis: Axes,
DOM: HTMLElement,
elmPos: AxesPoint,
operationID?: string,
hasToFlushTransform = false
): void {
if (operationID) {
const elmAxesHistory: TransitionHistory = {
ID: operationID,
axis,
translate: { x: this.translate!.x, y: this.translate!.y },
};

if (Array.isArray(this._translateHistory)) {
this._translateHistory.push(elmAxesHistory);
} else {
this._translateHistory = [elmAxesHistory];
}
private _pushToTranslateHistory(axis: Axes, operationID: string) {
const translate = this.translate.getInstance();

const elmAxesHistory: TransitionHistory = {
ID: operationID,
axis,
translate,
};

if (!Array.isArray(this._translateHistory)) {
this._translateHistory = [];
}

this._updateCurrentIndicators(elmPos);
this._translateHistory.push(elmAxesHistory);
}

private _transformOrPend(
DOM: HTMLElement,
hasToFlushTransform: boolean
): void {
if (hasToFlushTransform) {
if (!this.isVisible && this.hasPendingTransform) {
this.hasPendingTransform = false;

return;
}

this.transform(DOM);
this._transform(DOM);

return;
}
Expand All @@ -306,7 +285,35 @@ class DFlexCoreElement extends DFlexBaseElement {
return;
}

this.transform(DOM);
this._transform(DOM);
}

private _transformationProcess(
DOM: HTMLElement,
newPos: AxesPoint,
hasToFlushTransform: boolean,
increment: number
) {
this.translate.increase(newPos);

/**
* This offset related directly to translate Y and Y. It's isolated from
* element current offset and effects only top and left.
*/
this.rect.setAxes(
this._initialPosition.x + this.translate.x,
this._initialPosition.y + this.translate.y
);

this._transformOrPend(DOM, hasToFlushTransform);

const { self: oldIndex } = this.VDOMOrder;

const newIndex = oldIndex + increment;

this.updateIndex(DOM, newIndex);

return { oldIndex, newIndex };
}

/**
Expand Down Expand Up @@ -338,10 +345,12 @@ class DFlexCoreElement extends DFlexBaseElement {
elmPos[axis] *= direction;
}

this._seTranslate(axis, DOM, elmPos, operationID);
this._pushToTranslateHistory(axis, operationID);

const { oldIndex, newIndex } = this._updateOrderIndexing(
const { oldIndex, newIndex } = this._transformationProcess(
DOM,
elmPos,
false,
direction * numberOfPassedElm
);

Expand All @@ -352,7 +361,7 @@ class DFlexCoreElement extends DFlexBaseElement {
this.DOMGrid[axis] += direction * numberOfPassedElm;
}

this._leaveToNewPosition(siblings, newIndex, oldIndex);
this._leaveToNewIndex(siblings, newIndex, oldIndex);

if (__DEV__) {
if (featureFlags.enablePositionAssertion) {
Expand All @@ -365,40 +374,40 @@ class DFlexCoreElement extends DFlexBaseElement {
}
}

hasTransformed(): boolean {
return (
Array.isArray(this._translateHistory) && this._translateHistory.length > 0
);
}
restorePosition(DOM: HTMLElement): void {
this._transform(DOM);

hasTransformedFromOrigin(): boolean {
return this._initialPosition.isNotEqual(this.rect.left, this.rect.top);
this.setAttribute(DOM, "INDEX", this.VDOMOrder.self);
}

needDOMReconciliation(): boolean {
return this.VDOMOrder.self !== this.DOMOrder.self;
assignNewPosition(DOM: HTMLElement, t: PointNum): void {
this.translate.clone(t);
this._transform(DOM);
}

/**
* Roll back element position.
*
* @param cycleID
*/
rollBack(DOM: HTMLElement, cycleID: string): void {
if (
!this.hasTransformed() ||
this._translateHistory![this._translateHistory!.length - 1].ID !== cycleID
) {
rollBackPosition(DOM: HTMLElement, cycleID: string): void {
if (!Array.isArray(this._translateHistory)) {
return;
}

const lastMovement = this._translateHistory!.pop()!;
const { length } = this._translateHistory;

const stillInSameCycle = this._translateHistory[length - 1].ID === cycleID;

if (!stillInSameCycle) {
return;
}

const { translate: preTranslate, axis } = lastMovement;
const { translate: preTranslate, axis } = this._translateHistory.pop()!;

const elmPos = {
x: preTranslate.x - this.translate!.x,
y: preTranslate.y - this.translate!.y,
x: preTranslate.x - this.translate.x,
y: preTranslate.y - this.translate.y,
};

let increment = 0;
Expand All @@ -413,12 +422,22 @@ class DFlexCoreElement extends DFlexBaseElement {
this.DOMGrid[axis] += increment;
}

// Don't update UI if it's zero and wasn't transformed.
this._seTranslate(axis, DOM, elmPos, undefined, true);
this._transformationProcess(DOM, elmPos, true, increment);

this._updateOrderIndexing(DOM, increment);
if (this._translateHistory.length === 0) {
this._translateHistory = undefined;
return;
}

this.rollBack(DOM, cycleID);
this.rollBackPosition(DOM, cycleID);
}

hasTransformedFromOrigin(): boolean {
return this._initialPosition.isNotEqual(this.rect.left, this.rect.top);
}

needDOMReconciliation(): boolean {
return this.VDOMOrder.self !== this.DOMOrder.self;
}

refreshIndicators(DOM: HTMLElement): void {
Expand All @@ -430,11 +449,7 @@ class DFlexCoreElement extends DFlexBaseElement {

this.DOMOrder.self = this.VDOMOrder.self;

DOM.style.removeProperty("transform");

if (!DOM.getAttribute("style")) {
DOM.removeAttribute("style");
}
resetDOMStyle(DOM);

this.initElmRect(DOM);

Expand Down
10 changes: 4 additions & 6 deletions packages/dflex-dnd/src/Draggable/DraggableInteractive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,16 +136,15 @@ class DraggableInteractive extends DraggableAxes {
* don't like it but it is what it is.
*/
if (siblings[VDOMOrder.self] !== id) {
this.draggedElm.assignNewPosition(siblings, VDOMOrder.self);
this.draggedElm.assignNewIndex(siblings, VDOMOrder.self);
}

// If it didn't move, then do nothing.
if (translate.isInstanceEqual(this.translatePlaceholder)) {
return;
}

this.draggedElm.transform(draggedDOM);
this.draggedElm.setAttribute(draggedDOM, "INDEX", VDOMOrder.self);
this.draggedElm.restorePosition(draggedDOM);

return;
}
Expand All @@ -167,13 +166,12 @@ class DraggableInteractive extends DraggableAxes {

VDOMOrder.self = index;

this.draggedElm.assignNewPosition(siblings, index);
this.draggedElm.assignNewIndex(siblings, index);

// If it's going to reconcile to the DOM then there's no need to update the
// transformation here.
if (!willReconcile) {
translate.clone(this.occupiedTranslate);
this.draggedElm.transform(draggedDOM);
this.draggedElm.assignNewPosition(draggedDOM, this.occupiedTranslate);
}
}

Expand Down
Loading