| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405 |
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
11×
11×
11×
11×
1×
1×
1×
2×
6×
6×
14×
11×
11×
11×
11×
11×
11×
11×
1×
1×
24×
1×
48×
1×
24×
1×
12×
11×
11×
11×
6×
11×
2×
2×
2×
2×
2×
2×
1×
1×
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
11×
10×
10×
10×
10×
13×
13×
13×
13×
10×
10×
10×
1×
4×
4×
4×
3×
1×
16×
13×
13×
1×
6×
1×
6×
1×
1×
1×
1×
1×
1×
1×
193×
193×
193×
193×
193×
1×
1×
1×
208×
208×
10×
10×
10×
13×
178×
178×
178×
178×
178×
178×
23×
23×
8×
15×
8×
15×
18×
15×
15×
15×
15×
15×
15×
15×
15×
1×
4×
4×
13×
13×
4×
2×
2×
1×
| /*
* @license
* Copyright Hôpitaux Universitaires de Genève. All Rights Reserved.
*
* Use of this source code is governed by an Apache-2.0 license that can be
* found in the LICENSE file at https://github.com/DSI-HUG/dejajs-components/blob/master/LICENSE
*/
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, OnDestroy, OnInit, Optional, Self, ViewChild } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { fromEvent as observableFromEvent, merge as observableMerge, Subject, Subscription } from 'rxjs';
import { debounceTime, filter, first, sampleTime, takeUntil, tap } from 'rxjs/operators';
import { Circle } from '../../common/core/graphics/circle';
import { Position } from '../../common/core/graphics/position';
const noop = () => { };
export enum ClockwiseFactorEnum {
clockwise = -1,
counterClockwise = 1,
}
export interface ICircularValue {
position: Position;
value: number;
}
/**
* Circular-picker component for Angular
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'deja-circular-picker',
styles: [require('./circular-picker.component.scss')],
template: require('./circular-picker.component.html'),
})
export class DejaCircularPickerComponent implements OnInit, ControlValueAccessor, OnDestroy {
/** ClockwiseFactor allows user to choose rotation direction of picker */
@Input() public clockwiseFactor: ClockwiseFactorEnum = ClockwiseFactorEnum.clockwise;
/** Diameter of circular picker in pixels. Default 310px */
@Input() public fullDiameter = 310;
/** Diameter of labels on circular picker */
@Input() public labelsDiameter = 43;
/**
* Allows user to choose labels position. If outerLabels is true, labels will come outside the circular picker
*
* With outerLabels = true, and ranges.length > 1, labels will go outwards.
* With outerLabels = false, and ranges.length > 1, labels will go inwards.
*/
@Input() public outerLabels = false;
/** Ranges of circular picker */
@Input() public ranges: ICircularRange[];
/** Template for labels inside picker. Use it to customize labels */
@ContentChild('labelTemplate') public labelTemplate: any;
/** template for cursor inside picker. Use it to customize labels */
@ContentChild('cursorTemplate') public cursorTemplate: any;
/** disabled property setter. Can be string or empty so you can use it like : <circular-picker disabled></circular-picker> */
@Input()
public set disabled(value: boolean | string) {
this._disabled = coerceBooleanProperty(value);
this.changeDetectorRef.markForCheck();
}
/** To get disabled attribute. */
public get disabled() {
return this._disabled;
}
public onTouchedCallback: () => void = noop;
public onChangeCallback: (_: any) => void = noop;
private _disabled = false;
private _value: number;
private TwoPI = Math.PI * 2;
private _radius = 0;
private configs: IConfig[] = [];
private selectedConfig: IConfig;
private _circularValues: ICircularValue[] = [];
private _cursor: ICircularValue;
private _cursorHand: {
width: number;
angle: number;
};
private cursorElement: HTMLElement;
private clickedTime: number;
private mousedown$sub: Subscription;
@ViewChild('picker') private picker: ElementRef;
public get cursorHand() {
return this._cursorHand;
}
public get cursor() {
return this._cursor;
}
public get radius() {
return this._radius;
}
public get circularValues() {
return this._circularValues;
}
/**
* Constructor.
* Create MouseDown & mouseMove Observables needed inside this control.
*/
constructor(elementRef: ElementRef, private changeDetectorRef: ChangeDetectorRef, @Self() @Optional() public _control: NgControl) {
const element = elementRef.nativeElement as HTMLElement;
if (this._control) {
this._control.valueAccessor = this;
}
this.mousedown$sub = observableFromEvent(element, 'mousedown').pipe(
filter(() => !this.disabled),
filter((event: MouseEvent) => event.buttons === 1),
debounceTime(100))
.subscribe((mouseEvent: MouseEvent) => {
this.clickedTime = Date.now();
const cursorElement = this.getHTMLElement(mouseEvent.target as HTMLElement, 'cursor');
const valueElement = this.getHTMLElement(mouseEvent.target as HTMLElement, 'value');
if (cursorElement) {
this.cursorElement = cursorElement;
} else Eif (valueElement) {
this.value = +valueElement.getAttribute('value');
}
Eif (cursorElement || valueElement) {
const kill$ = new Subject();
Eif (!element.ownerDocument.body.className.match(/noselect/)) {
element.ownerDocument.body.className += 'noselect';
}
const cancelMouse$ = observableMerge(kill$, observableFromEvent(element.ownerDocument, 'mouseup')).pipe(
first(),
tap(() => {
delete this.cursorElement;
delete this.clickedTime;
element.ownerDocument.body.className = element.ownerDocument.body.className.replace(/\bnoselect\b/, '');
}));
const pickerElem = this.picker.nativeElement as HTMLElement;
const clientRect = pickerElem.getBoundingClientRect();
observableFromEvent(element.ownerDocument, 'mousemove').pipe(
takeUntil(cancelMouse$),
sampleTime(10))
.subscribe((event: MouseEvent) => {
if (event.buttons !== 1) {
kill$.next();
return;
}
let circle = Circle.fromOuterRect(clientRect);
let contains = false;
Iif (this.outerLabels) {
circle = circle.inflate(this.labelsDiameter);
for (const conf of this.configs) {
contains = circle.containsPoint(new Position(event.pageX, event.pageY));
if (contains) {
this.selectedConfig = conf;
break;
} else {
circle = circle.inflate(this.labelsDiameter);
}
}
} else {
const x = this.labelsDiameter * (this.configs.length - 1);
circle = circle.inflate(-x);
for (let i = this.configs.length; i > 0; i--) {
contains = circle.containsPoint(new Position(event.pageX, event.pageY));
Eif (contains) {
this.selectedConfig = this.configs[i - 1];
break;
} else {
circle = circle.inflate(this.labelsDiameter);
}
}
}
const newValue = this.pointToValue(event.pageX - clientRect.left, event.pageY - clientRect.top, this.selectedConfig);
Eif (newValue !== this.value) {
this.value = newValue;
}
});
}
});
}
/** Unsubscribe to Observables when component is destroyed */
public ngOnDestroy() {
this.mousedown$sub.unsubscribe();
}
/**
* Init circular-picker configuration
*/
public ngOnInit() {
/* max - width */
const diameter = this.fullDiameter - this.labelsDiameter; // Material standard button size
this._radius = diameter / 2;
this.ranges.forEach((range) => {
range.interval = (range.interval) ? range.interval : 1;
range.labelInterval = (range.labelInterval) ? range.labelInterval : 1;
range.beginOffset = (range.beginOffset) ? range.beginOffset : Math.PI / 2;
this.configs.push({
range: range,
stepAngle: this.TwoPI / Math.floor((range.max - range.min + 1) / range.interval),
steps: Math.floor((range.max - range.min + 1) / range.interval),
});
});
this.selectedConfig = this.configs[0];
this.bind();
this.updateCursor();
}
// ************* ControlValueAccessor Implementation **************
/** set accessor including call the onchange callback */
public set value(v: number) {
Eif (v !== this._value) {
this.writeValue(v);
this.onChangeCallback(v);
}
}
/** get accessor */
public get value(): number {
return this._value;
}
/** From ControlValueAccessor interface */
public writeValue(value: number) {
if (value !== this._value) {
this._value = value;
this.updateCursor();
}
}
/** From ControlValueAccessor interface */
public registerOnChange(fn: any) {
this.onChangeCallback = fn;
}
/** From ControlValueAccessor interface */
public registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
public setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
// ************* End of ControlValueAccessor Implementation **************
/**
* Take a point in parameter and return corresponding value
*
* @param x xPos of point
* @param y yPos of point
* @param config config where the point is located
*
* @return value
*/
protected pointToValue(x: number, y: number, config: IConfig) {
const angleAtPoint: number = this.pointToAngle(x - this._radius, y - this._radius, config);
let circleSegmentIndexAtPoint: number = config.steps - Math.ceil(angleAtPoint / config.stepAngle);
// By having pointToAngle() to compute using a half step below the actual angle,
// we can use Math.ceil() to get the upper circleSegmentIndex. We're working in
// counter-clockwise direction, thus we finally get a -1 index when we're just
// below the first circle segment. We can now simply wrap it to the 0 index,
// resulting in the user-expected behavior.
Iif (circleSegmentIndexAtPoint < 0) {
circleSegmentIndexAtPoint = config.steps;
}
return config.range.min + circleSegmentIndexAtPoint * config.range.interval;
}
/**
* Take velue and returns its position
* @param value value to check
* @param radiusOffset Radius to ckeck (if outerLabels are on, the radius offset = fullDiameter + labelsDiameter)
* @param config the config where to check
*
* @return the position of value
*/
protected valueToPoint(value: number, radiusOffset: number, config: IConfig): Position {
const position = new Position();
const valueAngle: number = this.valueToAngle(value, config);
position.left = this._radius + (this._radius + radiusOffset) * Math.cos(valueAngle);
position.top = this._radius - (this._radius + radiusOffset) * Math.sin(valueAngle); // y axis is reversed in display
return position;
}
private pointToAngle(x: number, y: number, config: IConfig): number {
return (
-Math.atan2(y, x) // Math.atan2() returns between -Ï€ and +Ï€, but in inverted trigonometrical order...
- config.range.beginOffset // Correct the configured offset to compute in 'natural' trigonometrical circle
- (config.stepAngle / 2) // Remove half a step angle to match value from both sides
+ this.TwoPI // We want the returned value to be between 0 and 2Ï€ => (x + 2Ï€) % 2Ï€
) % this.TwoPI;
}
private valueToAngle(value: number, config: IConfig): number {
const circleSegmentIndex: number = Math.floor((value - config.range.min) / config.range.interval);
return (circleSegmentIndex * config.stepAngle * this.clockwiseFactor) + config.range.beginOffset;
}
private bind() {
this._circularValues = [];
this.configs.forEach((config: IConfig, configNumber: number) => {
for (let i = config.range.min; i <= config.range.max; i += (config.range.labelInterval * config.range.interval)) {
const val = { value: i } as ICircularValue;
const labelRadius = this.labelsDiameter / 2;
const configOffset = this.labelsDiameter * configNumber;
const labelPosition = this.valueToPoint(i, (this.outerLabels ? labelRadius + configOffset : -labelRadius - configOffset), config);
val.position = new Position((labelPosition.left - labelRadius), (labelPosition.top - labelRadius));
this._circularValues.push(val);
}
});
}
private updateCursor() {
if (!this._circularValues || !this._circularValues.length) {
return;
}
if (this._value === undefined || this._value === null) {
this._value = this._circularValues[0].value;
}
this.selectedConfig = this.configs.find((conf: IConfig) => {
if (this._value >= conf.range.min && this._value <= conf.range.max) {
return true;
}
});
Iif (!this.selectedConfig) {
this.selectedConfig = this.configs[0];
}
const selectedConfigIndex = this.configs.indexOf(this.selectedConfig);
let cursorCenter: Position;
const cursorRadius: number = this.labelsDiameter / 2;
cursorCenter = this.valueToPoint(this._value, (this.outerLabels ? cursorRadius + (this.labelsDiameter * selectedConfigIndex) : -cursorRadius - (this.labelsDiameter * selectedConfigIndex)), this.selectedConfig);
this._cursor = {
position: new Position((cursorCenter.left - cursorRadius), (cursorCenter.top - cursorRadius)),
value: this._value,
};
this._cursorHand = {
angle: this.valueToAngle(this._value, this.selectedConfig),
width: (this.outerLabels) ? this._radius + (this.labelsDiameter * selectedConfigIndex) : this._radius - this.labelsDiameter - (this.labelsDiameter * selectedConfigIndex),
};
this.changeDetectorRef.markForCheck();
}
private getHTMLElement(element: HTMLElement, attr: string): HTMLElement {
let parentElement = element;
while (parentElement && !parentElement.hasAttribute(attr)) {
element = parentElement;
parentElement = parentElement.parentElement;
}
if (!parentElement) {
return undefined;
}
return parentElement;
}
}
export interface IConfig {
range: ICircularRange;
steps: number;
stepAngle: number;
}
export interface ICircularRange {
min: number;
max: number;
interval?: number;
labelInterval?: number; // x*interval
beginOffset?: number;
}
|