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

space border to top
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-13 09:54:00 +03:30
parent a1c182afde
commit 7f35f5b9dd
2 changed files with 71 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/sidebar/ObjectSettings.tsx
+70 -103
View File
@@ -1,135 +1,102 @@
import { Trash } from "iconsax-react"; import { Trash } from "iconsax-react";
import type { EditorObject } from "../../store/editorStore"; import type { EditorObject } from "../../store/editorStore";
import {
ShapeSettings,
TextSettings,
LineSettings,
SizeSettings,
LinkSettings,
VideoSettings,
AudioSettings,
AlignmentSettings,
TransformSettings,
GridSettings,
MaskSettings,
EntranceAnimationSettings,
} from "./settings";
import TextInstruction from "./instructions/TextInstruction"; import TextInstruction from "./instructions/TextInstruction";
import {
AlignmentSettings,
AudioSettings,
EntranceAnimationSettings,
GridSettings,
LineSettings,
LinkSettings,
MaskSettings,
ShapeSettings,
SizeSettings,
TextSettings,
TransformSettings,
VideoSettings,
} from "./settings";
type ObjectSettingsProps = { type ObjectSettingsProps = {
selectedObject: EditorObject; selectedObject: EditorObject;
pageWidth: number; pageWidth: number;
pageHeight: number; pageHeight: number;
onUpdate: (id: string, updates: Partial<EditorObject>) => void; onUpdate: (id: string, updates: Partial<EditorObject>) => void;
onDelete: (id: string) => void; onDelete: (id: string) => void;
}; };
const roundNumbersDeep = <T,>(value: T): T => { const roundNumbersDeep = <T,>(value: T): T => {
if (typeof value === "number") { if (typeof value === "number") {
return Math.round(value) as T; return Math.round(value) as T;
} }
if (Array.isArray(value)) { if (Array.isArray(value)) {
return value.map((item) => roundNumbersDeep(item)) as T; return value.map((item) => roundNumbersDeep(item)) as T;
} }
if (value && typeof value === "object") { if (value && typeof value === "object") {
const roundedObject = Object.entries(value).reduce<Record<string, unknown>>((acc, [key, nestedValue]) => { const roundedObject = Object.entries(value).reduce<Record<string, unknown>>((acc, [key, nestedValue]) => {
acc[key] = roundNumbersDeep(nestedValue); acc[key] = roundNumbersDeep(nestedValue);
return acc; return acc;
}, {}); }, {});
return roundedObject as T; return roundedObject as T;
} }
return value; return value;
}; };
const ObjectSettings = ({ const ObjectSettings = ({ selectedObject, pageWidth, pageHeight, onUpdate, onDelete }: ObjectSettingsProps) => {
selectedObject, const roundedSelectedObject = roundNumbersDeep(selectedObject);
pageWidth,
pageHeight,
onUpdate,
onDelete,
}: ObjectSettingsProps) => {
const roundedSelectedObject = roundNumbersDeep(selectedObject);
const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => { const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => {
onUpdate(id, roundNumbersDeep(updates)); onUpdate(id, roundNumbersDeep(updates));
}; };
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between pb-4"> <div className="flex items-center justify-between border-b border-border pb-3">
<h3 className="text-sm font-medium">تنظیمات شیء</h3> <h3 className="text-sm font-medium">تنظیمات شیء</h3>
<button <button onClick={() => onDelete(selectedObject.id)} className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500">
onClick={() => onDelete(selectedObject.id)} <Trash size={20} />
className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500" </button>
> </div>
<Trash size={20} />
</button>
</div>
<AlignmentSettings <AlignmentSettings pageWidth={pageWidth} pageHeight={pageHeight} onUpdate={handleRoundedUpdate} />
pageWidth={pageWidth}
pageHeight={pageHeight}
onUpdate={handleRoundedUpdate}
/>
{/* Mask Settings for all objects */} {/* Mask Settings for all objects */}
<MaskSettings objectId={roundedSelectedObject.id} /> <MaskSettings objectId={roundedSelectedObject.id} />
{roundedSelectedObject.type === "text" && <TextInstruction />} {roundedSelectedObject.type === "text" && <TextInstruction />}
{roundedSelectedObject.type === "text" && ( {roundedSelectedObject.type === "text" && <TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "rectangle" && ( {roundedSelectedObject.type === "rectangle" && <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && ( {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "image" && ( {roundedSelectedObject.type === "image" && <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "link" && ( {roundedSelectedObject.type === "link" && <LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "video" && ( {roundedSelectedObject.type === "video" && <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "audio" && ( {roundedSelectedObject.type === "audio" && <AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && ( {(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
<SizeSettings <SizeSettings
selectedObject={roundedSelectedObject} selectedObject={roundedSelectedObject}
onUpdate={handleRoundedUpdate} onUpdate={handleRoundedUpdate}
defaultWidth={roundedSelectedObject.type === "document" ? 200 : 100} defaultWidth={roundedSelectedObject.type === "document" ? 200 : 100}
defaultHeight={roundedSelectedObject.type === "document" ? 250 : 100} defaultHeight={roundedSelectedObject.type === "document" ? 250 : 100}
/> />
)} )}
{roundedSelectedObject.type === "grid" && ( {roundedSelectedObject.type === "grid" && <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
<EntranceAnimationSettings <EntranceAnimationSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
selectedObject={roundedSelectedObject}
onUpdate={handleRoundedUpdate}
/>
<TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} /> <TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
</div> </div>
); );
}; };
export default ObjectSettings; export default ObjectSettings;
src/pages/editor/components/sidebar/settings/AlignmentSettings.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ const AlignmentSettings = ({
// const hint = alignToSelection ? "نسبت به دو شی انتخاب‌شده" : "نسبت به صفحه"; // const hint = alignToSelection ? "نسبت به دو شی انتخاب‌شده" : "نسبت به صفحه";
return ( return (
<div className="space-y-3 border-t border-border pt-4"> <div className="space-y-3">
<div> <div>
<h4 className="text-sm font-bold text-foreground">ابزار جابه‌جایی</h4> <h4 className="text-sm font-bold text-foreground">ابزار جابه‌جایی</h4>
{/* <p className="mt-1 text-xs text-muted-foreground">{hint}</p> */} {/* <p className="mt-1 text-xs text-muted-foreground">{hint}</p> */}