react-native-drawing
Version:
A React Native library that provides a canvas to perform drawing actions
2 lines • 196 kB
JSON
{
"html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script type=\"module\">\n var Af=Object.defineProperty;var Ys=e=>{throw TypeError(e)};var Uf=(e,t,n)=>t in e?Af(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var y=(e,t,n)=>Uf(e,typeof t!=\"symbol\"?t+\"\":t,n),Ks=(e,t,n)=>t.has(e)||Ys(\"Cannot \"+n);var _=(e,t,n)=>(Ks(e,t,\"read from private field\"),n?n.call(e):t.get(e)),U=(e,t,n)=>t.has(e)?Ys(\"Cannot add the same private member more than once\"):t instanceof WeakSet?t.add(e):t.set(e,n),I=(e,t,n,r)=>(Ks(e,t,\"write to private field\"),r?r.call(e,n):t.set(e,n),n);var Kr=(e,t,n,r)=>({set _(l){I(e,t,l,n)},get _(){return _(e,t,r)}});(function(){const t=document.createElement(\"link\").relList;if(t&&t.supports&&t.supports(\"modulepreload\"))return;for(const l of document.querySelectorAll('link[rel=\"modulepreload\"]'))r(l);new MutationObserver(l=>{for(const i of l)if(i.type===\"childList\")for(const o of i.addedNodes)o.tagName===\"LINK\"&&o.rel===\"modulepreload\"&&r(o)}).observe(document,{childList:!0,subtree:!0});function n(l){const i={};return l.integrity&&(i.integrity=l.integrity),l.referrerPolicy&&(i.referrerPolicy=l.referrerPolicy),l.crossOrigin===\"use-credentials\"?i.credentials=\"include\":l.crossOrigin===\"anonymous\"?i.credentials=\"omit\":i.credentials=\"same-origin\",i}function r(l){if(l.ep)return;l.ep=!0;const i=n(l);fetch(l.href,i)}})();var da={exports:{}},ql={},ha={exports:{}},z={};/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */var Hr=Symbol.for(\"react.element\"),jf=Symbol.for(\"react.portal\"),Hf=Symbol.for(\"react.fragment\"),$f=Symbol.for(\"react.strict_mode\"),Bf=Symbol.for(\"react.profiler\"),Vf=Symbol.for(\"react.provider\"),Wf=Symbol.for(\"react.context\"),Qf=Symbol.for(\"react.forward_ref\"),Yf=Symbol.for(\"react.suspense\"),Kf=Symbol.for(\"react.memo\"),Gf=Symbol.for(\"react.lazy\"),Gs=Symbol.iterator;function Xf(e){return e===null||typeof e!=\"object\"?null:(e=Gs&&e[Gs]||e[\"@@iterator\"],typeof e==\"function\"?e:null)}var pa={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},ma=Object.assign,va={};function Hn(e,t,n){this.props=e,this.context=t,this.refs=va,this.updater=n||pa}Hn.prototype.isReactComponent={};Hn.prototype.setState=function(e,t){if(typeof e!=\"object\"&&typeof e!=\"function\"&&e!=null)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\")};Hn.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,\"forceUpdate\")};function ga(){}ga.prototype=Hn.prototype;function Vo(e,t,n){this.props=e,this.context=t,this.refs=va,this.updater=n||pa}var Wo=Vo.prototype=new ga;Wo.constructor=Vo;ma(Wo,Hn.prototype);Wo.isPureReactComponent=!0;var Xs=Array.isArray,ya=Object.prototype.hasOwnProperty,Qo={current:null},wa={key:!0,ref:!0,__self:!0,__source:!0};function Sa(e,t,n){var r,l={},i=null,o=null;if(t!=null)for(r in t.ref!==void 0&&(o=t.ref),t.key!==void 0&&(i=\"\"+t.key),t)ya.call(t,r)&&!wa.hasOwnProperty(r)&&(l[r]=t[r]);var s=arguments.length-2;if(s===1)l.children=n;else if(1<s){for(var u=Array(s),a=0;a<s;a++)u[a]=arguments[a+2];l.children=u}if(e&&e.defaultProps)for(r in s=e.defaultProps,s)l[r]===void 0&&(l[r]=s[r]);return{$$typeof:Hr,type:e,key:i,ref:o,props:l,_owner:Qo.current}}function Zf(e,t){return{$$typeof:Hr,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}function Yo(e){return typeof e==\"object\"&&e!==null&&e.$$typeof===Hr}function Jf(e){var t={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+e.replace(/[=:]/g,function(n){return t[n]})}var Zs=/\\/+/g;function gi(e,t){return typeof e==\"object\"&&e!==null&&e.key!=null?Jf(\"\"+e.key):t.toString(36)}function fl(e,t,n,r,l){var i=typeof e;(i===\"undefined\"||i===\"boolean\")&&(e=null);var o=!1;if(e===null)o=!0;else switch(i){case\"string\":case\"number\":o=!0;break;case\"object\":switch(e.$$typeof){case Hr:case jf:o=!0}}if(o)return o=e,l=l(o),e=r===\"\"?\".\"+gi(o,0):r,Xs(l)?(n=\"\",e!=null&&(n=e.replace(Zs,\"$&/\")+\"/\"),fl(l,t,n,\"\",function(a){return a})):l!=null&&(Yo(l)&&(l=Zf(l,n+(!l.key||o&&o.key===l.key?\"\":(\"\"+l.key).replace(Zs,\"$&/\")+\"/\")+e)),t.push(l)),1;if(o=0,r=r===\"\"?\".\":r+\":\",Xs(e))for(var s=0;s<e.length;s++){i=e[s];var u=r+gi(i,s);o+=fl(i,t,n,u,l)}else if(u=Xf(e),typeof u==\"function\")for(e=u.call(e),s=0;!(i=e.next()).done;)i=i.value,u=r+gi(i,s++),o+=fl(i,t,n,u,l);else if(i===\"object\")throw t=String(e),Error(\"Objects are not valid as a React child (found: \"+(t===\"[object Object]\"?\"object with keys {\"+Object.keys(e).join(\", \")+\"}\":t)+\"). If you meant to render a collection of children, use an array instead.\");return o}function Gr(e,t,n){if(e==null)return e;var r=[],l=0;return fl(e,r,\"\",\"\",function(i){return t.call(n,i,l++)}),r}function qf(e){if(e._status===-1){var t=e._result;t=t(),t.then(function(n){(e._status===0||e._status===-1)&&(e._status=1,e._result=n)},function(n){(e._status===0||e._status===-1)&&(e._status=2,e._result=n)}),e._status===-1&&(e._status=0,e._result=t)}if(e._status===1)return e._result.default;throw e._result}var fe={current:null},dl={transition:null},bf={ReactCurrentDispatcher:fe,ReactCurrentBatchConfig:dl,ReactCurrentOwner:Qo};function ka(){throw Error(\"act(...) is not supported in production builds of React.\")}z.Children={map:Gr,forEach:function(e,t,n){Gr(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return Gr(e,function(){t++}),t},toArray:function(e){return Gr(e,function(t){return t})||[]},only:function(e){if(!Yo(e))throw Error(\"React.Children.only expected to receive a single React element child.\");return e}};z.Component=Hn;z.Fragment=Hf;z.Profiler=Bf;z.PureComponent=Vo;z.StrictMode=$f;z.Suspense=Yf;z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=bf;z.act=ka;z.cloneElement=function(e,t,n){if(e==null)throw Error(\"React.cloneElement(...): The argument must be a React element, but you passed \"+e+\".\");var r=ma({},e.props),l=e.key,i=e.ref,o=e._owner;if(t!=null){if(t.ref!==void 0&&(i=t.ref,o=Qo.current),t.key!==void 0&&(l=\"\"+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(u in t)ya.call(t,u)&&!wa.hasOwnProperty(u)&&(r[u]=t[u]===void 0&&s!==void 0?s[u]:t[u])}var u=arguments.length-2;if(u===1)r.children=n;else if(1<u){s=Array(u);for(var a=0;a<u;a++)s[a]=arguments[a+2];r.children=s}return{$$typeof:Hr,type:e.type,key:l,ref:i,props:r,_owner:o}};z.createContext=function(e){return e={$$typeof:Wf,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null},e.Provider={$$typeof:Vf,_context:e},e.Consumer=e};z.createElement=Sa;z.createFactory=function(e){var t=Sa.bind(null,e);return t.type=e,t};z.createRef=function(){return{current:null}};z.forwardRef=function(e){return{$$typeof:Qf,render:e}};z.isValidElement=Yo;z.lazy=function(e){return{$$typeof:Gf,_payload:{_status:-1,_result:e},_init:qf}};z.memo=function(e,t){return{$$typeof:Kf,type:e,compare:t===void 0?null:t}};z.startTransition=function(e){var t=dl.transition;dl.transition={};try{e()}finally{dl.transition=t}};z.unstable_act=ka;z.useCallback=function(e,t){return fe.current.useCallback(e,t)};z.useContext=function(e){return fe.current.useContext(e)};z.useDebugValue=function(){};z.useDeferredValue=function(e){return fe.current.useDeferredValue(e)};z.useEffect=function(e,t){return fe.current.useEffect(e,t)};z.useId=function(){return fe.current.useId()};z.useImperativeHandle=function(e,t,n){return fe.current.useImperativeHandle(e,t,n)};z.useInsertionEffect=function(e,t){return fe.current.useInsertionEffect(e,t)};z.useLayoutEffect=function(e,t){return fe.current.useLayoutEffect(e,t)};z.useMemo=function(e,t){return fe.current.useMemo(e,t)};z.useReducer=function(e,t,n){return fe.current.useReducer(e,t,n)};z.useRef=function(e){return fe.current.useRef(e)};z.useState=function(e){return fe.current.useState(e)};z.useSyncExternalStore=function(e,t,n){return fe.current.useSyncExternalStore(e,t,n)};z.useTransition=function(){return fe.current.useTransition()};z.version=\"18.3.1\";ha.exports=z;var x=ha.exports;/**\n * @license React\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */var ed=x,td=Symbol.for(\"react.element\"),nd=Symbol.for(\"react.fragment\"),rd=Object.prototype.hasOwnProperty,ld=ed.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,id={key:!0,ref:!0,__self:!0,__source:!0};function xa(e,t,n){var r,l={},i=null,o=null;n!==void 0&&(i=\"\"+n),t.key!==void 0&&(i=\"\"+t.key),t.ref!==void 0&&(o=t.ref);for(r in t)rd.call(t,r)&&!id.hasOwnProperty(r)&&(l[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps,t)l[r]===void 0&&(l[r]=t[r]);return{$$typeof:td,type:e,key:i,ref:o,props:l,_owner:ld.current}}ql.Fragment=nd;ql.jsx=xa;ql.jsxs=xa;da.exports=ql;var Qe=da.exports;function Js(e,t,n,r){const{width:l,height:i}=t,o=t.getContext(\"2d\");o.clearRect(0,0,l,i),n!==void 0&&r!==void 0?o.drawImage(e,0,0,n,r):o.drawImage(e,0,0)}function od(e,t,n){const{width:r,height:l}=e,i=r/l,o=t,s=t/n,u=new OffscreenCanvas(r,l);Js(e,u),e.width=o,e.height=s,Js(u,e,o,o/i)}function sd(e){const{resolution:t,aspectRatio:n,displayRef:r}=e;x.useEffect(()=>{const l=r.current;l!==null&&od(l,t,n)},[t,n,r])}const Ea=e=>{const{className:t=\"\",resolution:n,aspectRatio:r,onLoad:l,onCanvasCreate:i}=e,o=x.useRef(null);return sd({resolution:n,aspectRatio:r,displayRef:o}),x.useEffect(()=>{l(!1)},[l]),x.useEffect(()=>{const s=o.current;s!==null&&(i(s),l(!0))},[o,i]),Qe.jsx(\"canvas\",{ref:o,className:`canvas-display ${t}`})};var yn,wn;class ud{constructor(t,n){U(this,yn);U(this,wn);I(this,yn,t),I(this,wn,n)}fix(t){const n=t/this.layout*this.resolution;return Math.round(n)}toInternal(t,n){const r=this.fix(t),l=this.fix(n);return{x:r,y:l}}get layout(){return _(this,yn)}setLayout(t){I(this,yn,t)}get resolution(){return _(this,wn)}setResolution(t){I(this,wn,t)}}yn=new WeakMap,wn=new WeakMap;let Wt=class{prepareToUse(){}addStrokePoint(t,n,r,l){}endShapeStroke(t,n,r,l){}stopUsing(){}};var Sn,kn;class Ca extends Wt{constructor(n,r,l=!1){super();y(this,\"latestPoint\",null);U(this,Sn);U(this,kn);this.IS_SQUARE=l,I(this,Sn,n),I(this,kn,r)}addStrokePoint(n,r,l,i){this.latestPoint=`${n};${r}`,i.createDot(n,r,this.size,this.color,this.IS_SQUARE)}endShapeStroke(n,r,l,i){`${n};${r}`!==this.latestPoint&&i.createDot(n,r,this.size,this.color,this.IS_SQUARE),this.latestPoint=null}stopUsing(){this.latestPoint=null}get color(){return _(this,Sn)}setColor(n){I(this,Sn,n)}get size(){return _(this,kn)}setSize(n){I(this,kn,n)}}Sn=new WeakMap,kn=new WeakMap;class Pa extends Wt{constructor(){super(...arguments);y(this,\"strokeIndex\",{})}addStrokePoint(n,r,l,i){if(this.strokeIndex[l]===void 0){const o=this.createStroke(n,r,i);this.strokeIndex[l]=o,o.onStop(()=>delete this.strokeIndex[l])}else{const o=this.strokeIndex[l];this.updateProps(o),o.addPoint(n,r)}}endShapeStroke(n,r,l,i){this.addStrokePoint(n,r,l,i);const o=this.strokeIndex[l];o!==void 0&&o.stop()}stopUsing(){const n=Object.getOwnPropertySymbols(this.strokeIndex);for(const r of n)this.strokeIndex[r].stop()}}class ad extends Pa{constructor(n){super();y(this,\"props\");this.props={width:n}}createStroke(n,r,l){return l.createClearPath(n,r,{width:this.size})}updateProps(n){const{width:r}=n.currentProps;this.size!==r&&n.createSection({width:this.size})}get size(){return this.props.width}setSize(n){this.props.width=n}}class Ko extends Wt{constructor(t){super(),this.exposeColor=t}addStrokePoint(t,n,r,l){const{width:i,pixelList:o,colorChanels:s,maxChanel:u}=l.getBinaryData(),a=Ko.calcIndex(t,n,i)*s,h=o[a+0],p=o[a+1],m=o[a+2],w=o[a+3],S=Math.round(w/u*100)/100,k=`rgba( ${h}, ${p}, ${m}, ${S} )`;this.exposeColor(k)}static calcIndex(t,n,r){return t+r*n}}var xn,Dr,fa;let Vi=(fa=class extends Wt{constructor(n,r,l){super();y(this,\"onfinish\",null);y(this,\"onstarteachtask\",null);U(this,xn);U(this,Dr,!1);this.fillerQueue=r,this.filterColor=l,I(this,xn,this.filterColor(n)),this.fillerQueue.onfinish=i=>this.handleFinish(i),this.fillerQueue.onstarteachtask=i=>this.handleStartEachTask(i)}handleFinish(n){this.onfinish!==null&&this.onfinish(n)}handleStartEachTask(n){this.onstarteachtask!==null&&this.onstarteachtask(n)}async addStrokePoint(n,r,l,i){const{color:o,animatedFiller:s}=this;this.fillerQueue.enqueueTask({x:n,y:r,color:o,animatedFiller:s,scene:i})}stopUsing(){this.fillerQueue.stopTasks()}setColor(n){const r=this.filterColor(n);I(this,xn,r)}get color(){return _(this,xn)}get isWorking(){return this.fillerQueue.isConsuming}get animatedFiller(){return _(this,Dr)}setAnimatedFiller(n){I(this,Dr,n)}},xn=new WeakMap,Dr=new WeakMap,fa);class cd extends Wt{}class fd extends Pa{constructor(n,r,l){super();y(this,\"props\");this.filterColor=l;const i=this.filterColor(n);this.props={color:i,width:r}}createStroke(n,r,l){return l.createStroke(n,r,{color:this.color,width:this.size})}updateProps(n){const{color:r,width:l}=n.currentProps;(this.color!==r||this.size!==l)&&n.createSection({color:this.color,width:this.size})}get color(){return this.props.color}setColor(n){const r=this.filterColor(n);this.props.color=r}get size(){return this.props.width}setSize(n){this.props.width=n}}var En,Cn,Pn,Rn;class dd extends Wt{constructor(n,r,l,i){super();U(this,En);U(this,Cn);U(this,Pn);U(this,Rn);I(this,En,n),I(this,Cn,r),I(this,Pn,l),I(this,Rn,i)}calcParticleSize(n,r){const l=Math.min(n,r);return Math.round(l/200*this.particlesScale)}genNumInRange(n,r){const l=r-n;return n+Math.random()*l}getRandomPixelAround(n){const r=n.x-this.size,l=n.x+this.size,i=n.y-this.size,o=n.y+this.size,s=this.genNumInRange(r,l),u=this.genNumInRange(i,o);return{x:s,y:u}}addStrokePoint(n,r,l,i){const{width:o,height:s}=i,u=this.calcParticleSize(o,s),a={x:n,y:r};for(let h=0;h<this.particlesAmount;h++){const p=this.getRandomPixelAround(a);i.createDot(p.x,p.y,u,this.color,!0)}}get color(){return _(this,En)}setColor(n){I(this,En,n)}get size(){return _(this,Cn)}setSize(n){I(this,Cn,n)}get particlesAmount(){return _(this,Pn)}setParticlesAmount(n){I(this,Pn,n)}get particlesScale(){return _(this,Rn)}setParticlesScale(n){I(this,Rn,n)}}En=new WeakMap,Cn=new WeakMap,Pn=new WeakMap,Rn=new WeakMap;class hd extends Ca{constructor(t,n){super(t,n,!0)}}var Or,Ln;const Gl=class Gl extends Wt{constructor(n,r,l){super();y(this,\"latestPixelIndex\",{});U(this,Or);U(this,Ln);this.fadeColor=l,this.color=n,I(this,Ln,r)}addStrokePoint(n,r,l,i){const o=this.latestPixelIndex[l],s=[n,r];this.latestPixelIndex[l]=s,o!==void 0&&i.printLine(this.color,this.size,o,s)}endShapeStroke(n,r,l,i){const[o,s]=this.latestPixelIndex[l]??[];o===void 0||s===void 0||((o!==n||s!==r)&&i.printLine(this.color,this.size,[o,s],[n,r]),delete this.latestPixelIndex[l])}get color(){return _(this,Or)}set color(n){const r=this.fadeColor(n,Gl.COLOR_FADING_PERCENTAGE);I(this,Or,r)}setColor(n){this.color=n}get size(){return _(this,Ln)}setSize(n){I(this,Ln,n)}};Or=new WeakMap,Ln=new WeakMap,y(Gl,\"COLOR_FADING_PERCENTAGE\",10);let Wi=Gl;class pd{constructor(t){this.view=t}prepareToUse(){this.view.enableControl()}addStrokePoint(){}endShapeStroke(){}stopUsing(){this.view.unableControl()}}class md{constructor(t,n,r){y(this,\"itemList\",[]);y(this,\"collector\");this.collector=new r(t,n,()=>this.itemList)}add(t){this.itemList.push(t),this.collector.collect()}get(t){return this.itemList[t]??null}delete(t){this.itemList.splice(t,1),this.itemList.length}get length(){return this.itemList.length}get maxLength(){return this.collector.maxLength}get total(){return this.collector.totalMemory}}const sn=class sn{constructor(t,n,r){y(this,\"maxLength\");this.ITEM_MEMORY=n,this.getMemory=r,this.maxLength=Math.floor(t/n)}deleteMemoryItem(t){this.memory.splice(t,1)}getRandomArea(){const{MEMORY_AREA_PROBABILITIES:t}=sn;let n=0;for(const u of t)n+=u;const r=sn.genRandomInRange(0,n),l=Math.round(this.memory.length/t.length);let[i,o]=[0,this.memory.length-1],s=0;for(let u=0;u<t.length;u++){const a=t[u];if(a===0)continue;const h=s+a;if(s<=r&&r<=h){i=u*l,o=Math.min(i+l,o);break}s=h}return[i,o]}deleteData(){const[t,n]=this.getRandomArea(),r=sn.genRandomInRange(t,n);this.deleteMemoryItem(r)}collect(){for(;this.memory.length>=this.maxLength;)this.deleteData()}get memory(){return this.getMemory()}get totalMemory(){return this.getMemory().length*this.ITEM_MEMORY}static genRandomInRange(t,n){const r=n-t,l=t+r*Math.random();return Math.round(l)}};y(sn,\"MEMORY_AREA_PROBABILITIES\",[0,1,1,0,1,1,0]);let Qi=sn;class vd extends Error{constructor(){super(\"History cannot go in this direction on the timeline\")}}const mr=class mr{constructor(t,n){y(this,\"onmove\",null);y(this,\"snapShotIndex\",-1);y(this,\"memory\");this.snapShotUtil=n;const r=mr.calculateMemoryCap(t),l=n.referenceSize;this.memory=new md(r,l,Qi)}dispatchMove(){this.onmove!==null&&this.onmove(this.canUndo,this.canRedo)}async checkSameState(t){const{snapShotIndex:n}=this,r=this.memory.get(n);return r===null?!1:this.snapShotUtil.compare(r,t)}cleanFront(){const t=this.snapShotIndex+1;for(;t<this.memory.length;)this.memory.delete(t)}async add(t){const n=await this.snapShotUtil.compactURL(t);await this.checkSameState(t)||(this.cleanFront(),this.memory.add(n),this.snapShotIndex=this.memory.length-1,this.dispatchMove())}updateIndex(t){const n=this.snapShotIndex+t,r=this.memory.get(n);if(r===null)throw new vd;return this.snapShotIndex=n,this.dispatchMove(),r}undo(){return this.updateIndex(-1)}redo(){return this.updateIndex(1)}get canUndo(){return this.snapShotIndex>0}get canRedo(){return this.snapShotIndex<this.memory.length-1}static calculateMemoryCap(t){return t/100*mr.MEMORY_PERCENTAGE}};y(mr,\"MEMORY_PERCENTAGE\",25);let Yi=mr;var Dt;class gd{constructor(t,n){y(this,\"onmove\",null);U(this,Dt);this.getScene=n,this.history=t}async undo(){const t=this.history.undo();await this.scene.setImage(t)}async redo(){const t=this.history.redo();await this.scene.setImage(t)}async saveSnapShot(){await this.scene.waitNextFrame();const t=this.scene.image;this.history.add(t)}dispatchHistoryMove(t,n){this.onmove!==null&&this.onmove(t,n)}get scene(){return this.getScene()}setHistory(t){this.history=t}get history(){return _(this,Dt)}set history(t){_(this,Dt)!==void 0&&(_(this,Dt).onmove=null),I(this,Dt,t),t.onmove=(n,r)=>{this.dispatchHistoryMove(n,r)},this.saveSnapShot()}}Dt=new WeakMap;const un=class un{constructor(t,n){y(this,\"historyService\");this.scene=t,this.scene=t,this.historyService=new gd(n,()=>this.scene),this.historyService.onmove=(r,l)=>{un.dispatchHistoryMove(this,r,l)}}async undo(){await this.historyService.undo()}async redo(){await this.historyService.redo()}setHistory(t){this.historyService.setHistory(t)}static dispatchHistoryMove(t,n,r){un.onhistorymove!==null&&un.onhistorymove(t,n,r)}};y(un,\"onhistorymove\",null);let vr=un;class yd extends vr{async clear(t){const{width:n,height:r}=this.scene,l=this.createEmptyImage(n,r,t);await this.scene.setImage(l),this.historyService.saveSnapShot()}get image(){return this.scene.image}async setImage(t){await this.scene.setImage(t),this.historyService.saveSnapShot()}}const an=class an extends yd{initFiller(t){t.onstarteachtask===null&&(t.onstarteachtask=n=>{const{x:r,y:l,color:i}=n;an.dispatchFilling(this,!0,r,l,i),an.dispatchHistoryMove(this,!1,!1)}),t.onfinish===null&&(t.onfinish=n=>{const{x:r,y:l,color:i}=n;an.dispatchFilling(this,!1,r,l,i),this.historyService.saveSnapShot()})}static dispatchFilling(t,n,r,l,i){this.onfilling!==null&&this.onfilling(t,n,r,l,i)}};y(an,\"onfilling\",null);let ir=an;const Xl=class Xl extends ir{constructor(t,n,r){super(t,n),this.createEmptyImage=r,this.scene.onframereport=l=>{Xl.dispatchFrameReport(this,l)}}stopStroke(t,n,r,l){l.endShapeStroke(t,n,r,this.scene),l instanceof Vi||this.historyService.saveSnapShot()}use(t,n,r,l){l instanceof Vi&&this.initFiller(l),l.addStrokePoint(t,n,r,this.scene)}static dispatchFrameReport(t,n){this.onframereport!==null&&this.onframereport(t,n)}static get onhistorymove(){return vr.onhistorymove}static set onhistorymove(t){vr.onhistorymove=t}static get onfilling(){return ir.onfilling}static set onfilling(t){ir.onfilling=t}};y(Xl,\"onframereport\",null);let cn=Xl;var Nn,_n;class wd{constructor(){U(this,Nn,0);U(this,_n,0)}registFrame(t){Kr(this,_n)._++,I(this,Nn,_(this,Nn)+t)}reset(){I(this,Nn,0),I(this,_n,0)}get lapse(){return _(this,Nn)}get frames(){return _(this,_n)}}Nn=new WeakMap,_n=new WeakMap;const Zl=class Zl{constructor(t,n){y(this,\"onreport\",null);y(this,\"previousMoment\");y(this,\"frameRate\",new wd);this.REPORT_TOLERANCE=t,this.getMoment=n,this.previousMoment=n()}calcRate(){const t=this.getMoment(),n=t-this.previousMoment;return this.previousMoment=t,n}dispatchReport(t){!isFinite(t)||isNaN(t)||this.onreport!==null&&this.onreport(t)}notifyFrame(){const t=this.calcRate();if(this.frameRate.registFrame(t),this.frameRate.lapse>=this.REPORT_TOLERANCE){const n=this.fps;this.frameRate.reset(),this.dispatchReport(n)}}get fps(){const{lapse:t,frames:n}=this.frameRate,l=n/t*Zl.SECOND;return Math.round(l)}};y(Zl,\"SECOND\",1e3);let Ki=Zl;function Sd(e,t){const n=x.useMemo(()=>new ud(e,t),[]);return x.useEffect(()=>{n.setLayout(e),n.setResolution(t)},[n,e,t]),n}class qs{constructor(t,n){this.x=t,this.y=n}}class kd{constructor(t,n){this.sectionManager=t,this.context=n}render(){for(const t of this.sectionManager.sectionList){const{path:n,props:r}=t;this.renderSection(n,r)}this.sectionManager.resetSections()}}class bs{constructor(t,n){y(this,\"path\",new Path2D);this.props=n,this.path.moveTo(t.x,t.y)}}var Ot,he;class xd{constructor(t,n){U(this,Ot);U(this,he);I(this,Ot,t);const r=new bs(t,n);I(this,he,[r])}createSection(t){const n=new bs(_(this,Ot),{...t});_(this,he).push(n)}joinPoint(t){const{currentPath:n}=this;I(this,Ot,t),n.lineTo(t.x,t.y)}resetSections(){const t=_(this,he)[_(this,he).length-1];I(this,he,[]),_(this,he).push(t)}get currentPath(){return _(this,he)[_(this,he).length-1].path}get currentProps(){return _(this,he)[_(this,he).length-1].props}get latestPoint(){return _(this,Ot)}get sectionList(){return _(this,he)}}Ot=new WeakMap,he=new WeakMap;var Fr;const Jl=class Jl{constructor(t){y(this,\"stopHandlerList\",[]);U(this,Fr,!1);this.getAutoStopState=t,this.runStopCheckerDaemon()}runStopCheckerDaemon(){const t=setInterval(()=>{this.getAutoStopState()&&(this.stop(),clearInterval(t))},Jl.STOP_TIMEOUT)}dispatchStopEvent(){for(const t of this.stopHandlerList)t()}async stop(){this.isStopped||(I(this,Fr,!0),this.dispatchStopEvent())}onStop(t){this.stopHandlerList.push(t)}get isStopped(){return _(this,Fr)}};Fr=new WeakMap,y(Jl,\"STOP_TIMEOUT\",3e3);let Gi=Jl;class Ra extends kd{constructor(n,r,l,i){const o=new qs(n,r),s=new xd(o,{...l});super(s,i);y(this,\"pointsAmount\",0);y(this,\"stopService\");y(this,\"getAutoStopState\",(()=>{let n=this.pointsAmount;return()=>{const r=n===this.pointsAmount;return n=this.pointsAmount,r}})());this.stopService=new Gi(()=>this.getAutoStopState())}addPoint(n,r){const l=new qs(n,r);this.pointsAmount++,this.sectionManager.joinPoint(l)}createSection(n){this.sectionManager.createSection({...n})}onStop(n){this.stopService.onStop(n)}stop(){this.stopService.stop()}get currentProps(){return this.sectionManager.currentProps}}class La extends Ra{renderSection(t,n){const{width:r}=n;this.context.globalCompositeOperation=\"destination-out\",this.context.lineWidth=r,this.context.lineJoin=\"round\",this.context.lineCap=\"round\",this.context.stroke(t),this.context.globalCompositeOperation=\"source-over\"}}class Na extends Ra{renderSection(t,n){const{color:r,width:l}=n;this.context.lineWidth=l,this.context.strokeStyle=r,this.context.lineJoin=\"round\",this.context.lineCap=\"round\",this.context.stroke(t)}}class Ed{constructor(){y(this,\"onframereport\",null);y(this,\"canvas\",document.createElement(\"canvas\"));y(this,\"context\",this.canvas.getContext(\"2d\"))}createDot(){}printLine(){}createClearPath(){return new La(0,0,{width:0},this.context)}createStroke(){return new Na(0,0,{color:\"\",width:0},this.context)}getBinaryData(){return{width:0,height:0,pixelList:new Uint8ClampedArray,colorChanels:0,maxChanel:0}}async waitNextFrame(){}get image(){return\"\"}async setImage(t){}get width(){return 0}get height(){return 0}setBinaryData(){}}class _a{constructor(t,n=new Path2D){y(this,\"wasDrawed\",!1);this.color=t,this.path=n}tryDraw(){this.wasDrawed||(this.draw(this.path),this.wasDrawed=!0)}printBody(t,n){t.fillStyle=this.color,t.fill(n)}render(t){this.tryDraw(),this.printBody(t,this.path)}}class Ma extends _a{constructor(t,n,r,l){super(l),this.x=t,this.y=n,this.width=r}draw(t){const n=Math.round(this.width/2);t.arc(this.x,this.y,n,0,Math.PI*2)}}class Cd extends _a{constructor(n,r,l,i){super(n);y(this,\"width\");y(this,\"init\");y(this,\"end\",null);this.width=r,this.init={x:l,y:i}}setEnd(n,r){this.end={x:n,y:r}}draw(n){this.end!==null&&(n.moveTo(this.init.x,this.init.y),n.lineTo(this.end.x,this.end.y))}printBody(n,r){n.strokeStyle=this.color,n.lineWidth=this.width,n.stroke(r)}}class Pd extends Ma{draw(t){const n=Math.floor(this.width/2);t.rect(this.x-n,this.y-n,this.width,this.width)}}class Rd{constructor(){y(this,\"cachedImage\",null)}renderImage(){if(this.cachedImage===null)return!1;const{width:t,height:n,pixelList:r}=this.cachedImage,l=new ImageData(r,t,n);return this.context.putImageData(l,0,0),this.cachedImage=null,!0}getBinaryData(){const{width:t,height:n}=this.canvas,{data:r}=this.context.getImageData(0,0,t,n);return{width:t,height:n,pixelList:r,colorChanels:4,maxChanel:255}}setBinaryData(t){this.cachedImage=t}}function Go(e,t){const n=document.createElement(\"canvas\");return n.width=e,n.height=t,n}class eu{constructor(){y(this,\"resolve\");y(this,\"reject\");y(this,\"promise\");this.promise=new Promise((t,n)=>{this.resolve=t,this.reject=n})}}class Ld{constructor(t,n){y(this,\"realContext\",null);y(this,\"fakeContext\");y(this,\"released\",null);this.getContext=t,this.setContext=n;const r=Go(0,0);this.fakeContext=r.getContext(\"2d\")}caputreContext(){return this.released instanceof eu?this.released.promise:(this.realContext===null&&(this.realContext=this.getContext()),this.setContext(this.fakeContext),this.released=new eu,this.released.promise)}releaseContext(){var t;this.realContext!==null&&(this.setContext(this.realContext),(t=this.released)==null||t.resolve(),this.released=null)}get contextIsCaptured(){return this.realContext===null?!1:this.getContext()===this.fakeContext}}class Xo extends Rd{constructor(){super();y(this,\"contextCapturer\");this.contextCapturer=new Ld(()=>this.context,n=>this.context=n)}releaseContext(){this.contextCapturer.releaseContext()}get image(){return this.canvas.toDataURL()}async setImage(n){const{width:r,height:l}=this.canvas;this.context.clearRect(0,0,r,l);const i=await Xo.createImage(n);this.context.drawImage(i,0,0),await this.contextCapturer.caputreContext()}get contextIsCaptured(){return this.contextCapturer.contextIsCaptured}static createImage(n){return new Promise(r=>{const l=new Image;l.onload=()=>r(l),l.src=n})}}class Nd extends Xo{renderShapes(){for(const t of this.shapeList)t.render(this.context);this.shapeList=[]}}class _d extends Nd{createDot(t,n,r,l,i){const o=i?Pd:Ma,s=new o(t,n,r,l);this.shapeList.push(s)}}class Md extends _d{printLine(t,n,r,l){const[i,o]=r,s=new Cd(t,n,i,o),[u,a]=l;s.setEnd(u,a),this.shapeList.push(s)}}var Mn;class tu{constructor(t){U(this,Mn,new Set);y(this,\"strokeIndex\",{});this.Stroke=t}genStroke(t,n,r,l){const i=new this.Stroke(t,n,r,l),o=Symbol();return _(this,Mn).add(o),this.strokeIndex[o]=i,i.onStop(()=>{_(this,Mn).delete(o),delete this.strokeIndex[o]}),i}getStroke(t){const n=this.strokeIndex[t];return n===void 0?null:n}get keyList(){return _(this,Mn)}}Mn=new WeakMap;class Id extends Md{constructor(){super(...arguments);y(this,\"strokeManager\",new tu(Na));y(this,\"clearPathManager\",new tu(La))}createStroke(n,r,l){return this.strokeManager.genStroke(n,r,l,this.context)}createClearPath(n,r,l){return this.clearPathManager.genStroke(n,r,l,this.context)}cleanStrokes(){for(const n of this.strokeManager.keyList)this.strokeManager.getStroke(n).stop();for(const n of this.clearPathManager.keyList)this.clearPathManager.getStroke(n).stop()}renderStrokes(){for(const n of this.strokeManager.keyList)this.strokeManager.getStroke(n).render();for(const n of this.clearPathManager.keyList)this.clearPathManager.getStroke(n).render()}}class nu extends Id{constructor(n){super();y(this,\"fpsManager\",new Ki(500,()=>performance.now()));y(this,\"shapeList\",[]);y(this,\"context\");y(this,\"nextFrameResolverList\",[]);this.canvas=n,this.context=n.getContext(\"2d\"),this.scene()}resolveNextFrame(){for(const n of this.nextFrameResolverList)n();this.nextFrameResolverList=[]}render(){if(this.contextIsCaptured&&this.cleanStrokes(),this.renderImage()){this.cleanStrokes();return}this.renderStrokes(),this.renderShapes(),this.contextIsCaptured&&this.releaseContext()}scene(){this.render(),this.resolveNextFrame(),this.fpsManager.notifyFrame(),requestAnimationFrame(()=>this.scene())}waitNextFrame(){let n;const r=new Promise(l=>n=l);return this.nextFrameResolverList.push(n),r}get width(){return this.canvas.width}get height(){return this.canvas.height}get onframereport(){return this.fpsManager.onreport}set onframereport(n){this.fpsManager.onreport=n}static createEmpty(){return new Ed}}function Td(e,t,n){const r=Go(e,t),l=r.getContext(\"2d\");return n===void 0||(l.fillStyle=n,l.rect(0,0,e,t),l.fill()),r.toDataURL()}class zd{constructor(){y(this,\"index\",new Map)}set(t,n){this.index.set(t,n),this.index.set(n,t)}get(t){return this.index.get(t)}delete(t){return this.index.delete(t)}}class Dd{constructor(t){y(this,\"maxLinealAssigned\",Number.MIN_SAFE_INTEGER);this.checkAvailability=t}getFree(){let t;for(;t===void 0;){const n=++this.maxLinealAssigned;this.checkAvailability(n)&&(t=n)}return t}}class Od{constructor(){y(this,\"index\",new zd);y(this,\"idAllocator\",new Dd(t=>this.index.get(t)===void 0))}toId(t){let n=this.index.get(t);return n===void 0&&(n=this.idAllocator.getFree(),this.index.set(t,n)),n}toSymbol(t){let n=this.index.get(t);return n===void 0&&(n=Symbol(),this.index.set(n,t)),n}unRef(t){this.index.delete(t)}}class Fd{constructor(t){y(this,\"symbolParser\",new Od);y(this,\"tool\",null);y(this,\"onhistorymove\",null);y(this,\"onfilling\",null);y(this,\"onframereport\",null);this.drawingServiceRef=t,this.setHistoryMoveListener(),this.setFillerListener(),this.setFrameReportListener()}async clear(t){await this.drawingService.clear(t)}async getImage(){return this.drawingService.image}async setImage(t){await this.drawingService.setImage(t)}setHistoryMoveListener(){cn.onhistorymove=(t,n,r)=>{t===this.drawingService&&this.onhistorymove!==null&&this.onhistorymove(n,r)}}setFillerListener(){cn.onfilling=(t,n,r,l,i)=>{t===this.drawingService&&this.onfilling!==null&&this.onfilling(n,r,l,i)}}setFrameReportListener(){cn.onframereport=(t,n)=>{t===this.drawingService&&this.onframereport!==null&&this.onframereport(n)}}async undo(){await this.drawingService.undo()}async redo(){await this.drawingService.redo()}touch(t,n,r,l){if(this.tool===null)return;const i=this.symbolParser.toSymbol(l);t===\"start\"||t===\"move\"?this.drawingService.use(n,r,i,this.tool):t===\"end\"&&this.drawingService.stopStroke(n,r,i,this.tool)}get drawingService(){return this.drawingServiceRef.current}setTool(t){this.tool=t}}class Ia{constructor(t,n){y(this,\"interfaceIndex\",{});this.codec=t,this.sendData=n}checkData(t){return t.startsWith(this.token)}activate(t){let n;const r=new Promise((l,i)=>{n={resolve:l,reject:i}});return this.interfaceIndex[t]=n,r}receive(t){const n=t.replace(this.token,\"\"),r=this.codec.toData(n),{id:l}=r,i=this.interfaceIndex[l];i!==void 0&&(delete this.interfaceIndex[l],this.makeChoice(r,i))}send(t){const n=this.codec.toJSON(t);this.sendData(this.token+n)}}class Zo{constructor(t){this.fixStruct=t}toData(t){const n=JSON.parse(t);return this.fixStruct(n)}toJSON(t){return JSON.stringify(t)}}var Xe=(e=>(e[e.SUCCESS=0]=\"SUCCESS\",e[e.ERROR=1]=\"ERROR\",e))(Xe||{});class Jo extends Ia{constructor(n){const r=new Zo(l=>Jo.fixCodecStruct(l));super(r,n);y(this,\"token\",\"_ANSWER_\")}makeChoice(n,r){const{res:l,status:i}=n;if(i===Xe.SUCCESS)r.resolve(l);else{const o=new Error(l);r.reject(o)}}static fixCodecStruct(n){const{id:r,res:l,status:i}=n;let o;return i===Xe.SUCCESS?o=Xe.SUCCESS:(Xe.ERROR,o=Xe.ERROR),{id:typeof r==\"number\"?r:NaN,res:l,status:o}}}class Ad{constructor(){y(this,\"messageEventIndex\",{})}async dispatchMessage(t,n){const r=this.messageEventIndex[t];if(r!==void 0)return r(n)}onMessage(t,n){this.messageEventIndex[t]=n}}class Ud extends Ad{constructor(t,n,r,l){super(),this.codec=t,this.receivedAck=n,this.answerAck=r,l(i=>this.receive(i))}receiveStandardMessage(t){const{id:n,target:r,arg:l}=this.codec.toData(t);this.receivedAck.send({id:n});const i=this.dispatchMessage(r,l);i.then(o=>{this.answerAck.send({status:Xe.SUCCESS,id:n,res:o})}),i.catch(o=>{const{message:s}=o,u=typeof s==\"string\"?s:void 0;this.answerAck.send({status:Xe.ERROR,id:n,res:u})})}receive(t){if(this.receivedAck.checkData(t)){this.receivedAck.receive(t);return}if(this.answerAck.checkData(t)){this.answerAck.receive(t);return}this.receiveStandardMessage(t)}}class qo extends Ia{constructor(n){const r=new Zo(l=>qo.fixCodecStruct(l));super(r,n);y(this,\"token\",\"_RECEIVED_\")}makeChoice(n,r){r.resolve()}static fixCodecStruct(n){const{id:r}=n;return{id:typeof r==\"number\"?r:NaN}}}class jd{constructor(t,n,r,l){y(this,\"messageId\",0);y(this,\"latestMessageReceived\",null);this.codec=t,this.receivedAck=n,this.answerAck=r,this.sendData=l}createAckInterfaces(){const t=this.messageId++,n=this.receivedAck.activate(t),r=this.answerAck.activate(t);return[n,r,t]}async postMessage(t,n){const{latestMessageReceived:r}=this,[l,i,o]=this.createAckInterfaces();this.latestMessageReceived=l,r!==null&&await r;const s={id:o,target:t,arg:n},u=this.codec.toJSON(s);return this.sendData(u),i}}class bo{constructor(t,n){y(this,\"sender\");y(this,\"receiver\");const r=new Zo(o=>bo.fixCodecStruct(o)),l=new qo(n),i=new Jo(n);this.sender=new jd(r,l,i,n),this.receiver=new Ud(r,l,i,t)}postMessage(t,n){return this.sender.postMessage(t,n)}onMessage(t,n){this.receiver.onMessage(t,n)}static fixCodecStruct(t){const{id:n,target:r,arg:l}=t;return{id:typeof n==\"number\"?n:NaN,target:typeof r==\"string\"?r:\"\",arg:l}}}function Hd(e){document.addEventListener(\"message\",t=>{e(t.data)})}const Re=new bo(Hd,e=>window.ReactNativeWebView.postMessage(e));function $d(e,t){const n=x.useMemo(()=>new Fd(e),[e]);return x.useEffect(()=>{n.setTool(t)},[n,t]),n}function Bd(e){const{drawingServiceRef:t,currentTool:n}=e,r=$d(t,n);x.useEffect(()=>{r!==null&&(r.onhistorymove===null&&(r.onhistorymove=(l,i)=>{Re.postMessage(\"draw-history-move\",{canUndo:l,canRedo:i})}),r.onfilling===null&&(r.onfilling=(l,i,o,s)=>{Re.postMessage(\"filling\",{isStarting:l,x:i,y:o,color:s})}),r.onframereport===null&&(r.onframereport=l=>{Re.postMessage(\"fps-report\",{fps:l})}),Re.onMessage(\"draw-clear\",async l=>{await r.clear(l)}),Re.onMessage(\"draw-get-image\",async()=>r.getImage()),Re.onMessage(\"draw-set-image\",async l=>{await r.setImage(l)}),Re.onMessage(\"draw-history-undo\",async()=>{await r.undo()}),Re.onMessage(\"draw-history-redo\",async()=>{await r.redo()}),Re.onMessage(\"draw-touch\",l=>{const{type:i,x:o,y:s,parsedId:u}=l;r.touch(i,o,s,u)}))},[r])}function Vd(e){return x.useMemo(()=>e===null?nu.createEmpty():new nu(e),[e])}class _t{constructor(t,n){y(this,\"colorChanels\",4);this.imageWidth=t,this.imageHeight=n}async compactURL(t){const{imageWidth:n,imageHeight:r}=this,l=await _t.createCanvas(t,n,r),i=await _t.createFile(l);return URL.createObjectURL(i)}async compare(t,n){const{imageWidth:r,imageHeight:l}=this,i=await _t.createCanvas(t,r,l),o=await _t.createCanvas(n,r,l),s=i.toDataURL(),u=o.toDataURL();return s===u}get referenceSize(){return this.imageWidth*this.imageHeight*this.colorChanels/1024/1024}static async createCanvas(t,n,r){const l=await _t.createImage(t),i=Go(n,r);return i.getContext(\"2d\").drawImage(l,0,0),i}static createImage(t){return new Promise(n=>{const r=new Image;r.onload=()=>n(r),r.src=t})}static createFile(t){return new Promise(n=>{t.toBlob(r=>n(r))})}}function Wd(){return performance.memory.jsHeapSizeLimit/1024/1024}function Qd(e,t){return x.useMemo(()=>new _t(e,t),[e,t])}function Yd(e,t){const n=Qd(e,t);return x.useMemo(()=>{const r=Wd();return new Yi(r,n)},[n])}function Kd(e,t,n){const r=Yd(t,n),l=x.useMemo(()=>new cn(e,r,Td),[e]);return x.useEffect(()=>{l.setHistory(r)},[l,r]),l}function Gd(e,t){const[n,r]=x.useState(null),l=Vd(n),i=Kd(l,e,t);return{loadDisplay:x.useCallback(s=>{r(s)},[]),drawingService:i}}const Xd=x.forwardRef((e,t)=>{const{resolution:n,aspectRatio:r,antialiasing:l,onLoad:i}=e,o=Math.round(n/r),{loadDisplay:s,drawingService:u}=Gd(n,o);return x.useImperativeHandle(t,()=>u,[u]),Qe.jsx(Ea,{className:l?\"\":\"pixelated\",resolution:n,aspectRatio:r,onLoad:i,onCanvasCreate:s})});var fn=(e=>(e[e.HORIZONTAL=0]=\"HORIZONTAL\",e[e.VERTICAL=1]=\"VERTICAL\",e))(fn||{});class Zd{constructor(t){this.context=t}makeLine(t,n,r,l){this.context.beginPath(),this.context.lineWidth=r,this.context.strokeStyle=l;const[i,o]=t===fn.HORIZONTAL?[0,n]:[n,0],[s,u]=t===fn.HORIZONTAL?[this.width,n]:[n,this.height];this.context.moveTo(i,o),this.context.lineTo(s,u),this.context.stroke()}clear(){this.context.clearRect(0,0,this.width,this.height)}get width(){const{canvas:t}=this.context;return t.width}get height(){const{canvas:t}=this.context;return t.height}}function Jd(){const[e,t]=x.useState(null),n=x.useCallback(r=>{const l=r.getContext(\"2d\"),i=new Zd(l);t(i)},[]);return{gridDisplay:e,onCanvasCreate:n}}const Mt=class Mt{constructor(t,n,r){this.widthGrid=t,this.heightGrid=n,this.display=r}hatch(t){const[n,r]=t===fn.HORIZONTAL?[this.heightGrid,this.display.height]:[this.widthGrid,this.display.width],l=r/n,i=n,o=Mt.WIDTH/2;for(let s=0;s<=i;s++){let u=s*l;s===0&&(u+=o),s===i&&(u-=o),this.display.makeLine(t,u,Mt.WIDTH,Mt.COLOR)}}build(){this.display.clear(),this.hatch(fn.HORIZONTAL),this.hatch(fn.VERTICAL)}};y(Mt,\"WIDTH\",2),y(Mt,\"COLOR\",\"black\");let Xi=Mt;function qd(e,t,n){return x.useMemo(()=>n===null?null:new Xi(e,t,n),[e,t,n])}const bd=e=>{const{amount:t=0,aspectRatio:n,onLoad:r}=e,[l,i]=typeof t==\"number\"?[t,t]:t,o=450,s=t!==0,{gridDisplay:u,onCanvasCreate:a}=Jd(),h=qd(l,i,u);return x.useEffect(()=>{h!==null&&h.build()},[h]),Qe.jsx(Ea,{className:`${s?\"\":\"grid-hidden\"}`,resolution:o,aspectRatio:n,onLoad:r,onCanvasCreate:a})};function eh(e){const[t,n]=x.useState(0),r=x.useCallback(()=>{const l=e.current,{width:i}=l.getBoundingClientRect();n(i)},[e]);return x.useEffect(()=>{r()},[]),x.useEffect(()=>(window.addEventListener(\"resize\",()=>r()),()=>window.removeEventListener(\"resize\",()=>r())),[r]),t}function th(e){const{viewportControlAllowed:t,touchService:n}=e,r=x.useCallback(o=>{t||o.preventDefault();for(const s of o.changedTouches){const{identifier:u,clientX:a,clientY:h}=s,{innerWidth:p,innerHeight:m}=window;n.start(u,a,h,p,m)}},[t,n]),l=x.useCallback(o=>{t||o.preventDefault();for(const s of o.changedTouches){const{identifier:u,clientX:a,clientY:h}=s;n.move(u,a,h)}},[t,n]),i=x.useCallback(o=>{t||o.preventDefault();for(const s of o.changedTouches)n.end(s.identifier)},[t,n]);return{onTouchStart:r,onTouchMove:l,onTouchEnd:i}}var In,Tn;const Ws=class Ws{constructor(t,n,r){y(this,\"id\",Symbol());U(this,In);U(this,Tn);this.minProgress=r,I(this,In,t),I(this,Tn,n)}checkHasMinDistance(t,n){return Ws.calcDistance(this.x,this.y,t,n)>=this.minProgress}setPosition(t,n){const r=this.checkHasMinDistance(t,n);return r&&(this.x=t,this.y=n),r}get x(){return _(this,In)}set x(t){I(this,In,t)}get y(){return _(this,Tn)}set y(t){I(this,Tn,t)}static calcDistance(t,n,r,l){return Math.sqrt((t-r)**2+(n-l)**2)}static calcMinProgress(t,n){return Math.min(t,n)*.01}};In=new WeakMap,Tn=new WeakMap;let El=Ws;class ru{constructor(t,n,r){this.targetId=t,this.x=n,this.y=r}}class nh{constructor(){y(this,\"touchDetectedHandler\",null);y(this,\"touchEndHandler\",null)}onTouchDetected(t){this.touchDetectedHandler=t}onTouchEnd(t){this.touchEndHandler=t}triggerTouchDetectedEvent(t){if(this.touchDetectedHandler===null)return;const{id:n,x:r,y:l}=t,i=new ru(n,r,l);this.touchDetectedHandler(i)}triggerTouchEndEvent(t){if(this.touchEndHandler===null)return;const{id:n,x:r,y:l}=t,i=new ru(n,r,l);this.touchEndHandler(i)}}class rh extends nh{constructor(){super(...arguments);y(this,\"touchIndex\",{})}start(n,r,l,i,o){const s=El.calcMinProgress(i,o),u=new El(r,l,s);this.touchIndex[n]=u,this.triggerTouchDetectedEvent(u)}move(n,r,l){const i=this.touchIndex[n];if(i===void 0)return;i.setPosition(r,l)&&this.triggerTouchDetectedEvent(i)}end(n){const r=this.touchIndex[n];r!==void 0&&(delete this.touchIndex[n],this.triggerTouchEndEvent(r))}}function lh(){return x.useMemo(()=>new rh,[])}function ih(e){const{viewportControlAllowed:t,screenRef:n}=e,r=lh(),l={viewportControlAllowed:t,touchService:r},{onTouchStart:i,onTouchMove:o,onTouchEnd:s}=th(l),u=x.useCallback(h=>{h.addEventListener(\"touchstart\",i),h.addEventListener(\"touchmove\",o),h.addEventListener(\"touchend\",s)},[i,o,s]),a=x.useCallback(h=>{h.removeEventListener(\"touchstart\",i),h.removeEventListener(\"touchmove\",o),h.removeEventListener(\"touchend\",s)},[i,o,s]);return x.useEffect(()=>{const h=n.current;return u(h),()=>a(h)},[n,u,a]),{touchService:r}}function oh(e){const{resolution:t,viewportControlAllowed:n,screenRef:r}=e,l=eh(r),i=Sd(l,t),{touchService:o}=ih({viewportControlAllowed:n,screenRef:r});return{coordinatesService:i,touchService:o}}const sh=e=>{const{resolution:t,tool:n,viewportControlAllowed:r,drawingServiceRef:l}=e,i=x.useRef(null),o={resolution:t,viewportControlAllowed:r,screenRef:i},{coordinatesService:s,touchService:u}=oh(o),a=x.useCallback(p=>{const m=l.current;if(m===null)return;const{x:w,y:S}=s.toInternal(p.x,p.y);m.use(w,S,p.targetId,n)},[s,l,n]),h=x.useCallback(p=>{const m=l.current;if(m===null)return;const{x:w,y:S}=s.toInternal(p.x,p.y);m.stopStroke(w,S,p.targetId,n)},[s,l,n]);return x.useEffect(()=>{u.onTouchDetected(a),u.onTouchEnd(h)},[u,a,h]),Qe.jsx(\"div\",{ref:i,className:\"touch-screen\"})},uh=4;function ah(e){const[t,n]=x.useState(!1),[r,l]=x.useState(!1);return x.useEffect(()=>{e!==void 0&&t&&r&&e()},[t,r]),{setDisplayLoaded:n,setGridLoaded:l}}function me(e){return x.useMemo(()=>e,[])}function ch(e){const[t,n]=x.useState(null),r=x.useCallback(l=>{n(l)},[]);return x.useEffect(()=>{e.onMessage(\"state-update\",r)},[e,r]),t}function fh(e){const[t,n]=x.useState(null),r=x.useRef(null);return x.useEffect(()=>{n(r.current),r.current=e},[e,r]),t}const dh=new cd;function hh(e,t){const n=x.useMemo(()=>{const l=e[t]??dh;return l.prepareToUse(),l},[e,t]),r=fh(n);return x.useEffect(()=>{r!==null&&r.stopUsing()},[r]),n}function ph(e){Re.postMessage(\"eye-dropper\",{color:e})}const lu=100,mh=255;function vh(e,t){const r=new OffscreenCanvas(1,1).getContext(\"2d\");r.fillStyle=e,r.rect(0,0,1,1),r.fill();const{data:l}=r.getImageData(0,0,1,1),[i,o,s,u]=l,a=lu-t,h=u/lu*a,p=Math.round(h/mh*100)/100;return`rgba( ${i}, ${o}, ${s}, ${p} )`}function Ta(e){const n=new OffscreenCanvas(1,1).getContext(\"2d\");n.fillStyle=e,n.rect(0,0,1,1),n.fill();const{data:r}=n.getImageData(0,0,1,1),[l,i,o]=r;return`rgb( ${l}, ${i}, ${o} )`}function gh(e){return new Worker(\"data:text/javascript;base64,dmFyIF89T2JqZWN0LmRlZmluZVByb3BlcnR5O3ZhciBVPW49Pnt0aHJvdyBUeXBlRXJyb3Iobil9O3ZhciBlZT0obixhLG8pPT5hIGluIG4/XyhuLGEse2VudW1lcmFibGU6ITAsY29uZmlndXJhYmxlOiEwLHdyaXRhYmxlOiEwLHZhbHVlOm99KTpuW2FdPW87dmFyIHI9KG4sYSxvKT0+ZWUobix0eXBlb2YgYSE9InN5bWJvbCI/YSsiIjphLG8pLFg9KG4sYSxvKT0+YS5oYXMobil8fFUoIkNhbm5vdCAiK28pO3ZhciBoPShuLGEsbyk9PihYKG4sYSwicmVhZCBmcm9tIHByaXZhdGUgZmllbGQiKSxvP28uY2FsbChuKTphLmdldChuKSkseD0obixhLG8pPT5hLmhhcyhuKT9VKCJDYW5ub3QgYWRkIHRoZSBzYW1lIHByaXZhdGUgbWVtYmVyIG1vcmUgdGhhbiBvbmNlIik6YSBpbnN0YW5jZW9mIFdlYWtTZXQ/YS5hZGQobik6YS5zZXQobixvKSx1PShuLGEsbyxBKT0+KFgobixhLCJ3cml0ZSB0byBwcml2YXRlIGZpZWxkIiksQT9BLmNhbGwobixvKTphLnNldChuLG8pLG8pO3ZhciBNPShuLGEsbyxBKT0+KHtzZXQgXyhMKXt1KG4sYSxMLG8pfSxnZXQgXygpe3JldHVybiBoKG4sYSxBKX19KTsoZnVuY3Rpb24oKXsidXNlIHN0cmljdCI7dmFyIHAsQyxQLEYsbSxJLHYseSxFLHc7ZnVuY3Rpb24gbihsKXtsZXQgdD0wO2NvbnN0IGU9cGVyZm9ybWFuY2Uubm93KCk7Zm9yKDtwZXJmb3JtYW5jZS5ub3coKS1lPGw7KXQrKztyZXR1cm4gdH1mdW5jdGlvbiBhKCl7cmV0dXJuIG5ldyBQcm9taXNlKGw9PntyZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCk9PmwoKSl9KX1hc3luYyBmdW5jdGlvbiBvKGw9MSl7bGV0IHQ9MDtmb3IobGV0IGk9MDtpPGw7aSsrKXtjb25zdCBzPURhdGUubm93KCk7YXdhaXQgYSgpLHQrPURhdGUubm93KCktc31jb25zdCBlPXQvbDtyZXR1cm4gTWF0aC5yb3VuZChlKX1hc3luYyBmdW5jdGlvbiBBKGwpe2NvbnN0IHQ9YXdhaXQgbyhsKSxlPW4odCk7cmV0dXJuIE1hdGgucm91bmQoZSl9Y29uc3QgRD1jbGFzcyBEe2NvbnN0cnVjdG9yKHQpe3godGhpcyxwKTt1KHRoaXMscCx0KX1pbmZsYXRlKHQpe3UodGhpcyxwLGgodGhpcyxwKStNYXRoLmZsb29yKHQpKX1nZXQgYXJlYSgpe3JldHVybiBELmNhbGNBcmVhKGgodGhpcyxwKSl9Z2V0IHJhZGl1cygpe3JldHVybiBoKHRoaXMscCl9c3RhdGljIGNhbGNBcmVhKHQpe3JldHVybiB0KioyKk1hdGguUEl9c3RhdGljIGNhbGNSYWRpdXModCl7cmV0dXJuIE1hdGguc3FydCh0L01hdGguUEkpfX07cD1uZXcgV2Vha01hcDtsZXQgTD1EO2NsYXNzIGsgZXh0ZW5kcyBMe2NvbnN0cnVjdG9yKGUpe3N1cGVyKDApO3IodGhpcywiY2VudGVyIik7dGhpcy5jZW50ZXI9ZX1leHRlbmQoZSl7Y29uc3QgaT10aGlzLmFyZWErZTtsZXQgYz1MLmNhbGNSYWRpdXMoaSktdGhpcy5yYWRpdXM7YzwxJiYoYz0xKSx0aGlzLmluZmxhdGUoYyl9aXNJbnNpZGUoZSl7cmV0dXJuIGsuY2FsY0Rpc3RhbmNlKHRoaXMuY2VudGVyLGUpPD10aGlzLnJhZGl1c31zdGF0aWMgY2FsY0Rpc3RhbmNlKGUsaSl7cmV0dXJuIE1hdGguc3FydCgoZS54LWkueCkqKjIrKGUueS1pLnkpKioyKX19Y2xhc3MgT3tjb25zdHJ1Y3Rvcih0LGUsaSxzKXt4KHRoaXMsQyk7eCh0aGlzLFApO3godGhpcyxGKTt4KHRoaXMsbSk7dSh0aGlzLEMsdCksdSh0aGlzLFAsZSksdSh0aGlzLEYsaSksdSh0aGlzLG0scyl9ZXF1YWxzQ29sb3IodCl7Y29uc3QgZT10LnJlZD09aCh0aGlzLEMpLGk9dC5ncmVlbj09aCh0aGlzLFApLHM9dC5ibHVlPT1oKHRoaXMsRik7cmV0dXJuIGUmJmkmJnN9ZXF1YWxzKHQpe2NvbnN0IGU9dC5hbHBoYT09aCh0aGlzLG0pLGk9aCh0aGlzLG0pPT0wO3JldHVybiBlJiZpPyEwOnRoaXMuZXF1YWxzQ29sb3IodCkmJmV9dG9TdHJpbmcoKXtyZXR1cm5gcmdiYSggJHt0aGlzLnJlZH0sICR7dGhpcy5ncmVlbn0sICR7dGhpcy5ibHVlfSwgJHt0aGlzLnN0eWxlQWxwaGF9IClgfWdldCByZWQoKXtyZXR1cm4gaCh0aGlzLEMpfWdldCBncmVlbigpe3JldHVybiBoKHRoaXMsUCl9Z2V0IGJsdWUoKXtyZXR1cm4gaCh0aGlzLEYpfWdldCBhbHBoYSgpe3JldHVybiBoKHRoaXMsbSl9Z2V0IHN0eWxlQWxwaGEoKXtyZXR1cm4gTWF0aC5yb3VuZChoKHRoaXMsbSkvMjU1KjEwKS8xMH19Qz1uZXcgV2Vha01hcCxQPW5ldyBXZWFrTWFwLEY9bmV3IFdlYWtNYXAsbT1uZXcgV2Vha01hcDtjbGFzcyBxe2NvbnN0cnVjdG9yKHQsZSl7cih0aGlzLCJSRUQiKTtyKHRoaXMsIkdSRUVOIik7cih0aGlzLCJCTFVFIik7cih0aGlzLCJBTFBIQSIpO2NvbnN0IGk9dC5jYWxjSW5kZXgoZSkqNDt0aGlzLlJFRD1pLHRoaXMuR1JFRU49aSsxLHRoaXMuQkxVRT1pKzIsdGhpcy5BTFBIQT1pKzN9fWNsYXNzIEd7Y29uc3RydWN0b3IodCxlKXtyKHRoaXMsIngiKTtyKHRoaXMsInkiKTt0aGlzLng9dCx0aGlzLnk9ZX1jYWxjSW5kZXgodCl7cmV0dXJuIHRoaXMueCt0KnRoaXMueX19Y2xhc3MgSHtjb25zdHJ1Y3Rvcih0LGUsaSl7eCh0aGlzLEkpO3godGhpcyx2KTtyKHRoaXMsInBpeGVsTGlzdCIpO3UodGhpcyxJLHQpLHUodGhpcyx2LGUpLHRoaXMucGl4ZWxMaXN0PWl9Z2V0UGl4ZWwodCxlKXtjb25zdCBpPW5ldyBHKHQsZSk7cmV0dXJuIHRoaXMuaXNPdXRPZkxpbWl0cyhpKT9udWxsOml9aXNPdXRPZkxpbWl0cyh0KXtyZXR1cm4hKDA8PXQueCYmdC54PHRoaXMud2lkdGgpfHwhKDA8PXQueSYmdC55PHRoaXMuaGVpZ2h0KX1zZXRDb2xvcih0LGUpe2NvbnN0IGk9bmV3IHEodCx0aGlzLndpZHRoKTt0aGlzLnBpeGVsTGlzdFtpLlJFRF09ZS5yZWQsdGhpcy5waXhlbExpc3RbaS5HUkVFTl09ZS5ncmVlbix0aGlzLnBpeGVsTGlzdFtpLkJMVUVdPWUuYmx1ZSx0aGlzLnBpeGVsTGlzdFtpLkFMUEhBXT1lLmFscGhhfWdldENvbG9yKHQpe2NvbnN0IGU9bmV3IHEodCx0aGlzLndpZHRoKSxpPXRoaXMucGl4ZWxMaXN0W2UuUkVEXSxzPXRoaXMucGl4ZWxMaXN0W2UuR1JFRU5dLGM9dGhpcy5waXhlbExpc3RbZS5CTFVFXSxkPXRoaXMucGl4ZWxMaXN0W2UuQUxQSEFdO3JldHVybiBuZXcgTyhpLHMsYyxkKX1nZXRQaXhlbExpc3QoKXtyZXR1cm4gbmV3IFVpbnQ4Q2xhbXBlZEFycmF5KHRoaXMucGl4ZWxMaXN0KX1nZXQgd2lkdGgoKXtyZXR1cm4gaCh0aGlzLEkpfWdldCBoZWlnaHQoKXtyZXR1cm4gaCh0aGlzLHYpfX1JPW5ldyBXZWFrTWFwLHY9bmV3IFdlYWtNYXA7Y2xhc3MgWXtjb25zdHJ1Y3Rvcih0KXtyKHRoaXMsInBpeGVsSW5kZXgiLFtdKTtyKHRoaXMsImltYWdlIik7dGhpcy5pbWFnZT10fWNoZWNrKHQpe2lmKHRoaXMuaW1hZ2UuaXNPdXRPZkxpbWl0cyh0KSlyZXR1cm47Y29uc3QgZT10LmNhbGNJbmRleCh0aGlzLmltYWdlLndpZHRoKTt0aGlzLnBpeGVsSW5kZXhbZV09ITB9aXNGcmVlKHQpe2lmKHRoaXMuaW1hZ2UuaXNPdXRPZkxpbWl0cyh0KSlyZXR1cm4hMTtjb25zdCBlPXQuY2FsY0luZGV4KHRoaXMuaW1hZ2Uud2lkdGgpO3JldHVybiF0aGlzLnBpeGVsSW5kZXhbZV19fWNsYXNzICR7Y29uc3RydWN0b3IodCl7eCh0aGlzLHkpO3godGhpcyxFLG51bGwpO3UodGhpcyx5LHQpfXNldE5leHROb2RlKHQpe3UodGhpcyxFLHQpfWdldCB2YWx1ZSgpe3JldHVybiBoKHRoaXMseSl9Z2V0IG5leHROb2RlKCl7cmV0dXJuIGgodGhpcyxFKX19eT1uZXcgV2Vha01hcCxFPW5ldyBXZWFrTWFwO2NsYXNzIHp7Y29uc3RydWN0b3IoKXtyKHRoaXMsImZyb250Tm9kZSIsbnVsbCk7cih0aGlzLCJiYWNrTm9kZSIsbnVsbCk7eCh0aGlzLHcsMCl9cHVzaCh0KXtjb25zdCBlPW5ldyAkKHQpO3RoaXMuaXNFbXB0eT8odGhpcy5mcm9udE5vZGU9ZSx0aGlzLmJhY2tOb2RlPWUpOih0aGlzLmJhY2tOb2RlLnNldE5leHROb2RlKGUpLHRoaXMuYmFja05vZGU9ZSksTSh0aGlzLHcpLl8rK31wb3AoKXtjb25zdCB0PXRoaXMuZnJvbnQ7aWYodGhpcy5mcm9udE5vZGU9PT1udWxsKXJldHVybjtjb25zdHtuZXh0Tm9kZTplfT10aGlzLmZyb250Tm9kZTtyZXR1cm4gdGhpcy5mcm9udE5vZGU9ZSxNKHRoaXMsdykuXy0tLHR9Z2V0IGZyb250KCl7aWYodGhpcy5mcm9udE5vZGUhPT1udWxsKXJldHVybiB0aGlzLmZyb250Tm9kZS52YWx1ZX1nZXQgc2l6ZSgpe3JldHVybiBoKHRoaXMsdyl9Z2V0IGlzRW1wdHkoKXtyZXR1cm4gaCh0aGlzLHcpPT09MH19dz1uZXcgV2Vha01hcDtjb25zdCBOPWNsYXNzIE57Y29uc3RydWN0b3IodCxlLGkpe3IodGhpcywicGl4ZWxRdWV1ZSIsbmV3IHopO3IodGhpcywicGl4ZWxDaGVja2VyIik7cih0aGlzLCJwcmV2aW91c0NvbG9yIik7cih0aGlzLCJuZXdDb2xvciIpO3IodGhpcywiaW1hZ2UiKTt0aGlzLnByZXZpb3VzQ29sb3I9dCx0aGlzLm5ld0NvbG9yPWUsdGhpcy5pbWFnZT1pLHRoaXMucGl4ZWxDaGVja2VyPW5ldyBZKGkpfWNoZWNrUGl4ZWwodCl7Y29uc3QgZT10aGlzLnBpeGVsQ2hlY2tlci5pc0ZyZWUodCk7cmV0dXJuIGUmJnRoaXMucGl4ZWxDaGVja2VyLmNoZWNrKHQpLGV9bW92ZUFyb3VuZCh0KXtmb3IobGV0IGU9MDtlPDQ7ZSsrKXtjb25zdCBpPXQueCtOLlhfQVhJU1tlXSxzPXQueStOLllfQVhJU1tlXSxjPXRoaXMuaW1hZ2UuZ2V0UGl4ZW