Collabration-stories.787b0c0e.iframe.bundle.js

(self.webpackChunkfortune_sheet=self.webpackChunkfortune_sheet||[]).push([[611],{"./stories/Collabration.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Example:()=>Example,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Collabration_stories});var react=__webpack_require__("./node_modules/react/index.js"),src=__webpack_require__("./packages/core/src/index.ts"),react_src=__webpack_require__("./packages/react/src/index.ts"),uuid=__webpack_require__("./node_modules/uuid/index.js");function hashCode(str){let i,chr,hash=0;if(0===str.length)return hash;for(i=0;i<str.length;i+=1)chr=str.charCodeAt(i),hash=(hash<<5)-hash+chr,hash|=0;return hash}var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Collabration_stories={component:react_src.I},Template=_ref=>{let{...args}=_ref;const[data,setData]=(0,react.useState)(),[error,setError]=(0,react.useState)(!1),wsRef=(0,react.useRef)(),workbookRef=(0,react.useRef)(null),lastSelection=(0,react.useRef)(),{username,userId}=(0,react.useMemo)((()=>{const _userId=(0,uuid.v4)();return{username:`User-${_userId.slice(0,3)}`,userId:_userId}}),[]);(0,react.useEffect)((()=>{const socket=new WebSocket("ws://localhost:8081/ws");wsRef.current=socket,socket.onopen=()=>{socket.send(JSON.stringify({req:"getData"}))},socket.onmessage=e=>{const msg=JSON.parse(e.data);"getData"===msg.req?setData(msg.data.map((d=>({id:d._id,...d})))):"op"===msg.req?workbookRef.current?.applyOp(msg.data):"addPresences"===msg.req?workbookRef.current?.addPresences(msg.data):"removePresences"===msg.req&&workbookRef.current?.removePresences(msg.data)},socket.onerror=()=>{setError(!0)}}),[]);const onOp=(0,react.useCallback)((op=>{const socket=wsRef.current;socket&&socket.send(JSON.stringify({req:"op",data:op}))}),[]),onChange=(0,react.useCallback)((d=>{setData(d)}),[]),afterSelectionChange=(0,react.useCallback)(((sheetId,selection)=>{const socket=wsRef.current;if(!socket)return;const s={r:selection.row[0],c:selection.column[0]};lastSelection.current?.r===s.r&&lastSelection.current?.c===s.c||(lastSelection.current=s,socket.send(JSON.stringify({req:"addPresences",data:[{sheetId,username,userId,color:src.O9T[Math.abs(hashCode(userId))%src.O9T.length],selection:s}]})))}),[userId,username]);return error?(0,jsx_runtime.jsxs)("div",{style:{padding:16},children:[(0,jsx_runtime.jsx)("p",{children:"Failed to connect to websocket server."}),(0,jsx_runtime.jsx)("p",{children:"Please note that this collabration demo connects to a local websocket server (ws://localhost:8081/ws)."}),(0,jsx_runtime.jsxs)("p",{children:["To make this work:",(0,jsx_runtime.jsxs)("ol",{children:[(0,jsx_runtime.jsx)("li",{children:"Clone the project"}),(0,jsx_runtime.jsx)("li",{children:"Run server in backend-demo/: node index.js"}),(0,jsx_runtime.jsx)("li",{children:"Make sure you also have mongodb running locally"}),(0,jsx_runtime.jsx)("li",{children:"Try again"})]})]})]}):data?(0,jsx_runtime.jsx)("div",{style:{width:"100%",height:"100vh"},children:(0,jsx_runtime.jsx)(react_src.I,{ref:workbookRef,...args,data,onChange,onOp,hooks:{afterSelectionChange}})}):(0,jsx_runtime.jsx)("div",{})};Template.displayName="Template";const Example=Template.bind({});Example.parameters={...Example.parameters,docs:{...Example.parameters?.docs,source:{originalSource:'({\n  ...args\n}) => {\n  const [data, setData] = useState<Sheet[]>();\n  const [error, setError] = useState(false);\n  const wsRef = useRef<WebSocket>();\n  const workbookRef = useRef<WorkbookInstance>(null);\n  const lastSelection = useRef<any>();\n  const {\n    username,\n    userId\n  } = useMemo(() => {\n    const _userId = uuidv4();\n    return {\n      username: `User-${_userId.slice(0, 3)}`,\n      userId: _userId\n    };\n  }, []);\n  useEffect(() => {\n    const socket = new WebSocket("ws://localhost:8081/ws");\n    wsRef.current = socket;\n    socket.onopen = () => {\n      socket.send(JSON.stringify({\n        req: "getData"\n      }));\n    };\n    socket.onmessage = e => {\n      const msg = JSON.parse(e.data);\n      if (msg.req === "getData") {\n        setData(msg.data.map((d: any) => ({\n          id: d._id,\n          ...d\n        })));\n      } else if (msg.req === "op") {\n        workbookRef.current?.applyOp(msg.data);\n      } else if (msg.req === "addPresences") {\n        workbookRef.current?.addPresences(msg.data);\n      } else if (msg.req === "removePresences") {\n        workbookRef.current?.removePresences(msg.data);\n      }\n    };\n    socket.onerror = () => {\n      setError(true);\n    };\n  }, []);\n  const onOp = useCallback((op: Op[]) => {\n    const socket = wsRef.current;\n    if (!socket) return;\n    socket.send(JSON.stringify({\n      req: "op",\n      data: op\n    }));\n  }, []);\n  const onChange = useCallback((d: Sheet[]) => {\n    setData(d);\n  }, []);\n  const afterSelectionChange = useCallback((sheetId: string, selection: Selection) => {\n    const socket = wsRef.current;\n    if (!socket) return;\n    const s = {\n      r: selection.row[0],\n      c: selection.column[0]\n    };\n    if (lastSelection.current?.r === s.r && lastSelection.current?.c === s.c) {\n      return;\n    }\n    lastSelection.current = s;\n    socket.send(JSON.stringify({\n      req: "addPresences",\n      data: [{\n        sheetId,\n        username,\n        userId,\n        color: colors[Math.abs(hashCode(userId)) % colors.length],\n        selection: s\n      }]\n    }));\n  }, [userId, username]);\n  if (error) return <div style={{\n    padding: 16\n  }}>\n        <p>Failed to connect to websocket server.</p>\n        <p>\n          Please note that this collabration demo connects to a local websocket\n          server (ws://localhost:8081/ws).\n        </p>\n        <p>\n          To make this work:\n          <ol>\n            <li>Clone the project</li>\n            <li>Run server in backend-demo/: node index.js</li>\n            <li>Make sure you also have mongodb running locally</li>\n            <li>Try again</li>\n          </ol>\n        </p>\n      </div>;\n  if (!data) return <div />;\n  return <div style={{\n    width: "100%",\n    height: "100vh"\n  }}>\n      <Workbook ref={workbookRef} {...args} data={data} onChange={onChange} onOp={onOp} hooks={{\n      afterSelectionChange\n    }} />\n    </div>;\n}',...Example.parameters?.docs?.source}}};const __namedExportsOrder=["Example"]},"./node_modules/uuid/index.js":(module,__unused_webpack_exports,__webpack_require__)=>{var v1=__webpack_require__("./node_modules/uuid/v1.js"),v4=__webpack_require__("./node_modules/uuid/v4.js"),uuid=v4;uuid.v1=v1,uuid.v4=v4,module.exports=uuid},"./node_modules/uuid/lib/bytesToUuid.js":module=>{for(var byteToHex=[],i=0;i<256;++i)byteToHex[i]=(i+256).toString(16).substr(1);module.exports=function bytesToUuid(buf,offset){var i=offset||0,bth=byteToHex;return[bth[buf[i++]],bth[buf[i++]],bth[buf[i++]],bth[buf[i++]],"-",bth[buf[i++]],bth[buf[i++]],"-",bth[buf[i++]],bth[buf[i++]],"-",bth[buf[i++]],bth[buf[i++]],"-",bth[buf[i++]],bth[buf[i++]],bth[buf[i++]],bth[buf[i++]],bth[buf[i++]],bth[buf[i++]]].join("")}},"./node_modules/uuid/lib/rng-browser.js":module=>{var getRandomValues="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof window.msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto);if(getRandomValues){var rnds8=new Uint8Array(16);module.exports=function whatwgRNG(){return getRandomValues(rnds8),rnds8}}else{var rnds=new Array(16);module.exports=function mathRNG(){for(var r,i=0;i<16;i++)0==(3&i)&&(r=4294967296*Math.random()),rnds[i]=r>>>((3&i)<<3)&255;return rnds}}},"./node_modules/uuid/v1.js":(module,__unused_webpack_exports,__webpack_require__)=>{var _nodeId,_clockseq,rng=__webpack_require__("./node_modules/uuid/lib/rng-browser.js"),bytesToUuid=__webpack_require__("./node_modules/uuid/lib/bytesToUuid.js"),_lastMSecs=0,_lastNSecs=0;module.exports=function v1(options,buf,offset){var i=buf&&offset||0,b=buf||[],node=(options=options||{}).node||_nodeId,clockseq=void 0!==options.clockseq?options.clockseq:_clockseq;if(null==node||null==clockseq){var seedBytes=rng();null==node&&(node=_nodeId=[1|seedBytes[0],seedBytes[1],seedBytes[2],seedBytes[3],seedBytes[4],seedBytes[5]]),null==clockseq&&(clockseq=_clockseq=16383&(seedBytes[6]<<8|seedBytes[7]))}var msecs=void 0!==options.msecs?options.msecs:(new Date).getTime(),nsecs=void 0!==options.nsecs?options.nsecs:_lastNSecs+1,dt=msecs-_lastMSecs+(nsecs-_lastNSecs)/1e4;if(dt<0&&void 0===options.clockseq&&(clockseq=clockseq+1&16383),(dt<0||msecs>_lastMSecs)&&void 0===options.nsecs&&(nsecs=0),nsecs>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");_lastMSecs=msecs,_lastNSecs=nsecs,_clockseq=clockseq;var tl=(1e4*(268435455&(msecs+=122192928e5))+nsecs)%4294967296;b[i++]=tl>>>24&255,b[i++]=tl>>>16&255,b[i++]=tl>>>8&255,b[i++]=255&tl;var tmh=msecs/4294967296*1e4&268435455;b[i++]=tmh>>>8&255,b[i++]=255&tmh,b[i++]=tmh>>>24&15|16,b[i++]=tmh>>>16&255,b[i++]=clockseq>>>8|128,b[i++]=255&clockseq;for(var n=0;n<6;++n)b[i+n]=node[n];return buf||bytesToUuid(b)}},"./node_modules/uuid/v4.js":(module,__unused_webpack_exports,__webpack_require__)=>{var rng=__webpack_require__("./node_modules/uuid/lib/rng-browser.js"),bytesToUuid=__webpack_require__("./node_modules/uuid/lib/bytesToUuid.js");module.exports=function v4(options,buf,offset){var i=buf&&offset||0;"string"==typeof options&&(buf="binary"===options?new Array(16):null,options=null);var rnds=(options=options||{}).random||(options.rng||rng)();if(rnds[6]=15&rnds[6]|64,rnds[8]=63&rnds[8]|128,buf)for(var ii=0;ii<16;++ii)buf[i+ii]=rnds[ii];return buf||bytesToUuid(rnds)}}}]);