@antimatter-audio/antimatter-ui 16.2.9 → 16.2.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 (18) hide show
  1. package/dist/index.js +464 -369
  2. package/dist/index.js.map +1 -1
  3. package/dist/types/advanced/ControlGroup/ControlGroup.d.ts.map +1 -1
  4. package/dist/types/advanced/ModMatrix/ModMatrixCell.d.ts.map +1 -1
  5. package/dist/types/common/types.d.ts +5 -0
  6. package/dist/types/common/types.d.ts.map +1 -1
  7. package/dist/types/common/utils.d.ts +50 -10
  8. package/dist/types/common/utils.d.ts.map +1 -1
  9. package/dist/types/core/DataViz/SingleBarViz.d.ts +2 -0
  10. package/dist/types/core/DataViz/SingleBarViz.d.ts.map +1 -1
  11. package/dist/types/core/Slider/BarSlider.d.ts.map +1 -1
  12. package/dist/types/core/Slider/RotaryCircle.d.ts.map +1 -1
  13. package/dist/types/core/Slider/RotarySlider.d.ts.map +1 -1
  14. package/dist/types/core/Slider/SliderSVG.d.ts.map +1 -1
  15. package/dist/types/hooks/useCombobox.d.ts.map +1 -1
  16. package/dist/types/hooks/useSlider.d.ts +4 -4
  17. package/dist/types/hooks/useSlider.d.ts.map +1 -1
  18. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -34,8 +34,8 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- var css_248z$j = "@theme static {\n /* Default theme colors */\n --color-brand: #bb68d9;\n --color-brand-900: #1b181c;\n /* --color-brand-900: #443342; */\n --color-brand-700: #932eb8;\n --color-brand-600: #ac47d1;\n --color-brand-400: #d199e6;\n --color-brand-300: #f3d4f4;\n --color-brand-secondary: #18d6d6;\n --color-alert: #8a0101;\n --color-text: #bab6cf;\n --color-gray-100: #c7c3de;\n --color-gray-200: #9a96ab;\n --color-gray-300: #838091;\n --color-gray-400: #595763;\n --color-gray-500: #4c4a54;\n --color-gray-600: #2e2c33;\n --color-gray-700: #1e1d21;\n --color-gray-800: #101012;\n --color-gray-900: #09090a;\n\n /* Main section theme colors */\n --color-GreenScreen-100: #1b4b3d;\n --color-GreenScreen-200: #29705b;\n --color-GreenScreen-300: #369679;\n --color-GreenScreen-400: #44bb97;\n --color-GreenScreen-500: #61c6a7;\n --color-GreenScreen-600: #7cd0b7;\n --color-GreenScreen-700: #a1ddcb;\n --color-GreenScreen-1000: #c7ebe0;\n\n --color-AmberScreen-100: #371815;\n --color-AmberScreen-200: #5c2824;\n --color-AmberScreen-300: #813932;\n --color-AmberScreen-400: #a54940;\n --color-AmberScreen-500: #bd5e56;\n --color-AmberScreen-600: #c6746c;\n --color-AmberScreen-700: #d49691;\n --color-AmberScreen-1000: #e2b9b6;\n\n --color-BlackScreen-100: #000000;\n --color-BlackScreen-200: #0b0b0f;\n --color-BlackScreen-300: #16161d;\n --color-BlackScreen-400: #21212c;\n --color-BlackScreen-500: #2c2c3a;\n --color-BlackScreen-600: #373749;\n --color-BlackScreen-700: #424257;\n --color-BlackScreen-1000: #4d4d66;\n\n --color-GreenAccent-100: #082b20;\n --color-GreenAccent-200: #105640;\n --color-GreenAccent-300: #188160;\n --color-GreenAccent-400: #21ab7f;\n --color-GreenAccent-500: #27ca96;\n --color-GreenAccent-600: #3edaa9;\n --color-GreenAccent-700: #69e2bc;\n --color-GreenAccent-1000: #94ebcf;\n\n --color-YellowAccent-100: #ad6a05;\n --color-YellowAccent-200: #df8807;\n --color-YellowAccent-300: #f8a220;\n --color-YellowAccent-400: #fab752;\n --color-YellowAccent-500: #faba58;\n --color-YellowAccent-600: #fac16b;\n --color-YellowAccent-700: #fbcb83;\n --color-YellowAccent-1000: #fcd69c;\n\n --color-RedAccent-100: #260d10;\n --color-RedAccent-200: #391318;\n --color-RedAccent-300: #4d191f;\n --color-RedAccent-400: #602027;\n --color-RedAccent-500: #73262f;\n --color-RedAccent-600: #862d37;\n --color-RedAccent-700: #99333f;\n --color-RedAccent-1000: #bf404f;\n\n --spacing-none: 0px;\n --spacing-xs: 2px;\n --spacing-sm: 4px;\n --spacing-ms: 6px;\n --spacing-md: 8px;\n --spacing-ml: 12px;\n --spacing-lg: 16px;\n --spacing-xl: 20px;\n --m-none: 0px;\n --m-xs: 2px;\n --m-sm: 4px;\n --m-ms: 6px;\n --m-md: 8px;\n --m-ml: 12px;\n --m-lg: 16px;\n --m-xl: 20px;\n --mt-none: 0px;\n --mt-xs: 2px;\n --mt-sm: 4px;\n --mt-ms: 6px;\n --mt-md: 8px;\n --mt-ml: 12px;\n --mt-lg: 16px;\n --mt-xl: 20px;\n --mr-none: 0px;\n --mr-xs: 2px;\n --mr-sm: 4px;\n --mr-ms: 6px;\n --mr-md: 8px;\n --mr-ml: 12px;\n --mr-lg: 16px;\n --mr-xl: 20px;\n --mb-none: 0px;\n --mb-xs: 2px;\n --mb-sm: 4px;\n --mb-ms: 6px;\n --mb-md: 8px;\n --mb-ml: 12px;\n --mb-lg: 16px;\n --mb-xl: 20px;\n --ml-none: 0px;\n --ml-xs: 2px;\n --ml-sm: 4px;\n --ml-ms: 6px;\n --ml-md: 8px;\n --ml-ml: 12px;\n --ml-lg: 16px;\n --ml-xl: 20px;\n --p-none: 0px;\n --p-xs: 2px;\n --p-sm: 4px;\n --p-ms: 6px;\n --p-md: 8px;\n --p-ml: 12px;\n --p-lg: 16px;\n --p-xl: 20px;\n --pt-none: 0px;\n --pt-xs: 2px;\n --pt-sm: 4px;\n --pt-ms: 6px;\n --pt-md: 8px;\n --pt-ml: 12px;\n --pt-lg: 16px;\n --pt-xl: 20px;\n --pr-none: 0px;\n --pr-xs: 2px;\n --pr-sm: 4px;\n --pr-ms: 6px;\n --pr-md: 8px;\n --pr-ml: 12px;\n --pr-lg: 16px;\n --pr-xl: 20px;\n --pb-none: 0px;\n --pb-xs: 2px;\n --pb-sm: 4px;\n --pb-ms: 6px;\n --pb-md: 8px;\n --pb-ml: 12px;\n --pb-lg: 16px;\n --pb-xl: 20px;\n --pl-none: 0px;\n --pl-xs: 2px;\n --pl-sm: 4px;\n --pl-ms: 6px;\n --pl-md: 8px;\n --pl-ml: 12px;\n --pl-lg: 16px;\n --pl-xl: 20px;\n --bg-lv1: #0e0e12;\n --bg-lv2: #121216;\n --bg-lv3: #16171d;\n --bg-lv4: #212128;\n --bg-lv5: #2b2b31;\n --bg-lv6: #3b3b44;\n --bg-lv7: #4c4a54;\n --bg-lv8: #595763;\n --bg-lv9: #838091;\n --bg-lv10: #9a96ab;\n --bg-lv11: #9999a7;\n --bg-lv12: #c1c1c1;\n --bg-selected: #2e2c33;\n\n /* --bg-lv3-brightened: #1a1b21; */\n\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xxs: 0.5rem;\n --text-xs: 0.625rem;\n --text-sm: 0.7rem;\n --text-ms: 0.813rem;\n --text-md: 0.875rem;\n --text-lg: 1rem;\n --text-xl: 1.25rem;\n --text-title: 1.75rem;\n --gap-none: 0px;\n --gap-xs: 2px;\n --gap-sm: 4px;\n --gap-ms: 6px;\n --gap-md: 8px;\n --gap-ml: 12px;\n --gap-lg: 16px;\n --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n background: transparent;\n border: none;\n outline: none;\n appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n outline: none;\n appearance: textfield;\n}\n\n/* .cursor-hidden * {\n cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n background-color: var(--bg-lv4);\n scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--bg-lv7);\n border-radius: 6px;\n width: 3px;\n}\n\n* {\n -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n display: none;\n} */\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
38
- styleInject(css_248z$j);
37
+ var css_248z$k = "@theme static {\n /* Default theme colors */\n --color-brand: #bb68d9;\n --color-brand-900: #1b181c;\n /* --color-brand-900: #443342; */\n --color-brand-700: #932eb8;\n --color-brand-600: #ac47d1;\n --color-brand-400: #d199e6;\n --color-brand-300: #f3d4f4;\n --color-brand-secondary: #18d6d6;\n --color-alert: #8a0101;\n --color-text: #bab6cf;\n --color-gray-100: #c7c3de;\n --color-gray-200: #9a96ab;\n --color-gray-300: #838091;\n --color-gray-400: #595763;\n --color-gray-500: #4c4a54;\n --color-gray-600: #2e2c33;\n --color-gray-700: #1e1d21;\n --color-gray-800: #101012;\n --color-gray-900: #09090a;\n\n /* Main section theme colors */\n --color-GreenScreen-100: #1b4b3d;\n --color-GreenScreen-200: #29705b;\n --color-GreenScreen-300: #369679;\n --color-GreenScreen-400: #44bb97;\n --color-GreenScreen-500: #61c6a7;\n --color-GreenScreen-600: #7cd0b7;\n --color-GreenScreen-700: #a1ddcb;\n --color-GreenScreen-1000: #c7ebe0;\n\n --color-AmberScreen-100: #371815;\n --color-AmberScreen-200: #5c2824;\n --color-AmberScreen-300: #813932;\n --color-AmberScreen-400: #a54940;\n --color-AmberScreen-500: #bd5e56;\n --color-AmberScreen-600: #c6746c;\n --color-AmberScreen-700: #d49691;\n --color-AmberScreen-1000: #e2b9b6;\n\n --color-BlackScreen-100: #000000;\n --color-BlackScreen-200: #0b0b0f;\n --color-BlackScreen-300: #16161d;\n --color-BlackScreen-400: #21212c;\n --color-BlackScreen-500: #2c2c3a;\n --color-BlackScreen-600: #373749;\n --color-BlackScreen-700: #424257;\n --color-BlackScreen-1000: #4d4d66;\n\n --color-GreenAccent-100: #082b20;\n --color-GreenAccent-200: #105640;\n --color-GreenAccent-300: #188160;\n --color-GreenAccent-400: #21ab7f;\n --color-GreenAccent-500: #27ca96;\n --color-GreenAccent-600: #3edaa9;\n --color-GreenAccent-700: #69e2bc;\n --color-GreenAccent-1000: #94ebcf;\n\n --color-YellowAccent-100: #ad6a05;\n --color-YellowAccent-200: #df8807;\n --color-YellowAccent-300: #f8a220;\n --color-YellowAccent-400: #fab752;\n --color-YellowAccent-500: #faba58;\n --color-YellowAccent-600: #fac16b;\n --color-YellowAccent-700: #fbcb83;\n --color-YellowAccent-1000: #fcd69c;\n\n --color-RedAccent-100: #260d10;\n --color-RedAccent-200: #391318;\n --color-RedAccent-300: #4d191f;\n --color-RedAccent-400: #602027;\n --color-RedAccent-500: #73262f;\n --color-RedAccent-600: #862d37;\n --color-RedAccent-700: #99333f;\n --color-RedAccent-1000: #bf404f;\n\n --spacing-none: 0px;\n --spacing-xs: 2px;\n --spacing-sm: 4px;\n --spacing-ms: 6px;\n --spacing-md: 8px;\n --spacing-ml: 12px;\n --spacing-lg: 16px;\n --spacing-xl: 20px;\n --m-none: 0px;\n --m-xs: 2px;\n --m-sm: 4px;\n --m-ms: 6px;\n --m-md: 8px;\n --m-ml: 12px;\n --m-lg: 16px;\n --m-xl: 20px;\n --mt-none: 0px;\n --mt-xs: 2px;\n --mt-sm: 4px;\n --mt-ms: 6px;\n --mt-md: 8px;\n --mt-ml: 12px;\n --mt-lg: 16px;\n --mt-xl: 20px;\n --mr-none: 0px;\n --mr-xs: 2px;\n --mr-sm: 4px;\n --mr-ms: 6px;\n --mr-md: 8px;\n --mr-ml: 12px;\n --mr-lg: 16px;\n --mr-xl: 20px;\n --mb-none: 0px;\n --mb-xs: 2px;\n --mb-sm: 4px;\n --mb-ms: 6px;\n --mb-md: 8px;\n --mb-ml: 12px;\n --mb-lg: 16px;\n --mb-xl: 20px;\n --ml-none: 0px;\n --ml-xs: 2px;\n --ml-sm: 4px;\n --ml-ms: 6px;\n --ml-md: 8px;\n --ml-ml: 12px;\n --ml-lg: 16px;\n --ml-xl: 20px;\n --p-none: 0px;\n --p-xs: 2px;\n --p-sm: 4px;\n --p-ms: 6px;\n --p-md: 8px;\n --p-ml: 12px;\n --p-lg: 16px;\n --p-xl: 20px;\n --pt-none: 0px;\n --pt-xs: 2px;\n --pt-sm: 4px;\n --pt-ms: 6px;\n --pt-md: 8px;\n --pt-ml: 12px;\n --pt-lg: 16px;\n --pt-xl: 20px;\n --pr-none: 0px;\n --pr-xs: 2px;\n --pr-sm: 4px;\n --pr-ms: 6px;\n --pr-md: 8px;\n --pr-ml: 12px;\n --pr-lg: 16px;\n --pr-xl: 20px;\n --pb-none: 0px;\n --pb-xs: 2px;\n --pb-sm: 4px;\n --pb-ms: 6px;\n --pb-md: 8px;\n --pb-ml: 12px;\n --pb-lg: 16px;\n --pb-xl: 20px;\n --pl-none: 0px;\n --pl-xs: 2px;\n --pl-sm: 4px;\n --pl-ms: 6px;\n --pl-md: 8px;\n --pl-ml: 12px;\n --pl-lg: 16px;\n --pl-xl: 20px;\n --bg-lv1: #0e0e12;\n --bg-lv2: #121216;\n --bg-lv3: #16171d;\n --bg-lv4: #212128;\n --bg-lv5: #2b2b31;\n --bg-lv6: #3b3b44;\n --bg-lv7: #4c4a54;\n --bg-lv8: #595763;\n --bg-lv9: #838091;\n --bg-lv10: #9a96ab;\n --bg-lv11: #9999a7;\n --bg-lv12: #c1c1c1;\n --bg-selected: #2e2c33;\n\n /* --bg-lv3-brightened: #1a1b21; */\n\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xxs: 0.5rem;\n --text-xs: 0.625rem;\n --text-sm: 0.7rem;\n --text-ms: 0.813rem;\n --text-md: 0.875rem;\n --text-lg: 1rem;\n --text-xl: 1.25rem;\n --text-title: 1.75rem;\n --gap-none: 0px;\n --gap-xs: 2px;\n --gap-sm: 4px;\n --gap-ms: 6px;\n --gap-md: 8px;\n --gap-ml: 12px;\n --gap-lg: 16px;\n --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n background: transparent;\n border: none;\n outline: none;\n appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n outline: none;\n appearance: textfield;\n}\n\n/* .cursor-hidden * {\n cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n background-color: var(--bg-lv4);\n scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--bg-lv7);\n border-radius: 6px;\n width: 3px;\n}\n\n* {\n -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n display: none;\n} */\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n /* ascent-override: 70%; */\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
38
+ styleInject(css_248z$k);
39
39
 
40
40
  var Spacing;
41
41
  (function(Spacing) {
@@ -182,14 +182,63 @@ var StrokeStyle;
182
182
  StrokeStyle["dashed"] = "dashed";
183
183
  StrokeStyle["dotted"] = "dotted";
184
184
  })(StrokeStyle || (StrokeStyle = {}));
185
+ var IncrementType;
186
+ (function(IncrementType) {
187
+ IncrementType["fine"] = "fine";
188
+ IncrementType["standard"] = "standard";
189
+ IncrementType["button"] = "button";
190
+ })(IncrementType || (IncrementType = {}));
191
+
192
+ var SliderType;
193
+ (function(SliderType) {
194
+ SliderType["bar"] = "bar";
195
+ SliderType["rotary"] = "rotary";
196
+ SliderType["custom"] = "custom";
197
+ })(SliderType || (SliderType = {}));
198
+ var SliderRotationBehavior;
199
+ (function(SliderRotationBehavior) {
200
+ SliderRotationBehavior["rotateIndicator"] = "rotateIndicator";
201
+ SliderRotationBehavior["rotatehandle"] = "rotatehandle";
202
+ SliderRotationBehavior["noRotation"] = "noRotation";
203
+ })(SliderRotationBehavior || (SliderRotationBehavior = {}));
204
+ var RotarySliderHandleShapes;
205
+ (function(RotarySliderHandleShapes) {
206
+ RotarySliderHandleShapes["circle"] = "circle";
207
+ RotarySliderHandleShapes["rectangle"] = "rectangle";
208
+ })(RotarySliderHandleShapes || (RotarySliderHandleShapes = {}));
209
+ var RotarySliderSizes;
210
+ (function(RotarySliderSizes) {
211
+ RotarySliderSizes["small"] = "small";
212
+ RotarySliderSizes["large"] = "large";
213
+ })(RotarySliderSizes || (RotarySliderSizes = {}));
214
+ const rotarySliderSizeMap = {
215
+ [RotarySliderSizes.small]: {
216
+ width: 40,
217
+ height: 40
218
+ },
219
+ [RotarySliderSizes.large]: {
220
+ width: 65,
221
+ height: 65
222
+ }
223
+ };
224
+ var TrackWidths;
225
+ (function(TrackWidths) {
226
+ TrackWidths["small"] = "small";
227
+ TrackWidths["large"] = "large";
228
+ TrackWidths["full"] = "full";
229
+ })(TrackWidths || (TrackWidths = {}));
185
230
 
186
231
  // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
187
232
  // mocks the `normalisedToScaledValue` internal method from JUCE
188
233
  // This will allow us to test the JS UI without needing access to the JUCE backend
189
234
  // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
190
235
  function normalisedToScaled({ normalisedValue, properties }) {
191
- const { skew, end, start } = properties;
192
- return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
236
+ if (properties) {
237
+ const { skew, end, start } = properties;
238
+ return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
239
+ } else {
240
+ return;
241
+ }
193
242
  }
194
243
  // mocks the `getnormalisedValue` method from JUCE
195
244
  // This will allow us to test the JS UI without needing access to the JUCE backend
@@ -241,24 +290,23 @@ const getValidValueForInput = ({ value, oldValue, properties })=>{
241
290
  return parseFloat(oldValue.toFixed(2));
242
291
  }
243
292
  };
244
- const getBarTransformStyles = ({ polarity, orientation, normalisedValue, isDisabled })=>{
245
- const wholeNumberNormalisedValue = normalisedValue * 100;
246
- const unipolarValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue?.toFixed(2)) : 0;
247
- const bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
293
+ const getBarTransformStyles = ({ polarity, orientation, isDisabled })=>{
248
294
  if (!isDisabled) {
249
295
  if (polarity === Polarity.unipolar) {
250
296
  return orientation === Orientation.horizontal ? {
251
- width: unipolarValue ? `100%` : '1px',
297
+ width: '100%',
252
298
  height: '100%',
253
- transform: unipolarValue ? `scale(${Math.ceil(unipolarValue) * 0.01}, 1)` : 'none',
299
+ // transform: unipolarValue
300
+ // ? `scale(${Math.ceil(unipolarValue) * 0.01}, 1)`
301
+ // : 'none',
254
302
  transformOrigin: 'center left',
255
303
  top: '0',
256
304
  bottom: '0',
257
305
  left: '0'
258
306
  } : {
259
307
  width: `100%`,
260
- height: unipolarValue ? '100%' : '1px',
261
- transform: `scale(1, ${Math.ceil(unipolarValue) * 0.01})`,
308
+ height: '100%',
309
+ // transform: `scale(1, ${Math.ceil(unipolarValue) * 0.01})`,
262
310
  transformOrigin: 'bottom center',
263
311
  top: '0',
264
312
  bottom: '0',
@@ -266,17 +314,17 @@ const getBarTransformStyles = ({ polarity, orientation, normalisedValue, isDisab
266
314
  };
267
315
  } else {
268
316
  return orientation === Orientation.horizontal ? {
269
- width: bipolarValue ? `100%` : '1px',
317
+ width: '100%',
270
318
  height: '100%',
271
- transform: bipolarValue ? `scale(${bipolarValue}, 1)` : 'none',
319
+ // transform: bipolarValue ? `scale(${bipolarValue}, 1)` : 'none',
272
320
  transformOrigin: 'left center',
273
321
  top: '0',
274
322
  bottom: '0',
275
323
  left: '50%'
276
324
  } : {
277
325
  width: `100%`,
278
- height: bipolarValue ? '100%' : '1px',
279
- transform: bipolarValue ? `scale(1, ${bipolarValue})` : 'none',
326
+ height: '100%',
327
+ // transform: bipolarValue ? `scale(1, ${bipolarValue})` : 'none',
280
328
  transformOrigin: 'bottom center',
281
329
  bottom: '50%',
282
330
  left: '0',
@@ -288,36 +336,74 @@ const getBarTransformStyles = ({ polarity, orientation, normalisedValue, isDisab
288
336
  const randomizeValue = (min, max)=>{
289
337
  return Math.random() * (max - min) + min;
290
338
  };
291
- const incrementValue = ({ incomingVal, prevVal, interval })=>{
292
- const getNormalisedInterval = ()=>{
293
- if (interval) {
294
- if (interval >= 1) {
295
- return interval * 0.01;
296
- } else {
297
- return interval;
298
- }
339
+ const getNormalisedInterval = (interval)=>{
340
+ const roundedInterval = Number(interval.toFixed(2));
341
+ if (roundedInterval) {
342
+ if (roundedInterval >= 1) {
343
+ return roundedInterval * 0.01;
299
344
  } else {
300
- return 0.01;
345
+ return roundedInterval;
301
346
  }
302
- };
303
- const normalisedInterval = getNormalisedInterval();
304
- const newValue = (prevVal ?? 0) + incomingVal * // (interval && interval.toString().length > 4
305
- // ? 4
306
- // : 0.4) *
307
- normalisedInterval;
308
- return parseFloat(clamp(newValue).toFixed(2));
347
+ } else {
348
+ return 0.01;
349
+ }
350
+ };
351
+ // export type IncrementPropsByType =
352
+ // | {
353
+ // incrementType: IncrementType.fine | IncrementType.standard;
354
+ // delta?: number;
355
+ // incrementBy?: never;
356
+ // }
357
+ // | {
358
+ // incrementType: IncrementType.buttonUp | IncrementType.buttonDown;
359
+ // delta?: never;
360
+ // incrementBy?: number;
361
+ // };
362
+ // interface CommonIncrementProps {
363
+ // prevVal: number;
364
+ // interval?: number;
365
+ // min?: number;
366
+ // max?: number;
367
+ // }
368
+ const incrementValue = ({ incrementType, delta, prevVal, interval, incrementBy, min = 0, max = 1 })=>{
369
+ const spread = max - min;
370
+ let initialSpreadMultiplier = 0.01;
371
+ let velocityMultiplier;
372
+ let spreadMultiplier;
373
+ if (spread < 5) {
374
+ spreadMultiplier = 1;
375
+ } else if (spread >= 5 && spread < 30) {
376
+ spreadMultiplier = 15;
377
+ } else if (spread >= 30 && spread < 80) {
378
+ spreadMultiplier = 30;
379
+ } else {
380
+ spreadMultiplier = 60;
381
+ }
382
+ if (delta && incrementType === IncrementType.fine) {
383
+ velocityMultiplier = Math.sign(delta);
384
+ } else if (delta && incrementType === IncrementType.standard) {
385
+ velocityMultiplier = delta * Math.max((spread ?? 0) * initialSpreadMultiplier, 0.7);
386
+ } else if (incrementBy && incrementType === IncrementType.button) {
387
+ velocityMultiplier = incrementBy;
388
+ } else {
389
+ velocityMultiplier = 0;
390
+ }
391
+ const normalisedInterval = getNormalisedInterval(interval ?? 0);
392
+ const newValue = (prevVal ?? 0) + velocityMultiplier * spreadMultiplier * normalisedInterval;
393
+ return parseFloat(newValue.toFixed(2));
394
+ };
395
+ const incrementIndex = ({ velocity = 0, numOptions, incrementBy, selectedIndex })=>{
396
+ let spreadMultiplier;
397
+ if (numOptions < 50) {
398
+ spreadMultiplier = 0.7;
399
+ } else if (numOptions >= 50 && numOptions < 150) {
400
+ spreadMultiplier = 3;
401
+ } else {
402
+ spreadMultiplier = 4;
403
+ }
404
+ const velocityMultiplier = Math.max(velocity, 1);
405
+ return velocity > 0.5 ? selectedIndex + incrementBy * velocityMultiplier * spreadMultiplier : selectedIndex + incrementBy;
309
406
  };
310
- let timerFlag = null;
311
- function throttle(mainFunction, delay) {
312
- return (...args)=>{
313
- if (timerFlag === null) {
314
- mainFunction(...args);
315
- timerFlag = setTimeout(()=>{
316
- timerFlag = null;
317
- }, delay);
318
- }
319
- };
320
- }
321
407
  const generateDropShadowFilterString = (colors, radius)=>{
322
408
  let output = [];
323
409
  if (radius) {
@@ -348,6 +434,66 @@ const getBorderValue = (borderArray, borderDirection, returnNumericValue)=>{
348
434
  return borderArray[0];
349
435
  }
350
436
  };
437
+ const animateBarChart = ({ animationFrameRef, elementRef, prevValRef, polarity, orientation })=>{
438
+ return (value)=>{
439
+ if (animationFrameRef.current) return;
440
+ const wholeNumberNormalisedValue = value * 100;
441
+ const unipolarValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue?.toFixed(2)) : 0;
442
+ const bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
443
+ const scaleValue = value !== null && value !== undefined ? polarity === Polarity.unipolar ? orientation === Orientation.horizontal ? `scale(${Math.ceil(unipolarValue) * 0.01}, 1)` : `scale(1, ${Math.ceil(unipolarValue) * 0.01})` : orientation === Orientation.horizontal ? `scale(${bipolarValue}, 1)` : `scale(1, ${bipolarValue})` : 'none';
444
+ animationFrameRef.current = requestAnimationFrame(()=>{
445
+ if (elementRef.current) {
446
+ elementRef.current.style.transform = scaleValue;
447
+ }
448
+ });
449
+ prevValRef.current = value;
450
+ animationFrameRef.current = null;
451
+ };
452
+ };
453
+ const animateBarSliderHandle = ({ animationFrameRef, elementRef, prevValRef, margin, // polarity,
454
+ orientation })=>{
455
+ return (value)=>{
456
+ if (animationFrameRef.current) return;
457
+ const wholeNumberNormalisedValue = value * 100;
458
+ const normalisedValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue?.toFixed(2)) : 0;
459
+ const bottomValue = orientation === Orientation.horizontal ? `calc(50% - ${margin}px)` : `calc(${normalisedValue}% - ${margin}px)`;
460
+ const leftValue = orientation === Orientation.horizontal ? `calc(${normalisedValue}% - ${margin}px)` : `calc(50% - ${margin}px)`;
461
+ animationFrameRef.current = requestAnimationFrame(()=>{
462
+ if (elementRef.current) {
463
+ elementRef.current.style.bottom = bottomValue;
464
+ elementRef.current.style.left = leftValue;
465
+ }
466
+ });
467
+ prevValRef.current = value;
468
+ animationFrameRef.current = null;
469
+ };
470
+ };
471
+ const animateRotaryCircle = ({ animationFrameRef, elementRef, prevValRef, activeZone, polarity, circ })=>{
472
+ return (value)=>{
473
+ if (animationFrameRef.current) return;
474
+ const unipolarOffset = circ - activeZone * (value * 100) / 100;
475
+ const bipolarOffset = circ - activeZone * (value * 100 - 50) / 100;
476
+ animationFrameRef.current = requestAnimationFrame(()=>{
477
+ if (elementRef.current) {
478
+ elementRef.current.style.strokeDashoffset = `${polarity === Polarity.unipolar ? unipolarOffset : bipolarOffset}`;
479
+ }
480
+ });
481
+ prevValRef.current = value;
482
+ animationFrameRef.current = null;
483
+ };
484
+ };
485
+ const animateRotaryHandle = ({ animationFrameRef, elementRef, prevValRef, handleShape })=>{
486
+ return (value)=>{
487
+ if (animationFrameRef.current) return;
488
+ animationFrameRef.current = requestAnimationFrame(()=>{
489
+ if (elementRef.current) {
490
+ elementRef.current.style.transform = `${handleShape === RotarySliderHandleShapes.circle ? `rotate(${ -90 + value * 270}deg)` : `rotate(${ -225 + value * 270}deg)`}`;
491
+ }
492
+ });
493
+ prevValRef.current = value;
494
+ animationFrameRef.current = null;
495
+ };
496
+ };
351
497
 
352
498
  //This component is a hack to create beveled edges on an element.
353
499
  //This will be obsolete if/when Juce's browser supports
@@ -458,11 +604,11 @@ function BevelContainer({ width, height, fillColor, highlightFillColor, cornerBe
458
604
  }
459
605
  }
460
606
 
461
- var css_248z$i = ".Tabs {\n display: flex;\n font-size: 1rem;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.Tabs-item {\n &:disabled {\n cursor: default;\n }\n}\n\n.Tabs-item::-moz-selection {\n background: transparent;\n}\n.Tabs-item::selection {\n background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n color: var(--bg-lv11);\n font-family: var(--font-leagueSpartan);\n background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n color: var(--color-brand) !important;\n} */\n";
462
- styleInject(css_248z$i);
607
+ var css_248z$j = ".Tabs {\n display: flex;\n font-size: 1rem;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.Tabs-item {\n &:disabled {\n cursor: default;\n }\n}\n\n.Tabs-item::-moz-selection {\n background: transparent;\n}\n.Tabs-item::selection {\n background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n color: var(--bg-lv11);\n font-family: var(--font-leagueSpartan);\n background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n color: var(--color-brand) !important;\n} */\n";
608
+ styleInject(css_248z$j);
463
609
 
464
- var css_248z$h = ".Button {\n font-size: var(--text-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: var(--spacing-ms);\n padding-left: var(--spacing-ms);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-align: enter;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n &.xSmall {\n width: var(--spacing-ml);\n height: var(--spacing-ml);\n }\n &.small {\n font-size: var(--text-xs);\n min-width: 1rem;\n min-height: var(--spacing-sm);\n }\n &.large {\n border-radius: var(--radius-sm);\n min-width: 1rem;\n min-height: var(--spacing-xl);\n }\n}\n";
465
- styleInject(css_248z$h);
610
+ var css_248z$i = ".Button {\n font-size: var(--text-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: var(--spacing-ms);\n padding-left: var(--spacing-ms);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-align: enter;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n &.xSmall {\n width: var(--spacing-ml);\n height: var(--spacing-ml);\n }\n &.small {\n font-size: var(--text-xs);\n min-width: 1rem;\n min-height: var(--spacing-sm);\n }\n &.large {\n border-radius: var(--radius-sm);\n min-width: 1rem;\n min-height: var(--spacing-xl);\n }\n}\n";
611
+ styleInject(css_248z$i);
466
612
 
467
613
  var ButtonType;
468
614
  (function(ButtonType) {
@@ -603,8 +749,8 @@ Button.type = ButtonType;
603
749
  Button.width = ButtonSize;
604
750
  Button.height = ButtonSize;
605
751
 
606
- var css_248z$g = ".IconButton {\n cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n filter: brightness(80%);\n}\n";
607
- styleInject(css_248z$g);
752
+ var css_248z$h = ".IconButton {\n cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n filter: brightness(80%);\n}\n";
753
+ styleInject(css_248z$h);
608
754
 
609
755
  var FlexDirection;
610
756
  (function(FlexDirection) {
@@ -650,8 +796,8 @@ var LayoutTags;
650
796
  LayoutTags["li"] = "li";
651
797
  })(LayoutTags || (LayoutTags = {}));
652
798
 
653
- var css_248z$f = ".divider-right:after {\n content: '';\n border-color: inherit;\n border-right-width: 1px;\n border-style: solid;\n position: absolute;\n right: 0;\n height: var(--spacing-xl);\n top: 50%;\n}\n\n.divider-left:after {\n content: '';\n border-color: inherit;\n border-left-width: 1px;\n border-style: solid;\n position: absolute;\n height: var(--spacing-xl);\n right: 0;\n top: 50%;\n}\n";
654
- styleInject(css_248z$f);
799
+ var css_248z$g = ".divider-right:after {\n content: '';\n border-color: inherit;\n border-right-width: 1px;\n border-style: solid;\n position: absolute;\n right: 0;\n height: var(--spacing-xl);\n top: 50%;\n}\n\n.divider-left:after {\n content: '';\n border-color: inherit;\n border-left-width: 1px;\n border-style: solid;\n position: absolute;\n height: var(--spacing-xl);\n right: 0;\n top: 50%;\n}\n";
800
+ styleInject(css_248z$g);
655
801
 
656
802
  var BoxDisplay;
657
803
  (function(BoxDisplay) {
@@ -734,8 +880,8 @@ Box.padding = Spacing;
734
880
  Box.flexWrap = FlexWrap;
735
881
  Box.tag = LayoutTags;
736
882
 
737
- var css_248z$e = ".Icon svg {\n width: 100%;\n}\n";
738
- styleInject(css_248z$e);
883
+ var css_248z$f = ".Icon svg {\n width: 100%;\n}\n";
884
+ styleInject(css_248z$f);
739
885
 
740
886
  var Icons;
741
887
  (function(Icons) {
@@ -1833,14 +1979,6 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
1833
1979
  return filteredItems;
1834
1980
  };
1835
1981
  const filteredChoices = getFilteredChoices(items, filter);
1836
- const incrementIndex = (velocity = 0)=>throttle(()=>{
1837
- const returnVal = velocity > 0.25 ? selectedIndex + 1 + velocity : selectedIndex + 1;
1838
- nextIndex.current = returnVal;
1839
- }, 90)();
1840
- const decrementIndex = (velocity = 0)=>throttle(()=>{
1841
- const returnVal = velocity > 0.5 ? selectedIndex - 1 - velocity * 10 : selectedIndex - 1;
1842
- nextIndex.current = returnVal;
1843
- }, 90)();
1844
1982
  // Used in RotaryCombobox
1845
1983
  const bindDrag = useGesture({
1846
1984
  onDrag: ({ direction, velocity })=>{
@@ -1859,9 +1997,23 @@ const useCombobox = ({ id, label, items = [], filter, onChange, displayValInHead
1859
1997
  directionY = -1;
1860
1998
  }
1861
1999
  if (selectedIndex < choices.length && directionY && directionY === 1) {
1862
- incrementIndex(velocity[1]);
2000
+ // throttle(() => {
2001
+ nextIndex.current = incrementIndex({
2002
+ velocity: velocity[1],
2003
+ incrementBy: 1,
2004
+ numOptions: properties?.choices?.length,
2005
+ selectedIndex
2006
+ });
2007
+ // }, 90);
1863
2008
  } else if (selectedIndex > 0 && directionY && directionY === -1) {
1864
- decrementIndex(velocity[1]);
2009
+ // throttle(() => {
2010
+ nextIndex.current = incrementIndex({
2011
+ velocity: velocity[1],
2012
+ incrementBy: -1,
2013
+ numOptions: properties?.choices?.length,
2014
+ selectedIndex
2015
+ });
2016
+ // }, 90);
1865
2017
  }
1866
2018
  // console.log(nextIndex.current, 'nextIndexnextIndexnextIndex');
1867
2019
  if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== selectedIndex.current) {
@@ -2083,8 +2235,8 @@ function ComboboxComponent({ id, anchorTo, excludeItems = [], items, onChange, c
2083
2235
  }, key);
2084
2236
  }
2085
2237
 
2086
- var css_248z$d = ".Combobox-items {\n box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n border-radius: 4px;\n z-index: 50;\n scrollbar-width: thin;\n overflow-y: scroll;\n overflow-x: hidden;\n cursor: pointer;\n}\n.Combobox-items::-webkit-scrollbar {\n width: 10px;\n}\n\n.Combobox-item {\n display: flex;\n align-items: center;\n font-size: var(--text-sm);\n padding: var(--spacing-md) var(--spacing-xl);\n cursor: pointer;\n /* text-align: center; */\n}\n\n.Combobox-button:not(:disabled),\n.Combobox-arrow:not(:disabled),\n.Combobox-button-element:not(:disabled) {\n cursor: pointer;\n}\n";
2087
- styleInject(css_248z$d);
2238
+ var css_248z$e = ".Combobox-items {\n box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n border-radius: 4px;\n z-index: 50;\n scrollbar-width: thin;\n overflow-y: scroll;\n overflow-x: hidden;\n cursor: pointer;\n}\n.Combobox-items::-webkit-scrollbar {\n width: 10px;\n}\n\n.Combobox-item {\n display: flex;\n align-items: center;\n font-size: var(--text-sm);\n padding: var(--spacing-md) var(--spacing-xl);\n cursor: pointer;\n /* text-align: center; */\n}\n\n.Combobox-button:not(:disabled),\n.Combobox-arrow:not(:disabled),\n.Combobox-button-element:not(:disabled) {\n cursor: pointer;\n}\n";
2239
+ styleInject(css_248z$e);
2088
2240
 
2089
2241
  function Combobox$1({ label, showLabel, color = 'var(--color-text)', labelColor, dropdownBorderWidth, dropdownBorderColor, dropdownBackgroundColor = 'var(--bg-lv4)', dropdownItemHighlightBackground, dropdownItemHighlightColor = 'var(--color-text)', dropdownSelectedItemColor, dropdownSelectedItemBackground, buttonHighlightBackground, buttonHighlightBorderColor = 'var(--bg-lv8)', buttonBorderColor = 'var(--bg-lv7)', buttonBorderRadius = 4, buttonBorderWidth = 1, buttonCornerBevel = [
2090
2242
  0,
@@ -2361,8 +2513,8 @@ function Combobox({ id, key, label, showLabel = true, color, labelColor = 'var(-
2361
2513
  Combobox.componentType = ComponentType;
2362
2514
  Combobox.anchorTo = AnchorTo;
2363
2515
 
2364
- var css_248z$c = ".TextInput {\n pointer-events: auto;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n\n.TextInput:disabled {\n -webkit-user-select: none;\n user-select: none;\n}\n\n.isActive .TextInput {\n -webkit-user-select: auto;\n -moz-user-select: auto;\n -ms-user-select: auto;\n user-select: auto;\n}\n";
2365
- styleInject(css_248z$c);
2516
+ var css_248z$d = ".TextInput {\n pointer-events: auto;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n\n.TextInput:disabled {\n -webkit-user-select: none;\n user-select: none;\n}\n\n.isActive .TextInput {\n -webkit-user-select: auto;\n -moz-user-select: auto;\n -ms-user-select: auto;\n user-select: auto;\n}\n";
2517
+ styleInject(css_248z$d);
2366
2518
 
2367
2519
  // import { decimalToPercent, percentToDecimal } from '../../common/utils';
2368
2520
  // import debounce from 'lodash.debounce';
@@ -2513,45 +2665,6 @@ Input.type = InputTypes;
2513
2665
  Input.textAlign = TextAlign;
2514
2666
  Input.fontSize = FontSizes;
2515
2667
 
2516
- var SliderType;
2517
- (function(SliderType) {
2518
- SliderType["bar"] = "bar";
2519
- SliderType["rotary"] = "rotary";
2520
- SliderType["custom"] = "custom";
2521
- })(SliderType || (SliderType = {}));
2522
- var SliderRotationBehavior;
2523
- (function(SliderRotationBehavior) {
2524
- SliderRotationBehavior["rotateIndicator"] = "rotateIndicator";
2525
- SliderRotationBehavior["rotatehandle"] = "rotatehandle";
2526
- SliderRotationBehavior["noRotation"] = "noRotation";
2527
- })(SliderRotationBehavior || (SliderRotationBehavior = {}));
2528
- var RotarySliderHandleShapes;
2529
- (function(RotarySliderHandleShapes) {
2530
- RotarySliderHandleShapes["circle"] = "circle";
2531
- RotarySliderHandleShapes["rectangle"] = "rectangle";
2532
- })(RotarySliderHandleShapes || (RotarySliderHandleShapes = {}));
2533
- var RotarySliderSizes;
2534
- (function(RotarySliderSizes) {
2535
- RotarySliderSizes["small"] = "small";
2536
- RotarySliderSizes["large"] = "large";
2537
- })(RotarySliderSizes || (RotarySliderSizes = {}));
2538
- const rotarySliderSizeMap = {
2539
- [RotarySliderSizes.small]: {
2540
- width: 40,
2541
- height: 40
2542
- },
2543
- [RotarySliderSizes.large]: {
2544
- width: 65,
2545
- height: 65
2546
- }
2547
- };
2548
- var TrackWidths;
2549
- (function(TrackWidths) {
2550
- TrackWidths["small"] = "small";
2551
- TrackWidths["large"] = "large";
2552
- TrackWidths["full"] = "full";
2553
- })(TrackWidths || (TrackWidths = {}));
2554
-
2555
2668
  // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
2556
2669
  // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
2557
2670
  const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties = {
@@ -2559,10 +2672,23 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2559
2672
  end: 15000,
2560
2673
  interval: 0.1,
2561
2674
  skew: 0.7
2562
- }, marks, isRandomizable, randomizerObject, resetterObject, isControlGroup = false, orientation = Orientation.vertical, dragOrientation = Orientation.vertical, mockInitialNormalisedValue = 0.0, updateModSlotPreview = true, onChange, sliderElementRef, isDisabled = false })=>{
2675
+ }, marks, isRandomizable, isStandalone, randomizerObject, resetterObject, isControlGroup = false, orientation = Orientation.vertical, dragOrientation = Orientation.vertical, mockInitialNormalisedValue = 0.0, updateModSlotPreview = true, onChange, sliderElementRef, isDisabled = false })=>{
2563
2676
  // const sliderState: JuceSlider = Juce.getSliderState(id);
2564
2677
  // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
2678
+ const [ctrlIsDown, setCtrlIsDown] = useState(false);
2565
2679
  const isLocalhost = window?.location?.hostname === 'localhost';
2680
+ const keyDownListener = (event)=>{
2681
+ if (event.key === 'Alt') {
2682
+ event.preventDefault();
2683
+ setCtrlIsDown(true);
2684
+ }
2685
+ };
2686
+ const keyUpListener = (event)=>{
2687
+ if (event.key === 'Alt') {
2688
+ event.preventDefault();
2689
+ setCtrlIsDown(false);
2690
+ }
2691
+ };
2566
2692
  // getNormalisedValue:
2567
2693
  /**
2568
2694
  * Returns the normalised value of the corresponding backend parameter. This value is always in the
@@ -2572,16 +2698,13 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2572
2698
  * AudioProcessorParameter::getValue() (C++).
2573
2699
  */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
2574
2700
  // NOTE: We can think of this as a percentage value, in 0 to 1 format
2575
- const [scaledValue, setScaledValue] = useState(0);
2576
- // const [normalisedValue, setNormalisedValue] = useState(0);
2577
2701
  const [properties, setProperties] = useState();
2578
- const scaledValueRef = useRef(null);
2579
- const normalisedValueRef = useRef(null);
2702
+ const previousScaledValueRef = useRef(null);
2580
2703
  const sliderState = Juce.getSliderState(id);
2581
- const prevValueRef = useRef(null);
2582
- // const randomValueSetCounter = useRef<number>(null);
2583
- const { highlightedItemChanged, setDefaultParameter, updateModSlotRowTarget, // setModSlotRowTarget,
2584
- getModSlotPreview, mainPanelrandomizerObject } = useGlobalContext();
2704
+ const [scaledValue, setScaledValue] = useState(0);
2705
+ const [normalisedValue, setNormalisedValue] = useState(0);
2706
+ const dragInProgress = useRef(false);
2707
+ const { highlightedItemChanged, setDefaultParameter, updateModSlotRowTarget, getModSlotPreview, mainPanelrandomizerObject } = useGlobalContext();
2585
2708
  const randomizerObjectToUse = randomizerObject && Object.keys(randomizerObject).length > 0 ? randomizerObject : mainPanelrandomizerObject;
2586
2709
  const modSlotPreview = getModSlotPreview();
2587
2710
  // Set the initial state
@@ -2589,16 +2712,10 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2589
2712
  useEffect(()=>{
2590
2713
  const setRandom = ()=>{
2591
2714
  const randomValue = randomizeValue(sliderState?.properties?.start, sliderState?.properties?.end);
2592
- const newValue = sliderState?.properties?.start === 0 && sliderState?.properties?.end === 1 ? randomValue : scaledToNormalised({
2593
- scaledValue: randomValue,
2594
- start: sliderState?.properties?.start,
2595
- end: sliderState?.properties?.end,
2596
- skew: sliderState?.properties?.skew
2597
- });
2598
- setNormalisedState(clamp(newValue));
2715
+ setJuceScaledValue(randomValue);
2599
2716
  };
2600
2717
  const clearValue = ()=>{
2601
- setNormalisedState(0);
2718
+ setJuceScaledValue(0);
2602
2719
  };
2603
2720
  if (!isLocalhost) {
2604
2721
  resetterObject?.subscribe(clearValue, id);
@@ -2613,41 +2730,30 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2613
2730
  } else {
2614
2731
  // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
2615
2732
  setProperties(mockProperties);
2616
- normalisedValueRef.current = mockInitialNormalisedValue;
2617
2733
  }
2618
2734
  }, []);
2619
2735
  // TODO: take out mod slot logic
2620
- const changeHandler = (normalisedValue, sliderId)=>{
2621
- const scaledValue = normalisedToScaled({
2622
- normalisedValue,
2623
- properties: sliderState?.properties
2624
- });
2736
+ const changeHandler = (scaledValue, sliderId)=>{
2625
2737
  if (rowId === modSlotPreview?.targetIndex) {
2626
2738
  onChange && onChange(parseFloat(scaledValue.toFixed(2)), rowId);
2627
2739
  } else {
2628
2740
  onChange && onChange(parseFloat(scaledValue.toFixed(2)), sliderId);
2629
2741
  }
2630
2742
  };
2631
- // Update the local state from JUCE
2632
- const updateLocalState = ()=>{
2633
- const normalisedValueFromState = sliderState?.getNormalisedValue();
2634
- const scaledValueFromState = sliderState?.getScaledValue();
2635
- const scaledValue = parseFloat(scaledValueFromState.toFixed(2));
2636
- normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
2637
- if (scaledValue !== prevValueRef.current) {
2638
- setScaledValue(scaledValue);
2639
- if (displayValInHeader && scaledValueRef?.current !== scaledValue && (label || properties?.name)) {
2640
- highlightedItemChanged({
2641
- label: label || properties?.name || '',
2642
- value: scaledValue
2643
- });
2644
- }
2645
- prevValueRef.current = scaledValue;
2743
+ // Update JUCE state
2744
+ const setJuceScaledValue = (newValue)=>{
2745
+ if (previousScaledValueRef?.current !== newValue) {
2746
+ !isLocalhost && sliderState.setScaledValue(clamp(newValue, sliderState?.properties?.start, sliderState?.properties?.end));
2747
+ rowId && changeHandler(newValue, rowId);
2748
+ previousScaledValueRef.current = newValue;
2646
2749
  }
2647
2750
  };
2648
- // Update the local state when the ID changes
2751
+ // Rerender the component when the ID changes
2649
2752
  useEffect(()=>{
2650
- updateLocalState();
2753
+ const sliderState = Juce.getSliderState(id);
2754
+ setNormalisedValue(sliderState.getNormalisedValue());
2755
+ setScaledValue(sliderState?.scaledValue);
2756
+ setProperties(sliderState.properties);
2651
2757
  }, [
2652
2758
  id
2653
2759
  ]);
@@ -2655,11 +2761,24 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2655
2761
  //@ts-expect-error
2656
2762
  useEffect(()=>{
2657
2763
  if (!isLocalhost) {
2764
+ document.addEventListener('keydown', keyDownListener);
2765
+ document.addEventListener('keyup', keyUpListener);
2658
2766
  const valueListenerId = sliderState?.valueChangedEvent.addListener(()=>{
2659
- updateLocalState();
2767
+ const sliderState = Juce.getSliderState(id);
2768
+ setNormalisedValue(sliderState.getNormalisedValue());
2769
+ setScaledValue(parseFloat(sliderState?.scaledValue.toFixed(2)));
2770
+ if (displayValInHeader && (label || properties?.name)) {
2771
+ highlightedItemChanged({
2772
+ label: label || properties?.name || '',
2773
+ value: parseFloat(sliderState?.scaledValue.toFixed(2))
2774
+ });
2775
+ }
2660
2776
  });
2661
2777
  const propertiesListenerId = sliderState?.propertiesChangedEvent.addListener(()=>setProperties(sliderState?.properties));
2778
+ previousScaledValueRef.current = sliderState.scaledValue;
2662
2779
  return ()=>{
2780
+ document.removeEventListener('keydown', keyDownListener);
2781
+ document.removeEventListener('keyup', keyUpListener);
2663
2782
  sliderState?.valueChangedEvent.removeListener(valueListenerId);
2664
2783
  sliderState?.propertiesChangedEvent.removeListener(propertiesListenerId);
2665
2784
  };
@@ -2668,146 +2787,60 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2668
2787
  window,
2669
2788
  changeHandler
2670
2789
  ]);
2671
- // Update JUCE state
2672
- const setNormalisedState = (newValue)=>{
2673
- const stringValue = parseFloat(`${newValue}`);
2674
- if (normalisedValueRef?.current !== stringValue) {
2675
- !isLocalhost && sliderState.setNormalisedValue(clamp(stringValue));
2676
- rowId && changeHandler(newValue, rowId);
2677
- normalisedValueRef.current = stringValue;
2678
- }
2679
- };
2680
2790
  const bindDrag = useGesture({
2681
- onMouseEnter: ()=>{
2682
- if (displayValInHeader && scaledValueRef?.current !== scaledValue) {
2683
- highlightedItemChanged({
2684
- label: label || properties?.name || '',
2685
- value: scaledValue
2686
- });
2687
- }
2688
- },
2689
- onMouseLeave: ()=>{
2690
- highlightedItemChanged();
2691
- },
2692
- onDrag: ({ event, delta })=>{
2693
- //TODO: Move this out of useSlider
2694
- // Sets the slider as a mod slot preview
2695
- if (updateModSlotPreview) {
2696
- updateModSlotRowTarget({
2697
- rowId: modSlotPreview?.rowId,
2698
- value: id
2699
- });
2700
- }
2701
- if (!dragInProgress) {
2791
+ onMouseDown: ()=>{
2792
+ if (!dragInProgress.current) {
2702
2793
  sliderState.sliderDragStarted(id);
2703
- dragInProgress = true;
2794
+ dragInProgress.current = true;
2704
2795
  }
2705
- const deltaVal = delta[1] * -1;
2706
- const newValue = incrementValue({
2707
- incomingVal: deltaVal,
2708
- prevVal: normalisedValueRef.current || 0,
2709
- interval: properties?.interval
2710
- });
2711
- setNormalisedState(newValue);
2712
2796
  },
2713
- onMouseUp: ({ event })=>{
2714
- sliderState.sliderDragEnded();
2715
- }
2716
- }, {
2717
- enabled: !isDisabled
2718
- });
2719
- let dragInProgress = false;
2720
- let hasMoved = false;
2721
- const bindBarSliderDrag = useGesture({
2722
- onMouseEnter: ()=>{
2723
- if (displayValInHeader && scaledValueRef?.current !== scaledValue) {
2724
- highlightedItemChanged({
2725
- label: label || properties?.name || '',
2726
- value: scaledValue
2797
+ onDrag: ({ event, delta })=>{
2798
+ if (event?.buttons === 1 && dragInProgress.current) {
2799
+ //TODO: Move this out of useSlider
2800
+ // Sets the slider as a mod slot preview
2801
+ if (updateModSlotPreview) {
2802
+ updateModSlotRowTarget({
2803
+ rowId: modSlotPreview?.rowId,
2804
+ value: id
2805
+ });
2806
+ }
2807
+ if (isStandalone && !dragInProgress?.current) {
2808
+ sliderState.sliderDragStarted(id);
2809
+ }
2810
+ const deltaVal = dragOrientation === Orientation.vertical ? delta[1] * -1 : delta[0];
2811
+ const newValue = incrementValue({
2812
+ delta: deltaVal,
2813
+ incrementType: ctrlIsDown ? IncrementType.fine : IncrementType.standard,
2814
+ prevVal: previousScaledValueRef.current || 0,
2815
+ interval: properties?.interval,
2816
+ min: properties?.start,
2817
+ max: properties?.end
2727
2818
  });
2819
+ setJuceScaledValue(newValue);
2728
2820
  }
2729
2821
  },
2730
2822
  onMouseLeave: ()=>{
2731
2823
  highlightedItemChanged();
2732
2824
  },
2733
- onMouseDown: ({ event })=>{
2734
- if (!dragInProgress) {
2735
- sliderState.sliderDragStarted(id);
2736
- dragInProgress = true;
2737
- }
2738
- },
2739
- onDrag: ({ event, movement })=>{
2740
- const parentSlider = event?.target.closest('[data-sliderElement]');
2741
- const sliderTarget = event?.target.dataset.handle ? parentSlider : event?.target;
2742
- const rect = sliderTarget?.getBoundingClientRect();
2743
- const y = event?.clientY - rect.top;
2744
- const x = event?.clientX - rect.left;
2745
- // Sets the slider as a mod slot preview
2746
- if (updateModSlotPreview) {
2747
- updateModSlotRowTarget({
2748
- rowId: modSlotPreview?.rowId,
2749
- value: id
2750
- });
2751
- }
2752
- hasMoved = dragOrientation === Orientation.vertical ? movement[1] !== 0 : movement[0] !== 0;
2753
- const ignoreMoveStatus = !isControlGroup;
2754
- if (event.buttons === 1) {
2755
- if (isControlGroup) {
2756
- document.body.classList.add('cursor-hidden');
2757
- }
2758
- let newValue = null;
2759
- if (orientation === Orientation.vertical && (hasMoved || ignoreMoveStatus)) {
2760
- newValue = 1 - y / rect.height;
2761
- } else if (orientation === Orientation.horizontal && dragOrientation === Orientation.vertical && (hasMoved || ignoreMoveStatus)) {
2762
- // console.log(movement, hasMoved, 'movementinelesif');
2763
- newValue = 1 - y / rect.width;
2764
- } else if (hasMoved || ignoreMoveStatus) {
2765
- newValue = x / rect.width;
2766
- }
2767
- newValue && setNormalisedState(clamp(newValue));
2768
- }
2769
- },
2770
- onMouseUp: ({ event })=>{
2771
- document.body.classList.remove('cursor-hidden');
2772
- if (dragInProgress = true) {
2773
- dragInProgress = false;
2774
- sliderState.sliderDragEnded();
2775
- }
2825
+ onMouseUp: ()=>{
2826
+ dragInProgress.current = false;
2827
+ sliderState.sliderDragEnded();
2776
2828
  }
2777
2829
  }, {
2778
2830
  enabled: !isDisabled
2779
2831
  });
2780
- const bindSequenceBarSliderDrag = useGesture({
2781
- onMouseEnter: ({ event })=>{
2782
- if (displayValInHeader && scaledValueRef?.current !== scaledValue) {
2783
- highlightedItemChanged({
2784
- label: label || properties?.name || '',
2785
- value: scaledValue
2786
- });
2787
- }
2788
- if (event.buttons === 1) {
2789
- let newValue;
2790
- const rect = event?.target?.getBoundingClientRect();
2791
- const y = event?.clientY - rect.top;
2792
- // const x = event?.clientX - rect.left;
2793
- newValue = 1 - y / rect.height;
2794
- setNormalisedState(clamp(newValue));
2795
- }
2796
- },
2797
- onMouseDown: ({ event })=>{
2798
- if (!dragInProgress) {
2832
+ const bindSequenceDrag = useGesture({
2833
+ onMouseDown: ()=>{
2834
+ if (!dragInProgress.current) {
2799
2835
  sliderState.sliderDragStarted(id);
2800
- dragInProgress = true;
2836
+ dragInProgress.current = true;
2801
2837
  }
2802
2838
  },
2803
- onMouseLeave: ()=>{
2804
- highlightedItemChanged();
2805
- },
2806
- onMouseMove: ({ event })=>{
2807
- const rect = event?.target?.getBoundingClientRect();
2808
- const y = event?.clientY - rect.top;
2809
- const x = event?.clientX - rect.left;
2839
+ onMove: ({ event })=>{
2810
2840
  if (event?.buttons === 1) {
2841
+ const rect = event?.target?.getBoundingClientRect();
2842
+ const y = event?.clientY - rect.top;
2843
+ const x = event?.clientX - rect.left;
2811
2844
  // TODO: Increments?
2812
2845
  let newValue;
2813
2846
  if (orientation === Orientation.vertical) {
@@ -2817,37 +2850,37 @@ const useSlider = ({ id, rowId, label, displayValInHeader = true, mockProperties
2817
2850
  } else {
2818
2851
  newValue = x / rect.width;
2819
2852
  }
2820
- setNormalisedState(clamp(newValue));
2853
+ setJuceScaledValue(newValue);
2821
2854
  }
2822
2855
  },
2823
- onMouseUp: ({ event })=>{
2824
- if (dragInProgress = true) {
2825
- dragInProgress = false;
2826
- sliderState.sliderDragEnded();
2827
- }
2856
+ onMouseLeave: ()=>{
2857
+ highlightedItemChanged();
2858
+ },
2859
+ onMouseUp: ()=>{
2860
+ dragInProgress.current = false;
2861
+ sliderState.sliderDragEnded();
2828
2862
  }
2829
2863
  }, {
2830
2864
  enabled: !isDisabled
2831
2865
  });
2832
2866
  const setToDefaultState = ()=>setDefaultParameter(id);
2833
2867
  return {
2834
- setNormalisedState,
2868
+ setScaledState: setJuceScaledValue,
2835
2869
  setToDefaultState,
2836
2870
  scaledToNormalised,
2837
- bindBarSliderDrag,
2838
- bindSequenceBarSliderDrag,
2839
2871
  bindDrag,
2840
- normalisedValue: normalisedValueRef.current || 0,
2872
+ bindSequenceDrag,
2873
+ normalisedValue,
2841
2874
  scaledValue,
2842
2875
  properties
2843
2876
  };
2844
2877
  };
2845
2878
 
2846
- var css_248z$b = ".RotarySlider {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n height: 100%;\n width: 100%;\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n}\n\n.RotarySlider-Indicator-handle {\n position: absolute;\n top: 3px;\n right: 0;\n left: 50%;\n width: 3px;\n height: 50%;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n width: 3px;\n height: 6px;\n}\n\n.RotarySlider-CenterCircle {\n position: relative;\n border-radius: 100%;\n border: 2px solid var(--color-gray-300);\n /* background: var(--color-gray-800); */\n background: radial-gradient(\n circle at center,\n var(--bg-lv4) 50%,\n var(--bg-lv3) 80%\n );\n}\n\n.RotarySlider-CenterCircle:after {\n content: '';\n width: 4px;\n height: 4px;\n background: var(--color-gray-300);\n border-radius: 100%;\n position: absolute;\n left: 8px;\n top: 3px;\n}\n\n.RotarySlider-positioning-wrapper {\n position: absolute;\n height: 100%;\n width: 100%;\n}\n.ProgressCircle {\n fill: none;\n pointer-events: none;\n}\n\n.ProgressCircle-value {\n text-align: center;\n margin-top: -4px;\n height: 0.8rem;\n line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n stroke-width: 3px;\n transform-origin: center;\n /* transform: rotate(135deg); */\n font-size: var(--text-sm);\n pointer-events: none;\n}\n.ProgressCircle-fg {\n stroke-width: 3px;\n /* stroke-dasharray: 75; */\n /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n transform-origin: center;\n pointer-events: none;\n}\n\n.corner-border {\n --b: 1px; /* thickness of the border */\n --c: var(--color-gray-500); /* color of the border */\n --w: 5px; /* width of border */\n\n border: var(--b) solid #0000; /* space for the border */\n --_g: #0000 90deg, var(--c) 0;\n --_p: var(--w) var(--w) border-box no-repeat;\n background:\n conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n var(--_p),\n conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n var(--_p),\n conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n var(--_p),\n conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n 100% 100% / var(--_p);\n}\n";
2847
- styleInject(css_248z$b);
2879
+ var css_248z$c = ".RotarySlider {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n height: 100%;\n width: 100%;\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n}\n\n.RotarySlider-Indicator-handle {\n position: absolute;\n top: 3px;\n right: 0;\n left: 50%;\n width: 3px;\n height: 50%;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n width: 3px;\n height: 6px;\n}\n\n.RotarySlider-CenterCircle {\n position: relative;\n border-radius: 100%;\n border: 2px solid var(--color-gray-300);\n /* background: var(--color-gray-800); */\n background: radial-gradient(\n circle at center,\n var(--bg-lv4) 50%,\n var(--bg-lv3) 80%\n );\n}\n\n.RotarySlider-CenterCircle:after {\n content: '';\n width: 4px;\n height: 4px;\n background: var(--color-gray-300);\n border-radius: 100%;\n position: absolute;\n left: 8px;\n top: 3px;\n}\n\n.RotarySlider-positioning-wrapper {\n position: absolute;\n height: 100%;\n width: 100%;\n}\n.ProgressCircle {\n fill: none;\n pointer-events: none;\n}\n\n.ProgressCircle-value {\n text-align: center;\n margin-top: -4px;\n height: 0.8rem;\n line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n stroke-width: 3px;\n transform-origin: center;\n /* transform: rotate(135deg); */\n font-size: var(--text-sm);\n pointer-events: none;\n}\n.ProgressCircle-fg {\n stroke-width: 3px;\n /* stroke-dasharray: 75; */\n /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n transform-origin: center;\n pointer-events: none;\n}\n\n.corner-border {\n --b: 1px; /* thickness of the border */\n --c: var(--color-gray-500); /* color of the border */\n --w: 5px; /* width of border */\n\n border: var(--b) solid #0000; /* space for the border */\n --_g: #0000 90deg, var(--c) 0;\n --_p: var(--w) var(--w) border-box no-repeat;\n background:\n conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n var(--_p),\n conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n var(--_p),\n conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n var(--_p),\n conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n 100% 100% / var(--_p);\n}\n";
2880
+ styleInject(css_248z$c);
2848
2881
 
2849
- var css_248z$a = "";
2850
- styleInject(css_248z$a);
2882
+ var css_248z$b = "";
2883
+ styleInject(css_248z$b);
2851
2884
 
2852
2885
  function ControlGroup({ id, isDisabled = false, className, onChangeActiveState, children, width = 'auto' }) {
2853
2886
  // EXPECTED CONTROL GROUP STRUCTURE
@@ -2877,7 +2910,8 @@ function ControlGroup({ id, isDisabled = false, className, onChangeActiveState,
2877
2910
  const increment = ()=>{
2878
2911
  const normalisedVal = sliderState?.getNormalisedValue();
2879
2912
  const newValue = incrementValue({
2880
- incomingVal: 10,
2913
+ incrementType: IncrementType.button,
2914
+ incrementBy: 10,
2881
2915
  prevVal: normalisedVal,
2882
2916
  interval: sliderState?.properties?.interval
2883
2917
  });
@@ -2886,7 +2920,8 @@ function ControlGroup({ id, isDisabled = false, className, onChangeActiveState,
2886
2920
  const decrement = ()=>{
2887
2921
  const normalisedVal = sliderState?.getNormalisedValue();
2888
2922
  const newValue = incrementValue({
2889
- incomingVal: -10,
2923
+ incrementType: IncrementType.button,
2924
+ incrementBy: -10,
2890
2925
  prevVal: normalisedVal,
2891
2926
  interval: sliderState?.properties?.interval
2892
2927
  });
@@ -2928,8 +2963,24 @@ const ProgressCircle = ({ width, height, polarity = Polarity.unipolar, strokeWid
2928
2963
  indicatorLineColor, indicatorLineGradient, outerGlowRadius, outerGlowColors = [], blur, indicatorLineRange, trackColor, radius, circ, activeZone, normalisedValue })=>{
2929
2964
  const cx = '50%';
2930
2965
  const cy = '51%';
2931
- const unipolarOffset = circ - activeZone * (normalisedValue * 100) / 100;
2932
- const bipolarOffset = circ - activeZone * (normalisedValue * 100 - 50) / 100;
2966
+ const animationFrameRef = useRef(null);
2967
+ const prevValRef = useRef(null);
2968
+ const sliderElementRef = useRef(null);
2969
+ const animate = animateRotaryCircle({
2970
+ animationFrameRef,
2971
+ elementRef: sliderElementRef,
2972
+ polarity,
2973
+ prevValRef,
2974
+ activeZone,
2975
+ circ
2976
+ });
2977
+ useEffect(()=>{
2978
+ if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
2979
+ animate(normalisedValue);
2980
+ }
2981
+ }, [
2982
+ normalisedValue
2983
+ ]);
2933
2984
  return jsxs("svg", {
2934
2985
  className: "ProgressCircle",
2935
2986
  width: width,
@@ -2961,6 +3012,7 @@ indicatorLineColor, indicatorLineGradient, outerGlowRadius, outerGlowColors = []
2961
3012
  }
2962
3013
  }),
2963
3014
  jsx("circle", {
3015
+ ref: sliderElementRef,
2964
3016
  id: "circle2",
2965
3017
  className: "ProgressCircle-fg",
2966
3018
  cx: cx,
@@ -2972,7 +3024,6 @@ indicatorLineColor, indicatorLineGradient, outerGlowRadius, outerGlowColors = []
2972
3024
  strokeDasharray: circ,
2973
3025
  // transform: `rotate(${polarity === Polarity.unipolar ? '135deg' : '270deg'})`,
2974
3026
  transform: polarity === Polarity.unipolar ? 'rotate(135deg)' : 'rotate(270deg)',
2975
- strokeDashoffset: polarity === Polarity.unipolar ? unipolarOffset : bipolarOffset,
2976
3027
  filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius)
2977
3028
  }
2978
3029
  }),
@@ -3023,14 +3074,30 @@ const InnerCircle = ({ size = RotarySliderSizes.small, handleShape = RotarySlide
3023
3074
  const squareHandleY = size === RotarySliderSizes.small ? -31 : -62;
3024
3075
  const circleHandleX = size === RotarySliderSizes.small ? 16 : 20;
3025
3076
  const circleHandleY = size === RotarySliderSizes.small ? 16 : 20;
3077
+ const handleElementRef = useRef(null);
3078
+ const animationFrameRef = useRef(null);
3079
+ const prevValRef = useRef(null);
3080
+ const animateHandle = animateRotaryHandle({
3081
+ animationFrameRef,
3082
+ elementRef: handleElementRef,
3083
+ prevValRef,
3084
+ handleShape
3085
+ });
3086
+ useEffect(()=>{
3087
+ if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
3088
+ animateHandle(normalisedValue);
3089
+ }
3090
+ }, [
3091
+ normalisedValue
3092
+ ]);
3026
3093
  return jsxs("svg", {
3027
3094
  className: "InnerCircle",
3028
3095
  width: width,
3029
3096
  height: height,
3030
3097
  style: {
3031
- filter: `blur(${blur}px)`,
3032
- transform: handleShape === RotarySliderHandleShapes.circle ? `rotate(${ -90 + normalisedValue * 270}deg)` : `rotate(${ -225 + normalisedValue * 270}deg)`
3098
+ filter: `blur(${blur}px)`
3033
3099
  },
3100
+ ref: handleElementRef,
3034
3101
  children: [
3035
3102
  jsx("circle", {
3036
3103
  id: "InnerCircle",
@@ -3263,7 +3330,6 @@ function RotaryCircle({ polarity = Polarity.unipolar, className, id, trackWidth
3263
3330
  const circ = 2 * 3.14 * radius;
3264
3331
  const inactiveArea = 1 - indicatorLineActiveArea;
3265
3332
  const activeZone = circ - circ * inactiveArea;
3266
- // console.log(handleShape, 'MARKERSHAPE');
3267
3333
  return jsx(Box, {
3268
3334
  id: id,
3269
3335
  tabIndex: 0,
@@ -3396,8 +3462,8 @@ function AnimationDataWrapper({ renderFunction, eventId, children }) {
3396
3462
  });
3397
3463
  }
3398
3464
 
3399
- var css_248z$9 = ".canvasContainer {\n --color-brand: #bb68d9;\n}\n";
3400
- styleInject(css_248z$9);
3465
+ var css_248z$a = ".canvasContainer {\n --color-brand: #bb68d9;\n}\n";
3466
+ styleInject(css_248z$a);
3401
3467
 
3402
3468
  // import * as d3 from 'd3';
3403
3469
  // import * as Juce from '@antimatter-audio/juce-framework-frontend';
@@ -3511,7 +3577,7 @@ indicatorId, indicatorLineColor, indicatorLineGradient = GradientStyles.unicolor
3511
3577
  interval: 0.1,
3512
3578
  skew: 0.7
3513
3579
  }, style }) {
3514
- const { bindDrag, normalisedValue, scaledValue, setToDefaultState, setNormalisedState, properties } = useSlider({
3580
+ const { bindDrag, normalisedValue, scaledValue, setToDefaultState, setScaledState, properties } = useSlider({
3515
3581
  id,
3516
3582
  label,
3517
3583
  resetterObject,
@@ -3521,6 +3587,11 @@ indicatorId, indicatorLineColor, indicatorLineGradient = GradientStyles.unicolor
3521
3587
  isRandomizable,
3522
3588
  randomizerObject
3523
3589
  });
3590
+ // console.log(
3591
+ // normalisedValue,
3592
+ // scaledValue,
3593
+ // 'normalisedValuenormalisedValuenormalisedValuenormalisedValuenormalisedValue',
3594
+ // );
3524
3595
  // const defaultGradientColor =
3525
3596
  // size === RotarySliderSizes.large
3526
3597
  // ? GradientStyles.multicolor
@@ -3600,13 +3671,7 @@ indicatorId, indicatorLineColor, indicatorLineGradient = GradientStyles.unicolor
3600
3671
  maxWidth: `${rotarySliderSizeMap?.[size]?.width}px`
3601
3672
  },
3602
3673
  onComplete: (value)=>{
3603
- const normalisedVal = properties && scaledToNormalised({
3604
- scaledValue: value,
3605
- start: properties?.start,
3606
- end: properties?.end,
3607
- skew: properties?.skew
3608
- });
3609
- normalisedVal !== undefined && setNormalisedState(normalisedVal);
3674
+ value !== undefined && setScaledState(value);
3610
3675
  }
3611
3676
  })
3612
3677
  ]
@@ -3619,8 +3684,8 @@ RotarySlider.handleShape = RotarySliderHandleShapes;
3619
3684
  RotarySlider.gradient = GradientStyles;
3620
3685
  RotarySlider.trackWidth = TrackWidths;
3621
3686
 
3622
- var css_248z$8 = ".BarSlider-innerWrapper:hover {\n cursor: pointer;\n}\n\n.BarSlider-Track {\n touch-action: none;\n position: relative;\n width: 100%;\n height: 100%;\n max-height: 100%;\n max-width: 100%;\n background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n position: absolute;\n pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n position: absolute;\n top: 0;\n /* left: 0; */\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n.BarSlider-Handle {\n position: absolute;\n pointer-events: none;\n}\n\n.BarSliderHandle {\n pointer-events: auto;\n}\n.Barslider-IndicatorLineWrapper {\n /* border-radius: var(--trackBorderRadius); */\n overflow: hidden;\n}\n\n.BarSlider-Input {\n font-weight: bold;\n width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n position: absolute;\n bottom: -1.7em;\n left: 0;\n right: 0;\n z-index: 10;\n}\n";
3623
- styleInject(css_248z$8);
3687
+ var css_248z$9 = ".BarSlider-innerWrapper:hover {\n cursor: pointer;\n}\n\n.BarSlider-Track {\n touch-action: none;\n position: relative;\n width: 100%;\n height: 100%;\n max-height: 100%;\n max-width: 100%;\n background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n position: absolute;\n pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n position: absolute;\n top: 0;\n /* left: 0; */\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n.BarSlider-Handle {\n position: absolute;\n pointer-events: none;\n}\n\n.BarSliderHandle {\n pointer-events: auto;\n}\n.Barslider-IndicatorLineWrapper {\n /* border-radius: var(--trackBorderRadius); */\n overflow: hidden;\n}\n\n.BarSlider-Input {\n font-weight: bold;\n width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n position: absolute;\n bottom: -1.7em;\n left: 0;\n right: 0;\n z-index: 10;\n}\n";
3688
+ styleInject(css_248z$9);
3624
3689
 
3625
3690
  function Slider$1({ polarity = Polarity.unipolar, orientation = Orientation.vertical, dragOrientation, isRandomizable = false, randomizerObject, isStandalone = true, isHighlighted = false, showValue = true, showHandle = true, showLabel = true, showInsetBoxShadow = true, resetterObject, className, id, width, height = '100%', onChange, outerGlowRadius, outerGlowColors, trackBorderRadius = 20, blur, style, indicatorLineColor = 'var(--color-brand)', indicatorLineGradient, trackColor = 'var(--bg-lv3)', markColor = 'var(--bg-lv7)', markHighlightColor = 'var(--color-text)', trackStrokeColor, handleFillColor, handleStrokeColor, trackWidth = TrackWidths.small, label, labelColor, marks = [], inputHighlightColor = 'var(--color-brand)', includeValueInHeight = true, // Mocks the initial scaled value of the slider for web veiws outside of JUCE
3626
3691
  mockInitialNormalisedValue = 0, mockProperties = {
@@ -3630,11 +3695,57 @@ mockInitialNormalisedValue = 0, mockProperties = {
3630
3695
  skew: 0.7
3631
3696
  } }) {
3632
3697
  const sliderElementRef = useRef(null);
3698
+ const handleElementRef = useRef(null);
3699
+ const barSliderIndicatorRef = useRef(null);
3633
3700
  const isHorizontal = orientation === Orientation.horizontal;
3634
3701
  const isVertical = orientation === Orientation.vertical;
3635
3702
  const handleWidth = 18;
3703
+ const handleMargin = handleWidth / 2;
3636
3704
  const defaultDragOrientation = orientation;
3637
3705
  const [hoveredMark, setHoveredMark] = useState();
3706
+ // const elementRef = useRef<HTMLDivElement>(null);
3707
+ const animationFrameRef = useRef(null);
3708
+ const prevValRef = useRef(null);
3709
+ const animate = animateBarChart({
3710
+ animationFrameRef,
3711
+ elementRef: barSliderIndicatorRef,
3712
+ prevValRef,
3713
+ polarity,
3714
+ orientation
3715
+ });
3716
+ const animateHandle = animateBarSliderHandle({
3717
+ animationFrameRef,
3718
+ elementRef: handleElementRef,
3719
+ prevValRef,
3720
+ orientation,
3721
+ margin: handleMargin
3722
+ });
3723
+ const { bindDrag, bindSequenceDrag, // bindSequenceBarSliderDrag,
3724
+ // bindDrag,
3725
+ normalisedValue, scaledValue, setScaledState, properties } = useSlider({
3726
+ id,
3727
+ label,
3728
+ mockProperties,
3729
+ resetterObject,
3730
+ mockInitialNormalisedValue,
3731
+ onChange,
3732
+ isStandalone,
3733
+ isRandomizable,
3734
+ randomizerObject,
3735
+ orientation: orientation,
3736
+ dragOrientation: dragOrientation || defaultDragOrientation,
3737
+ sliderElementRef,
3738
+ marks
3739
+ });
3740
+ const drag = isStandalone ? bindDrag : bindSequenceDrag;
3741
+ useEffect(()=>{
3742
+ if (normalisedValue !== null && normalisedValue !== undefined && normalisedValue !== prevValRef.current) {
3743
+ animate(normalisedValue);
3744
+ animateHandle(normalisedValue);
3745
+ }
3746
+ }, [
3747
+ normalisedValue
3748
+ ]);
3638
3749
  const trackWidthMap = {
3639
3750
  small: 5,
3640
3751
  large: 10
@@ -3646,29 +3757,12 @@ mockInitialNormalisedValue = 0, mockProperties = {
3646
3757
  // ? trackWidthMap[trackWidth]
3647
3758
  // : 0
3648
3759
  // : trackWidth;
3649
- const handleMargin = handleWidth / 2;
3650
3760
  const multiColorGradient = `linear-gradient(${isHorizontal ? 'to right' : 'to top'}, var(--color-brand) 0%, var(--color-brand-secondary) 100%`;
3651
3761
  const singleColorGradient = `linear-gradient(${isHorizontal ? 'to right' : 'to top'}, var(--color-brand-700) 0%, var(--color-brand) 100%`;
3652
3762
  const selectedGradientMap = {
3653
3763
  [GradientStyles.multicolor]: multiColorGradient,
3654
3764
  [GradientStyles.unicolor]: singleColorGradient
3655
3765
  };
3656
- const { bindBarSliderDrag, bindSequenceBarSliderDrag, // bindDrag,
3657
- normalisedValue, scaledValue, setNormalisedState, properties } = useSlider({
3658
- id,
3659
- label,
3660
- mockProperties,
3661
- resetterObject,
3662
- mockInitialNormalisedValue,
3663
- onChange,
3664
- isRandomizable,
3665
- randomizerObject,
3666
- orientation: orientation,
3667
- dragOrientation: dragOrientation || defaultDragOrientation,
3668
- sliderElementRef,
3669
- marks
3670
- });
3671
- const drag = isStandalone ? bindBarSliderDrag : bindSequenceBarSliderDrag;
3672
3766
  // const handleRef = useRef(null);
3673
3767
  // useEffect(() => {
3674
3768
  // console.log(normalisedValue, 'NORMALIZEDVAL');
@@ -3745,7 +3839,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
3745
3839
  onMouseEnter: ()=>setHoveredMark(item?.label),
3746
3840
  onMouseLeave: ()=>setHoveredMark(null),
3747
3841
  onClick: ()=>{
3748
- setNormalisedState(item?.value);
3842
+ setScaledState(scaledValue);
3749
3843
  }
3750
3844
  }),
3751
3845
  item?.label ? jsx(Label, {
@@ -3757,7 +3851,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
3757
3851
  color: +normalisedValue.toFixed(2) === +item?.value.toFixed(2) || hoveredMark === item?.label ? markHighlightColor : markColor,
3758
3852
  highlightColor: markHighlightColor,
3759
3853
  onClick: ()=>{
3760
- setNormalisedState(item?.value);
3854
+ setScaledState(scaledValue);
3761
3855
  },
3762
3856
  style: {
3763
3857
  cursor: 'pointer',
@@ -3771,7 +3865,8 @@ mockInitialNormalisedValue = 0, mockProperties = {
3771
3865
  height: isHorizontal && showHandle ? `${handleWidth}px` : isHorizontal && !showHandle ? 'auto' : '100%',
3772
3866
  width: isVertical && showHandle ? `${handleWidth}px` : '100%',
3773
3867
  style: {
3774
- filter: `blur(${blur}px)`
3868
+ filter: `blur(${blur}px)`,
3869
+ touchAction: 'none'
3775
3870
  },
3776
3871
  "data-sliderElement": "true",
3777
3872
  ...drag(),
@@ -3802,6 +3897,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
3802
3897
  children: jsx("div", {
3803
3898
  // TODO: Why aren't the Tailwind classes working?
3804
3899
  // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
3900
+ ref: barSliderIndicatorRef,
3805
3901
  className: "BarSlider-IndicatorLine",
3806
3902
  style: {
3807
3903
  background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
@@ -3811,8 +3907,7 @@ mockInitialNormalisedValue = 0, mockProperties = {
3811
3907
  filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
3812
3908
  ...getBarTransformStyles({
3813
3909
  orientation: orientation,
3814
- polarity,
3815
- normalisedValue: normalisedValue
3910
+ polarity
3816
3911
  })
3817
3912
  }
3818
3913
  })
@@ -3827,11 +3922,10 @@ mockInitialNormalisedValue = 0, mockProperties = {
3827
3922
  zIndex: 2
3828
3923
  },
3829
3924
  children: jsx("div", {
3925
+ ref: handleElementRef,
3830
3926
  className: "BarSlider-Handle",
3831
3927
  style: {
3832
- borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : 'none',
3833
- bottom: isHorizontal ? `calc(50% - ${handleMargin}px)` : `calc(${normalisedValue * 100}% - ${handleMargin}px)`,
3834
- left: isHorizontal ? `calc(${normalisedValue * 100}% - ${handleMargin}px)` : `calc(50% - ${handleMargin}px)`
3928
+ borderRadius: trackBorderRadius ? `${trackBorderRadius}px` : 'none'
3835
3929
  },
3836
3930
  children: jsx(BarSliderHandle, {
3837
3931
  handleFillColor: handleFillColor,
@@ -3863,14 +3957,8 @@ mockInitialNormalisedValue = 0, mockProperties = {
3863
3957
  textAlign: Input.textAlign.center,
3864
3958
  onComplete: (value)=>{
3865
3959
  // normalisedValue !== undefined &&
3866
- // setNormalisedState(normalisedValue);
3867
- const normalisedVal = properties && scaledToNormalised({
3868
- scaledValue: value,
3869
- start: properties?.start,
3870
- end: properties?.end,
3871
- skew: properties?.skew
3872
- });
3873
- normalisedVal !== undefined && setNormalisedState(normalisedVal);
3960
+ // setScaledState(normalisedValue);
3961
+ value !== undefined && setScaledState(value);
3874
3962
  }
3875
3963
  }) : null
3876
3964
  ]
@@ -4219,8 +4307,8 @@ function Toggle({ id, isDisabled = false, onChange, className, width = ButtonSiz
4219
4307
  Toggle.width = ButtonSize;
4220
4308
  Toggle.height = ButtonSize;
4221
4309
 
4222
- var css_248z$7 = ".ThemeWrapper {\n position: relative;\n width: 100%;\n}\n.CRTStyle {\n background: radial-gradient(\n circle,\n rgba(165, 73, 64, 0.1) 2%,\n rgba(55, 24, 21, 0.1) 71%,\n rgba(31, 12, 11, 0.1) 80%\n );\n}\n.CRTStyle::before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n linear-gradient(\n 90deg,\n rgba(255, 0, 0, 0.06),\n rgba(0, 255, 0, 0.02),\n rgba(0, 0, 255, 0.06)\n );\n z-index: 100;\n background-size:\n 100% 2px,\n 3px 100%;\n pointer-events: none;\n}\n";
4223
- styleInject(css_248z$7);
4310
+ var css_248z$8 = ".ThemeWrapper {\n position: relative;\n width: 100%;\n}\n.CRTStyle {\n background: radial-gradient(\n circle,\n rgba(165, 73, 64, 0.1) 2%,\n rgba(55, 24, 21, 0.1) 71%,\n rgba(31, 12, 11, 0.1) 80%\n );\n}\n.CRTStyle::before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n linear-gradient(\n 90deg,\n rgba(255, 0, 0, 0.06),\n rgba(0, 255, 0, 0.02),\n rgba(0, 0, 255, 0.06)\n );\n z-index: 100;\n background-size:\n 100% 2px,\n 3px 100%;\n pointer-events: none;\n}\n";
4311
+ styleInject(css_248z$8);
4224
4312
 
4225
4313
  var Themes;
4226
4314
  (function(Themes) {
@@ -4306,8 +4394,8 @@ function KeyValueDisplayScreen({ className, style, data }) {
4306
4394
  });
4307
4395
  }
4308
4396
 
4309
- var css_248z$6 = ".Oscilloscope {\n background: #1f9b9f;\n height: 200px;\n}\n";
4310
- styleInject(css_248z$6);
4397
+ var css_248z$7 = ".Oscilloscope {\n background: #1f9b9f;\n height: 200px;\n}\n";
4398
+ styleInject(css_248z$7);
4311
4399
 
4312
4400
  function Ticks({ xScale, yScale, innerHeight, innerWidth, centerLine = true, strokeColor = 'var(--color-brand-900)', strokeStyle, centerLineColor = 'var(--color-brand-900)', tickFormat, numberOfTicks = 25, tickOffset = 0 }) {
4313
4401
  const dashArray = '2,3';
@@ -4958,11 +5046,11 @@ function Oscilloscope({ width = 200, height = 200, className, style, id }) {
4958
5046
  });
4959
5047
  }
4960
5048
 
4961
- var css_248z$5 = "@import '../../styles.css';\n.ModuleHeader {\n background-color: var(--bg-lv3);\n font-weight: normal;\n font-family: var(--font-leagueSpartan);\n max-height: 64px;\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n /* border: 2px solid var(--color-brand); */\n border-radius: 3px;\n height: 30px;\n font-size: var(--text-md);\n &:hover,\n &:active {\n background: var(--color-gray-900);\n color: var(--color-brand);\n }\n}\n\n#advancedLayoutButton.selected {\n color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n cursor: pointer;\n font-family: var(--font-leagueSpartan);\n /* display: inline-block;\n vertical-align: middle;\n height: 1rem;\n line-height: 1.25; */\n}\n";
4962
- styleInject(css_248z$5);
5049
+ var css_248z$6 = "@import '../../styles.css';\n.ModuleHeader {\n background-color: var(--bg-lv3);\n font-weight: normal;\n font-family: var(--font-leagueSpartan);\n max-height: 64px;\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n /* border: 2px solid var(--color-brand); */\n border-radius: 3px;\n height: 30px;\n font-size: var(--text-md);\n &:hover,\n &:active {\n background: var(--color-gray-900);\n color: var(--color-brand);\n }\n}\n\n#advancedLayoutButton.selected {\n color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n cursor: pointer;\n font-family: var(--font-leagueSpartan);\n /* display: inline-block;\n vertical-align: middle;\n height: 1rem;\n line-height: 1.25; */\n}\n";
5050
+ styleInject(css_248z$6);
4963
5051
 
4964
- var css_248z$4 = ".PresetManagerContainer {\n width: 100%;\n height: 100%;\n background-color: var(--bg-lv1);\n color: var(--color-text);\n}\n\n.PresetManagerButton {\n width: 100%;\n height: 100%;\n max-width: 300px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n cursor: pointer;\n text-align: center;\n font-family: var(--font-leagueSpartan);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 225px;\n display: inline-block;\n vertical-align: middle;\n height: 1rem;\n line-height: 1.25;\n /* position: relative; */\n &:hover,\n &:active {\n background: var(--color-gray-900);\n }\n /* &.isDirty {\n &::after {\n content: '*';\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n }\n } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n content: '*';\n position: absolute;\n height: 1rem;\n width: 1rem;\n right: -0.75rem;\n top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n position: relative;\n width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n position: absolute;\n font-family: var(--font-leagueSpartan);\n right: 0px;\n left: 0px;\n width: 288px;\n color: var(--color-text);\n background: var(--bg-lv4);\n z-index: 150;\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n outline: none;\n}\n\n.PresetManagerListItem {\n cursor: pointer;\n background: var(--bg-lv4);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 288px;\n}\n\n.PresetManagerListItem:hover {\n background: var(--bg-lv7);\n}\n.PresetManagerListItem.isSelected {\n color: var(--color-brand);\n}\n\n.PresetManagerListItemText {\n display: inline-block;\n vertical-align: middle;\n height: 1.5rem;\n line-height: 1.75;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(288px - 30px);\n}\n";
4965
- styleInject(css_248z$4);
5052
+ var css_248z$5 = ".PresetManagerContainer {\n width: 100%;\n height: 100%;\n background-color: var(--bg-lv1);\n color: var(--color-text);\n}\n\n.PresetManagerButton {\n width: 100%;\n height: 100%;\n max-width: 300px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n cursor: pointer;\n text-align: center;\n font-family: var(--font-leagueSpartan);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 225px;\n display: inline-block;\n vertical-align: middle;\n height: 1rem;\n line-height: 1.25;\n /* position: relative; */\n &:hover,\n &:active {\n background: var(--color-gray-900);\n }\n /* &.isDirty {\n &::after {\n content: '*';\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n }\n } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n content: '*';\n position: absolute;\n height: 1rem;\n width: 1rem;\n right: -0.75rem;\n top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n position: relative;\n width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n position: absolute;\n font-family: var(--font-leagueSpartan);\n right: 0px;\n left: 0px;\n width: 288px;\n color: var(--color-text);\n background: var(--bg-lv4);\n z-index: 150;\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n outline: none;\n}\n\n.PresetManagerListItem {\n cursor: pointer;\n background: var(--bg-lv4);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 288px;\n}\n\n.PresetManagerListItem:hover {\n background: var(--bg-lv7);\n}\n.PresetManagerListItem.isSelected {\n color: var(--color-brand);\n}\n\n.PresetManagerListItemText {\n display: inline-block;\n vertical-align: middle;\n height: 1.5rem;\n line-height: 1.75;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(288px - 30px);\n}\n";
5053
+ styleInject(css_248z$5);
4966
5054
 
4967
5055
  function PresetManager({}) {
4968
5056
  const [presetList, setPresetList] = useState([]);
@@ -5395,8 +5483,8 @@ function ModuleHeader({ ModuleTitle, className, style }) {
5395
5483
  });
5396
5484
  }
5397
5485
 
5398
- var css_248z$3 = ".ModMatrix {\n color: var(--color-text);\n font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n position: relative;\n}\n\n.ModMatrixBodyCell,\n.ModMatrixComboboxCell {\n background: var(--bg-lv4);\n}\n\n.ModMatrixBodyCell.isDisabled,\n.ModMatrixDeleteCell.isDisabled {\n opacity: 0.4;\n}\n\n.ModMatrixCell.isDisabled {\n color: var(--color-gray-400);\n cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n background: var(--color-gray-600);\n} */\n.ModMatrixComboboxItems {\n position: absolute;\n z-index: 50;\n left: 0px;\n /* height: 150px; */\n /* width: 100%; */\n color: var(--color-text);\n /* -ms-overflow-style: none; */\n scrollbar-width: thin;\n overflow-y: scroll;\n overflow-x: hidden;\n cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n width: 10px;\n}\n\n.ModMatrixComboboxItem {\n display: flex;\n align-items: center;\n background: var(--bg-lv4);\n padding: 0 var(--spacing-md);\n width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n cursor: pointer;\n}\n\n.ModMatrixInput {\n text-align: center;\n margin-top: 3px;\n}\n";
5399
- styleInject(css_248z$3);
5486
+ var css_248z$4 = ".ModMatrix {\n color: var(--color-text);\n font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n position: relative;\n}\n\n.ModMatrixBodyCell,\n.ModMatrixComboboxCell {\n background: var(--bg-lv4);\n}\n\n.ModMatrixBodyCell.isDisabled,\n.ModMatrixDeleteCell.isDisabled {\n opacity: 0.4;\n}\n\n.ModMatrixCell.isDisabled {\n color: var(--color-gray-400);\n cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n background: var(--color-gray-600);\n} */\n.ModMatrixComboboxItems {\n position: absolute;\n z-index: 50;\n left: 0px;\n /* height: 150px; */\n /* width: 100%; */\n color: var(--color-text);\n /* -ms-overflow-style: none; */\n scrollbar-width: thin;\n overflow-y: scroll;\n overflow-x: hidden;\n cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n width: 10px;\n}\n\n.ModMatrixComboboxItem {\n display: flex;\n align-items: center;\n background: var(--bg-lv4);\n padding: 0 var(--spacing-md);\n width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n cursor: pointer;\n}\n\n.ModMatrixInput {\n text-align: center;\n margin-top: 3px;\n}\n";
5487
+ styleInject(css_248z$4);
5400
5488
 
5401
5489
  const targetColors = [
5402
5490
  'var(--color-brand)',
@@ -5499,9 +5587,29 @@ function ModMatrixToggleCell({ modifier, isDisabled = false, rowId, color, style
5499
5587
  });
5500
5588
  }
5501
5589
 
5590
+ var css_248z$3 = ".SingleBarViz-Wrapper::after {\n content: '';\n position: absolute;\n left: calc(50% - 1px);\n width: 1px;\n height: 100%;\n background: inherit;\n filter: brightness(1%);\n}\n";
5591
+ styleInject(css_248z$3);
5592
+
5502
5593
  function SingleBarViz({ backgroundColor = 'var(--color-gray-600)', sliderColor = 'var(--color-brand)', height = '6px', isDisabled, polarity = Polarity.unipolar, orientation = Orientation.horizontal, value, className, style }) {
5594
+ const elementRef = useRef(null);
5595
+ const animationFrameRef = useRef(null);
5596
+ const prevValRef = useRef(null);
5597
+ const animate = animateBarChart({
5598
+ animationFrameRef,
5599
+ elementRef,
5600
+ prevValRef,
5601
+ polarity,
5602
+ orientation
5603
+ });
5604
+ useEffect(()=>{
5605
+ if (value !== null && value !== undefined && value !== prevValRef.current) {
5606
+ animate(value);
5607
+ }
5608
+ }, [
5609
+ value
5610
+ ]);
5503
5611
  return jsx("div", {
5504
- className: className,
5612
+ className: `SingleBarViz-Wrapper ${className}`,
5505
5613
  style: {
5506
5614
  width: '100%',
5507
5615
  height,
@@ -5510,14 +5618,14 @@ function SingleBarViz({ backgroundColor = 'var(--color-gray-600)', sliderColor =
5510
5618
  },
5511
5619
  children: jsx("div", {
5512
5620
  className: "SingleBarViz",
5621
+ ref: elementRef,
5513
5622
  style: {
5514
5623
  position: 'absolute',
5515
5624
  background: sliderColor,
5516
5625
  ...getBarTransformStyles({
5517
5626
  isDisabled,
5518
5627
  polarity,
5519
- orientation,
5520
- normalisedValue: value || 0
5628
+ orientation
5521
5629
  }),
5522
5630
  ...style
5523
5631
  }
@@ -5525,11 +5633,12 @@ function SingleBarViz({ backgroundColor = 'var(--color-gray-600)', sliderColor =
5525
5633
  });
5526
5634
  }
5527
5635
  SingleBarViz.polarity = Polarity;
5636
+ SingleBarViz.orientation = Orientation;
5528
5637
 
5529
5638
  function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
5530
5639
  const { setDefaultParameter, updateModSlotRowTarget, globalState: { modSlotTargets } } = useGlobalContext();
5531
5640
  const [_, setIsActive] = useState(false);
5532
- const { bindBarSliderDrag, normalisedValue, scaledValue, properties, setNormalisedState } = useSlider({
5641
+ const { bindDrag, normalisedValue, scaledValue, properties, setScaledState } = useSlider({
5533
5642
  id: modifier,
5534
5643
  rowId,
5535
5644
  updateModSlotPreview: false,
@@ -5562,7 +5671,7 @@ function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
5562
5671
  ...style
5563
5672
  },
5564
5673
  height: '2.5rem',
5565
- ...bindBarSliderDrag(),
5674
+ ...bindDrag(),
5566
5675
  onDoubleClick: ()=>setDefaultParameter(modifier),
5567
5676
  children: [
5568
5677
  jsx(Box, {
@@ -5586,13 +5695,7 @@ function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
5586
5695
  marginBottom: 'var(--spacing-sm)'
5587
5696
  },
5588
5697
  onComplete: (value)=>{
5589
- const normalisedVal = properties && scaledToNormalised({
5590
- scaledValue: value,
5591
- start: properties?.start,
5592
- end: properties?.end,
5593
- skew: properties?.skew
5594
- });
5595
- normalisedVal !== undefined && setNormalisedState(normalisedVal);
5698
+ value !== undefined && setScaledState(value);
5596
5699
  }
5597
5700
  })
5598
5701
  }),
@@ -5602,21 +5705,13 @@ function ModMatrixCell({ modifier, rowId, isDisabled, color, style }) {
5602
5705
  pointerEvents: 'none'
5603
5706
  },
5604
5707
  children: jsx(SingleBarViz, {
5605
- value: modifier?.value || 0,
5708
+ value: normalisedValue || 0,
5606
5709
  polarity: SingleBarViz?.polarity?.bipolar,
5710
+ orientation: SingleBarViz?.orientation?.horizontal,
5607
5711
  // backgroundColor={
5608
5712
  // isActive ? 'var(--color-gray-500)' : 'var(--color-gray-600)'
5609
5713
  // }
5610
- sliderColor: color,
5611
- style: {
5612
- alignSelf: 'flex-end',
5613
- pointerEvents: 'none',
5614
- ...getBarTransformStyles({
5615
- orientation: Orientation?.horizontal,
5616
- polarity: Polarity?.bipolar,
5617
- normalisedValue
5618
- })
5619
- }
5714
+ sliderColor: color
5620
5715
  })
5621
5716
  })
5622
5717
  ]