@macrostrat/column-components/dist/node/column-components.7c336aaf.js

React rendering primitives for stratigraphic columns

import"./column-components.c66242f5.js";import"./column-components.b2a20dc1.js";import{format as t}from"d3-format";import{useContext as e,createRef as i,Component as o}from"react";import{Popover as r,Position as n,Button as s,Intent as l}from"@blueprintjs/core";import h from"chroma-js";import d from"ui-box";var a=globalThis,p={},u={},v=a.parcelRequirea149;null==v&&((v=function(t){if(t in p)return p[t].exports;if(t in u){var e=u[t];delete u[t];var i={id:t,exports:{}};return p[t]=i,e.call(i.exports,i,i.exports),i.exports}var o=Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(t,e){u[t]=e},a.parcelRequirea149=v),v.register,Object.defineProperty({},"DivisionEditOverlay",{get:()=>E,set:void 0,enumerable:!0,configurable:!0});var c=v("4bJ9d"),f=v("aVUB5");t(".1f");let m=t(".2f"),b=function(t){let{interval:e,children:i}=t;return(0,c.default)("div.interval-editor-title",[(0,c.default)("h3",`${m(e.bottom)}\u{2013}${m(e.top)} m`),(0,c.default)("div.id",[(0,c.default)("code",e.id)]),i])},g=t=>{let{division:i,background:o,className:r,onClick:n}=t,{widthForDivision:s,scaleClamped:l}=e(f.ColumnLayoutContext);if(null==l)return null;let h=l(i.top),d=l(i.bottom),a=s(i);return(0,c.default)("div",{style:{marginTop:h,height:d-h,width:a,pointerEvents:"none",position:"absolute"}},[(0,c.default)("div",{onClick:n,className:r,style:{cursor:null!=n?"pointer":null,width:"100%",height:"100%",background:o}}),t.children])},x=function({division:t,color:e,...i}){if(null==t)return null;null==e&&(e="red");let o=h(e).alpha(.5).css();return(0,c.default)(g,{className:"editing-box",division:t,background:o,...i})};class E extends o{static #t=this.contextType=f.ColumnLayoutContext;static #e=this.defaultProps={onHoverInterval(){},onClick(){},left:0,top:0,showInfoBox:!1,allowEditing:!0,renderEditorPopup:()=>null,color:"red",popoverWidth:340};constructor(t){super(t),this.onHoverInterval=this.onHoverInterval.bind(this),this.removeHoverBox=this.removeHoverBox.bind(this),this.heightForEvent=this.heightForEvent.bind(this),this.onEditInterval=this.onEditInterval.bind(this),this.onClick=this.onClick.bind(this),this.renderCursorLine=this.renderCursorLine.bind(this),this.renderHoveredBox=this.renderHoveredBox.bind(this),this.closePopover=this.closePopover.bind(this),this.state={height:null,hoveredDivision:null,popoverIsOpen:!1},this.timeout=null,this.elementRef=i()}onHoverInterval(t){if(t.stopPropagation(),this.elementRef.current!==t.target)return;let e=this.heightForEvent(t);if(this.setState({height:e}),!this.props.allowEditing)return;let{divisions:i}=this.context,o=null;for(let t of Array.from(i))if(t.bottom<=e&&e<t.top){o=t;break}if(o!==this.state.hoveredDivision&&(this.setState({hoveredDivision:o}),null!=this.timeout))return clearTimeout(this.timeout),this.timeout=null}removeHoverBox(){return this.setState({hoveredDivision:null,popoverIsOpen:!1}),this.timeout=null}heightForEvent(t){let{scale:e}=this.context,{offsetY:i}=t.nativeEvent;return e.invert(i)}onEditInterval(t){if(this.state.popoverIsOpen)return;let{showInfoBox:e}=this.props,{hoveredDivision:i}=this.state,o=this.heightForEvent(t);return(t.stopPropagation(),t.shiftKey&&e)?void this.setState({popoverIsOpen:!0}):this.props.onClick({event:t,height:o,division:i})}onClick(t){if(this.props.allowEditing)return this.onEditInterval(t);let e=this.heightForEvent(t);return this.props.onClick({height:e})}renderCursorLine(){let{height:t,hoveredDivision:e}=this.state,{scaleClamped:i}=this.context,{selectedHeight:o}=this.props;if(null==t&&(t=o),null==t)return;let r={top:i(t),height:0,border:"0.5px solid black",width:this.context.widthForDivision(e),position:"absolute",pointerEvents:"none"};return(0,c.default)("div.cursor",{style:r},[(0,c.default)("div.cursor-position",{style:{pointerEvents:"none",fontWeight:"bold",fontSize:"12px",left:"2px",top:"-14px",position:"absolute",color:"black"}},[m(t)])])}renderHoveredBox(){if(null==this.state.hoveredDivision)return null;let{popoverIsOpen:t,hoveredDivision:e}=this.state,i=this.context.widthForDivision(e),{color:o}=this.props,d=h(o).alpha(.3).css();return(0,c.default)(g,{division:e,className:"hovered-box",background:d},[c.default.if(null!=this.props.renderEditorPopup)(r,{isOpen:t&&null!=e,position:n.LEFT},[(0,c.default)("div",{style:{width:i,height:30,transform:"translate(0,-30)"}}),(0,c.default)("div.editor-popover-contents",{style:{width:this.props.popoverWidth,padding:"10px"}},[(0,c.default)(b,{interval:e},[(0,c.default)(s,{icon:"cross",minimal:!0,intent:l.WARNING,onClick:this.closePopover.bind(this)})]),this.props.renderEditorPopup(e)])])])}closePopover(){return this.setState({popoverIsOpen:!1})}render(){let{divisions:t,pixelHeight:e,width:i}=this.context,{popoverIsOpen:o,hoveredDivision:r}=this.state,{left:n,top:s,color:l}=this.props;return null==i&&({width:i}=this.props),(0,c.default)(d,{className:"edit-overlay",width:i,height:e,ref:this.elementRef,style:{left:n,top:s,position:"absolute",zIndex:18,pointerEvents:"all",cursor:"pointer"},onClick:this.onEditInterval,onMouseEnter:this.onHoverInterval,onMouseMove:this.onHoverInterval,onMouseLeave:()=>{if(!o)return this.setState({height:null}),this.timeout=setTimeout(this.removeHoverBox,1e3)}},[this.renderHoveredBox(),(0,c.default)(x,{division:this.props.editingInterval,color:l}),this.renderCursorLine()])}}export{E as DivisionEditOverlay};
//# sourceMappingURL=column-components.7c336aaf.js.map