@adcops/autocore-react 3.3.8 → 3.3.10

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 (215) hide show
  1. package/LICENSE +58 -58
  2. package/additional-docs/AutoCoreTagContext.md +441 -441
  3. package/additional-docs/ButtonApiSpecs.md +48 -48
  4. package/additional-docs/GlobalEventEmitter.md +243 -243
  5. package/additional-docs/general_recommendations.md +22 -22
  6. package/additional-docs/react_performance_notes.md +94 -94
  7. package/dist/assets/svg/blockly_logo.svg +82 -82
  8. package/dist/assets/svg/distance.svg +40 -40
  9. package/dist/assets/svg/python_logo.svg +246 -246
  10. package/dist/assets/svg/rotation_ccw.svg +50 -50
  11. package/dist/assets/svg/rotation_ccw_a.svg +57 -57
  12. package/dist/assets/svg/rotation_ccw_b.svg +57 -57
  13. package/dist/assets/svg/rotation_ccw_c.svg +57 -57
  14. package/dist/assets/svg/rotation_cw.svg +49 -49
  15. package/dist/assets/svg/rotation_cw_a.svg +30 -30
  16. package/dist/assets/svg/rotation_cw_b.svg +30 -30
  17. package/dist/assets/svg/rotation_cw_c.svg +30 -30
  18. package/dist/assets/svg/speed.svg +39 -39
  19. package/dist/components/BlocklyEditor.css +93 -93
  20. package/dist/components/JogPanel.css +41 -41
  21. package/dist/components/ProgressBarWithValue.css +27 -27
  22. package/dist/components/ValueIndicator.css +31 -31
  23. package/dist/components/osk.css +123 -123
  24. package/dist/core/AutoCoreTagContext.d.ts.map +1 -1
  25. package/dist/core/AutoCoreTagContext.js +1 -1
  26. package/dist/hub/HubBase.d.ts +3 -3
  27. package/dist/hub/HubBase.d.ts.map +1 -1
  28. package/dist/hub/HubBase.js +1 -1
  29. package/package.json +104 -104
  30. package/readme.md +343 -343
  31. package/src/assets/BlocklyLogo.tsx +27 -27
  32. package/src/assets/Distance.tsx +18 -18
  33. package/src/assets/JogLong.tsx +13 -13
  34. package/src/assets/JogMedium.tsx +13 -13
  35. package/src/assets/JogShort.tsx +13 -13
  36. package/src/assets/PythonLogo.tsx +83 -83
  37. package/src/assets/Rotation3D.tsx +13 -13
  38. package/src/assets/RotationCcw.tsx +33 -33
  39. package/src/assets/RotationCcwA.tsx +45 -45
  40. package/src/assets/RotationCcwB.tsx +45 -45
  41. package/src/assets/RotationCcwC.tsx +45 -45
  42. package/src/assets/RotationCw.tsx +31 -31
  43. package/src/assets/RotationCwA.tsx +42 -42
  44. package/src/assets/RotationCwB.tsx +42 -42
  45. package/src/assets/RotationCwC.tsx +42 -42
  46. package/src/assets/Run.tsx +13 -13
  47. package/src/assets/Speed.tsx +18 -18
  48. package/src/assets/SpeedFast.tsx +13 -13
  49. package/src/assets/SpeedMedium.tsx +13 -13
  50. package/src/assets/SpeedNone.tsx +13 -13
  51. package/src/assets/SpeedSlow.tsx +13 -13
  52. package/src/assets/Walk.tsx +13 -13
  53. package/src/assets/index.ts +22 -22
  54. package/src/assets/svg/blockly_logo.svg +82 -82
  55. package/src/assets/svg/distance.svg +40 -40
  56. package/src/assets/svg/python_logo.svg +246 -246
  57. package/src/assets/svg/rotation_ccw.svg +50 -50
  58. package/src/assets/svg/rotation_ccw_a.svg +57 -57
  59. package/src/assets/svg/rotation_ccw_b.svg +57 -57
  60. package/src/assets/svg/rotation_ccw_c.svg +57 -57
  61. package/src/assets/svg/rotation_cw.svg +49 -49
  62. package/src/assets/svg/rotation_cw_a.svg +30 -30
  63. package/src/assets/svg/rotation_cw_b.svg +30 -30
  64. package/src/assets/svg/rotation_cw_c.svg +30 -30
  65. package/src/assets/svg/speed.svg +39 -39
  66. package/src/components/AutoCoreDevPanel.tsx +414 -414
  67. package/src/components/BlocklyEditor.css +93 -93
  68. package/src/components/BlocklyEditor.tsx +609 -609
  69. package/src/components/CodeEditor.tsx +155 -155
  70. package/src/components/FileList.tsx +390 -390
  71. package/src/components/FileSelect.tsx +128 -128
  72. package/src/components/FitText.tsx +35 -35
  73. package/src/components/Indicator.tsx +188 -188
  74. package/src/components/IndicatorButton.tsx +214 -214
  75. package/src/components/IndicatorRect.tsx +172 -172
  76. package/src/components/JogPanel.css +41 -41
  77. package/src/components/JogPanel.tsx +461 -461
  78. package/src/components/Lamp.tsx +243 -243
  79. package/src/components/Osk.tsx +192 -192
  80. package/src/components/OskDialog.tsx +164 -164
  81. package/src/components/ProgressBarWithValue.css +27 -27
  82. package/src/components/ProgressBarWithValue.tsx +48 -48
  83. package/src/components/TextInput.tsx +195 -195
  84. package/src/components/ToggleGroup.tsx +322 -322
  85. package/src/components/ValueDisplay.tsx +236 -236
  86. package/src/components/ValueIndicator.css +31 -31
  87. package/src/components/ValueIndicator.tsx +135 -135
  88. package/src/components/ValueInput.tsx +368 -368
  89. package/src/components/osk.css +123 -123
  90. package/src/core/ActionMode.ts +19 -19
  91. package/src/core/AutoCoreTagContext.tsx +625 -614
  92. package/src/core/AutoCoreTagTypes.ts +334 -334
  93. package/src/core/CoreStreamTypes.ts +512 -512
  94. package/src/core/EventEmitterContext.tsx +434 -434
  95. package/src/core/IndicatorButtonState.ts +34 -34
  96. package/src/core/IndicatorColor.ts +35 -35
  97. package/src/core/MaskPatterns.ts +87 -87
  98. package/src/core/NumerableTypes.ts +80 -80
  99. package/src/core/PositionContext.ts +59 -59
  100. package/src/core/UniqueId.ts +41 -41
  101. package/src/core/ValueSimulator.ts +166 -166
  102. package/src/core/hoc.tsx +65 -65
  103. package/src/hooks/adsHooks.tsx +287 -287
  104. package/src/hooks/commandHooks.tsx +300 -300
  105. package/src/hooks/index.ts +12 -12
  106. package/src/hooks/useAutoCoreTag.ts +103 -103
  107. package/src/hooks/useScaledValue.tsx +99 -99
  108. package/src/hub/CommandMessage.ts +89 -89
  109. package/src/hub/DebugPanel.ts +307 -307
  110. package/src/hub/HubBase.ts +249 -236
  111. package/src/hub/HubSimulate.ts +124 -124
  112. package/src/hub/HubTauri.ts +140 -140
  113. package/src/hub/HubWebSocket.ts +250 -250
  114. package/src/hub/debug.ts +211 -211
  115. package/src/hub/index.ts +81 -81
  116. package/src/themes/adc-dark/_extensions.scss +166 -166
  117. package/src/themes/adc-dark/_variables.scss +913 -913
  118. package/src/themes/adc-dark/blue/_fonts.scss +23 -23
  119. package/src/themes/adc-dark/blue/adc_theme.scss +31 -31
  120. package/src/themes/adc-dark/blue/theme.scss +14 -14
  121. package/src/themes/theme-base/_colors.scss +17 -17
  122. package/src/themes/theme-base/_common.scss +74 -74
  123. package/src/themes/theme-base/_components.scss +111 -111
  124. package/src/themes/theme-base/_mixins.scss +243 -243
  125. package/src/themes/theme-base/components/button/_button.scss +644 -644
  126. package/src/themes/theme-base/components/button/_speeddial.scss +91 -91
  127. package/src/themes/theme-base/components/button/_splitbutton.scss +358 -358
  128. package/src/themes/theme-base/components/data/_carousel.scss +39 -39
  129. package/src/themes/theme-base/components/data/_datascroller.scss +47 -47
  130. package/src/themes/theme-base/components/data/_datatable.scss +388 -388
  131. package/src/themes/theme-base/components/data/_dataview.scss +47 -47
  132. package/src/themes/theme-base/components/data/_filter.scss +137 -137
  133. package/src/themes/theme-base/components/data/_orderlist.scss +86 -86
  134. package/src/themes/theme-base/components/data/_organizationchart.scss +50 -50
  135. package/src/themes/theme-base/components/data/_paginator.scss +91 -91
  136. package/src/themes/theme-base/components/data/_picklist.scss +73 -73
  137. package/src/themes/theme-base/components/data/_timeline.scss +38 -38
  138. package/src/themes/theme-base/components/data/_tree.scss +184 -184
  139. package/src/themes/theme-base/components/data/_treetable.scss +431 -431
  140. package/src/themes/theme-base/components/file/_fileupload.scss +41 -41
  141. package/src/themes/theme-base/components/input/_autocomplete.scss +94 -94
  142. package/src/themes/theme-base/components/input/_calendar.scss +251 -251
  143. package/src/themes/theme-base/components/input/_cascadeselect.scss +107 -107
  144. package/src/themes/theme-base/components/input/_checkbox.scss +181 -181
  145. package/src/themes/theme-base/components/input/_chips.scss +102 -102
  146. package/src/themes/theme-base/components/input/_colorpicker.scss +17 -17
  147. package/src/themes/theme-base/components/input/_dropdown.scss +252 -252
  148. package/src/themes/theme-base/components/input/_editor.scss +122 -122
  149. package/src/themes/theme-base/components/input/_iconfield.scss +9 -9
  150. package/src/themes/theme-base/components/input/_inputgroup.scss +74 -74
  151. package/src/themes/theme-base/components/input/_inputicon.scss +14 -14
  152. package/src/themes/theme-base/components/input/_inputnumber.scss +4 -4
  153. package/src/themes/theme-base/components/input/_inputotp.scss +10 -10
  154. package/src/themes/theme-base/components/input/_inputswitch.scss +99 -99
  155. package/src/themes/theme-base/components/input/_inputtext.scss +101 -101
  156. package/src/themes/theme-base/components/input/_listbox.scss +138 -138
  157. package/src/themes/theme-base/components/input/_mention.scss +30 -30
  158. package/src/themes/theme-base/components/input/_multiselect.scss +278 -278
  159. package/src/themes/theme-base/components/input/_password.scss +32 -32
  160. package/src/themes/theme-base/components/input/_radiobutton.scss +169 -169
  161. package/src/themes/theme-base/components/input/_rating.scss +80 -80
  162. package/src/themes/theme-base/components/input/_selectbutton.scss +49 -49
  163. package/src/themes/theme-base/components/input/_slider.scss +49 -49
  164. package/src/themes/theme-base/components/input/_togglebutton.scss +99 -99
  165. package/src/themes/theme-base/components/input/_treeselect.scss +151 -151
  166. package/src/themes/theme-base/components/input/_tristatecheckbox.scss +46 -46
  167. package/src/themes/theme-base/components/menu/_breadcrumb.scss +42 -42
  168. package/src/themes/theme-base/components/menu/_contextmenu.scss +39 -39
  169. package/src/themes/theme-base/components/menu/_dock.scss +109 -109
  170. package/src/themes/theme-base/components/menu/_megamenu.scss +141 -141
  171. package/src/themes/theme-base/components/menu/_menu.scss +33 -33
  172. package/src/themes/theme-base/components/menu/_menubar.scss +216 -216
  173. package/src/themes/theme-base/components/menu/_panelmenu.scss +153 -153
  174. package/src/themes/theme-base/components/menu/_slidemenu.scss +60 -60
  175. package/src/themes/theme-base/components/menu/_steps.scss +57 -57
  176. package/src/themes/theme-base/components/menu/_tabmenu.scss +50 -50
  177. package/src/themes/theme-base/components/menu/_tieredmenu.scss +43 -43
  178. package/src/themes/theme-base/components/messages/_inlinemessage.scss +69 -69
  179. package/src/themes/theme-base/components/messages/_message.scss +107 -107
  180. package/src/themes/theme-base/components/messages/_toast.scss +100 -100
  181. package/src/themes/theme-base/components/misc/_avatar.scss +33 -33
  182. package/src/themes/theme-base/components/misc/_badge.scss +76 -76
  183. package/src/themes/theme-base/components/misc/_chip.scss +38 -38
  184. package/src/themes/theme-base/components/misc/_inplace.scss +17 -17
  185. package/src/themes/theme-base/components/misc/_metergroup.scss +80 -80
  186. package/src/themes/theme-base/components/misc/_progressbar.scss +17 -17
  187. package/src/themes/theme-base/components/misc/_scrolltop.scss +24 -24
  188. package/src/themes/theme-base/components/misc/_skeleton.scss +7 -7
  189. package/src/themes/theme-base/components/misc/_tag.scss +39 -39
  190. package/src/themes/theme-base/components/misc/_terminal.scss +12 -12
  191. package/src/themes/theme-base/components/multimedia/_galleria.scss +153 -153
  192. package/src/themes/theme-base/components/multimedia/_image.scss +53 -53
  193. package/src/themes/theme-base/components/overlay/_confirmpopup.scss +72 -72
  194. package/src/themes/theme-base/components/overlay/_dialog.scss +78 -78
  195. package/src/themes/theme-base/components/overlay/_overlaypanel.scss +64 -64
  196. package/src/themes/theme-base/components/overlay/_sidebar.scss +23 -23
  197. package/src/themes/theme-base/components/overlay/_tooltip.scss +33 -33
  198. package/src/themes/theme-base/components/panel/_accordion.scss +118 -118
  199. package/src/themes/theme-base/components/panel/_card.scss +30 -30
  200. package/src/themes/theme-base/components/panel/_divider.scss +30 -30
  201. package/src/themes/theme-base/components/panel/_fieldset.scss +47 -47
  202. package/src/themes/theme-base/components/panel/_panel.scss +47 -47
  203. package/src/themes/theme-base/components/panel/_scrollpanel.scss +10 -10
  204. package/src/themes/theme-base/components/panel/_splitter.scss +23 -23
  205. package/src/themes/theme-base/components/panel/_stepper.scss +136 -136
  206. package/src/themes/theme-base/components/panel/_tabview.scss +147 -147
  207. package/src/themes/theme-base/components/panel/_toolbar.scss +11 -11
  208. package/terser.config.cjs +25 -25
  209. package/todo.md +18 -18
  210. package/tools/build-themes.cjs +65 -65
  211. package/tools/copy-distribution-files.cjs +77 -77
  212. package/tools/minify.cjs +55 -55
  213. package/tsconfig.json +48 -48
  214. package/typedoc.json +12 -12
  215. package/.claude/settings.local.json +0 -7
@@ -1,41 +1,41 @@
1
-
2
-
3
-
4
- /**
5
- * Generate a unique UUID in the form of RF4122.
6
- * @returns string
7
- */
8
- const PrivateUniqueId = (function()
9
- {
10
- function chr4()
11
- {
12
- return Math.random().toString(16).slice(-4);
13
- }
14
-
15
- return chr4() + chr4() +
16
- '-' + chr4() +
17
- '-' + chr4() +
18
- '-' + chr4() +
19
- '-' + chr4() + chr4() + chr4();
20
- });
21
-
22
-
23
- /**
24
- * Generates a unique UUID per RFC4122.
25
- * 8 chars, followed by 3 groups of 4 chars, followed by 12 chars.
26
- *
27
- * @returns string UUID
28
- *
29
- * ## Remarks
30
- * NOTE: This format of 8 chars, followed by 3 groups of 4 chars, followed by 12 chars
31
- * is known as a UUID and is defined in RFC4122 and is a standard for generating unique IDs.
32
- * This function DOES NOT implement this standard. It simply outputs a string
33
- * that looks similar. The standard is found here: https://www.ietf.org/rfc/rfc4122.txt
34
- *
35
- * Should avoid duplicates over 10-millions subsequent calls.
36
- *
37
- */
38
- export function UniqueId() : string {
39
- return PrivateUniqueId();
40
- }
41
-
1
+
2
+
3
+
4
+ /**
5
+ * Generate a unique UUID in the form of RF4122.
6
+ * @returns string
7
+ */
8
+ const PrivateUniqueId = (function()
9
+ {
10
+ function chr4()
11
+ {
12
+ return Math.random().toString(16).slice(-4);
13
+ }
14
+
15
+ return chr4() + chr4() +
16
+ '-' + chr4() +
17
+ '-' + chr4() +
18
+ '-' + chr4() +
19
+ '-' + chr4() + chr4() + chr4();
20
+ });
21
+
22
+
23
+ /**
24
+ * Generates a unique UUID per RFC4122.
25
+ * 8 chars, followed by 3 groups of 4 chars, followed by 12 chars.
26
+ *
27
+ * @returns string UUID
28
+ *
29
+ * ## Remarks
30
+ * NOTE: This format of 8 chars, followed by 3 groups of 4 chars, followed by 12 chars
31
+ * is known as a UUID and is defined in RFC4122 and is a standard for generating unique IDs.
32
+ * This function DOES NOT implement this standard. It simply outputs a string
33
+ * that looks similar. The standard is found here: https://www.ietf.org/rfc/rfc4122.txt
34
+ *
35
+ * Should avoid duplicates over 10-millions subsequent calls.
36
+ *
37
+ */
38
+ export function UniqueId() : string {
39
+ return PrivateUniqueId();
40
+ }
41
+
@@ -1,167 +1,167 @@
1
- /*
2
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
3
- * Created Date: 2024-01-18 12:49:58
4
- * Author: Thomas C. Bitsky Jr.
5
- * -----
6
- * Last Modified: 2025-09-05 14:50:12
7
- * Modified By: ADC
8
- * -----
9
- *
10
- */
11
-
12
- import type { EmitterDispatchFunction } from "./EventEmitterContext";
13
-
14
-
15
- /**
16
- * Generates values for simulating data into an HMI.
17
- * Used for demonstration and development testing.
18
- */
19
- export class ValueSimulator {
20
-
21
- protected bBit1: boolean = false;
22
- protected bBit2: boolean = true;
23
-
24
- protected iRamp1: number = 0;
25
- protected iRamp2: number = 0;
26
- protected fRamp1: number = 0;
27
- protected fRamp2: number = 0;
28
-
29
- protected iSin1: number = 0;
30
- protected iSin2: number = 0;
31
- protected fSin1: number = 0;
32
- protected fSin2: number = 0;
33
-
34
- protected iRamp1DirectionUp : boolean = true;
35
- protected iRamp2DirectionUp : boolean = true;
36
- protected fRamp1DirectionUp : boolean = true;
37
- protected fRamp2DirectionUp : boolean = true;
38
-
39
- protected iSin1Angle : number = Math.random() * Math.PI * 2;
40
- protected iSin2Angle : number = Math.random() * Math.PI * 2;
41
- protected fSin1Angle : number = (Math.random() * Math.PI * 2) / 10;
42
- protected fSin2Angle : number = (Math.random() * Math.PI * 2) / 10;
43
-
44
- protected intervalId: number = 0;
45
-
46
- protected dispatch: EmitterDispatchFunction;
47
-
48
- /**
49
- * Constructor
50
- * @param dispatch EmitterDispatchFunction Dispatch function from the application's EventEmiterContext.
51
- */
52
- constructor(dispatch: EmitterDispatchFunction) {
53
- this.dispatch = dispatch;
54
- }
55
-
56
- /**
57
- * Start simulating values on a tick
58
- */
59
- start() {
60
-
61
- if (this.intervalId === 0) {
62
- this.intervalId = setInterval(
63
- () => this.update(),
64
- 1000
65
- );
66
- }
67
- }
68
-
69
-
70
- /**
71
- * Stop simulating values.
72
- */
73
- stop() {
74
- if (this.intervalId !== 0) {
75
- clearInterval(this.intervalId);
76
- this.intervalId = 0;
77
- }
78
- }
79
-
80
-
81
- /**
82
- * Update and dispatch the values.
83
- */
84
- protected update() {
85
-
86
- this.bBit1 = !this.bBit1;
87
- this.bBit2 = !this.bBit2;
88
-
89
- [this.iRamp1, this.iRamp1DirectionUp] = this.updateRamp(this.iRamp1, this.iRamp1DirectionUp, 32767);
90
- [this.iRamp2, this.iRamp2DirectionUp] = this.updateRamp(this.iRamp2, this.iRamp2DirectionUp, 32767);
91
- [this.fRamp1, this.fRamp1DirectionUp] = this.updateRamp(this.fRamp1, this.fRamp1DirectionUp, 3276.7);
92
- [this.fRamp2, this.fRamp2DirectionUp] = this.updateRamp(this.fRamp2, this.fRamp2DirectionUp, 3276.7);
93
-
94
- [this.iSin1, this.iSin1Angle] = this.updateSin(this.iSin1, this.iSin1Angle, Math.PI / 180, 32767);
95
- [this.iSin2, this.iSin2Angle] = this.updateSin(this.iSin2, this.iSin2Angle, Math.PI / 180, 32767);
96
- [this.fSin1, this.fSin1Angle] = this.updateSin(this.fSin1, this.fSin1Angle, Math.PI / 180, 3276.7);
97
- [this.fSin2, this.fSin2Angle] = this.updateSin(this.fSin2, this.fSin2Angle, Math.PI / 180, 3276.7);
98
-
99
-
100
- this.updateTopic("value-simulator-bBit1", this.bBit1);
101
- this.updateTopic("value-simulator-bBit2", this.bBit2);
102
- this.updateTopic("value-simulator-iRamp1", this.iRamp1);
103
- this.updateTopic("value-simulator-iRamp2", this.iRamp2);
104
- this.updateTopic("value-simulator-fRamp1", this.fRamp1);
105
- this.updateTopic("value-simulator-fRamp2", this.fRamp2);
106
-
107
- this.updateTopic("value-simulator-iSin1", this.iSin1);
108
- this.updateTopic("value-simulator-iSin2", this.iSin2);
109
- this.updateTopic("value-simulator-fSin1", this.fSin1);
110
- this.updateTopic("value-simulator-fSin2", this.fSin2);
111
-
112
- }
113
-
114
-
115
- /**
116
- * Updates the value of a ramp variable, changing its direction when limits are reached.
117
- * @param {number} value The current value of the ramp variable.
118
- * @param {boolean} directionUp Indicates if the ramp variable is currently increasing.
119
- * @param {number} max The maximum value for the ramp.
120
- * @returns {[number, boolean]} The updated value and direction.
121
- */
122
- protected updateRamp(value: number, directionUp: boolean, max: number): [number, boolean] {
123
- if (directionUp) {
124
- value++;
125
- if (value >= max) return [value, false];
126
- } else {
127
- value--;
128
- if (value <= 0) return [value, true];
129
- }
130
- return [value, directionUp];
131
- }
132
-
133
-
134
- /**
135
- * Updates a sine wave value based on the given angle and increments, then calculates the new value and angle.
136
- * This method is useful for scenarios where a sine wave value needs to be progressively updated, such as in animations
137
- * or simulations. The sine of the updated angle is calculated, multiplied by the maximum value to scale it, and both
138
- * the new value and the updated angle are returned.
139
- *
140
- * @param {number} value The current value of the sine wave. This parameter is not directly used in the calculation of the new value,
141
- * but it can be utilized if the method is extended or modified.
142
- * @param {number} angle The current angle in radians. This is the phase of the sine wave.
143
- * @param {number} increment The value by which the angle is to be incremented, in radians. This controls the progression of the wave.
144
- * @param {number} max The maximum value (amplitude) of the sine wave. The calculated sine value will be scaled by this factor.
145
- * @returns {[number,number]} A tuple where the first element is the new sine wave value and the second element is the updated angle.
146
- */
147
- protected updateSin(value: number, angle: number, increment: number, max: number): [number, number] {
148
- angle += increment;
149
- value = Math.sin(angle) * max;
150
- return [value, angle];
151
- }
152
-
153
-
154
- /**
155
- * Dispatch the update for a particular topic.
156
- */
157
- protected updateTopic(topic: string, value: any) {
158
-
159
- this.dispatch({
160
- topic: topic,
161
- payload: value
162
- });
163
-
164
- }
165
- }
166
-
1
+ /*
2
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
3
+ * Created Date: 2024-01-18 12:49:58
4
+ * Author: Thomas C. Bitsky Jr.
5
+ * -----
6
+ * Last Modified: 2025-09-05 14:50:12
7
+ * Modified By: ADC
8
+ * -----
9
+ *
10
+ */
11
+
12
+ import type { EmitterDispatchFunction } from "./EventEmitterContext";
13
+
14
+
15
+ /**
16
+ * Generates values for simulating data into an HMI.
17
+ * Used for demonstration and development testing.
18
+ */
19
+ export class ValueSimulator {
20
+
21
+ protected bBit1: boolean = false;
22
+ protected bBit2: boolean = true;
23
+
24
+ protected iRamp1: number = 0;
25
+ protected iRamp2: number = 0;
26
+ protected fRamp1: number = 0;
27
+ protected fRamp2: number = 0;
28
+
29
+ protected iSin1: number = 0;
30
+ protected iSin2: number = 0;
31
+ protected fSin1: number = 0;
32
+ protected fSin2: number = 0;
33
+
34
+ protected iRamp1DirectionUp : boolean = true;
35
+ protected iRamp2DirectionUp : boolean = true;
36
+ protected fRamp1DirectionUp : boolean = true;
37
+ protected fRamp2DirectionUp : boolean = true;
38
+
39
+ protected iSin1Angle : number = Math.random() * Math.PI * 2;
40
+ protected iSin2Angle : number = Math.random() * Math.PI * 2;
41
+ protected fSin1Angle : number = (Math.random() * Math.PI * 2) / 10;
42
+ protected fSin2Angle : number = (Math.random() * Math.PI * 2) / 10;
43
+
44
+ protected intervalId: number = 0;
45
+
46
+ protected dispatch: EmitterDispatchFunction;
47
+
48
+ /**
49
+ * Constructor
50
+ * @param dispatch EmitterDispatchFunction Dispatch function from the application's EventEmiterContext.
51
+ */
52
+ constructor(dispatch: EmitterDispatchFunction) {
53
+ this.dispatch = dispatch;
54
+ }
55
+
56
+ /**
57
+ * Start simulating values on a tick
58
+ */
59
+ start() {
60
+
61
+ if (this.intervalId === 0) {
62
+ this.intervalId = setInterval(
63
+ () => this.update(),
64
+ 1000
65
+ );
66
+ }
67
+ }
68
+
69
+
70
+ /**
71
+ * Stop simulating values.
72
+ */
73
+ stop() {
74
+ if (this.intervalId !== 0) {
75
+ clearInterval(this.intervalId);
76
+ this.intervalId = 0;
77
+ }
78
+ }
79
+
80
+
81
+ /**
82
+ * Update and dispatch the values.
83
+ */
84
+ protected update() {
85
+
86
+ this.bBit1 = !this.bBit1;
87
+ this.bBit2 = !this.bBit2;
88
+
89
+ [this.iRamp1, this.iRamp1DirectionUp] = this.updateRamp(this.iRamp1, this.iRamp1DirectionUp, 32767);
90
+ [this.iRamp2, this.iRamp2DirectionUp] = this.updateRamp(this.iRamp2, this.iRamp2DirectionUp, 32767);
91
+ [this.fRamp1, this.fRamp1DirectionUp] = this.updateRamp(this.fRamp1, this.fRamp1DirectionUp, 3276.7);
92
+ [this.fRamp2, this.fRamp2DirectionUp] = this.updateRamp(this.fRamp2, this.fRamp2DirectionUp, 3276.7);
93
+
94
+ [this.iSin1, this.iSin1Angle] = this.updateSin(this.iSin1, this.iSin1Angle, Math.PI / 180, 32767);
95
+ [this.iSin2, this.iSin2Angle] = this.updateSin(this.iSin2, this.iSin2Angle, Math.PI / 180, 32767);
96
+ [this.fSin1, this.fSin1Angle] = this.updateSin(this.fSin1, this.fSin1Angle, Math.PI / 180, 3276.7);
97
+ [this.fSin2, this.fSin2Angle] = this.updateSin(this.fSin2, this.fSin2Angle, Math.PI / 180, 3276.7);
98
+
99
+
100
+ this.updateTopic("value-simulator-bBit1", this.bBit1);
101
+ this.updateTopic("value-simulator-bBit2", this.bBit2);
102
+ this.updateTopic("value-simulator-iRamp1", this.iRamp1);
103
+ this.updateTopic("value-simulator-iRamp2", this.iRamp2);
104
+ this.updateTopic("value-simulator-fRamp1", this.fRamp1);
105
+ this.updateTopic("value-simulator-fRamp2", this.fRamp2);
106
+
107
+ this.updateTopic("value-simulator-iSin1", this.iSin1);
108
+ this.updateTopic("value-simulator-iSin2", this.iSin2);
109
+ this.updateTopic("value-simulator-fSin1", this.fSin1);
110
+ this.updateTopic("value-simulator-fSin2", this.fSin2);
111
+
112
+ }
113
+
114
+
115
+ /**
116
+ * Updates the value of a ramp variable, changing its direction when limits are reached.
117
+ * @param {number} value The current value of the ramp variable.
118
+ * @param {boolean} directionUp Indicates if the ramp variable is currently increasing.
119
+ * @param {number} max The maximum value for the ramp.
120
+ * @returns {[number, boolean]} The updated value and direction.
121
+ */
122
+ protected updateRamp(value: number, directionUp: boolean, max: number): [number, boolean] {
123
+ if (directionUp) {
124
+ value++;
125
+ if (value >= max) return [value, false];
126
+ } else {
127
+ value--;
128
+ if (value <= 0) return [value, true];
129
+ }
130
+ return [value, directionUp];
131
+ }
132
+
133
+
134
+ /**
135
+ * Updates a sine wave value based on the given angle and increments, then calculates the new value and angle.
136
+ * This method is useful for scenarios where a sine wave value needs to be progressively updated, such as in animations
137
+ * or simulations. The sine of the updated angle is calculated, multiplied by the maximum value to scale it, and both
138
+ * the new value and the updated angle are returned.
139
+ *
140
+ * @param {number} value The current value of the sine wave. This parameter is not directly used in the calculation of the new value,
141
+ * but it can be utilized if the method is extended or modified.
142
+ * @param {number} angle The current angle in radians. This is the phase of the sine wave.
143
+ * @param {number} increment The value by which the angle is to be incremented, in radians. This controls the progression of the wave.
144
+ * @param {number} max The maximum value (amplitude) of the sine wave. The calculated sine value will be scaled by this factor.
145
+ * @returns {[number,number]} A tuple where the first element is the new sine wave value and the second element is the updated angle.
146
+ */
147
+ protected updateSin(value: number, angle: number, increment: number, max: number): [number, number] {
148
+ angle += increment;
149
+ value = Math.sin(angle) * max;
150
+ return [value, angle];
151
+ }
152
+
153
+
154
+ /**
155
+ * Dispatch the update for a particular topic.
156
+ */
157
+ protected updateTopic(topic: string, value: any) {
158
+
159
+ this.dispatch({
160
+ topic: topic,
161
+ payload: value
162
+ });
163
+
164
+ }
165
+ }
166
+
167
167
  export default ValueSimulator;
package/src/core/hoc.tsx CHANGED
@@ -1,65 +1,65 @@
1
- /*
2
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
3
- * Created Date: 2024-01-18 16:14:20
4
- * -----
5
- * Last Modified: 2026-01-29 09:32:17
6
- * Modified By: ADC
7
- * -----
8
- */
9
-
10
- /**
11
- * @fileinfo
12
- * Explanation:
13
- * React.ComponentType<P>: This is a generic type that can accept any React component (functional or class) with props of type P.
14
- * P extends WithSubscriptionProps: Here, P is a generic type parameter that extends WithSubscriptionProps,
15
- * meaning it can be any type that includes the properties of WithSubscriptionProps.
16
- * Omit<P, keyof WithSubscriptionProps>: This utility type creates a new type by omitting properties from
17
- * P that are also in WithSubscriptionProps. This is useful to prevent type clashes.
18
- * useState<any>(): The state is typed as any since the value received from the subscription
19
- * can be of any type. You may choose to make this more specific based on your application's needs.
20
- *
21
- */
22
-
23
-
24
- import React, { useState, useEffect, useContext } from 'react';
25
- import { EventEmitterContext } from './EventEmitterContext';
26
-
27
- /**
28
- * High Order Component Subscription properties.
29
- */
30
- export type HocAddSubscriptionProps = {
31
- /** The topic to subscribe to. */
32
- topic: string;
33
- /** The name of the prop through which the subscription data is passed to the WrappedComponent. */
34
- propName?: string;
35
- };
36
-
37
-
38
- /**
39
- * Creates a higher-order component that subscribes to a specified topic and passes the data to the wrapped component.
40
- *
41
- * @param WrappedComponent The component to be wrapped and enhanced with subscription data.
42
- * @param topic The topic to subscribe to.
43
- * @param propName The name of the prop through which the subscription data is passed to the WrappedComponent.
44
- * @returns A component that subscribes to the given topic and updates its specified prop with the received data.
45
- */
46
- export function hocAddSubscription<P extends HocAddSubscriptionProps>(
47
- WrappedComponent: React.ComponentType<P>,
48
- topic: string,
49
- propName: keyof P
50
- ) {
51
- return function(props: Omit<P, keyof HocAddSubscriptionProps>) {
52
- const [value, setValue] = useState<any>();
53
- const { subscribe, unsubscribe } = useContext(EventEmitterContext);
54
-
55
- useEffect(() => {
56
- const unsubscribeToken = subscribe(topic, setValue);
57
- return () => unsubscribe(unsubscribeToken);
58
- }, [topic, subscribe, unsubscribe]);
59
-
60
- // Use propName to pass the updated value
61
- const additionalProps = { [propName]: value } as Pick<P, keyof P>;
62
-
63
- return <WrappedComponent {...props as P} {...additionalProps} />;
64
- };
65
- }
1
+ /*
2
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
3
+ * Created Date: 2024-01-18 16:14:20
4
+ * -----
5
+ * Last Modified: 2026-01-29 09:32:17
6
+ * Modified By: ADC
7
+ * -----
8
+ */
9
+
10
+ /**
11
+ * @fileinfo
12
+ * Explanation:
13
+ * React.ComponentType<P>: This is a generic type that can accept any React component (functional or class) with props of type P.
14
+ * P extends WithSubscriptionProps: Here, P is a generic type parameter that extends WithSubscriptionProps,
15
+ * meaning it can be any type that includes the properties of WithSubscriptionProps.
16
+ * Omit<P, keyof WithSubscriptionProps>: This utility type creates a new type by omitting properties from
17
+ * P that are also in WithSubscriptionProps. This is useful to prevent type clashes.
18
+ * useState<any>(): The state is typed as any since the value received from the subscription
19
+ * can be of any type. You may choose to make this more specific based on your application's needs.
20
+ *
21
+ */
22
+
23
+
24
+ import React, { useState, useEffect, useContext } from 'react';
25
+ import { EventEmitterContext } from './EventEmitterContext';
26
+
27
+ /**
28
+ * High Order Component Subscription properties.
29
+ */
30
+ export type HocAddSubscriptionProps = {
31
+ /** The topic to subscribe to. */
32
+ topic: string;
33
+ /** The name of the prop through which the subscription data is passed to the WrappedComponent. */
34
+ propName?: string;
35
+ };
36
+
37
+
38
+ /**
39
+ * Creates a higher-order component that subscribes to a specified topic and passes the data to the wrapped component.
40
+ *
41
+ * @param WrappedComponent The component to be wrapped and enhanced with subscription data.
42
+ * @param topic The topic to subscribe to.
43
+ * @param propName The name of the prop through which the subscription data is passed to the WrappedComponent.
44
+ * @returns A component that subscribes to the given topic and updates its specified prop with the received data.
45
+ */
46
+ export function hocAddSubscription<P extends HocAddSubscriptionProps>(
47
+ WrappedComponent: React.ComponentType<P>,
48
+ topic: string,
49
+ propName: keyof P
50
+ ) {
51
+ return function(props: Omit<P, keyof HocAddSubscriptionProps>) {
52
+ const [value, setValue] = useState<any>();
53
+ const { subscribe, unsubscribe } = useContext(EventEmitterContext);
54
+
55
+ useEffect(() => {
56
+ const unsubscribeToken = subscribe(topic, setValue);
57
+ return () => unsubscribe(unsubscribeToken);
58
+ }, [topic, subscribe, unsubscribe]);
59
+
60
+ // Use propName to pass the updated value
61
+ const additionalProps = { [propName]: value } as Pick<P, keyof P>;
62
+
63
+ return <WrappedComponent {...props as P} {...additionalProps} />;
64
+ };
65
+ }