Skip to content

feat: modernize angular split #444

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 14 commits into from
Jul 10, 2024
Merged

feat: modernize angular split #444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f36da15
feat: modernize angular split
Harpush May 27, 2024
45db74b
fix: typo, left click check not needed
Harpush Jun 12, 2024
5fc3aa9
fix: force gutter events cancellation when inputs change affects sizes
Harpush Jun 12, 2024
b06ea6d
fix: remove not needed take inside takeUntil
Harpush Jun 12, 2024
15f2f11
fix: pack inputs together
Harpush Jun 12, 2024
28002a2
fix: add min/max classes only when area visible
Harpush Jun 12, 2024
cedf889
fix: normalize min/max size based on outer size
Harpush Jun 12, 2024
2f30982
fix: typos
Harpush Jun 12, 2024
bff7d73
fix: delta check with custom gutter
Harpush Jun 12, 2024
f55e174
feat: merge and apply css variables
Harpush Jun 12, 2024
fe906b4
Revert "fix: force gutter events cancellation when inputs change affe…
Harpush Jun 12, 2024
8d6d10d
fix: minor fixes (typos, unused code)
Harpush Jun 15, 2024
4ee3e27
feat: support hierarchical inheritance in options
Harpush Jun 16, 2024
19502de
fix: typo in config token comment
Harpush Jun 21, 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
30 changes: 19 additions & 11 deletions cypress/e2e/7.click.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,32 @@ context('Gutter click example page tests', () => {

it('Click gutters to switch area sizes between 0 and X', () => {
cy.get('.as-split-gutter').eq(0).click()
cy.wait(1500)
cy.wait(2000)
Copy link
Member

@Jefiozie Jefiozie Jun 20, 2024

Choose a reason for hiding this comment

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

WHy is this change needed for cypress?

Copy link
Collaborator Author

@Harpush Harpush Jun 20, 2024

Choose a reason for hiding this comment

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

I can't seem to figure out how it worked before. The transition is 1.5s and the delay is 1.5s. When running live it works well but fails in CI run.
At 1500 it fails on 9 pixels instead of 0
At 1600 it fails on 5 pixels instead of 0
At 2000 it passes

Not sure what to do about it...

checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 792, 264])
cy.wait(10)

cy.get('.as-split-gutter').eq(0).click()
cy.wait(1500)
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [264, 528, 264])
cy.wait(10)

cy.get('.as-split-gutter').eq(0).click()
cy.wait(1500)
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 792, 264])
cy.wait(10)

cy.get('.as-split-gutter').eq(1).click()
cy.wait(1500)
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1056, 0])
cy.wait(10)

cy.get('.as-split-gutter').eq(0).click()
cy.wait(1500)
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [264, 792, 0])
cy.wait(10)

cy.get('.as-split-gutter').eq(1).click()
cy.wait(1500)
cy.wait(2000)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [264, 528, 264])
cy.wait(10)

Expand Down Expand Up @@ -123,7 +123,7 @@ context('Gutter click example page tests', () => {
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 4, transitionEndCount: 4 })

// It should fire Click Event on mouseup if the mouse cursor is not moved.
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0, button: 0 })
cy.get('.as-split-gutter').eq(0).trigger('mousemove', { which: 1, clientX: 0, clientY: 0 })
cy.wait(10)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 4, transitionEndCount: 4 })
Expand All @@ -132,15 +132,23 @@ context('Gutter click example page tests', () => {
cy.wait(2000)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 5, transitionEndCount: 5 })

// It should fire dragStart and should not fire Click Event on mousemove if the mouse cursor is moved.
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
// It should fire click only when moved inside delta (2 pixels)
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0, button: 0 })
cy.get('.as-split-gutter').eq(0).trigger('mousemove', { which: 1, clientX: 1, clientY: 0 })
cy.wait(10)
checkEventCount({ dragStartCount: 3, dragEndCount: 2, gutterClickCount: 5, transitionEndCount: 5 })
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 5, transitionEndCount: 5 })
cy.get('.as-split-gutter').eq(0).trigger('mouseup', { which: 1, clientX: 0, clientY: 0 })
cy.wait(20)
checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 6, transitionEndCount: 6 })

// It should fire drag start and end only when moved outside delta (2 pixels)
cy.get('.as-split-gutter').eq(0).trigger('mousedown', { which: 1, clientX: 0, clientY: 0, button: 0 })
cy.get('.as-split-gutter').eq(0).trigger('mousemove', { which: 1, clientX: 3, clientY: 0 })
cy.wait(10)
checkEventCount({ dragStartCount: 3, dragEndCount: 2, gutterClickCount: 6, transitionEndCount: 6 })
cy.get('.as-split-gutter').eq(0).trigger('mouseup', { which: 1, clientX: 0, clientY: 0 })
cy.wait(20)
checkEventCount({ dragStartCount: 3, dragEndCount: 3, gutterClickCount: 5, transitionEndCount: 5 })
checkEventCount({ dragStartCount: 3, dragEndCount: 3, gutterClickCount: 6, transitionEndCount: 6 })
})

it('Test double click event', () => {
Expand Down
12 changes: 6 additions & 6 deletions cypress/e2e/9.geek.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,16 +242,16 @@ context('Geek demo example page tests', () => {
// SET gutterStep to 10px
cy.get('.opts-prop').contains('Gutter step:').parent().contains('10').click()

// Move gutter 5px > no move
moveGutterByMouse('.split-example .as-split-gutter', 0, 5, 0)
// Move gutter 4px > no move
moveGutterByMouse('.split-example .as-split-gutter', 0, 4, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [268.484375, 522, 263.5])

// Move gutter 6px > move 10px
moveGutterByMouse('.split-example .as-split-gutter', 0, 6, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [278.5, 511.984375, 263.5])

// Move gutter 15px > move 10px
moveGutterByMouse('.split-example .as-split-gutter', 0, 15, 0)
// Move gutter 14px > move 10px
moveGutterByMouse('.split-example .as-split-gutter', 0, 14, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [288.515625, 501.984375, 263.5])

// Move gutter 16px > move 20px
Expand All @@ -266,8 +266,8 @@ context('Geek demo example page tests', () => {
moveGutterByMouse('.split-example .as-split-gutter', 0, 20, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5])

// Move gutter 25px > nomove
moveGutterByMouse('.split-example .as-split-gutter', 0, 25, 0)
// Move gutter 24px > nomove
moveGutterByMouse('.split-example .as-split-gutter', 0, 24, 0)
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5])

// Move gutter 26px > move 50px
Expand Down
14 changes: 8 additions & 6 deletions cypress/support/splitUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export function moveGutterByMouse(gutters, num, x, y) {
cy.get(gutters)
.eq(num)
.trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
.trigger('mousedown', { which: 1, clientX: 0, clientY: 0, button: 0 })
.trigger('mousemove', { clientX: x * 0.25, clientY: y * 0.25 })
.trigger('mousemove', { clientX: x * 0.5, clientY: y * 0.5 })
.trigger('mousemove', { clientX: x * 0.75, clientY: y * 0.75 })
Expand Down Expand Up @@ -64,28 +64,30 @@ export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1)
// expect(total).to.eq((dir === 'horizontal') ? w : h);

const propFlexDir = dir === 'horizontal' ? 'row' : 'column'
cy.get(el).should('have.css', 'flex-direction', propFlexDir)
const propGridDir = dir === 'vertical' ? 'grid-template-rows' : 'grid-template-columns'
cy.get(el).should('have.css', propGridDir).should('include', ' ')

const propSize = dir === 'horizontal' ? 'width' : 'height'
const propSize2 = propSize === 'width' ? 'height' : 'width'
const propValue2 = propSize === 'width' ? h : w

const round = (value) => Math.round(value * 10) / 10

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

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

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

cy.get(`${el} > .as-split-area`)
.should('have.length', sizes.length)
.each(($li, index) => {
const rect = $li[0].getBoundingClientRect()

expect(rect[propSize]).to.be.eq(sizes[index])
expect(rect[propSize2]).to.be.eq(propValue2)
expect(round(rect[propSize])).to.be.eq(round(sizes[index]))
expect(round(rect[propSize2])).to.be.eq(round(propValue2))
})
}
37 changes: 15 additions & 22 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@
"zone.js": "~0.14.2"
},
"devDependencies": {
"lint-staged": "^14.0.1",
"angular-cli-ghpages": "^2.0.0-beta.2",
"husky": "^8.0.3",
"prettier": "^3.0.2",
"@angular-devkit/architect": "^0.1701.0",
"@angular-devkit/build-angular": "^17.1.0",
"@angular-devkit/core": "^17.1.0",
Expand All @@ -62,10 +58,14 @@
"@types/node": "20.5.4",
"@typescript-eslint/eslint-plugin": "6.19.0",
"@typescript-eslint/parser": "6.19.0",
"cypress": "12.17.4",
"angular-cli-ghpages": "^2.0.0-beta.2",
Copy link
Member

@Jefiozie Jefiozie Jun 20, 2024

Choose a reason for hiding this comment

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

Can we use a none beta version or is there a issue with this version?

Copy link
Collaborator Author

@Harpush Harpush Jun 20, 2024

Choose a reason for hiding this comment

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

That's a great question. I don't know why this is beta. If you look at line 43 before my changes it was beta to begin with. The cypress update just moved those dependencies around (ABC order)

"cypress": "^13.10.0",
"eslint": "^8.56.0",
"husky": "^8.0.3",
"lint-staged": "^14.0.1",
"ng-packagr": "^17.0.0",
"postcss": "8.4.28",
"prettier": "^3.0.2",
"serve": "^14.2.1",
"ts-node": "10.9.1",
"tslib": "^2.6.2",
Expand Down
49 changes: 46 additions & 3 deletions projects/angular-split/src/lib/angular-split-config.token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,47 @@
import { InjectionToken } from '@angular/core'
import { IDefaultOptions } from './interface'
import { InjectionToken, Provider, inject } from '@angular/core'
import { SplitDir, SplitDirection, SplitUnit } from './models'

export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken<Partial<IDefaultOptions>>('angular-split-global-config')
export interface AngularSplitDefaultOptions {
dir: SplitDir
direction: SplitDirection
disabled: boolean
gutterDblClickDuration: number
gutterSize: number
gutterStep: number
gutterClickDeltaPx: number
restrictMove: boolean
unit: SplitUnit
useTransition: boolean
}

const defaultOptions: AngularSplitDefaultOptions = {
dir: 'ltr',
direction: 'horizontal',
disabled: false,
gutterDblClickDuration: 0,
gutterSize: 11,
gutterStep: 1,
gutterClickDeltaPx: 2,
restrictMove: false,
unit: 'percent',
useTransition: false,
}

export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken<AngularSplitDefaultOptions>(
'angular-split-global-config',
{ providedIn: 'root', factory: () => defaultOptions },
)

/**
* Provides default options for angular split. The options object has hierarchical inheritance
* which means only the declared properties will be overridden
*/
export function provideAngularSplitOptions(options: Partial<AngularSplitDefaultOptions>): Provider {
return {
provide: ANGULAR_SPLIT_DEFAULT_OPTIONS,
useFactory: (): AngularSplitDefaultOptions => ({
...inject(ANGULAR_SPLIT_DEFAULT_OPTIONS, { skipSelf: true }),
...options,
}),
}
}
Loading