ankle gredient

src/pages/editor/components/SettingsPanel.tsx

@@ -7,6 +7,7 @@ import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
 import ColorsImage from '@/assets/images/colors.png'
 import ColorPicker from '@/components/ColorPicker'
 import Select from '@/components/Select'
+import { toCssLinearGradient } from '../utils/gradient'
 
 const PRESET_COLORS = [
   '#a8edcf',
@@ -322,7 +323,7 @@ const SettingsPanel = () => {
             <div
               className="h-12 rounded-xl border border-border"
               style={{
-                backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.from} 0%, ${backgroundGradient.to} 100%)`,
+                backgroundImage: toCssLinearGradient(backgroundGradient),
               }}
             />
           </div>

src/pages/editor/utils/gradient.ts

@@ -25,23 +25,24 @@ const getGradientPoints = (
 ): { start: Point; end: Point } => {
   const safeWidth = Math.max(1, width);
   const safeHeight = Math.max(1, height);
+  // App/UI angle: 0° = top→bottom, 90° = left→right (clockwise).
   const rad = toRadians(normalizeAngle(angle));
-  const dx = Math.cos(rad);
-  const dy = Math.sin(rad);
   const half = Math.sqrt(safeWidth * safeWidth + safeHeight * safeHeight) / 2;
+  const halfX = Math.sin(rad) * half;
+  const halfY = Math.cos(rad) * half;
 
   if (mode === "centered") {
     return {
-      start: { x: -dx * half, y: -dy * half },
-      end: { x: dx * half, y: dy * half },
+      start: { x: -halfX, y: -halfY },
+      end: { x: halfX, y: halfY },
     };
   }
 
   const cx = safeWidth / 2;
   const cy = safeHeight / 2;
   return {
-    start: { x: cx - dx * half, y: cy - dy * half },
-    end: { x: cx + dx * half, y: cy + dy * half },
+    start: { x: cx - halfX, y: cy - halfY },
+    end: { x: cx + halfX, y: cy + halfY },
   };
 };
 
@@ -91,7 +92,11 @@ export const getSvgGradientEndpoints = (
   };
 };
 
+/** Convert app/UI angle to CSS linear-gradient degrees (0deg = upward in CSS). */
+export const toCssGradientAngle = (angle: number) =>
+  normalizeAngle(180 - normalizeAngle(angle));
+
 export const toCssLinearGradient = (gradient: LinearGradient | undefined) => {
   if (!gradient) return undefined;
-  return `linear-gradient(${normalizeAngle(gradient.angle)}deg, ${gradient.from} 0%, ${gradient.to} 100%)`;
+  return `linear-gradient(${toCssGradientAngle(gradient.angle)}deg, ${gradient.from} 0%, ${gradient.to} 100%)`;
 };

src/pages/viewer/components/BookPage.tsx

@@ -549,6 +549,16 @@ const BookPage = memo(forwardRef<HTMLDivElement, BookPageProps>(
             const fillColor = obj.fill || '#000000';
             const strokeColor = obj.stroke || 'transparent';
             const gradientId = `triangle-grad-${obj.id}-${index}${idSuffix}`;
+            const triangleGradientEndpoints =
+              obj.fillType === 'gradient' && obj.gradient
+                ? getSvgGradientEndpoints(
+                    obj.gradient,
+                    baseWidth * scale,
+                    baseHeight * scale,
+                    'centered',
+                    { x: halfSize, y: halfSize },
+                  )
+                : null;
 
             return (
               <svg
@@ -573,25 +583,24 @@ const BookPage = memo(forwardRef<HTMLDivElement, BookPageProps>(
                 )}
                 viewBox={`0 0 ${size} ${size}`}
               >
-                {obj.fillType === 'gradient' && obj.gradient ? (
+                {triangleGradientEndpoints ? (
                   <defs>
                     <linearGradient
                       id={gradientId}
                       gradientUnits="userSpaceOnUse"
-                      x1="0"
-                      y1="0"
-                      x2={size}
-                      y2={size}
-                      gradientTransform={`rotate(${obj.gradient.angle}, ${size / 2}, ${size / 2})`}
+                      x1={triangleGradientEndpoints.x1}
+                      y1={triangleGradientEndpoints.y1}
+                      x2={triangleGradientEndpoints.x2}
+                      y2={triangleGradientEndpoints.y2}
                     >
-                      <stop offset="0%" stopColor={obj.gradient.from} />
-                      <stop offset="100%" stopColor={obj.gradient.to} />
+                      <stop offset="0%" stopColor={obj.gradient!.from} />
+                      <stop offset="100%" stopColor={obj.gradient!.to} />
                     </linearGradient>
                   </defs>
                 ) : null}
                 <polygon
                   points={`${topX},${topY} ${bottomLeftX},${bottomY} ${bottomRightX},${bottomY}`}
-                  fill={obj.fillType === 'gradient' && obj.gradient ? `url(#${gradientId})` : fillColor}
+                  fill={triangleGradientEndpoints ? `url(#${gradientId})` : fillColor}
                   stroke={strokeColor}
                   strokeWidth={strokeWidth}
                 />