@antimatter-audio/antimatter-ui 2.2.1 → 2.3.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 (3) hide show
  1. package/dist/index.js +93 -44
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -476,6 +476,10 @@ var TextLabel = function(param) {
476
476
  }, text ? text : children);
477
477
  };
478
478
 
479
+ var decimalToPercent = function(decimal) {
480
+ return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
481
+ };
482
+
479
483
  function _array_like_to_array$1(arr, len) {
480
484
  if (len == null || len > arr.length) len = arr.length;
481
485
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -576,46 +580,97 @@ var KNOB_TYPE;
576
580
  })(KNOB_TYPE || (KNOB_TYPE = {}));
577
581
  function Knob(param) {
578
582
  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;
579
- var _useState = _sliced_to_array$1(useState(knobType === "STANDARD" ? 0 : -100), 2), min = _useState[0], setMin = _useState[1];
580
- var _useState1 = _sliced_to_array$1(useState(knobType === "STANDARD" ? 0 : 100), 2), max = _useState1[0], setMax = _useState1[1];
581
- // const [interval, setInterval] = useState<number>(1);
582
- var _useState2 = _sliced_to_array$1(useState(0), 2), value = _useState2[0], setValue = _useState2[1];
583
- // const [hasStoreData, setHasStoreData] = useState<boolean>(false);
583
+ var knobState = Juce.getSliderState(id);
584
+ var _useState = _sliced_to_array$1(useState(0), 2), normalizedValue = _useState[0], setNormalizedValue = _useState[1];
585
+ var _useState1 = _sliced_to_array$1(useState(0), 2), scaledValue = _useState1[0], setScaledValue = _useState1[1];
586
+ var _useState2 = _sliced_to_array$1(useState(null), 2), properties = _useState2[0], setProperties = _useState2[1];
587
+ // const [log, setLog] = useState('');
588
+ var handleChange = function(_, newValue) {
589
+ knobState.setNormalisedValue(newValue);
590
+ // setValue(newValue);
591
+ };
592
+ // const mouseDown = () => {
593
+ // knobState.sliderDragStarted();
594
+ // };
595
+ // const changeCommitted = (event: any, newValue: any) => {
596
+ // console.log(event);
597
+ // knobState.setNormalisedValue(newValue);
598
+ // knobState.sliderDragEnded();
599
+ // };
584
600
  useEffect(function() {
585
- var knobState = Juce.getSliderState(id);
586
- if (!!knobState) {
587
- var _knobState_properties, _knobState_properties1;
588
- 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);
589
- 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);
590
- // setInterval(knobState?.properties?.interval);
591
- setValue(parseInt(Number(knobState === null || knobState === void 0 ? void 0 : knobState.scaledValue).toFixed(1), 10));
592
- // setHasStoreData(true);
593
- }
601
+ var valueListenerId = knobState.valueChangedEvent.addListener(function() {
602
+ setNormalizedValue(knobState.getNormalisedValue());
603
+ setScaledValue(knobState.getScaledValue());
604
+ });
605
+ var propertiesListenerId = knobState.propertiesChangedEvent.addListener(function() {
606
+ return setProperties(knobState.properties);
607
+ });
608
+ console.log(knobState.getNormalisedValue(), knobState.getScaledValue(), 'VALUELISTENERID');
609
+ setNormalizedValue(knobState.getNormalisedValue());
610
+ setScaledValue(knobState.getScaledValue());
611
+ return function cleanup() {
612
+ knobState.valueChangedEvent.removeListener(valueListenerId);
613
+ knobState.propertiesChangedEvent.removeListener(propertiesListenerId);
614
+ };
594
615
  }, []);
595
- useEffect(function() {
596
- var knobState = Juce.getSliderState(id);
597
- knobState.setNormalisedValue(Math.round(value) / 100);
598
- }, [
599
- value
600
- ]);
616
+ // function calculateValue() {
617
+ // return sliderState.getScaledValue();
618
+ // }
619
+ // const [hasStoreData, setHasStoreData] = useState<boolean>(false);
620
+ // function snapToLegalValue(value: any) {
621
+ // if (interval == 0) return value;
622
+ // return clamp(
623
+ // min + interval * Math.floor((value - min) / interval + 0.5),
624
+ // min,
625
+ // max,
626
+ // );
627
+ // }
628
+ // useEffect(() => {
629
+ // const knobState = Juce.getSliderState(id);
630
+ // knobState.valueChangedEvent.addListener(() => {
631
+ // console.log('value changed listener');
632
+ // setValue(knobState.getNormalisedValue());
633
+ // setPr
634
+ // setMin(knobState?.properties?.start);
635
+ // setMax(knobState?.properties?.end);
636
+ // setInterval(knobState?.properties?.interval);
637
+ // // setValue(knobState?.scaledValue);
638
+ // });
639
+ // knobRef?.current?.addEventListener('mousedown', (event: any) => {
640
+ // console.log(event, 'mousedown listener');
641
+ // knobState.sliderDragStarted();
642
+ // });
643
+ // knobRef?.current?.addEventListener('mouseup', (event: any) => {
644
+ // console.log(knobState, event, 'mouseup listener');
645
+ // knobState.sliderDragEnded();
646
+ // });
647
+ // knobRef?.current?.addEventListener('mousemove', (event: any) => {
648
+ // console.log(knobState, 'mousemove listener');
649
+ // knobState.setNormalisedValue(value + interval);
650
+ // });
651
+ // }, []);
601
652
  var bindDrag = useDrag(function(param) {
602
653
  var down = param.down, delta = param.delta;
603
- setValue(function() {
604
- var newValue = value + delta[1] * -1;
605
- if (down) {
606
- if (newValue >= max) {
607
- return max;
608
- } else if (newValue <= min) {
609
- return min;
610
- } else {
611
- return newValue;
612
- }
613
- } else {
614
- return value;
615
- }
616
- });
654
+ if (down) {
655
+ // const knobState = Juce.getSliderState(id);
656
+ // console.log(interval, value, 'interval');
657
+ // setValue(() => {
658
+ // // console.log(value, delta, delta[1] * -1, 'value, delta[1]');
659
+ // const newValue = value + delta[1] * (properties?.interval || 0.01) * -1;
660
+ // return clamp(newValue);
661
+ // });
662
+ // console.log(value, 'VALUE');
663
+ var newValue = normalizedValue + delta[1] * ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01) * -1;
664
+ // knobState.setNormalisedValue(Math.round(normalizedValue * 100) / 100);
665
+ handleChange(event, newValue);
666
+ // console.log(
667
+ // knobState,
668
+ // value,
669
+ // snapToLegalValue(value),
670
+ // 'KNOBSTATE_______',
671
+ // );
672
+ }
617
673
  }, {
618
- delay: 1000,
619
674
  preventDefault: true
620
675
  });
621
676
  return /*#__PURE__*/ React__default.createElement("div", {
@@ -637,9 +692,7 @@ function Knob(param) {
637
692
  }), knobType === "BIPOLAR" && /*#__PURE__*/ React__default.createElement("div", {
638
693
  className: "Knob-center-marker"
639
694
  }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
640
- onPointerDown: function(e) {
641
- return e.currentTarget.focus();
642
- },
695
+ // onPointerDown={(e) => e.currentTarget.focus()}
643
696
  className: classnames('Knob', className)
644
697
  }, bindDrag()), {
645
698
  style: {
@@ -649,12 +702,12 @@ function Knob(param) {
649
702
  }), /*#__PURE__*/ React__default.createElement("div", {
650
703
  className: "Knob-inner",
651
704
  style: {
652
- rotate: knobType === "STANDARD" ? "".concat(360 * value / 100, "deg") : "".concat(270 * value / 200, "deg")
705
+ rotate: "".concat(knobType === "STANDARD" ? normalizedValue : normalizedValue + 0.5, "turn")
653
706
  }
654
707
  }, /*#__PURE__*/ React__default.createElement("div", {
655
708
  className: "Knob-marker"
656
709
  }))), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
657
- text: "".concat(value),
710
+ text: "".concat(decimalToPercent(scaledValue)),
658
711
  padding: [
659
712
  SPACING.SMALL,
660
713
  SPACING.NONE
@@ -667,10 +720,6 @@ Knob.KNOB_TYPE = KNOB_TYPE;
667
720
  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}";
668
721
  styleInject(css_248z$3);
669
722
 
670
- var decimalToPercent = function(decimal) {
671
- return Math.ceil(decimal * 100);
672
- };
673
-
674
723
  function _array_like_to_array(arr, len) {
675
724
  if (len == null || len > arr.length) len = arr.length;
676
725
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
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.2.1",
3
+ "version": "2.3.0",
4
4
  "description": "React UI component library for Antimatter Audio.",
5
5
  "repository": {
6
6
  "type": "git",