{"version":3,"file":"draggable-overlay.cjs","sources":["../../src/modal-panel/draggable-overlay.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport { useState, useEffect, ReactChild, ReactElement } from \"react\";\nimport { Overlay, Card } from \"@blueprintjs/core\";\n\ninterface DraggableOverlayPropsI {\n  open: boolean;\n  children: ReactChild;\n  HeaderComponent: ReactElement<any>;\n  className: string;\n  cardStyles: object;\n  headerStyles: object;\n  top: number;\n  left: number;\n}\n\nfunction DraggableOverlay(props: DraggableOverlayPropsI) {\n  const {\n    open,\n    children,\n    headerStyles = {},\n    className = \"overlay\",\n    cardStyles = {},\n    top = 100,\n    left = 20,\n  } = props;\n\n  const [state, setState] = useState({ top, left });\n  const [offset, setOffset] = useState({ rel_x: 0, rel_y: 0 });\n  const [dragging, setDragging] = useState(false);\n\n  useEffect(() => {\n    //setup event listeners\n    if (!dragging) return;\n    document.addEventListener(\"mousemove\", onMouseMove, true);\n    document.addEventListener(\"mouseup\", onMouseUp, true);\n    return () => {\n      document.removeEventListener(\"mouseup\", onMouseUp, true);\n      document.removeEventListener(\"mousemove\", onMouseMove, true);\n    };\n  }, [dragging]);\n\n  const onMouseDown = (e) => {\n    if (e.button !== 0) return;\n    setDragging(true);\n    setOffset(getOffest(e));\n  };\n\n  const onMouseUp = (e) => {\n    setDragging(false);\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  const getOffest = (e) => {\n    const rel_x = e.pageX - state.left;\n    const rel_y = e.pageY - state.top;\n    return { rel_x, rel_y };\n  };\n\n  const onMouseMove = (e) => {\n    if (dragging) {\n      const { rel_x, rel_y } = offset;\n      const left_ = e.pageX - rel_x;\n      const top_ = e.pageY - rel_y;\n      setState({ top: top_, left: left_ });\n    }\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  const overlayProperties = {\n    autoFocus: true,\n    canEscapeKeyClose: true,\n    canOutsideClickClose: true,\n    enforceFocus: false,\n    hasBackdrop: false,\n    usePortal: true,\n    useTallContent: false,\n  };\n\n  const style = { top: `${state.top}px`, left: `${state.left}px` };\n\n  return h(Overlay, { isOpen: open, ...overlayProperties }, [\n    h(`div.${className}`, { styles: style }, [\n      h(Card, { style: cardStyles }, [\n        h(\"div\", { onMouseDown, styles: headerStyles }, [\n          props.HeaderComponent,\n        ]),\n        children,\n      ]),\n    ]),\n  ]);\n}\n\nexport { DraggableOverlay };\n"],"names":["useState","useEffect","h","Overlay","Card"],"mappings":";;;;;;;AAeA,SAAS,iBAAiB,OAA+B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe,CAAA;AAAA,IACf,YAAY;AAAA,IACZ,aAAa,CAAA;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,EAAA,IACL;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,EAAE,KAAK,MAAM;AAChD,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG;AAC3D,QAAM,CAAC,UAAU,WAAW,IAAIA,MAAAA,SAAS,KAAK;AAE9CC,QAAAA,UAAU,MAAM;AAEd,QAAI,CAAC,SAAU;AACf,aAAS,iBAAiB,aAAa,aAAa,IAAI;AACxD,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,WAAW,IAAI;AACvD,eAAS,oBAAoB,aAAa,aAAa,IAAI;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,CAAC,MAAM;AACzB,QAAI,EAAE,WAAW,EAAG;AACpB,gBAAY,IAAI;AAChB,cAAU,UAAU,CAAC,CAAC;AAAA,EACxB;AAEA,QAAM,YAAY,CAAC,MAAM;AACvB,gBAAY,KAAK;AACjB,MAAE,gBAAA;AACF,MAAE,eAAA;AAAA,EACJ;AAEA,QAAM,YAAY,CAAC,MAAM;AACvB,UAAM,QAAQ,EAAE,QAAQ,MAAM;AAC9B,UAAM,QAAQ,EAAE,QAAQ,MAAM;AAC9B,WAAO,EAAE,OAAO,MAAA;AAAA,EAClB;AAEA,QAAM,cAAc,CAAC,MAAM;AACzB,QAAI,UAAU;AACZ,YAAM,EAAE,OAAO,MAAA,IAAU;AACzB,YAAM,QAAQ,EAAE,QAAQ;AACxB,YAAM,OAAO,EAAE,QAAQ;AACvB,eAAS,EAAE,KAAK,MAAM,MAAM,OAAO;AAAA,IACrC;AACA,MAAE,gBAAA;AACF,MAAE,eAAA;AAAA,EACJ;AAEA,QAAM,oBAAoB;AAAA,IACxB,WAAW;AAAA,IACX,mBAAmB;AAAA,IACnB,sBAAsB;AAAA,IACtB,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA;AAGlB,QAAM,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM,IAAI,KAAA;AAE1D,SAAOC,WAAAA,QAAEC,KAAAA,SAAS,EAAE,QAAQ,MAAM,GAAG,qBAAqB;AAAA,IACxDD,WAAAA,QAAE,OAAO,SAAS,IAAI,EAAE,QAAQ,SAAS;AAAA,MACvCA,WAAAA,QAAEE,KAAAA,MAAM,EAAE,OAAO,cAAc;AAAA,QAC7BF,WAAAA,QAAE,OAAO,EAAE,aAAa,QAAQ,gBAAgB;AAAA,UAC9C,MAAM;AAAA,QAAA,CACP;AAAA,QACD;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,CACF;AACH;;"}