Skip to content

Commit ceab929

Browse files
HarpushHarpush
committed
feat: add wildcard support for percent mode
1 parent 730cb23 commit ceab929

4 files changed

Lines changed: 206 additions & 39 deletions

File tree

‎cypress/e2e/1.simple.cy.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,29 @@ context('Simple split example page tests', () => {
1919

2020
it('Display initial state', () => {
2121
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
22+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [737.8125, 210.796875, 105.390625])
2223
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
2324
checkGutterAriaLabel('.ex-percent .as-split-gutter', 0, 'adjustable divider between two views')
25+
checkGutterAriaLabel('.ex-percent-wc .as-split-gutter', 0, 'adjustable divider between two views')
2426
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])
27+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '20 percent'])
2528
})
2629

2730
it('Change direction', () => {
2831
cy.get('.btns > .btn').click()
2932

3033
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [86.6875, 202.296875])
34+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [194.609375, 55.59375, 27.796875])
3135
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [120, 0, 160])
3236
})
3337

3438
it('Move gutter horizontally', () => {
3539
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0)
3640
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5])
3741

42+
moveGutterByMouse('.ex-percent-wc .as-split-gutter', 0, -280, 0)
43+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [457.8125, 490.796875, 105.390625])
44+
3845
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0)
3946
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160])
4047
})
@@ -45,6 +52,9 @@ context('Simple split example page tests', () => {
4552
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 60)
4653
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [146.6875, 142.296875])
4754

55+
moveGutterByMouse('.ex-percent-wc .as-split-gutter', 0, 0, -60)
56+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [134.609375, 115.59375, 27.796875])
57+
4858
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 60)
4959
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [180, 0, 100])
5060
})
@@ -56,6 +66,12 @@ context('Simple split example page tests', () => {
5666
moveGutterByMouse('.ex-percent .as-split-gutter', 0, -280, 0)
5767
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
5868

69+
moveGutterByMouse('.ex-percent-wc .as-split-gutter', 0, 200, 0)
70+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [937.828125, 10.78125, 105.390625])
71+
72+
moveGutterByMouse('.ex-percent-wc .as-split-gutter', 0, -200, 0)
73+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [737.828125, 210.78125, 105.390625])
74+
5975
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0)
6076
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160])
6177

@@ -67,6 +83,9 @@ context('Simple split example page tests', () => {
6783
moveGutterByMouse('.ex-percent .as-split-gutter', 0, -1000, 0)
6884
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065])
6985

86+
moveGutterByMouse('.ex-percent-wc .as-split-gutter', 0, -1000, 0)
87+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [0.015625, 948.59375, 105.390625])
88+
7089
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -1000, 0)
7190
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [0, 894, 160])
7291

@@ -75,12 +94,16 @@ context('Simple split example page tests', () => {
7594
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289])
7695
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 1000)
7796

97+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [0.015625, 250.1875, 27.796875])
98+
moveGutterByMouse('.ex-percent-wc .as-split-gutter', 0, 0, 1000)
99+
78100
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 118, 160])
79101
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 1000)
80102

81103
cy.get('.btns > .btn').click()
82104

83105
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [1065, 0])
106+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [1054, 0, 0])
84107
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [278, 776, 0])
85108
})
86109

@@ -101,6 +124,22 @@ context('Simple split example page tests', () => {
101124
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [500, 565])
102125
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent'])
103126

127+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'leftarrow')
128+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [687.8125, 260.796875, 105.390625])
129+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '25 percent'])
130+
131+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'rightarrow')
132+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [737.8125, 210.796875, 105.390625])
133+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '20 percent'])
134+
135+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'pagedown')
136+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [237.8125, 710.796875, 105.390625])
137+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '67 percent'])
138+
139+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'pageup')
140+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'horizontal', W, H, GUTTER, [737.8125, 210.796875, 105.390625])
141+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '20 percent'])
142+
104143
moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'leftarrow')
105144
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [70, 824, 160])
106145
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['70 pixel', null])
@@ -137,6 +176,22 @@ context('Simple split example page tests', () => {
137176
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289])
138177
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent'])
139178

179+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'downarrow')
180+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [244.609375, 5.59375, 27.796875])
181+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '2 percent'])
182+
183+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'uparrow')
184+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [194.609375, 55.59375, 27.796875])
185+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '20 percent'])
186+
187+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'pagedown')
188+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [278, 0, 0])
189+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '0 percent'])
190+
191+
moveGutterByKeyboard('.ex-percent-wc .as-split-gutter', 0, 1, 'pageup')
192+
checkSplitDirAndSizes('.ex-percent-wc > as-split', 'vertical', W, H, GUTTER, [0, 278, 0])
193+
checkGuttersAriaValueTexts('.ex-percent-wc .as-split-gutter', [null, '100 percent'])
194+
140195
moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'downarrow')
141196
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [170, 0, 110])
142197
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['170 pixel', null])

‎projects/angular-split/src/lib/component/split.component.ts‎

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -484,13 +484,22 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
484484
const sumGutterSize = this.getNbGutters() * this.gutterSize
485485

486486
this.displayedAreas.forEach((area) => {
487-
area.component.setStyleFlex(
488-
0,
489-
0,
490-
`calc( ${area.size}% - ${(<number>area.size / 100) * sumGutterSize}px )`,
491-
area.minSize !== null && area.minSize === area.size,
492-
area.maxSize !== null && area.maxSize === area.size,
493-
)
487+
// Area with wildcard size
488+
if (area.size === null) {
489+
if (this.displayedAreas.length === 1) {
490+
area.component.setStyleFlex(1, 1, `100%`, false, false)
491+
} else {
492+
area.component.setStyleFlex(1, 1, `auto`, false, false)
493+
}
494+
} else {
495+
area.component.setStyleFlex(
496+
0,
497+
0,
498+
`calc( ${area.size}% - ${(<number>area.size / 100) * sumGutterSize}px )`,
499+
area.minSize !== null && area.minSize === area.size,
500+
area.maxSize !== null && area.maxSize === area.size,
501+
)
502+
}
494503
})
495504
}
496505
} else if (this.unit === 'pixel') {
@@ -628,10 +637,33 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
628637
}
629638
})
630639

631-
this.snapshot.allInvolvedAreasSizePercent = [
632-
...this.snapshot.areasBeforeGutter,
633-
...this.snapshot.areasAfterGutter,
634-
].reduce((t, a) => t + a.sizePercentAtStart, 0)
640+
// allInvolvedAreasSizePercent is only relevant if there is restrictMove as otherwise the sum
641+
// is always 100.
642+
// Pixel mode doesn't have browser % problem which is the origin of allInvolvedAreasSizePercent.
643+
if (this.restrictMove && this.unit === 'percent') {
644+
const areaSnapshotBefore = this.snapshot.areasBeforeGutter[0]
645+
const areaSnapshotAfter = this.snapshot.areasAfterGutter[0]
646+
647+
// We have a wildcard size area beside the dragged gutter.
648+
// In this case we can only calculate the size based on the move restricted areas.
649+
if (areaSnapshotBefore.area.size === null || areaSnapshotAfter.area.size === null) {
650+
const notInvolvedAreasSizesPercent = this.displayedAreas.reduce((accum, area) => {
651+
if (areaSnapshotBefore.area !== area && areaSnapshotAfter.area !== area) {
652+
return accum + area.size
653+
}
654+
655+
return accum
656+
}, 0)
657+
658+
this.snapshot.allInvolvedAreasSizePercent = 100 - notInvolvedAreasSizesPercent
659+
} else {
660+
// No wildcard or not beside the gutter - we can just sum the areas beside gutter percents.
661+
this.snapshot.allInvolvedAreasSizePercent = [
662+
...this.snapshot.areasBeforeGutter,
663+
...this.snapshot.areasAfterGutter,
664+
].reduce((t, a) => t + a.sizePercentAtStart, 0)
665+
}
666+
}
635667

636668
if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) {
637669
return
@@ -757,12 +789,16 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
757789
// Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect()
758790
// If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,..
759791
const all = [...areasBefore.list, ...areasAfter.list]
760-
const areaToReset = all.find(
761-
(a) =>
762-
a.percentAfterAbsorption !== 0 &&
763-
a.percentAfterAbsorption !== a.areaSnapshot.area.minSize &&
764-
a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize,
765-
)
792+
const wildcardArea = all.find((a) => a.percentAfterAbsorption == null)
793+
// In case we have a wildcard area - always align the percents on the wildcard area.
794+
const areaToReset =
795+
wildcardArea ??
796+
all.find(
797+
(a) =>
798+
a.percentAfterAbsorption !== 0 &&
799+
a.percentAfterAbsorption !== a.areaSnapshot.area.minSize &&
800+
a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize,
801+
)
766802

767803
if (areaToReset) {
768804
areaToReset.percentAfterAbsorption =

‎projects/angular-split/src/lib/utils.ts‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,22 @@ export function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T {
116116
}
117117

118118
export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array<number | null>): boolean {
119-
// All sizes have to be not null and total should be 100
119+
// All sizes total must be 100 unless there are wildcards.
120+
// While having wildcards all other sizes sum should be less than 100.
121+
// There should be maximum one wildcard.
120122
if (unit === 'percent') {
121123
const total = sizes.reduce((total, s) => (s !== null ? total + s : total), 0)
122-
return sizes.every((s) => s !== null) && total > 99.9 && total < 100.1
124+
const wildcardSizeAreas = sizes.filter((size) => size === null)
125+
126+
if (wildcardSizeAreas.length > 1) {
127+
return false
128+
}
129+
130+
if (wildcardSizeAreas.length === 1) {
131+
return total < 100.1
132+
}
133+
134+
return total > 99.9 && total < 100.1
123135
}
124136

125137
// A size at null is mandatory but only one.
@@ -339,11 +351,11 @@ function getAreaAbsorptionCapacityPixel(
339351
}
340352

341353
export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionCapacity) {
342-
if (unit === 'percent') {
343-
item.areaSnapshot.area.size = item.percentAfterAbsorption
344-
} else if (unit === 'pixel') {
345-
// Update size except for the wildcard size area
346-
if (item.areaSnapshot.area.size !== null) {
354+
// Update size except for the wildcard size area
355+
if (item.areaSnapshot.area.size !== null) {
356+
if (unit === 'percent') {
357+
item.areaSnapshot.area.size = item.percentAfterAbsorption
358+
} else if (unit === 'pixel') {
347359
item.areaSnapshot.area.size = item.areaSnapshot.sizePixelAtStart + item.pixelAbsorb
348360
}
349361
}

‎src/app/examples/simple-split/simple-split.component.ts‎

Lines changed: 79 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ import { AComponent } from '../../ui/components/AComponent'
2323
{{ testChangeDetectorRun() }}
2424
<div class="container">
2525
<sp-example-title [type]="exampleEnum.SIMPLE"></sp-example-title>
26-
<h5>Percent mode:</h5>
26+
<h5>Percent mode (No wildcards):</h5>
2727
<div class="split-example ex-percent">
2828
<as-split
2929
unit="percent"
3030
[direction]="direction"
3131
gutterAriaLabel="adjustable divider between two views"
32-
(dragEnd)="dragEnd('percent', $event)"
32+
(dragEnd)="dragEndPercentWithoutWildcards($event)"
3333
#split="asSplit"
3434
>
3535
<as-split-area size="30" #area1="asSplitArea">
3636
<h5>Initial size: <b>30%</b></h5>
3737
<h5>
38-
Current size: <b>{{ sizes.percent.area1 }}%</b>
38+
Current size: <b>{{ sizes.percentWithoutWildcards.area1 }}%</b>
3939
</h5>
4040
<p>
4141
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation
@@ -46,7 +46,60 @@ import { AComponent } from '../../ui/components/AComponent'
4646
<as-split-area size="70" #area2="asSplitArea">
4747
<h5>Initial size: <b>70%</b></h5>
4848
<h5>
49-
Current size: <b>{{ sizes.percent.area2 }}%</b>
49+
Current size: <b>{{ sizes.percentWithoutWildcards.area2 }}%</b>
50+
</h5>
51+
<p>
52+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
53+
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
54+
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
55+
consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
56+
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
57+
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
58+
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
59+
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
60+
</p>
61+
</as-split-area>
62+
</as-split>
63+
</div>
64+
<h5>Percent mode (With wildcards):</h5>
65+
<div class="split-example ex-percent-wc">
66+
<as-split
67+
unit="percent"
68+
[direction]="direction"
69+
gutterAriaLabel="adjustable divider between two views"
70+
(dragEnd)="dragEndPercentWithWildcards($event)"
71+
>
72+
<as-split-area size="*">
73+
<h5>Initial size: <b>*</b></h5>
74+
<h5>
75+
Current size: <b>{{ sizes.percentWithWildcards.area1 }}</b>
76+
</h5>
77+
<p>
78+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation
79+
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
80+
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
81+
</p>
82+
</as-split-area>
83+
<as-split-area size="20">
84+
<h5>Initial size: <b>20%</b></h5>
85+
<h5>
86+
Current size: <b>{{ sizes.percentWithWildcards.area2 }}%</b>
87+
</h5>
88+
<p>
89+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
90+
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
91+
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
92+
consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
93+
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
94+
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
95+
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
96+
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
97+
</p>
98+
</as-split-area>
99+
<as-split-area size="10">
100+
<h5>Initial size: <b>10%</b></h5>
101+
<h5>
102+
Current size: <b>{{ sizes.percentWithWildcards.area3 }}%</b>
50103
</h5>
51104
<p>
52105
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
@@ -63,7 +116,7 @@ import { AComponent } from '../../ui/components/AComponent'
63116
</div>
64117
<h5>Pixel mode:</h5>
65118
<div class="split-example ex-pixel">
66-
<as-split unit="pixel" [direction]="direction" (dragEnd)="dragEnd('pixel', $event)">
119+
<as-split unit="pixel" [direction]="direction" (dragEnd)="dragEndPixel($event)">
67120
<as-split-area size="120">
68121
<h5>Initial size: <b>120px</b></h5>
69122
<h5>
@@ -118,10 +171,15 @@ export class SimpleSplitComponent extends AComponent {
118171

119172
direction = 'horizontal'
120173
sizes = {
121-
percent: {
174+
percentWithoutWildcards: {
122175
area1: 30,
123176
area2: 70,
124177
},
178+
percentWithWildcards: {
179+
area1: '*',
180+
area2: 20,
181+
area3: 10,
182+
},
125183
pixel: {
126184
area1: 120,
127185
area2: '*',
@@ -139,14 +197,20 @@ export class SimpleSplitComponent extends AComponent {
139197
}, 1000)
140198
}
141199

142-
dragEnd(unit, { sizes }) {
143-
if (unit === 'percent') {
144-
this.sizes.percent.area1 = sizes[0]
145-
this.sizes.percent.area2 = sizes[1]
146-
} else if (unit === 'pixel') {
147-
this.sizes.pixel.area1 = sizes[0]
148-
this.sizes.pixel.area2 = sizes[1]
149-
this.sizes.pixel.area3 = sizes[2]
150-
}
200+
dragEndPercentWithoutWildcards({ sizes }) {
201+
this.sizes.percentWithoutWildcards.area1 = sizes[0]
202+
this.sizes.percentWithoutWildcards.area2 = sizes[1]
203+
}
204+
205+
dragEndPercentWithWildcards({ sizes }) {
206+
this.sizes.percentWithWildcards.area1 = sizes[0]
207+
this.sizes.percentWithWildcards.area2 = sizes[1]
208+
this.sizes.percentWithWildcards.area3 = sizes[2]
209+
}
210+
211+
dragEndPixel({ sizes }) {
212+
this.sizes.pixel.area1 = sizes[0]
213+
this.sizes.pixel.area2 = sizes[1]
214+
this.sizes.pixel.area3 = sizes[2]
151215
}
152216
}

0 commit comments

Comments
 (0)