4304709075

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/cocopon/tweakpane/commit/<a class=hub.com/cocopon/tweakpane/commit/9ac637bb2e1b86fca0e15b7dbc090b57611149e7">9ac637bb2<a href="https://github.com/cocopon/tweakpane/commit/9ac637bb2e1b86fca0e15b7dbc090b57611149e7">">Merge </a><a class="double-link" href="https://github.com/cocopon/tweakpane/commit/<a class="double-link" href="https://github.com/cocopon/tweakpane/commit/3afbfa9ebf422557e844313a9d5b621f3c35c5ff">3afbfa9eb</a>">3afbfa9eb</a><a href="https://github.com/cocopon/tweakpane/commit/9ac637bb2e1b86fca0e15b7dbc090b57611149e7"> into f7e074478">f7e074478</a>

Pull Request Pull Request #503: Apply changes from 3.1.5

Run Details

1263 of 1678 branches covered (75.27%)

Branch coverage included in aggregate %.

3 of 3 new or added lines in 1 file covered. (100.0%)

4562 of 4989 relevant lines covered (91.44%)

706.1 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.18

/packages/core/src/blade/common/model/foldable.ts

import {
        disableTransitionTemporarily,
        forceReflow,
} from '../../../common/dom-util';
import {bindValueMap} from '../../../common/model/reactive';
import {Value} from '../../../common/model/value';
import {ValueMap} from '../../../common/model/value-map';
import {isEmpty} from '../../../misc/type-util';

/**
 * @hidden
 */
type FoldableObject = {
        completed: boolean;
        expanded: boolean;
        expandedHeight: number | null;
        shouldFixHeight: boolean;
        // For computing expanded height
        temporaryExpanded: boolean | null;
};

/**
 * @hidden
 */
export class Foldable extends ValueMap<FoldableObject> {
        constructor(valueMap: {
                [Key in keyof FoldableObject]: Value<FoldableObject[Key]>;
        }) {
                super(valueMap);
        }

        public static create(expanded: boolean): Foldable {
                const coreObj: FoldableObject = {
                        completed: true,
                        expanded: expanded,
                        expandedHeight: null,
                        shouldFixHeight: false,
                        temporaryExpanded: null,
                };
                const core = ValueMap.createCore(coreObj);
                return new Foldable(core);
        }

        get styleExpanded(): boolean {
                return this.get('temporaryExpanded') ?? this.get('expanded');
        }

        get styleHeight(): string {
                if (!this.styleExpanded) {
                        return '0';
                }

                const exHeight = this.get('expandedHeight');
                if (this.get('shouldFixHeight') && !isEmpty(exHeight)) {
                        return `${exHeight}px`;
                }

                return 'auto';
        }

        public bindExpandedClass(elem: HTMLElement, expandedClassName: string): void {
                const onExpand = () => {
                        const expanded = this.styleExpanded;
                        if (expanded) {
                                elem.classList.add(expandedClassName);
                        } else {
                                elem.classList.remove(expandedClassName);
                        }
                };

                bindValueMap(this, 'expanded', onExpand);
                bindValueMap(this, 'temporaryExpanded', onExpand);
        }

        public cleanUpTransition(): void {
                this.set('shouldFixHeight', false);
                this.set('expandedHeight', null);
                this.set('completed', true);
        }
}

function computeExpandedFolderHeight(
        folder: Foldable,
        containerElement: HTMLElement,
): number {
        let height = 0;

        disableTransitionTemporarily(containerElement, () => {
                // Expand folder temporarily
                folder.set('expandedHeight', null);
                folder.set('temporaryExpanded', true);

                forceReflow(containerElement);

                // Compute height
                height = containerElement.clientHeight;

                // Restore expanded
                folder.set('temporaryExpanded', null);

                forceReflow(containerElement);
        });

        return height;
}

function applyHeight(foldable: Foldable, elem: HTMLElement): void {
        elem.style.height = foldable.styleHeight;
}

export function bindFoldable(foldable: Foldable, elem: HTMLElement): void {
        foldable.value('expanded').emitter.on('beforechange', () => {
                foldable.set('completed', false);

                if (isEmpty(foldable.get('expandedHeight'))) {
                        const h = computeExpandedFolderHeight(foldable, elem);
                        if (h > 0) {
                                foldable.set('expandedHeight', h);
                        }
                }

                foldable.set('shouldFixHeight', true);
                forceReflow(elem);
        });

        foldable.emitter.on('change', () => {
                applyHeight(foldable, elem);
        });
        applyHeight(foldable, elem);

        elem.addEventListener('transitionend', (ev) => {
                if (ev.propertyName !== 'height') {
                        return;
                }

                foldable.cleanUpTransition();
        });
}

1	import {	1✔
2	disableTransitionTemporarily,
3	forceReflow,
4	} from '../../../common/dom-util';
5	import {bindValueMap} from '../../../common/model/reactive';	1✔
6	import {Value} from '../../../common/model/value';
7	import {ValueMap} from '../../../common/model/value-map';	1✔
8	import {isEmpty} from '../../../misc/type-util';	1✔
9
10	/**
11	* @hidden
12	*/
13	type FoldableObject = {
14	completed: boolean;
15	expanded: boolean;
16	expandedHeight: number \| null;
17	shouldFixHeight: boolean;
18	// For computing expanded height
19	temporaryExpanded: boolean \| null;
20	};
21
22	/**
23	* @hidden
24	*/
25	export class Foldable extends ValueMap<FoldableObject> {	1✔
26	constructor(valueMap: {
27	[Key in keyof FoldableObject]: Value<FoldableObject[Key]>;
28	}) {
29	super(valueMap);	83✔
30	}
31
32	public static create(expanded: boolean): Foldable {	1✔
33	const coreObj: FoldableObject = {	83✔
34	completed: true,
35	expanded: expanded,
36	expandedHeight: null,
37	shouldFixHeight: false,
38	temporaryExpanded: null,
39	};
40	const core = ValueMap.createCore(coreObj);	83✔
41	return new Foldable(core);	83✔
42	}
43
44	get styleExpanded(): boolean {	1✔
45	return this.get('temporaryExpanded') ?? this.get('expanded');	262✔
46	}
47
48	get styleHeight(): string {	1✔
49	if (!this.styleExpanded) {	89✔
50	return '0';	6✔
51	}
52
53	const exHeight = this.get('expandedHeight');	83✔
54	if (this.get('shouldFixHeight') && !isEmpty(exHeight)) {	83!
55	return `${exHeight}px`;	×
56	}
57
58	return 'auto';	83✔
59	}
60
61	public bindExpandedClass(elem: HTMLElement, expandedClassName: string): void {	79✔
62	const onExpand = () => {	79✔
63	const expanded = this.styleExpanded;	173✔
64	if (expanded) {	173✔
65	elem.classList.add(expandedClassName);	136✔
66	} else {
67	elem.classList.remove(expandedClassName);	37✔
68	}
69	};
70
71	bindValueMap(this, 'expanded', onExpand);	79✔
72	bindValueMap(this, 'temporaryExpanded', onExpand);	79✔
73	}
74
75	public cleanUpTransition(): void {	1✔
76	this.set('shouldFixHeight', false);	106✔
77	this.set('expandedHeight', null);	106✔
78	this.set('completed', true);	106✔
79	}
80	}	1✔
81
82	function computeExpandedFolderHeight(
83	folder: Foldable,
84	containerElement: HTMLElement,
85	): number {
86	let height = 0;	5✔
87
88	disableTransitionTemporarily(containerElement, () => {	5✔
89	// Expand folder temporarily
90	folder.set('expandedHeight', null);	5✔
91	folder.set('temporaryExpanded', true);	5✔
92
93	forceReflow(containerElement);	5✔
94
95	// Compute height
96	height = containerElement.clientHeight;	5✔
97
98	// Restore expanded
99	folder.set('temporaryExpanded', null);	5✔
100
101	forceReflow(containerElement);	5✔
102	});
103
104	return height;	5✔
105	}
106
107	function applyHeight(foldable: Foldable, elem: HTMLElement): void {
108	elem.style.height = foldable.styleHeight;	89✔
109	}
110
111	export function bindFoldable(foldable: Foldable, elem: HTMLElement): void {	1✔
112	foldable.value('expanded').emitter.on('beforechange', () => {	64✔
113	foldable.set('completed', false);	5✔
114
115	if (isEmpty(foldable.get('expandedHeight'))) {	5!
116	const h = computeExpandedFolderHeight(foldable, elem);	5✔
117	if (h > 0) {	5!
118	foldable.set('expandedHeight', h);	×
119	}
120	}
121
122	foldable.set('shouldFixHeight', true);	5✔
123	forceReflow(elem);	5✔
124	});
125
126	foldable.emitter.on('change', () => {	64✔
127	applyHeight(foldable, elem);	25✔
128	});
129	applyHeight(foldable, elem);	64✔
130
131	elem.addEventListener('transitionend', (ev) => {	64✔
132	if (ev.propertyName !== 'height') {	×
133	return;	×
134	}
135
136	foldable.cleanUpTransition();	×
137	});
138	}

cocopon / tweakpane / 4304709075

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous