-
-
Notifications
You must be signed in to change notification settings - Fork 23
/
checkbox.js
128 lines (115 loc) · 2.71 KB
/
checkbox.js
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
import Input from "@pencil.js/input";
import Square from "@pencil.js/square";
/**
* @module Checkbox
*/
/**
* Checkbox class
* <br><img src="./media/examples/checkbox.png" alt="checkbox demo"/>
* @class
* @extends {module:Input}
*/
export default class Checkbox extends Input {
/**
* Checkbox constructor
* @param {PositionDefinition} positionDefinition - Top-left corner
* @param {CheckboxOptions} [options] - Specific options
*/
constructor (positionDefinition, options) {
super(positionDefinition, Square, options);
const margin = this.options.size * Checkbox.MARGIN;
this.fill = new Square([margin, margin], this.options.size - (2 * margin), {
fill: this.options.foreground,
shown: this.options.value,
cursor: this.options.cursor,
origin: this.getOrigin(),
});
this.add(this.fill);
}
/**
* Get it's width
* @return {Number}
*/
get width () {
return this.options.size;
}
/**
* Set it's width
* @param {Number} value - Width of the checkbox
*/
set width (value) {
this.options.size = value;
}
/**
* Get it's height
* @return {Number}
*/
get height () {
return this.options.size;
}
/**
* Set it's height
* @param {Number} value - Height of the checkbox
*/
set height (value) {
this.options.size = value;
}
/**
* @inheritDoc
*/
click () {
this.toggle();
super.click();
}
/**
* Inverse whether it's checked
* @param {Boolean} [newValue] - If defined, will force the value
* @return {Boolean}
*/
toggle (newValue = !this.value) {
this.value = newValue;
return newValue;
}
/**
* Return whether it's checked
* @return {Boolean}
*/
get value () {
return this.fill.options.shown;
}
/**
* Change whether it's checked
* @param {Boolean} value - New value
*/
set value (value) {
if (value) {
this.fill.show();
}
else {
this.fill.hide();
}
}
/**
* @typedef {Object} CheckboxOptions
* @extends InputOptions
* @prop {Number} [size=20] - Width and height of the checkbox
* @prop {Boolean} [value=false] - Whether it's check ot not
*/
/**
* @type {CheckboxOptions}
*/
static get defaultOptions () {
return {
...super.defaultOptions,
size: 20,
value: false,
};
}
/**
* Margin around the filling square in ratio
* @type {Number}
*/
static get MARGIN () {
return 0.2;
}
}