react-bezier-curve-editor.js

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(()=>(()=>{"use strict";var e={};return(()=>{var t=e;function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e){return function(e){if(Array.isArray(e))return i(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function a(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function u(e,t){return u=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},u(e,t)}function s(e,t){if(t&&("object"===r(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function l(e){return l=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},l(e)}Object.defineProperty(t,"__esModule",{value:!0});var c={exports:{}};function d(e){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d(e)}var f,p={};function h(){if(f)return p;f=1;var e=Symbol.for("react.element"),t=Symbol.for("react.portal"),r=Symbol.for("react.fragment"),n=Symbol.for("react.strict_mode"),o=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),a=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),s=Symbol.for("react.suspense"),l=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),h=Symbol.iterator,v={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},y=Object.assign,m={};function b(e,t,r){this.props=e,this.context=t,this.refs=m,this.updater=r||v}function _(){}function g(e,t,r){this.props=e,this.context=t,this.refs=m,this.updater=r||v}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if("object"!==d(e)&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},_.prototype=b.prototype;var w=g.prototype=new _;w.constructor=g,y(w,b.prototype),w.isPureReactComponent=!0;var E=Array.isArray,x=Object.prototype.hasOwnProperty,S={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function k(t,r,n){var o,i={},a=null,u=null;if(null!=r)for(o in void 0!==r.ref&&(u=r.ref),void 0!==r.key&&(a=""+r.key),r)x.call(r,o)&&!C.hasOwnProperty(o)&&(i[o]=r[o]);var s=arguments.length-2;if(1===s)i.children=n;else if(1<s){for(var l=Array(s),c=0;c<s;c++)l[c]=arguments[c+2];i.children=l}if(t&&t.defaultProps)for(o in s=t.defaultProps)void 0===i[o]&&(i[o]=s[o]);return{$$typeof:e,type:t,key:a,ref:u,props:i,_owner:S.current}}function B(t){return"object"===d(t)&&null!==t&&t.$$typeof===e}var H=/\/+/g;function z(e,t){return"object"===d(e)&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function M(r,n,o,i,a){var u=d(r);"undefined"!==u&&"boolean"!==u||(r=null);var s=!1;if(null===r)s=!0;else switch(u){case"string":case"number":s=!0;break;case"object":switch(r.$$typeof){case e:case t:s=!0}}if(s)return a=a(s=r),r=""===i?"."+z(s,0):i,E(a)?(o="",null!=r&&(o=r.replace(H,"$&/")+"/"),M(a,n,o,"",(function(e){return e}))):null!=a&&(B(a)&&(a=function(t,r){return{$$typeof:e,type:t.type,key:r,ref:t.ref,props:t.props,_owner:t._owner}}(a,o+(!a.key||s&&s.key===a.key?"":(""+a.key).replace(H,"$&/")+"/")+r)),n.push(a)),1;if(s=0,i=""===i?".":i+":",E(r))for(var l=0;l<r.length;l++){var c=i+z(u=r[l],l);s+=M(u,n,o,c,a)}else if(c=function(e){return null===e||"object"!==d(e)?null:"function"==typeof(e=h&&e[h]||e["@@iterator"])?e:null}(r),"function"==typeof c)for(r=c.call(r),l=0;!(u=r.next()).done;)s+=M(u=u.value,n,o,c=i+z(u,l++),a);else if("object"===u)throw n=String(r),Error("Objects are not valid as a React child (found: "+("[object Object]"===n?"object with keys {"+Object.keys(r).join(", ")+"}":n)+"). If you meant to render a collection of children, use an array instead.");return s}function j(e,t,r){if(null==e)return e;var n=[],o=0;return M(e,n,"","",(function(e){return t.call(r,e,o++)})),n}function O(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var A={current:null},R={transition:null},P={ReactCurrentDispatcher:A,ReactCurrentBatchConfig:R,ReactCurrentOwner:S};return p.Children={map:j,forEach:function(e,t,r){j(e,(function(){t.apply(this,arguments)}),r)},count:function(e){var t=0;return j(e,(function(){t++})),t},toArray:function(e){return j(e,(function(e){return e}))||[]},only:function(e){if(!B(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},p.Component=b,p.Fragment=r,p.Profiler=o,p.PureComponent=g,p.StrictMode=n,p.Suspense=s,p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=P,p.cloneElement=function(t,r,n){if(null==t)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+t+".");var o=y({},t.props),i=t.key,a=t.ref,u=t._owner;if(null!=r){if(void 0!==r.ref&&(a=r.ref,u=S.current),void 0!==r.key&&(i=""+r.key),t.type&&t.type.defaultProps)var s=t.type.defaultProps;for(l in r)x.call(r,l)&&!C.hasOwnProperty(l)&&(o[l]=void 0===r[l]&&void 0!==s?s[l]:r[l])}var l=arguments.length-2;if(1===l)o.children=n;else if(1<l){s=Array(l);for(var c=0;c<l;c++)s[c]=arguments[c+2];o.children=s}return{$$typeof:e,type:t.type,key:i,ref:a,props:o,_owner:u}},p.createContext=function(e){return(e={$$typeof:a,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:i,_context:e},e.Consumer=e},p.createElement=k,p.createFactory=function(e){var t=k.bind(null,e);return t.type=e,t},p.createRef=function(){return{current:null}},p.forwardRef=function(e){return{$$typeof:u,render:e}},p.isValidElement=B,p.lazy=function(e){return{$$typeof:c,_payload:{_status:-1,_result:e},_init:O}},p.memo=function(e,t){return{$$typeof:l,type:e,compare:void 0===t?null:t}},p.startTransition=function(e){var t=R.transition;R.transition={};try{e()}finally{R.transition=t}},p.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},p.useCallback=function(e,t){return A.current.useCallback(e,t)},p.useContext=function(e){return A.current.useContext(e)},p.useDebugValue=function(){},p.useDeferredValue=function(e){return A.current.useDeferredValue(e)},p.useEffect=function(e,t){return A.current.useEffect(e,t)},p.useId=function(){return A.current.useId()},p.useImperativeHandle=function(e,t,r){return A.current.useImperativeHandle(e,t,r)},p.useInsertionEffect=function(e,t){return A.current.useInsertionEffect(e,t)},p.useLayoutEffect=function(e,t){return A.current.useLayoutEffect(e,t)},p.useMemo=function(e,t){return A.current.useMemo(e,t)},p.useReducer=function(e,t,r){return A.current.useReducer(e,t,r)},p.useRef=function(e){return A.current.useRef(e)},p.useState=function(e){return A.current.useState(e)},p.useSyncExternalStore=function(e,t,r){return A.current.useSyncExternalStore(e,t,r)},p.useTransition=function(){return A.current.useTransition()},p.version="18.1.0",p}!function(e){e.exports=h()}(c);var v="#969696",y="BezierCurveEditor_handle__5s-m-",m="BezierCurveEditor_active__M1FUC",b="BezierCurveEditor_fixed__BAvai";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".BezierCurveEditor_root__-nrie {\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.BezierCurveEditor_wrap__e8IBW {\n  position: relative;\n}\n.BezierCurveEditor_wrap__e8IBW .BezierCurveEditor_bg__b-2qB {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background: #fafafa;\n}\n\n.BezierCurveEditor_plane__NgkX1 {\n  position: absolute;\n  left: 0;\n  border-left: 1px solid black;\n  border-bottom: 1px solid black;\n}\n\n.BezierCurveEditor_curve__3qOlz {\n  position: relative;\n}\n\n.BezierCurveEditor_handle__5s-m- {\n  position: absolute;\n  border-radius: 50%;\n  box-sizing: content-box;\n  border: 0;\n  padding: 0;\n  outline: 0;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  user-select: none;\n  -webkit-touch-callout: none;\n  transform: translate(-50%, -50%);\n  transition: box-shadow 100ms ease-out;\n}\n.BezierCurveEditor_handle__5s-m-.BezierCurveEditor_active__M1FUC {\n  box-shadow: 0 0 0 4.5px rgba(255, 255, 255, 0.7), 0 0 0 4px currentColor;\n}\n.BezierCurveEditor_handle__5s-m-.BezierCurveEditor_fixed__BAvai {\n  pointer-events: none;\n  cursor: default;\n  border: 1px solid #969696;\n  background-color: white;\n}\n.BezierCurveEditor_handle__5s-m-.BezierCurveEditor_start__X2msh {\n  color: #f08;\n  background-color: #f08;\n}\n.BezierCurveEditor_handle__5s-m-.BezierCurveEditor_end__pWblg {\n  color: #0ab;\n  background-color: #0ab;\n}");var _={exports:{}};!function(e){!function(){var t={}.hasOwnProperty;function r(){for(var e=[],n=0;n<arguments.length;n++){var o=arguments[n];if(o){var i=d(o);if("string"===i||"number"===i)e.push(o);else if(Array.isArray(o)){if(o.length){var a=r.apply(null,o);a&&e.push(a)}}else if("object"===i)if(o.toString===Object.prototype.toString)for(var u in o)t.call(o,u)&&o[u]&&e.push(u);else e.push(o.toString())}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):window.classNames=r}()}(_);var g=_.exports,w={value:[.4,0,1,.6],startValue:[.4,0,1,.6],movingStartHandle:!1,movingEndHandle:!1,movingStartHandleStart:{x:0,y:0},movingEndHandleStart:{x:0,y:0}},E=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&u(e,t)}(h,e);var t,r,i,d,f,p=(d=h,f=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=l(d);if(f){var r=l(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return s(this,e)});function h(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),(t=p.call(this,e)).state=Object.assign({},w),t.stopMovingAll=function(){t.setState({movingStartHandle:!1,movingEndHandle:!1})},t.moveHandles=function(e,r){var n=t.props.onChange,i=t.state,a=i.startValue,u=i.movingStartHandle,s=i.movingStartHandleStart,l=i.movingEndHandle,c=i.movingEndHandleStart,d=u?s:l?c:void 0;if(u||l){var f=(e-d.x)/t.width,p=(r-d.y)/t.height,h=o(a);u&&(h[0]=h[0]+f,h[1]=h[1]-p),l&&(h[2]=h[2]+f,h[3]=h[3]-p);var v=t.clampValue(h);n&&n(v),t.setState({value:v})}},t.clampValue=function(e){var r=t.props.outerAreaSize/t.height,n=o(e);return n[0]=Math.max(0,Math.min(1,n[0])),n[2]=Math.max(0,Math.min(1,n[2])),n[1]=Math.max(-r,Math.min(1+r,n[1])),n[3]=Math.max(-r,Math.min(1+r,n[3])),n},t.handleStartHandleStartMoving=function(e){var r=t.state,n=r.value;if(!r.movingStartHandle){e.preventDefault();var i=0,a=0;if("touchstart"===e.type){var u=e;i=u.touches[0].screenX,a=u.touches[0].screenY}else if("mousedown"===e.type){var s=e;i=s.screenX,a=s.screenY}t.setState({startValue:o(n),movingStartHandle:!0,movingStartHandleStart:{x:i,y:a}})}},t.handleEndHandleStartMoving=function(e){var r=t.state,n=r.value;if(!r.movingEndHandle){e.preventDefault();var i=0,a=0;if("touchstart"===e.type){var u=e;i=u.touches[0].screenX,a=u.touches[0].screenY}else if("mousedown"===e.type){var s=e;i=s.screenX,a=s.screenY}t.setState({startValue:o(n),movingEndHandle:!0,movingEndHandleStart:{x:i,y:a}})}},t.handleWindowTouchMove=function(e){var r=t.state,n=r.movingStartHandle,o=r.movingEndHandle;if(n||o){var i=e.touches[0].screenX,a=e.touches[0].screenY;t.moveHandles(i,a)}},t.handleWindowMouseMove=function(e){var r=t.state,n=r.movingStartHandle,o=r.movingEndHandle;if(n||o){var i=e.screenX,a=e.screenY;t.moveHandles(i,a)}},void 0!==e.value&&(t.state=Object.assign(Object.assign({},w),{value:e.value})),t}return t=h,i=[{key:"getDerivedStateFromProps",value:function(e,t){var r=e.value;return void 0!==r?{value:r}:null}}],(r=[{key:"width",get:function(){return this.props.size}},{key:"height",get:function(){return this.width}},{key:"startCoordinate",get:function(){return[0,this.height]}},{key:"endCoordinate",get:function(){return[this.width,0]}},{key:"startBezierHandle",get:function(){var e=this.state.value;return[this.width*e[0],this.height*(1-e[1])]}},{key:"endBezierHandle",get:function(){var e=this.state.value;return[this.width*e[2],this.height*(1-e[3])]}},{key:"componentWillUnmount",value:function(){window.removeEventListener("mousemove",this.handleWindowMouseMove),window.removeEventListener("touchmove",this.handleWindowTouchMove),window.removeEventListener("mouseup",this.stopMovingAll),window.removeEventListener("touchend",this.stopMovingAll),window.removeEventListener("mouseleave",this.stopMovingAll),window.removeEventListener("touchcancel",this.stopMovingAll)}},{key:"componentDidMount",value:function(){window.addEventListener("mousemove",this.handleWindowMouseMove),window.addEventListener("touchmove",this.handleWindowTouchMove),window.addEventListener("mouseup",this.stopMovingAll),window.addEventListener("touchend",this.stopMovingAll),window.addEventListener("mouseleave",this.stopMovingAll),window.addEventListener("touchcancel",this.stopMovingAll)}},{key:"render",value:function(){var e,t,r,o,i,a=this.props,u=a.strokeWidth,s=a.rowColor,l=a.outerAreaColor,d=a.innerAreaColor,f=a.fixedHandleColor,p=a.curveLineColor,h=a.handleLineColor,_=a.outerAreaSize,w=a.startHandleColor,E=a.endHandleColor,x=a.className,S=a.startHandleClassName,C=a.startHandleActiveClassName,k=a.endHandleClassName,B=a.endHandleActiveClassName,H=this.state,z=H.movingStartHandle,M=H.movingEndHandle,j=this.width+2*u,O=this.height+2*u+2*_;return c.exports.createElement("div",{className:g((e={},n(e,"BezierCurveEditor_root__-nrie",!0),n(e,x,!!x),e))},c.exports.createElement("div",{className:"BezierCurveEditor_wrap__e8IBW"},c.exports.createElement("div",{className:"BezierCurveEditor_bg__b-2qB",style:{left:"".concat(u,"px"),width:"".concat(this.width-u,"px"),backgroundColor:l}}),c.exports.createElement("div",{className:"BezierCurveEditor_plane__NgkX1",style:{top:"".concat(_+u,"px"),left:"".concat(u,"px"),width:"".concat(this.width-u,"px"),height:"".concat(this.height,"px")}},c.exports.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},c.exports.createElement("rect",{width:"100",height:"101",fill:d||"white"}),c.exports.createElement("g",{fill:s||"#f2f2f2"},c.exports.createElement("rect",{width:"100",height:"5"}),c.exports.createElement("rect",{y:"10",width:"100",height:"5"}),c.exports.createElement("rect",{y:"20",width:"100",height:"5"}),c.exports.createElement("rect",{y:"30",width:"100",height:"5"}),c.exports.createElement("rect",{y:"40",width:"100",height:"5"}),c.exports.createElement("rect",{y:"50",width:"100",height:"5"}),c.exports.createElement("rect",{y:"60",width:"100",height:"5"}),c.exports.createElement("rect",{y:"70",width:"100",height:"5"}),c.exports.createElement("rect",{y:"80",width:"100",height:"5"}),c.exports.createElement("rect",{y:"90",width:"100",height:"5"})))),c.exports.createElement("svg",{className:"BezierCurveEditor_curve__3qOlz",fill:"none",width:j,height:O,viewBox:"0 0 ".concat(j," ").concat(O)},c.exports.createElement("g",{transform:"translate(".concat(u,", ").concat(_+u,")")},c.exports.createElement("line",{stroke:h||v,strokeWidth:"1",strokeLinecap:"round",x1:this.startCoordinate[0],y1:this.startCoordinate[1],x2:this.startBezierHandle[0],y2:this.startBezierHandle[1]}),c.exports.createElement("line",{stroke:h||v,strokeWidth:"1",strokeLinecap:"round",x1:this.endCoordinate[0],y1:this.endCoordinate[1],x2:this.endBezierHandle[0],y2:this.endBezierHandle[1]}),c.exports.createElement("path",{stroke:p||"black",strokeWidth:u,strokeLinecap:"round",d:"M".concat(this.startCoordinate," C").concat(this.startBezierHandle," ").concat(this.endBezierHandle," ").concat(this.endCoordinate)}))),c.exports.createElement("span",{className:g((t={},n(t,y,!0),n(t,b,!0),t)),style:{top:"".concat(this.startCoordinate[1]+_+u,"px"),left:"".concat(this.startCoordinate[0]+u,"px"),borderColor:h,backgroundColor:f}}),c.exports.createElement("span",{className:g((r={},n(r,y,!0),n(r,b,!0),r)),style:{top:"".concat(this.endCoordinate[1]+_+u,"px"),left:"".concat(this.endCoordinate[0]+u,"px"),borderColor:h,backgroundColor:f}}),c.exports.createElement("button",{type:"button",className:g((o={},n(o,y,!0),n(o,"BezierCurveEditor_start__X2msh",!0),n(o,S,!!S),n(o,m,z),n(o,C,!!C&&z),o)),style:{top:"".concat(this.startBezierHandle[1]+_+u,"px"),left:"".concat(this.startBezierHandle[0]+u,"px"),color:w,backgroundColor:w},onMouseDown:this.handleStartHandleStartMoving,onTouchStart:this.handleStartHandleStartMoving}),c.exports.createElement("button",{type:"button",className:g((i={},n(i,y,!0),n(i,"BezierCurveEditor_end__pWblg",!0),n(i,k,!!k),n(i,m,M),n(i,B,!!B&&M),i)),style:{top:"".concat(this.endBezierHandle[1]+_+u,"px"),left:"".concat(this.endBezierHandle[0]+u,"px"),color:E,backgroundColor:E},onMouseDown:this.handleEndHandleStartMoving,onTouchStart:this.handleEndHandleStartMoving})))}}])&&a(t.prototype,r),i&&a(t,i),Object.defineProperty(t,"prototype",{writable:!1}),h}(c.exports.Component);E.defaultProps={size:200,outerAreaSize:50,strokeWidth:2},t.BezierCurveEditor=E})(),e})()));