zds-pickers 3.9.6 → 3.9.8

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _typeof = require("@babel/runtime/helpers/typeof");Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "CCPicker", { enumerable: true, get: function get() {return _CCPicker["default"];} });Object.defineProperty(exports, "ChannelMappingPicker", { enumerable: true, get: function get() {return _ChannelMappingPicker["default"];} });Object.defineProperty(exports, "ChannelPicker", { enumerable: true, get: function get() {return _ChannelPicker["default"];} });Object.defineProperty(exports, "Knob", { enumerable: true, get: function get() {return _Knob["default"];} });Object.defineProperty(exports, "KnobPicker", { enumerable: true, get: function get() {return _KnobPicker["default"];} });Object.defineProperty(exports, "LatchPicker", { enumerable: true, get: function get() {return _LatchPicker["default"];} });Object.defineProperty(exports, "MASK_CHANNEL", { enumerable: true, get: function get() {return _statuses.MASK_CHANNEL;} });Object.defineProperty(exports, "MASK_STATUS", { enumerable: true, get: function get() {return _statuses.MASK_STATUS;} });Object.defineProperty(exports, "MappingPicker", { enumerable: true, get: function get() {return _MappingPicker["default"];} });Object.defineProperty(exports, "NotePicker", { enumerable: true, get: function get() {return _NotePicker["default"];} });Object.defineProperty(exports, "PolarityPicker", { enumerable: true, get: function get() {return _PolarityPicker["default"];} });Object.defineProperty(exports, "RESPONSE_CURVES", { enumerable: true, get: function get() {return _ResponseCurve.RESPONSE_CURVES;} });Object.defineProperty(exports, "ResponseCurve", { enumerable: true, get: function get() {return _ResponseCurve["default"];} });Object.defineProperty(exports, "ResponseCurvePicker", { enumerable: true, get: function get() {return _ResponseCurvePicker["default"];} });Object.defineProperty(exports, "STATUS_AFTER_TOUCH", { enumerable: true, get: function get() {return _statuses.STATUS_AFTER_TOUCH;} });Object.defineProperty(exports, "STATUS_CHANNEL_PRESSURE", { enumerable: true, get: function get() {return _statuses.STATUS_CHANNEL_PRESSURE;} });Object.defineProperty(exports, "STATUS_CONTROL_CHANGE", { enumerable: true, get: function get() {return _statuses.STATUS_CONTROL_CHANGE;} });Object.defineProperty(exports, "STATUS_NOTE_OFF", { enumerable: true, get: function get() {return _statuses.STATUS_NOTE_OFF;} });Object.defineProperty(exports, "STATUS_NOTE_ON", { enumerable: true, get: function get() {return _statuses.STATUS_NOTE_ON;} });Object.defineProperty(exports, "STATUS_PITCH_WHEEL", { enumerable: true, get: function get() {return _statuses.STATUS_PITCH_WHEEL;} });Object.defineProperty(exports, "STATUS_PROGRAM_CHANGE", { enumerable: true, get: function get() {return _statuses.STATUS_PROGRAM_CHANGE;} });Object.defineProperty(exports, "SVGText", { enumerable: true, get: function get() {return _SVGText["default"];} });Object.defineProperty(exports, "Select", { enumerable: true, get: function get() {return _Select["default"];} });Object.defineProperty(exports, "StatusPicker", { enumerable: true, get: function get() {return _StatusPicker["default"];} });Object.defineProperty(exports, "ValuePicker", { enumerable: true, get: function get() {return _ValuePicker["default"];} });Object.defineProperty(exports, "assertRange", { enumerable: true, get: function get() {return _utils.assertRange;} });Object.defineProperty(exports, "ccValues", { enumerable: true, get: function get() {return _ccValues["default"];} });Object.defineProperty(exports, "combineStatus", { enumerable: true, get: function get() {return _statuses.combineStatus;} });Object.defineProperty(exports, "extractStatus", { enumerable: true, get: function get() {return _statuses.extractStatus;} });Object.defineProperty(exports, "getStatusLabel", { enumerable: true, get: function get() {return _statuses.getStatusLabel;} });Object.defineProperty(exports, "memoize", { enumerable: true, get: function get() {return _utils.memoize;} });Object.defineProperty(exports, "statuses", { enumerable: true, get: function get() {return _statuses["default"];} });
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _typeof = require("@babel/runtime/helpers/typeof");Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "CCPicker", { enumerable: true, get: function get() {return _CCPicker["default"];} });Object.defineProperty(exports, "ChannelMappingPicker", { enumerable: true, get: function get() {return _ChannelMappingPicker["default"];} });Object.defineProperty(exports, "ChannelPicker", { enumerable: true, get: function get() {return _ChannelPicker["default"];} });Object.defineProperty(exports, "Knob", { enumerable: true, get: function get() {return _Knob["default"];} });Object.defineProperty(exports, "KnobPicker", { enumerable: true, get: function get() {return _KnobPicker["default"];} });Object.defineProperty(exports, "LatchPicker", { enumerable: true, get: function get() {return _LatchPicker["default"];} });Object.defineProperty(exports, "MASK_CHANNEL", { enumerable: true, get: function get() {return _statuses.MASK_CHANNEL;} });Object.defineProperty(exports, "MASK_STATUS", { enumerable: true, get: function get() {return _statuses.MASK_STATUS;} });Object.defineProperty(exports, "MappingPicker", { enumerable: true, get: function get() {return _MappingPicker["default"];} });Object.defineProperty(exports, "NotePicker", { enumerable: true, get: function get() {return _NotePicker["default"];} });Object.defineProperty(exports, "PianoPicker", { enumerable: true, get: function get() {return _PianoPicker["default"];} });Object.defineProperty(exports, "PolarityPicker", { enumerable: true, get: function get() {return _PolarityPicker["default"];} });Object.defineProperty(exports, "RESPONSE_CURVES", { enumerable: true, get: function get() {return _ResponseCurve.RESPONSE_CURVES;} });Object.defineProperty(exports, "ResponseCurve", { enumerable: true, get: function get() {return _ResponseCurve["default"];} });Object.defineProperty(exports, "ResponseCurvePicker", { enumerable: true, get: function get() {return _ResponseCurvePicker["default"];} });Object.defineProperty(exports, "STATUS_AFTER_TOUCH", { enumerable: true, get: function get() {return _statuses.STATUS_AFTER_TOUCH;} });Object.defineProperty(exports, "STATUS_CHANNEL_PRESSURE", { enumerable: true, get: function get() {return _statuses.STATUS_CHANNEL_PRESSURE;} });Object.defineProperty(exports, "STATUS_CONTROL_CHANGE", { enumerable: true, get: function get() {return _statuses.STATUS_CONTROL_CHANGE;} });Object.defineProperty(exports, "STATUS_NOTE_OFF", { enumerable: true, get: function get() {return _statuses.STATUS_NOTE_OFF;} });Object.defineProperty(exports, "STATUS_NOTE_ON", { enumerable: true, get: function get() {return _statuses.STATUS_NOTE_ON;} });Object.defineProperty(exports, "STATUS_PITCH_WHEEL", { enumerable: true, get: function get() {return _statuses.STATUS_PITCH_WHEEL;} });Object.defineProperty(exports, "STATUS_PROGRAM_CHANGE", { enumerable: true, get: function get() {return _statuses.STATUS_PROGRAM_CHANGE;} });Object.defineProperty(exports, "SVGText", { enumerable: true, get: function get() {return _SVGText["default"];} });Object.defineProperty(exports, "Select", { enumerable: true, get: function get() {return _Select["default"];} });Object.defineProperty(exports, "StatusPicker", { enumerable: true, get: function get() {return _StatusPicker["default"];} });Object.defineProperty(exports, "ValuePicker", { enumerable: true, get: function get() {return _ValuePicker["default"];} });Object.defineProperty(exports, "assertRange", { enumerable: true, get: function get() {return _utils.assertRange;} });Object.defineProperty(exports, "ccValues", { enumerable: true, get: function get() {return _ccValues["default"];} });Object.defineProperty(exports, "combineStatus", { enumerable: true, get: function get() {return _statuses.combineStatus;} });Object.defineProperty(exports, "extractStatus", { enumerable: true, get: function get() {return _statuses.extractStatus;} });Object.defineProperty(exports, "getStatusLabel", { enumerable: true, get: function get() {return _statuses.getStatusLabel;} });Object.defineProperty(exports, "memoize", { enumerable: true, get: function get() {return _utils.memoize;} });Object.defineProperty(exports, "statuses", { enumerable: true, get: function get() {return _statuses["default"];} });
 var _CCPicker = _interopRequireDefault(require("./pickers/CCPicker"));
 var _ChannelMappingPicker = _interopRequireDefault(require("./pickers/ChannelMappingPicker"));
 var _ChannelPicker = _interopRequireDefault(require("./pickers/ChannelPicker"));
@@ -7,6 +7,7 @@ var _KnobPicker = _interopRequireDefault(require("./pickers/KnobPicker"));
 var _LatchPicker = _interopRequireDefault(require("./pickers/LatchPicker"));
 var _MappingPicker = _interopRequireDefault(require("./pickers/MappingPicker"));
 var _NotePicker = _interopRequireDefault(require("./pickers/NotePicker"));
+var _PianoPicker = _interopRequireDefault(require("./pickers/PianoPicker"));
 var _PolarityPicker = _interopRequireDefault(require("./pickers/PolarityPicker"));
 var _ResponseCurvePicker = _interopRequireDefault(require("./pickers/ResponseCurvePicker"));
 var _Select = _interopRequireDefault(require("./pickers/Select"));

package/dist/other/SoundFontProvider.js

@@ -0,0 +1,122 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports, "__esModule", { value: true });exports["default"] = void 0;var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _soundfontPlayer = _interopRequireDefault(require("soundfont-player"));
+var _utils = require("./utils");function ownKeys(object, enumerableOnly) {var keys = Object.keys(object);if (Object.getOwnPropertySymbols) {var symbols = Object.getOwnPropertySymbols(object);enumerableOnly && (symbols = symbols.filter(function (sym) {return Object.getOwnPropertyDescriptor(object, sym).enumerable;})), keys.push.apply(keys, symbols);}return keys;}function _objectSpread(target) {for (var i = 1; i < arguments.length; i++) {var source = null != arguments[i] ? arguments[i] : {};i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {(0, _defineProperty2["default"])(target, key, source[key]);}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));});}return target;}
+// import '../temp/acoustic_grand_piano-mp3'
+
+var SoundfontProvider = function SoundfontProvider(props) {
+  var
+    audioContext =
+
+
+
+
+
+
+    props.audioContext,format = props.format,hostname = props.hostname,instrumentName = props.instrumentName,onChange = props.onChange,render = props.render,soundfont = props.soundfont;
+
+  var _useState = (0, _react.useState)(true),_useState2 = (0, _slicedToArray2["default"])(_useState, 2),isLoading = _useState2[0],setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),activeAudioNodes = _useState4[0],setActiveAudioNodes = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),instrument = _useState6[0],setInstrument = _useState6[1];
+
+  var loadInstrument = (0, _react.useCallback)(function (nm) {
+    // Re-trigger loading state
+    setInstrument(null);
+
+    if ((0, _utils.isDefined)(hostname)) {
+      // pull from an url
+      _soundfontPlayer["default"].instrument(audioContext, nm, {
+        format: format,
+        soundfont: soundfont,
+        nameToUrl: function nameToUrl(name, sf, fmt) {return "".concat(hostname, "/").concat(sf, "/").concat(name, "-").concat(fmt, ".js");}
+      }).then(function (newInstrument) {
+        setInstrument(newInstrument);
+      });
+    } else if ((0, _utils.isDefined)(instrumentName)) {
+      // the host app has already injected the soundfont into global space
+      _soundfontPlayer["default"].
+      instrument(audioContext, instrumentName).
+      then(function (newInstrument) {
+        setInstrument(newInstrument);
+      });
+    } else {
+      // sound must be disabled
+      setIsLoading(false);
+    }
+  }, [audioContext, format, hostname, instrumentName, soundfont]);
+
+  (0, _react.useEffect)(function () {
+    loadInstrument(instrumentName);
+  }, [instrumentName, loadInstrument]);
+
+  (0, _react.useEffect)(function () {
+    if ((0, _utils.isDefined)(instrumentName)) {
+      setIsLoading(!instrument);
+    }
+  }, [instrument, instrumentName]);
+
+  var playNote = function playNote(midiNumber) {
+    audioContext.resume().then(function () {
+      var audioNode = instrument.play(midiNumber);
+      setActiveAudioNodes(function (prev) {return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, midiNumber, audioNode));});
+    });
+  };
+
+  var stopNote = function stopNote(midiNumber) {
+    audioContext.resume().then(function () {
+      if (!activeAudioNodes[midiNumber]) {
+        return;
+      }
+      var audioNode = activeAudioNodes[midiNumber];
+      audioNode.stop();
+      setActiveAudioNodes(function (prev) {return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, midiNumber, null));});
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(midiNumber);
+  };
+
+  // Clear any residual notes that don't get called with stopNote
+  var stopAllNotes = function stopAllNotes() {
+    audioContext.resume().then(function () {
+      var nodes = Object.values(activeAudioNodes);
+      nodes.forEach(function (node) {
+        if (node) {
+          node.stop();
+        }
+      });
+      setActiveAudioNodes(nodes);
+    });
+  };
+
+  return render({
+    isLoading: isLoading,
+    playNote: playNote,
+    stopNote: stopNote,
+    stopAllNotes: stopAllNotes
+  });
+};
+
+SoundfontProvider.propTypes = {
+  audioContext: _propTypes["default"].instanceOf(window.AudioContext),
+  format: _propTypes["default"].oneOf(['mp3', 'ogg']),
+  hostname: _propTypes["default"].string,
+  instrumentName: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  render: _propTypes["default"].func.isRequired,
+  soundfont: _propTypes["default"].oneOf(['MusyngKite', 'FluidR3_GM'])
+};
+
+SoundfontProvider.defaultProps = {
+  format: undefined, // mp3,
+  hostname: undefined, // https://d1pzp51pvbm36p.cloudfront.net
+  instrumentName: undefined, // acoustic_grand_piano
+  onChange: undefined,
+  soundfont: undefined // MusyngKite,
+  // soundfont: 'FluidR3_GM',
+};
+
+// https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_grand_piano-mp3.js
+// https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/.js
+var _default =
+SoundfontProvider;exports["default"] = _default;

package/dist/other/utils.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports, "__esModule", { value: true });exports.calculateWordsByLines = exports.calculateWordWidths = exports.MEASUREMENT_ELEMENT_ID = void 0;var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));function ownKeys(object, enumerableOnly) {var keys = Object.keys(object);if (Object.getOwnPropertySymbols) {var symbols = Object.getOwnPropertySymbols(object);enumerableOnly && (symbols = symbols.filter(function (sym) {return Object.getOwnPropertyDescriptor(object, sym).enumerable;})), keys.push.apply(keys, symbols);}return keys;}function _objectSpread(target) {for (var i = 1; i < arguments.length; i++) {var source = null != arguments[i] ? arguments[i] : {};i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {(0, _defineProperty2["default"])(target, key, source[key]);}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));});}return target;} /* eslint-disable no-param-reassign */
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports, "__esModule", { value: true });exports.isDefined = exports.calculateWordsByLines = exports.calculateWordWidths = exports.MEASUREMENT_ELEMENT_ID = void 0;var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));function ownKeys(object, enumerableOnly) {var keys = Object.keys(object);if (Object.getOwnPropertySymbols) {var symbols = Object.getOwnPropertySymbols(object);enumerableOnly && (symbols = symbols.filter(function (sym) {return Object.getOwnPropertyDescriptor(object, sym).enumerable;})), keys.push.apply(keys, symbols);}return keys;}function _objectSpread(target) {for (var i = 1; i < arguments.length; i++) {var source = null != arguments[i] ? arguments[i] : {};i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {(0, _defineProperty2["default"])(target, key, source[key]);}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));});}return target;} /* eslint-disable no-param-reassign */
 var MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id';exports.MEASUREMENT_ELEMENT_ID = MEASUREMENT_ELEMENT_ID;
 
 var calculateWordsByLines = function calculateWordsByLines(words, wordWidths, maxWidth, maxHeight) {
@@ -45,4 +45,8 @@ var calculateWordWidths = function calculateWordWidths(style, textNode, words) {
     return { wordsWithComputedWidth: wordsWithComputedWidth, spaceWidth: spaceWidth, lineHeight: lineHeight };
   }
   return null;
-};exports.calculateWordWidths = calculateWordWidths;
+};exports.calculateWordWidths = calculateWordWidths;
+
+
+
+var isDefined = function isDefined(item) {return item !== undefined && item !== null && item !== Math.NaN;};exports.isDefined = isDefined;

package/dist/pickers/PianoPicker.js

@@ -0,0 +1,85 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports, "__esModule", { value: true });exports["default"] = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactPiano = require("react-piano");
+var _SoundFontProvider = _interopRequireDefault(require("../other/SoundFontProvider"));var _excluded = ["height", "width"];
+
+var firstNote = 21;
+var lastNote = 108;
+var numNotes = lastNote - firstNote - 1;
+
+var whiteNotes = numNotes * 0.7; // approx
+
+var audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+var PianoPicker = function PianoPicker(_ref) {var height = _ref.height,width = _ref.width,rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var keyWidth = width / whiteNotes + 2;
+  var keyWidthToHeight = keyWidth / height;
+
+  return /*#__PURE__*/(
+    _react["default"].createElement("div", null, /*#__PURE__*/
+    _react["default"].createElement(_reactPiano.Piano, (0, _extends2["default"])({
+      keyWidthToHeight: keyWidthToHeight,
+      noteRange: { first: firstNote, last: lastNote },
+      width: width },
+    rest))));
+
+
+
+};
+
+var WithProvider = function WithProvider(_ref2) {var
+    format = _ref2.format,
+    height = _ref2.height,
+    hostname = _ref2.hostname,
+    instrumentName = _ref2.instrumentName,
+    onChange = _ref2.onChange,
+    soundfont = _ref2.soundfont,
+    width = _ref2.width;return /*#__PURE__*/(
+
+    _react["default"].createElement(_SoundFontProvider["default"], {
+
+      audioContext: audioContext,
+      format: format,
+      hostname: hostname,
+      instrumentName: instrumentName,
+      onChange: onChange,
+      soundfont: soundfont,
+
+      render: function render(_ref3) {var isLoading = _ref3.isLoading,playNote = _ref3.playNote,stopNote = _ref3.stopNote;return /*#__PURE__*/(
+          _react["default"].createElement(PianoPicker, {
+            disabled: isLoading,
+            playNote: playNote,
+            stopNote: stopNote,
+
+            height: height,
+            width: width }));} }));};
+
+
+
+
+
+
+WithProvider.propTypes = {
+  format: _propTypes["default"].oneOf(['mp3', 'ogg']),
+  height: _propTypes["default"].number.isRequired,
+  hostname: _propTypes["default"].string,
+  instrumentName: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  soundfont: _propTypes["default"].oneOf(['MusyngKite', 'FluidR3_GM']),
+  width: _propTypes["default"].number.isRequired
+};
+
+WithProvider.defaultProps = {
+  format: undefined, // 'mp3',
+  hostname: undefined,
+  instrumentName: undefined,
+  onChange: undefined,
+  soundfont: undefined // 'MusyngKite',
+};
+
+PianoPicker.propTypes = {
+  height: _propTypes["default"].number.isRequired,
+  width: _propTypes["default"].number.isRequired
+};var _default =
+
+WithProvider;exports["default"] = _default;