Skip to content

fix: filter non visible areas after indices array slice #451

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

Merged
Jefiozie merged 2 commits into from
Sep 2, 2024
Merged

fix: filter non visible areas after indices array slice #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecc58c3
fix: filter non visible areas after indices array slice
Harpush Aug 23, 2024
b7ef228
Merge branch 'main' into fix-visibility-check-in-move-calculation
Jefiozie Sep 2, 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
54 changes: 54 additions & 0 deletions cypress/e2e/10.toggle.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/// <reference types="Cypress" />

import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'

context('Toggling DOM and visibility example page tests', () => {
const W = 1076
const H = 150
const GUTTER = 15

beforeEach(() => {
cy.visit('/examples/toggling-dom-and-visibility')
})

it('Display initial state', () => {
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [348.66, 348.66, 348.66])
})

it('Hide first area and move gutter', () => {
getVisibilityButton(0).click()
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 530.5, 530.5])

moveGutterByMouse('.as-split-gutter', 1, 50, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 580.5, 480.5])

moveGutterByMouse('.as-split-gutter', 1, -100, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 480.5, 580.5])
})

it('Hide mid area and move gutter', () => {
getVisibilityButton(1).click()
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [530.5, 0, 530.5])

moveGutterByMouse('.as-split-gutter', 0, 50, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [580.5, 0, 480.5])

moveGutterByMouse('.as-split-gutter', 0, -100, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [480.5, 0, 580.5])
})

it('Hide last area and move gutter', () => {
getVisibilityButton(2).click()
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [530.5, 530.5, 0])

moveGutterByMouse('.as-split-gutter', 0, 50, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [580.5, 480.5, 0])

moveGutterByMouse('.as-split-gutter', 0, -100, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [480.5, 580.5, 0])
})
})

function getVisibilityButton(index) {
return cy.get('.btn-group:first').find('> .btn').eq(index)
}
12 changes: 5 additions & 7 deletions cypress/support/splitUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,10 @@ export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) {

//////////////////////////////////////////

export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
cy.log(`-- NEW SPLIT CHECK (${dir},${w},${h},${gutter})`)
export function checkSplitDirAndSizes(el, dir, w, h, gutterOrGutters, sizes) {
const gutters = Array.isArray(gutterOrGutters) ? gutterOrGutters : new Array(sizes.length - 1).fill(gutterOrGutters)

// Before real test, check if values provided are ok !
const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1)
// expect(total).to.eq((dir === 'horizontal') ? w : h);
cy.log(`-- NEW SPLIT CHECK (${dir},${w},${h},[${gutters.join(',')}],[${sizes.join(',')}])`)

const propGridDir = dir === 'vertical' ? 'grid-template-rows' : 'grid-template-columns'
cy.get(el).should('have.css', propGridDir).should('include', ' ')
Expand All @@ -75,10 +73,10 @@ export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {

cy.get(`${el} > .as-split-gutter`).should('have.length', sizes.length - 1)

cy.get(`${el} > .as-split-gutter`).then(($el) => {
cy.get(`${el} > .as-split-gutter`).each(($el, index) => {
const rect = $el[0].getBoundingClientRect()

expect(rect[propSize]).to.be.eq(gutter)
expect(rect[propSize]).to.be.eq(gutters[index])
expect(round(rect[propSize2])).to.be.eq(round(propValue2))
})

Expand Down
11 changes: 7 additions & 4 deletions projects/angular-split/src/lib/split/split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,15 +521,18 @@ export class SplitComponent {
const tempAreasPixelSizes = [...dragStartContext.areasPixelSizes]
// As we are going to shuffle the areas order for easier iterations we should work with area indices array
// instead of actual area sizes array.
// We must also remove the invisible ones as we can't expand or shrink them.
const areasIndices = tempAreasPixelSizes.map((_, index) => index).filter((index) => this._areas()[index].visible())
const areasIndices = tempAreasPixelSizes.map((_, index) => index)
// The two variables below are ordered for iterations with real area indices inside.
// We must also remove the invisible ones as we can't expand or shrink them.
const areasIndicesBeforeGutter = this.restrictMove()
? [dragStartContext.areaBeforeGutterIndex]
: areasIndices.slice(0, dragStartContext.areaBeforeGutterIndex + 1).reverse()
: areasIndices
.slice(0, dragStartContext.areaBeforeGutterIndex + 1)
.filter((index) => this._areas()[index].visible())
.reverse()
const areasIndicesAfterGutter = this.restrictMove()
? [dragStartContext.areaAfterGutterIndex]
: areasIndices.slice(dragStartContext.areaAfterGutterIndex)
: areasIndices.slice(dragStartContext.areaAfterGutterIndex).filter((index) => this._areas()[index].visible())
// Based on direction we need to decide which areas are expanding and which are shrinking
const potentialAreasIndicesArrToShrink = isDraggingForward ? areasIndicesAfterGutter : areasIndicesBeforeGutter
const potentialAreasIndicesArrToExpand = isDraggingForward ? areasIndicesBeforeGutter : areasIndicesAfterGutter
Expand Down