zds-pickers 4.0.5 → 4.0.6

package/lib/rotaryKnob/helpers/KnobVisualHelpers.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+import type { Point } from '../Types'
+import utils from '../utils'
+import DrawCircle from './DrawCircle'
+import DrawLine from './DrawLine'
+import HelpersOverlay from './HelpersOverlay'
+
+/** Precision visual helpers */
+
+/**
+ * Precision mode visual helpers
+ */
+type KnobVisualHelpersProps = {
+  svgRef?: SVGSVGElement
+  radius: number
+  minimumDragDistance: number
+  valueAngle: number
+  mousePos: Point
+}
+
+type KnobVisualHelpersState = {
+  centerX: number
+  centerY: number
+  valueMarkerX: number
+  valueMarkerY: number
+}
+
+class KnobVisualHelpers extends React.Component<
+  KnobVisualHelpersProps,
+  KnobVisualHelpersState
+> {
+  state = {
+    centerX: 0,
+    centerY: 0,
+    valueMarkerX: 0,
+    valueMarkerY: 0,
+  }
+
+  static getDerivedStateFromProps(
+    props: KnobVisualHelpersProps,
+    state: KnobVisualHelpersState,
+  ) {
+    //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 (
+      <HelpersOverlay>
+        <svg
+          style={{ position: 'absolute', top: '0', left: '0' }}
+          width="100%"
+          height="100%">
+          <defs>
+            <marker
+              id="Triangle"
+              viewBox="0 0 10 10"
+              refX="1"
+              refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto">
+              <path d="M 0 0 L 10 5 L 0 10 z" />
+            </marker>
+          </defs>
+
+          {/* Current drag distance */}
+          <DrawCircle
+            borderColor={markCircleColor}
+            fillColor={fillColor}
+            fillOpacity={0.02}
+            r={this.props.radius}
+            cx={this.state.centerX}
+            cy={this.state.centerY}
+          />
+          {/* Minimum drag distance marker */}
+          {minDistanceCueVisible && (
+            <DrawCircle
+              borderColor={markCircleColor}
+              fillColor={fillColor}
+              fillOpacity={0}
+              r={this.props.minimumDragDistance}
+              cx={this.state.centerX}
+              cy={this.state.centerY}
+              //strokeDasharray="5, 5"
+            />
+          )}
+
+          {/* Line to mouse position */}
+          {/* <DrawLine
+            p1={{ x: this.state.centerX, y: this.state.centerY }}
+            p2={{ x: this.props.mousePos.x, y: this.props.mousePos.y }}
+            opacity={0.4}
+            strokeDasharray="5, 5"
+          /> */}
+          {/* Line to current value */}
+          <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)"
+          />
+        </svg>
+      </HelpersOverlay>
+    )
+  }
+}
+
+export { KnobVisualHelpers }

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>
+`,
+}