Merge pull request #24 from mezh-hq/fix/text-rotate-platform-issues

Fix: text rotation issue on ios devices

Author: Akalanka47000

bun.lockb

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
+import { useRotationAttributes } from "@/hooks/rotation";
 import { ISTKProps, IText } from "@/types";
 
 export const textFontSize = 35;
@@ -36,6 +37,7 @@ const Text: React.FC<ITextProps> = forwardRef(
     },
     ref: any
   ) => {
+    const rotationAttrs = useRotationAttributes(ref, rotation);
     return (
       <text
         ref={ref}
@@ -52,9 +54,9 @@ const Text: React.FC<ITextProps> = forwardRef(
           consumer.styles?.elements?.text?.base?.className,
           consumer.mode === "user" && "!pointer-events-none"
         )}
+        {...rotationAttrs.svg}
         style={{
-          transform: `rotate(${rotation ?? 0}deg)`,
-          transformOrigin: "center",
+          ...rotationAttrs.css,
           ...consumer.styles?.elements?.text?.base?.properties,
           stroke: color,
           color

src/components/workspace/elements/text.tsx

@@ -0,0 +1,2 @@
+export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+export const isMobileSafari = /iP(ad|hone|od).+Version\/[\d.]+.*Safari/i.test(navigator.userAgent);

src/constants/user-agent.ts

@@ -0,0 +1,29 @@
+import { useLayoutEffect, useState } from "react";
+import { isMobileSafari, isSafari } from "@/constants/user-agent";
+
+/** Constructs dynamic svg rotation attributes to overcome partial CSS support in Safari */
+export const useRotationAttributes = (ref: React.RefObject<SVGGraphicsElement>, rotation?: number) => {
+  const [center, setCenter] = useState({ x: 0, y: 0 });
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const bbox = ref.current.getBBox();
+      setCenter({
+        x: bbox.x + (isMobileSafari ? bbox.width / 2 : 0),
+        y: bbox.y + bbox.height / 2
+      });
+    }
+  }, [ref]);
+
+  return {
+    svg: {
+      transform: isSafari ? `rotate(${rotation ?? 0}, ${center.x}, ${center.y})` : undefined
+    },
+    css: {
+      transform: isSafari ? undefined : `rotate(${rotation ?? 0}deg)`,
+      transformOrigin: "center"
+    }
+  };
+};
+
+export default useRotationAttributes;