perfect-gui 4.12.9 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +2 -2
  2. package/dist/perfect-gui.js +379 -280
  3. package/package.json +6 -2
  4. package/src/components/Button.js +33 -20
  5. package/src/components/Color.js +64 -68
  6. package/src/components/Image.js +32 -16
  7. package/src/components/List.js +80 -76
  8. package/src/components/Slider.js +82 -54
  9. package/src/components/Toggle.js +59 -55
  10. package/src/components/Vector2.js +157 -72
  11. package/src/index.js +16 -17
  12. package/src/styles/styles.js +1 -0
package/package.json CHANGED
@@ -1,9 +1,13 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
3
  "type": "module",
4
- "version": "4.12.9",
4
+ "version": "5.0.0",
5
5
  "description": "GUI for JavaScript",
6
- "main": "src/index.js",
6
+ "main": "dist/perfect-gui.js",
7
+ "module": "dist/perfect-gui.js",
8
+ "exports": {
9
+ ".": "./dist/perfect-gui.js"
10
+ },
7
11
  "scripts": {
8
12
  "build": "vite build"
9
13
  },
package/src/components/Button.js CHANGED
@@ -1,44 +1,57 @@
1
- export default class Slider {
2
- constructor(parent, params = {}, callback) {
1
+ export default class Button {
2
+ constructor(parent, params = {}) {
3
3
  this.parent = parent;
4
+ this.callback = null;
4
5
 
5
- let label = '';
6
- if (typeof params != 'string') {
7
- if (typeof params == 'object' && params?.hasOwnProperty('label')) {
8
- label = params.label == '' ? ' ' : params.label;
9
- } else {
10
- label = ' ';
11
- }
12
- } else {
13
- label = params == '' ? ' ' : params;
6
+ if (typeof params !== 'object') {
7
+ throw Error(
8
+ `[GUI] button() first parameter must be an object. Received: ${typeof params}.`,
9
+ );
14
10
  }
15
11
 
16
- const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
17
-
12
+ let label = params.label || ' ';
13
+
14
+ const tooltip =
15
+ typeof params.tooltip === 'string'
16
+ ? params.tooltip
17
+ : params.tooltip === true
18
+ ? label
19
+ : null;
20
+
18
21
  const el = document.createElement('div');
19
22
  el.className = 'p-gui__button';
20
23
  el.textContent = label;
21
- if ( tooltip ) {
24
+ if (tooltip) {
22
25
  el.setAttribute('title', tooltip);
23
26
  }
24
27
  el.addEventListener('click', () => {
25
- if (callback) {
26
- callback();
28
+ if (this.callback) {
29
+ this.callback();
27
30
  }
28
31
 
29
32
  if (this.parent.onUpdate) {
30
33
  this.parent.onUpdate();
31
- } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
34
+ } else if (
35
+ this.parent.isFolder &&
36
+ this.parent.firstParent.onUpdate
37
+ ) {
32
38
  this.parent.firstParent.onUpdate();
33
39
  }
34
40
  });
35
41
 
36
42
  if (typeof params.color == 'string') {
37
43
  el.style.setProperty('--color-accent', params.color);
38
- el.style.setProperty('--color-accent-hover', params.hoverColor || params.color);
44
+ el.style.setProperty(
45
+ '--color-accent-hover',
46
+ params.hoverColor || params.color,
47
+ );
39
48
  }
40
49
 
41
50
  this.parent.wrapper.append(el);
42
- return el;
43
51
  }
44
- }
52
+
53
+ onClick(callback) {
54
+ this.callback = callback;
55
+ return this;
56
+ }
57
+ }
package/src/components/Color.js CHANGED
@@ -1,63 +1,57 @@
1
1
  export default class Color {
2
- constructor(parent, params = {}, callback) {
2
+ constructor(parent, arg1, arg2, arg3) {
3
3
  this.parent = parent;
4
+ this.callback = null;
4
5
 
5
- if (typeof params != 'object') {
6
- throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof params}.`);
7
- }
8
-
9
- let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
10
-
6
+ let params = {};
7
+ let value = null;
11
8
  let isObject = false;
12
- let propReferenceIndex = null;
13
- let obj = params.obj;
14
- let prop = params.prop;
15
- let value;
16
- const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
17
-
18
- if (typeof params.value == 'string') {
19
- if (params.value.length != 7 || params.value[0] != '#') {
20
- console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${params.value}".`)
21
- }
22
- else {
23
- value = params.value;
24
- }
25
- }
26
- if (!value) value = '#000000';
9
+ let obj, prop;
27
10
 
28
- // callback mode
29
- if ( params.value !== undefined ) {
30
- if (prop != undefined || obj != undefined) {
31
- console.warn(`[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
32
- }
11
+ if (arg1 && typeof arg1 === 'object' && typeof arg2 === 'string') {
12
+ obj = arg1;
13
+ prop = arg2;
14
+ isObject = true;
15
+ params = arg3 || {};
16
+ } else if (arg1 && typeof arg1 === 'object') {
17
+ isObject = false;
18
+ params = arg1;
19
+ } else {
20
+ throw Error(`[GUI] color() invalid parameters.`);
33
21
  }
34
22
 
35
- // object-binding
36
- else if (prop != undefined && obj != undefined) {
37
- if (typeof prop != 'string') {
38
- throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof prop}.`);
39
- }
40
- if (typeof obj != 'object') {
41
- throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof obj}.`);
23
+ let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
24
+ let propReferenceIndex = null;
25
+ const tooltip =
26
+ typeof params.tooltip === 'string'
27
+ ? params.tooltip
28
+ : params.tooltip === true
29
+ ? label
30
+ : null;
31
+
32
+ if (!isObject) {
33
+ if (typeof params.value == 'string') {
34
+ if (params.value.length != 7 || params.value[0] != '#') {
35
+ console.error(
36
+ `[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${params.value}".`,
37
+ );
38
+ } else {
39
+ value = params.value;
40
+ }
42
41
  }
43
-
42
+ if (!value) value = '#000000';
43
+ } else {
44
44
  if (label == ' ') {
45
45
  label = prop;
46
46
  }
47
-
48
47
  propReferenceIndex = this.parent.propReferences.push(obj[prop]) - 1;
49
- isObject = true;
50
- }
51
- else {
52
- if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
53
- console.warn(`[GUI] color() "obj" and "prop" parameters must be used together.`);
54
- }
48
+ value = obj[prop] || '#000000';
55
49
  }
56
50
 
57
51
  const container = document.createElement('div');
58
52
  container.className = 'p-gui__color';
59
53
  container.textContent = label;
60
- if ( tooltip ) {
54
+ if (tooltip) {
61
55
  container.setAttribute('title', tooltip);
62
56
  }
63
57
  this.parent.wrapper.append(container);
@@ -68,41 +62,43 @@ export default class Color {
68
62
  colorpicker.value = value;
69
63
  container.append(colorpicker);
70
64
 
71
- if (typeof callback == 'function') {
72
- colorpicker.addEventListener('input', () => {
73
- if ( isObject ) {
74
- obj[prop] = colorpicker.value;
75
- }
76
-
77
- else if (typeof callback == 'function') {
78
- callback(colorpicker.value);
79
- }
65
+ colorpicker.addEventListener('input', () => {
66
+ if (isObject) {
67
+ obj[prop] = colorpicker.value;
68
+ } else if (typeof this.callback == 'function') {
69
+ this.callback(colorpicker.value);
70
+ }
80
71
 
81
- if (this.parent.onUpdate) {
82
- this.parent.onUpdate();
83
- } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
84
- this.parent.firstParent.onUpdate();
85
- }
86
- });
87
- }
72
+ if (this.parent.onUpdate) {
73
+ this.parent.onUpdate();
74
+ } else if (
75
+ this.parent.isFolder &&
76
+ this.parent.firstParent.onUpdate
77
+ ) {
78
+ this.parent.firstParent.onUpdate();
79
+ }
80
+ });
88
81
 
89
- if ( isObject ) {
90
- Object.defineProperty( obj, prop, {
91
- set: val => {
82
+ if (isObject) {
83
+ Object.defineProperty(obj, prop, {
84
+ set: (val) => {
92
85
  this.parent.propReferences[propReferenceIndex] = val;
93
86
 
94
87
  colorpicker.value = val;
95
88
 
96
- if (typeof callback == 'function') {
97
- callback(val);
89
+ if (typeof this.callback == 'function') {
90
+ this.callback(val);
98
91
  }
99
92
  },
100
- get: () => {
93
+ get: () => {
101
94
  return this.parent.propReferences[propReferenceIndex];
102
- }
95
+ },
103
96
  });
104
97
  }
98
+ }
105
99
 
106
- return container;
100
+ onChange(callback) {
101
+ this.callback = callback;
102
+ return this;
107
103
  }
108
- }
104
+ }
package/src/components/Image.js CHANGED
@@ -1,11 +1,14 @@
1
1
  export default class Image {
2
- constructor(parent, params = {}, callback) {
2
+ constructor(parent, params = {}) {
3
3
  this.parent = parent;
4
+ this.callback = null;
4
5
 
5
6
  if (typeof params != 'object') {
6
- throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof params}.`);
7
+ throw Error(
8
+ `[GUI] image() first parameter must be an object. Received: ${typeof params}.`,
9
+ );
7
10
  }
8
-
11
+
9
12
  let path;
10
13
  if (typeof params.path == 'string') {
11
14
  path = params.path;
@@ -24,11 +27,16 @@ export default class Image {
24
27
  label = typeof params.label == 'string' ? params.label || ' ' : ' ';
25
28
  }
26
29
 
27
- const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
30
+ const tooltip =
31
+ typeof params.tooltip === 'string'
32
+ ? params.tooltip
33
+ : params.tooltip === true
34
+ ? label
35
+ : null;
28
36
 
29
37
  const selected = params.selected === true;
30
38
  const selectionBorder = params.selectionBorder !== false;
31
-
39
+
32
40
  // width & height options
33
41
  let inline_styles = '';
34
42
  if (params.width) {
@@ -37,19 +45,19 @@ export default class Image {
37
45
  }
38
46
  inline_styles += `flex: 0 0 calc(${params.width} - 5px); `;
39
47
  }
40
-
48
+
41
49
  if (params.height) {
42
50
  if (typeof params.height == 'number') {
43
51
  params.height += 'px';
44
52
  }
45
53
  inline_styles += `height: ${params.height}; `;
46
- }
54
+ }
47
55
 
48
56
  // Image button
49
57
  const image = document.createElement('div');
50
58
  image.className = 'p-gui__image';
51
59
  image.style = 'background-image: url(' + path + '); ' + inline_styles;
52
- if ( tooltip ) {
60
+ if (tooltip) {
53
61
  image.setAttribute('title', tooltip);
54
62
  }
55
63
  this.parent.imageContainer.append(image);
@@ -57,31 +65,39 @@ export default class Image {
57
65
  if (selected && selectionBorder) {
58
66
  image.classList.add('p-gui__image--selected');
59
67
  }
60
-
68
+
61
69
  // Text inside image
62
70
  const text = document.createElement('div');
63
71
  text.className = 'p-gui__image-text';
64
72
  text.textContent = label;
65
73
  image.append(text);
66
-
74
+
67
75
  image.addEventListener('click', () => {
68
- let selected_items = image.parentElement.querySelectorAll('.p-gui__image--selected');
76
+ let selected_items = image.parentElement.querySelectorAll(
77
+ '.p-gui__image--selected',
78
+ );
69
79
  for (let i = 0; i < selected_items.length; i++) {
70
80
  selected_items[i].classList.remove('p-gui__image--selected');
71
81
  }
72
82
  if (selectionBorder) {
73
83
  image.classList.add('p-gui__image--selected');
74
84
  }
75
- if (typeof callback == 'function') {
76
- callback({ path, text: label });
85
+ if (typeof this.callback == 'function') {
86
+ this.callback({ path, text: label });
77
87
  }
78
88
  if (this.parent.onUpdate) {
79
89
  this.parent.onUpdate();
80
- } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
90
+ } else if (
91
+ this.parent.isFolder &&
92
+ this.parent.firstParent.onUpdate
93
+ ) {
81
94
  this.parent.firstParent.onUpdate();
82
95
  }
83
96
  });
97
+ }
84
98
 
85
- return image;
99
+ onClick(callback) {
100
+ this.callback = callback;
101
+ return this;
86
102
  }
87
- }
103
+ }
package/src/components/List.js CHANGED
@@ -1,30 +1,38 @@
1
1
  export default class List {
2
- constructor(parent, params = {}, callback) {
2
+ constructor(parent, arg1, arg2, arg3) {
3
3
  this.parent = parent;
4
+ this.callback = null;
4
5
 
5
- if (typeof params != 'object') {
6
- throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof params}.`);
6
+ let params = {};
7
+ let value = null;
8
+ let isObject = false;
9
+ let obj, prop;
10
+
11
+ if (arg1 && typeof arg1 === 'object' && typeof arg2 === 'string') {
12
+ obj = arg1;
13
+ prop = arg2;
14
+ isObject = true;
15
+ params = arg3 || {};
16
+ } else if (arg1 && typeof arg1 === 'object') {
17
+ isObject = false;
18
+ params = arg1;
19
+ } else {
20
+ throw Error(`[GUI] list() invalid parameters.`);
7
21
  }
8
22
 
9
23
  let label = typeof params.label == 'string' ? params.label : ' ';
10
- let isObject = false;
11
24
  let propReferenceIndex = null;
12
- let obj = params.obj;
13
- let prop = params.prop;
14
25
  let values = Array.isArray(params.values) ? params.values : null;
15
- let value;
16
- let objectValues = typeof values[0] == 'string' ? false : true;
17
- const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
18
-
19
- callback = typeof callback == 'function' ? callback : null;
20
-
21
- // callback mode
22
- if ( params.value !== undefined ||
23
- (params.value === undefined && obj === undefined && prop === undefined)) {
24
- if (prop != undefined || obj != undefined) {
25
- console.warn(`[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
26
- }
27
-
26
+ let objectValues =
27
+ values && values.length > 0 && typeof values[0] === 'object';
28
+ const tooltip =
29
+ typeof params.tooltip === 'string'
30
+ ? params.tooltip
31
+ : params.tooltip === true
32
+ ? label
33
+ : null;
34
+
35
+ if (!isObject) {
28
36
  value = (() => {
29
37
  if (!values) {
30
38
  return null;
@@ -36,47 +44,34 @@ export default class List {
36
44
  return params.value;
37
45
  }
38
46
  })();
39
- }
40
-
41
- // object-binding mode
42
- else if (prop != undefined && obj != undefined) {
43
- if (typeof prop != 'string') {
44
- throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof prop}.`);
45
- }
46
- if (typeof obj != 'object') {
47
- throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof obj}.`);
48
- }
49
-
50
- value = (() => {
47
+ } else {
48
+ value = (() => {
51
49
  if (!values) {
52
50
  return null;
53
51
  }
54
52
  if (typeof obj[prop] == 'string') {
55
- if ( !objectValues ) { // values is an array of strings
53
+ if (!objectValues) {
54
+ // values is an array of strings
56
55
  return values.indexOf(obj[prop]);
57
- }
58
- else { // values is an array of objects
59
- return values.find(item => item.value === obj[prop]).value;
56
+ } else {
57
+ // values is an array of objects
58
+ return values.find((item) => item.value === obj[prop])
59
+ .value;
60
60
  }
61
61
  }
62
62
  if (typeof obj[prop] == 'number') {
63
- if ( !objectValues ) { // values is an array of strings
63
+ if (!objectValues) {
64
+ // values is an array of strings
64
65
  return obj[prop];
65
- }
66
- else { // values is an array of objects
67
- return values.find(item => item.value === obj[prop]).value;
66
+ } else {
67
+ // values is an array of objects
68
+ return values.find((item) => item.value === obj[prop])
69
+ .value;
68
70
  }
69
71
  }
70
72
  })();
71
73
 
72
74
  propReferenceIndex = this.parent.propReferences.push(obj[prop]) - 1;
73
- isObject = true;
74
- }
75
-
76
- else {
77
- if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
78
- console.warn(`[GUI] list() "obj" and "prop" parameters must be used together.`);
79
- }
80
75
  }
81
76
 
82
77
  let container = document.createElement('div');
@@ -91,25 +86,24 @@ export default class List {
91
86
  container.append(select);
92
87
  select.className = 'p-gui__list-dropdown';
93
88
  select.addEventListener('change', (ev) => {
94
- if ( isObject ) {
89
+ if (isObject) {
95
90
  obj[prop] = ev.target.value;
96
- }
97
-
98
- else if (callback) {
99
- callback(ev.target.value);
91
+ } else if (this.callback) {
92
+ this.callback(ev.target.value);
100
93
  }
101
94
 
102
95
  if (this.parent.onUpdate) {
103
96
  this.parent.onUpdate();
104
- } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
97
+ } else if (
98
+ this.parent.isFolder &&
99
+ this.parent.firstParent.onUpdate
100
+ ) {
105
101
  this.parent.firstParent.onUpdate();
106
102
  }
107
103
  });
108
104
 
109
- if (values)
110
- {
111
- values.forEach((item, index) =>
112
- {
105
+ if (values) {
106
+ values.forEach((item, index) => {
113
107
  const optionName = objectValues ? item.label : item;
114
108
  const optionValue = objectValues ? item.value : item;
115
109
  let option = document.createElement('option');
@@ -117,18 +111,21 @@ export default class List {
117
111
  option.textContent = optionName;
118
112
  select.append(option);
119
113
 
120
- if (!objectValues && value == index || objectValues && value == optionValue) {
114
+ if (
115
+ (!objectValues && value == index) ||
116
+ (objectValues && value == optionValue)
117
+ ) {
121
118
  option.setAttribute('selected', '');
122
119
  }
123
120
  });
124
121
  }
125
122
 
126
- if ( isObject ) {
127
- Object.defineProperty( obj, prop, {
128
- set: val => {
129
- let newIndex, newValue, newObj;
123
+ if (isObject) {
124
+ Object.defineProperty(obj, prop, {
125
+ set: (val) => {
126
+ let newIndex, newValue, newObj;
130
127
  if (objectValues) {
131
- newObj = values.find(item => {
128
+ newObj = values.find((item) => {
132
129
  return item.value == val;
133
130
  });
134
131
  newValue = newObj?.value || values[0].value;
@@ -143,29 +140,36 @@ export default class List {
143
140
  newValue = values[val];
144
141
  }
145
142
  }
146
-
147
- this.parent.propReferences[propReferenceIndex] = objectValues ? newValue : val;
148
143
 
149
- const previousSelection = select.querySelector('[selected]');
150
- if ( previousSelection ) {
151
- previousSelection.removeAttribute('selected')
144
+ this.parent.propReferences[propReferenceIndex] =
145
+ objectValues ? newValue : val;
146
+
147
+ const previousSelection =
148
+ select.querySelector('[selected]');
149
+ if (previousSelection) {
150
+ previousSelection.removeAttribute('selected');
152
151
  }
153
- select.querySelectorAll('option')[newIndex].setAttribute('selected', '');
154
-
155
- if (typeof callback == 'function') {
152
+ select
153
+ .querySelectorAll('option')
154
+ [newIndex].setAttribute('selected', '');
155
+
156
+ if (typeof this.callback == 'function') {
156
157
  if (objectValues) {
157
- callback(newObj, newIndex);
158
+ this.callback(newObj, newIndex);
158
159
  } else {
159
- callback(newValue, newIndex);
160
+ this.callback(newValue, newIndex);
160
161
  }
161
162
  }
162
163
  },
163
- get: () => {
164
+ get: () => {
164
165
  return this.parent.propReferences[propReferenceIndex];
165
- }
166
+ },
166
167
  });
167
168
  }
169
+ }
168
170
 
169
- return container;
171
+ onChange(callback) {
172
+ this.callback = callback;
173
+ return this;
170
174
  }
171
- }
175
+ }