@antimatter-audio/antimatter-ui 2.4.3 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.d.ts +36 -12
  2. package/dist/index.js +242 -61
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -83,6 +83,15 @@ declare enum WIDTH {
83
83
  FULL = "100%",
84
84
  AUTO = "auto"
85
85
  }
86
+ interface JuceSliderProperties {
87
+ name?: string;
88
+ label?: string;
89
+ start: number;
90
+ end: number;
91
+ interval: number;
92
+ skew?: number;
93
+ numSteps?: number;
94
+ }
86
95
 
87
96
  interface GridColProps {
88
97
  span?: number;
@@ -149,33 +158,48 @@ interface KnobProps {
149
158
  mockInitialScaledValue?: number;
150
159
  mockProperties?: JuceSliderProperties;
151
160
  }
152
- interface JuceSliderProperties {
153
- name?: string;
154
- label?: string;
155
- start: number;
156
- end: number;
157
- interval: number;
158
- skew?: number;
159
- numSteps?: number;
160
- }
161
161
  declare function Knob({ label, labelPosition, showValue, knobType, id, className, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
162
162
  declare namespace Knob {
163
163
  var LABEL_POSITION: typeof POSITION;
164
164
  var KNOB_TYPE: typeof KNOB_TYPE;
165
165
  }
166
166
 
167
+ declare enum SLIDER_POLARITY {
168
+ LINEAR = "LINEAR",
169
+ BIPOLAR = "BIPOLAR"
170
+ }
171
+ declare enum SLIDER_TYPE {
172
+ BAR = "BAR",
173
+ ROTARY = "ROTARY"
174
+ }
175
+ declare enum SLIDER_ORIENTATION {
176
+ HORIZONTAL = "HORIZONTAL",
177
+ VERTICAL = "VERTICAL"
178
+ }
167
179
  interface SliderProps {
168
180
  id: any;
169
181
  label?: string;
170
182
  labelPosition?: POSITION;
171
- orientation?: DIRECTION;
172
183
  showValue?: boolean;
184
+ sliderPolarity?: SLIDER_POLARITY;
185
+ sliderType?: SLIDER_TYPE;
186
+ sliderOrientation?: SLIDER_ORIENTATION;
173
187
  className?: string;
188
+ style?: object;
189
+ /**
190
+ * Returns the scaled value of the parameter. This corresponds to the return value of
191
+ * NormalisableRange::convertFrom0to1() (C++). This value will differ from a linear
192
+ * [0, 1] range if a non-default NormalisableRange was set for the parameter.
193
+ */
194
+ mockInitialScaledValue?: number;
195
+ mockProperties?: JuceSliderProperties;
174
196
  }
175
- declare function Slider({ label, labelPosition, orientation, showValue, id, className, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
197
+ declare function Slider({ label, labelPosition, showValue, sliderPolarity, sliderOrientation, sliderType, className, id, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
176
198
  declare namespace Slider {
177
199
  var LABEL_POSITION: typeof POSITION;
178
- var ORIENTATION: typeof DIRECTION;
200
+ var SLIDER_TYPE: typeof SLIDER_TYPE;
201
+ var SLIDER_POLARITY: typeof SLIDER_POLARITY;
202
+ var SLIDER_ORIENTATION: typeof SLIDER_ORIENTATION;
179
203
  }
180
204
 
181
205
  declare enum HEADER_LEVELS {
package/dist/index.js CHANGED
@@ -4,7 +4,6 @@ import classnames from 'classnames';
4
4
  import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
5
5
  import * as Juce from 'juce-framework-frontend';
6
6
  import { useDrag } from '@use-gesture/react';
7
- import ReactSlider from 'react-slider';
8
7
 
9
8
  function styleInject(css, ref) {
10
9
  if ( ref === void 0 ) ref = {};
@@ -223,7 +222,7 @@ function Button(param) {
223
222
  Button.TYPE = BUTTON_TYPE;
224
223
  Button.SIZE = BUTTON_SIZE;
225
224
 
226
- function _define_property$3(obj, key, value) {
225
+ function _define_property$4(obj, key, value) {
227
226
  if (key in obj) {
228
227
  Object.defineProperty(obj, key, {
229
228
  value: value,
@@ -236,7 +235,7 @@ function _define_property$3(obj, key, value) {
236
235
  }
237
236
  return obj;
238
237
  }
239
- function _object_spread$3(target) {
238
+ function _object_spread$4(target) {
240
239
  for(var i = 1; i < arguments.length; i++){
241
240
  var source = arguments[i] != null ? arguments[i] : {};
242
241
  var ownKeys = Object.keys(source);
@@ -246,12 +245,12 @@ function _object_spread$3(target) {
246
245
  }));
247
246
  }
248
247
  ownKeys.forEach(function(key) {
249
- _define_property$3(target, key, source[key]);
248
+ _define_property$4(target, key, source[key]);
250
249
  });
251
250
  }
252
251
  return target;
253
252
  }
254
- function ownKeys$3(object, enumerableOnly) {
253
+ function ownKeys$4(object, enumerableOnly) {
255
254
  var keys = Object.keys(object);
256
255
  if (Object.getOwnPropertySymbols) {
257
256
  var symbols = Object.getOwnPropertySymbols(object);
@@ -259,12 +258,12 @@ function ownKeys$3(object, enumerableOnly) {
259
258
  }
260
259
  return keys;
261
260
  }
262
- function _object_spread_props$3(target, source) {
261
+ function _object_spread_props$4(target, source) {
263
262
  source = source != null ? source : {};
264
263
  if (Object.getOwnPropertyDescriptors) {
265
264
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
266
265
  } else {
267
- ownKeys$3(Object(source)).forEach(function(key) {
266
+ ownKeys$4(Object(source)).forEach(function(key) {
268
267
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
269
268
  });
270
269
  }
@@ -275,7 +274,7 @@ function Col(param) {
275
274
  SPACING.NONE
276
275
  ] : _param_padding, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
277
276
  return /*#__PURE__*/ React.createElement("div", {
278
- style: _object_spread_props$3(_object_spread$3({}, style), {
277
+ style: _object_spread_props$4(_object_spread$4({}, style), {
279
278
  border: border ? '2px solid #888' : ''
280
279
  }),
281
280
  onClick: onClick,
@@ -298,7 +297,7 @@ var FLEX_DIRECTION;
298
297
  FLEX_DIRECTION[FLEX_DIRECTION["COLUMN"] = 1] = "COLUMN";
299
298
  })(FLEX_DIRECTION || (FLEX_DIRECTION = {}));
300
299
 
301
- function _define_property$2(obj, key, value) {
300
+ function _define_property$3(obj, key, value) {
302
301
  if (key in obj) {
303
302
  Object.defineProperty(obj, key, {
304
303
  value: value,
@@ -311,7 +310,7 @@ function _define_property$2(obj, key, value) {
311
310
  }
312
311
  return obj;
313
312
  }
314
- function _object_spread$2(target) {
313
+ function _object_spread$3(target) {
315
314
  for(var i = 1; i < arguments.length; i++){
316
315
  var source = arguments[i] != null ? arguments[i] : {};
317
316
  var ownKeys = Object.keys(source);
@@ -321,12 +320,12 @@ function _object_spread$2(target) {
321
320
  }));
322
321
  }
323
322
  ownKeys.forEach(function(key) {
324
- _define_property$2(target, key, source[key]);
323
+ _define_property$3(target, key, source[key]);
325
324
  });
326
325
  }
327
326
  return target;
328
327
  }
329
- function ownKeys$2(object, enumerableOnly) {
328
+ function ownKeys$3(object, enumerableOnly) {
330
329
  var keys = Object.keys(object);
331
330
  if (Object.getOwnPropertySymbols) {
332
331
  var symbols = Object.getOwnPropertySymbols(object);
@@ -334,12 +333,12 @@ function ownKeys$2(object, enumerableOnly) {
334
333
  }
335
334
  return keys;
336
335
  }
337
- function _object_spread_props$2(target, source) {
336
+ function _object_spread_props$3(target, source) {
338
337
  source = source != null ? source : {};
339
338
  if (Object.getOwnPropertyDescriptors) {
340
339
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
341
340
  } else {
342
- ownKeys$2(Object(source)).forEach(function(key) {
341
+ ownKeys$3(Object(source)).forEach(function(key) {
343
342
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
344
343
  });
345
344
  }
@@ -351,7 +350,7 @@ function Row(param) {
351
350
  ] : _param_padding, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FLEX_DIRECTION.ROW : _param_flexDirection, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
352
351
  var isColumn = flexDirection === FLEX_DIRECTION.COLUMN;
353
352
  return /*#__PURE__*/ React.createElement("div", {
354
- style: _object_spread_props$2(_object_spread$2({}, style), {
353
+ style: _object_spread_props$3(_object_spread$3({}, style), {
355
354
  border: border ? '2px solid #888' : ''
356
355
  }),
357
356
  onClick: onClick,
@@ -505,7 +504,7 @@ function _array_like_to_array$1(arr, len) {
505
504
  function _array_with_holes$1(arr) {
506
505
  if (Array.isArray(arr)) return arr;
507
506
  }
508
- function _define_property$1(obj, key, value) {
507
+ function _define_property$2(obj, key, value) {
509
508
  if (key in obj) {
510
509
  Object.defineProperty(obj, key, {
511
510
  value: value,
@@ -545,7 +544,7 @@ function _iterable_to_array_limit$1(arr, i) {
545
544
  function _non_iterable_rest$1() {
546
545
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
547
546
  }
548
- function _object_spread$1(target) {
547
+ function _object_spread$2(target) {
549
548
  for(var i = 1; i < arguments.length; i++){
550
549
  var source = arguments[i] != null ? arguments[i] : {};
551
550
  var ownKeys = Object.keys(source);
@@ -555,12 +554,12 @@ function _object_spread$1(target) {
555
554
  }));
556
555
  }
557
556
  ownKeys.forEach(function(key) {
558
- _define_property$1(target, key, source[key]);
557
+ _define_property$2(target, key, source[key]);
559
558
  });
560
559
  }
561
560
  return target;
562
561
  }
563
- function ownKeys$1(object, enumerableOnly) {
562
+ function ownKeys$2(object, enumerableOnly) {
564
563
  var keys = Object.keys(object);
565
564
  if (Object.getOwnPropertySymbols) {
566
565
  var symbols = Object.getOwnPropertySymbols(object);
@@ -568,12 +567,12 @@ function ownKeys$1(object, enumerableOnly) {
568
567
  }
569
568
  return keys;
570
569
  }
571
- function _object_spread_props$1(target, source) {
570
+ function _object_spread_props$2(target, source) {
572
571
  source = source != null ? source : {};
573
572
  if (Object.getOwnPropertyDescriptors) {
574
573
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
575
574
  } else {
576
- ownKeys$1(Object(source)).forEach(function(key) {
575
+ ownKeys$2(Object(source)).forEach(function(key) {
577
576
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
578
577
  });
579
578
  }
@@ -689,7 +688,7 @@ function Knob(param) {
689
688
  text: label
690
689
  }), knobType === "BIPOLAR" && /*#__PURE__*/ React__default.createElement("div", {
691
690
  className: "Knob-center-marker"
692
- }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
691
+ }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$2(_object_spread$2({
693
692
  className: classnames('Knob', className)
694
693
  }, bindDrag()), {
695
694
  style: {
@@ -714,7 +713,7 @@ function Knob(param) {
714
713
  Knob.LABEL_POSITION = POSITION;
715
714
  Knob.KNOB_TYPE = KNOB_TYPE;
716
715
 
717
- 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}";
716
+ var css_248z$3 = ".Slider {\n position: relative;\n}\n.Slider-inner {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.Slider-center-marker {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0 7px 10px 7px;\n border-color: transparent transparent #737373 transparent;\n transform: rotate(180deg);\n padding-bottom: 2px;\n}\n.Slider--bar {\n background-color: #737373;\n}\n.Slider--bar .Slider-marker {\n height: 100%;\n background-color: #979797;\n}\n.Slider--rotary {\n height: 50px;\n background-color: #737373;\n width: 50px;\n border-radius: 100%;\n position: relative;\n aspect-ratio: 1/1;\n}\n.Slider--rotary .Slider-inner {\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n.Slider--rotary .Slider-marker {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n width: 2px;\n height: 50%;\n border-radius: 125rem;\n background-color: #fff;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.Slider-polarity--bipolar.Slider-orientation--horizontal::after {\n content: \"\";\n width: 2px;\n height: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 49%;\n background: #fff;\n}\n\n.Slider-polarity--bipolar.Slider-orientation--vertical::after {\n content: \"\";\n height: 2px;\n width: 100%;\n position: absolute;\n bottom: 49%;\n left: 0;\n right: 0;\n background: #fff;\n}\n\n.Slider-orientation--horizontal {\n height: 20px;\n width: 100%;\n}\n\n.Slider-orientation--vertical {\n height: 100%;\n width: 20px;\n}";
718
717
  styleInject(css_248z$3);
719
718
 
720
719
  function _array_like_to_array(arr, len) {
@@ -725,6 +724,19 @@ function _array_like_to_array(arr, len) {
725
724
  function _array_with_holes(arr) {
726
725
  if (Array.isArray(arr)) return arr;
727
726
  }
727
+ function _define_property$1(obj, key, value) {
728
+ if (key in obj) {
729
+ Object.defineProperty(obj, key, {
730
+ value: value,
731
+ enumerable: true,
732
+ configurable: true,
733
+ writable: true
734
+ });
735
+ } else {
736
+ obj[key] = value;
737
+ }
738
+ return obj;
739
+ }
728
740
  function _iterable_to_array_limit(arr, i) {
729
741
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
730
742
  if (_i == null) return;
@@ -752,6 +764,40 @@ function _iterable_to_array_limit(arr, i) {
752
764
  function _non_iterable_rest() {
753
765
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
754
766
  }
767
+ function _object_spread$1(target) {
768
+ for(var i = 1; i < arguments.length; i++){
769
+ var source = arguments[i] != null ? arguments[i] : {};
770
+ var ownKeys = Object.keys(source);
771
+ if (typeof Object.getOwnPropertySymbols === "function") {
772
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
773
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
774
+ }));
775
+ }
776
+ ownKeys.forEach(function(key) {
777
+ _define_property$1(target, key, source[key]);
778
+ });
779
+ }
780
+ return target;
781
+ }
782
+ function ownKeys$1(object, enumerableOnly) {
783
+ var keys = Object.keys(object);
784
+ if (Object.getOwnPropertySymbols) {
785
+ var symbols = Object.getOwnPropertySymbols(object);
786
+ keys.push.apply(keys, symbols);
787
+ }
788
+ return keys;
789
+ }
790
+ function _object_spread_props$1(target, source) {
791
+ source = source != null ? source : {};
792
+ if (Object.getOwnPropertyDescriptors) {
793
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
794
+ } else {
795
+ ownKeys$1(Object(source)).forEach(function(key) {
796
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
797
+ });
798
+ }
799
+ return target;
800
+ }
755
801
  function _sliced_to_array(arr, i) {
756
802
  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
757
803
  }
@@ -763,41 +809,159 @@ function _unsupported_iterable_to_array(o, minLen) {
763
809
  if (n === "Map" || n === "Set") return Array.from(n);
764
810
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
765
811
  }
812
+ var SLIDER_POLARITY;
813
+ (function(SLIDER_POLARITY) {
814
+ SLIDER_POLARITY["LINEAR"] = "LINEAR";
815
+ SLIDER_POLARITY["BIPOLAR"] = "BIPOLAR";
816
+ })(SLIDER_POLARITY || (SLIDER_POLARITY = {}));
817
+ var SLIDER_TYPE;
818
+ (function(SLIDER_TYPE) {
819
+ SLIDER_TYPE["BAR"] = "BAR";
820
+ SLIDER_TYPE["ROTARY"] = "ROTARY";
821
+ })(SLIDER_TYPE || (SLIDER_TYPE = {}));
822
+ var SLIDER_ORIENTATION;
823
+ (function(SLIDER_ORIENTATION) {
824
+ SLIDER_ORIENTATION["HORIZONTAL"] = "HORIZONTAL";
825
+ SLIDER_ORIENTATION["VERTICAL"] = "VERTICAL";
826
+ })(SLIDER_ORIENTATION || (SLIDER_ORIENTATION = {}));
827
+ var getTransformString = function(param) {
828
+ var sliderType = param.sliderType, sliderOrientation = param.sliderOrientation, sliderPolarity = param.sliderPolarity, normalizedValue = param.normalizedValue, scaledValue = param.scaledValue;
829
+ if (sliderType === "BAR") {
830
+ if (sliderPolarity === "LINEAR") {
831
+ return sliderOrientation === "HORIZONTAL" ? {
832
+ transform: "scale(".concat(normalizedValue, ", 1)"),
833
+ transformOrigin: 'center left'
834
+ } : {
835
+ transform: "scale(1, ".concat(normalizedValue, ")"),
836
+ transformOrigin: 'bottom center'
837
+ };
838
+ } else {
839
+ return sliderOrientation === "HORIZONTAL" ? {
840
+ transform: "scale(".concat(Math.ceil(scaledValue * 100) / 100 / 2, ", 1)"),
841
+ transformOrigin: 'left center'
842
+ } : {
843
+ transform: "scale(1, ".concat(Math.ceil(scaledValue * 100) / 100 / 2, ")"),
844
+ transformOrigin: 'bottom center'
845
+ };
846
+ }
847
+ } else {
848
+ return {
849
+ transform: '0'
850
+ };
851
+ }
852
+ };
853
+ var getPosition = function(param) {
854
+ var sliderType = param.sliderType, sliderOrientation = param.sliderOrientation, sliderPolarity = param.sliderPolarity;
855
+ if (sliderType === "BAR") {
856
+ if (sliderPolarity === "LINEAR") {
857
+ return sliderOrientation === "HORIZONTAL" ? {
858
+ top: '0',
859
+ bottom: '0',
860
+ left: '0'
861
+ } : {
862
+ right: '0',
863
+ bottom: '0',
864
+ left: '0'
865
+ };
866
+ } else {
867
+ return sliderOrientation === "HORIZONTAL" ? {
868
+ top: '0',
869
+ bottom: '0',
870
+ left: '50%'
871
+ } : {
872
+ bottom: '50%',
873
+ left: '0',
874
+ right: '0'
875
+ };
876
+ }
877
+ } else {
878
+ return {};
879
+ }
880
+ };
766
881
  function Slider(param) {
767
- var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? DIRECTION.VERTICAL : _param_orientation, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, id = param.id, className = param.className;
768
- var _useState = _sliced_to_array(useState(0.0), 2), min = _useState[0], setMin = _useState[1];
769
- var _useState1 = _sliced_to_array(useState(1.0), 2), max = _useState1[0], setMax = _useState1[1];
770
- var _useState2 = _sliced_to_array(useState(0.01), 1), interval = _useState2[0];
771
- var _useState3 = _sliced_to_array(useState(0.0), 2), value = _useState3[0], setValue = _useState3[1];
772
- var _useState4 = _sliced_to_array(useState(false), 2), hasStoreData = _useState4[0], setHasStoreData = _useState4[1];
882
+ 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_sliderPolarity = param.sliderPolarity, sliderPolarity = _param_sliderPolarity === void 0 ? "LINEAR" : _param_sliderPolarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? "VERTICAL" : _param_sliderOrientation, _param_sliderType = param.sliderType, sliderType = _param_sliderType === void 0 ? "BAR" : _param_sliderType, className = param.className, id = param.id, _param_mockInitialScaledValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
883
+ mockInitialScaledValue, mockInitialScaledValue = _param_mockInitialScaledValue === void 0 ? 0 : _param_mockInitialScaledValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
884
+ start: 0,
885
+ end: 1,
886
+ interval: 0.01
887
+ } : _param_mockProperties;
888
+ var sliderState = Juce.getSliderState(id);
889
+ // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
890
+ var isLocalhost = window.location.hostname === 'localhost';
891
+ // getNormalisedValue:
892
+ /**
893
+ * Returns the normalised value of the corresponding backend parameter. This value is always in the
894
+ * [0, 1] range (inclusive).
895
+ *
896
+ * The meaning of this range is the same as in the case of
897
+ * AudioProcessorParameter::getValue() (C++).
898
+ */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
899
+ // NOTE: We can think of this as a percentage value, in 0 to 1 format
900
+ var _useState = _sliced_to_array(useState(0), 2), normalizedValue = _useState[0], setNormalizedValue = _useState[1];
901
+ var _useState1 = _sliced_to_array(useState(0), 2), scaledValue = _useState1[0], setScaledValue = _useState1[1];
902
+ var _useState2 = _sliced_to_array(useState(null), 2), properties = _useState2[0], setProperties = _useState2[1];
903
+ var handleChange = function(_, newValue) {
904
+ sliderState === null || sliderState === void 0 ? void 0 : sliderState.setNormalisedValue(newValue);
905
+ // If the front end app is running in a browser, set the new value here.
906
+ // Otherwise, the value will come from JUCE.
907
+ if (isLocalhost) {
908
+ var newValueClamped = clamp(newValue);
909
+ setNormalizedValue(newValueClamped);
910
+ setScaledValue(normalisedToScaledValue({
911
+ normalisedValue: newValueClamped,
912
+ start: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.start,
913
+ end: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.end
914
+ }));
915
+ }
916
+ };
773
917
  useEffect(function() {
774
- var sliderState = Juce.getSliderState(id);
775
- if (!!sliderState) {
776
- var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
777
- setMin(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start);
778
- setMax(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
779
- setInterval(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.interval);
780
- setValue(sliderState === null || sliderState === void 0 ? void 0 : sliderState.scaledValue);
781
- setHasStoreData(true);
918
+ {
919
+ if (isLocalhost) {
920
+ // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
921
+ setProperties(mockProperties);
922
+ setNormalizedValue(getNormalisedValue({
923
+ scaledValue: mockInitialScaledValue,
924
+ start: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.start,
925
+ end: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.end
926
+ }));
927
+ setScaledValue(mockInitialScaledValue);
928
+ sliderState.setNormalisedValue(mockInitialScaledValue);
929
+ return;
930
+ } else {
931
+ var valueListenerId = sliderState.valueChangedEvent.addListener(function() {
932
+ setNormalizedValue(sliderState.getNormalisedValue());
933
+ setScaledValue(sliderState.getScaledValue());
934
+ });
935
+ var propertiesListenerId = sliderState.propertiesChangedEvent.addListener(function() {
936
+ return setProperties(sliderState.properties);
937
+ });
938
+ setProperties(sliderState.properties);
939
+ setNormalizedValue(sliderState.getNormalisedValue());
940
+ setScaledValue(sliderState.getScaledValue());
941
+ return function cleanup() {
942
+ sliderState.valueChangedEvent.removeListener(valueListenerId);
943
+ sliderState.propertiesChangedEvent.removeListener(propertiesListenerId);
944
+ };
945
+ }
782
946
  }
783
947
  }, []);
784
- var handleChange = function(val) {
785
- setValue(val);
786
- if (hasStoreData) {
787
- var sliderState = Juce.getSliderState(id);
788
- sliderState.setNormalisedValue(val);
948
+ var bindDrag = useDrag(function(param) {
949
+ var down = param.down, delta = param.delta;
950
+ if (down) {
951
+ var deltaVal = sliderType === "ROTARY" || sliderType === "BAR" && sliderOrientation === "VERTICAL" ? delta[1] * -1 : delta[0];
952
+ var newValue = normalizedValue + deltaVal * ((properties === null || properties === void 0 ? void 0 : properties.interval) && (properties === null || properties === void 0 ? void 0 : properties.interval.toString().length) > 4 ? 4 : 0.4) * ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01);
953
+ var invertedNewValue = newValue;
954
+ handleChange(event, invertedNewValue );
789
955
  }
790
- };
956
+ }, {
957
+ preventDefault: true
958
+ });
791
959
  return /*#__PURE__*/ React__default.createElement("div", {
792
960
  style: {
793
961
  display: 'flex',
794
962
  flexDirection: 'column',
795
963
  alignItems: 'center',
796
- justifyContent: 'center',
797
- minWidth: orientation === DIRECTION.HORIZONTAL ? '100px' : 'auto',
798
- minHeight: orientation === DIRECTION.VERTICAL ? '100px' : 'auto',
799
- width: orientation === DIRECTION.HORIZONTAL ? '100%' : label ? '55px' : '12px',
800
- height: orientation === DIRECTION.VERTICAL ? '100%' : '55px'
964
+ justifyContent: 'center'
801
965
  }
802
966
  }, label && /*#__PURE__*/ React__default.createElement(TextLabel, {
803
967
  style: {
@@ -808,18 +972,33 @@ function Slider(param) {
808
972
  SPACING.NONE
809
973
  ],
810
974
  text: label
811
- }), (value || value === 0) && /*#__PURE__*/ React__default.createElement(ReactSlider, {
812
- min: min,
813
- max: max,
814
- value: value,
815
- disabled: !hasStoreData,
816
- invert: orientation === DIRECTION.VERTICAL,
817
- orientation: orientation,
818
- onChange: handleChange,
819
- step: interval,
820
- className: classnames('Slider', orientation === DIRECTION.HORIZONTAL ? 'horizontal' : 'vertical', className)
821
- }), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
822
- text: "".concat(decimalToPercent(value)),
975
+ }), sliderPolarity === "BIPOLAR" && sliderType === "ROTARY" && /*#__PURE__*/ React__default.createElement("div", {
976
+ className: "Slider-center-marker"
977
+ }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
978
+ className: classnames('Slider', sliderPolarity === "LINEAR" ? 'Slider-polarity--linear' : 'Slider-polarity--bipolar', sliderType === "BAR" ? 'Slider--bar' : 'Slider--rotary', sliderType === "BAR" ? sliderOrientation === "HORIZONTAL" ? 'Slider-orientation--horizontal' : 'Slider-orientation--vertical' : '', className)
979
+ }, bindDrag()), {
980
+ style: {
981
+ touchAction: 'none'
982
+ }
983
+ }), /*#__PURE__*/ React__default.createElement("div", {
984
+ className: "Slider-inner",
985
+ style: _object_spread$1({
986
+ rotate: sliderType === "ROTARY" ? "".concat(sliderPolarity === "LINEAR" ? normalizedValue : normalizedValue + 0.5, "turn") : "0"
987
+ }, getTransformString({
988
+ sliderType: sliderType,
989
+ sliderOrientation: sliderOrientation,
990
+ sliderPolarity: sliderPolarity,
991
+ normalizedValue: normalizedValue,
992
+ scaledValue: scaledValue
993
+ }), getPosition({
994
+ sliderType: sliderType,
995
+ sliderOrientation: sliderOrientation,
996
+ sliderPolarity: sliderPolarity
997
+ }))
998
+ }, /*#__PURE__*/ React__default.createElement("div", {
999
+ className: "Slider-marker"
1000
+ }))), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
1001
+ text: "".concat(decimalToPercent(scaledValue)),
823
1002
  padding: [
824
1003
  SPACING.SMALL,
825
1004
  SPACING.NONE
@@ -827,7 +1006,9 @@ function Slider(param) {
827
1006
  }));
828
1007
  }
829
1008
  Slider.LABEL_POSITION = POSITION;
830
- Slider.ORIENTATION = DIRECTION;
1009
+ Slider.SLIDER_TYPE = SLIDER_TYPE;
1010
+ Slider.SLIDER_POLARITY = SLIDER_POLARITY;
1011
+ Slider.SLIDER_ORIENTATION = SLIDER_ORIENTATION;
831
1012
 
832
1013
  var css_248z$2 = ".h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n}";
833
1014
  styleInject(css_248z$2);
package/dist/index.js.map CHANGED
@@ -1 +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]}
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]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antimatter-audio/antimatter-ui",
3
- "version": "2.4.3",
3
+ "version": "3.0.0",
4
4
  "description": "React UI component library for Antimatter Audio.",
5
5
  "repository": {
6
6
  "type": "git",