@react-goodies/hand-signed/docs/main.2f833466.iframe.bundle.js

[](https://github.com/marborkowski/hand-signed/actions/workflows/node.js.yml)

(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("./node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("./node_modules/@storybook/client-api/dist/esm/ClientApi.js"),esm=__webpack_require__("./node_modules/@storybook/client-logger/dist/esm/index.js"),parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{expanded:!0,matchers:{color:/(background|color)$/i,date:/Date$/}},options:{storySort:{order:["Hand-Signed",["Introduction","Example","License"]]}}};function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(ClientApi.d)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.e)(loader,!1)}));case"parameters":return Object(ClientApi.f)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.b)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.c)(enhancer)}));case"render":return Object(ClientApi.g)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(ClientApi.f)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./generated-stories-entry.js":function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"),__webpack_require__("./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$")],module,!1)}).call(this,__webpack_require__("./node_modules/webpack/buildin/module.js")(module))},"./node_modules/css-loader/dist/cjs.js?!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!./src/stories/styles.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,"button {\n  padding: 10px 15px;\n  border: 1px solid #999;\n  color: #333;\n  background: #fff;\n  border-radius: 5px;\n  text-transform: uppercase;\n  font-size: 11px;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background: lightskyblue;\n}\n\nbutton:not(:last-child) {\n  margin-right: 1ch;\n}\n\n.buttons {\n  margin-top: 1rem;\n}\n",""]),module.exports=exports},"./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$":function(module,exports,__webpack_require__){var map={"./stories/HandSigned.stories.tsx":"./src/stories/HandSigned.stories.tsx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},"./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$":function(module,exports,__webpack_require__){var map={"./stories/Introduction.stories.mdx":"./src/stories/Introduction.stories.mdx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./src/stories/HandSigned.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Primary",(function(){return Primary}));__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@storybook/addon-actions/dist/esm/index.js"),chroma=(__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("./node_modules/chroma-js/chroma.js")),chroma_default=__webpack_require__.n(chroma),generatorInstance=(__webpack_require__("./node_modules/core-js/modules/web.timers.js"),null),genNext=function genNext(){var _generatorInstance;return null===(_generatorInstance=generatorInstance)||void 0===_generatorInstance?void 0:_generatorInstance.next()},sinusWaveY=function sinusWaveY(){var index=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,height=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,amplitude=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,frequency=arguments.length>3&&void 0!==arguments[3]?arguments[3]:10;return isNaN(index)?0:Math.abs(height/2+amplitude*Math.sin(index/frequency)-0)},getCoordinatesFromEvent=function getCoordinatesFromEvent(event){var changedTouches=event.changedTouches,rect=event.target.getBoundingClientRect();return changedTouches?{x:changedTouches[0].clientX-rect.left,y:changedTouches[0].clientY-rect.top}:{x:event.clientX-rect.left,y:event.clientY-rect.top}},animateInitialData=regeneratorRuntime.mark((function animateInitialData(context,initial,color){var index,item,next,prev;return regeneratorRuntime.wrap((function animateInitialData$(_context){for(;;)switch(_context.prev=_context.next){case 0:index=0;case 1:if(!(index<initial.length)){_context.next=10;break}return 0===index&&(context.beginPath(),context.moveTo(initial[0].x,initial[0].y)),(item=initial[index])?(context.lineTo(item.x,item.y),context.strokeStyle=color,context.stroke()):(next=initial[index+1],prev=initial[index-1],next?(context.beginPath(),context.moveTo(next.x,next.y)):(context.beginPath(),context.moveTo(prev.x,prev.y))),setTimeout((function(){generatorInstance&&window.requestAnimationFrame(genNext)}),10+sinusWaveY(index)),_context.next=8,index++;case 8:_context.next=1;break;case 10:case"end":return _context.stop()}}),animateInitialData)})),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["color","initialData","width","height"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var HandSigned=react.forwardRef((function(_ref,ref){var _ref$color=_ref.color,color=void 0===_ref$color?"#000000":_ref$color,_ref$initialData=_ref.initialData,initialData=void 0===_ref$initialData?[]:_ref$initialData,_ref$width=_ref.width,width=void 0===_ref$width?"700":_ref$width,_ref$height=_ref.height,height=void 0===_ref$height?"300":_ref$height,props=_objectWithoutProperties(_ref,_excluded),internalRef=react.useRef(null),_React$useState2=_slicedToArray(react.useState(initialData||[]),2),raw=_React$useState2[0],setRaw=_React$useState2[1],_React$useState4=_slicedToArray(react.useState(!1),2),isDrawing=_React$useState4[0],setIsDrawing=_React$useState4[1],_React$useState6=_slicedToArray(react.useState(null),2),context=_React$useState6[0],setContext=_React$useState6[1],handleMouseDown=function handleMouseDown(event){if(context){var _getCoordinatesFromEv=getCoordinatesFromEvent(event),x=_getCoordinatesFromEv.x,y=_getCoordinatesFromEv.y;context.beginPath(),context.moveTo(x,y),setIsDrawing(!0)}},handleMouseMove=function handleMouseMove(event){if(context&&isDrawing){var _getCoordinatesFromEv2=getCoordinatesFromEvent(event),x=_getCoordinatesFromEv2.x,y=_getCoordinatesFromEv2.y;context.lineTo(x,y),context.strokeStyle=color,context.stroke(),raw.push({x:x,y:y}),setRaw(raw)}},handleMouseUp=function handleMouseUp(event){if(context&&isDrawing){var _getCoordinatesFromEv3=getCoordinatesFromEvent(event),x=_getCoordinatesFromEv3.x,y=_getCoordinatesFromEv3.y;context.lineTo(x,y),context.strokeStyle=color,context.stroke(),raw.push(null),setRaw(raw),setIsDrawing(!1)}};react.useImperativeHandle(ref,(function(){return{internalRef:internalRef,getRawData:function getRawData(){return raw.filter((function(_,index){return index<raw.length-1}))},clear:function clear(){context&&(setRaw([]),context.clearRect(0,0,context.canvas.width,context.canvas.height))},getDataURL:function getDataURL(){return context?context.canvas.toDataURL("image/png"):""}}}));return react.useEffect((function(){!function init(){var current=internalRef.current;if(current){var _context=current.getContext("2d");if(_context){var rgbColor=chroma_default()(color).rgb();_context.shadowColor="rgba("+rgbColor[0]+", "+rgbColor[1]+", "+rgbColor[2]+", .5)",_context.shadowBlur=1.5,_context.lineCap="round",_context.lineJoin="round",_context.lineWidth=1,setContext(_context)}}}()}),[]),react.useEffect((function(){context&&function initAnimation(context,initial,color){(generatorInstance=animateInitialData(context,initial,color)).next()}(context,initialData,color)}),[context]),Object(jsx_runtime.jsx)("canvas",Object.assign({},props,{width:width,height:height,ref:internalRef,onMouseDown:handleMouseDown,onTouchStart:handleMouseDown,onMouseMove:handleMouseMove,onTouchMove:handleMouseMove,onMouseUp:handleMouseUp,onMouseOut:handleMouseUp,onTouchEnd:handleMouseUp}))}));try{HandSigned.displayName="HandSigned",HandSigned.__docgenInfo={description:"",displayName:"HandSigned",props:{initialData:{defaultValue:{value:"[]"},description:"",name:"initialData",required:!1,type:{name:"CoordinatesType[]"}},color:{defaultValue:{value:"#000000"},description:"",name:"color",required:!1,type:{name:"string"}},width:{defaultValue:{value:"700"},description:"",name:"width",required:!1,type:{name:"string"}},height:{defaultValue:{value:"300"},description:"",name:"height",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/HandSigned.tsx#HandSigned"]={docgenInfo:HandSigned.__docgenInfo,name:"HandSigned",path:"src/HandSigned.tsx#HandSigned"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__("./src/stories/styles.css"),__webpack_exports__.default={title:"Hand-Signed/Example",component:HandSigned,argTypes:{initialData:{description:"overwritten description",defaultValue:[{x:78,y:212},{x:78,y:213},{x:78,y:214},{x:78,y:216},{x:79,y:218},{x:81,y:221},{x:84,y:223},{x:89,y:225},{x:96,y:227},{x:104,y:228},{x:116,y:229},{x:129,y:229},{x:141,y:229},{x:153,y:226},{x:162,y:221},{x:169,y:214},{x:175,y:205},{x:180,y:195},{x:183,y:185},{x:184,y:177},{x:184,y:171},{x:183,y:166},{x:181,y:163},{x:177,y:161},{x:172,y:161},{x:167,y:161},{x:162,y:163},{x:157,y:167},{x:154,y:171},{x:151,y:176},{x:150,y:180},{x:150,y:186},{x:151,y:191},{x:154,y:195},{x:160,y:199},{x:167,y:203},{x:176,y:205},{x:186,y:205},{x:197,y:206},{x:210,y:205},{x:223,y:202},{x:237,y:196},{x:249,y:189},{x:259,y:181},{x:268,y:172},{x:274,y:161},{x:279,y:150},{x:283,y:140},{x:284,y:133},{x:285,y:127},{x:286,y:125},{x:286,y:124},{x:285,y:124},{x:282,y:125},{x:277,y:127},{x:272,y:130},{x:267,y:135},{x:263,y:139},{x:260,y:145},{x:258,y:151},{x:258,y:156},{x:260,y:163},{x:265,y:169},{x:274,y:173},{x:287,y:175},{x:301,y:175},{x:316,y:170},{x:333,y:157},{x:348,y:139},{x:361,y:122},{x:360,y:122},{x:370,y:105},{x:378,y:91},{x:383,y:81},{x:385,y:75},{x:387,y:72},{x:388,y:71},{x:388,y:70},{x:388,y:70},{x:389,y:70},{x:390,y:70},{x:394,y:70},{x:404,y:72},{x:419,y:76},{x:440,y:85},{x:463,y:96},{x:484,y:108},{x:501,y:119},{x:515,y:130},{x:527,y:141},{x:534,y:153},{x:536,y:167},{x:531,y:184},{x:515,y:208},{x:487,y:241},{x:455,y:275},{x:427,y:304},{x:404,y:330},{x:384,y:352},{x:369,y:368},{x:355,y:381},{x:345,y:388},{x:339,y:392},{x:335,y:394},{x:334,y:394},{x:333,y:394},{x:334,y:393},{x:336,y:391},{x:341,y:389},{x:347,y:389},{x:354,y:391},{x:362,y:397},{x:372,y:406},{x:381,y:416},{x:389,y:424},{x:397,y:430},{x:406,y:433},{x:417,y:434},{x:429,y:429},{x:440,y:421},{x:451,y:411},{x:462,y:403},{x:469,y:398},{x:472,y:396},{x:475,y:395},{x:476,y:394},{x:476,y:394},{x:476,y:394},{x:476,y:394},{x:478,y:393},{x:480,y:389},{x:484,y:385},{x:487,y:380},{x:489,y:377},{x:491,y:375},{x:493,y:376},{x:494,y:382},{x:495,y:392},{x:496,y:403},{x:497,y:412},{x:497,y:417},{x:497,y:419},{x:497,y:420},{x:497,y:419},{x:497,y:417},{x:497,y:415},{x:497,y:414},{x:497,y:414},{x:496,y:417},{x:494,y:421},{x:493,y:425},{x:492,y:427},{x:492,y:428},{x:492,y:428},{x:493,y:427},{x:495,y:425},{x:496,y:421},{x:496,y:419},{x:496,y:417},{x:496,y:417},{x:496,y:418},{x:496,y:418}],control:{type:null}}}};var Primary=function Template(args){var mainRef=react_default.a.useRef(null),showResponse=function showResponse(name,response){console.log(name,JSON.stringify(response)),Object(esm.action)(name||"")(response)};return Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)("div",{children:Object(jsx_runtime.jsx)(HandSigned,Object.assign({style:{border:"1px solid #ccc"}},args,{ref:mainRef}))}),Object(jsx_runtime.jsxs)("div",{className:"buttons",children:[Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return showResponse("data",mainRef.current.getRawData())},children:"get raw data"}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return mainRef.current.clear()},children:"clear"}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return showResponse("canvas",mainRef.current.getDataURL())},children:"get base64 image/png data"}),Object(jsx_runtime.jsx)("button",{onClick:function onClick(){return showResponse("ref",mainRef.current.internalRef)},children:"get ref"})]})]})}.bind({});Primary.parameters=Object.assign({storySource:{source:'(args) => {\n  const mainRef = React.useRef(null);\n\n  const showResponse = (name, response) => {\n    console.log(name, JSON.stringify(response));\n    action(name || "")(response);\n  };\n\n  return (\n    <>\n      <div>\n        <HandSigned\n          style={{ border: "1px solid #ccc" }}\n          {...args}\n          ref={mainRef}\n        />\n      </div>\n      <div className="buttons">\n        <button\n          onClick={() => showResponse("data", mainRef.current.getRawData())}\n        >\n          get raw data\n        </button>\n        <button onClick={() => mainRef.current.clear()}>clear</button>\n        <button\n          onClick={() => showResponse("canvas", mainRef.current.getDataURL())}\n        >\n          get base64 image/png data\n        </button>\n\n        <button\n          onClick={() => showResponse("ref", mainRef.current.internalRef)}\n        >\n          get ref\n        </button>\n      </div>\n    </>\n  );\n}'}},Primary.parameters)},"./src/stories/Introduction.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_assets_logo_svg__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/stories/assets/logo.svg"),_assets_logo_svg__WEBPACK_IMPORTED_MODULE_7___default=__webpack_require__.n(_assets_logo_svg__WEBPACK_IMPORTED_MODULE_7__),_excluded=["components"];function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.b,{title:"Hand-Written/Introduction",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:_assets_logo_svg__WEBPACK_IMPORTED_MODULE_7___default.a,alt:"Hand-Signed"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"HandSigned")," is a react component that allows you to easily expose a manual signature interface in your web application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"This library uses the classic canvas element to render the signature."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can even use ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"ref")," property to execute internal methods of the component like ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"clear"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"getDataURL"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"getRawData"),". You can also read the original canvas element reference if you need."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"browsers-support"},"Browsers support"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",{id:"compatibility"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("table",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("thead",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("tr",{parentName:"thead"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("th",{parentName:"tr",align:null},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"th",href:"http://godban.github.io/browsers-support-badges/",target:"_blank",rel:"nofollow noopener noreferrer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png",alt:"IE / Edge",width:"24px",height:"24px"})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),"IE / Edge"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("th",{parentName:"tr",align:null},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"th",href:"http://godban.github.io/browsers-support-badges/",target:"_blank",rel:"nofollow noopener noreferrer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png",alt:"Firefox",width:"24px",height:"24px"})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),"Firefox"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("th",{parentName:"tr",align:null},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"th",href:"http://godban.github.io/browsers-support-badges/",target:"_blank",rel:"nofollow noopener noreferrer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png",alt:"Chrome",width:"24px",height:"24px"})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),"Chrome"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("th",{parentName:"tr",align:null},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"th",href:"http://godban.github.io/browsers-support-badges/",target:"_blank",rel:"nofollow noopener noreferrer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png",alt:"Safari",width:"24px",height:"24px"})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),"Safari"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("th",{parentName:"tr",align:null},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"th",href:"http://godban.github.io/browsers-support-badges/",target:"_blank",rel:"nofollow noopener noreferrer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png",alt:"iOS Safari",width:"24px",height:"24px"})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),"iOS Safari"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("th",{parentName:"tr",align:null},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"th",href:"http://godban.github.io/browsers-support-badges/",target:"_blank",rel:"nofollow noopener noreferrer"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png",alt:"Opera",width:"24px",height:"24px"})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",null),"Opera"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("tbody",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("td",{parentName:"tr",align:null},"IE11, Edge >= 80"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("td",{parentName:"tr",align:null},">= 55"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("td",{parentName:"tr",align:null},">= 55"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("td",{parentName:"tr",align:null},">= 12.1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("td",{parentName:"tr",align:null},">= 12.1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("td",{parentName:"tr",align:null},">= 40")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"installation"},"Installation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"YARN")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre",className:"language-shell"},"yarn add @react-goodies/hand-signed\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"NPM")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre",className:"language-shell"},"npm install @react-goodies/hand-signed --save\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"basic-implementation"},"Basic implementation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre",className:"language-jsx"},'import React from "react";\nimport { HandSigned } from "@react-goodies/hand-signed";\n\nconst initialData = [\n  { x: 275, y: 143 },\n  { x: 276, y: 143 },\n  { x: 276, y: 143 },\n  { x: 277, y: 143 },\n  { x: 277, y: 142 },\n  { x: 278, y: 142 },\n  { x: 279, y: 141 },\n  { x: 280, y: 141 },\n  { x: 281, y: 140 },\n  { x: 282, y: 139 },\n  { x: 283, y: 139 },\n  { x: 283, y: 138 },\n  { x: 284, y: 138 },\n  { x: 284, y: 138 },\n  { x: 285, y: 138 },\n];\n\nconst App = () => {\n  const mainRef = React.useRef(null);\n\n  return (\n    <>\n      <div>\n        <HandSigned\n          style={{ border: "1px solid #ccc" }}\n          initialData={initialData}\n          color="#000000"\n          width="700"\n          height="300"\n          ref={mainRef}\n        />\n      </div>\n      <div className="buttons">\n        <button\n          onClick={() => console.log("data", mainRef.current.getRawData())}\n        >\n          Get raw data\n        </button>\n        <button onClick={() => mainRef.current.clear()}>clear</button>\n        <button\n          onClick={() => console.log("canvas", mainRef.current.getDataURL())}\n        >\n          Get base64 image/png data\n        </button>\n\n        <button onClick={() => console.log("ref", mainRef.current.internalRef)}>\n          Get ref\n        </button>\n      </div>\n    </>\n  );\n};\n\nexport default App;\n')))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Hand-Written/Introduction",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/stories/assets/logo.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/logo.4014d92d.svg"},"./src/stories/styles.css":function(module,exports,__webpack_require__){var api=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("./node_modules/css-loader/dist/cjs.js?!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!./src/stories/styles.css");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js")},0:function(module,exports,__webpack_require__){__webpack_require__("./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("./node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js"),__webpack_require__("./node_modules/@storybook/addon-interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){}},[[0,4,5]]]);