zds-pickers 4.0.8 → 4.0.9

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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && tsc --emitDeclarationOnly",
+    "build": "vite build && tsc",
     "build-storybook": "storybook build",
     "lint": "biome check --write",
     "preview": "vite preview",
@@ -62,7 +62,6 @@
     "react": "18.2.0",
     "storybook": "8.5.0",
     "typescript": "5.7.3",
-    "vite-plugin-dts": "4.5.0",
     "vite": "6.0.7",
     "zds-mappings": "1.4.9"
   },

package/tsconfig.json

@@ -11,7 +11,7 @@
     /* output */
     "declaration": true,
     "declarationDir": "./dist/types",
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": false,
     // "preserveConstEnums": true, // we don't use enums
 
     /* Bundler mode */

package/vite.config.ts

@@ -1,19 +1,9 @@
 import { resolve } from 'node:path'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
 
 export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      tsconfigPath: resolve(__dirname, 'tsconfig.json'),
-      include: ['lib'],
-      rollupTypes: true,
-      entryRoot: 'lib',
-      outDir: 'dist/types',
-    }),
-  ],
+  plugins: [react()],
   build: {
     lib: {
       entry: resolve(__dirname, 'lib/index'),
@@ -21,6 +11,7 @@ export default defineConfig({
       formats: ['es', 'cjs'],
       name: 'zds-pickers',
     },
+    outDir: 'dist',
     sourcemap: true,
     rollupOptions: {
       external: [
@@ -33,14 +24,7 @@ export default defineConfig({
         'd3-selection',
       ],
       output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react-select': 'ReactSelect',
-          'd3-drag': 'd3',
-          'd3-scale': 'd3',
-          'd3-selection': 'd3',
-        },
+        exports: 'named',
       },
     },
     // minify: true,