react-board-drawing-hook 1.0.0

package/dist/index.js

@@ -0,0 +1,1524 @@
+'use strict';
+
+var react = require('react');
+var socket_ioClient = require('socket.io-client');
+
+// src/hooks/useBoardDrawing.ts
+
+// src/types/board.ts
+var CANVAS_WIDTH = 1600;
+var CANVAS_HEIGHT = 900;
+function clampObjectToCanvas(obj) {
+  const result = { ...obj };
+  result.width = Math.max(result.width, 10);
+  result.height = Math.max(result.height, 10);
+  result.x = Math.max(0, Math.min(CANVAS_WIDTH - result.width, result.x));
+  result.y = Math.max(0, Math.min(CANVAS_HEIGHT - result.height, result.y));
+  if (obj.type === "line" && obj.x2 !== void 0 && obj.y2 !== void 0) {
+    result.x2 = Math.max(0, Math.min(CANVAS_WIDTH, obj.x2));
+    result.y2 = Math.max(0, Math.min(CANVAS_HEIGHT, obj.y2));
+  }
+  if (obj.type === "pencil" && obj.points) {
+    result.points = obj.points.map((point) => ({
+      x: Math.max(0, Math.min(CANVAS_WIDTH, point.x)),
+      y: Math.max(0, Math.min(CANVAS_HEIGHT, point.y))
+    }));
+  }
+  return result;
+}
+function canEditObject(obj, userId) {
+  return obj.locked_by === null || obj.locked_by === userId;
+}
+function generateObjectId() {
+  return `obj_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function rotatePoint(x, y, cx, cy, angle) {
+  const rad = angle * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const dx = x - cx;
+  const dy = y - cy;
+  return {
+    x: cx + (dx * cos - dy * sin),
+    y: cy + (dx * sin + dy * cos)
+  };
+}
+function resizeImageWithAspectRatio(obj, handle, deltaX, deltaY, original) {
+  const result = { ...obj };
+  const aspectRatio = original.aspectRatio || original.width / original.height;
+  switch (handle) {
+    case "se":
+      result.width = Math.max(10, original.width + deltaX);
+      result.height = result.width / aspectRatio;
+      break;
+    case "sw":
+      result.width = Math.max(10, original.width - deltaX);
+      result.height = result.width / aspectRatio;
+      result.x = original.x + original.width - result.width;
+      break;
+    case "ne":
+      result.width = Math.max(10, original.width + deltaX);
+      result.height = result.width / aspectRatio;
+      result.y = original.y + original.height - result.height;
+      break;
+    case "nw":
+      result.width = Math.max(10, original.width - deltaX);
+      result.height = result.width / aspectRatio;
+      result.x = original.x + original.width - result.width;
+      result.y = original.y + original.height - result.height;
+      break;
+    case "e":
+      result.width = Math.max(10, original.width + deltaX);
+      result.height = result.width / aspectRatio;
+      break;
+    case "w":
+      result.width = Math.max(10, original.width - deltaX);
+      result.height = result.width / aspectRatio;
+      result.x = original.x + original.width - result.width;
+      break;
+    case "s":
+      result.height = Math.max(10, original.height + deltaY);
+      result.width = result.height * aspectRatio;
+      break;
+    case "n":
+      result.height = Math.max(10, original.height - deltaY);
+      result.width = result.height * aspectRatio;
+      result.y = original.y + original.height - result.height;
+      break;
+  }
+  return clampObjectToCanvas(result);
+}
+function resizeObjectFree(obj, handle, deltaX, deltaY, original) {
+  const result = { ...obj };
+  const originalLeft = original.x;
+  const originalTop = original.y;
+  const originalRight = original.x + original.width;
+  const originalBottom = original.y + original.height;
+  let newLeft = originalLeft;
+  let newTop = originalTop;
+  let newRight = originalRight;
+  let newBottom = originalBottom;
+  switch (handle) {
+    case "nw":
+      newLeft = originalLeft + deltaX;
+      newTop = originalTop + deltaY;
+      break;
+    case "n":
+      newTop = originalTop + deltaY;
+      break;
+    case "ne":
+      newRight = originalRight + deltaX;
+      newTop = originalTop + deltaY;
+      break;
+    case "e":
+      newRight = originalRight + deltaX;
+      break;
+    case "se":
+      newRight = originalRight + deltaX;
+      newBottom = originalBottom + deltaY;
+      break;
+    case "s":
+      newBottom = originalBottom + deltaY;
+      break;
+    case "sw":
+      newLeft = originalLeft + deltaX;
+      newBottom = originalBottom + deltaY;
+      break;
+    case "w":
+      newLeft = originalLeft + deltaX;
+      break;
+  }
+  const finalLeft = Math.min(newLeft, newRight);
+  const finalRight = Math.max(newLeft, newRight);
+  const finalTop = Math.min(newTop, newBottom);
+  const finalBottom = Math.max(newTop, newBottom);
+  const finalWidth = finalRight - finalLeft;
+  const finalHeight = finalBottom - finalTop;
+  const minSize = 10;
+  if (finalWidth < minSize) {
+    const center = (finalLeft + finalRight) / 2;
+    result.x = center - minSize / 2;
+    result.width = minSize;
+  } else {
+    result.x = finalLeft;
+    result.width = finalWidth;
+  }
+  if (finalHeight < minSize) {
+    const center = (finalTop + finalBottom) / 2;
+    result.y = center - minSize / 2;
+    result.height = minSize;
+  } else {
+    result.y = finalTop;
+    result.height = finalHeight;
+  }
+  return clampObjectToCanvas(result);
+}
+function resizeLineObject(obj, handle, deltaX, deltaY, original) {
+  const result = { ...obj };
+  const x1 = original.x;
+  const y1 = original.y;
+  const x2 = original.x2 ?? original.x + original.width;
+  const y2 = original.y2 ?? original.y + original.height;
+  let newX1 = x1;
+  let newY1 = y1;
+  let newX2 = x2;
+  let newY2 = y2;
+  switch (handle) {
+    case "nw":
+    case "w":
+    case "sw":
+      newX1 = x1 + deltaX;
+      newY1 = y1 + deltaY;
+      break;
+    case "ne":
+    case "e":
+    case "se":
+      newX2 = x2 + deltaX;
+      newY2 = y2 + deltaY;
+      break;
+    case "n":
+      newY1 = y1 + deltaY;
+      break;
+    case "s":
+      newY2 = y2 + deltaY;
+      break;
+  }
+  newX1 = Math.max(0, Math.min(CANVAS_WIDTH, newX1));
+  newY1 = Math.max(0, Math.min(CANVAS_HEIGHT, newY1));
+  newX2 = Math.max(0, Math.min(CANVAS_WIDTH, newX2));
+  newY2 = Math.max(0, Math.min(CANVAS_HEIGHT, newY2));
+  result.x = newX1;
+  result.y = newY1;
+  result.x2 = newX2;
+  result.y2 = newY2;
+  result.width = Math.abs(newX2 - newX1);
+  result.height = Math.abs(newY2 - newY1);
+  return clampObjectToCanvas(result);
+}
+function getObjectBoundingBox(obj) {
+  let minX = obj.x;
+  let minY = obj.y;
+  let maxX = obj.x + obj.width;
+  let maxY = obj.y + obj.height;
+  if (obj.type === "line" && obj.x2 !== void 0 && obj.y2 !== void 0) {
+    minX = Math.min(obj.x, obj.x2);
+    minY = Math.min(obj.y, obj.y2);
+    maxX = Math.max(obj.x, obj.x2);
+    maxY = Math.max(obj.y, obj.y2);
+  } else if (obj.type === "pencil" && obj.points && obj.points.length > 0) {
+    minX = Math.min(...obj.points.map((p) => p.x));
+    minY = Math.min(...obj.points.map((p) => p.y));
+    maxX = Math.max(...obj.points.map((p) => p.x));
+    maxY = Math.max(...obj.points.map((p) => p.y));
+  }
+  return { minX, minY, maxX, maxY };
+}
+function isPointInRotatedRectangle(x, y, obj) {
+  if (obj.rotation === 0) {
+    return x >= obj.x && x <= obj.x + obj.width && y >= obj.y && y <= obj.y + obj.height;
+  }
+  const centerX = obj.x + obj.width / 2;
+  const centerY = obj.y + obj.height / 2;
+  const rad = -obj.rotation * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const dx = x - centerX;
+  const dy = y - centerY;
+  const rotatedX = dx * cos - dy * sin;
+  const rotatedY = dx * sin + dy * cos;
+  return Math.abs(rotatedX) <= obj.width / 2 && Math.abs(rotatedY) <= obj.height / 2;
+}
+function distanceToLine(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lengthSq = dx * dx + dy * dy;
+  if (lengthSq === 0) {
+    return Math.hypot(px - x1, py - y1);
+  }
+  let t = ((px - x1) * dx + (py - y1) * dy) / lengthSq;
+  t = Math.max(0, Math.min(1, t));
+  const projX = x1 + t * dx;
+  const projY = y1 + t * dy;
+  return Math.hypot(px - projX, py - projY);
+}
+function isPointInObject(x, y, obj, userId) {
+  if (!canEditObject(obj, userId))
+    return false;
+  if (obj.type === "line" && obj.x2 !== void 0 && obj.y2 !== void 0) {
+    const distance = distanceToLine(x, y, obj.x, obj.y, obj.x2, obj.y2);
+    return distance < (obj.strokeWidth || 2) + 5;
+  }
+  if (obj.type === "pencil" && obj.points) {
+    for (let i = 0; i < obj.points.length - 1; i++) {
+      const distance = distanceToLine(
+        x,
+        y,
+        obj.points[i].x,
+        obj.points[i].y,
+        obj.points[i + 1].x,
+        obj.points[i + 1].y
+      );
+      if (distance < (obj.strokeWidth || 2) + 5)
+        return true;
+    }
+    return false;
+  }
+  return isPointInRotatedRectangle(x, y, obj);
+}
+
+// src/hooks/useBoardDrawing.ts
+var useBoardDrawing = ({
+  boardId,
+  userId,
+  userName,
+  canvasRef,
+  webSocketService,
+  onObjectLocked,
+  onObjectUnlocked,
+  onUserJoined,
+  onUserLeft,
+  config = {}
+}) => {
+  const {
+    enableKeyboardShortcuts = true,
+    enableGlobalListeners = true,
+    maxImageSize = 400,
+    defaultColors = {}
+  } = config;
+  const {
+    stroke: defaultStroke = "#000000",
+    fill: defaultFill = "#4F46E5",
+    lineWidth: defaultLineWidth = 3,
+    fontSize: defaultFontSize = 24
+  } = defaultColors;
+  const [tool, setTool] = react.useState("select");
+  const [color, setColor] = react.useState(defaultStroke);
+  const [fillColor, setFillColor] = react.useState(defaultFill);
+  const [lineWidth, setLineWidth] = react.useState(defaultLineWidth);
+  const [fontSize, setFontSize] = react.useState(defaultFontSize);
+  const [isDrawing, setIsDrawing] = react.useState(false);
+  const [selectedObjectId, setSelectedObjectId] = react.useState(null);
+  const [interactionMode, setInteractionMode] = react.useState("none");
+  const [activeResizeHandle, setActiveResizeHandle] = react.useState(null);
+  const [objects, setObjects] = react.useState([]);
+  const [usersOnline, setUsersOnline] = react.useState([]);
+  const [isConnected, setIsConnected] = react.useState(false);
+  const [editingTextId, setEditingTextId] = react.useState(null);
+  const drawingStartRef = react.useRef(null);
+  const currentPointsRef = react.useRef([]);
+  const tempObjectRef = react.useRef(null);
+  const originalObjectStateRef = react.useRef(null);
+  const rotationStartRef = react.useRef(0);
+  const imageCacheRef = react.useRef(/* @__PURE__ */ new Map());
+  const getCanvasCoordinates = react.useCallback(
+    (clientX, clientY) => {
+      if (!canvasRef.current)
+        return { x: 0, y: 0 };
+      const canvas = canvasRef.current;
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      return {
+        x: (clientX - rect.left) * scaleX,
+        y: (clientY - rect.top) * scaleY
+      };
+    },
+    [canvasRef]
+  );
+  const getObjectCenter = react.useCallback((obj) => {
+    return {
+      x: obj.x + obj.width / 2,
+      y: obj.y + obj.height / 2
+    };
+  }, []);
+  const findObjectAtPoint = react.useCallback(
+    (x, y) => {
+      for (let i = objects.length - 1; i >= 0; i--) {
+        const obj = objects[i];
+        if (isPointInObject(x, y, obj, userId)) {
+          return obj;
+        }
+      }
+      return null;
+    },
+    [objects, userId]
+  );
+  const findHandleAtPoint = react.useCallback(
+    (x, y, obj) => {
+      if (obj.type === "pencil")
+        return null;
+      const centerX = obj.x + obj.width / 2;
+      const centerY = obj.y + obj.height / 2;
+      const rad = -obj.rotation * Math.PI / 180;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const dx = x - centerX;
+      const dy = y - centerY;
+      const localX = centerX + (dx * cos - dy * sin);
+      const localY = centerY + (dx * sin + dy * cos);
+      const rotationHandle = {
+        x: centerX,
+        y: centerY - obj.height / 2 - 35
+      };
+      const dxRot = localX - rotationHandle.x;
+      const dyRot = localY - rotationHandle.y;
+      if (Math.hypot(dxRot, dyRot) <= 12) {
+        return "rotate";
+      }
+      const handles = {
+        nw: { x: obj.x, y: obj.y },
+        n: { x: obj.x + obj.width / 2, y: obj.y },
+        ne: { x: obj.x + obj.width, y: obj.y },
+        e: { x: obj.x + obj.width, y: obj.y + obj.height / 2 },
+        se: { x: obj.x + obj.width, y: obj.y + obj.height },
+        s: { x: obj.x + obj.width / 2, y: obj.y + obj.height },
+        sw: { x: obj.x, y: obj.y + obj.height },
+        w: { x: obj.x, y: obj.y + obj.height / 2 }
+      };
+      for (const [handle, point] of Object.entries(handles)) {
+        const hDx = localX - point.x;
+        const hDy = localY - point.y;
+        if (Math.hypot(hDx, hDy) <= 8) {
+          return handle;
+        }
+      }
+      return null;
+    },
+    []
+  );
+  react.useEffect(() => {
+    const handlers = {
+      onConnectionChange: setIsConnected,
+      onObjectLocked: (objectId, lockedBy, lockedByName) => {
+        setObjects(
+          (prev) => prev.map(
+            (obj) => obj.id === objectId ? { ...obj, locked_by: lockedBy, locked_by_name: lockedByName } : obj
+          )
+        );
+        onObjectLocked?.(objectId, lockedBy, lockedByName);
+      },
+      onObjectUnlocked: (objectId) => {
+        setObjects(
+          (prev) => prev.map(
+            (obj) => obj.id === objectId ? { ...obj, locked_by: null, locked_by_name: null } : obj
+          )
+        );
+        onObjectUnlocked?.(objectId);
+      },
+      onObjectCreated: (object) => {
+        setObjects((prev) => {
+          if (prev.some((o) => o.id === object.id))
+            return prev;
+          return [...prev, object];
+        });
+      },
+      onObjectUpdated: (object) => {
+        setObjects(
+          (prev) => prev.map((obj) => obj.id === object.id ? object : obj)
+        );
+      },
+      onObjectDeleted: (objectId) => {
+        setObjects((prev) => prev.filter((obj) => obj.id !== objectId));
+        if (selectedObjectId === objectId) {
+          setSelectedObjectId(null);
+          setInteractionMode("none");
+        }
+      },
+      onUserJoined: (joinedUserId, joinedUserName) => {
+        setUsersOnline((prev) => [
+          ...prev.filter((u) => u.id !== joinedUserId),
+          { id: joinedUserId, name: joinedUserName }
+        ]);
+        onUserJoined?.(joinedUserId, joinedUserName);
+      },
+      onUserLeft: (leftUserId, leftUserName) => {
+        setUsersOnline((prev) => prev.filter((u) => u.id !== leftUserId));
+        onUserLeft?.(leftUserId, leftUserName);
+      },
+      onError: (error) => {
+        console.error("[BoardDrawing]", error);
+      }
+    };
+    webSocketService.setEventHandlers(handlers);
+    webSocketService.connect(boardId, userId, userName);
+    return () => {
+      webSocketService.disconnect();
+    };
+  }, [
+    boardId,
+    userId,
+    userName,
+    webSocketService,
+    selectedObjectId,
+    onObjectLocked,
+    onObjectUnlocked,
+    onUserJoined,
+    onUserLeft
+  ]);
+  const drawObject = react.useCallback(
+    (ctx, obj, isSelected) => {
+      ctx.save();
+      if (obj.rotation !== 0) {
+        const centerX = obj.x + obj.width / 2;
+        const centerY = obj.y + obj.height / 2;
+        ctx.translate(centerX, centerY);
+        ctx.rotate(obj.rotation * Math.PI / 180);
+        ctx.translate(-centerX, -centerY);
+      }
+      if (isSelected) {
+        ctx.strokeStyle = "#3B82F6";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        ctx.strokeRect(obj.x - 5, obj.y - 5, obj.width + 10, obj.height + 10);
+        ctx.setLineDash([]);
+      }
+      ctx.strokeStyle = obj.strokeColor || obj.color || defaultStroke;
+      ctx.fillStyle = obj.fillColor || "transparent";
+      ctx.lineWidth = obj.strokeWidth || defaultLineWidth;
+      switch (obj.type) {
+        case "rectangle":
+          if (obj.fillColor)
+            ctx.fillRect(obj.x, obj.y, obj.width, obj.height);
+          ctx.strokeRect(obj.x, obj.y, obj.width, obj.height);
+          break;
+        case "circle":
+          ctx.beginPath();
+          ctx.ellipse(
+            obj.x + obj.width / 2,
+            obj.y + obj.height / 2,
+            obj.width / 2,
+            obj.height / 2,
+            0,
+            0,
+            Math.PI * 2
+          );
+          if (obj.fillColor)
+            ctx.fill();
+          ctx.stroke();
+          break;
+        case "line":
+          if (obj.x2 !== void 0 && obj.y2 !== void 0) {
+            ctx.beginPath();
+            ctx.moveTo(obj.x, obj.y);
+            ctx.lineTo(obj.x2, obj.y2);
+            ctx.stroke();
+          }
+          break;
+        case "pencil":
+          if (obj.points && obj.points.length > 0) {
+            ctx.beginPath();
+            ctx.moveTo(obj.points[0].x, obj.points[0].y);
+            for (let i = 1; i < obj.points.length; i++) {
+              ctx.lineTo(obj.points[i].x, obj.points[i].y);
+            }
+            ctx.stroke();
+          }
+          break;
+        case "text":
+          if (obj.content) {
+            ctx.fillStyle = obj.color || defaultStroke;
+            ctx.font = `${obj.fontSize || defaultFontSize}px Arial, sans-serif`;
+            ctx.textBaseline = "top";
+            ctx.fillText(obj.content, obj.x, obj.y);
+          }
+          break;
+        case "image":
+          if (obj.imageUrl) {
+            const img = imageCacheRef.current.get(obj.imageUrl);
+            if (img?.complete) {
+              ctx.drawImage(img, obj.x, obj.y, obj.width, obj.height);
+            }
+          }
+          break;
+      }
+      ctx.restore();
+      if (obj.locked_by && obj.locked_by !== userId) {
+        ctx.save();
+        ctx.font = "12px Arial, sans-serif";
+        ctx.fillStyle = "rgba(249, 115, 22, 0.9)";
+        const text = `\u{1F512} ${obj.locked_by_name || "Locked"}`;
+        const metrics = ctx.measureText(text);
+        const padding = 8;
+        const boxWidth = metrics.width + padding * 2;
+        const boxHeight = 24;
+        const centerX = obj.x + obj.width / 2;
+        ctx.roundRect(
+          centerX - boxWidth / 2,
+          obj.y - boxHeight - 5,
+          boxWidth,
+          boxHeight,
+          4
+        );
+        ctx.fill();
+        ctx.fillStyle = "white";
+        ctx.font = "12px Arial, sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(text, centerX, obj.y - boxHeight / 2 - 5);
+        ctx.restore();
+      }
+    },
+    [defaultStroke, defaultLineWidth, defaultFontSize, userId]
+  );
+  const drawResizeHandles = react.useCallback(
+    (ctx, obj) => {
+      if (obj.type === "pencil")
+        return;
+      ctx.save();
+      if (obj.rotation !== 0) {
+        const centerX = obj.x + obj.width / 2;
+        const centerY = obj.y + obj.height / 2;
+        ctx.translate(centerX, centerY);
+        ctx.rotate(obj.rotation * Math.PI / 180);
+        ctx.translate(-centerX, -centerY);
+      }
+      ctx.fillStyle = "#3B82F6";
+      ctx.strokeStyle = "#FFFFFF";
+      ctx.lineWidth = 2;
+      const handles = [
+        { x: obj.x - 4, y: obj.y - 4 },
+        { x: obj.x + obj.width / 2 - 4, y: obj.y - 4 },
+        { x: obj.x + obj.width - 4, y: obj.y - 4 },
+        { x: obj.x + obj.width - 4, y: obj.y + obj.height / 2 - 4 },
+        { x: obj.x + obj.width - 4, y: obj.y + obj.height - 4 },
+        { x: obj.x + obj.width / 2 - 4, y: obj.y + obj.height - 4 },
+        { x: obj.x - 4, y: obj.y + obj.height - 4 },
+        { x: obj.x - 4, y: obj.y + obj.height / 2 - 4 }
+      ];
+      handles.forEach((handle) => {
+        ctx.beginPath();
+        ctx.rect(handle.x, handle.y, 8, 8);
+        ctx.fill();
+        ctx.stroke();
+      });
+      ctx.restore();
+    },
+    []
+  );
+  const drawRotationHandle = react.useCallback(
+    (ctx, obj) => {
+      if (obj.type === "pencil")
+        return;
+      const centerX = obj.x + obj.width / 2;
+      ctx.save();
+      if (obj.rotation !== 0) {
+        const centerY = obj.y + obj.height / 2;
+        ctx.translate(centerX, centerY);
+        ctx.rotate(obj.rotation * Math.PI / 180);
+        ctx.translate(-centerX, -centerY);
+      }
+      const handleX = centerX;
+      const handleY = obj.y - 35;
+      ctx.strokeStyle = "#3B82F6";
+      ctx.lineWidth = 1;
+      ctx.setLineDash([2, 2]);
+      ctx.beginPath();
+      ctx.moveTo(centerX, obj.y);
+      ctx.lineTo(handleX, handleY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = "#3B82F6";
+      ctx.strokeStyle = "#FFFFFF";
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(handleX, handleY, 8, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "#FFFFFF";
+      ctx.font = "12px Arial";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("\u21BB", handleX, handleY);
+      ctx.restore();
+    },
+    []
+  );
+  const redrawCanvas = react.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    objects.forEach((obj) => {
+      if (obj.id === editingTextId)
+        return;
+      const isSelected = obj.id === selectedObjectId;
+      drawObject(ctx, obj, isSelected);
+    });
+    if (tempObjectRef.current) {
+      drawObject(ctx, tempObjectRef.current, false);
+    }
+    if (selectedObjectId) {
+      const obj = objects.find((o) => o.id === selectedObjectId);
+      if (obj && canEditObject(obj, userId) && obj.type !== "pencil") {
+        drawResizeHandles(ctx, obj);
+        drawRotationHandle(ctx, obj);
+      }
+    }
+  }, [
+    canvasRef,
+    objects,
+    selectedObjectId,
+    editingTextId,
+    userId,
+    drawObject,
+    drawResizeHandles,
+    drawRotationHandle
+  ]);
+  react.useEffect(() => {
+    redrawCanvas();
+  }, [redrawCanvas]);
+  const handleMouseDown = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      const { x, y } = getCanvasCoordinates(e.clientX, e.clientY);
+      if (tool === "select") {
+        if (selectedObjectId) {
+          const selectedObj = objects.find((o) => o.id === selectedObjectId);
+          if (selectedObj) {
+            const handle = findHandleAtPoint(x, y, selectedObj);
+            if (handle) {
+              if (handle === "rotate") {
+                setInteractionMode("rotate");
+                setActiveResizeHandle("rotate");
+                const center = getObjectCenter(selectedObj);
+                rotationStartRef.current = Math.atan2(y - center.y, x - center.x) * 180 / Math.PI - selectedObj.rotation;
+              } else {
+                setInteractionMode("resize");
+                setActiveResizeHandle(handle);
+              }
+              originalObjectStateRef.current = {
+                obj: { ...selectedObj },
+                centerX: selectedObj.x + selectedObj.width / 2,
+                centerY: selectedObj.y + selectedObj.height / 2
+              };
+              webSocketService.lockObject(selectedObjectId);
+              drawingStartRef.current = { x, y };
+              setIsDrawing(true);
+              return;
+            }
+          }
+        }
+        const object = findObjectAtPoint(x, y);
+        if (object) {
+          if (selectedObjectId && selectedObjectId !== object.id) {
+            webSocketService.unlockObject(selectedObjectId);
+          }
+          setSelectedObjectId(object.id);
+          webSocketService.lockObject(object.id);
+          setInteractionMode("move");
+          originalObjectStateRef.current = {
+            obj: { ...object },
+            centerX: object.x + object.width / 2,
+            centerY: object.y + object.height / 2
+          };
+          drawingStartRef.current = { x, y };
+          setIsDrawing(true);
+        } else {
+          if (selectedObjectId) {
+            webSocketService.unlockObject(selectedObjectId);
+          }
+          setSelectedObjectId(null);
+          setInteractionMode("none");
+        }
+      } else if (tool === "eraser") {
+        const object = findObjectAtPoint(x, y);
+        if (object) {
+          webSocketService.deleteObject(object.id);
+        }
+      } else {
+        setInteractionMode("draw");
+        drawingStartRef.current = { x, y };
+        currentPointsRef.current = [{ x, y }];
+        setIsDrawing(true);
+        if (tool === "pencil") {
+          tempObjectRef.current = {
+            id: `temp_${Date.now()}`,
+            type: "pencil",
+            x,
+            y,
+            width: 0,
+            height: 0,
+            rotation: 0,
+            points: [{ x, y }],
+            strokeColor: color,
+            strokeWidth: lineWidth,
+            locked_by: null,
+            locked_by_name: null
+          };
+        }
+      }
+    },
+    [
+      tool,
+      color,
+      lineWidth,
+      userId,
+      selectedObjectId,
+      objects,
+      getCanvasCoordinates,
+      findObjectAtPoint,
+      findHandleAtPoint,
+      getObjectCenter,
+      webSocketService
+    ]
+  );
+  const handleMouseMove = react.useCallback(
+    (e) => {
+      const { x, y } = getCanvasCoordinates(e.clientX, e.clientY);
+      if (!isDrawing && tool === "select" && canvasRef.current) {
+        let cursor = "default";
+        if (selectedObjectId) {
+          const obj = objects.find((o) => o.id === selectedObjectId);
+          if (obj && obj.type !== "pencil") {
+            const handle = findHandleAtPoint(x, y, obj);
+            if (handle) {
+              switch (handle) {
+                case "nw":
+                case "se":
+                  cursor = "nwse-resize";
+                  break;
+                case "ne":
+                case "sw":
+                  cursor = "nesw-resize";
+                  break;
+                case "n":
+                case "s":
+                  cursor = "ns-resize";
+                  break;
+                case "e":
+                case "w":
+                  cursor = "ew-resize";
+                  break;
+                case "rotate":
+                  cursor = "grab";
+                  break;
+              }
+            }
+          }
+        }
+        if (cursor === "default") {
+          const object = findObjectAtPoint(x, y);
+          if (object)
+            cursor = "move";
+        }
+        canvasRef.current.style.cursor = cursor;
+      }
+      if (!isDrawing)
+        return;
+      if (interactionMode === "move" && selectedObjectId && originalObjectStateRef.current) {
+        const deltaX = x - (drawingStartRef.current?.x || 0);
+        const deltaY = y - (drawingStartRef.current?.y || 0);
+        setObjects(
+          (prev) => prev.map((obj) => {
+            if (obj.id === selectedObjectId) {
+              const original = originalObjectStateRef.current.obj;
+              let updated = {
+                ...obj,
+                x: original.x + deltaX,
+                y: original.y + deltaY
+              };
+              if (obj.type === "line" && obj.x2 !== void 0 && obj.y2 !== void 0) {
+                updated.x2 = original.x2 + deltaX;
+                updated.y2 = original.y2 + deltaY;
+              }
+              if (obj.type === "pencil" && obj.points) {
+                updated.points = original.points.map((p) => ({
+                  x: p.x + deltaX,
+                  y: p.y + deltaY
+                }));
+              }
+              return clampObjectToCanvas(updated);
+            }
+            return obj;
+          })
+        );
+      } else if (interactionMode === "rotate" && selectedObjectId && originalObjectStateRef.current) {
+        const center = originalObjectStateRef.current;
+        const currentAngle = Math.atan2(y - center.centerY, x - center.centerX) * 180 / Math.PI;
+        const newRotation = currentAngle - rotationStartRef.current;
+        setObjects(
+          (prev) => prev.map(
+            (obj) => obj.id === selectedObjectId ? { ...obj, rotation: newRotation } : obj
+          )
+        );
+      } else if (interactionMode === "resize" && selectedObjectId && activeResizeHandle && originalObjectStateRef.current) {
+        const globalDeltaX = x - (drawingStartRef.current?.x || 0);
+        const globalDeltaY = y - (drawingStartRef.current?.y || 0);
+        const obj = objects.find((o) => o.id === selectedObjectId);
+        if (!obj)
+          return;
+        const original = originalObjectStateRef.current.obj;
+        const rad = -original.rotation * Math.PI / 180;
+        const cos = Math.cos(rad);
+        const sin = Math.sin(rad);
+        const localDeltaX = globalDeltaX * cos - globalDeltaY * sin;
+        const localDeltaY = globalDeltaX * sin + globalDeltaY * cos;
+        let updated = obj;
+        if (obj.type === "line") {
+          updated = resizeLineObject(
+            obj,
+            activeResizeHandle,
+            localDeltaX,
+            localDeltaY,
+            original
+          );
+        } else if (obj.type === "image") {
+          updated = resizeImageWithAspectRatio(
+            obj,
+            activeResizeHandle,
+            localDeltaX,
+            localDeltaY,
+            original
+          );
+        } else {
+          updated = resizeObjectFree(
+            obj,
+            activeResizeHandle,
+            localDeltaX,
+            localDeltaY,
+            original
+          );
+        }
+        setObjects(
+          (prev) => prev.map((o) => o.id === selectedObjectId ? updated : o)
+        );
+      } else if (interactionMode === "draw" && drawingStartRef.current) {
+        currentPointsRef.current.push({ x, y });
+        if (tool === "line") {
+          tempObjectRef.current = {
+            id: `temp_${Date.now()}`,
+            type: "line",
+            x: drawingStartRef.current.x,
+            y: drawingStartRef.current.y,
+            width: Math.abs(x - drawingStartRef.current.x),
+            height: Math.abs(y - drawingStartRef.current.y),
+            rotation: 0,
+            strokeColor: color,
+            strokeWidth: lineWidth,
+            x2: x,
+            y2: y,
+            locked_by: null,
+            locked_by_name: null
+          };
+        } else if (tool === "rectangle") {
+          tempObjectRef.current = {
+            id: `temp_${Date.now()}`,
+            type: "rectangle",
+            x: Math.min(drawingStartRef.current.x, x),
+            y: Math.min(drawingStartRef.current.y, y),
+            width: Math.abs(x - drawingStartRef.current.x),
+            height: Math.abs(y - drawingStartRef.current.y),
+            rotation: 0,
+            strokeColor: color,
+            fillColor,
+            strokeWidth: lineWidth,
+            locked_by: null,
+            locked_by_name: null
+          };
+        } else if (tool === "circle") {
+          const radius = Math.hypot(
+            x - drawingStartRef.current.x,
+            y - drawingStartRef.current.y
+          );
+          tempObjectRef.current = {
+            id: `temp_${Date.now()}`,
+            type: "circle",
+            x: drawingStartRef.current.x - radius,
+            y: drawingStartRef.current.y - radius,
+            width: radius * 2,
+            height: radius * 2,
+            rotation: 0,
+            strokeColor: color,
+            fillColor,
+            strokeWidth: lineWidth,
+            locked_by: null,
+            locked_by_name: null
+          };
+        } else if (tool === "pencil" && tempObjectRef.current) {
+          tempObjectRef.current = {
+            ...tempObjectRef.current,
+            points: [...currentPointsRef.current]
+          };
+        }
+        redrawCanvas();
+      }
+    },
+    [
+      isDrawing,
+      tool,
+      color,
+      fillColor,
+      lineWidth,
+      canvasRef,
+      selectedObjectId,
+      interactionMode,
+      activeResizeHandle,
+      objects,
+      getCanvasCoordinates,
+      findObjectAtPoint,
+      findHandleAtPoint,
+      redrawCanvas,
+      webSocketService
+    ]
+  );
+  const handleMouseUp = react.useCallback(
+    (e) => {
+      if (!isDrawing)
+        return;
+      if (interactionMode === "draw" && drawingStartRef.current) {
+        const { x, y } = getCanvasCoordinates(e.clientX, e.clientY);
+        const startX = drawingStartRef.current.x;
+        const startY = drawingStartRef.current.y;
+        const newId = generateObjectId();
+        let newObject = null;
+        switch (tool) {
+          case "line":
+            newObject = clampObjectToCanvas({
+              id: newId,
+              type: "line",
+              x: startX,
+              y: startY,
+              width: Math.abs(x - startX),
+              height: Math.abs(y - startY),
+              rotation: 0,
+              strokeColor: color,
+              strokeWidth: lineWidth,
+              x2: x,
+              y2: y,
+              locked_by: null,
+              locked_by_name: null
+            });
+            break;
+          case "rectangle":
+            newObject = clampObjectToCanvas({
+              id: newId,
+              type: "rectangle",
+              x: Math.min(startX, x),
+              y: Math.min(startY, y),
+              width: Math.abs(x - startX),
+              height: Math.abs(y - startY),
+              rotation: 0,
+              strokeColor: color,
+              fillColor,
+              strokeWidth: lineWidth,
+              locked_by: null,
+              locked_by_name: null
+            });
+            break;
+          case "circle":
+            const radius = Math.hypot(x - startX, y - startY);
+            newObject = clampObjectToCanvas({
+              id: newId,
+              type: "circle",
+              x: startX - radius,
+              y: startY - radius,
+              width: radius * 2,
+              height: radius * 2,
+              rotation: 0,
+              strokeColor: color,
+              fillColor,
+              strokeWidth: lineWidth,
+              locked_by: null,
+              locked_by_name: null
+            });
+            break;
+          case "pencil":
+            if (currentPointsRef.current.length > 0) {
+              const points = [...currentPointsRef.current];
+              const minX = Math.min(...points.map((p) => p.x));
+              const minY = Math.min(...points.map((p) => p.y));
+              const maxX = Math.max(...points.map((p) => p.x));
+              const maxY = Math.max(...points.map((p) => p.y));
+              newObject = clampObjectToCanvas({
+                id: newId,
+                type: "pencil",
+                x: minX,
+                y: minY,
+                width: Math.max(maxX - minX, 1),
+                height: Math.max(maxY - minY, 1),
+                rotation: 0,
+                points,
+                strokeColor: color,
+                strokeWidth: lineWidth,
+                locked_by: null,
+                locked_by_name: null
+              });
+            }
+            break;
+          case "text":
+            newObject = clampObjectToCanvas({
+              id: newId,
+              type: "text",
+              x: startX,
+              y: startY,
+              width: 200,
+              height: 50,
+              rotation: 0,
+              content: "Double click to edit",
+              fontSize,
+              color,
+              locked_by: null,
+              locked_by_name: null
+            });
+            break;
+        }
+        if (newObject) {
+          setObjects((prev) => [...prev, newObject]);
+          webSocketService.createObject(newObject);
+        }
+      }
+      setIsDrawing(false);
+      setInteractionMode("none");
+      setActiveResizeHandle(null);
+      drawingStartRef.current = null;
+      currentPointsRef.current = [];
+      tempObjectRef.current = null;
+      originalObjectStateRef.current = null;
+      rotationStartRef.current = 0;
+    },
+    [
+      isDrawing,
+      interactionMode,
+      tool,
+      color,
+      fillColor,
+      lineWidth,
+      fontSize,
+      getCanvasCoordinates,
+      webSocketService
+    ]
+  );
+  const handleDoubleClick = react.useCallback(
+    (e) => {
+      if (tool !== "select")
+        return;
+      const { x, y } = getCanvasCoordinates(e.clientX, e.clientY);
+      const object = findObjectAtPoint(x, y);
+      if (object?.type === "text" && canEditObject(object, userId)) {
+        setEditingTextId(object.id);
+        webSocketService.lockObject(object.id);
+      }
+    },
+    [tool, userId, getCanvasCoordinates, findObjectAtPoint, webSocketService]
+  );
+  react.useEffect(() => {
+    if (!enableKeyboardShortcuts)
+      return;
+    const handleKeyDown = (e) => {
+      if (editingTextId) {
+        if (e.key === "Escape") {
+          setEditingTextId(null);
+          webSocketService.unlockObject(editingTextId);
+        }
+        return;
+      }
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        if (selectedObjectId) {
+          webSocketService.deleteObject(selectedObjectId);
+        }
+      }
+      if (e.key === "Escape" && selectedObjectId) {
+        webSocketService.unlockObject(selectedObjectId);
+        setSelectedObjectId(null);
+        setInteractionMode("none");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    enableKeyboardShortcuts,
+    editingTextId,
+    selectedObjectId,
+    webSocketService
+  ]);
+  react.useEffect(() => {
+    if (!enableGlobalListeners)
+      return;
+    const handleBeforeUnload = () => {
+      if (selectedObjectId) {
+        webSocketService.unlockObject(selectedObjectId);
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [enableGlobalListeners, selectedObjectId, webSocketService]);
+  const deleteSelectedObject = react.useCallback(() => {
+    if (selectedObjectId) {
+      webSocketService.deleteObject(selectedObjectId);
+    }
+  }, [selectedObjectId, webSocketService]);
+  const addImage = react.useCallback(
+    (imageUrl) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        let width = img.width;
+        let height = img.height;
+        if (width > maxImageSize || height > maxImageSize) {
+          if (width > height) {
+            width = maxImageSize;
+            height = maxImageSize / img.width * img.height;
+          } else {
+            height = maxImageSize;
+            width = maxImageSize / img.height * img.width;
+          }
+        }
+        const newObject = clampObjectToCanvas({
+          id: generateObjectId(),
+          type: "image",
+          x: CANVAS_WIDTH / 2 - width / 2,
+          y: CANVAS_HEIGHT / 2 - height / 2,
+          width,
+          height,
+          rotation: 0,
+          imageUrl,
+          aspectRatio: img.width / img.height,
+          locked_by: null,
+          locked_by_name: null
+        });
+        imageCacheRef.current.set(imageUrl, img);
+        setObjects((prev) => [...prev, newObject]);
+        webSocketService.createObject(newObject);
+      };
+      img.src = imageUrl;
+    },
+    [maxImageSize, webSocketService]
+  );
+  const updateObjectContent = react.useCallback(
+    (objectId, content) => {
+      setObjects(
+        (prev) => prev.map((obj) => {
+          if (obj.id === objectId) {
+            const updated = { ...obj, content };
+            webSocketService.updateObject(updated);
+            return updated;
+          }
+          return obj;
+        })
+      );
+    },
+    [webSocketService]
+  );
+  const clearCanvas = react.useCallback(() => {
+    objects.forEach((obj) => {
+      webSocketService.deleteObject(obj.id);
+    });
+    setObjects([]);
+    setSelectedObjectId(null);
+  }, [objects, webSocketService]);
+  const exportAsJSON = react.useCallback(() => {
+    return JSON.stringify(objects, null, 2);
+  }, [objects]);
+  const importFromJSON = react.useCallback(
+    (json) => {
+      try {
+        const imported = JSON.parse(json);
+        imported.forEach((obj) => {
+          webSocketService.createObject(obj);
+        });
+        setObjects((prev) => [...prev, ...imported]);
+      } catch (error) {
+        console.error("Failed to import objects:", error);
+      }
+    },
+    [webSocketService]
+  );
+  return {
+    // State
+    tool,
+    color,
+    fillColor,
+    lineWidth,
+    fontSize,
+    isDrawing,
+    selectedObjectId,
+    interactionMode,
+    objects,
+    usersOnline,
+    isConnected,
+    editingTextId,
+    // Setters
+    setTool,
+    setColor,
+    setFillColor,
+    setLineWidth,
+    setFontSize,
+    setSelectedObjectId,
+    setEditingTextId,
+    // Handlers
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleDoubleClick,
+    // Methods
+    deleteSelectedObject,
+    addImage,
+    updateObjectContent,
+    clearCanvas,
+    exportAsJSON,
+    importFromJSON,
+    // Utils
+    redrawCanvas
+  };
+};
+if (typeof CanvasRenderingContext2D !== "undefined") {
+  CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+    if (w < 2 * r)
+      r = w / 2;
+    if (h < 2 * r)
+      r = h / 2;
+    this.moveTo(x + r, y);
+    this.lineTo(x + w - r, y);
+    this.quadraticCurveTo(x + w, y, x + w, y + r);
+    this.lineTo(x + w, y + h - r);
+    this.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    this.lineTo(x + r, y + h);
+    this.quadraticCurveTo(x, y + h, x, y + h - r);
+    this.lineTo(x, y + r);
+    this.quadraticCurveTo(x, y, x + r, y);
+    return this;
+  };
+}
+
+// src/types/websocket.ts
+var BaseWebSocketAdapter = class {
+  constructor() {
+    this.handlers = {};
+    this.connected = false;
+  }
+  isConnected() {
+    return this.connected;
+  }
+  setEventHandlers(handlers) {
+    this.handlers = handlers;
+  }
+  handleError(error, context) {
+    console.error("[BoardWebSocket]", error, context);
+    this.handlers.onError?.(error, context);
+  }
+};
+
+// src/adapters/native-websocket-adapter.ts
+var NativeWebSocketAdapter = class extends BaseWebSocketAdapter {
+  constructor(url) {
+    super();
+    this.ws = null;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.reconnectTimeout = 1e3;
+    this.url = url;
+  }
+  connect(boardId, userId, userName) {
+    try {
+      const wsUrl = new URL(this.url);
+      wsUrl.searchParams.append("boardId", String(boardId));
+      wsUrl.searchParams.append("userId", String(userId));
+      wsUrl.searchParams.append("userName", userName);
+      this.ws = new WebSocket(wsUrl.toString());
+      this.ws.onopen = () => {
+        this.connected = true;
+        this.reconnectAttempts = 0;
+        this.handlers.onConnectionChange?.(true);
+      };
+      this.ws.onclose = () => {
+        this.connected = false;
+        this.handlers.onConnectionChange?.(false);
+        this.attemptReconnect(boardId, userId, userName);
+      };
+      this.ws.onerror = () => {
+        this.handleError(new Error("WebSocket error"));
+      };
+      this.ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          this.handleMessage(message);
+        } catch (error) {
+          this.handleError(error);
+        }
+      };
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+  attemptReconnect(boardId, userId, userName) {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      this.handleError(new Error("Max reconnection attempts reached"));
+      return;
+    }
+    this.reconnectAttempts++;
+    setTimeout(() => {
+      this.connect(boardId, userId, userName);
+    }, this.reconnectTimeout * this.reconnectAttempts);
+  }
+  handleMessage(message) {
+    switch (message.type) {
+      case "OBJECT_LOCKED":
+        this.handlers.onObjectLocked?.(
+          message.payload.objectId,
+          message.payload.userId,
+          message.payload.userName
+        );
+        break;
+      case "OBJECT_UNLOCKED":
+        this.handlers.onObjectUnlocked?.(message.payload.objectId);
+        break;
+      case "OBJECT_CREATED":
+        this.handlers.onObjectCreated?.(message.payload);
+        break;
+      case "OBJECT_UPDATED":
+        this.handlers.onObjectUpdated?.(message.payload);
+        break;
+      case "OBJECT_DELETED":
+        this.handlers.onObjectDeleted?.(message.payload.objectId);
+        break;
+      case "USER_JOINED":
+        this.handlers.onUserJoined?.(
+          message.payload.userId,
+          message.payload.userName
+        );
+        break;
+      case "USER_LEFT":
+        this.handlers.onUserLeft?.(
+          message.payload.userId,
+          message.payload.userName
+        );
+        break;
+    }
+  }
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+      this.connected = false;
+    }
+  }
+  send(message) {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    }
+  }
+  createObject(object) {
+    this.send({ type: "OBJECT_CREATE", payload: object });
+  }
+  updateObject(object) {
+    this.send({ type: "OBJECT_UPDATE", payload: object });
+  }
+  deleteObject(objectId) {
+    this.send({ type: "OBJECT_DELETE", payload: { objectId } });
+  }
+  lockObject(objectId) {
+    this.send({ type: "OBJECT_LOCK", payload: { objectId } });
+  }
+  unlockObject(objectId) {
+    this.send({ type: "OBJECT_UNLOCK", payload: { objectId } });
+  }
+};
+var SocketIOBoardAdapter = class extends BaseWebSocketAdapter {
+  constructor(config) {
+    super();
+    this.socket = null;
+    this.config = {
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1e3,
+      transports: ["websocket"],
+      ...config
+    };
+  }
+  connect(boardId, userId, userName) {
+    try {
+      this.socket = socket_ioClient.io(this.config.url, {
+        ...this.config,
+        query: { boardId, userId, userName }
+      });
+      this.socket.on("connect", () => {
+        this.connected = true;
+        this.handlers.onConnectionChange?.(true);
+      });
+      this.socket.on("disconnect", () => {
+        this.connected = false;
+        this.handlers.onConnectionChange?.(false);
+      });
+      this.socket.on("error", (error) => {
+        this.handleError(new Error(error.message || "Socket.IO error"));
+      });
+      this.socket.on("object:locked", (data) => {
+        this.handlers.onObjectLocked?.(
+          data.objectId,
+          data.userId,
+          data.userName
+        );
+      });
+      this.socket.on("object:unlocked", (objectId) => {
+        this.handlers.onObjectUnlocked?.(objectId);
+      });
+      this.socket.on("object:created", (object) => {
+        this.handlers.onObjectCreated?.(object);
+      });
+      this.socket.on("object:updated", (object) => {
+        this.handlers.onObjectUpdated?.(object);
+      });
+      this.socket.on("object:deleted", (objectId) => {
+        this.handlers.onObjectDeleted?.(objectId);
+      });
+      this.socket.on("user:joined", ({ userId: userId2, userName: userName2 }) => {
+        this.handlers.onUserJoined?.(userId2, userName2);
+      });
+      this.socket.on("user:left", ({ userId: userId2, userName: userName2 }) => {
+        this.handlers.onUserLeft?.(userId2, userName2);
+      });
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+      this.connected = false;
+    }
+  }
+  createObject(object) {
+    this.socket?.emit("object:create", object);
+  }
+  updateObject(object) {
+    this.socket?.emit("object:update", object);
+  }
+  deleteObject(objectId) {
+    this.socket?.emit("object:delete", objectId);
+  }
+  lockObject(objectId) {
+    this.socket?.emit("object:lock", objectId);
+  }
+  unlockObject(objectId) {
+    this.socket?.emit("object:unlock", objectId);
+  }
+};
+
+// src/index.ts
+var VERSION = "1.0.0";
+
+exports.BaseWebSocketAdapter = BaseWebSocketAdapter;
+exports.CANVAS_HEIGHT = CANVAS_HEIGHT;
+exports.CANVAS_WIDTH = CANVAS_WIDTH;
+exports.NativeWebSocketAdapter = NativeWebSocketAdapter;
+exports.SocketIOBoardAdapter = SocketIOBoardAdapter;
+exports.VERSION = VERSION;
+exports.canEditObject = canEditObject;
+exports.clampObjectToCanvas = clampObjectToCanvas;
+exports.distanceToLine = distanceToLine;
+exports.generateObjectId = generateObjectId;
+exports.getObjectBoundingBox = getObjectBoundingBox;
+exports.isPointInObject = isPointInObject;
+exports.isPointInRotatedRectangle = isPointInRotatedRectangle;
+exports.resizeImageWithAspectRatio = resizeImageWithAspectRatio;
+exports.resizeLineObject = resizeLineObject;
+exports.resizeObjectFree = resizeObjectFree;
+exports.rotatePoint = rotatePoint;
+exports.useBoardDrawing = useBoardDrawing;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map