{"version":3,"file":"color-editor.cjs","sources":["../../src/form-controls/color-editor.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { ErrorBoundary } from \"../error-boundary\";\nimport { Sketch } from \"@uiw/react-color\";\nimport { Button, Popover } from \"@blueprintjs/core\";\nimport chroma from \"chroma-js\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport styles from \"./main.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport function BasePopup(props) {\n  const { children, isOpen, content, ...rest } = props;\n\n  return h(\n    Popover,\n    {\n      content: h(\n        \"div.interaction-barrier\",\n        {\n          style: { pointerEvents: \"all\" },\n          onMouseDown(evt) {\n            evt.nativeEvent.stopImmediatePropagation();\n          },\n          onKeyDown(evt) {\n            console.log(evt);\n          },\n        },\n        h(ErrorBoundary, null, content),\n      ),\n      enforceFocus: false,\n      autoFocus: false,\n      minimal: true,\n      modifiers: {\n        offset: { enabled: true, options: { offset: [4, 4] } },\n      },\n      interactionKind: \"hover-target\",\n      isOpen,\n      usePortal: false,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function ColorEditor(props) {\n  const { color = \"#aaaaaa\", onChange, ...rest } = props;\n  const [isOpen, setOpen] = useState(true);\n\n  return h(\n    BasePopup,\n    {\n      ...rest,\n      isOpen,\n      content: h(Sketch, {\n        disableAlpha: true,\n        color,\n        onChange(color) {\n          onChange(chroma(color.hex).name());\n        },\n      }),\n    },\n    [\n      h(Button, {\n        style: {\n          backgroundColor: color,\n        },\n        minimal: true,\n        onClick() {\n          console.log(\"Toggling color picker\");\n          setOpen(!isOpen);\n        },\n      }),\n    ],\n  );\n}\n\nexport enum ColorConversionType {\n  HEX = \"hex\",\n  RGB = \"rgb\",\n  HSL = \"hsl\",\n  CSS = \"css\",\n}\n\nexport function ColorPicker2({\n  value,\n  onChange,\n  editable = true,\n  type = ColorConversionType.CSS,\n}) {\n  const ref = useRef(null);\n  useEffect(() => {\n    if (ref.current == null) return;\n    ref.current.focus();\n  }, []);\n\n  const color = useMemo(() => {\n    try {\n      return asChromaColor(value).hex();\n    } catch {\n      return \"#aaaaaa\";\n    }\n  }, [value]);\n\n  return h(\n    \"div.color-picker-container\",\n    {\n      onKeyDown(evt) {\n        if (evt.key === \"Escape\") {\n          evt.preventDefault();\n        }\n      },\n      ref,\n      tabIndex: 0,\n    },\n    h(Sketch, {\n      color,\n      disableAlpha: true,\n      onChange(color) {\n        onChange(asChromaColor(color.hexa)[type]());\n      },\n    }),\n  );\n}\n"],"names":["hyper","styles","Popover","ErrorBoundary","useState","Sketch","color","chroma","Button","ColorConversionType","useRef","useEffect","useMemo","asChromaColor"],"mappings":";;;;;;;;;;;;;AASA,MAAM,IAAIA,WAAAA,QAAM,OAAOC,mBAAM;AAEtB,SAAS,UAAU,OAAO;AAC/B,QAAM,EAAE,UAAU,QAAQ,SAAS,GAAG,SAAS;AAE/C,SAAO;AAAA,IACLC,KAAAA;AAAAA,IACA;AAAA,MACE,SAAS;AAAA,QACP;AAAA,QACA;AAAA,UACE,OAAO,EAAE,eAAe,MAAA;AAAA,UACxB,YAAY,KAAK;AACf,gBAAI,YAAY,yBAAA;AAAA,UAClB;AAAA,UACA,UAAU,KAAK;AACb,oBAAQ,IAAI,GAAG;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,EAAEC,cAAAA,eAAe,MAAM,OAAO;AAAA,MAAA;AAAA,MAEhC,cAAc;AAAA,MACd,WAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,QACT,QAAQ,EAAE,SAAS,MAAM,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAA,EAAE;AAAA,MAAE;AAAA,MAEvD,iBAAiB;AAAA,MACjB;AAAA,MACA,WAAW;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAEO,SAAS,YAAY,OAAO;AACjC,QAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;AACjD,QAAM,CAAC,QAAQ,OAAO,IAAIC,MAAAA,SAAS,IAAI;AAEvC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH;AAAA,MACA,SAAS,EAAEC,OAAQ;AAAA,QACjB,cAAc;AAAA,QACd;AAAA,QACA,SAASC,QAAO;AACd,mBAASC,gBAAAA,QAAOD,OAAM,GAAG,EAAE,MAAM;AAAA,QACnC;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEH;AAAA,MACE,EAAEE,KAAAA,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,QAAA;AAAA,QAEnB,SAAS;AAAA,QACT,UAAU;AACR,kBAAQ,IAAI,uBAAuB;AACnC,kBAAQ,CAAC,MAAM;AAAA,QACjB;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EACH;AAEJ;AAEO,IAAK,wCAAAC,yBAAL;AACLA,uBAAA,KAAA,IAAM;AACNA,uBAAA,KAAA,IAAM;AACNA,uBAAA,KAAA,IAAM;AACNA,uBAAA,KAAA,IAAM;AAJI,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAOL,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA;AACT,GAAG;AACD,QAAM,MAAMC,MAAAA,OAAO,IAAI;AACvBC,QAAAA,UAAU,MAAM;AACd,QAAI,IAAI,WAAW,KAAM;AACzB,QAAI,QAAQ,MAAA;AAAA,EACd,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQC,MAAAA,QAAQ,MAAM;AAC1B,QAAI;AACF,aAAOC,QAAAA,cAAc,KAAK,EAAE,IAAA;AAAA,IAC9B,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,UAAU,KAAK;AACb,YAAI,IAAI,QAAQ,UAAU;AACxB,cAAI,eAAA;AAAA,QACN;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,IAEZ,EAAER,OAAQ;AAAA,MACR;AAAA,MACA,cAAc;AAAA,MACd,SAASC,QAAO;AACd,iBAASO,QAAAA,cAAcP,OAAM,IAAI,EAAE,IAAI,GAAG;AAAA,MAC5C;AAAA,IAAA,CACD;AAAA,EAAA;AAEL;;;;;"}