4103296511

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/cocopon/tweakpane/commit/<a class=hub.com/cocopon/tweakpane/commit/ca5777aad226b10db04ff414a176c59da075d412">ca5777aad<a href="https://github.com/cocopon/tweakpane/commit/ca5777aad226b10db04ff414a176c59da075d412">">Merge </a><a class="double-link" href="https://github.com/cocopon/tweakpane/commit/<a class="double-link" href="https://github.com/cocopon/tweakpane/commit/561a70e29cbb4d936b2104e597450033d5221f10">561a70e29</a>">561a70e29</a><a href="https://github.com/cocopon/tweakpane/commit/ca5777aad226b10db04ff414a176c59da075d412"> into fe97ca456">fe97ca456</a>

Pull Request Pull Request #474: Provide specific input binding APIs

Run Details

1210 of 1610 branches covered (75.16%)

Branch coverage included in aggregate %.

74 of 74 new or added lines in 20 files covered. (100.0%)

4231 of 4717 relevant lines covered (89.7%)

743.47 hits per line

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

14.49

/packages/core/src/monitor-binding/number/view/graph-log.ts

import {Formatter} from '../../../common/converter/formatter';
import {forceReflow, SVG_NS} from '../../../common/dom-util';
import {BufferedValue} from '../../../common/model/buffered-value';
import {Value} from '../../../common/model/value';
import {ValueMap} from '../../../common/model/value-map';
import {ViewProps} from '../../../common/model/view-props';
import {mapRange} from '../../../common/number-util';
import {ClassName} from '../../../common/view/class-name';
import {View} from '../../../common/view/view';

export type GraphLogProps = ValueMap<{
        max: number;
        min: number;
}>;

interface Config {
        cursor: Value<number>;
        formatter: Formatter<number>;
        lineCount: number;
        props: GraphLogProps;
        value: BufferedValue<number>;
        viewProps: ViewProps;
}

const className = ClassName('grl');

/**
 * @hidden
 */
export class GraphLogView implements View {
        public readonly element: HTMLElement;
        public readonly value: BufferedValue<number>;
        private readonly props_: GraphLogProps;
        private readonly cursor_: Value<number>;
        private readonly formatter_: Formatter<number>;
        private readonly lineElem_: Element;
        private readonly svgElem_: Element;
        private readonly tooltipElem_: HTMLElement;

        constructor(doc: Document, config: Config) {
                this.onCursorChange_ = this.onCursorChange_.bind(this);
                this.onValueUpdate_ = this.onValueUpdate_.bind(this);

                this.element = doc.createElement('div');
                this.element.classList.add(className());
                config.viewProps.bindClassModifiers(this.element);

                this.formatter_ = config.formatter;
                this.props_ = config.props;

                this.cursor_ = config.cursor;
                this.cursor_.emitter.on('change', this.onCursorChange_);

                const svgElem = doc.createElementNS(SVG_NS, 'svg');
                svgElem.classList.add(className('g'));
                svgElem.style.height = `calc(var(--bld-us) * ${config.lineCount})`;
                this.element.appendChild(svgElem);
                this.svgElem_ = svgElem;

                const lineElem = doc.createElementNS(SVG_NS, 'polyline');
                this.svgElem_.appendChild(lineElem);
                this.lineElem_ = lineElem;

                const tooltipElem = doc.createElement('div');
                tooltipElem.classList.add(className('t'), ClassName('tt')());
                this.element.appendChild(tooltipElem);
                this.tooltipElem_ = tooltipElem;

                config.value.emitter.on('change', this.onValueUpdate_);
                this.value = config.value;

                this.update_();
        }

        get graphElement(): Element {
                return this.svgElem_;
        }

        private update_(): void {
                const bounds = this.svgElem_.getBoundingClientRect();

                // Graph
                const maxIndex = this.value.rawValue.length - 1;
                const min = this.props_.get('min');
                const max = this.props_.get('max');
                const points: string[] = [];
                this.value.rawValue.forEach((v, index) => {
                        if (v === undefined) {
                                return;
                        }
                        const x = mapRange(index, 0, maxIndex, 0, bounds.width);
                        const y = mapRange(v, min, max, bounds.height, 0);
                        points.push([x, y].join(','));
                });
                this.lineElem_.setAttributeNS(null, 'points', points.join(' '));

                // Cursor
                const tooltipElem = this.tooltipElem_;
                const value = this.value.rawValue[this.cursor_.rawValue];
                if (value === undefined) {
                        tooltipElem.classList.remove(className('t', 'a'));
                        return;
                }

                const tx = mapRange(this.cursor_.rawValue, 0, maxIndex, 0, bounds.width);
                const ty = mapRange(value, min, max, bounds.height, 0);
                tooltipElem.style.left = `${tx}px`;
                tooltipElem.style.top = `${ty}px`;
                tooltipElem.textContent = `${this.formatter_(value)}`;

                if (!tooltipElem.classList.contains(className('t', 'a'))) {
                        // Suppresses unwanted initial transition
                        tooltipElem.classList.add(className('t', 'a'), className('t', 'in'));
                        forceReflow(tooltipElem);
                        tooltipElem.classList.remove(className('t', 'in'));
                }
        }

        private onValueUpdate_(): void {
                this.update_();
        }

        private onCursorChange_(): void {
                this.update_();
        }
}

1	import {Formatter} from '../../../common/converter/formatter';
2	import {forceReflow, SVG_NS} from '../../../common/dom-util';	1✔
3	import {BufferedValue} from '../../../common/model/buffered-value';
4	import {Value} from '../../../common/model/value';
5	import {ValueMap} from '../../../common/model/value-map';
6	import {ViewProps} from '../../../common/model/view-props';
7	import {mapRange} from '../../../common/number-util';	1✔
8	import {ClassName} from '../../../common/view/class-name';	1✔
9	import {View} from '../../../common/view/view';
10
11	export type GraphLogProps = ValueMap<{
12	max: number;
13	min: number;
14	}>;
15
16	interface Config {
17	cursor: Value<number>;
18	formatter: Formatter<number>;
19	lineCount: number;
20	props: GraphLogProps;
21	value: BufferedValue<number>;
22	viewProps: ViewProps;
23	}
24
25	const className = ClassName('grl');	1✔
26
27	/**
28	* @hidden
29	*/
30	export class GraphLogView implements View {	1✔
31	public readonly element: HTMLElement;
32	public readonly value: BufferedValue<number>;
33	private readonly props_: GraphLogProps;
34	private readonly cursor_: Value<number>;
35	private readonly formatter_: Formatter<number>;
36	private readonly lineElem_: Element;
37	private readonly svgElem_: Element;
38	private readonly tooltipElem_: HTMLElement;
39
40	constructor(doc: Document, config: Config) {
41	this.onCursorChange_ = this.onCursorChange_.bind(this);	×
42	this.onValueUpdate_ = this.onValueUpdate_.bind(this);	×
43
44	this.element = doc.createElement('div');	×
45	this.element.classList.add(className());	×
46	config.viewProps.bindClassModifiers(this.element);	×
47
48	this.formatter_ = config.formatter;	×
49	this.props_ = config.props;	×
50
51	this.cursor_ = config.cursor;	×
52	this.cursor_.emitter.on('change', this.onCursorChange_);	×
53
54	const svgElem = doc.createElementNS(SVG_NS, 'svg');	×
55	svgElem.classList.add(className('g'));	×
56	svgElem.style.height = `calc(var(--bld-us) * ${config.lineCount})`;	×
57	this.element.appendChild(svgElem);	×
58	this.svgElem_ = svgElem;	×
59
60	const lineElem = doc.createElementNS(SVG_NS, 'polyline');	×
61	this.svgElem_.appendChild(lineElem);	×
62	this.lineElem_ = lineElem;	×
63
64	const tooltipElem = doc.createElement('div');	×
65	tooltipElem.classList.add(className('t'), ClassName('tt')());	×
66	this.element.appendChild(tooltipElem);	×
67	this.tooltipElem_ = tooltipElem;	×
68
69	config.value.emitter.on('change', this.onValueUpdate_);	×
70	this.value = config.value;	×
71
72	this.update_();	×
73	}
74
75	get graphElement(): Element {	1✔
76	return this.svgElem_;	×
77	}
78
79	private update_(): void {	1✔
80	const bounds = this.svgElem_.getBoundingClientRect();	×
81
82	// Graph
83	const maxIndex = this.value.rawValue.length - 1;	×
84	const min = this.props_.get('min');	×
85	const max = this.props_.get('max');	×
86	const points: string[] = [];	×
87	this.value.rawValue.forEach((v, index) => {	×
88	if (v === undefined) {	×
89	return;	×
90	}
91	const x = mapRange(index, 0, maxIndex, 0, bounds.width);	×
92	const y = mapRange(v, min, max, bounds.height, 0);	×
93	points.push([x, y].join(','));	×
94	});
95	this.lineElem_.setAttributeNS(null, 'points', points.join(' '));	×
96
97	// Cursor
98	const tooltipElem = this.tooltipElem_;	×
99	const value = this.value.rawValue[this.cursor_.rawValue];	×
100	if (value === undefined) {	×
101	tooltipElem.classList.remove(className('t', 'a'));	×
102	return;	×
103	}
104
105	const tx = mapRange(this.cursor_.rawValue, 0, maxIndex, 0, bounds.width);	×
106	const ty = mapRange(value, min, max, bounds.height, 0);	×
107	tooltipElem.style.left = `${tx}px`;	×
108	tooltipElem.style.top = `${ty}px`;	×
109	tooltipElem.textContent = `${this.formatter_(value)}`;	×
110
111	if (!tooltipElem.classList.contains(className('t', 'a'))) {	×
112	// Suppresses unwanted initial transition
113	tooltipElem.classList.add(className('t', 'a'), className('t', 'in'));	×
114	forceReflow(tooltipElem);	×
115	tooltipElem.classList.remove(className('t', 'in'));	×
116	}
117	}
118
119	private onValueUpdate_(): void {	1✔
120	this.update_();	×
121	}
122
123	private onCursorChange_(): void {	1✔
124	this.update_();	×
125	}
126	}	1✔

cocopon / tweakpane / 4103296511

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