danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

grediant in a shape

Browse Source
This commit is contained in:
hamid zarghami
2026-05-09 09:50:13 +03:30
parent 0229a1355d
commit b513ecb33f
16 changed files with 378 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/EditorCanvas.tsx
+11 -1
View File
@@ -17,6 +17,7 @@ import CellEditor from "@/components/CellEditor";
import ZoomControls from "./ZoomControls";
import EditorCanvasToolbar from "./EditorCanvasToolbar";
import { createScopedId } from "../store/editorStore.helpers";
import { getKonvaGradientProps } from "../utils/gradient";
type EditorCanvasProps = {
catalogSize?: string;
@@ -46,9 +47,10 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
const currentPage = pages.find((page) => page.id === currentPageId);
const bgColor =
currentPage?.backgroundType === 'color'
currentPage?.backgroundType === 'color' || currentPage?.backgroundType === 'gradient'
? currentPage.backgroundColor
: '#ffffff';
const bgGradient = currentPage?.backgroundGradient;
const [bgImage] = useImage(
currentPage?.backgroundType === 'image'
@@ -331,6 +333,13 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
const scaledW = stageSize.width * finalScale;
const scaledH = stageSize.height * finalScale;
const backgroundGradientProps = getKonvaGradientProps(
currentPage?.backgroundType === "gradient" ? "gradient" : "solid",
bgGradient,
stageSize.width,
stageSize.height,
"rect",
);
return (
<div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-auto pb-8 xl:pl-6">
@@ -394,6 +403,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
width={stageSize.width}
height={stageSize.height}
fill={bgColor}
{...backgroundGradientProps}
listening={false}
/>
{currentPage?.backgroundType === 'image' && bgImage && (
src/pages/editor/components/SettingsPanel.tsx
+88 -1
View File
@@ -5,6 +5,7 @@ import type { DisplayStyle, BackgroundType } from '../store/editorStore'
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
import ColorsImage from '@/assets/images/colors.png'
import ColorPicker from '@/components/ColorPicker'
const PRESET_COLORS = [
'#a8edcf',
@@ -23,6 +24,7 @@ const DISPLAY_STYLE_OPTIONS: { value: DisplayStyle; label: string }[] = [
const BACKGROUND_TYPE_OPTIONS: { value: BackgroundType; label: string }[] = [
{ value: 'color', label: 'رنگ' },
{ value: 'gradient', label: 'گرادیانت' },
{ value: 'image', label: 'تصویر' },
]
@@ -39,6 +41,11 @@ const SettingsPanel = () => {
const currentPage = pages.find((page) => page.id === currentPageId)
const backgroundType = currentPage?.backgroundType ?? 'color'
const backgroundColor = currentPage?.backgroundColor ?? '#ffffff'
const backgroundGradient = currentPage?.backgroundGradient ?? {
from: '#ffffff',
to: '#e2e8f0',
angle: 135,
}
const backgroundImageUrl = currentPage?.backgroundImageUrl ?? ''
const [uploadedPreviews, setUploadedPreviews] = useState<string[]>(
backgroundImageUrl ? [backgroundImageUrl] : []
@@ -145,7 +152,20 @@ const SettingsPanel = () => {
<label key={opt.value} className="flex items-center gap-1.5 cursor-pointer select-none">
<span className="text-xs text-gray-600">{opt.label}</span>
<div
onClick={() => updateCurrentPageBackground({ backgroundType: opt.value })}
onClick={() =>
updateCurrentPageBackground({
backgroundType: opt.value,
...(opt.value === 'gradient'
? {
backgroundGradient: currentPage?.backgroundGradient ?? {
from: '#ffffff',
to: '#e2e8f0',
angle: 135,
},
}
: {}),
})
}
className={clx(
'w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors cursor-pointer',
backgroundType === opt.value
@@ -209,6 +229,73 @@ const SettingsPanel = () => {
</div>
)}
{backgroundType === 'gradient' && (
<div className="space-y-3">
<p className="text-xs text-gray-500">گرادیانت خطی (سبک Figma)</p>
<ColorPicker
label="رنگ شروع"
value={backgroundGradient.from}
onChange={(value) =>
updateCurrentPageBackground({
backgroundGradient: { ...backgroundGradient, from: value },
})
}
/>
<ColorPicker
label="رنگ پایان"
value={backgroundGradient.to}
onChange={(value) =>
updateCurrentPageBackground({
backgroundGradient: { ...backgroundGradient, to: value },
})
}
/>
<div className="space-y-1">
<label className="text-xs text-gray-500">زاویه</label>
<div className="flex items-center gap-2">
<input
type="range"
min={0}
max={360}
value={backgroundGradient.angle}
onChange={(e) =>
updateCurrentPageBackground({
backgroundGradient: {
...backgroundGradient,
angle: Number(e.target.value),
},
})
}
className="w-full"
/>
<input
type="number"
min={0}
max={360}
value={backgroundGradient.angle}
onChange={(e) =>
updateCurrentPageBackground({
backgroundGradient: {
...backgroundGradient,
angle: Number(e.target.value) || 0,
},
})
}
className="w-16 h-9 rounded-lg border border-border px-2 text-xs"
/>
</div>
</div>
<div
className="h-12 rounded-xl border border-border"
style={{
backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.from} 0%, ${backgroundGradient.to} 100%)`,
}}
/>
</div>
)}
{/* ─── آپلود تصویر ─── */}
{backgroundType === 'image' && (
<div>
src/pages/editor/components/canvas/ObjectRenderer.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ const ObjectRenderer = ({
if (rafId1) cancelAnimationFrame(rafId1);
groupNode?.clearCache();
};
}, [shouldApplyMask, isSelected, maskShape?.x, maskShape?.y, maskShape?.width, maskShape?.height, maskShape?.rotation, obj.x, obj.y, obj.width, obj.height, obj.rotation, obj.maskInvert, obj.strokeWidth, obj.stroke, obj.fill]);
}, [shouldApplyMask, isSelected, maskShape?.x, maskShape?.y, maskShape?.width, maskShape?.height, maskShape?.rotation, obj.x, obj.y, obj.width, obj.height, obj.rotation, obj.maskInvert, obj.strokeWidth, obj.stroke, obj.fill, obj.fillType, obj.gradient]);
// Refresh cache after transformer is attached (when isSelected changes)
useEffect(() => {
src/pages/editor/components/sidebar/settings/ShapeSettings.tsx
+78
View File
@@ -11,6 +11,12 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
const baseWidth = selectedObject.width ?? 100;
const baseHeight = selectedObject.height ?? 100;
const baseFill = selectedObject.fill ?? "#3b82f6";
const fillType = selectedObject.fillType ?? "solid";
const gradient = selectedObject.gradient ?? {
from: "#3b82f6",
to: "#1d4ed8",
angle: 135,
};
const baseStroke = selectedObject.stroke ?? "#1e40af";
const baseStrokeWidth = selectedObject.strokeWidth ?? 0;
const baseBorderRadius = selectedObject.borderRadius ?? 0;
@@ -42,12 +48,84 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
<ColorPicker
label="رنگ پس‌زمینه"
value={baseFill}
readOnly={fillType === "gradient"}
onChange={(value) =>
onUpdate(selectedObject.id, {
fill: value,
})
}
/>
<div className="space-y-2">
<label className="text-sm">نوع Fill</label>
<div className="flex gap-2">
<button
type="button"
onClick={() =>
onUpdate(selectedObject.id, {
fillType: "solid",
})
}
className={`px-3 py-1.5 rounded-lg border text-xs ${fillType === "solid" ? "border-gray-800 text-gray-900" : "border-border text-gray-500"
}`}
>
رنگ ساده
</button>
<button
type="button"
onClick={() =>
onUpdate(selectedObject.id, {
fillType: "gradient",
gradient: selectedObject.gradient ?? {
from: "#3b82f6",
to: "#1d4ed8",
angle: 135,
},
})
}
className={`px-3 py-1.5 rounded-lg border text-xs ${fillType === "gradient" ? "border-gray-800 text-gray-900" : "border-border text-gray-500"
}`}
>
گرادیانت
</button>
</div>
</div>
{fillType === "gradient" && (
<div className="space-y-3 border border-border rounded-xl p-3">
<ColorPicker
label="رنگ شروع"
value={gradient.from}
onChange={(value) =>
onUpdate(selectedObject.id, {
gradient: { ...gradient, from: value },
})
}
/>
<ColorPicker
label="رنگ پایان"
value={gradient.to}
onChange={(value) =>
onUpdate(selectedObject.id, {
gradient: { ...gradient, to: value },
})
}
/>
<Input
label="زاویه گرادیانت"
type="number"
value={gradient.angle}
onChange={(e) =>
onUpdate(selectedObject.id, {
gradient: {
...gradient,
angle: Number(e.target.value) || 0,
},
})
}
min={0}
max={360}
/>
</div>
)}
<ColorPicker
label="رنگ خط"
value={baseStroke}
src/pages/editor/components/tools/AbstractShape.tsx
+11
View File
@@ -2,6 +2,7 @@ import { useRef } from "react";
import { Star } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";
import { getKonvaGradientProps } from "../../utils/gradient";
const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
const shapeRef = useRef<Konva.Star>(null);
@@ -30,6 +31,15 @@ const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
const displayStrokeWidth = isSelected
? (hasStroke ? actualStrokeWidth : 3)
: (isMask && showGuide ? 2 : actualStrokeWidth);
const gradientProps = isMask
? {}
: getKonvaGradientProps(
obj.fillType,
obj.gradient,
obj.width || 100,
obj.height || 100,
"centered",
);
return (
<Star
@@ -42,6 +52,7 @@ const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
innerRadius={innerRadius}
outerRadius={radius}
fill={isMask ? "transparent" : obj.fill}
{...gradientProps}
stroke={displayStroke}
strokeWidth={displayStrokeWidth}
dash={isMask && showGuide ? [10, 5] : undefined}
src/pages/editor/components/tools/CircleShape.tsx
+6
View File
@@ -2,6 +2,7 @@ import { useRef } from "react";
import { Circle } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";
import { getKonvaGradientProps } from "../../utils/gradient";
const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
const shapeRef = useRef<Konva.Circle>(null);
@@ -26,6 +27,10 @@ const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePr
const displayStrokeWidth = isSelected
? (hasStroke ? actualStrokeWidth : 3)
: (isMask && showGuide ? 2 : actualStrokeWidth);
const diameter = obj.width || 100;
const gradientProps = isMask
? {}
: getKonvaGradientProps(obj.fillType, obj.gradient, diameter, diameter, "centered");
return (
<Circle
@@ -36,6 +41,7 @@ const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePr
y={obj.y}
radius={(obj.width || 50) / 2}
fill={isMask ? "transparent" : obj.fill}
{...gradientProps}
stroke={displayStroke}
strokeWidth={displayStrokeWidth}
dash={isMask && showGuide ? [10, 5] : undefined}
src/pages/editor/components/tools/RectangleShape.tsx
+11
View File
@@ -2,6 +2,7 @@ import { useRef } from "react";
import { Rect } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";
import { getKonvaGradientProps } from "../../utils/gradient";
const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
const shapeRef = useRef<Konva.Rect>(null);
@@ -27,6 +28,15 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
const displayStrokeWidth = isSelected
? (hasStroke ? actualStrokeWidth : 3)
: (isMask && showGuide ? 2 : actualStrokeWidth);
const gradientProps = isMask
? {}
: getKonvaGradientProps(
obj.fillType,
obj.gradient,
obj.width || 100,
obj.height || 100,
"rect",
);
return (
<Rect
@@ -39,6 +49,7 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
height={obj.height || 100}
cornerRadius={cornerRadius}
fill={isMask ? "transparent" : obj.fill}
{...gradientProps}
stroke={displayStroke}
strokeWidth={displayStrokeWidth}
dash={isMask && showGuide ? [10, 5] : undefined}
src/pages/editor/components/tools/TriangleShape.tsx
+11
View File
@@ -2,6 +2,7 @@ import { useRef } from "react";
import { RegularPolygon } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";
import { getKonvaGradientProps } from "../../utils/gradient";
const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
const shapeRef = useRef<Konva.RegularPolygon>(null);
@@ -27,6 +28,15 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
const displayStrokeWidth = isSelected
? (hasStroke ? actualStrokeWidth : 3)
: (isMask && showGuide ? 2 : actualStrokeWidth);
const gradientProps = isMask
? {}
: getKonvaGradientProps(
obj.fillType,
obj.gradient,
obj.width || 100,
obj.height || 100,
"centered",
);
return (
<RegularPolygon
@@ -38,6 +48,7 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
sides={3}
radius={radius}
fill={isMask ? "transparent" : obj.fill}
{...gradientProps}
stroke={displayStroke}
strokeWidth={displayStrokeWidth}
dash={isMask && showGuide ? [10, 5] : undefined}
src/pages/editor/store/editorStore.helpers.ts
+7 -2
View File
@@ -55,6 +55,11 @@ export const createInitialPage = (name: string): Page => ({
guides: [],
backgroundType: "color",
backgroundColor: "#ffffff",
backgroundGradient: {
from: "#ffffff",
to: "#e2e8f0",
angle: 135,
},
backgroundImageUrl: "",
});
@@ -118,8 +123,8 @@ export const getObjectBounds = (obj: EditorObject) => {
return { minX, minY, maxX, maxY };
}
let w = obj.width || 0;
let h = obj.height || 0;
const w = obj.width || 0;
const h = obj.height || 0;
if (obj.type === "rectangle" && obj.shapeType === "circle") {
const radius = w / 2;
src/pages/editor/store/editorStore.ts
+13 -1
View File
@@ -46,7 +46,7 @@ export type {
type PageBackgroundSettings = Pick<
Page,
"backgroundType" | "backgroundColor" | "backgroundImageUrl"
"backgroundType" | "backgroundColor" | "backgroundGradient" | "backgroundImageUrl"
>;
type EditorStoreType = {
@@ -191,6 +191,11 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
leftToRightFlip: false,
backgroundType: 'color',
backgroundColor: '#ffffff',
backgroundGradient: {
from: "#ffffff",
to: "#e2e8f0",
angle: 135,
},
backgroundImageUrl: '',
},
updateDocumentSettings: (updates) =>
@@ -836,6 +841,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
guides: [...pageToDuplicate.guides],
backgroundType: pageToDuplicate.backgroundType,
backgroundColor: pageToDuplicate.backgroundColor,
backgroundGradient: pageToDuplicate.backgroundGradient,
backgroundImageUrl: pageToDuplicate.backgroundImageUrl,
};
@@ -1009,6 +1015,12 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
page.backgroundType ?? fallbackSettings.backgroundType ?? "color",
backgroundColor:
page.backgroundColor ?? fallbackSettings.backgroundColor ?? "#ffffff",
backgroundGradient: page.backgroundGradient ??
fallbackSettings.backgroundGradient ?? {
from: "#ffffff",
to: "#e2e8f0",
angle: 135,
},
backgroundImageUrl:
page.backgroundImageUrl ?? fallbackSettings.backgroundImageUrl ?? "",
}));
src/pages/editor/store/editorStore.types.ts
+6 -1
View File
@@ -1,4 +1,5 @@
import type { ShapeType } from "./shapeStore";
import type { FillType, LinearGradient } from "../utils/gradient";
export type ToolType =
| "select"
@@ -41,6 +42,8 @@ export type EditorObject = {
width?: number;
height?: number;
fill?: string;
fillType?: FillType;
gradient?: LinearGradient;
stroke?: string;
strokeWidth?: number;
text?: string;
@@ -82,11 +85,12 @@ export type Page = {
guides: PageGuide[];
backgroundType: BackgroundType;
backgroundColor: string;
backgroundGradient?: LinearGradient;
backgroundImageUrl: string;
};
export type DisplayStyle = 'single' | 'double';
export type BackgroundType = 'color' | 'image';
export type BackgroundType = 'color' | 'gradient' | 'image';
export type DocumentSettings = {
displayStyle: DisplayStyle;
@@ -95,5 +99,6 @@ export type DocumentSettings = {
leftToRightFlip: boolean;
backgroundType: BackgroundType;
backgroundColor: string;
backgroundGradient?: LinearGradient;
backgroundImageUrl: string;
};
src/pages/editor/utils/gradient.ts
+73
View File
@@ -0,0 +1,73 @@
export type FillType = "solid" | "gradient";
export type LinearGradient = {
from: string;
to: string;
angle: number;
};
type Point = { x: number; y: number };
type GradientPointMode = "rect" | "centered";
const toRadians = (angle: number) => (angle * Math.PI) / 180;
const normalizeAngle = (angle: number) => {
if (!Number.isFinite(angle)) return 0;
return ((angle % 360) + 360) % 360;
};
const getGradientPoints = (
width: number,
height: number,
angle: number,
mode: GradientPointMode,
): { start: Point; end: Point } => {
const safeWidth = Math.max(1, width);
const safeHeight = Math.max(1, height);
const rad = toRadians(normalizeAngle(angle));
const dx = Math.cos(rad);
const dy = Math.sin(rad);
const half = Math.sqrt(safeWidth * safeWidth + safeHeight * safeHeight) / 2;
if (mode === "centered") {
return {
start: { x: -dx * half, y: -dy * half },
end: { x: dx * half, y: dy * half },
};
}
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 },
};
};
export const getKonvaGradientProps = (
fillType: FillType | undefined,
gradient: LinearGradient | undefined,
width: number,
height: number,
mode: GradientPointMode,
) => {
if (fillType !== "gradient" || !gradient) return {};
const points = getGradientPoints(width, height, gradient.angle, mode);
return {
fillPriority: "linear-gradient" as const,
fillLinearGradientStartPoint: points.start,
fillLinearGradientEndPoint: points.end,
fillLinearGradientColorStops: [0, gradient.from, 1, gradient.to] as [
number,
string,
number,
string,
],
};
};
export const toCssLinearGradient = (gradient: LinearGradient | undefined) => {
if (!gradient) return undefined;
return `linear-gradient(${normalizeAngle(gradient.angle)}deg, ${gradient.from} 0%, ${gradient.to} 100%)`;
};