Skip to content

Commit 26d108e

Browse files
author
Gaillard
committed
[WIP] not compiling..
1 parent afd236f commit 26d108e

7 files changed

Lines changed: 63 additions & 91 deletions

File tree

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

Lines changed: 32 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@ import { Component, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, R
22
import { Observable, Subscriber, Subject } from 'rxjs';
33
import { debounceTime } from 'rxjs/operators';
44

5-
import { IArea } from '../interface/IArea';
6-
import { IPoint } from '../interface/IPoint';
7-
import { ISplitSnapshot } from '../interface/ISplitSnapshot';
8-
import { IAreaSnapshot } from '../interface/IAreaSnapshot';
5+
import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot } from '../interface';
96
import { SplitAreaDirective } from '../directive/splitArea.directive';
10-
import { getInputPositiveNumber, getInputBoolean, getPointFromEvent, getElementPixelSize, getSteppedValue, areaAbsorb, isValidTotalSize } from '../utils';
7+
import { getInputPositiveNumber, getInputBoolean, getPointFromEvent, getElementPixelSize, getAreaAbsorptionCapacity, isValidTotalSize } from '../utils';
118

129
/**
1310
* angular-split
@@ -474,8 +471,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
474471
this.dragListeners.push( this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)) );
475472
this.dragListeners.push( this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)) );
476473

477-
this.dragListeners.push( this.renderer.listen('document', 'mousemove', (e: MouseEvent) => this.dragEvent(e, areaA, areaB)) );
478-
this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, areaA, areaB)) );
474+
this.dragListeners.push( this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)) );
475+
this.dragListeners.push( this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)) );
479476
});
480477

481478
this.displayedAreas.forEach(area => {
@@ -501,73 +498,55 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
501498
if(!this.endPoint) {
502499
return;
503500
}
504-
505-
// ¤ AREAS SIZE PIXEL
506501

507502
let offset = (this.direction === 'horizontal') ? (this.startPoint.x - this.endPoint.x) : (this.startPoint.y - this.endPoint.y);
508503
if(this.dir === 'rtl') {
509504
offset = -offset;
510505
}
511-
const steppedOffset = getSteppedValue(offset, this.gutterStep);
506+
const steppedOffset = Math.round(offset / this.gutterStep) * this.gutterStep;
512507

513508
if(steppedOffset === this.snapshot.lastSteppedOffset) {
514509
return;
515510
}
516511

517512
this.snapshot.lastSteppedOffset = steppedOffset;
518513

519-
const pixelBeforeRemaining = this.snapshot.areasBeforeGutter.reduce((pixel, a) => areaAbsorb(this.unit, a, pixel).remain, steppedOffset);
520-
if(pixelBeforeRemaining !== 0) return;
514+
const areasBefore = this.snapshot.areasBeforeGutter.reduce((acc, area) => {
515+
const res = getAreaAbsorptionCapacity(this.unit, area, acc.remain);
516+
acc.list.push(res);
517+
acc.remain = res.remain;
518+
return acc;
519+
}, {remain: steppedOffset, list: []});
520+
521+
if(areasBefore.remain !== 0) return;
521522

522-
const pixelAfterRemaining = this.snapshot.areasAfterGutter.reduce((pixel, a) => areaAbsorb(this.unit, a, pixel).remain, -steppedOffset);
523-
if(pixelAfterRemaining !== 0) return;
523+
const areasAfter = this.snapshot.areasAfterGutter.reduce((acc, a) => {
524+
const res = getAreaAbsorptionCapacity(this.unit, a, acc.remain);
525+
acc.list.push(res);
526+
acc.remain = res.remain;
527+
return acc;
528+
}, {remain: -steppedOffset, list: []});
524529

530+
if(areasAfter.remain !== 0) return;
525531

526-
/*let newSizePixelA = this.dragStartValues.sizePixelA - offset;
527-
let newSizePixelB = this.dragStartValues.sizePixelB + offset;
528-
529-
if(newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
530-
// WTF.. get out of here!
531-
return;
532-
}
533-
else if(newSizePixelA < this.gutterSize) {
534-
newSizePixelB += newSizePixelA;
535-
newSizePixelA = 0;
536-
}
537-
else if(newSizePixelB < this.gutterSize) {
538-
newSizePixelA += newSizePixelB;
539-
newSizePixelB = 0;
540-
}
532+
// Now we know areas on each gutter side could absorb stepped offset
533+
// Time to update area sizes really
541534

542-
// ¤ AREAS SIZE PERCENT
535+
// for (let el of areasBefore.list) {
536+
// console.log(el);
537+
// if (el === 5) {
538+
// break;
539+
// }
540+
// }
543541

544-
if(newSizePixelA === 0) {
545-
areaB.size += areaA.size;
546-
areaA.size = 0;
547-
}
548-
else if(newSizePixelB === 0) {
549-
areaA.size += areaB.size;
550-
areaB.size = 0;
551-
}
552-
else {
553-
// NEW_PERCENT = START_PERCENT / START_PIXEL * NEW_PIXEL;
554-
if(this.dragStartValues.sizePercentA === 0) {
555-
areaB.size = this.dragStartValues.sizePercentB / this.dragStartValues.sizePixelB * newSizePixelB;
556-
areaA.size = this.dragStartValues.sizePercentB - areaB.size;
557-
}
558-
else if(this.dragStartValues.sizePercentB === 0) {
559-
areaA.size = this.dragStartValues.sizePercentA / this.dragStartValues.sizePixelA * newSizePixelA;
560-
areaB.size = this.dragStartValues.sizePercentA - areaA.size;
561-
}
562-
else {
563-
areaA.size = this.dragStartValues.sizePercentA / this.dragStartValues.sizePixelA * newSizePixelA;
564-
areaB.size = (this.dragStartValues.sizePercentA + this.dragStartValues.sizePercentB) - areaA.size;
565-
}
566-
}*/
542+
areasBefore.list.forEach((e, i) => {
543+
if(e.)
544+
});
567545

568546
this.refreshStyleSizes();
569547

570548
// If moved from starting point, notify progress
549+
// TODO test but normally, IF condition is not needed because L513 "if(steppedOffset === this.snapshot.lastSteppedOffset)..."
571550
if(this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) {
572551
this.notify('progress');
573552
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { SplitAreaDirective } from "./directive/splitArea.directive";
2+
3+
export interface IArea {
4+
component: SplitAreaDirective;
5+
order: number;
6+
size: number;
7+
minSize?: number;
8+
maxSize?: number;
9+
}
10+
11+
export interface IPoint {
12+
x: number;
13+
y: number;
14+
}
15+
16+
export interface IAreaSnapshot {
17+
area: IArea
18+
sizePixelAtStart: number
19+
sizePercentAtStart: number
20+
}
21+
22+
export interface ISplitSnapshot {
23+
gutterNum: number
24+
containerSizePixel: number
25+
lastSteppedOffset: number
26+
areasBeforeGutter: Array<IAreaSnapshot>
27+
areasAfterGutter: Array<IAreaSnapshot>
28+
}

‎projects/angular-split/src/lib/interface/IArea.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎projects/angular-split/src/lib/interface/IAreaSnapshot.ts‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎projects/angular-split/src/lib/interface/IPoint.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎projects/angular-split/src/lib/interface/ISplitSnapshot.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { ElementRef } from '@angular/core';
22

3-
import { IPoint } from './interface/IPoint';
4-
import { ISplitSnapshot } from './interface/ISplitSnapshot';
5-
import { IAreaSnapshot } from './interface/IAreaSnapshot';
3+
import { IPoint, IAreaSnapshot } from './interface';
64

75
export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
86
// TouchEvent
@@ -22,6 +20,7 @@ export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
2220
return null;
2321
}
2422

23+
// TODO Check using https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
2524
export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number {
2625
return elRef.nativeElement[(direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight'];
2726

@@ -42,10 +41,6 @@ export function isValidTotalSize(total: number): boolean {
4241
return total > 99.9 && total < 100.1;
4342
}
4443

45-
export function getSteppedValue(value: number, step: number): number {
46-
return Math.round(value / step) * step;
47-
}
48-
4944
// Return how many pixels can't be absorbed by the area!
5045
// If output = 0 -> area can absorb all
5146
// If output = pixels -> area can absorb nothing (already at min/0/max)
@@ -57,7 +52,7 @@ export function getSteppedValue(value: number, step: number): number {
5752
// _________________________________________________
5853
// |________________maxSize_(%_/_px)_________________|
5954
//
60-
export function areaAbsorb(unit: 'percent' | 'pixel', areaSnapshot: IAreaSnapshot, pixels: number): {absorb: number, remain: number} {
55+
export function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: IAreaSnapshot, pixels: number): {absorb: number, remain: number} {
6156
// No pain no gain
6257
if(pixels === 0) {
6358
return {

0 commit comments

Comments
 (0)