@antimatter-audio/antimatter-ui 16.2.8 → 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.
- package/dist/index.js +467 -372
- package/dist/index.js.map +1 -1
- package/dist/types/advanced/CircularDiagramStyleVisualization/CircularDiagramStyleVisualizationChart.d.ts +17 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/CircularDiagramStyleVisualizationChart.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input1.worker.d.ts +10 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input1.worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input1Worker.d.ts +2 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input1Worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input2.worker.d.ts +5 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input2.worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input2Worker.d.ts +2 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input2Worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input3.worker.d.ts +4 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input3.worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input3Worker.d.ts +2 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input3Worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input4.worker.d.ts +4 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input4.worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input4Worker.d.ts +2 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/input4Worker.d.ts.map +1 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/worker.d.ts +6 -0
- package/dist/types/advanced/CircularDiagramStyleVisualization/worker.d.ts.map +1 -0
- package/dist/types/advanced/ControlGroup/ControlGroup.d.ts.map +1 -1
- package/dist/types/advanced/ModMatrix/ModMatrixCell.d.ts.map +1 -1
- package/dist/types/common/types.d.ts +5 -0
- package/dist/types/common/types.d.ts.map +1 -1
- package/dist/types/common/utils.d.ts +50 -10
- package/dist/types/common/utils.d.ts.map +1 -1
- package/dist/types/core/Chart/BlankCanvasForChart.d.ts +16 -0
- package/dist/types/core/Chart/BlankCanvasForChart.d.ts.map +1 -0
- package/dist/types/core/DataViz/SingleBarViz.d.ts +2 -0
- package/dist/types/core/DataViz/SingleBarViz.d.ts.map +1 -1
- package/dist/types/core/Slider/BarSlider.d.ts.map +1 -1
- package/dist/types/core/Slider/RotaryCircle.d.ts.map +1 -1
- package/dist/types/core/Slider/RotarySlider.d.ts.map +1 -1
- package/dist/types/core/Slider/SliderSVG.d.ts.map +1 -1
- package/dist/types/hooks/useCombobox.d.ts.map +1 -1
- package/dist/types/hooks/useSlider.d.ts +4 -4
- package/dist/types/hooks/useSlider.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useState, useEffect, useRef, useReducer, useCallback, useContext, createContext, useEffectEvent } from 'react';
|
|
3
|
-
import * as Juce from 'juce-framework-frontend';
|
|
3
|
+
import * as Juce from '@antimatter-audio/juce-framework-frontend';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { TabGroup, TabList, Tab, Combobox as Combobox$2, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
|
|
6
6
|
import { useGesture } from '@use-gesture/react';
|
|
@@ -34,8 +34,8 @@ function styleInject(css, ref) {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
var css_248z$
|
|
38
|
-
styleInject(css_248z$
|
|
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
|
-
|
|
192
|
-
|
|
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,
|
|
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:
|
|
297
|
+
width: '100%',
|
|
252
298
|
height: '100%',
|
|
253
|
-
transform: unipolarValue
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
292
|
-
const
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
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
|
|
345
|
+
return roundedInterval;
|
|
301
346
|
}
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
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$
|
|
462
|
-
styleInject(css_248z$
|
|
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$
|
|
465
|
-
styleInject(css_248z$
|
|
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$
|
|
607
|
-
styleInject(css_248z$
|
|
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$
|
|
654
|
-
styleInject(css_248z$
|
|
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$
|
|
738
|
-
styleInject(css_248z$
|
|
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
|
-
|
|
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
|
-
|
|
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$
|
|
2087
|
-
styleInject(css_248z$
|
|
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$
|
|
2365
|
-
styleInject(css_248z$
|
|
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
|
|
2579
|
-
const normalisedValueRef = useRef(null);
|
|
2702
|
+
const previousScaledValueRef = useRef(null);
|
|
2580
2703
|
const sliderState = Juce.getSliderState(id);
|
|
2581
|
-
const
|
|
2582
|
-
|
|
2583
|
-
const
|
|
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
|
-
|
|
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
|
-
|
|
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 = (
|
|
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
|
|
2632
|
-
const
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
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
|
-
//
|
|
2751
|
+
// Rerender the component when the ID changes
|
|
2649
2752
|
useEffect(()=>{
|
|
2650
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2682
|
-
if (
|
|
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
|
-
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
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
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
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
|
|
2781
|
-
|
|
2782
|
-
if (
|
|
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
|
-
|
|
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
|
-
|
|
2853
|
+
setJuceScaledValue(newValue);
|
|
2821
2854
|
}
|
|
2822
2855
|
},
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
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
|
-
|
|
2868
|
+
setScaledState: setJuceScaledValue,
|
|
2835
2869
|
setToDefaultState,
|
|
2836
2870
|
scaledToNormalised,
|
|
2837
|
-
bindBarSliderDrag,
|
|
2838
|
-
bindSequenceBarSliderDrag,
|
|
2839
2871
|
bindDrag,
|
|
2840
|
-
|
|
2872
|
+
bindSequenceDrag,
|
|
2873
|
+
normalisedValue,
|
|
2841
2874
|
scaledValue,
|
|
2842
2875
|
properties
|
|
2843
2876
|
};
|
|
2844
2877
|
};
|
|
2845
2878
|
|
|
2846
|
-
var css_248z$
|
|
2847
|
-
styleInject(css_248z$
|
|
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$
|
|
2850
|
-
styleInject(css_248z$
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
2932
|
-
const
|
|
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,11 +3462,11 @@ function AnimationDataWrapper({ renderFunction, eventId, children }) {
|
|
|
3396
3462
|
});
|
|
3397
3463
|
}
|
|
3398
3464
|
|
|
3399
|
-
var css_248z$
|
|
3400
|
-
styleInject(css_248z$
|
|
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
|
-
// import * as Juce from 'juce-framework-frontend';
|
|
3469
|
+
// import * as Juce from '@antimatter-audio/juce-framework-frontend';
|
|
3404
3470
|
// import useIndicator, { DataSource } from '../../hooks/useIndicator';
|
|
3405
3471
|
// Indicator Light UI component.
|
|
3406
3472
|
// If 'isActive' is true, the light is on.
|
|
@@ -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,
|
|
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
|
-
|
|
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$
|
|
3623
|
-
styleInject(css_248z$
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
//
|
|
3867
|
-
|
|
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$
|
|
4223
|
-
styleInject(css_248z$
|
|
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$
|
|
4310
|
-
styleInject(css_248z$
|
|
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$
|
|
4962
|
-
styleInject(css_248z$
|
|
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$
|
|
4965
|
-
styleInject(css_248z$
|
|
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$
|
|
5399
|
-
styleInject(css_248z$
|
|
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)',
|
|
@@ -5474,7 +5562,7 @@ function ModMatrixComboboxCell({ rowId, rowIndex, isDisabled, key, color, style
|
|
|
5474
5562
|
}, key);
|
|
5475
5563
|
}
|
|
5476
5564
|
|
|
5477
|
-
// import * as Juce from 'juce-framework-frontend';
|
|
5565
|
+
// import * as Juce from '@antimatter-audio/juce-framework-frontend';
|
|
5478
5566
|
function ModMatrixToggleCell({ modifier, isDisabled = false, rowId, color, style }) {
|
|
5479
5567
|
const { // getDefaultParameter,
|
|
5480
5568
|
updateModSlotRowTarget, globalState: { modSlotTargets } } = useGlobalContext();
|
|
@@ -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 {
|
|
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
|
-
...
|
|
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
|
-
|
|
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:
|
|
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
|
]
|