zds-pickers 4.0.3 → 4.0.6

package/lib/rotaryKnob/index.tsx

@@ -0,0 +1,417 @@
+/**
+ * Show the rotation circle and marker
+ * dispatches drag events
+ */
+
+import { type D3DragEvent, drag } from 'd3-drag'
+import { type ScaleLinear, scaleLinear } from 'd3-scale'
+import { select } from 'd3-selection'
+import type { BaseType, Selection } from 'd3-selection'
+import { useEffect, useRef, useState } from 'react'
+import { SvgLoader, SvgProxy } from 'react-svgmt'
+import InternalInput from './InternalInput'
+import type { Point } from './Types'
+import { KnobVisualHelpers } from './helpers/KnobVisualHelpers'
+import defaultSkin from './knobdefaultskin'
+import utils from './utils'
+
+/**
+ * type definition for the skin system attribute modification element
+ */
+type AttributeSetValue = {
+  name: string
+  value: (props: unknown, value: unknown) => string
+}
+
+/**
+ * Type definition for the skin element manipulation block
+ */
+
+interface UpdateElement {
+  element: string
+  content: (_props: React.CSSProperties, value: number) => string
+  attrs: AttributeSetValue[]
+}
+
+interface Skin {
+  svg: string
+  knobX: number
+  knobY: number
+  updateAttributes: UpdateElement[]
+}
+
+type KnobProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
+  clampMax?: number
+  clampMin?: number
+  defaultValue?: number
+  disabled?: boolean
+  format?: (val: number) => string
+  max?: number
+  min?: number
+  onChange?: (val: number) => void
+  onEnd?: () => void
+  onStart?: () => void
+  preciseMode?: boolean
+  rotateDegrees?: number
+  skin?: Skin
+  step?: number
+  style: React.CSSProperties
+  unlockDistance?: number
+  value?: number
+}
+
+type KnobState = {
+  svgRef?: SVGSVGElement
+  dragging: boolean
+  dragDistance: number
+  mousePos: Point
+  valueAngle: number
+  uncontrolledValue?: number
+}
+
+// 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: KnobProps) => {
+  const {
+    clampMax = 360,
+    clampMin = 0,
+    defaultValue = 0,
+    disabled = false,
+    format = (val: number) => val.toFixed(0),
+    max = 100,
+    min = 0,
+    onChange = () => {},
+    onEnd = () => {},
+    onStart = () => {},
+    preciseMode = true,
+    rotateDegrees = 0,
+    skin = defaultSkin as Skin,
+    step = 1,
+    style,
+    unlockDistance = 100,
+    value,
+    ...rest
+  } = props
+
+  const [isControlled, setIsControlled] = useState(value !== undefined)
+
+  const container = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  let scale: ScaleLinear<number, number>
+  let scaleProps: {
+    min: number
+    max: number
+    clampMin: number
+    clampMax: number
+  }
+
+  const [state, setState] = useState<KnobState>({
+    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: number): number => {
+    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: number): number => {
+    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: number): number => {
+    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: SVGElement) => {
+    if (!state.svgRef) {
+      setState({ ...state, svgRef: elem as SVGSVGElement })
+    }
+  }
+
+  const onAngleChanged = (angle: number) => {
+    //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 = (): number =>
+    isControlled ? (value ?? 0) : (state.uncontrolledValue ?? 0)
+
+  const setupDragging = (
+    elem: Selection<HTMLDivElement, unknown, BaseType, unknown>,
+  ) => {
+    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: Point
+    let startAngle: number
+    let initialAngle: number
+    let monitoring = false
+
+    function started(event: D3DragEvent<HTMLDivElement, unknown, unknown>) {
+      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: D3DragEvent<HTMLDivElement, unknown, unknown>) {
+      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<HTMLDivElement, unknown>()
+      .container(() => node)
+      .on('start', started)
+      .on('drag', dragged)
+      .on('end', ended)
+
+    elem.call(dragInstance)
+  }
+
+  const onFormControlChange = (newVal: number) => {
+    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: number = getValue()
+  const angle = convertValueToAngle(currentValue)
+
+  const styles: {
+    container: React.CSSProperties
+    input: React.CSSProperties
+  } = {
+    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: number) => {
+        let elemContent: string | null = null
+        if (elemUpdate.content) {
+          elemContent = elemUpdate.content(props, currentValue)
+        }
+        const attributes: Record<string, string> = {}
+        //Call value function
+        //TODO: support string values
+        for (const attr of elemUpdate.attrs || []) {
+          attributes[attr.name] = attr.value(props, currentValue)
+        }
+
+        return (
+          <SvgProxy
+            key={ix}
+            selector={elemUpdate.element}
+            {...attributes}>
+            {elemContent}
+          </SvgProxy>
+        )
+      })
+    : null
+
+  return (
+    <>
+      <div
+        ref={container}
+        style={styles.container}
+        {...rest}>
+        <InternalInput
+          disabled={disabled}
+          inputRef={inputRef}
+          style={styles.input}
+          value={currentValue}
+          min={min}
+          max={max}
+          step={step}
+          onChange={onFormControlChange}
+        />
+
+        <SvgLoader
+          height="100%"
+          svgXML={skin.svg}
+          width="100%"
+          onSVGReady={saveRef}>
+          <SvgProxy
+            selector="#knob"
+            transform={`$ORIGINAL rotate(${angle}, ${skin.knobX}, ${skin.knobY})`}
+          />
+          {skinElemUpdates}
+        </SvgLoader>
+      </div>
+
+      {state.dragging && preciseMode && (
+        <KnobVisualHelpers
+          svgRef={state.svgRef}
+          radius={state.dragDistance}
+          mousePos={state.mousePos}
+          minimumDragDistance={unlockDistance}
+          valueAngle={state.valueAngle}
+        />
+      )}
+    </>
+  )
+}
+
+export default RotaryKnob

package/lib/rotaryKnob/knobdefaultskin.ts

@@ -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.ts

@@ -0,0 +1,112 @@
+/** 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: number) {
+  return (angle * Math.PI) / 180
+}
+
+function getQuadrant(x: number, y: number) {
+  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: number, y: number) {
+  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: DOMRect) {
+  let t: HTMLElement
+  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,
+}