@ninesstudios/whiteboard 0.0.9 β†’ 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/whiteboard.es.js +1 -1
  2. package/dist/whiteboard.umd.js +1 -1
  3. package/package.json +1 -1
package/dist/whiteboard.es.js CHANGED
@@ -3456,7 +3456,7 @@ const Bi = /* @__PURE__ */ new Set([
3456
3456
  }, Gi = (e) => (t) => (r) => {
3457
3457
  var i;
3458
3458
  const n = t(r);
3459
- return !((i = r.meta) != null && i.fromRemote) && pr && qi(r) && pr(r), n;
3459
+ return !((i = r.meta) != null && i.fromRemote) && pr && qi(r) && pr(r, e.getState()), n;
3460
3460
  }, Ki = Ei({
3461
3461
  reducer: {
3462
3462
  whiteboard: Xi
package/dist/whiteboard.umd.js CHANGED
@@ -96,4 +96,4 @@ Take a look at the logic that dispatched this action: `,c,`
96
96
  (See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)`,`
97
97
  (To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)`)}}),E||(j.measureTime(function(){var Y=P.getState(),Z=yr(Y,"",r,n,l,k);if(Z){var q=Z.keyPath,H=Z.value;console.error("A non-serializable value was detected in the state, in the path: `"+q+"`. Value:",H,`
98
98
  Take a look at the reducer(s) handling this action type: `+c.type+`.
99
- (See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)`)}}),j.warnIfExceeded()),R}}}}function Rt(e){return typeof e=="boolean"}function pi(){return function(t){return vi(t)}}function vi(e){e===void 0&&(e={});var t=e.thunk,r=t===void 0?!0:t,n=e.immutableCheck,i=n===void 0?!0:n,a=e.serializableCheck,f=a===void 0?!0:a,h=e.actionCreatorCheck,p=h===void 0?!0:h,l=new ii;if(r&&(Rt(r)?l.push(hr):l.push(hr.withExtraArgument(r.extraArgument))),process.env.NODE_ENV!=="production"){if(i){var u={};Rt(i)||(u=i),l.unshift(di(u))}if(f){var g={};Rt(f)||(g=f),l.push(hi(g))}if(p){var m={};Rt(p)||(m=p),l.unshift(oi(m))}}return l}var gr=process.env.NODE_ENV==="production";function yi(e){var t=pi(),r=e||{},n=r.reducer,i=n===void 0?void 0:n,a=r.middleware,f=a===void 0?t():a,h=r.devTools,p=h===void 0?!0:h,l=r.preloadedState,u=l===void 0?void 0:l,g=r.enhancers,m=g===void 0?void 0:g,E;if(typeof i=="function")E=i;else if(wn(i))E=Bo(i);else throw new Error('"reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers');var v=f;if(typeof v=="function"&&(v=v(t),!gr&&!Array.isArray(v)))throw new Error("when using a middleware builder function, an array of middleware must be returned");if(!gr&&v.some(function(N){return typeof N!="function"}))throw new Error("each middleware provided to configureStore must be a function");var d=Uo.apply(void 0,v),S=kt;p&&(S=ei(ze({trace:!gr},typeof p=="object"&&p)));var T=new ai(d),k=T;Array.isArray(m)?k=it([d],m):typeof m=="function"&&(k=m(T));var P=S.apply(void 0,k);return pn(E,u,P)}function Pn(e){var t={},r=[],n,i={addCase:function(a,f){if(process.env.NODE_ENV!=="production"){if(r.length>0)throw new Error("`builder.addCase` should only be called before calling `builder.addMatcher`");if(n)throw new Error("`builder.addCase` should only be called before calling `builder.addDefaultCase`")}var h=typeof a=="string"?a:a.type;if(!h)throw new Error("`builder.addCase` cannot be called with an empty action type");if(h in t)throw new Error("`builder.addCase` cannot be called with two reducers for the same action type");return t[h]=f,i},addMatcher:function(a,f){if(process.env.NODE_ENV!=="production"&&n)throw new Error("`builder.addMatcher` should only be called before calling `builder.addDefaultCase`");return r.push({matcher:a,reducer:f}),i},addDefaultCase:function(a){if(process.env.NODE_ENV!=="production"&&n)throw new Error("`builder.addDefaultCase` can only be called once");return n=a,i}};return e(i),[t,r,n]}function gi(e){return typeof e=="function"}var Tn=!1;function mi(e,t,r,n){r===void 0&&(r=[]),process.env.NODE_ENV!=="production"&&typeof t=="object"&&(Tn||(Tn=!0,console.warn("The object notation for `createReducer` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer")));var i=typeof t=="function"?Pn(t):[t,r,n],a=i[0],f=i[1],h=i[2],p;if(gi(e))p=function(){return vr(e())};else{var l=vr(e);p=function(){return l}}function u(g,m){g===void 0&&(g=p());var E=it([a[m.type]],f.filter(function(v){var d=v.matcher;return d(m)}).map(function(v){var d=v.reducer;return d}));return E.filter(function(v){return!!v}).length===0&&(E=[h]),E.reduce(function(v,d){if(d)if(Ae(v)){var S=v,T=d(S,m);return T===void 0?v:T}else{if(je(v))return ln(v,function(k){return d(k,m)});var T=d(v,m);if(T===void 0){if(v===null)return v;throw Error("A case reducer on a non-draftable value must not return undefined")}return T}return v},g)}return u.getInitialState=p,u}var Mn=!1;function bi(e,t){return e+"/"+t}function wi(e){var t=e.name;typeof process<"u"&&process.env.NODE_ENV==="development"&&e.initialState===void 0&&console.error("You must provide an `initialState` value that is not `undefined`. You may have misspelled `initialState`");var r=typeof e.initialState=="function"?e.initialState:vr(e.initialState),n=e.reducers||{},i=Object.keys(n),a={},f={},h={};i.forEach(function(u){var g=n[u],m=bi(t,u),E,v;"reducer"in g?(E=g.reducer,v=g.prepare):E=g,a[u]=E,f[m]=E,h[u]=v?We(m,v):We(m)});function p(){process.env.NODE_ENV!=="production"&&typeof e.extraReducers=="object"&&(Mn||(Mn=!0,console.warn("The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice")));var u=typeof e.extraReducers=="function"?Pn(e.extraReducers):[e.extraReducers],g=u[0],m=g===void 0?{}:g,E=u[1],v=E===void 0?[]:E,d=u[2],S=d===void 0?void 0:d,T=ze(ze({},m),f);return mi(r,function(k){for(var P in T)k.addCase(P,T[P]);for(var N=0,c=v;N<c.length;N++){var R=c[N];k.addMatcher(R.matcher,R.reducer)}S&&k.addDefaultCase(S)})}var l;return{name:t,reducer:function(u,g){return l||(l=p()),l(u,g)},actions:h,caseReducers:a,getInitialState:function(){return l||(l=p()),l.getInitialState()}}}var xi="ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW",Ei=function(e){e===void 0&&(e=21);for(var t="",r=e;r--;)t+=xi[Math.random()*64|0];return t},Si=["name","message","stack","code"],mr=(function(){function e(t,r){this.payload=t,this.meta=r}return e})(),kn=(function(){function e(t,r){this.payload=t,this.meta=r}return e})(),Ci=function(e){if(typeof e=="object"&&e!==null){for(var t={},r=0,n=Si;r<n.length;r++){var i=n[r];typeof e[i]=="string"&&(t[i]=e[i])}return t}return{message:String(e)}};(function(){function e(t,r,n){var i=We(t+"/fulfilled",function(u,g,m,E){return{payload:u,meta:pr(ze({},E||{}),{arg:m,requestId:g,requestStatus:"fulfilled"})}}),a=We(t+"/pending",function(u,g,m){return{payload:void 0,meta:pr(ze({},m||{}),{arg:g,requestId:u,requestStatus:"pending"})}}),f=We(t+"/rejected",function(u,g,m,E,v){return{payload:E,error:(n&&n.serializeError||Ci)(u||"Rejected"),meta:pr(ze({},v||{}),{arg:m,requestId:g,rejectedWithValue:!!E,requestStatus:"rejected",aborted:(u==null?void 0:u.name)==="AbortError",condition:(u==null?void 0:u.name)==="ConditionError"})}}),h=!1,p=typeof AbortController<"u"?AbortController:(function(){function u(){this.signal={aborted:!1,addEventListener:function(){},dispatchEvent:function(){return!1},onabort:function(){},removeEventListener:function(){},reason:void 0,throwIfAborted:function(){}}}return u.prototype.abort=function(){process.env.NODE_ENV!=="production"&&(h||(h=!0,console.info("This platform does not implement AbortController. \nIf you want to use the AbortController to react to `abort` events, please consider importing a polyfill like 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'.")))},u})();function l(u){return function(g,m,E){var v=n!=null&&n.idGenerator?n.idGenerator(u):Ei(),d=new p,S;function T(P){S=P,d.abort()}var k=(function(){return Qo(this,null,function(){var P,N,c,R,j,Y,Z;return qo(this,function(q){switch(q.label){case 0:return q.trys.push([0,4,,5]),R=(P=n==null?void 0:n.condition)==null?void 0:P.call(n,u,{getState:m,extra:E}),Oi(R)?[4,R]:[3,2];case 1:R=q.sent(),q.label=2;case 2:if(R===!1||d.signal.aborted)throw{name:"ConditionError",message:"Aborted due to condition callback returning false."};return j=new Promise(function(H,ie){return d.signal.addEventListener("abort",function(){return ie({name:"AbortError",message:S||"Aborted"})})}),g(a(v,u,(N=n==null?void 0:n.getPendingMeta)==null?void 0:N.call(n,{requestId:v,arg:u},{getState:m,extra:E}))),[4,Promise.race([j,Promise.resolve(r(u,{dispatch:g,getState:m,extra:E,requestId:v,signal:d.signal,abort:T,rejectWithValue:function(H,ie){return new mr(H,ie)},fulfillWithValue:function(H,ie){return new kn(H,ie)}})).then(function(H){if(H instanceof mr)throw H;return H instanceof kn?i(H.payload,v,u,H.meta):i(H,v,u)})])];case 3:return c=q.sent(),[3,5];case 4:return Y=q.sent(),c=Y instanceof mr?f(null,v,u,Y.payload,Y.meta):f(Y,v,u),[3,5];case 5:return Z=n&&!n.dispatchConditionRejection&&f.match(c)&&c.meta.condition,Z||g(c),[2,c]}})})})();return Object.assign(k,{abort:T,requestId:v,arg:u,unwrap:function(){return k.then(_i)}})}}return Object.assign(l,{pending:a,rejected:f,fulfilled:i,typePrefix:t})}return e.withTypes=function(){return e},e})();function _i(e){if(e.meta&&e.meta.rejectedWithValue)throw e.payload;if(e.error)throw e.error;return e.payload}function Oi(e){return e!==null&&typeof e=="object"&&typeof e.then=="function"}var br="listenerMiddleware";We(br+"/add"),We(br+"/removeAll"),We(br+"/remove");var Rn;typeof queueMicrotask=="function"&&queueMicrotask.bind(typeof window<"u"?window:typeof global<"u"?global:globalThis),Mo();function ji(e){const t=[],r=new Set;for(const n of e){const i=n==null?void 0:n.id;if(i==null){t.push(n);continue}r.has(i)||(r.add(i),t.push(n))}return t}const wr=wi({name:"whiteboard",initialState:{grid:{size:20,color:"#ccc",enabled:!0},toolbar:{selectedTool:"pointer"},toolProperties:{pencil:{strokeColor:"#000000",lineWidth:4},rectangle:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},circle:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},triangle:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},diamond:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},star:{strokeColor:"#000000",fillColor:"#ffff00",lineWidth:2},heart:{strokeColor:"#000000",fillColor:"#ff6b6b",lineWidth:2},hexagon:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},octagon:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},arrow:{strokeColor:"#000000",fillColor:"#000000",lineWidth:2},text:{fontSize:16,fontColor:"#000000"}},elements:[],selectedElementId:null,viewport:{panX:0,panY:0,zoom:1},watermark:{text:"Nines Studios",url:"https://github.com/huzeyfecoskun",visible:!0},lock:{isLocked:!0,text:"Whiteboard drawing is only for moderator"}},reducers:{toggleGrid(e){e.grid.enabled=!e.grid.enabled},setGridSize(e,t){e.grid.size=t.payload},setGridColor(e,t){e.grid.color=t.payload},setSelectedTool(e,t){e.toolbar.selectedTool=t.payload},setToolProperty(e,t){const{tool:r,property:n,value:i}=t.payload;e.toolProperties[r]&&(e.toolProperties[r][n]=i)},addElement(e,t){const r=t.payload,n=r==null?void 0:r.id;n!=null&&e.elements.some(a=>(a==null?void 0:a.id)===n)||e.elements.push(r)},updateElement(e,t){const{id:r,updates:n}=t.payload,i=e.elements.findIndex(a=>a.id===r);i!==-1&&(e.elements[i]={...e.elements[i],...n})},removeElement(e,t){const r=t.payload;e.elements=e.elements.filter(n=>n.id!==r),e.selectedElementId===r&&(e.selectedElementId=null)},setSelectedElement(e,t){e.selectedElementId=t.payload},clearElements(e){e.elements=[]},setElements(e,t){const r=Array.isArray(t.payload)?t.payload:[];e.elements=ji(r),e.selectedElementId=null},setPan(e,t){e.viewport.panX=t.payload.x,e.viewport.panY=t.payload.y},setZoom(e,t){e.viewport.zoom=Math.max(.1,Math.min(5,t.payload))},resetViewport(e){e.viewport.panX=0,e.viewport.panY=0,e.viewport.zoom=1},bringToFront(e,t){const r=t.payload,n=e.elements.findIndex(i=>i.id===r);if(n!==-1&&n<e.elements.length-1){const[i]=e.elements.splice(n,1);e.elements.push(i)}},sendToBack(e,t){const r=t.payload,n=e.elements.findIndex(i=>i.id===r);if(n>0){const[i]=e.elements.splice(n,1);e.elements.unshift(i)}},fitToView(e,t){const{canvasWidth:r,canvasHeight:n,padding:i=50}=t.payload,a=e.elements;if(a.length===0){e.viewport.panX=0,e.viewport.panY=0,e.viewport.zoom=1;return}let f=1/0,h=1/0,p=-1/0,l=-1/0;a.forEach(c=>{c.type==="rectangle"?(f=Math.min(f,c.x),h=Math.min(h,c.y),p=Math.max(p,c.x+c.width),l=Math.max(l,c.y+c.height)):c.type==="circle"?(f=Math.min(f,c.centerX-c.radius),h=Math.min(h,c.centerY-c.radius),p=Math.max(p,c.centerX+c.radius),l=Math.max(l,c.centerY+c.radius)):c.type==="pencil"&&c.points.length>0?c.points.forEach(R=>{f=Math.min(f,R.x),h=Math.min(h,R.y),p=Math.max(p,R.x),l=Math.max(l,R.y)}):c.type==="triangle"||c.type==="diamond"||c.type==="hexagon"||c.type==="octagon"?(f=Math.min(f,c.x),h=Math.min(h,c.y),p=Math.max(p,c.x+c.width),l=Math.max(l,c.y+c.height)):c.type==="star"||c.type==="heart"?(f=Math.min(f,c.centerX-c.size),h=Math.min(h,c.centerY-c.size),p=Math.max(p,c.centerX+c.size),l=Math.max(l,c.centerY+c.size)):c.type==="arrow"&&(f=Math.min(f,c.startX,c.endX),h=Math.min(h,c.startY,c.endY),p=Math.max(p,c.startX,c.endX),l=Math.max(l,c.startY,c.endY))});const u=p-f,g=l-h;if(u<=0||g<=0)return;const m=r-i*2,E=n-i*2,v=m/u,d=E/g,S=Math.min(v,d,5),T=(f+p)/2,k=(h+l)/2,P=r/2-T*S,N=n/2-k*S;e.viewport.zoom=Math.max(.1,S),e.viewport.panX=P,e.viewport.panY=N},setLocked(e,t){e.lock.isLocked=t.payload,t.payload&&(e.toolbar.selectedTool="pointer",e.selectedElementId=null)},setWatermarkEnabled(e,t){e.watermark.visible=t.payload},setWatermarkText(e,t){e.watermark.text=t.payload}}}),{toggleGrid:_a,setGridSize:Oa,setGridColor:ja,setSelectedTool:Pe,setToolProperty:Pi,addElement:ve,updateElement:gt,removeElement:Ti,setSelectedElement:mt,clearElements:Nn,setElements:An,setPan:Mi,setZoom:ki,resetViewport:Pa,fitToView:Ri,bringToFront:Ni,sendToBack:Ai,setLocked:In,setWatermarkEnabled:Ii,setWatermarkText:Di}=wr.actions,zi=wr.actions,Dn=wr.reducer;let xr=null;const Wi=new Set(["rectangle","circle","pencil","triangle","diamond","star","heart","hexagon","octagon","arrow","text"]),Li=new Set(["strokeColor","fillColor","lineWidth","fontSize","fontColor","textColor"]),Yi=e=>{var t,r;if(!e||typeof e.type!="string"||e.type.startsWith("@@redux/"))return!1;if(e.type==="whiteboard/addElement"){const n=(t=e==null?void 0:e.payload)==null?void 0:t.type;return typeof n=="string"&&Wi.has(n)}if(e.type==="whiteboard/removeElement"||e.type==="whiteboard/clearElements"||e.type==="whiteboard/bringToFront"||e.type==="whiteboard/sendToBack")return!0;if(e.type==="whiteboard/setToolProperty"){const{tool:n,property:i}=(e==null?void 0:e.payload)??{};return typeof n!="string"||typeof i!="string"?!1:Li.has(i)}if(e.type==="whiteboard/updateElement"){const n=(r=e==null?void 0:e.payload)==null?void 0:r.updates;if(!n||typeof n!="object")return!1;const i=a=>Object.prototype.hasOwnProperty.call(n,a);return!!(i("text")||i("fontSize")||i("fontColor")||i("textColor")||i("strokeColor")||i("fillColor")||i("lineWidth")||i("x")||i("y")||i("centerX")||i("centerY")||i("startX")||i("startY")||i("endX")||i("endY")||i("points"))}return!1},Vi=e=>{xr=e},$i=e=>t=>r=>{var i;const n=t(r);return!((i=r.meta)!=null&&i.fromRemote)&&xr&&Yi(r)&&xr(r),n},zn=yi({reducer:{whiteboard:Dn},middleware:e=>e().concat($i)}),Fi=()=>{const e=oe(t=>t.whiteboard.watermark);return w.jsx("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",children:w.jsx("div",{className:"wb-watermark",children:e.text})})};var Wn={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},Ln=M.createContext&&M.createContext(Wn),Xi=["attr","size","title"];function Bi(e,t){if(e==null)return{};var r=Ui(e,t),n,i;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function Ui(e,t){if(e==null)return{};var r={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(t.indexOf(n)>=0)continue;r[n]=e[n]}return r}function Nt(){return Nt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},Nt.apply(this,arguments)}function Yn(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),r.push.apply(r,n)}return r}function At(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?Yn(Object(r),!0).forEach(function(n){qi(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Yn(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function qi(e,t,r){return t=Hi(t),t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Hi(e){var t=Gi(e,"string");return typeof t=="symbol"?t:t+""}function Gi(e,t){if(typeof e!="object"||!e)return e;var r=e[Symbol.toPrimitive];if(r!==void 0){var n=r.call(e,t);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function Vn(e){return e&&e.map((t,r)=>M.createElement(t.tag,At({key:r},t.attr),Vn(t.child)))}function Q(e){return t=>M.createElement(Ki,Nt({attr:At({},e.attr)},t),Vn(e.child))}function Ki(e){var t=r=>{var{attr:n,size:i,title:a}=e,f=Bi(e,Xi),h=i||r.size||"1em",p;return r.className&&(p=r.className),e.className&&(p=(p?p+" ":"")+e.className),M.createElement("svg",Nt({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,n,f,{className:p,style:At(At({color:e.color||r.color},r.style),e.style),height:h,width:h,xmlns:"http://www.w3.org/2000/svg"}),a&&M.createElement("title",null,a),e.children)};return Ln!==void 0?M.createElement(Ln.Consumer,null,r=>t(r)):t(Wn)}function Ji(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"},child:[]}]})(e)}function Zi(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"},child:[]}]})(e)}function Qi(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"},child:[]}]})(e)}function ea(e){return Q({attr:{viewBox:"0 0 496 512"},child:[{tag:"path",attr:{d:"M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"},child:[]}]})(e)}function ta(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"},child:[]}]})(e)}function ra(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"},child:[]}]})(e)}function na(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"},child:[]}]})(e)}function oa(e){return Q({attr:{viewBox:"0 0 320 512"},child:[{tag:"path",attr:{d:"M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z"},child:[]}]})(e)}function ia(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"},child:[]}]})(e)}function aa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"},child:[]}]})(e)}function sa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"},child:[]}]})(e)}function ca(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"},child:[]}]})(e)}function la(e){return Q({attr:{viewBox:"0 0 576 512"},child:[{tag:"path",attr:{d:"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"},child:[]}]})(e)}const ua=({text:e})=>w.jsxs("div",{style:{position:"absolute",top:"10px",left:"10px",backgroundColor:"rgba(255, 68, 68, 0.9)",color:"white",padding:"8px 16px",borderRadius:"4px",display:"flex",alignItems:"center",gap:"8px",boxShadow:"0 2px 4px rgba(0,0,0,0.2)",zIndex:1e3,pointerEvents:"none",userSelect:"none",fontFamily:"sans-serif",fontSize:"14px",fontWeight:"500"},children:[w.jsx(na,{}),w.jsx("span",{children:e||"Locked"})]});function fa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"},child:[]}]})(e)}function da(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M284.3 11.7c-15.6-15.6-40.9-15.6-56.6 0l-216 216c-15.6 15.6-15.6 40.9 0 56.6l216 216c15.6 15.6 40.9 15.6 56.6 0l216-216c15.6-15.6 15.6-40.9 0-56.6l-216-216z"},child:[]}]})(e)}function ha(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"},child:[]}]})(e)}function pa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"},child:[]}]})(e)}function va(e){return Q({attr:{viewBox:"0 0 384 512"},child:[{tag:"path",attr:{d:"M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l128 0 0 352c0 17.7 14.3 32 32 32s32-14.3 32-32l0-352 128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 32 32 32z"},child:[]}]})(e)}function ya(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M144 144c0-44.2 35.8-80 80-80c31.9 0 59.4 18.6 72.3 45.7c7.6 16 26.7 22.8 42.6 15.2s22.8-26.7 15.2-42.6C331 33.7 281.5 0 224 0C144.5 0 80 64.5 80 144l0 48-16 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-240 0 0-48z"},child:[]}]})(e)}function ga(e){return Q({attr:{fill:"currentColor",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{fillRule:"evenodd",d:"M8.5.134a1 1 0 0 0-1 0l-6 3.577a1 1 0 0 0-.5.866v6.846a1 1 0 0 0 .5.866l6 3.577a1 1 0 0 0 1 0l6-3.577a1 1 0 0 0 .5-.866V4.577a1 1 0 0 0-.5-.866z"},child:[]}]})(e)}function ma(e){return Q({attr:{fill:"currentColor",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M11.107 0a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146A.5.5 0 0 1 4.893 0z"},child:[]}]})(e)}const ba=({onExport:e,onFitToView:t,mode:r})=>{const n=Jt(),{t:i,language:a,changeLanguage:f}=Kr(),h=oe(R=>R.whiteboard.toolbar.selectedTool),p=oe(R=>R.whiteboard.lock.isLocked),[l,u]=M.useState(!1),[g,m]=M.useState(!1),E=M.useRef(null),v=M.useRef(null),d=M.useRef(null),S=M.useRef(null),T=M.useRef(null),k=R=>{const j=R.target.files[0];if(!j)return;const Y=new FileReader;Y.onload=Z=>{const q=new Image;q.onload=()=>{const H=Date.now().toString();n(ve({id:H,type:"image",x:100,y:100,width:q.width,height:q.height,src:Z.target.result})),n(Pe("pointer")),n(mt(H))},q.src=Z.target.result},Y.readAsDataURL(j),R.target.value=""};M.useEffect(()=>{const R=j=>{E.current&&!E.current.contains(j.target)&&v.current&&!v.current.contains(j.target)&&u(!1),S.current&&!S.current.contains(j.target)&&d.current&&!d.current.contains(j.target)&&m(!1)};return document.addEventListener("mousedown",R),()=>document.removeEventListener("mousedown",R)},[]);const P=[{name:"triangle",icon:w.jsx(aa,{style:{transform:"rotate(-30deg)"}})},{name:"diamond",icon:w.jsx(da,{})},{name:"star",icon:w.jsx(la,{})},{name:"heart",icon:w.jsx(ta,{})},{name:"hexagon",icon:w.jsx(ga,{})},{name:"octagon",icon:w.jsx(ma,{})},{name:"arrow",icon:w.jsx(fa,{})}],N=R=>{n(Pe(R)),u(!1)},c=R=>{f(R),m(!1)};return w.jsxs("div",{className:"wb-toolbar",children:[w.jsx("button",{className:h==="pointer"?"wb-active":"",onClick:()=>n(Pe("pointer")),title:i("pointer"),disabled:p,children:w.jsx(oa,{})}),w.jsx("button",{className:h==="text"?"wb-active":"",onClick:()=>n(Pe("text")),title:i("text"),disabled:p,children:w.jsx(va,{})}),w.jsx("button",{onClick:()=>{var R;return(R=T.current)==null?void 0:R.click()},title:i("image"),disabled:p,children:w.jsx(ra,{})}),w.jsx("input",{type:"file",ref:T,style:{display:"none"},accept:"image/*",onChange:k}),w.jsx("button",{className:h==="pencil"?"wb-active":"",onClick:()=>n(Pe("pencil")),title:i("pencil"),disabled:p,children:w.jsx(ia,{})}),w.jsx("button",{className:h==="rectangle"?"wb-active":"",onClick:()=>n(Pe("rectangle")),title:i("rectangle"),disabled:p,children:w.jsx(ca,{})}),w.jsx("button",{className:h==="circle"?"wb-active":"",onClick:()=>n(Pe("circle")),title:i("circle"),disabled:p,children:w.jsx(Ji,{})}),w.jsxs("div",{className:"wb-ellipsis-container",children:[w.jsx("button",{ref:v,className:P.some(R=>R.name===h)?"wb-active":"",onClick:()=>u(!l),title:i("moreShapes"),disabled:p,children:w.jsx(ha,{})}),l&&w.jsxs("div",{className:"wb-shapes-popup",ref:E,children:[w.jsx("div",{className:"wb-shapes-popup-header",children:i("moreShapes")}),w.jsx("div",{className:"wb-shapes-popup-grid",children:P.map(R=>w.jsx("button",{className:h===R.name?"wb-active":"",onClick:()=>N(R.name),title:i(R.name),children:R.icon},R.name))})]})]}),w.jsx("button",{className:h==="eraser"?"wb-active":"",onClick:()=>n(Pe("eraser")),title:i("eraser"),disabled:p,children:w.jsx(Zi,{})}),w.jsx("button",{onClick:t,title:i("fitToView"),children:w.jsx(Qi,{})}),w.jsx("button",{onClick:e,title:i("exportAsPng"),children:w.jsx(sa,{})}),w.jsxs("div",{className:"wb-language-container",children:[w.jsx("button",{ref:d,onClick:()=>m(!g),title:i("language"),children:w.jsx(ea,{})}),g&&w.jsxs("div",{className:"wb-language-popup",ref:S,children:[w.jsx("div",{className:"wb-language-popup-header",children:i("language")}),w.jsxs("div",{className:"wb-language-options",children:[w.jsxs("button",{className:a==="en"?"wb-active":"",onClick:()=>c("en"),children:["πŸ‡ΊπŸ‡Έ ",i("english")]}),w.jsxs("button",{className:a==="tr"?"wb-active":"",onClick:()=>c("tr"),children:["πŸ‡ΉπŸ‡· ",i("turkish")]})]})]})]}),r==="moderator"&&w.jsx("button",{onClick:()=>n(In(!p)),title:p?"Unlock":"Lock",style:{color:p?"red":"inherit"},children:p?w.jsx(pa,{}):w.jsx(ya,{})})]})},wa=()=>{const e=Jt(),{t}=Kr(),r=oe(g=>g.whiteboard.toolbar.selectedTool),n=oe(g=>g.whiteboard.toolProperties),i=oe(g=>g.whiteboard.selectedElementId),a=oe(g=>g.whiteboard.elements),f=i?a.find(g=>g.id===i):null,h=(g,m,E)=>{e(Pi({tool:g,property:m,value:E}))},p=(g,m)=>{i&&e(gt({id:i,updates:{[g]:m}}))},l=()=>{i&&e(Ni(i))},u=()=>{i&&e(Ai(i))};if(r==="pointer"&&f&&f.type==="text")return w.jsxs("div",{className:"wb-prop-tools",children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontSize")}),w.jsxs("select",{className:"font-size-selector",value:f.fontSize||16,onChange:g=>p("fontSize",parseInt(g.target.value)),children:[w.jsx("option",{value:"12",children:"12 px"}),w.jsx("option",{value:"14",children:"14 px"}),w.jsx("option",{value:"16",children:"16 px"}),w.jsx("option",{value:"18",children:"18 px"}),w.jsx("option",{value:"24",children:"24 px"}),w.jsx("option",{value:"32",children:"32 px"}),w.jsx("option",{value:"48",children:"48 px"}),w.jsx("option",{value:"64",children:"64 px"}),w.jsx("option",{value:"72",children:"72 px"})]})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontColor")}),w.jsx("input",{type:"color",value:f.fontColor||"#000000",onChange:g=>p("fontColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("layerOrder")}),w.jsxs("div",{className:"wb-layer-buttons",children:[w.jsx("button",{onClick:l,title:t("bringToFront"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"white"})]})}),w.jsx("button",{onClick:u,title:t("sendToBack"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"white"})]})})]})]})]});if(r==="pointer"&&f){const g=["rectangle","circle","triangle","diamond","star","heart","hexagon","octagon","arrow"].includes(f.type),m=f.type==="pencil";return w.jsxs("div",{className:"wb-prop-tools",children:[g&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeColor")}),w.jsx("input",{type:"color",value:f.strokeColor,onChange:E=>p("strokeColor",E.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fillColor")}),w.jsx("input",{type:"color",value:f.fillColor,onChange:E=>p("fillColor",E.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeWidth")}),w.jsxs("select",{className:"stroke-width-selector",value:f.lineWidth,onChange:E=>p("lineWidth",parseInt(E.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"})]})]})]}),m&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushColor")}),w.jsx("input",{type:"color",value:f.strokeColor,onChange:E=>p("strokeColor",E.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushSize")}),w.jsxs("select",{className:"brush-size-selector",value:f.lineWidth,onChange:E=>p("lineWidth",parseInt(E.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"}),w.jsx("option",{value:"16",children:"16 px"})]})]})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("layerOrder")}),w.jsxs("div",{className:"wb-layer-buttons",children:[w.jsx("button",{onClick:l,title:t("bringToFront"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"white"})]})}),w.jsx("button",{onClick:u,title:t("sendToBack"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"white"})]})})]})]})]})}return w.jsxs("div",{className:"wb-prop-tools",children:[r==="text"&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontSize")}),w.jsxs("select",{className:"font-size-selector",value:n.text.fontSize,onChange:g=>h("text","fontSize",parseInt(g.target.value)),children:[w.jsx("option",{value:"12",children:"12 px"}),w.jsx("option",{value:"14",children:"14 px"}),w.jsx("option",{value:"16",children:"16 px"}),w.jsx("option",{value:"18",children:"18 px"}),w.jsx("option",{value:"24",children:"24 px"}),w.jsx("option",{value:"32",children:"32 px"}),w.jsx("option",{value:"48",children:"48 px"}),w.jsx("option",{value:"64",children:"64 px"}),w.jsx("option",{value:"72",children:"72 px"})]})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontColor")}),w.jsx("input",{type:"color",value:n.text.fontColor,onChange:g=>h("text","fontColor",g.target.value)})]})]}),r==="pencil"&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushColor")}),w.jsx("input",{type:"color",value:n.pencil.strokeColor,onChange:g=>h("pencil","strokeColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushSize")}),w.jsxs("select",{className:"brush-size-selector",value:n.pencil.lineWidth,onChange:g=>h("pencil","lineWidth",parseInt(g.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"}),w.jsx("option",{value:"16",children:"16 px"})]})]})]}),(r==="rectangle"||r==="circle"||r==="triangle"||r==="diamond"||r==="star"||r==="heart"||r==="hexagon"||r==="octagon"||r==="arrow")&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeColor")}),w.jsx("input",{type:"color",value:n[r].strokeColor,onChange:g=>h(r,"strokeColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fillColor")}),w.jsx("input",{type:"color",value:n[r].fillColor,onChange:g=>h(r,"fillColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeWidth")}),w.jsxs("select",{className:"stroke-width-selector",value:n[r].lineWidth,onChange:g=>h(r,"lineWidth",parseInt(g.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"})]})]})]})]})},$n=M.forwardRef(({onAction:e,watermark:t,isLocked:r,lockText:n,onLockChange:i,isWatermarkEnabled:a,watermarkText:f,mode:h},p)=>{var Vt;const l=M.useRef(null),u=Jt(),g=oe(s=>s.whiteboard.grid),m=oe(s=>s.whiteboard.toolbar.selectedTool),E=oe(s=>s.whiteboard.elements),v=oe(s=>s.whiteboard.viewport),d=oe(s=>s.whiteboard.toolProperties),S=oe(s=>s.whiteboard.selectedElementId),T=oe(s=>s.whiteboard.lock),k=T.isLocked,[P,N]=M.useState(!1),[c,R]=M.useState({x:0,y:0}),[j,Y]=M.useState({x:0,y:0}),[Z,q]=M.useState([]),[H,ie]=M.useState(!1),[G,ee]=M.useState({x:0,y:0}),[fe,Te]=M.useState(!1),[Se,ye]=M.useState(!1),[be,we]=M.useState(!1),[Me,Le]=M.useState({x:0,y:0}),[ke,qe]=M.useState({y:0,initialZoom:1}),[Ye,ge]=M.useState(!1),[Ce,_e]=M.useState({x:0,y:0}),[ae,se]=M.useState(""),[ce,D]=M.useState(null),le=M.useRef(null),z=M.useRef(null),de=M.useCallback(s=>{ce&&s.trim()&&(le.current&&clearTimeout(le.current),le.current=setTimeout(()=>{ce&&s!==z.current&&(z.current=s,u(gt({id:ce,updates:{text:s}})))},150))},[u,ce]);M.useEffect(()=>()=>{le.current&&clearTimeout(le.current)},[]),M.useEffect(()=>{e&&Vi(e)},[e]),M.useImperativeHandle(p,()=>({canvas:l.current,applyAction:s=>{u({...s,meta:{...s.meta,fromRemote:!0}})},getElems:()=>E,getElements:()=>E,setElems:s=>{u({...An(s),meta:{fromRemote:!0}})},setElements:s=>{u({...An(s),meta:{fromRemote:!0}})},clearElems:()=>{u({...Nn(),meta:{fromRemote:!0}})},clearElements:()=>{u({...Nn(),meta:{fromRemote:!0}})}})),M.useEffect(()=>{r!==void 0&&r!==k&&u(In(r))},[r,k,u]),M.useEffect(()=>{i&&i(k)},[k,i]);const he=oe(s=>s.whiteboard.watermark);M.useEffect(()=>{a!==void 0&&a!==he.visible&&u(Ii(a))},[a,he.visible,u]),M.useEffect(()=>{f!==void 0&&f!==he.text&&u(Di(f))},[f,he.text,u]);const Ve=M.useCallback((s,b,C)=>{const o=s.canvas,y=o.width,x=o.height,O=Math.floor(-v.panX/v.zoom/b)*b,_=Math.floor(-v.panY/v.zoom/b)*b,A=Math.ceil((y/v.zoom-v.panX/v.zoom)/b)*b,W=Math.ceil((x/v.zoom-v.panY/v.zoom)/b)*b;s.strokeStyle=C,s.lineWidth=.5/v.zoom;for(let I=O;I<=A;I+=b)s.beginPath(),s.moveTo(I,_),s.lineTo(I,W),s.stroke();for(let I=_;I<=W;I+=b)s.beginPath(),s.moveTo(O,I),s.lineTo(A,I),s.stroke()},[v]),He=M.useCallback((s,b,C)=>{const o=Math.min(b.x,C.x),y=Math.min(b.y,C.y),x=Math.abs(C.x-b.x),O=Math.abs(C.y-b.y);s.strokeStyle="#0066cc",s.lineWidth=1,s.setLineDash([5,5]),s.strokeRect(o,y,x,O),s.fillStyle="rgba(0, 102, 204, 0.1)",s.fillRect(o,y,x,O),s.setLineDash([])},[]),at=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#000",strokeColor:_="#000",lineWidth:A=2}=b;s.fillStyle=O,s.fillRect(C,o,y,x),s.strokeStyle=_,s.lineWidth=A,s.strokeRect(C,o,y,x)},[]),Ge=M.useCallback((s,b)=>{const{centerX:C,centerY:o,radius:y,fillColor:x="#000",strokeColor:O="#000",lineWidth:_=2}=b;s.beginPath(),s.arc(C,o,y,0,Math.PI*2),s.fillStyle=x,s.fill(),s.strokeStyle=O,s.lineWidth=_,s.stroke()},[]),$e=M.useCallback((s,b)=>{const{points:C,strokeColor:o="#000",lineWidth:y=2}=b;if(!(C.length<2)){s.strokeStyle=o,s.lineWidth=y,s.lineCap="round",s.lineJoin="round",s.beginPath(),s.moveTo(C[0].x,C[0].y);for(let x=1;x<C.length;x++)s.lineTo(C[x].x,C[x].y);s.stroke()}},[]),It=M.useCallback((s,b)=>{const{x:C,y:o,text:y,fontSize:x=16,fontColor:O="#000"}=b;s.font=`${x}px sans-serif`,s.fillStyle=O,s.textBaseline="top",s.fillText(y,C,o)},[]),Ke=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b;s.beginPath(),s.moveTo(C+y/2,o),s.lineTo(C+y,o+x),s.lineTo(C,o+x),s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),Je=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b;s.beginPath(),s.moveTo(C+y/2,o),s.lineTo(C+y,o+x/2),s.lineTo(C+y/2,o+x),s.lineTo(C,o+x/2),s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),st=M.useCallback((s,b)=>{const{centerX:C,centerY:o,size:y,fillColor:x="#ffff00",strokeColor:O="#000",lineWidth:_=2}=b,A=5,W=y,I=y/2;s.beginPath();for(let U=0;U<A*2;U++){const V=U%2===0?W:I,L=Math.PI/A*U-Math.PI/2,J=C+Math.cos(L)*V,re=o+Math.sin(L)*V;U===0?s.moveTo(J,re):s.lineTo(J,re)}s.closePath(),s.fillStyle=x,s.fill(),s.strokeStyle=O,s.lineWidth=_,s.stroke()},[]),ct=M.useCallback((s,b)=>{const{centerX:C,centerY:o,size:y,fillColor:x="#ff6b6b",strokeColor:O="#000",lineWidth:_=2}=b;s.beginPath();const A=o-y/2;s.moveTo(C,A+y/4),s.bezierCurveTo(C-y/2,A,C-y,A+y/2,C,o+y/2),s.bezierCurveTo(C+y,A+y/2,C+y/2,A,C,A+y/4),s.fillStyle=x,s.fill(),s.strokeStyle=O,s.lineWidth=_,s.stroke()},[]),lt=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b,W=C+y/2,I=o+x/2,U=y/2,V=x/2;s.beginPath();for(let L=0;L<6;L++){const J=Math.PI/3*L-Math.PI/2,re=W+Math.cos(J)*U,xe=I+Math.sin(J)*V;L===0?s.moveTo(re,xe):s.lineTo(re,xe)}s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),ut=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b,W=C+y/2,I=o+x/2,U=y/2,V=x/2;s.beginPath();for(let L=0;L<8;L++){const J=Math.PI/4*L-Math.PI/2,re=W+Math.cos(J)*U,xe=I+Math.sin(J)*V;L===0?s.moveTo(re,xe):s.lineTo(re,xe)}s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),ft=M.useCallback((s,b)=>{const{startX:C,startY:o,endX:y,endY:x,fillColor:O="#000",strokeColor:_="#000",lineWidth:A=2}=b,W=15,I=Math.atan2(x-o,y-C);s.beginPath(),s.moveTo(C,o),s.lineTo(y,x),s.strokeStyle=_,s.lineWidth=A,s.stroke(),s.beginPath(),s.moveTo(y,x),s.lineTo(y-W*Math.cos(I-Math.PI/6),x-W*Math.sin(I-Math.PI/6)),s.lineTo(y-W*Math.cos(I+Math.PI/6),x-W*Math.sin(I+Math.PI/6)),s.closePath(),s.fillStyle=O,s.fill()},[]),dt=M.useRef({}),bt=M.useRef(null),ht=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,src:O}=b;if(dt.current[O]){const _=dt.current[O];_.complete&&s.drawImage(_,C,o,y,x)}else{const _=new Image;_.onload=()=>{dt.current[O]=_,bt.current&&bt.current()},_.src=O,dt.current[O]=_}},[]),Ze=M.useCallback((s,b)=>{switch(b.type){case"rectangle":at(s,b);break;case"circle":Ge(s,b);break;case"pencil":$e(s,b);break;case"text":It(s,b);break;case"triangle":Ke(s,b);break;case"diamond":Je(s,b);break;case"star":st(s,b);break;case"heart":ct(s,b);break;case"hexagon":lt(s,b);break;case"octagon":ut(s,b);break;case"arrow":ft(s,b);break;case"image":ht(s,b);break}},[at,Ge,$e,It,Ke,Je,st,ct,lt,ut,ft,ht]),Fe=M.useCallback(()=>{const s=l.current;if(!s)return;const b=document.createElement("canvas");b.width=s.width,b.height=s.height;const C=b.getContext("2d");C.fillStyle="#ffffff",C.fillRect(0,0,b.width,b.height),C.save(),C.translate(v.panX,v.panY),C.scale(v.zoom,v.zoom),E.forEach(x=>{Ze(C,x)}),C.restore();const o=b.toDataURL("image/png"),y=document.createElement("a");y.download=`whiteboard-${Date.now()}.png`,y.href=o,y.click()},[v,E,Ze]),wt=M.useCallback(()=>{const s=l.current;s&&u(Ri({canvasWidth:s.width,canvasHeight:s.height,padding:50}))},[u]),Qe=M.useCallback((s,b)=>{for(let C=E.length-1;C>=0;C--){const o=E[C];if(o.type==="rectangle"){if(s>=o.x&&s<=o.x+o.width&&b>=o.y&&b<=o.y+o.height)return o}else if(o.type==="circle"){if(Math.sqrt(Math.pow(s-o.centerX,2)+Math.pow(b-o.centerY,2))<=o.radius)return o}else if(o.type==="pencil")for(let x=1;x<o.points.length;x++){const O=o.points[x-1],_=o.points[x];if(xt(s,b,O.x,O.y,_.x,_.y)<=5)return o}else if(o.type==="text"){const y=o.fontSize||16,x=o.text.length*y*.6,O=y;if(s>=o.x&&s<=o.x+x&&b>=o.y&&b<=o.y+O)return o}else if(o.type==="triangle"||o.type==="diamond"||o.type==="hexagon"||o.type==="octagon"){if(s>=o.x&&s<=o.x+o.width&&b>=o.y&&b<=o.y+o.height)return o}else if(o.type==="star"||o.type==="heart"){if(Math.sqrt(Math.pow(s-o.centerX,2)+Math.pow(b-o.centerY,2))<=o.size)return o}else if(o.type==="arrow"){if(xt(s,b,o.startX,o.startY,o.endX,o.endY)<=10)return o}else if(o.type==="image"&&s>=o.x&&s<=o.x+o.width&&b>=o.y&&b<=o.y+o.height)return o}return null},[E]),xt=(s,b,C,o,y,x)=>{const O=s-C,_=b-o,A=y-C,W=x-o,I=O*A+_*W,U=A*A+W*W;let V=-1;U!==0&&(V=I/U);let L,J;V<0?(L=C,J=o):V>1?(L=y,J=x):(L=C+V*A,J=o+V*W);const re=s-L,xe=b-J;return Math.sqrt(re*re+xe*xe)},Dt=M.useCallback((s,b)=>{if(s.strokeStyle="#0066cc",s.lineWidth=2,s.setLineDash([5,5]),b.type==="rectangle")s.strokeRect(b.x-4,b.y-4,b.width+8,b.height+8);else if(b.type==="circle")s.beginPath(),s.arc(b.centerX,b.centerY,b.radius+4,0,Math.PI*2),s.stroke();else if(b.type==="pencil"&&b.points.length>0){const C=Math.min(...b.points.map(O=>O.x)),o=Math.max(...b.points.map(O=>O.x)),y=Math.min(...b.points.map(O=>O.y)),x=Math.max(...b.points.map(O=>O.y));s.strokeRect(C-4,y-4,o-C+8,x-y+8)}else if(b.type==="text"){const C=b.fontSize||16,o=b.text.length*C*.6,y=C;s.strokeRect(b.x-4,b.y-4,o+8,y+8)}else if(b.type==="triangle"||b.type==="diamond"||b.type==="hexagon"||b.type==="octagon")s.strokeRect(b.x-4,b.y-4,b.width+8,b.height+8);else if(b.type==="star"||b.type==="heart")s.beginPath(),s.arc(b.centerX,b.centerY,b.size+4,0,Math.PI*2),s.stroke();else if(b.type==="arrow"){const C=Math.min(b.startX,b.endX),o=Math.max(b.startX,b.endX),y=Math.min(b.startY,b.endY),x=Math.max(b.startY,b.endY);s.strokeRect(C-4,y-4,o-C+8,x-y+8)}else b.type==="image"&&s.strokeRect(b.x-4,b.y-4,b.width+8,b.height+8);s.setLineDash([])},[]),me=M.useCallback(()=>{const s=l.current;if(!s)return;const b=s.getContext("2d");b.clearRect(0,0,s.width,s.height),b.save(),b.translate(v.panX,v.panY),b.scale(v.zoom,v.zoom),g.enabled&&Ve(b,g.size,g.color),E.forEach(C=>{Ze(b,C),C.id===S&&Dt(b,C)}),b.restore()},[g,Ve,E,Ze,S,Dt,v]);M.useEffect(()=>{bt.current=me},[me]),M.useEffect(()=>{const s=l.current;if(!s)return;const b=s.parentElement;if(!b)return;const C=()=>{const y=b.getBoundingClientRect();s.width=y.width,s.height=y.height,me()};C();const o=new ResizeObserver(()=>{C()});return o.observe(b),()=>{o.disconnect()}},[me]),M.useEffect(()=>{me()},[me]),M.useEffect(()=>{const s=C=>{C.target.tagName==="INPUT"||C.target.tagName==="TEXTAREA"||C.code==="Space"&&!C.repeat&&(C.preventDefault(),Te(!0))},b=C=>{C.target.tagName==="INPUT"||C.target.tagName==="TEXTAREA"||C.code==="Space"&&(C.preventDefault(),Te(!1),ye(!1),we(!1))};return window.addEventListener("keydown",s),window.addEventListener("keyup",b),()=>{window.removeEventListener("keydown",s),window.removeEventListener("keyup",b)}},[]);const Et=M.useCallback((s,b)=>({x:(s-v.panX)/v.zoom,y:(b-v.panY)/v.zoom}),[v]);M.useEffect(()=>{const s=l.current;if(!s||!P)return;const b=s.getContext("2d");if(me(),b.save(),b.translate(v.panX,v.panY),b.scale(v.zoom,v.zoom),m==="pointer")He(b,c,j);else if(m==="rectangle"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);at(b,{x:C,y:o,width:y,height:x,strokeColor:d.rectangle.strokeColor,fillColor:d.rectangle.fillColor,lineWidth:d.rectangle.lineWidth})}else if(m==="circle"){const C=c.x,o=c.y,y=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));Ge(b,{centerX:C,centerY:o,radius:y,strokeColor:d.circle.strokeColor,fillColor:d.circle.fillColor,lineWidth:d.circle.lineWidth})}else if(m==="pencil")$e(b,{points:Z,strokeColor:d.pencil.strokeColor,lineWidth:d.pencil.lineWidth});else if(m==="triangle"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);Ke(b,{x:C,y:o,width:y,height:x,strokeColor:d.triangle.strokeColor,fillColor:d.triangle.fillColor,lineWidth:d.triangle.lineWidth})}else if(m==="diamond"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);Je(b,{x:C,y:o,width:y,height:x,strokeColor:d.diamond.strokeColor,fillColor:d.diamond.fillColor,lineWidth:d.diamond.lineWidth})}else if(m==="star"){const C=c.x,o=c.y,y=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));st(b,{centerX:C,centerY:o,size:y,strokeColor:d.star.strokeColor,fillColor:d.star.fillColor,lineWidth:d.star.lineWidth})}else if(m==="heart"){const C=c.x,o=c.y,y=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));ct(b,{centerX:C,centerY:o,size:y,strokeColor:d.heart.strokeColor,fillColor:d.heart.fillColor,lineWidth:d.heart.lineWidth})}else if(m==="hexagon"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);lt(b,{x:C,y:o,width:y,height:x,strokeColor:d.hexagon.strokeColor,fillColor:d.hexagon.fillColor,lineWidth:d.hexagon.lineWidth})}else if(m==="octagon"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);ut(b,{x:C,y:o,width:y,height:x,strokeColor:d.octagon.strokeColor,fillColor:d.octagon.fillColor,lineWidth:d.octagon.lineWidth})}else m==="arrow"&&ft(b,{startX:c.x,startY:c.y,endX:j.x,endY:j.y,strokeColor:d.arrow.strokeColor,fillColor:d.arrow.fillColor,lineWidth:d.arrow.lineWidth});b.restore()},[P,m,c,j,Z,me,He,at,Ge,$e,Ke,Je,st,ct,lt,ut,ft,v,d]);const zt=s=>{const C=l.current.getBoundingClientRect(),o=s.clientX-C.left,y=s.clientY-C.top;if(Ye)return;if(fe){s.preventDefault(),s.button===0?(ye(!0),Le({x:o-v.panX,y:y-v.panY})):s.button===2&&(we(!0),qe({y,initialZoom:v.zoom}));return}if(k)return;const{x,y:O}=Et(o,y);if(m==="pointer"){const _=Qe(x,O);if(_)if(u(mt(_.id)),ie(!0),_.type==="rectangle")ee({x:x-_.x,y:O-_.y});else if(_.type==="circle")ee({x:x-_.centerX,y:O-_.centerY});else if(_.type==="pencil"){const A=Math.min(..._.points.map(I=>I.x)),W=Math.min(..._.points.map(I=>I.y));ee({x:x-A,y:O-W})}else _.type==="text"?ee({x:x-_.x,y:O-_.y}):_.type==="triangle"||_.type==="diamond"||_.type==="hexagon"||_.type==="octagon"?ee({x:x-_.x,y:O-_.y}):_.type==="star"||_.type==="heart"?ee({x:x-_.centerX,y:O-_.centerY}):_.type==="arrow"?ee({x:x-_.startX,y:O-_.startY}):_.type==="image"&&ee({x:x-_.x,y:O-_.y});else u(mt(null)),N(!0),R({x,y:O}),Y({x,y:O})}else if(m==="text"){const _=Date.now().toString();u(ve({id:_,type:"text",x,y:O,text:"Text",fontSize:d.text.fontSize,fontColor:d.text.fontColor})),u(Pe("pointer")),u(mt(_))}else if(m==="eraser"){const _=Qe(x,O);_&&u(Ti(_.id))}else u(mt(null)),N(!0),R({x,y:O}),Y({x,y:O}),m==="pencil"&&q([{x,y:O}])},Wt=s=>{const C=l.current.getBoundingClientRect(),o=s.clientX-C.left,y=s.clientY-C.top;if(Se){u(Mi({x:o-Me.x,y:y-Me.y}));return}if(be){const _=ke.y-y,W=ke.initialZoom*(1+_*.005);u(ki(W));return}if(k)return;const{x,y:O}=Et(o,y);if(H&&S){const _=E.find(W=>W.id===S);if(!_)return;let A={};if(_.type==="rectangle")A={x:x-G.x,y:O-G.y};else if(_.type==="circle")A={centerX:x-G.x,centerY:O-G.y};else if(_.type==="pencil"){const W=Math.min(..._.points.map(L=>L.x)),I=Math.min(..._.points.map(L=>L.y)),U=x-G.x-W,V=O-G.y-I;A={points:_.points.map(L=>({x:L.x+U,y:L.y+V}))}}else if(_.type==="text")A={x:x-G.x,y:O-G.y};else if(_.type==="triangle"||_.type==="diamond"||_.type==="hexagon"||_.type==="octagon")A={x:x-G.x,y:O-G.y};else if(_.type==="star"||_.type==="heart")A={centerX:x-G.x,centerY:O-G.y};else if(_.type==="arrow"){const W=_.endX-_.startX,I=_.endY-_.startY;A={startX:x-G.x,startY:O-G.y,endX:x-G.x+W,endY:O-G.y+I}}else _.type==="image"&&(A={x:x-G.x,y:O-G.y});u(gt({id:S,updates:A}));return}P&&(Y({x,y:O}),m==="pencil"&&q(_=>[..._,{x,y:O}]))},Lt=()=>{if(Se||be){ye(!1),we(!1);return}if(k){ie(!1),N(!1);return}if(H){ie(!1);return}if(P){if(m==="pointer")me();else if(m==="rectangle"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"rectangle",x:s,y:b,width:C,height:o,strokeColor:d.rectangle.strokeColor,fillColor:d.rectangle.fillColor,lineWidth:d.rectangle.lineWidth}))}else if(m==="circle"){const s=c.x,b=c.y,C=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));C>0&&u(ve({id:Date.now().toString(),type:"circle",centerX:s,centerY:b,radius:C,strokeColor:d.circle.strokeColor,fillColor:d.circle.fillColor,lineWidth:d.circle.lineWidth}))}else if(m==="pencil")Z.length>1&&u(ve({id:Date.now().toString(),type:"pencil",points:[...Z],strokeColor:d.pencil.strokeColor,lineWidth:d.pencil.lineWidth})),q([]);else if(m==="triangle"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"triangle",x:s,y:b,width:C,height:o,strokeColor:d.triangle.strokeColor,fillColor:d.triangle.fillColor,lineWidth:d.triangle.lineWidth}))}else if(m==="diamond"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"diamond",x:s,y:b,width:C,height:o,strokeColor:d.diamond.strokeColor,fillColor:d.diamond.fillColor,lineWidth:d.diamond.lineWidth}))}else if(m==="star"){const s=c.x,b=c.y,C=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));C>0&&u(ve({id:Date.now().toString(),type:"star",centerX:s,centerY:b,size:C,strokeColor:d.star.strokeColor,fillColor:d.star.fillColor,lineWidth:d.star.lineWidth}))}else if(m==="heart"){const s=c.x,b=c.y,C=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));C>0&&u(ve({id:Date.now().toString(),type:"heart",centerX:s,centerY:b,size:C,strokeColor:d.heart.strokeColor,fillColor:d.heart.fillColor,lineWidth:d.heart.lineWidth}))}else if(m==="hexagon"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"hexagon",x:s,y:b,width:C,height:o,strokeColor:d.hexagon.strokeColor,fillColor:d.hexagon.fillColor,lineWidth:d.hexagon.lineWidth}))}else if(m==="octagon"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"octagon",x:s,y:b,width:C,height:o,strokeColor:d.octagon.strokeColor,fillColor:d.octagon.fillColor,lineWidth:d.octagon.lineWidth}))}else if(m==="arrow"){const s=j.x-c.x,b=j.y-c.y;Math.sqrt(s*s+b*b)>5&&u(ve({id:Date.now().toString(),type:"arrow",startX:c.x,startY:c.y,endX:j.x,endY:j.y,strokeColor:d.arrow.strokeColor,fillColor:d.arrow.fillColor,lineWidth:d.arrow.lineWidth}))}N(!1)}},Er=s=>{fe&&s.preventDefault()},Yt=()=>fe?Se?"grabbing":be?"ns-resize":"grab":"default";return w.jsxs("div",{id:"wb-canvas-container",style:{backgroundColor:"#fff",position:"relative",width:"100%",height:"100%"},children:[w.jsx("canvas",{ref:l,onMouseDown:zt,onMouseMove:Wt,onMouseUp:Lt,onMouseLeave:Lt,onDoubleClick:s=>{if(k)return;const C=l.current.getBoundingClientRect(),o=s.clientX-C.left,y=s.clientY-C.top,{x,y:O}=Et(o,y),_=Qe(x,O);_&&_.type==="text"&&(D(_.id),_e({x:_.x,y:_.y}),se(_.text),z.current=_.text,ge(!0))},onContextMenu:Er,style:{cursor:Yt()}}),k&&w.jsx(ua,{text:n||((Vt=t==null?void 0:t.lock)==null?void 0:Vt.text)||T.text}),Ye&&w.jsx("input",{type:"text",value:ae,onChange:s=>{const b=s.target.value;se(b),de(b)},onKeyDown:s=>{s.key==="Enter"&&ae.trim()?(ce&&(u(gt({id:ce,updates:{text:ae}})),z.current=ae),ge(!1),se(""),D(null)):s.key==="Escape"&&(ge(!1),se(""),D(null))},onBlur:()=>{ae.trim()&&ce&&(u(gt({id:ce,updates:{text:ae}})),z.current=ae),ge(!1),se(""),D(null)},onMouseDown:s=>s.stopPropagation(),autoFocus:!0,style:{position:"absolute",left:Ce.x*v.zoom+v.panX,top:Ce.y*v.zoom+v.panY,fontSize:d.text.fontSize*v.zoom,color:d.text.fontColor,background:"white",border:"2px solid #0066cc",outline:"none",fontFamily:"sans-serif",minWidth:"150px",padding:"4px 8px",zIndex:1e3,boxShadow:"0 2px 8px rgba(0,0,0,0.2)"}}),w.jsx(ba,{onExport:Fe,onFitToView:wt,mode:h}),w.jsx(wa,{}),he.visible&&w.jsx(Fi,{})]})}),xa=M.forwardRef((e,t)=>w.jsx(mo,{store:zn,children:w.jsx(Co,{children:w.jsx($n,{ref:t,...e})})}));pe.WhiteboardComponent=$n,pe.default=xa,pe.store=zn,pe.whiteboardActions=zi,pe.whiteboardReducer=Dn,Object.defineProperties(pe,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
99
+ (See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)`)}}),j.warnIfExceeded()),R}}}}function Rt(e){return typeof e=="boolean"}function pi(){return function(t){return vi(t)}}function vi(e){e===void 0&&(e={});var t=e.thunk,r=t===void 0?!0:t,n=e.immutableCheck,i=n===void 0?!0:n,a=e.serializableCheck,f=a===void 0?!0:a,h=e.actionCreatorCheck,p=h===void 0?!0:h,l=new ii;if(r&&(Rt(r)?l.push(hr):l.push(hr.withExtraArgument(r.extraArgument))),process.env.NODE_ENV!=="production"){if(i){var u={};Rt(i)||(u=i),l.unshift(di(u))}if(f){var g={};Rt(f)||(g=f),l.push(hi(g))}if(p){var m={};Rt(p)||(m=p),l.unshift(oi(m))}}return l}var gr=process.env.NODE_ENV==="production";function yi(e){var t=pi(),r=e||{},n=r.reducer,i=n===void 0?void 0:n,a=r.middleware,f=a===void 0?t():a,h=r.devTools,p=h===void 0?!0:h,l=r.preloadedState,u=l===void 0?void 0:l,g=r.enhancers,m=g===void 0?void 0:g,E;if(typeof i=="function")E=i;else if(wn(i))E=Bo(i);else throw new Error('"reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers');var v=f;if(typeof v=="function"&&(v=v(t),!gr&&!Array.isArray(v)))throw new Error("when using a middleware builder function, an array of middleware must be returned");if(!gr&&v.some(function(N){return typeof N!="function"}))throw new Error("each middleware provided to configureStore must be a function");var d=Uo.apply(void 0,v),S=kt;p&&(S=ei(ze({trace:!gr},typeof p=="object"&&p)));var T=new ai(d),k=T;Array.isArray(m)?k=it([d],m):typeof m=="function"&&(k=m(T));var P=S.apply(void 0,k);return pn(E,u,P)}function Pn(e){var t={},r=[],n,i={addCase:function(a,f){if(process.env.NODE_ENV!=="production"){if(r.length>0)throw new Error("`builder.addCase` should only be called before calling `builder.addMatcher`");if(n)throw new Error("`builder.addCase` should only be called before calling `builder.addDefaultCase`")}var h=typeof a=="string"?a:a.type;if(!h)throw new Error("`builder.addCase` cannot be called with an empty action type");if(h in t)throw new Error("`builder.addCase` cannot be called with two reducers for the same action type");return t[h]=f,i},addMatcher:function(a,f){if(process.env.NODE_ENV!=="production"&&n)throw new Error("`builder.addMatcher` should only be called before calling `builder.addDefaultCase`");return r.push({matcher:a,reducer:f}),i},addDefaultCase:function(a){if(process.env.NODE_ENV!=="production"&&n)throw new Error("`builder.addDefaultCase` can only be called once");return n=a,i}};return e(i),[t,r,n]}function gi(e){return typeof e=="function"}var Tn=!1;function mi(e,t,r,n){r===void 0&&(r=[]),process.env.NODE_ENV!=="production"&&typeof t=="object"&&(Tn||(Tn=!0,console.warn("The object notation for `createReducer` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer")));var i=typeof t=="function"?Pn(t):[t,r,n],a=i[0],f=i[1],h=i[2],p;if(gi(e))p=function(){return vr(e())};else{var l=vr(e);p=function(){return l}}function u(g,m){g===void 0&&(g=p());var E=it([a[m.type]],f.filter(function(v){var d=v.matcher;return d(m)}).map(function(v){var d=v.reducer;return d}));return E.filter(function(v){return!!v}).length===0&&(E=[h]),E.reduce(function(v,d){if(d)if(Ae(v)){var S=v,T=d(S,m);return T===void 0?v:T}else{if(je(v))return ln(v,function(k){return d(k,m)});var T=d(v,m);if(T===void 0){if(v===null)return v;throw Error("A case reducer on a non-draftable value must not return undefined")}return T}return v},g)}return u.getInitialState=p,u}var Mn=!1;function bi(e,t){return e+"/"+t}function wi(e){var t=e.name;typeof process<"u"&&process.env.NODE_ENV==="development"&&e.initialState===void 0&&console.error("You must provide an `initialState` value that is not `undefined`. You may have misspelled `initialState`");var r=typeof e.initialState=="function"?e.initialState:vr(e.initialState),n=e.reducers||{},i=Object.keys(n),a={},f={},h={};i.forEach(function(u){var g=n[u],m=bi(t,u),E,v;"reducer"in g?(E=g.reducer,v=g.prepare):E=g,a[u]=E,f[m]=E,h[u]=v?We(m,v):We(m)});function p(){process.env.NODE_ENV!=="production"&&typeof e.extraReducers=="object"&&(Mn||(Mn=!0,console.warn("The object notation for `createSlice.extraReducers` is deprecated, and will be removed in RTK 2.0. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice")));var u=typeof e.extraReducers=="function"?Pn(e.extraReducers):[e.extraReducers],g=u[0],m=g===void 0?{}:g,E=u[1],v=E===void 0?[]:E,d=u[2],S=d===void 0?void 0:d,T=ze(ze({},m),f);return mi(r,function(k){for(var P in T)k.addCase(P,T[P]);for(var N=0,c=v;N<c.length;N++){var R=c[N];k.addMatcher(R.matcher,R.reducer)}S&&k.addDefaultCase(S)})}var l;return{name:t,reducer:function(u,g){return l||(l=p()),l(u,g)},actions:h,caseReducers:a,getInitialState:function(){return l||(l=p()),l.getInitialState()}}}var xi="ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW",Ei=function(e){e===void 0&&(e=21);for(var t="",r=e;r--;)t+=xi[Math.random()*64|0];return t},Si=["name","message","stack","code"],mr=(function(){function e(t,r){this.payload=t,this.meta=r}return e})(),kn=(function(){function e(t,r){this.payload=t,this.meta=r}return e})(),Ci=function(e){if(typeof e=="object"&&e!==null){for(var t={},r=0,n=Si;r<n.length;r++){var i=n[r];typeof e[i]=="string"&&(t[i]=e[i])}return t}return{message:String(e)}};(function(){function e(t,r,n){var i=We(t+"/fulfilled",function(u,g,m,E){return{payload:u,meta:pr(ze({},E||{}),{arg:m,requestId:g,requestStatus:"fulfilled"})}}),a=We(t+"/pending",function(u,g,m){return{payload:void 0,meta:pr(ze({},m||{}),{arg:g,requestId:u,requestStatus:"pending"})}}),f=We(t+"/rejected",function(u,g,m,E,v){return{payload:E,error:(n&&n.serializeError||Ci)(u||"Rejected"),meta:pr(ze({},v||{}),{arg:m,requestId:g,rejectedWithValue:!!E,requestStatus:"rejected",aborted:(u==null?void 0:u.name)==="AbortError",condition:(u==null?void 0:u.name)==="ConditionError"})}}),h=!1,p=typeof AbortController<"u"?AbortController:(function(){function u(){this.signal={aborted:!1,addEventListener:function(){},dispatchEvent:function(){return!1},onabort:function(){},removeEventListener:function(){},reason:void 0,throwIfAborted:function(){}}}return u.prototype.abort=function(){process.env.NODE_ENV!=="production"&&(h||(h=!0,console.info("This platform does not implement AbortController. \nIf you want to use the AbortController to react to `abort` events, please consider importing a polyfill like 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'.")))},u})();function l(u){return function(g,m,E){var v=n!=null&&n.idGenerator?n.idGenerator(u):Ei(),d=new p,S;function T(P){S=P,d.abort()}var k=(function(){return Qo(this,null,function(){var P,N,c,R,j,Y,Z;return qo(this,function(q){switch(q.label){case 0:return q.trys.push([0,4,,5]),R=(P=n==null?void 0:n.condition)==null?void 0:P.call(n,u,{getState:m,extra:E}),Oi(R)?[4,R]:[3,2];case 1:R=q.sent(),q.label=2;case 2:if(R===!1||d.signal.aborted)throw{name:"ConditionError",message:"Aborted due to condition callback returning false."};return j=new Promise(function(H,ie){return d.signal.addEventListener("abort",function(){return ie({name:"AbortError",message:S||"Aborted"})})}),g(a(v,u,(N=n==null?void 0:n.getPendingMeta)==null?void 0:N.call(n,{requestId:v,arg:u},{getState:m,extra:E}))),[4,Promise.race([j,Promise.resolve(r(u,{dispatch:g,getState:m,extra:E,requestId:v,signal:d.signal,abort:T,rejectWithValue:function(H,ie){return new mr(H,ie)},fulfillWithValue:function(H,ie){return new kn(H,ie)}})).then(function(H){if(H instanceof mr)throw H;return H instanceof kn?i(H.payload,v,u,H.meta):i(H,v,u)})])];case 3:return c=q.sent(),[3,5];case 4:return Y=q.sent(),c=Y instanceof mr?f(null,v,u,Y.payload,Y.meta):f(Y,v,u),[3,5];case 5:return Z=n&&!n.dispatchConditionRejection&&f.match(c)&&c.meta.condition,Z||g(c),[2,c]}})})})();return Object.assign(k,{abort:T,requestId:v,arg:u,unwrap:function(){return k.then(_i)}})}}return Object.assign(l,{pending:a,rejected:f,fulfilled:i,typePrefix:t})}return e.withTypes=function(){return e},e})();function _i(e){if(e.meta&&e.meta.rejectedWithValue)throw e.payload;if(e.error)throw e.error;return e.payload}function Oi(e){return e!==null&&typeof e=="object"&&typeof e.then=="function"}var br="listenerMiddleware";We(br+"/add"),We(br+"/removeAll"),We(br+"/remove");var Rn;typeof queueMicrotask=="function"&&queueMicrotask.bind(typeof window<"u"?window:typeof global<"u"?global:globalThis),Mo();function ji(e){const t=[],r=new Set;for(const n of e){const i=n==null?void 0:n.id;if(i==null){t.push(n);continue}r.has(i)||(r.add(i),t.push(n))}return t}const wr=wi({name:"whiteboard",initialState:{grid:{size:20,color:"#ccc",enabled:!0},toolbar:{selectedTool:"pointer"},toolProperties:{pencil:{strokeColor:"#000000",lineWidth:4},rectangle:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},circle:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},triangle:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},diamond:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},star:{strokeColor:"#000000",fillColor:"#ffff00",lineWidth:2},heart:{strokeColor:"#000000",fillColor:"#ff6b6b",lineWidth:2},hexagon:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},octagon:{strokeColor:"#000000",fillColor:"#ffffff",lineWidth:2},arrow:{strokeColor:"#000000",fillColor:"#000000",lineWidth:2},text:{fontSize:16,fontColor:"#000000"}},elements:[],selectedElementId:null,viewport:{panX:0,panY:0,zoom:1},watermark:{text:"Nines Studios",url:"https://github.com/huzeyfecoskun",visible:!0},lock:{isLocked:!0,text:"Whiteboard drawing is only for moderator"}},reducers:{toggleGrid(e){e.grid.enabled=!e.grid.enabled},setGridSize(e,t){e.grid.size=t.payload},setGridColor(e,t){e.grid.color=t.payload},setSelectedTool(e,t){e.toolbar.selectedTool=t.payload},setToolProperty(e,t){const{tool:r,property:n,value:i}=t.payload;e.toolProperties[r]&&(e.toolProperties[r][n]=i)},addElement(e,t){const r=t.payload,n=r==null?void 0:r.id;n!=null&&e.elements.some(a=>(a==null?void 0:a.id)===n)||e.elements.push(r)},updateElement(e,t){const{id:r,updates:n}=t.payload,i=e.elements.findIndex(a=>a.id===r);i!==-1&&(e.elements[i]={...e.elements[i],...n})},removeElement(e,t){const r=t.payload;e.elements=e.elements.filter(n=>n.id!==r),e.selectedElementId===r&&(e.selectedElementId=null)},setSelectedElement(e,t){e.selectedElementId=t.payload},clearElements(e){e.elements=[]},setElements(e,t){const r=Array.isArray(t.payload)?t.payload:[];e.elements=ji(r),e.selectedElementId=null},setPan(e,t){e.viewport.panX=t.payload.x,e.viewport.panY=t.payload.y},setZoom(e,t){e.viewport.zoom=Math.max(.1,Math.min(5,t.payload))},resetViewport(e){e.viewport.panX=0,e.viewport.panY=0,e.viewport.zoom=1},bringToFront(e,t){const r=t.payload,n=e.elements.findIndex(i=>i.id===r);if(n!==-1&&n<e.elements.length-1){const[i]=e.elements.splice(n,1);e.elements.push(i)}},sendToBack(e,t){const r=t.payload,n=e.elements.findIndex(i=>i.id===r);if(n>0){const[i]=e.elements.splice(n,1);e.elements.unshift(i)}},fitToView(e,t){const{canvasWidth:r,canvasHeight:n,padding:i=50}=t.payload,a=e.elements;if(a.length===0){e.viewport.panX=0,e.viewport.panY=0,e.viewport.zoom=1;return}let f=1/0,h=1/0,p=-1/0,l=-1/0;a.forEach(c=>{c.type==="rectangle"?(f=Math.min(f,c.x),h=Math.min(h,c.y),p=Math.max(p,c.x+c.width),l=Math.max(l,c.y+c.height)):c.type==="circle"?(f=Math.min(f,c.centerX-c.radius),h=Math.min(h,c.centerY-c.radius),p=Math.max(p,c.centerX+c.radius),l=Math.max(l,c.centerY+c.radius)):c.type==="pencil"&&c.points.length>0?c.points.forEach(R=>{f=Math.min(f,R.x),h=Math.min(h,R.y),p=Math.max(p,R.x),l=Math.max(l,R.y)}):c.type==="triangle"||c.type==="diamond"||c.type==="hexagon"||c.type==="octagon"?(f=Math.min(f,c.x),h=Math.min(h,c.y),p=Math.max(p,c.x+c.width),l=Math.max(l,c.y+c.height)):c.type==="star"||c.type==="heart"?(f=Math.min(f,c.centerX-c.size),h=Math.min(h,c.centerY-c.size),p=Math.max(p,c.centerX+c.size),l=Math.max(l,c.centerY+c.size)):c.type==="arrow"&&(f=Math.min(f,c.startX,c.endX),h=Math.min(h,c.startY,c.endY),p=Math.max(p,c.startX,c.endX),l=Math.max(l,c.startY,c.endY))});const u=p-f,g=l-h;if(u<=0||g<=0)return;const m=r-i*2,E=n-i*2,v=m/u,d=E/g,S=Math.min(v,d,5),T=(f+p)/2,k=(h+l)/2,P=r/2-T*S,N=n/2-k*S;e.viewport.zoom=Math.max(.1,S),e.viewport.panX=P,e.viewport.panY=N},setLocked(e,t){e.lock.isLocked=t.payload,t.payload&&(e.toolbar.selectedTool="pointer",e.selectedElementId=null)},setWatermarkEnabled(e,t){e.watermark.visible=t.payload},setWatermarkText(e,t){e.watermark.text=t.payload}}}),{toggleGrid:_a,setGridSize:Oa,setGridColor:ja,setSelectedTool:Pe,setToolProperty:Pi,addElement:ve,updateElement:gt,removeElement:Ti,setSelectedElement:mt,clearElements:Nn,setElements:An,setPan:Mi,setZoom:ki,resetViewport:Pa,fitToView:Ri,bringToFront:Ni,sendToBack:Ai,setLocked:In,setWatermarkEnabled:Ii,setWatermarkText:Di}=wr.actions,zi=wr.actions,Dn=wr.reducer;let xr=null;const Wi=new Set(["rectangle","circle","pencil","triangle","diamond","star","heart","hexagon","octagon","arrow","text"]),Li=new Set(["strokeColor","fillColor","lineWidth","fontSize","fontColor","textColor"]),Yi=e=>{var t,r;if(!e||typeof e.type!="string"||e.type.startsWith("@@redux/"))return!1;if(e.type==="whiteboard/addElement"){const n=(t=e==null?void 0:e.payload)==null?void 0:t.type;return typeof n=="string"&&Wi.has(n)}if(e.type==="whiteboard/removeElement"||e.type==="whiteboard/clearElements"||e.type==="whiteboard/bringToFront"||e.type==="whiteboard/sendToBack")return!0;if(e.type==="whiteboard/setToolProperty"){const{tool:n,property:i}=(e==null?void 0:e.payload)??{};return typeof n!="string"||typeof i!="string"?!1:Li.has(i)}if(e.type==="whiteboard/updateElement"){const n=(r=e==null?void 0:e.payload)==null?void 0:r.updates;if(!n||typeof n!="object")return!1;const i=a=>Object.prototype.hasOwnProperty.call(n,a);return!!(i("text")||i("fontSize")||i("fontColor")||i("textColor")||i("strokeColor")||i("fillColor")||i("lineWidth")||i("x")||i("y")||i("centerX")||i("centerY")||i("startX")||i("startY")||i("endX")||i("endY")||i("points"))}return!1},Vi=e=>{xr=e},$i=e=>t=>r=>{var i;const n=t(r);return!((i=r.meta)!=null&&i.fromRemote)&&xr&&Yi(r)&&xr(r,e.getState()),n},zn=yi({reducer:{whiteboard:Dn},middleware:e=>e().concat($i)}),Fi=()=>{const e=oe(t=>t.whiteboard.watermark);return w.jsx("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",children:w.jsx("div",{className:"wb-watermark",children:e.text})})};var Wn={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},Ln=M.createContext&&M.createContext(Wn),Xi=["attr","size","title"];function Bi(e,t){if(e==null)return{};var r=Ui(e,t),n,i;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function Ui(e,t){if(e==null)return{};var r={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(t.indexOf(n)>=0)continue;r[n]=e[n]}return r}function Nt(){return Nt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},Nt.apply(this,arguments)}function Yn(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),r.push.apply(r,n)}return r}function At(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?Yn(Object(r),!0).forEach(function(n){qi(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Yn(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function qi(e,t,r){return t=Hi(t),t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Hi(e){var t=Gi(e,"string");return typeof t=="symbol"?t:t+""}function Gi(e,t){if(typeof e!="object"||!e)return e;var r=e[Symbol.toPrimitive];if(r!==void 0){var n=r.call(e,t);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function Vn(e){return e&&e.map((t,r)=>M.createElement(t.tag,At({key:r},t.attr),Vn(t.child)))}function Q(e){return t=>M.createElement(Ki,Nt({attr:At({},e.attr)},t),Vn(e.child))}function Ki(e){var t=r=>{var{attr:n,size:i,title:a}=e,f=Bi(e,Xi),h=i||r.size||"1em",p;return r.className&&(p=r.className),e.className&&(p=(p?p+" ":"")+e.className),M.createElement("svg",Nt({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,n,f,{className:p,style:At(At({color:e.color||r.color},r.style),e.style),height:h,width:h,xmlns:"http://www.w3.org/2000/svg"}),a&&M.createElement("title",null,a),e.children)};return Ln!==void 0?M.createElement(Ln.Consumer,null,r=>t(r)):t(Wn)}function Ji(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"},child:[]}]})(e)}function Zi(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"},child:[]}]})(e)}function Qi(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"},child:[]}]})(e)}function ea(e){return Q({attr:{viewBox:"0 0 496 512"},child:[{tag:"path",attr:{d:"M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"},child:[]}]})(e)}function ta(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"},child:[]}]})(e)}function ra(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"},child:[]}]})(e)}function na(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"},child:[]}]})(e)}function oa(e){return Q({attr:{viewBox:"0 0 320 512"},child:[{tag:"path",attr:{d:"M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z"},child:[]}]})(e)}function ia(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"},child:[]}]})(e)}function aa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"},child:[]}]})(e)}function sa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"},child:[]}]})(e)}function ca(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"},child:[]}]})(e)}function la(e){return Q({attr:{viewBox:"0 0 576 512"},child:[{tag:"path",attr:{d:"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"},child:[]}]})(e)}const ua=({text:e})=>w.jsxs("div",{style:{position:"absolute",top:"10px",left:"10px",backgroundColor:"rgba(255, 68, 68, 0.9)",color:"white",padding:"8px 16px",borderRadius:"4px",display:"flex",alignItems:"center",gap:"8px",boxShadow:"0 2px 4px rgba(0,0,0,0.2)",zIndex:1e3,pointerEvents:"none",userSelect:"none",fontFamily:"sans-serif",fontSize:"14px",fontWeight:"500"},children:[w.jsx(na,{}),w.jsx("span",{children:e||"Locked"})]});function fa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"},child:[]}]})(e)}function da(e){return Q({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M284.3 11.7c-15.6-15.6-40.9-15.6-56.6 0l-216 216c-15.6 15.6-15.6 40.9 0 56.6l216 216c15.6 15.6 40.9 15.6 56.6 0l216-216c15.6-15.6 15.6-40.9 0-56.6l-216-216z"},child:[]}]})(e)}function ha(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"},child:[]}]})(e)}function pa(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"},child:[]}]})(e)}function va(e){return Q({attr:{viewBox:"0 0 384 512"},child:[{tag:"path",attr:{d:"M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l128 0 0 352c0 17.7 14.3 32 32 32s32-14.3 32-32l0-352 128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 32 32 32z"},child:[]}]})(e)}function ya(e){return Q({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M144 144c0-44.2 35.8-80 80-80c31.9 0 59.4 18.6 72.3 45.7c7.6 16 26.7 22.8 42.6 15.2s22.8-26.7 15.2-42.6C331 33.7 281.5 0 224 0C144.5 0 80 64.5 80 144l0 48-16 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-240 0 0-48z"},child:[]}]})(e)}function ga(e){return Q({attr:{fill:"currentColor",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{fillRule:"evenodd",d:"M8.5.134a1 1 0 0 0-1 0l-6 3.577a1 1 0 0 0-.5.866v6.846a1 1 0 0 0 .5.866l6 3.577a1 1 0 0 0 1 0l6-3.577a1 1 0 0 0 .5-.866V4.577a1 1 0 0 0-.5-.866z"},child:[]}]})(e)}function ma(e){return Q({attr:{fill:"currentColor",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M11.107 0a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146A.5.5 0 0 1 4.893 0z"},child:[]}]})(e)}const ba=({onExport:e,onFitToView:t,mode:r})=>{const n=Jt(),{t:i,language:a,changeLanguage:f}=Kr(),h=oe(R=>R.whiteboard.toolbar.selectedTool),p=oe(R=>R.whiteboard.lock.isLocked),[l,u]=M.useState(!1),[g,m]=M.useState(!1),E=M.useRef(null),v=M.useRef(null),d=M.useRef(null),S=M.useRef(null),T=M.useRef(null),k=R=>{const j=R.target.files[0];if(!j)return;const Y=new FileReader;Y.onload=Z=>{const q=new Image;q.onload=()=>{const H=Date.now().toString();n(ve({id:H,type:"image",x:100,y:100,width:q.width,height:q.height,src:Z.target.result})),n(Pe("pointer")),n(mt(H))},q.src=Z.target.result},Y.readAsDataURL(j),R.target.value=""};M.useEffect(()=>{const R=j=>{E.current&&!E.current.contains(j.target)&&v.current&&!v.current.contains(j.target)&&u(!1),S.current&&!S.current.contains(j.target)&&d.current&&!d.current.contains(j.target)&&m(!1)};return document.addEventListener("mousedown",R),()=>document.removeEventListener("mousedown",R)},[]);const P=[{name:"triangle",icon:w.jsx(aa,{style:{transform:"rotate(-30deg)"}})},{name:"diamond",icon:w.jsx(da,{})},{name:"star",icon:w.jsx(la,{})},{name:"heart",icon:w.jsx(ta,{})},{name:"hexagon",icon:w.jsx(ga,{})},{name:"octagon",icon:w.jsx(ma,{})},{name:"arrow",icon:w.jsx(fa,{})}],N=R=>{n(Pe(R)),u(!1)},c=R=>{f(R),m(!1)};return w.jsxs("div",{className:"wb-toolbar",children:[w.jsx("button",{className:h==="pointer"?"wb-active":"",onClick:()=>n(Pe("pointer")),title:i("pointer"),disabled:p,children:w.jsx(oa,{})}),w.jsx("button",{className:h==="text"?"wb-active":"",onClick:()=>n(Pe("text")),title:i("text"),disabled:p,children:w.jsx(va,{})}),w.jsx("button",{onClick:()=>{var R;return(R=T.current)==null?void 0:R.click()},title:i("image"),disabled:p,children:w.jsx(ra,{})}),w.jsx("input",{type:"file",ref:T,style:{display:"none"},accept:"image/*",onChange:k}),w.jsx("button",{className:h==="pencil"?"wb-active":"",onClick:()=>n(Pe("pencil")),title:i("pencil"),disabled:p,children:w.jsx(ia,{})}),w.jsx("button",{className:h==="rectangle"?"wb-active":"",onClick:()=>n(Pe("rectangle")),title:i("rectangle"),disabled:p,children:w.jsx(ca,{})}),w.jsx("button",{className:h==="circle"?"wb-active":"",onClick:()=>n(Pe("circle")),title:i("circle"),disabled:p,children:w.jsx(Ji,{})}),w.jsxs("div",{className:"wb-ellipsis-container",children:[w.jsx("button",{ref:v,className:P.some(R=>R.name===h)?"wb-active":"",onClick:()=>u(!l),title:i("moreShapes"),disabled:p,children:w.jsx(ha,{})}),l&&w.jsxs("div",{className:"wb-shapes-popup",ref:E,children:[w.jsx("div",{className:"wb-shapes-popup-header",children:i("moreShapes")}),w.jsx("div",{className:"wb-shapes-popup-grid",children:P.map(R=>w.jsx("button",{className:h===R.name?"wb-active":"",onClick:()=>N(R.name),title:i(R.name),children:R.icon},R.name))})]})]}),w.jsx("button",{className:h==="eraser"?"wb-active":"",onClick:()=>n(Pe("eraser")),title:i("eraser"),disabled:p,children:w.jsx(Zi,{})}),w.jsx("button",{onClick:t,title:i("fitToView"),children:w.jsx(Qi,{})}),w.jsx("button",{onClick:e,title:i("exportAsPng"),children:w.jsx(sa,{})}),w.jsxs("div",{className:"wb-language-container",children:[w.jsx("button",{ref:d,onClick:()=>m(!g),title:i("language"),children:w.jsx(ea,{})}),g&&w.jsxs("div",{className:"wb-language-popup",ref:S,children:[w.jsx("div",{className:"wb-language-popup-header",children:i("language")}),w.jsxs("div",{className:"wb-language-options",children:[w.jsxs("button",{className:a==="en"?"wb-active":"",onClick:()=>c("en"),children:["πŸ‡ΊπŸ‡Έ ",i("english")]}),w.jsxs("button",{className:a==="tr"?"wb-active":"",onClick:()=>c("tr"),children:["πŸ‡ΉπŸ‡· ",i("turkish")]})]})]})]}),r==="moderator"&&w.jsx("button",{onClick:()=>n(In(!p)),title:p?"Unlock":"Lock",style:{color:p?"red":"inherit"},children:p?w.jsx(pa,{}):w.jsx(ya,{})})]})},wa=()=>{const e=Jt(),{t}=Kr(),r=oe(g=>g.whiteboard.toolbar.selectedTool),n=oe(g=>g.whiteboard.toolProperties),i=oe(g=>g.whiteboard.selectedElementId),a=oe(g=>g.whiteboard.elements),f=i?a.find(g=>g.id===i):null,h=(g,m,E)=>{e(Pi({tool:g,property:m,value:E}))},p=(g,m)=>{i&&e(gt({id:i,updates:{[g]:m}}))},l=()=>{i&&e(Ni(i))},u=()=>{i&&e(Ai(i))};if(r==="pointer"&&f&&f.type==="text")return w.jsxs("div",{className:"wb-prop-tools",children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontSize")}),w.jsxs("select",{className:"font-size-selector",value:f.fontSize||16,onChange:g=>p("fontSize",parseInt(g.target.value)),children:[w.jsx("option",{value:"12",children:"12 px"}),w.jsx("option",{value:"14",children:"14 px"}),w.jsx("option",{value:"16",children:"16 px"}),w.jsx("option",{value:"18",children:"18 px"}),w.jsx("option",{value:"24",children:"24 px"}),w.jsx("option",{value:"32",children:"32 px"}),w.jsx("option",{value:"48",children:"48 px"}),w.jsx("option",{value:"64",children:"64 px"}),w.jsx("option",{value:"72",children:"72 px"})]})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontColor")}),w.jsx("input",{type:"color",value:f.fontColor||"#000000",onChange:g=>p("fontColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("layerOrder")}),w.jsxs("div",{className:"wb-layer-buttons",children:[w.jsx("button",{onClick:l,title:t("bringToFront"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"white"})]})}),w.jsx("button",{onClick:u,title:t("sendToBack"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"white"})]})})]})]})]});if(r==="pointer"&&f){const g=["rectangle","circle","triangle","diamond","star","heart","hexagon","octagon","arrow"].includes(f.type),m=f.type==="pencil";return w.jsxs("div",{className:"wb-prop-tools",children:[g&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeColor")}),w.jsx("input",{type:"color",value:f.strokeColor,onChange:E=>p("strokeColor",E.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fillColor")}),w.jsx("input",{type:"color",value:f.fillColor,onChange:E=>p("fillColor",E.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeWidth")}),w.jsxs("select",{className:"stroke-width-selector",value:f.lineWidth,onChange:E=>p("lineWidth",parseInt(E.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"})]})]})]}),m&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushColor")}),w.jsx("input",{type:"color",value:f.strokeColor,onChange:E=>p("strokeColor",E.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushSize")}),w.jsxs("select",{className:"brush-size-selector",value:f.lineWidth,onChange:E=>p("lineWidth",parseInt(E.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"}),w.jsx("option",{value:"16",children:"16 px"})]})]})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("layerOrder")}),w.jsxs("div",{className:"wb-layer-buttons",children:[w.jsx("button",{onClick:l,title:t("bringToFront"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"white"})]})}),w.jsx("button",{onClick:u,title:t("sendToBack"),children:w.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[w.jsx("rect",{x:"4",y:"4",width:"12",height:"12",rx:"1",fill:"#0066cc",stroke:"#0066cc"}),w.jsx("rect",{x:"8",y:"8",width:"12",height:"12",rx:"1",fill:"white"})]})})]})]})]})}return w.jsxs("div",{className:"wb-prop-tools",children:[r==="text"&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontSize")}),w.jsxs("select",{className:"font-size-selector",value:n.text.fontSize,onChange:g=>h("text","fontSize",parseInt(g.target.value)),children:[w.jsx("option",{value:"12",children:"12 px"}),w.jsx("option",{value:"14",children:"14 px"}),w.jsx("option",{value:"16",children:"16 px"}),w.jsx("option",{value:"18",children:"18 px"}),w.jsx("option",{value:"24",children:"24 px"}),w.jsx("option",{value:"32",children:"32 px"}),w.jsx("option",{value:"48",children:"48 px"}),w.jsx("option",{value:"64",children:"64 px"}),w.jsx("option",{value:"72",children:"72 px"})]})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fontColor")}),w.jsx("input",{type:"color",value:n.text.fontColor,onChange:g=>h("text","fontColor",g.target.value)})]})]}),r==="pencil"&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushColor")}),w.jsx("input",{type:"color",value:n.pencil.strokeColor,onChange:g=>h("pencil","strokeColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("brushSize")}),w.jsxs("select",{className:"brush-size-selector",value:n.pencil.lineWidth,onChange:g=>h("pencil","lineWidth",parseInt(g.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"}),w.jsx("option",{value:"16",children:"16 px"})]})]})]}),(r==="rectangle"||r==="circle"||r==="triangle"||r==="diamond"||r==="star"||r==="heart"||r==="hexagon"||r==="octagon"||r==="arrow")&&w.jsxs(w.Fragment,{children:[w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeColor")}),w.jsx("input",{type:"color",value:n[r].strokeColor,onChange:g=>h(r,"strokeColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("fillColor")}),w.jsx("input",{type:"color",value:n[r].fillColor,onChange:g=>h(r,"fillColor",g.target.value)})]}),w.jsxs("div",{className:"wb-prop-tool-item",children:[w.jsx("span",{children:t("strokeWidth")}),w.jsxs("select",{className:"stroke-width-selector",value:n[r].lineWidth,onChange:g=>h(r,"lineWidth",parseInt(g.target.value)),children:[w.jsx("option",{value:"1",children:"1 px"}),w.jsx("option",{value:"2",children:"2 px"}),w.jsx("option",{value:"4",children:"4 px"}),w.jsx("option",{value:"8",children:"8 px"})]})]})]})]})},$n=M.forwardRef(({onAction:e,watermark:t,isLocked:r,lockText:n,onLockChange:i,isWatermarkEnabled:a,watermarkText:f,mode:h},p)=>{var Vt;const l=M.useRef(null),u=Jt(),g=oe(s=>s.whiteboard.grid),m=oe(s=>s.whiteboard.toolbar.selectedTool),E=oe(s=>s.whiteboard.elements),v=oe(s=>s.whiteboard.viewport),d=oe(s=>s.whiteboard.toolProperties),S=oe(s=>s.whiteboard.selectedElementId),T=oe(s=>s.whiteboard.lock),k=T.isLocked,[P,N]=M.useState(!1),[c,R]=M.useState({x:0,y:0}),[j,Y]=M.useState({x:0,y:0}),[Z,q]=M.useState([]),[H,ie]=M.useState(!1),[G,ee]=M.useState({x:0,y:0}),[fe,Te]=M.useState(!1),[Se,ye]=M.useState(!1),[be,we]=M.useState(!1),[Me,Le]=M.useState({x:0,y:0}),[ke,qe]=M.useState({y:0,initialZoom:1}),[Ye,ge]=M.useState(!1),[Ce,_e]=M.useState({x:0,y:0}),[ae,se]=M.useState(""),[ce,D]=M.useState(null),le=M.useRef(null),z=M.useRef(null),de=M.useCallback(s=>{ce&&s.trim()&&(le.current&&clearTimeout(le.current),le.current=setTimeout(()=>{ce&&s!==z.current&&(z.current=s,u(gt({id:ce,updates:{text:s}})))},150))},[u,ce]);M.useEffect(()=>()=>{le.current&&clearTimeout(le.current)},[]),M.useEffect(()=>{e&&Vi(e)},[e]),M.useImperativeHandle(p,()=>({canvas:l.current,applyAction:s=>{u({...s,meta:{...s.meta,fromRemote:!0}})},getElems:()=>E,getElements:()=>E,setElems:s=>{u({...An(s),meta:{fromRemote:!0}})},setElements:s=>{u({...An(s),meta:{fromRemote:!0}})},clearElems:()=>{u({...Nn(),meta:{fromRemote:!0}})},clearElements:()=>{u({...Nn(),meta:{fromRemote:!0}})}})),M.useEffect(()=>{r!==void 0&&r!==k&&u(In(r))},[r,k,u]),M.useEffect(()=>{i&&i(k)},[k,i]);const he=oe(s=>s.whiteboard.watermark);M.useEffect(()=>{a!==void 0&&a!==he.visible&&u(Ii(a))},[a,he.visible,u]),M.useEffect(()=>{f!==void 0&&f!==he.text&&u(Di(f))},[f,he.text,u]);const Ve=M.useCallback((s,b,C)=>{const o=s.canvas,y=o.width,x=o.height,O=Math.floor(-v.panX/v.zoom/b)*b,_=Math.floor(-v.panY/v.zoom/b)*b,A=Math.ceil((y/v.zoom-v.panX/v.zoom)/b)*b,W=Math.ceil((x/v.zoom-v.panY/v.zoom)/b)*b;s.strokeStyle=C,s.lineWidth=.5/v.zoom;for(let I=O;I<=A;I+=b)s.beginPath(),s.moveTo(I,_),s.lineTo(I,W),s.stroke();for(let I=_;I<=W;I+=b)s.beginPath(),s.moveTo(O,I),s.lineTo(A,I),s.stroke()},[v]),He=M.useCallback((s,b,C)=>{const o=Math.min(b.x,C.x),y=Math.min(b.y,C.y),x=Math.abs(C.x-b.x),O=Math.abs(C.y-b.y);s.strokeStyle="#0066cc",s.lineWidth=1,s.setLineDash([5,5]),s.strokeRect(o,y,x,O),s.fillStyle="rgba(0, 102, 204, 0.1)",s.fillRect(o,y,x,O),s.setLineDash([])},[]),at=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#000",strokeColor:_="#000",lineWidth:A=2}=b;s.fillStyle=O,s.fillRect(C,o,y,x),s.strokeStyle=_,s.lineWidth=A,s.strokeRect(C,o,y,x)},[]),Ge=M.useCallback((s,b)=>{const{centerX:C,centerY:o,radius:y,fillColor:x="#000",strokeColor:O="#000",lineWidth:_=2}=b;s.beginPath(),s.arc(C,o,y,0,Math.PI*2),s.fillStyle=x,s.fill(),s.strokeStyle=O,s.lineWidth=_,s.stroke()},[]),$e=M.useCallback((s,b)=>{const{points:C,strokeColor:o="#000",lineWidth:y=2}=b;if(!(C.length<2)){s.strokeStyle=o,s.lineWidth=y,s.lineCap="round",s.lineJoin="round",s.beginPath(),s.moveTo(C[0].x,C[0].y);for(let x=1;x<C.length;x++)s.lineTo(C[x].x,C[x].y);s.stroke()}},[]),It=M.useCallback((s,b)=>{const{x:C,y:o,text:y,fontSize:x=16,fontColor:O="#000"}=b;s.font=`${x}px sans-serif`,s.fillStyle=O,s.textBaseline="top",s.fillText(y,C,o)},[]),Ke=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b;s.beginPath(),s.moveTo(C+y/2,o),s.lineTo(C+y,o+x),s.lineTo(C,o+x),s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),Je=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b;s.beginPath(),s.moveTo(C+y/2,o),s.lineTo(C+y,o+x/2),s.lineTo(C+y/2,o+x),s.lineTo(C,o+x/2),s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),st=M.useCallback((s,b)=>{const{centerX:C,centerY:o,size:y,fillColor:x="#ffff00",strokeColor:O="#000",lineWidth:_=2}=b,A=5,W=y,I=y/2;s.beginPath();for(let U=0;U<A*2;U++){const V=U%2===0?W:I,L=Math.PI/A*U-Math.PI/2,J=C+Math.cos(L)*V,re=o+Math.sin(L)*V;U===0?s.moveTo(J,re):s.lineTo(J,re)}s.closePath(),s.fillStyle=x,s.fill(),s.strokeStyle=O,s.lineWidth=_,s.stroke()},[]),ct=M.useCallback((s,b)=>{const{centerX:C,centerY:o,size:y,fillColor:x="#ff6b6b",strokeColor:O="#000",lineWidth:_=2}=b;s.beginPath();const A=o-y/2;s.moveTo(C,A+y/4),s.bezierCurveTo(C-y/2,A,C-y,A+y/2,C,o+y/2),s.bezierCurveTo(C+y,A+y/2,C+y/2,A,C,A+y/4),s.fillStyle=x,s.fill(),s.strokeStyle=O,s.lineWidth=_,s.stroke()},[]),lt=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b,W=C+y/2,I=o+x/2,U=y/2,V=x/2;s.beginPath();for(let L=0;L<6;L++){const J=Math.PI/3*L-Math.PI/2,re=W+Math.cos(J)*U,xe=I+Math.sin(J)*V;L===0?s.moveTo(re,xe):s.lineTo(re,xe)}s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),ut=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,fillColor:O="#fff",strokeColor:_="#000",lineWidth:A=2}=b,W=C+y/2,I=o+x/2,U=y/2,V=x/2;s.beginPath();for(let L=0;L<8;L++){const J=Math.PI/4*L-Math.PI/2,re=W+Math.cos(J)*U,xe=I+Math.sin(J)*V;L===0?s.moveTo(re,xe):s.lineTo(re,xe)}s.closePath(),s.fillStyle=O,s.fill(),s.strokeStyle=_,s.lineWidth=A,s.stroke()},[]),ft=M.useCallback((s,b)=>{const{startX:C,startY:o,endX:y,endY:x,fillColor:O="#000",strokeColor:_="#000",lineWidth:A=2}=b,W=15,I=Math.atan2(x-o,y-C);s.beginPath(),s.moveTo(C,o),s.lineTo(y,x),s.strokeStyle=_,s.lineWidth=A,s.stroke(),s.beginPath(),s.moveTo(y,x),s.lineTo(y-W*Math.cos(I-Math.PI/6),x-W*Math.sin(I-Math.PI/6)),s.lineTo(y-W*Math.cos(I+Math.PI/6),x-W*Math.sin(I+Math.PI/6)),s.closePath(),s.fillStyle=O,s.fill()},[]),dt=M.useRef({}),bt=M.useRef(null),ht=M.useCallback((s,b)=>{const{x:C,y:o,width:y,height:x,src:O}=b;if(dt.current[O]){const _=dt.current[O];_.complete&&s.drawImage(_,C,o,y,x)}else{const _=new Image;_.onload=()=>{dt.current[O]=_,bt.current&&bt.current()},_.src=O,dt.current[O]=_}},[]),Ze=M.useCallback((s,b)=>{switch(b.type){case"rectangle":at(s,b);break;case"circle":Ge(s,b);break;case"pencil":$e(s,b);break;case"text":It(s,b);break;case"triangle":Ke(s,b);break;case"diamond":Je(s,b);break;case"star":st(s,b);break;case"heart":ct(s,b);break;case"hexagon":lt(s,b);break;case"octagon":ut(s,b);break;case"arrow":ft(s,b);break;case"image":ht(s,b);break}},[at,Ge,$e,It,Ke,Je,st,ct,lt,ut,ft,ht]),Fe=M.useCallback(()=>{const s=l.current;if(!s)return;const b=document.createElement("canvas");b.width=s.width,b.height=s.height;const C=b.getContext("2d");C.fillStyle="#ffffff",C.fillRect(0,0,b.width,b.height),C.save(),C.translate(v.panX,v.panY),C.scale(v.zoom,v.zoom),E.forEach(x=>{Ze(C,x)}),C.restore();const o=b.toDataURL("image/png"),y=document.createElement("a");y.download=`whiteboard-${Date.now()}.png`,y.href=o,y.click()},[v,E,Ze]),wt=M.useCallback(()=>{const s=l.current;s&&u(Ri({canvasWidth:s.width,canvasHeight:s.height,padding:50}))},[u]),Qe=M.useCallback((s,b)=>{for(let C=E.length-1;C>=0;C--){const o=E[C];if(o.type==="rectangle"){if(s>=o.x&&s<=o.x+o.width&&b>=o.y&&b<=o.y+o.height)return o}else if(o.type==="circle"){if(Math.sqrt(Math.pow(s-o.centerX,2)+Math.pow(b-o.centerY,2))<=o.radius)return o}else if(o.type==="pencil")for(let x=1;x<o.points.length;x++){const O=o.points[x-1],_=o.points[x];if(xt(s,b,O.x,O.y,_.x,_.y)<=5)return o}else if(o.type==="text"){const y=o.fontSize||16,x=o.text.length*y*.6,O=y;if(s>=o.x&&s<=o.x+x&&b>=o.y&&b<=o.y+O)return o}else if(o.type==="triangle"||o.type==="diamond"||o.type==="hexagon"||o.type==="octagon"){if(s>=o.x&&s<=o.x+o.width&&b>=o.y&&b<=o.y+o.height)return o}else if(o.type==="star"||o.type==="heart"){if(Math.sqrt(Math.pow(s-o.centerX,2)+Math.pow(b-o.centerY,2))<=o.size)return o}else if(o.type==="arrow"){if(xt(s,b,o.startX,o.startY,o.endX,o.endY)<=10)return o}else if(o.type==="image"&&s>=o.x&&s<=o.x+o.width&&b>=o.y&&b<=o.y+o.height)return o}return null},[E]),xt=(s,b,C,o,y,x)=>{const O=s-C,_=b-o,A=y-C,W=x-o,I=O*A+_*W,U=A*A+W*W;let V=-1;U!==0&&(V=I/U);let L,J;V<0?(L=C,J=o):V>1?(L=y,J=x):(L=C+V*A,J=o+V*W);const re=s-L,xe=b-J;return Math.sqrt(re*re+xe*xe)},Dt=M.useCallback((s,b)=>{if(s.strokeStyle="#0066cc",s.lineWidth=2,s.setLineDash([5,5]),b.type==="rectangle")s.strokeRect(b.x-4,b.y-4,b.width+8,b.height+8);else if(b.type==="circle")s.beginPath(),s.arc(b.centerX,b.centerY,b.radius+4,0,Math.PI*2),s.stroke();else if(b.type==="pencil"&&b.points.length>0){const C=Math.min(...b.points.map(O=>O.x)),o=Math.max(...b.points.map(O=>O.x)),y=Math.min(...b.points.map(O=>O.y)),x=Math.max(...b.points.map(O=>O.y));s.strokeRect(C-4,y-4,o-C+8,x-y+8)}else if(b.type==="text"){const C=b.fontSize||16,o=b.text.length*C*.6,y=C;s.strokeRect(b.x-4,b.y-4,o+8,y+8)}else if(b.type==="triangle"||b.type==="diamond"||b.type==="hexagon"||b.type==="octagon")s.strokeRect(b.x-4,b.y-4,b.width+8,b.height+8);else if(b.type==="star"||b.type==="heart")s.beginPath(),s.arc(b.centerX,b.centerY,b.size+4,0,Math.PI*2),s.stroke();else if(b.type==="arrow"){const C=Math.min(b.startX,b.endX),o=Math.max(b.startX,b.endX),y=Math.min(b.startY,b.endY),x=Math.max(b.startY,b.endY);s.strokeRect(C-4,y-4,o-C+8,x-y+8)}else b.type==="image"&&s.strokeRect(b.x-4,b.y-4,b.width+8,b.height+8);s.setLineDash([])},[]),me=M.useCallback(()=>{const s=l.current;if(!s)return;const b=s.getContext("2d");b.clearRect(0,0,s.width,s.height),b.save(),b.translate(v.panX,v.panY),b.scale(v.zoom,v.zoom),g.enabled&&Ve(b,g.size,g.color),E.forEach(C=>{Ze(b,C),C.id===S&&Dt(b,C)}),b.restore()},[g,Ve,E,Ze,S,Dt,v]);M.useEffect(()=>{bt.current=me},[me]),M.useEffect(()=>{const s=l.current;if(!s)return;const b=s.parentElement;if(!b)return;const C=()=>{const y=b.getBoundingClientRect();s.width=y.width,s.height=y.height,me()};C();const o=new ResizeObserver(()=>{C()});return o.observe(b),()=>{o.disconnect()}},[me]),M.useEffect(()=>{me()},[me]),M.useEffect(()=>{const s=C=>{C.target.tagName==="INPUT"||C.target.tagName==="TEXTAREA"||C.code==="Space"&&!C.repeat&&(C.preventDefault(),Te(!0))},b=C=>{C.target.tagName==="INPUT"||C.target.tagName==="TEXTAREA"||C.code==="Space"&&(C.preventDefault(),Te(!1),ye(!1),we(!1))};return window.addEventListener("keydown",s),window.addEventListener("keyup",b),()=>{window.removeEventListener("keydown",s),window.removeEventListener("keyup",b)}},[]);const Et=M.useCallback((s,b)=>({x:(s-v.panX)/v.zoom,y:(b-v.panY)/v.zoom}),[v]);M.useEffect(()=>{const s=l.current;if(!s||!P)return;const b=s.getContext("2d");if(me(),b.save(),b.translate(v.panX,v.panY),b.scale(v.zoom,v.zoom),m==="pointer")He(b,c,j);else if(m==="rectangle"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);at(b,{x:C,y:o,width:y,height:x,strokeColor:d.rectangle.strokeColor,fillColor:d.rectangle.fillColor,lineWidth:d.rectangle.lineWidth})}else if(m==="circle"){const C=c.x,o=c.y,y=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));Ge(b,{centerX:C,centerY:o,radius:y,strokeColor:d.circle.strokeColor,fillColor:d.circle.fillColor,lineWidth:d.circle.lineWidth})}else if(m==="pencil")$e(b,{points:Z,strokeColor:d.pencil.strokeColor,lineWidth:d.pencil.lineWidth});else if(m==="triangle"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);Ke(b,{x:C,y:o,width:y,height:x,strokeColor:d.triangle.strokeColor,fillColor:d.triangle.fillColor,lineWidth:d.triangle.lineWidth})}else if(m==="diamond"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);Je(b,{x:C,y:o,width:y,height:x,strokeColor:d.diamond.strokeColor,fillColor:d.diamond.fillColor,lineWidth:d.diamond.lineWidth})}else if(m==="star"){const C=c.x,o=c.y,y=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));st(b,{centerX:C,centerY:o,size:y,strokeColor:d.star.strokeColor,fillColor:d.star.fillColor,lineWidth:d.star.lineWidth})}else if(m==="heart"){const C=c.x,o=c.y,y=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));ct(b,{centerX:C,centerY:o,size:y,strokeColor:d.heart.strokeColor,fillColor:d.heart.fillColor,lineWidth:d.heart.lineWidth})}else if(m==="hexagon"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);lt(b,{x:C,y:o,width:y,height:x,strokeColor:d.hexagon.strokeColor,fillColor:d.hexagon.fillColor,lineWidth:d.hexagon.lineWidth})}else if(m==="octagon"){const C=Math.min(c.x,j.x),o=Math.min(c.y,j.y),y=Math.abs(j.x-c.x),x=Math.abs(j.y-c.y);ut(b,{x:C,y:o,width:y,height:x,strokeColor:d.octagon.strokeColor,fillColor:d.octagon.fillColor,lineWidth:d.octagon.lineWidth})}else m==="arrow"&&ft(b,{startX:c.x,startY:c.y,endX:j.x,endY:j.y,strokeColor:d.arrow.strokeColor,fillColor:d.arrow.fillColor,lineWidth:d.arrow.lineWidth});b.restore()},[P,m,c,j,Z,me,He,at,Ge,$e,Ke,Je,st,ct,lt,ut,ft,v,d]);const zt=s=>{const C=l.current.getBoundingClientRect(),o=s.clientX-C.left,y=s.clientY-C.top;if(Ye)return;if(fe){s.preventDefault(),s.button===0?(ye(!0),Le({x:o-v.panX,y:y-v.panY})):s.button===2&&(we(!0),qe({y,initialZoom:v.zoom}));return}if(k)return;const{x,y:O}=Et(o,y);if(m==="pointer"){const _=Qe(x,O);if(_)if(u(mt(_.id)),ie(!0),_.type==="rectangle")ee({x:x-_.x,y:O-_.y});else if(_.type==="circle")ee({x:x-_.centerX,y:O-_.centerY});else if(_.type==="pencil"){const A=Math.min(..._.points.map(I=>I.x)),W=Math.min(..._.points.map(I=>I.y));ee({x:x-A,y:O-W})}else _.type==="text"?ee({x:x-_.x,y:O-_.y}):_.type==="triangle"||_.type==="diamond"||_.type==="hexagon"||_.type==="octagon"?ee({x:x-_.x,y:O-_.y}):_.type==="star"||_.type==="heart"?ee({x:x-_.centerX,y:O-_.centerY}):_.type==="arrow"?ee({x:x-_.startX,y:O-_.startY}):_.type==="image"&&ee({x:x-_.x,y:O-_.y});else u(mt(null)),N(!0),R({x,y:O}),Y({x,y:O})}else if(m==="text"){const _=Date.now().toString();u(ve({id:_,type:"text",x,y:O,text:"Text",fontSize:d.text.fontSize,fontColor:d.text.fontColor})),u(Pe("pointer")),u(mt(_))}else if(m==="eraser"){const _=Qe(x,O);_&&u(Ti(_.id))}else u(mt(null)),N(!0),R({x,y:O}),Y({x,y:O}),m==="pencil"&&q([{x,y:O}])},Wt=s=>{const C=l.current.getBoundingClientRect(),o=s.clientX-C.left,y=s.clientY-C.top;if(Se){u(Mi({x:o-Me.x,y:y-Me.y}));return}if(be){const _=ke.y-y,W=ke.initialZoom*(1+_*.005);u(ki(W));return}if(k)return;const{x,y:O}=Et(o,y);if(H&&S){const _=E.find(W=>W.id===S);if(!_)return;let A={};if(_.type==="rectangle")A={x:x-G.x,y:O-G.y};else if(_.type==="circle")A={centerX:x-G.x,centerY:O-G.y};else if(_.type==="pencil"){const W=Math.min(..._.points.map(L=>L.x)),I=Math.min(..._.points.map(L=>L.y)),U=x-G.x-W,V=O-G.y-I;A={points:_.points.map(L=>({x:L.x+U,y:L.y+V}))}}else if(_.type==="text")A={x:x-G.x,y:O-G.y};else if(_.type==="triangle"||_.type==="diamond"||_.type==="hexagon"||_.type==="octagon")A={x:x-G.x,y:O-G.y};else if(_.type==="star"||_.type==="heart")A={centerX:x-G.x,centerY:O-G.y};else if(_.type==="arrow"){const W=_.endX-_.startX,I=_.endY-_.startY;A={startX:x-G.x,startY:O-G.y,endX:x-G.x+W,endY:O-G.y+I}}else _.type==="image"&&(A={x:x-G.x,y:O-G.y});u(gt({id:S,updates:A}));return}P&&(Y({x,y:O}),m==="pencil"&&q(_=>[..._,{x,y:O}]))},Lt=()=>{if(Se||be){ye(!1),we(!1);return}if(k){ie(!1),N(!1);return}if(H){ie(!1);return}if(P){if(m==="pointer")me();else if(m==="rectangle"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"rectangle",x:s,y:b,width:C,height:o,strokeColor:d.rectangle.strokeColor,fillColor:d.rectangle.fillColor,lineWidth:d.rectangle.lineWidth}))}else if(m==="circle"){const s=c.x,b=c.y,C=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));C>0&&u(ve({id:Date.now().toString(),type:"circle",centerX:s,centerY:b,radius:C,strokeColor:d.circle.strokeColor,fillColor:d.circle.fillColor,lineWidth:d.circle.lineWidth}))}else if(m==="pencil")Z.length>1&&u(ve({id:Date.now().toString(),type:"pencil",points:[...Z],strokeColor:d.pencil.strokeColor,lineWidth:d.pencil.lineWidth})),q([]);else if(m==="triangle"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"triangle",x:s,y:b,width:C,height:o,strokeColor:d.triangle.strokeColor,fillColor:d.triangle.fillColor,lineWidth:d.triangle.lineWidth}))}else if(m==="diamond"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"diamond",x:s,y:b,width:C,height:o,strokeColor:d.diamond.strokeColor,fillColor:d.diamond.fillColor,lineWidth:d.diamond.lineWidth}))}else if(m==="star"){const s=c.x,b=c.y,C=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));C>0&&u(ve({id:Date.now().toString(),type:"star",centerX:s,centerY:b,size:C,strokeColor:d.star.strokeColor,fillColor:d.star.fillColor,lineWidth:d.star.lineWidth}))}else if(m==="heart"){const s=c.x,b=c.y,C=Math.sqrt(Math.pow(j.x-c.x,2)+Math.pow(j.y-c.y,2));C>0&&u(ve({id:Date.now().toString(),type:"heart",centerX:s,centerY:b,size:C,strokeColor:d.heart.strokeColor,fillColor:d.heart.fillColor,lineWidth:d.heart.lineWidth}))}else if(m==="hexagon"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"hexagon",x:s,y:b,width:C,height:o,strokeColor:d.hexagon.strokeColor,fillColor:d.hexagon.fillColor,lineWidth:d.hexagon.lineWidth}))}else if(m==="octagon"){const s=Math.min(c.x,j.x),b=Math.min(c.y,j.y),C=Math.abs(j.x-c.x),o=Math.abs(j.y-c.y);C>0&&o>0&&u(ve({id:Date.now().toString(),type:"octagon",x:s,y:b,width:C,height:o,strokeColor:d.octagon.strokeColor,fillColor:d.octagon.fillColor,lineWidth:d.octagon.lineWidth}))}else if(m==="arrow"){const s=j.x-c.x,b=j.y-c.y;Math.sqrt(s*s+b*b)>5&&u(ve({id:Date.now().toString(),type:"arrow",startX:c.x,startY:c.y,endX:j.x,endY:j.y,strokeColor:d.arrow.strokeColor,fillColor:d.arrow.fillColor,lineWidth:d.arrow.lineWidth}))}N(!1)}},Er=s=>{fe&&s.preventDefault()},Yt=()=>fe?Se?"grabbing":be?"ns-resize":"grab":"default";return w.jsxs("div",{id:"wb-canvas-container",style:{backgroundColor:"#fff",position:"relative",width:"100%",height:"100%"},children:[w.jsx("canvas",{ref:l,onMouseDown:zt,onMouseMove:Wt,onMouseUp:Lt,onMouseLeave:Lt,onDoubleClick:s=>{if(k)return;const C=l.current.getBoundingClientRect(),o=s.clientX-C.left,y=s.clientY-C.top,{x,y:O}=Et(o,y),_=Qe(x,O);_&&_.type==="text"&&(D(_.id),_e({x:_.x,y:_.y}),se(_.text),z.current=_.text,ge(!0))},onContextMenu:Er,style:{cursor:Yt()}}),k&&w.jsx(ua,{text:n||((Vt=t==null?void 0:t.lock)==null?void 0:Vt.text)||T.text}),Ye&&w.jsx("input",{type:"text",value:ae,onChange:s=>{const b=s.target.value;se(b),de(b)},onKeyDown:s=>{s.key==="Enter"&&ae.trim()?(ce&&(u(gt({id:ce,updates:{text:ae}})),z.current=ae),ge(!1),se(""),D(null)):s.key==="Escape"&&(ge(!1),se(""),D(null))},onBlur:()=>{ae.trim()&&ce&&(u(gt({id:ce,updates:{text:ae}})),z.current=ae),ge(!1),se(""),D(null)},onMouseDown:s=>s.stopPropagation(),autoFocus:!0,style:{position:"absolute",left:Ce.x*v.zoom+v.panX,top:Ce.y*v.zoom+v.panY,fontSize:d.text.fontSize*v.zoom,color:d.text.fontColor,background:"white",border:"2px solid #0066cc",outline:"none",fontFamily:"sans-serif",minWidth:"150px",padding:"4px 8px",zIndex:1e3,boxShadow:"0 2px 8px rgba(0,0,0,0.2)"}}),w.jsx(ba,{onExport:Fe,onFitToView:wt,mode:h}),w.jsx(wa,{}),he.visible&&w.jsx(Fi,{})]})}),xa=M.forwardRef((e,t)=>w.jsx(mo,{store:zn,children:w.jsx(Co,{children:w.jsx($n,{ref:t,...e})})}));pe.WhiteboardComponent=$n,pe.default=xa,pe.store=zn,pe.whiteboardActions=zi,pe.whiteboardReducer=Dn,Object.defineProperties(pe,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "author": "Nines Studios",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/huzeyfecoskun/whiteboard",
7
- "version": "0.0.9",
7
+ "version": "0.1.0",
8
8
  "type": "module",
9
9
  "main": "./dist/whiteboard.umd.js",
10
10
  "module": "./dist/whiteboard.es.js",