@antimatter-audio/antimatter-ui 2.3.0 → 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,22 @@ 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));
 };
@@ -579,96 +595,85 @@ 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 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];
-    var _useState1 = _sliced_to_array$1(useState(0), 2), scaledValue = _useState1[0], setScaledValue = _useState1[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];
-    // const [log, setLog] = useState('');
     var handleChange = function(_, newValue) {
-        knobState.setNormalisedValue(newValue);
-    // setValue(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
+            }));
+        }
     };
-    // const mouseDown = () => {
-    //   knobState.sliderDragStarted();
-    // };
-    // const changeCommitted = (event: any, newValue: any) => {
-    //   console.log(event);
-    //   knobState.setNormalisedValue(newValue);
-    //   knobState.sliderDragEnded();
-    // };
     useEffect(function() {
-        var valueListenerId = knobState.valueChangedEvent.addListener(function() {
-            setNormalizedValue(knobState.getNormalisedValue());
-            setScaledValue(knobState.getScaledValue());
-        });
-        var propertiesListenerId = knobState.propertiesChangedEvent.addListener(function() {
-            return setProperties(knobState.properties);
-        });
-        console.log(knobState.getNormalisedValue(), knobState.getScaledValue(), 'VALUELISTENERID');
-        setNormalizedValue(knobState.getNormalisedValue());
-        setScaledValue(knobState.getScaledValue());
-        return function cleanup() {
-            knobState.valueChangedEvent.removeListener(valueListenerId);
-            knobState.propertiesChangedEvent.removeListener(propertiesListenerId);
-        };
+        {
+            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);
+                };
+            }
+        }
     }, []);
-    // function calculateValue() {
-    //   return sliderState.getScaledValue();
-    // }
-    // const [hasStoreData, setHasStoreData] = useState<boolean>(false);
-    // function snapToLegalValue(value: any) {
-    //   if (interval == 0) return value;
-    //   return clamp(
-    //     min + interval * Math.floor((value - min) / interval + 0.5),
-    //     min,
-    //     max,
-    //   );
-    // }
-    // useEffect(() => {
-    //   const knobState = Juce.getSliderState(id);
-    //   knobState.valueChangedEvent.addListener(() => {
-    //     console.log('value changed listener');
-    //     setValue(knobState.getNormalisedValue());
-    //     setPr
-    //     setMin(knobState?.properties?.start);
-    //     setMax(knobState?.properties?.end);
-    //     setInterval(knobState?.properties?.interval);
-    //     // setValue(knobState?.scaledValue);
-    //   });
-    //   knobRef?.current?.addEventListener('mousedown', (event: any) => {
-    //     console.log(event, 'mousedown listener');
-    //     knobState.sliderDragStarted();
-    //   });
-    //   knobRef?.current?.addEventListener('mouseup', (event: any) => {
-    //     console.log(knobState, event, 'mouseup listener');
-    //     knobState.sliderDragEnded();
-    //   });
-    //   knobRef?.current?.addEventListener('mousemove', (event: any) => {
-    //     console.log(knobState, 'mousemove listener');
-    //     knobState.setNormalisedValue(value + interval);
-    //   });
-    // }, []);
     var bindDrag = useDrag(function(param) {
         var down = param.down, delta = param.delta;
         if (down) {
-            // const knobState = Juce.getSliderState(id);
-            // console.log(interval, value, 'interval');
-            // setValue(() => {
-            //   // console.log(value, delta, delta[1] * -1, 'value, delta[1]');
-            //   const newValue = value + delta[1] * (properties?.interval || 0.01) * -1;
-            //   return clamp(newValue);
-            // });
-            // console.log(value, 'VALUE');
             var newValue = normalizedValue + delta[1] * ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01) * -1;
-            // knobState.setNormalisedValue(Math.round(normalizedValue * 100) / 100);
             handleChange(event, newValue);
-        // console.log(
-        //   knobState,
-        //   value,
-        //   snapToLegalValue(value),
-        //   'KNOBSTATE_______',
-        // );
         }
     }, {
         preventDefault: true
@@ -692,14 +697,13 @@ 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={(e) => 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: "".concat(knobType === "STANDARD" ? normalizedValue : normalizedValue + 0.5, "turn")

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.3.0",
+  "version": "2.4.0",
   "description": "React UI component library for Antimatter Audio.",
   "repository": {
     "type": "git",