Merge pull request #205 from germanocaumo/tldraw

feat(whiteboard): add tldraw support

package.json

@@ -3,6 +3,7 @@
   "version": "4.0.0",
   "homepage": "/playback/presentation/2.3",
   "dependencies": {
+    "@tldraw/tldraw": "^1.16.0",
     "classnames": "^2.3.1",
     "darkreader": "^4.9.46",
     "linkify-react": "^3.0.4",
@@ -12,12 +13,12 @@
     "react-dom": "^18.1.0",
     "react-intl": "^6.0.3",
     "react-router-dom": "^6.3.0",
+    "react-sizeme": "^3.0.2",
     "sass": "^1.52.1",
-    "video.js": "^7.19.2",
-    "xml2js": "^0.4.23"
+    "video.js": "^7.19.2"
   },
   "devDependencies": {
-    "react-scripts": "^4.0.3"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/player/buttons/index.scss

@@ -21,7 +21,7 @@
 .fullscreen-button {
   margin-top: $margin;
   position: fixed;
-  z-index: 1;
+  z-index: 2;
 
   [dir="ltr"] & {
     right: 0;

src/components/player/content/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
 import Presentation from 'components/presentation';
+import TldrawPresentation from 'components/tldraw';
 import Screenshare from 'components/screenshare';
 import Thumbnails from 'components/thumbnails';
 import FullscreenButton from 'components/player/buttons/fullscreen';
 import { LAYOUT } from 'utils/constants';
 import { isEqual } from 'utils/data/validators';
 import layout from 'utils/layout';
+import storage from 'utils/data/storage';
 import './index.scss';
 
 const Content = ({
@@ -18,6 +20,10 @@ const Content = ({
 }) => {
   if (layout.single) return null;
 
+  const isTldrawWhiteboard = storage.tldraw.length ||
+                             storage.panzooms.tldraw ||
+                             storage.cursor.tldraw;
+
   return (
     <div className={cx('content', { 'swapped-content': swap })}>
       <FullscreenButton
@@ -27,7 +33,7 @@ const Content = ({
         toggleFullscreen={toggleFullscreen}
       />
       <div className="top-content">
-        <Presentation />
+        {isTldrawWhiteboard ? <TldrawPresentation /> : <Presentation />}
         {layout.screenshare ? <Screenshare /> : null}
       </div>
       <div className={cx('bottom-content', { 'inactive': fullscreen })}>

src/components/presentation/canvas/index.js

@@ -48,28 +48,28 @@ const Canvas = () => {
         canvas.push(
           <circle
             style={style}
-            cx={data.cx}
-            cy={data.cy}
-            r={data.r}
+            cx={data._cx}
+            cy={data._cy}
+            r={data._r}
           />
         );
         break;
       case SHAPES.LINE:
         canvas.push(
           <line
             style={style}
-            x1={data.x1}
-            y1={data.y1}
-            x2={data.x2}
-            y2={data.y2}
+            x1={data._x1}
+            y1={data._y1}
+            x2={data._x2}
+            y2={data._y2}
           />
         );
         break;
       case SHAPES.PATH:
         canvas.push(
           <path
             style={style}
-            d={data.d}
+            d={data._d}
           />
         );
         break;
@@ -86,26 +86,26 @@ const Canvas = () => {
         canvas.push(
           <polygon
             style={style}
-            points={data.points}
+            points={data._points}
           />
         );
         break;
       case SHAPES.POLYLINE:
         canvas.push(
           <polyline
             style={style}
-            points={data.points}
+            points={data._points}
           />
         );
         break;
       case SHAPES.TEXT:
         canvas.push(
           <foreignObject
             style={style}
-            height={data.height}
-            width={data.width}
-            x={data.x}
-            y={data.y}
+            height={data._height}
+            width={data._width}
+            x={data._x}
+            y={data._y}
           >
             <div xmlns="http://www.w3.org/1999/xhtml">
               {data.text.split('\r').map(line => <span>{line}<br /></span>)}

src/components/presentation/canvas/poll.js

@@ -16,21 +16,21 @@ const Poll = ({
     return (
       <g style={style}>
         <rect
-          fill={rect.fill}
-          height={rect.height}
-          stroke={rect.stroke}
-          strokeWidth={rect['stroke-width']}
-          width={rect.width}
-          x={rect.x}
-          y={rect.y}
+          fill={rect._fill}
+          height={rect._height}
+          stroke={rect._stroke}
+          strokeWidth={rect['_stroke-width']}
+          width={rect._width}
+          x={rect._x}
+          y={rect._y}
         />
         <image
-          height={image.height}
-          transform={image.transform}
-          width={image.width}
-          x={image.x}
-          href={buildFileURL(image['xlink:href'])}
-          y={image.y}
+          height={image._height}
+          transform={image._transform}
+          width={image._width}
+          x={image._x}
+          href={buildFileURL(image['_xlink:href'])}
+          y={image._y}
         />
       </g>
     );
@@ -39,11 +39,11 @@ const Poll = ({
      return (
       <g style={style}>
         <image
-          height={image.height}
-          width={image.width}
-          x={image.x}
-          href={buildFileURL(image['xlink:href'])}
-          y={image.y}
+          height={image._height}
+          width={image._width}
+          x={image._x}
+          href={buildFileURL(image['_xlink:href'])}
+          y={image._y}
         />
       </g>
     );

src/components/tldraw/cursor.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useCurrentIndex } from 'components/utils/hooks';
+import storage from 'utils/data/storage';
+import './index.scss';
+
+const getCursor = (index, size, pageState) => {
+  const inactive = {
+    x: -1,
+    y: -1,
+  }
+
+  if (index === -1) return inactive;
+
+  const currentData = storage.cursor[index];
+  if (currentData.x === -1 && currentData.y === -1) return inactive;
+
+  let _x = null;
+  let _y = null;
+
+  _x = (currentData.x + pageState?.camera?.point[0]) * pageState?.camera?.zoom;
+  _y = (currentData.y + pageState?.camera?.point[1]) * pageState?.camera?.zoom;
+
+  if (_x > size.width || _y > size.height ) return inactive;
+
+  return {
+    x: _x,
+    y: _y
+  };
+};
+
+const Cursor = ({ tldrawAPI, size }) => {
+  const currentIndex = useCurrentIndex(storage.cursor);
+  const { x, y } = getCursor(currentIndex, size, tldrawAPI?.getPageState());
+
+  if (x === -1 || y === -1) return null;
+
+  return (
+    <div
+      style={{
+        zIndex: 2,
+        position: "absolute",
+        left: x - 5.0,
+        top: y - 5.0,
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        background: "#C70039",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};
+
+export default Cursor;