zds-pickers 4.0.7 → 4.0.9

package/lib/pickers/knobSkin10.js

@@ -0,0 +1,93 @@
+const knobSkin10 = {
+    knobX: 71.44,
+    knobY: 71.44,
+    svg: `
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="207px" height="207px" viewBox="0 0 207 207" version="1.1">
+  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs>
+      <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="27c61b0f-392f-962d-de12-cb9da898274b">
+          <stop stop-color="#444040" stop-opacity="0.51098279" offset="0%"/>
+          <stop stop-color="#131111" stop-opacity="0.893200861" offset="100%"/>
+      </linearGradient>
+      <circle id="e966567b-3869-4bcd-76b6-2cf084e45390" cx="100.497487" cy="100.497487" r="99.4974874"/>
+      <filter x="-3.3%" y="-3.3%" width="106.5%" height="106.5%" filterUnits="objectBoundingBox" id="e2e6829f-0086-96b2-e92a-6f3809b8ac61">
+          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="0facd5c9-8e04-e83f-4842-8ba16f949942">
+          <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"/>
+          <stop stop-color="#000000" stop-opacity="0.5" offset="100%"/>
+      </linearGradient>
+      <circle id="c54189ed-7ea3-956c-f040-f0207548b268" cx="100.432161" cy="100.432161" r="86.4321608"/>
+      <filter x="-4.0%" y="-3.5%" width="108.1%" height="108.1%" filterUnits="objectBoundingBox" id="dedf2e7e-f008-c315-f682-e424d670f210">
+          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+          <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+
+      <filter x="-5.3%" y="-11.3%" width="110.7%" height="122.6%" filterUnits="objectBoundingBox" id="12f618f7-e258-b597-3ed6-242484ddad8f">
+          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+          <feColorMatrix values="0 0 0 0 0.915577168   0 0 0 0 0.797591325   0 0 0 0 0.601479722  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"/>
+      </filter>
+      <pattern id="3cc0e5b8-1f0a-886b-f635-8fcb19212870" width="8.04411765" height="8.04411765" x="21.9558824" y="21.9558824" patternUnits="userSpaceOnUse">
+          <use xlink:href="#2b8719c1-286b-ebf8-a488-ac66a6598fc5" transform="scale(0.167585784,0.167585784)"/>
+      </pattern>
+      <image id="2b8719c1-286b-ebf8-a488-ac66a6598fc5" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC"/>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="s10" transform="translate(3.000000, 3.000000)">
+          <g id="container">
+              <g id="Oval-2">
+                  <use fill="black" fill-opacity="1" filter="url(#e2e6829f-0086-96b2-e92a-6f3809b8ac61)" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
+                  <use stroke="#979797" stroke-width="1" fill="url(#27c61b0f-392f-962d-de12-cb9da898274b)" fill-rule="evenodd" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
+              </g>
+              <g id="Oval-2">
+                  <use fill="black" fill-opacity="1" filter="url(#dedf2e7e-f008-c315-f682-e424d670f210)" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+                  <use fill="" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+                  <use stroke="#4A4A4A" stroke-width="1" fill="url(#0facd5c9-8e04-e83f-4842-8ba16f949942)" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
+              </g>
+              <g id="knob" transform="translate(28.574244, 28.574244)">
+                  <circle id="Oval-5" fill="#322E2E" cx="71.4356094" cy="71.4356094" r="71.4356094"/>
+                  <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
+              </g>
+              <g id="label">
+                  <g id="labeltext" fill-opacity="1" fill="#E6D7D7">
+                      <text id="534f4e02-5541-3607-0966-af0b025d80e0" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7" filter="url(#12f618f7-e258-b597-3ed6-242484ddad8f)">
+          <tspan x="45.3246625" y="117.884225">10.10</tspan>
+      </text>
+                      <text id="92ebe866-c281-70c7-7b0e-a373cee013a9" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7">
+          <tspan x="45.3246625" y="117.884225">10.10</tspan>
+      </text>
+                  </g>
+                  <circle id="Oval-6" stroke="#979797" fill-opacity="0.730000019" fill="url(#3cc0e5b8-1f0a-886b-f635-8fcb19212870)" transform="translate(100.351759, 100.351759) rotate(-45.000000) translate(-100.351759, -100.351759) " cx="100.351759" cy="100.351759" r="70.3517588"/>
+              </g>
+          </g>
+      </g>
+  </g>
+</svg>
+`,
+    updateAttributes: [
+        {
+            element: '#labeltext text tspan',
+            content: (_props, value) => value.toFixed(0),
+            attrs: [
+                {
+                    name: 'text-anchor',
+                    value: ( /* props, value */) => 'middle',
+                },
+                {
+                    name: 'x',
+                    value: ( /* props, value */) => '100',
+                },
+            ],
+        },
+    ],
+};
+export default knobSkin10;

package/lib/rotaryKnob/InternalInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+class InternalInput extends React.Component {
+    render() {
+        const props = this.props;
+        const hideStyle = {};
+        function onValChange(event) {
+            props.onChange(Number(event.target.value));
+        }
+        const { value, min, max, step, onChange, inputRef, ...rest } = props;
+        return (_jsx("input", { ref: inputRef, value: value, step: step, onChange: onValChange, style: hideStyle, type: "range", min: min, max: max, ...rest }));
+    }
+}
+Object.defineProperty(InternalInput, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        step: 1,
+    }
+});
+export default InternalInput;

package/lib/rotaryKnob/Types.js

@@ -0,0 +1 @@
+export {};

package/lib/rotaryKnob/helpers/DrawCircle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+class DrawCircle extends React.Component {
+    render() {
+        const { r, borderColor = 'black', fillColor = 'transparent', borderWidth = 2, fillOpacity = 1, ...rest } = this.props;
+        return (_jsx("circle", { stroke: borderColor, fill: fillColor, fillOpacity: fillOpacity, r: r, ...rest }));
+    }
+}
+export default DrawCircle;

package/lib/rotaryKnob/helpers/DrawLine.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+class DrawLine extends React.Component {
+    render() {
+        const { width = 2, color = 'black', p1, p2, ...rest } = this.props;
+        return (_jsx("line", { ...rest, stroke: color, strokeWidth: width, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y }));
+    }
+}
+export default DrawLine;

package/lib/rotaryKnob/helpers/HelpersOverlay.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+/**
+ * Draws the overlay and the children
+ */
+class HelpersOverlay extends React.Component {
+    render() {
+        const { children, ...rest } = this.props;
+        const styles = {
+            overlay: Object.assign({
+                width: '100%',
+                height: '100vh',
+                top: 0,
+                left: 0,
+                zIndex: 2147483647,
+                margin: '0',
+                padding: '0',
+                boxSizing: 'border-box',
+                position: 'fixed',
+            }, this.props.overlayStyle),
+        };
+        return ReactDOM.createPortal(_jsx("div", { style: styles.overlay, ...rest, children: children }), document.body);
+    }
+}
+export default HelpersOverlay;

package/lib/rotaryKnob/helpers/KnobVisualHelpers.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import utils from '../utils';
+import DrawCircle from './DrawCircle';
+import DrawLine from './DrawLine';
+import HelpersOverlay from './HelpersOverlay';
+class KnobVisualHelpers extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                centerX: 0,
+                centerY: 0,
+                valueMarkerX: 0,
+                valueMarkerY: 0,
+            }
+        });
+    }
+    static getDerivedStateFromProps(props, state) {
+        //Calculate position
+        if (!props.svgRef)
+            return state;
+        const vbox = props.svgRef.getBoundingClientRect();
+        const halfWidth = vbox.width / 2;
+        //Calculate current angle segment end point
+        //Note: Not sure why we need to subtract 90 here
+        const valueMarkerX = props.radius * Math.cos(utils.toRadians(props.valueAngle - 90));
+        const valueMarkerY = props.radius * Math.sin(utils.toRadians(props.valueAngle - 90));
+        return {
+            ...state,
+            centerX: vbox.left + halfWidth,
+            centerY: vbox.top + halfWidth,
+            valueMarkerX,
+            valueMarkerY,
+        };
+    }
+    render() {
+        const markCircleColor = this.props.minimumDragDistance <= this.props.radius ? 'green' : 'grey';
+        const fillColor = this.props.minimumDragDistance <= this.props.radius
+            ? '#88E22D'
+            : '#D8D8D8';
+        const minDistanceCueVisible = this.props.minimumDragDistance >= this.props.radius;
+        return (_jsx(HelpersOverlay, { children: _jsxs("svg", { style: { position: 'absolute', top: '0', left: '0' }, width: "100%", height: "100%", children: [_jsx("defs", { children: _jsx("marker", { id: "Triangle", viewBox: "0 0 10 10", refX: "1", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z" }) }) }), _jsx(DrawCircle, { borderColor: markCircleColor, fillColor: fillColor, fillOpacity: 0.02, r: this.props.radius, cx: this.state.centerX, cy: this.state.centerY }), minDistanceCueVisible && (_jsx(DrawCircle, { borderColor: markCircleColor, fillColor: fillColor, fillOpacity: 0, r: this.props.minimumDragDistance, cx: this.state.centerX, cy: this.state.centerY })), _jsx(DrawLine, { p1: { x: this.state.centerX, y: this.state.centerY }, p2: {
+                            x: this.state.valueMarkerX + this.state.centerX,
+                            y: this.state.valueMarkerY + this.state.centerY,
+                        }, markerEnd: "url(#Triangle)" })] }) }));
+    }
+}
+export { KnobVisualHelpers };

package/lib/rotaryKnob/index.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Show the rotation circle and marker
+ * dispatches drag events
+ */
+import { drag } from 'd3-drag';
+import { scaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import { useEffect, useRef, useState } from 'react';
+import { SvgLoader, SvgProxy } from 'react-svgmt';
+import InternalInput from './InternalInput';
+import { KnobVisualHelpers } from './helpers/KnobVisualHelpers';
+import defaultSkin from './knobdefaultskin';
+import utils from './utils';
+// function printDebugValues(obj) {
+//   console.log('------------')
+//   Object.keys(obj).forEach(key => {
+//     const value =
+//       typeof obj[key] === 'object' ? JSON.stringify(obj[key]) : obj[key]
+//     console.log(`${key}: ${value}`)
+//   })
+//   console.log('------------')
+// }
+/**
+ * Generic knob component
+ */
+const RotaryKnob = (props) => {
+    const { clampMax = 360, clampMin = 0, defaultValue = 0, disabled = false, format = (val) => val.toFixed(0), max = 100, min = 0, onChange = () => { }, onEnd = () => { }, onStart = () => { }, preciseMode = true, rotateDegrees = 0, skin = defaultSkin, step = 1, style, unlockDistance = 100, value, ...rest } = props;
+    const [isControlled, setIsControlled] = useState(value !== undefined);
+    const container = useRef(null);
+    const inputRef = useRef(null);
+    let scale;
+    let scaleProps;
+    const [state, setState] = useState({
+        svgRef: undefined,
+        dragging: false,
+        dragDistance: 0,
+        mousePos: { x: 0, y: 0 },
+        valueAngle: 0,
+        uncontrolledValue: 0,
+    });
+    // returns angles between 0 and 360 for values lower 0 or greater 360
+    const normalizeAngle = (angle) => {
+        if (angle < 0) {
+            //E.g -1 turns 359
+            return angle + 360;
+        }
+        if (angle > 360) {
+            return angle - 360;
+        }
+        return angle;
+    };
+    // converts a value to an angle for the knob respecting the additional rotateDegrees prop
+    const convertValueToAngle = (value) => {
+        const angle = (getScale()(value) + rotateDegrees) % 360;
+        return normalizeAngle(angle);
+    };
+    // converts an angle to a value for the knob respecting the additional rotateDegrees prop
+    const convertAngleToValue = (angle) => {
+        const angle2 = angle - rotateDegrees;
+        return getScale().invert(normalizeAngle(angle2));
+    };
+    const getScale = () => {
+        // Memoize scale so it's not recalculated every time
+        if (!scaleProps ||
+            scaleProps.min !== min ||
+            scaleProps.max !== max ||
+            scaleProps.clampMin !== clampMin ||
+            scaleProps.clampMax !== clampMax) {
+            if (rotateDegrees < 270 && rotateDegrees > 90) {
+                scale = scaleLinear().domain([min, max]).range([clampMin, clampMax]);
+            }
+            else {
+                scale = scaleLinear().domain([max, min]).range([clampMax, clampMin]);
+            }
+            scale.clamp(true);
+            scaleProps = {
+                min: min,
+                max: max,
+                clampMin: clampMin,
+                clampMax: clampMax,
+            };
+        }
+        return scale;
+    };
+    useEffect(() => {
+        setIsControlled(value !== undefined);
+        setState(prevState => ({
+            ...prevState,
+            uncontrolledValue: value ?? defaultValue ?? 0,
+        }));
+        if (container.current) {
+            // Remove existing drag behavior
+            select(container.current).on('.drag', null);
+            // Only setup new drag if not disabled
+            if (!disabled) {
+                setupDragging(select(container.current));
+            }
+        }
+    }, [value, defaultValue, disabled]);
+    const saveRef = (elem) => {
+        if (!state.svgRef) {
+            setState({ ...state, svgRef: elem });
+        }
+    };
+    const onAngleChanged = (angle) => {
+        //Calculate domain value
+        const domainValue = convertAngleToValue(angle);
+        if (!isControlled) {
+            /**
+             * If the mode is 'uncontrolled' we need to update our local state
+             */
+            setState(st => {
+                return { ...st, uncontrolledValue: domainValue };
+            });
+        }
+        if (!disabled)
+            onChange(domainValue);
+    };
+    /**
+     * Returns the current value (depending on controlled/uncontrolled mode)
+     */
+    const getValue = () => isControlled ? (value ?? 0) : (state.uncontrolledValue ?? 0);
+    const setupDragging = (elem) => {
+        if (!elem?.node())
+            return;
+        const node = elem.node();
+        if (!node)
+            return;
+        let vbox = node.getBoundingClientRect();
+        const cx = vbox.width / 2;
+        const cy = vbox.height / 2;
+        // Shared state via closure
+        let startPos;
+        let startAngle;
+        let initialAngle;
+        let monitoring = false;
+        function started(event) {
+            if (!event?.sourceEvent)
+                return;
+            if (!node)
+                return;
+            const currentValue = getValue();
+            vbox = node.getBoundingClientRect();
+            elem.classed('dragging', true);
+            onStart();
+            startPos = { x: event.x - cx, y: event.y - cy };
+            startAngle = utils.getAngleForPoint(startPos.x, startPos.y);
+            initialAngle = convertValueToAngle(currentValue);
+            monitoring = false;
+            // ...existing setState code...
+        }
+        function dragged(event) {
+            const currentPos = { x: event.x - cx, y: event.y - cy };
+            const distanceFromCenter = Math.sqrt(currentPos.x ** 2 + currentPos.y ** 2);
+            if (preciseMode) {
+                if (!monitoring && distanceFromCenter >= unlockDistance) {
+                    startPos = currentPos;
+                    startAngle = utils.getAngleForPoint(currentPos.x, currentPos.y);
+                    monitoring = true;
+                }
+            }
+            else {
+                monitoring = true;
+            }
+            const currentAngle = utils.getAngleForPoint(currentPos.x, currentPos.y);
+            const deltaAngle = currentAngle - startAngle;
+            let finalAngle = initialAngle + deltaAngle;
+            finalAngle = normalizeAngle(finalAngle);
+            if (monitoring) {
+                onAngleChanged(finalAngle);
+            }
+            setState(prevState => ({
+                ...prevState,
+                dragDistance: distanceFromCenter,
+                mousePos: {
+                    x: event.sourceEvent.clientX,
+                    y: event.sourceEvent.clientY,
+                },
+                valueAngle: monitoring ? finalAngle : initialAngle,
+            }));
+        }
+        function ended() {
+            elem.classed('dragging', false);
+            setState(prevState => ({ ...prevState, dragging: false }));
+            onEnd();
+            inputRef.current?.focus();
+        }
+        const dragInstance = drag()
+            .container(() => node)
+            .on('start', started)
+            .on('drag', dragged)
+            .on('end', ended);
+        elem.call(dragInstance);
+    };
+    const onFormControlChange = (newVal) => {
+        if (!isControlled) {
+            /**
+             * If the mode is 'uncontrolled' we need to update our local state
+             */
+            setState(prevState => ({ ...prevState, uncontrolledValue: newVal }));
+        }
+        if (!disabled)
+            onChange(newVal);
+    };
+    const currentValue = getValue();
+    const angle = convertValueToAngle(currentValue);
+    const styles = {
+        container: Object.assign({}, {
+            width: '50px',
+            height: '50px',
+            overflow: 'hidden',
+            position: 'relative',
+            userSelect: 'none',
+            cursor: 'crosshair',
+        }, style),
+        input: {
+            width: '50%',
+            position: 'absolute',
+            top: '0',
+            left: '-100%',
+        },
+    };
+    //Get custom updates defined by the skin
+    //Transform the updateAttributes array into a SvgProxy array
+    const updateAttrs = skin.updateAttributes;
+    const skinElemUpdates = updateAttrs
+        ? updateAttrs.map((elemUpdate, ix) => {
+            let elemContent = null;
+            if (elemUpdate.content) {
+                elemContent = elemUpdate.content(props, currentValue);
+            }
+            const attributes = {};
+            //Call value function
+            //TODO: support string values
+            for (const attr of elemUpdate.attrs || []) {
+                attributes[attr.name] = attr.value(props, currentValue);
+            }
+            return (_jsx(SvgProxy, { selector: elemUpdate.element, ...attributes, children: elemContent }, ix));
+        })
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: container, style: styles.container, ...rest, children: [_jsx(InternalInput, { disabled: disabled, inputRef: inputRef, style: styles.input, value: currentValue, min: min, max: max, step: step, onChange: onFormControlChange }), _jsxs(SvgLoader, { height: "100%", svgXML: skin.svg, width: "100%", onSVGReady: saveRef, children: [_jsx(SvgProxy, { selector: "#knob", transform: `$ORIGINAL rotate(${angle}, ${skin.knobX}, ${skin.knobY})` }), skinElemUpdates] })] }), state.dragging && preciseMode && (_jsx(KnobVisualHelpers, { svgRef: state.svgRef, radius: state.dragDistance, mousePos: state.mousePos, minimumDragDistance: unlockDistance, valueAngle: state.valueAngle }))] }));
+};
+export default RotaryKnob;

package/lib/rotaryKnob/knobdefaultskin.js

@@ -0,0 +1,56 @@
+export default {
+    knobX: 71,
+    knobY: 71,
+    svg: `
+
+<svg width="204px" height="204px" viewBox="0 0 204 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#444040" stop-opacity="0.51098279" offset="0%"></stop>
+            <stop stop-color="#131111" stop-opacity="0.893200861" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-2" cx="98.0400009" cy="98.0400009" r="98.0400009"></circle>
+        <filter x="-3.3%" y="-3.3%" width="106.6%" height="106.6%" filterUnits="objectBoundingBox" id="filter-3">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
+            <stop stop-color="#000000" stop-opacity="0.5" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-5" cx="98" cy="98" r="86"></circle>
+        <filter x="-4.1%" y="-3.5%" width="108.1%" height="108.1%" filterUnits="objectBoundingBox" id="filter-6">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="s13" transform="translate(4.000000, 4.000000)">
+            <g id="container">
+                <g id="Oval-2">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    <use stroke="#979797" stroke-width="1" fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                </g>
+                <g id="Oval-2">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                    <use fill="" fill-rule="evenodd" xlink:href="#path-5"></use>
+                    <use stroke="#4A4A4A" stroke-width="1" fill="url(#linearGradient-4)" fill-rule="evenodd" xlink:href="#path-5"></use>
+                </g>
+                <g id="knob" transform="translate(27.431373, 27.431373)">
+                    <circle id="Oval-5" fill="#322E2E" cx="71" cy="71" r="71"></circle>
+                    <path d="M70.0686275,4.17063061 L86.5686275,65.2689929 C81.3642501,66.811221 75.8642501,67.5735686 70.0686275,67.5560356 C64.2730048,67.5385027 58.7730048,66.7761551 53.5686275,65.2689929 L70.0686275,4.17063061 Z" id="Rectangle-Copy" fill="#E6D7D7" transform="translate(70.068627, 35.863481) scale(1, -1) translate(-70.068627, -35.863481) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+`,
+};

package/lib/rotaryKnob/utils.js

@@ -0,0 +1,106 @@
+/** Note on viewbox/width
+ * This methods only work when the pixels match the svg units.
+ * when the viewbox is changed, or width is set they won't return
+ * the correct results
+ */
+/**
+ * Returns the global coordinates of a position given
+ * for a specific coordinate system
+ * @param {*} svgdoc
+ * @param {*} elem
+ * @param {*} x
+ * @param {*} y
+ */
+// function toGlobalCoordinates(svgdoc: any, elem: any, x: number, y: number) {
+//   var offset = svgdoc.getBoundingClientRect()
+//   var matrix = elem.getScreenCTM()
+//   return {
+//     x: matrix.a * x + matrix.c * y + matrix.e - offset.left,
+//     y: matrix.b * x + matrix.d * y + matrix.f - offset.top,
+//   }
+// }
+/**
+ * Converts a global position to a local one
+ * @param {*} svgdoc
+ * @param {*} elem
+ * @param {*} x
+ * @param {*} y
+ */
+// function toLocalCoordinates(svgdoc: any, elem: any, x: number, y: number) {
+//   const offset = svgdoc.getBoundingClientRect()
+//   const matrix = elem.getScreenCTM().inverse()
+//   return {
+//     x: matrix.a * x + matrix.c * y + matrix.e - offset.left,
+//     y: matrix.b * x + matrix.d * y + matrix.f - offset.top,
+//   }
+// }
+function toRadians(angle) {
+    return (angle * Math.PI) / 180;
+}
+function getQuadrant(x, y) {
+    if (x >= 0 && y >= 0)
+        return 1;
+    if (x <= 0 && y >= 0)
+        return 2;
+    if (x <= 0 && y <= 0)
+        return 3;
+    if (x >= 0 && y <= 0)
+        return 4;
+    return 1;
+}
+/**
+ * Returns the angle (degrees) given a point.
+ * Assumes 0,0 as the center of the circle
+ * @param {number} x
+ * @param {number} y
+ */
+function getAngleForPoint(x, y) {
+    if (x === 0 && y === 0)
+        return 0;
+    const angle = Math.atan(x / y);
+    let angleDeg = (angle * 180) / Math.PI;
+    //The final value depends on the quadrant
+    const quadrant = getQuadrant(x, y);
+    if (quadrant === 1) {
+        angleDeg = 90 - angleDeg;
+    }
+    if (quadrant === 2) {
+        angleDeg = 90 - angleDeg;
+    }
+    if (quadrant === 3) {
+        angleDeg = 270 - angleDeg;
+    }
+    if (quadrant === 4) {
+        angleDeg = 270 - angleDeg;
+    }
+    return angleDeg;
+}
+/**
+ * Transforms the top/left variables of the rectangle
+ * returned by getBoundingClientRect to document based coordinates
+ * without the scroll.
+ * UPDATE
+ * @param {Rect} box
+ */
+function transformBoundingClientRectToDocument(box) {
+    let t;
+    t = document.documentElement || document.body.parentNode;
+    const scrollX = (typeof t.scrollLeft === 'number' ? t : document.body)
+        .scrollLeft;
+    t = document.documentElement || document.body.parentNode;
+    const scrollY = (typeof t.scrollTop === 'number' ? t : document.body)
+        .scrollTop;
+    //This assumes width == height
+    const ttop = box.top - scrollY;
+    const tleft = box.left - scrollX;
+    //info needed to draw line from center to mousepos
+    return { top: ttop, left: tleft, width: box.width, height: box.height };
+}
+export default {
+    // toGlobalCoordinates,
+    // toLocalCoordinates,
+    toRadians,
+    getQuadrant,
+    getAngleForPoint,
+    transformBoundingClientRectToDocument,
+};

package/lib/utils.js

@@ -0,0 +1,21 @@
+// this just creates and fills a zero-indexed array array; 0, 1, 2, 3, etc
+const arraySequence = (numberOfElements) => Array.from(new Array(numberOfElements).keys());
+const assertRange = (value, max = 127, min = 0) => {
+    let result = typeof value === 'string' ? Number.parseInt(value, 10) : value;
+    if (Number.isNaN(result) || result === null) {
+        result = min;
+    }
+    return result >= min ? (result <= max ? result : max) : min;
+};
+const findObj = (key, value) => (arr) => arr?.find(item => item?.[key] === value);
+const omit = (...keys) => (obj) => Object.entries(obj)
+    .filter(([key]) => !keys.flat().map(String).includes(key))
+    .reduce((_obj, [key, val]) => Object.assign(_obj, { [key]: val }), {});
+const pick = (...keys) => (obj) => Object.entries(obj)
+    .filter(([key]) => keys.flat().map(String).includes(key))
+    .reduce((_obj, [key, val]) => Object.assign(_obj, { [key]: val }), {});
+const set = (key, value) => (obj) => ({
+    ...obj,
+    [key]: value,
+});
+export { arraySequence, assertRange, findObj, omit, pick, set };