Skip to content

Commit d8ce04a

Browse files
HarpushHarpush
authored
feat: modernize angular split (angular-split#444)
* feat: modernize angular split * fix: typo, left click check not needed * fix: force gutter events cancellation when inputs change affects sizes * fix: remove not needed take inside takeUntil * fix: pack inputs together * fix: add min/max classes only when area visible * fix: normalize min/max size based on outer size will avoid multiple warnings in console and the main/max size won't suddenly start working while dragging * fix: typos * fix: delta check with custom gutter * Revert "fix: force gutter events cancellation when inputs change affects sizes" This reverts commit 5fc3aa9. * fix: minor fixes (typos, unused code) * feat: support hierarchical inheritance in options * fix: typo in config token comment
1 parent d011162 commit d8ce04a

39 files changed

Lines changed: 1418 additions & 1932 deletions

‎cypress/e2e/7.click.cy.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,32 +35,32 @@ context('Gutter click example page tests', () => {
3535

3636
it('Click gutters to switch area sizes between 0 and X', () => {
3737
cy.get('.as-split-gutter').eq(0).click()
38-
cy.wait(1500)
38+
cy.wait(2000)
3939
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 792, 264])
4040
cy.wait(10)
4141

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

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

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

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

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

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

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

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

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

146154
it('Test double click event', () => {

‎cypress/e2e/9.geek.cy.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -242,16 +242,16 @@ context('Geek demo example page tests', () => {
242242
// SET gutterStep to 10px
243243
cy.get('.opts-prop').contains('Gutter step:').parent().contains('10').click()
244244

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

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

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

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

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

273273
// Move gutter 26px > move 50px

‎cypress/support/splitUtils.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export function moveGutterByMouse(gutters, num, x, y) {
22
cy.get(gutters)
33
.eq(num)
4-
.trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
4+
.trigger('mousedown', { which: 1, clientX: 0, clientY: 0, button: 0 })
55
.trigger('mousemove', { clientX: x * 0.25, clientY: y * 0.25 })
66
.trigger('mousemove', { clientX: x * 0.5, clientY: y * 0.5 })
77
.trigger('mousemove', { clientX: x * 0.75, clientY: y * 0.75 })
@@ -64,28 +64,30 @@ export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
6464
const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1)
6565
// expect(total).to.eq((dir === 'horizontal') ? w : h);
6666

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

7070
const propSize = dir === 'horizontal' ? 'width' : 'height'
7171
const propSize2 = propSize === 'width' ? 'height' : 'width'
7272
const propValue2 = propSize === 'width' ? h : w
7373

74+
const round = (value) => Math.round(value * 10) / 10
75+
7476
cy.get(`${el} > .as-split-gutter`).should('have.length', sizes.length - 1)
7577

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

7981
expect(rect[propSize]).to.be.eq(gutter)
80-
expect(rect[propSize2]).to.be.eq(propValue2)
82+
expect(round(rect[propSize2])).to.be.eq(round(propValue2))
8183
})
8284

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

88-
expect(rect[propSize]).to.be.eq(sizes[index])
89-
expect(rect[propSize2]).to.be.eq(propValue2)
90+
expect(round(rect[propSize])).to.be.eq(round(sizes[index]))
91+
expect(round(rect[propSize2])).to.be.eq(round(propValue2))
9092
})
9193
}

‎package-lock.json‎

Lines changed: 15 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@
3939
"zone.js": "~0.14.2"
4040
},
4141
"devDependencies": {
42-
"lint-staged": "^14.0.1",
43-
"angular-cli-ghpages": "^2.0.0-beta.2",
44-
"husky": "^8.0.3",
45-
"prettier": "^3.0.2",
4642
"@angular-devkit/architect": "^0.1701.0",
4743
"@angular-devkit/build-angular": "^17.1.0",
4844
"@angular-devkit/core": "^17.1.0",
@@ -62,10 +58,14 @@
6258
"@types/node": "20.5.4",
6359
"@typescript-eslint/eslint-plugin": "6.19.0",
6460
"@typescript-eslint/parser": "6.19.0",
65-
"cypress": "12.17.4",
61+
"angular-cli-ghpages": "^2.0.0-beta.2",
62+
"cypress": "^13.10.0",
6663
"eslint": "^8.56.0",
64+
"husky": "^8.0.3",
65+
"lint-staged": "^14.0.1",
6766
"ng-packagr": "^17.0.0",
6867
"postcss": "8.4.28",
68+
"prettier": "^3.0.2",
6969
"serve": "^14.2.1",
7070
"ts-node": "10.9.1",
7171
"tslib": "^2.6.2",

‎projects/angular-split/src/lib/angular-split-config.token.ts‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,47 @@
1-
import { InjectionToken } from '@angular/core'
2-
import { IDefaultOptions } from './interface'
1+
import { InjectionToken, Provider, inject } from '@angular/core'
2+
import { SplitDir, SplitDirection, SplitUnit } from './models'
33

4-
export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken<Partial<IDefaultOptions>>('angular-split-global-config')
4+
export interface AngularSplitDefaultOptions {
5+
dir: SplitDir
6+
direction: SplitDirection
7+
disabled: boolean
8+
gutterDblClickDuration: number
9+
gutterSize: number
10+
gutterStep: number
11+
gutterClickDeltaPx: number
12+
restrictMove: boolean
13+
unit: SplitUnit
14+
useTransition: boolean
15+
}
16+
17+
const defaultOptions: AngularSplitDefaultOptions = {
18+
dir: 'ltr',
19+
direction: 'horizontal',
20+
disabled: false,
21+
gutterDblClickDuration: 0,
22+
gutterSize: 11,
23+
gutterStep: 1,
24+
gutterClickDeltaPx: 2,
25+
restrictMove: false,
26+
unit: 'percent',
27+
useTransition: false,
28+
}
29+
30+
export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken<AngularSplitDefaultOptions>(
31+
'angular-split-global-config',
32+
{ providedIn: 'root', factory: () => defaultOptions },
33+
)
34+
35+
/**
36+
* Provides default options for angular split. The options object has hierarchical inheritance
37+
* which means only the declared properties will be overridden
38+
*/
39+
export function provideAngularSplitOptions(options: Partial<AngularSplitDefaultOptions>): Provider {
40+
return {
41+
provide: ANGULAR_SPLIT_DEFAULT_OPTIONS,
42+
useFactory: (): AngularSplitDefaultOptions => ({
43+
...inject(ANGULAR_SPLIT_DEFAULT_OPTIONS, { skipSelf: true }),
44+
...options,
45+
}),
46+
}
47+
}

0 commit comments

Comments
 (0)