@antimatter-audio/antimatter-ui 2.2.1 → 2.4.0

package/README.md

@@ -46,6 +46,17 @@ NOTE: You will not see any _local_ changes you have made to this library yet. To
 
 5. Run `npm run start` in **this project** to build your local changes.
 
+6. If you don't see your changes, try running:
+
+```
+rm -rf node_modules
+npm cache clean --force
+npm install
+npm run link-ui
+```
+
+in **antimatter-plugin-template**.
+
 You should now see your local changes to these components at [http://localhost:3000](http://localhost:3000).
 
 ### Adding new components

package/dist/index.d.ts

@@ -141,8 +141,19 @@ interface KnobProps {
     knobType?: KNOB_TYPE;
     className?: string;
     style?: object;
+    mockInitialScaledValue?: number;
+    mockProperties?: JuceSliderProperties;
 }
-declare function Knob({ label, labelPosition, showValue, knobType, id, className, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
+interface JuceSliderProperties {
+    name?: string;
+    label?: string;
+    start: number;
+    end: number;
+    interval: number;
+    skew?: number;
+    numSteps?: number;
+}
+declare function Knob({ label, labelPosition, showValue, knobType, id, className, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
 declare namespace Knob {
     var LABEL_POSITION: typeof POSITION;
     var KNOB_TYPE: typeof KNOB_TYPE;

package/dist/index.js

@@ -476,6 +476,26 @@ var TextLabel = function(param) {
     }, text ? text : children);
 };
 
+var clamp = function(val) {
+    var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
+    return Math.max(min, Math.min(max, val));
+};
+// mocks the `normalisedToScaledValue` internal method from JUCE
+// This will allow us to test the JS UI without needing access to the JUCE backend
+function normalisedToScaledValue(param) {
+    var normalisedValue = param.normalisedValue, _param_skew = param.skew, skew = _param_skew === void 0 ? 1.0 : _param_skew, end = param.end, start = param.start;
+    return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
+}
+// mocks the `getNormalisedValue` method from JUCE
+// This will allow us to test the JS UI without needing access to the JUCE backend
+function getNormalisedValue(param) {
+    var scaledValue = param.scaledValue, start = param.start, end = param.end, _param_skew = param.skew, skew = _param_skew === void 0 ? 1.0 : _param_skew;
+    return Math.pow((scaledValue - start) / (end - start), skew);
+}
+var decimalToPercent = function(decimal) {
+    return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
+};
+
 function _array_like_to_array$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -575,47 +595,87 @@ var KNOB_TYPE;
     KNOB_TYPE["BIPOLAR"] = "BIPOLAR";
 })(KNOB_TYPE || (KNOB_TYPE = {}));
 function Knob(param) {
-    var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, _param_knobType = param.knobType, knobType = _param_knobType === void 0 ? "STANDARD" : _param_knobType, id = param.id, className = param.className;
-    var _useState = _sliced_to_array$1(useState(knobType === "STANDARD" ? 0 : -100), 2), min = _useState[0], setMin = _useState[1];
-    var _useState1 = _sliced_to_array$1(useState(knobType === "STANDARD" ? 0 : 100), 2), max = _useState1[0], setMax = _useState1[1];
-    // const [interval, setInterval] = useState<number>(1);
-    var _useState2 = _sliced_to_array$1(useState(0), 2), value = _useState2[0], setValue = _useState2[1];
-    // const [hasStoreData, setHasStoreData] = useState<boolean>(false);
+    var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, _param_knobType = param.knobType, knobType = _param_knobType === void 0 ? "STANDARD" : _param_knobType, id = param.id, className = param.className, _param_mockInitialScaledValue = param.mockInitialScaledValue, mockInitialScaledValue = _param_mockInitialScaledValue === void 0 ? 0 : _param_mockInitialScaledValue, _param_mockProperties = param.// From https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L135
+    mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+        start: 0,
+        end: 100,
+        interval: 0.01,
+        skew: 1,
+        name: '',
+        label: '',
+        numSteps: 100
+    } : _param_mockProperties;
+    var knobState = Juce.getSliderState(id);
+    // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
+    var isLocalhost = window.location.hostname === 'localhost';
+    // getNormalisedValue:
+    /**
+   * Returns the normalised value of the corresponding backend parameter. This value is always in the
+   * [0, 1] range (inclusive).
+   *
+   * The meaning of this range is the same as in the case of
+   * AudioProcessorParameter::getValue() (C++).
+   */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
+    var _useState = _sliced_to_array$1(useState(0), 2), normalizedValue = _useState[0], setNormalizedValue = _useState[1];
+    // getScaledValue:
+    /**
+   * Returns the scaled value of the parameter. This corresponds to the return value of
+   * NormalisableRange::convertFrom0to1() (C++). This value will differ from a linear
+   * [0, 1] range if a non-default NormalisableRange was set for the parameter.
+   */ var _useState1 = _sliced_to_array$1(useState(0), 2), scaledValue = _useState1[0], setScaledValue = _useState1[1];
+    var _useState2 = _sliced_to_array$1(useState(null), 2), properties = _useState2[0], setProperties = _useState2[1];
+    var handleChange = function(_, newValue) {
+        knobState === null || knobState === void 0 ? void 0 : knobState.setNormalisedValue(newValue);
+        // If the front end app is running in a browser, set the new value here.
+        // Otherwise, the value will come from JUCE.
+        if (isLocalhost) {
+            var newValueClamped = clamp(newValue);
+            setNormalizedValue(newValueClamped);
+            (mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.start) && (mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.end) && setScaledValue(normalisedToScaledValue({
+                normalisedValue: newValueClamped,
+                start: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.start,
+                end: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.end
+            }));
+        }
+    };
     useEffect(function() {
-        var knobState = Juce.getSliderState(id);
-        if (!!knobState) {
-            var _knobState_properties, _knobState_properties1;
-            setMin(knobType === "STANDARD" ? (knobState === null || knobState === void 0 ? void 0 : (_knobState_properties = knobState.properties) === null || _knobState_properties === void 0 ? void 0 : _knobState_properties.start) * 100 : -100);
-            setMax(knobType === "STANDARD" ? (knobState === null || knobState === void 0 ? void 0 : (_knobState_properties1 = knobState.properties) === null || _knobState_properties1 === void 0 ? void 0 : _knobState_properties1.end) * 100 : 100);
-            // setInterval(knobState?.properties?.interval);
-            setValue(parseInt(Number(knobState === null || knobState === void 0 ? void 0 : knobState.scaledValue).toFixed(1), 10));
-        // setHasStoreData(true);
+        {
+            if (isLocalhost) {
+                // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
+                setProperties(mockProperties !== null && mockProperties !== void 0 ? mockProperties : null);
+                setNormalizedValue(getNormalisedValue({
+                    scaledValue: mockInitialScaledValue,
+                    start: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.start,
+                    end: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.end
+                }));
+                setScaledValue(mockInitialScaledValue);
+                knobState.setNormalisedValue(mockInitialScaledValue);
+                return;
+            } else {
+                var valueListenerId = knobState.valueChangedEvent.addListener(function() {
+                    setNormalizedValue(knobState.getNormalisedValue());
+                    setScaledValue(knobState.getScaledValue());
+                });
+                var propertiesListenerId = knobState.propertiesChangedEvent.addListener(function() {
+                    return setProperties(knobState.properties);
+                });
+                setProperties(knobState.properties);
+                setNormalizedValue(knobState.getNormalisedValue());
+                setScaledValue(knobState.getScaledValue());
+                return function cleanup() {
+                    knobState.valueChangedEvent.removeListener(valueListenerId);
+                    knobState.propertiesChangedEvent.removeListener(propertiesListenerId);
+                };
+            }
         }
     }, []);
-    useEffect(function() {
-        var knobState = Juce.getSliderState(id);
-        knobState.setNormalisedValue(Math.round(value) / 100);
-    }, [
-        value
-    ]);
     var bindDrag = useDrag(function(param) {
         var down = param.down, delta = param.delta;
-        setValue(function() {
-            var newValue = value + delta[1] * -1;
-            if (down) {
-                if (newValue >= max) {
-                    return max;
-                } else if (newValue <= min) {
-                    return min;
-                } else {
-                    return newValue;
-                }
-            } else {
-                return value;
-            }
-        });
+        if (down) {
+            var newValue = normalizedValue + delta[1] * ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01) * -1;
+            handleChange(event, newValue);
+        }
     }, {
-        delay: 1000,
         preventDefault: true
     });
     return /*#__PURE__*/ React__default.createElement("div", {
@@ -637,24 +697,21 @@ function Knob(param) {
     }), knobType === "BIPOLAR" && /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-center-marker"
     }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
-        onPointerDown: function(e) {
-            return e.currentTarget.focus();
-        },
         className: classnames('Knob', className)
     }, bindDrag()), {
         style: {
             transform: knobType === "STANDARD" ? '' : ')',
             touchAction: 'none'
         }
-    }), /*#__PURE__*/ React__default.createElement("div", {
+    }), /*#__PURE__*/ React__default.createElement("ul", null, /*#__PURE__*/ React__default.createElement("li", null, properties === null || properties === void 0 ? void 0 : properties.start), /*#__PURE__*/ React__default.createElement("li", null, properties === null || properties === void 0 ? void 0 : properties.end), /*#__PURE__*/ React__default.createElement("li", null, normalizedValue)), /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-inner",
         style: {
-            rotate: knobType === "STANDARD" ? "".concat(360 * value / 100, "deg") : "".concat(270 * value / 200, "deg")
+            rotate: "".concat(knobType === "STANDARD" ? normalizedValue : normalizedValue + 0.5, "turn")
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-marker"
     }))), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
-        text: "".concat(value),
+        text: "".concat(decimalToPercent(scaledValue)),
         padding: [
             SPACING.SMALL,
             SPACING.NONE
@@ -667,10 +724,6 @@ Knob.KNOB_TYPE = KNOB_TYPE;
 var css_248z$3 = ".Slider {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.track {\n  background-color: #737373;\n}\n.horizontal .track {\n  height: 12px;\n}\n.vertical .track {\n  width: 12px;\n}\n\n.thumb {\n  height: 12px;\n  width: 12px;\n  background-color: #404040;\n}";
 styleInject(css_248z$3);
 
-var decimalToPercent = function(decimal) {
-    return Math.ceil(decimal * 100);
-};
-
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antimatter-audio/antimatter-ui",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "React UI component library for Antimatter Audio.",
   "repository": {
     "type": "git",