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 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 {
AlignmentSettings,
AudioSettings,
EntranceAnimationSettings,
GridSettings,
LineSettings,
LinkSettings,
MaskSettings,
ShapeSettings,
SizeSettings,
TextSettings,
TransformSettings,
VideoSettings,
} from "./settings";
type ObjectSettingsProps = {
selectedObject: EditorObject;
pageWidth: number;
pageHeight: number;
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
onDelete: (id: string) => void;
selectedObject: EditorObject;
pageWidth: number;
pageHeight: number;
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
onDelete: (id: string) => void;
};
const roundNumbersDeep = <T,>(value: T): T => {
if (typeof value === "number") {
return Math.round(value) as T;
}
if (typeof value === "number") {
return Math.round(value) as T;
}
if (Array.isArray(value)) {
return value.map((item) => roundNumbersDeep(item)) as T;
}
if (Array.isArray(value)) {
return value.map((item) => roundNumbersDeep(item)) as T;
}
if (value && typeof value === "object") {
const roundedObject = Object.entries(value).reduce<Record<string, unknown>>((acc, [key, nestedValue]) => {
acc[key] = roundNumbersDeep(nestedValue);
return acc;
}, {});
if (value && typeof value === "object") {
const roundedObject = Object.entries(value).reduce<Record<string, unknown>>((acc, [key, nestedValue]) => {
acc[key] = roundNumbersDeep(nestedValue);
return acc;
}, {});
return roundedObject as T;
}
return roundedObject as T;
}
return value;
return value;
};
const ObjectSettings = ({
selectedObject,
pageWidth,
pageHeight,
onUpdate,
onDelete,
}: ObjectSettingsProps) => {
const roundedSelectedObject = roundNumbersDeep(selectedObject);
const ObjectSettings = ({ selectedObject, pageWidth, pageHeight, onUpdate, onDelete }: ObjectSettingsProps) => {
const roundedSelectedObject = roundNumbersDeep(selectedObject);
const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => {
onUpdate(id, roundNumbersDeep(updates));
};
const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => {
onUpdate(id, roundNumbersDeep(updates));
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between pb-4">
<h3 className="text-sm font-medium">تنظیمات شیء</h3>
<button
onClick={() => onDelete(selectedObject.id)}
className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500"
>
<Trash size={20} />
</button>
</div>
return (
<div className="space-y-4">
<div className="flex items-center justify-between border-b border-border pb-3">
<h3 className="text-sm font-medium">تنظیمات شیء</h3>
<button onClick={() => onDelete(selectedObject.id)} className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500">
<Trash size={20} />
</button>
</div>
<AlignmentSettings
pageWidth={pageWidth}
pageHeight={pageHeight}
onUpdate={handleRoundedUpdate}
/>
<AlignmentSettings pageWidth={pageWidth} pageHeight={pageHeight} onUpdate={handleRoundedUpdate} />
{/* Mask Settings for all objects */}
<MaskSettings objectId={roundedSelectedObject.id} />
{/* Mask Settings for all objects */}
<MaskSettings objectId={roundedSelectedObject.id} />
{roundedSelectedObject.type === "text" && <TextInstruction />}
{roundedSelectedObject.type === "text" && (
<TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "text" && <TextInstruction />}
{roundedSelectedObject.type === "text" && <TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{roundedSelectedObject.type === "rectangle" && (
<ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "rectangle" && <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && (
<LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{roundedSelectedObject.type === "image" && (
<SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "image" && <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{roundedSelectedObject.type === "link" && (
<LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "link" && <LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{roundedSelectedObject.type === "video" && (
<VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "video" && <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{roundedSelectedObject.type === "audio" && (
<AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "audio" && <AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
{(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
<SizeSettings
selectedObject={roundedSelectedObject}
onUpdate={handleRoundedUpdate}
defaultWidth={roundedSelectedObject.type === "document" ? 200 : 100}
defaultHeight={roundedSelectedObject.type === "document" ? 250 : 100}
/>
)}
{(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
<SizeSettings
selectedObject={roundedSelectedObject}
onUpdate={handleRoundedUpdate}
defaultWidth={roundedSelectedObject.type === "document" ? 200 : 100}
defaultHeight={roundedSelectedObject.type === "document" ? 250 : 100}
/>
)}
{roundedSelectedObject.type === "grid" && (
<GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
)}
{roundedSelectedObject.type === "grid" && <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}
<EntranceAnimationSettings
selectedObject={roundedSelectedObject}
onUpdate={handleRoundedUpdate}
/>
<EntranceAnimationSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
<TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
</div>
);
<TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
</div>
);
};
export default ObjectSettings;
src/pages/editor/components/sidebar/settings/AlignmentSettings.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ const AlignmentSettings = ({
// const hint = alignToSelection ? "نسبت به دو شی انتخاب‌شده" : "نسبت به صفحه";
return (
<div className="space-y-3 border-t border-border pt-4">
<div className="space-y-3">
<div>
<h4 className="text-sm font-bold text-foreground">ابزار جابه‌جایی</h4>
{/* <p className="mt-1 text-xs text-muted-foreground">{hint}</p> */}