@antimatter-audio/antimatter-ui 8.7.0 → 9.0.1
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.d.ts +4 -4
- package/dist/index.js +52 -53
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -88,8 +88,8 @@ declare enum InputTypes {
|
|
|
88
88
|
text = "text",
|
|
89
89
|
number = "number"
|
|
90
90
|
}
|
|
91
|
-
declare function Input({
|
|
92
|
-
|
|
91
|
+
declare function Input({ onComplete, value, min, max, type, minLength, maxLength, fontSize, style, className, id, textColor, }: {
|
|
92
|
+
onComplete?: (scaledValue: number) => any;
|
|
93
93
|
type?: InputTypes;
|
|
94
94
|
id?: string;
|
|
95
95
|
fontSize?: FontSizes;
|
|
@@ -373,7 +373,7 @@ declare function normalisedToScaled({ normalisedValue, properties, }: {
|
|
|
373
373
|
normalisedValue: number;
|
|
374
374
|
properties: JuceSliderProperties;
|
|
375
375
|
}): number;
|
|
376
|
-
declare function
|
|
376
|
+
declare function scaledToNormalised({ scaledValue, properties, }: {
|
|
377
377
|
scaledValue: number;
|
|
378
378
|
properties: JuceSliderProperties;
|
|
379
379
|
}): number;
|
|
@@ -413,4 +413,4 @@ declare const getPosition: ({ sliderType, sliderOrientation, polarity, }: {
|
|
|
413
413
|
right?: undefined;
|
|
414
414
|
};
|
|
415
415
|
|
|
416
|
-
export { Slider as BarSlider, Box, Button, Dropdown, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, ThemeProvider, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledTonormalised };
|
|
416
|
+
export { Slider as BarSlider, Box, Button, Dropdown, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, ThemeProvider, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledToNormalised as scaledTonormalised };
|
package/dist/index.js
CHANGED
|
@@ -484,7 +484,7 @@ var InputTypes;
|
|
|
484
484
|
InputTypes["number"] = "number";
|
|
485
485
|
})(InputTypes || (InputTypes = {}));
|
|
486
486
|
function Input(param) {
|
|
487
|
-
var
|
|
487
|
+
var onComplete = param.onComplete, value = param.value, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, fontSize = param.fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
|
|
488
488
|
var _inputRef_current;
|
|
489
489
|
var _useState = _sliced_to_array$3(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
|
|
490
490
|
var _useState1 = _sliced_to_array$3(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
|
|
@@ -534,9 +534,9 @@ function Input(param) {
|
|
|
534
534
|
if (errorMessages.length === 0 && !isIncomplete) {
|
|
535
535
|
setHasIncompleteValue(false);
|
|
536
536
|
setHasError(false);
|
|
537
|
-
|
|
537
|
+
onComplete && onComplete(newValue);
|
|
538
538
|
}
|
|
539
|
-
|
|
539
|
+
onComplete && onComplete(newValue);
|
|
540
540
|
valueRef.current = newValue;
|
|
541
541
|
}
|
|
542
542
|
}, timeoutVal);
|
|
@@ -595,7 +595,9 @@ function Input(param) {
|
|
|
595
595
|
ref: inputRef,
|
|
596
596
|
className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
|
|
597
597
|
style: _object_spread$a({
|
|
598
|
-
|
|
598
|
+
// TODO
|
|
599
|
+
// color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
|
|
600
|
+
color: hasError ? 'red' : textColor,
|
|
599
601
|
fontSize: fontSize
|
|
600
602
|
}, style),
|
|
601
603
|
value: internalValue,
|
|
@@ -656,7 +658,7 @@ function normalisedToScaled(param) {
|
|
|
656
658
|
}
|
|
657
659
|
// mocks the `getnormalisedValue` method from JUCE
|
|
658
660
|
// This will allow us to test the JS UI without needing access to the JUCE backend
|
|
659
|
-
function
|
|
661
|
+
function scaledToNormalised(param) {
|
|
660
662
|
var scaledValue = param.scaledValue, properties = param.properties;
|
|
661
663
|
var start = properties.start, end = properties.end, skew = properties.skew;
|
|
662
664
|
return Math.pow((scaledValue - start) / (end - start), skew);
|
|
@@ -777,7 +779,7 @@ var useSlider = function(param) {
|
|
|
777
779
|
interval: 0.1,
|
|
778
780
|
skew: 0.7
|
|
779
781
|
} : _param_mockProperties, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? SliderOrientation.vertical : _param_sliderOrientation, onChange = param.onChange;
|
|
780
|
-
|
|
782
|
+
// const sliderState: JuceSlider = Juce.getSliderState(id);
|
|
781
783
|
// if isLocalhost is true, the front end app is running outside of JUCE in a browser.
|
|
782
784
|
var isLocalhost = window.location.hostname === 'localhost';
|
|
783
785
|
// getNormalisedValue:
|
|
@@ -792,32 +794,33 @@ var useSlider = function(param) {
|
|
|
792
794
|
var _useState = _sliced_to_array$2(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
|
|
793
795
|
var _useState1 = _sliced_to_array$2(useState(0), 2), normalisedValue = _useState1[0], setNormalisedValue = _useState1[1];
|
|
794
796
|
var _useState2 = _sliced_to_array$2(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
|
|
795
|
-
var
|
|
796
|
-
|
|
797
|
+
var scaledValueRef = useRef(null);
|
|
798
|
+
var normalisedValueRef = useRef(null);
|
|
799
|
+
// Set the initial state
|
|
797
800
|
useEffect(function() {
|
|
801
|
+
var sliderState = Juce.getSliderState(id);
|
|
798
802
|
if (isLocalhost) {
|
|
799
803
|
// This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
|
|
800
804
|
setProperties(mockProperties);
|
|
801
805
|
setNormalisedValue(mockInitialNormalisedValue);
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
// properties: mockProperties,
|
|
806
|
-
// }),
|
|
807
|
-
// );
|
|
806
|
+
} else {
|
|
807
|
+
setNormalisedValue(normalisedValue);
|
|
808
|
+
setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
|
|
808
809
|
}
|
|
809
810
|
}, []);
|
|
811
|
+
// Update the local state when the ID changes
|
|
812
|
+
useEffect(function() {
|
|
813
|
+
var sliderState = Juce.getSliderState(id);
|
|
814
|
+
updateLocalState(sliderState);
|
|
815
|
+
}, [
|
|
816
|
+
id
|
|
817
|
+
]);
|
|
810
818
|
// Sets up listeners to handle changes on the backend
|
|
811
819
|
useEffect(function() {
|
|
812
820
|
if (!isLocalhost) {
|
|
813
|
-
|
|
814
|
-
setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
|
|
821
|
+
var sliderState = Juce.getSliderState(id);
|
|
815
822
|
var valueListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.addListener(function() {
|
|
816
|
-
|
|
817
|
-
var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
|
|
818
|
-
setNormalisedValue(parseFloat(normalisedValueFromState.toFixed(2)));
|
|
819
|
-
setScaledValue(parseFloat(scaledValueFromState.toFixed(2)));
|
|
820
|
-
onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
|
|
823
|
+
updateLocalState(sliderState);
|
|
821
824
|
});
|
|
822
825
|
var propertiesListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.addListener(function() {
|
|
823
826
|
return setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
|
|
@@ -830,35 +833,30 @@ var useSlider = function(param) {
|
|
|
830
833
|
return;
|
|
831
834
|
}
|
|
832
835
|
});
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
// this.normalisedToScaledValue(newValue)
|
|
846
|
-
// );
|
|
847
|
-
// const scaled = normalisedToScaled({
|
|
848
|
-
// normalisedValue: newValue,
|
|
849
|
-
// properties,
|
|
850
|
-
// });
|
|
851
|
-
// const snappedScaledValue = normalisedToScaled({
|
|
852
|
-
// normalisedValue: legalValue,
|
|
853
|
-
// properties,
|
|
854
|
-
// });
|
|
855
|
-
// console.log(scaled, snappedScaledValue, 'scaled, snappedScaledValue,');
|
|
856
|
-
console.log(newValue, properties.start, properties.end, 'NEWVALUE');
|
|
836
|
+
// Update the local state from JUCE
|
|
837
|
+
var updateLocalState = function(sliderState) {
|
|
838
|
+
var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
|
|
839
|
+
var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
|
|
840
|
+
setNormalisedValue(parseFloat(normalisedValueFromState.toFixed(2)));
|
|
841
|
+
setScaledValue(parseFloat(scaledValueFromState.toFixed(2)));
|
|
842
|
+
onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
|
|
843
|
+
};
|
|
844
|
+
// Update JUCE state
|
|
845
|
+
var setNormalisedState = function(newValue) {
|
|
846
|
+
var sliderState = Juce.getSliderState(id);
|
|
847
|
+
if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== newValue) {
|
|
857
848
|
!isLocalhost && sliderState.setNormalisedValue(clamp(newValue));
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
849
|
+
normalisedValueRef.current = newValue;
|
|
850
|
+
}
|
|
851
|
+
};
|
|
852
|
+
var setScaledState = function(newValue) {
|
|
853
|
+
var sliderState = Juce.getSliderState(id);
|
|
854
|
+
if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== newValue) {
|
|
855
|
+
!isLocalhost && properties && sliderState.setNormalisedValue(scaledToNormalised({
|
|
856
|
+
scaledValue: clamp(newValue, properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
|
|
857
|
+
properties: properties
|
|
858
|
+
}));
|
|
859
|
+
scaledValueRef.current = newValue;
|
|
862
860
|
}
|
|
863
861
|
};
|
|
864
862
|
var bindDrag = useDrag(function(param) {
|
|
@@ -869,7 +867,7 @@ var useSlider = function(param) {
|
|
|
869
867
|
// const formattedNewValue = formatValue(newValue, properties);
|
|
870
868
|
var invertedNewValue = newValue;
|
|
871
869
|
var returnValue = SliderOrientation.vertical ? invertedNewValue : newValue;
|
|
872
|
-
|
|
870
|
+
setNormalisedState(returnValue);
|
|
873
871
|
}
|
|
874
872
|
}, {
|
|
875
873
|
preventDefault: true
|
|
@@ -878,7 +876,8 @@ var useSlider = function(param) {
|
|
|
878
876
|
// const onChangeStarted = () => sliderState.sliderDragStarted();
|
|
879
877
|
// const onChangeCommitted = () => sliderState.sliderDragEnded();
|
|
880
878
|
return {
|
|
881
|
-
|
|
879
|
+
setNormalisedState: setNormalisedState,
|
|
880
|
+
setScaledState: setScaledState,
|
|
882
881
|
// onChangeStarted,
|
|
883
882
|
// onChangeCommitted,
|
|
884
883
|
bindDrag: bindDrag,
|
|
@@ -1267,7 +1266,7 @@ function SliderValue(param) {
|
|
|
1267
1266
|
minLength: minLength,
|
|
1268
1267
|
maxLength: maxLength,
|
|
1269
1268
|
style: style,
|
|
1270
|
-
|
|
1269
|
+
onComplete: onChange,
|
|
1271
1270
|
className: classnames('SliderValue', className)
|
|
1272
1271
|
}) : /*#__PURE__*/ React__default.createElement(Label, {
|
|
1273
1272
|
value: value,
|
|
@@ -1838,5 +1837,5 @@ function ThemeProvider(param) {
|
|
|
1838
1837
|
}, children);
|
|
1839
1838
|
}
|
|
1840
1839
|
|
|
1841
|
-
export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, ThemeProvider, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledTonormalised, useSlider };
|
|
1840
|
+
export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, ThemeProvider, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledToNormalised as scaledTonormalised, useSlider };
|
|
1842
1841
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|