add setting diable/enable smart guide

This commit is contained in:
hamid zarghami
2026-05-11 10:11:01 +03:30
parent b9cde62566
commit f1cdd340a7
4 changed files with 29 additions and 0 deletions
@@ -39,6 +39,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
tool,
objects,
guides,
documentSettings,
pages,
currentPageId,
selectedObjectId,
@@ -50,6 +51,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
setGuides,
zoom,
} = useEditorStore();
const isSmartGuideEnabled = documentSettings.smartGuide;
const currentPage = pages.find((page) => page.id === currentPageId);
const bgColor =
@@ -307,6 +309,11 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
const handleDragMove = (e: Konva.KonvaEventObject<DragEvent>) => {
const node = e.target;
if (!node || node.name() === "guide-line") return;
if (!isSmartGuideEnabled) {
updateActiveGuides([]);
clearSmartGuides(smartGuidesLayerRef.current);
return;
}
const snapped = getSnappedPosition(node, guides, finalScale);
@@ -338,6 +345,12 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
clearSmartGuides(smartGuidesLayerRef.current);
};
useEffect(() => {
if (isSmartGuideEnabled) return;
updateActiveGuides([]);
clearSmartGuides(smartGuidesLayerRef.current);
}, [isSmartGuideEnabled]);
const handleStageMouseDownWithGuideReset = (e: Konva.KonvaEventObject<MouseEvent>) => {
if (e.target?.name() !== "guide-line") {
setSelectedGuideId(null);
@@ -55,6 +55,7 @@ const SettingsPanel = () => {
displayStyle,
autoPlay,
pageFlipSound,
smartGuide,
// leftToRightFlip,
} = documentSettings
@@ -142,6 +143,19 @@ const SettingsPanel = () => {
</div>
</section>
<section className="p-4 border-b border-border">
<div className="flex items-center gap-2 mb-4">
<h3 className="text-sm font-semibold text-gray-800">تنظیمات ویرایشگر</h3>
</div>
<div className="flex flex-col gap-3">
<CheckboxRow
label="راهنمای هوشمند"
checked={smartGuide}
onChange={(v) => updateDocumentSettings({ smartGuide: v })}
/>
</div>
</section>
{/* ─── پس زمینه ─── */}
<section className="p-4">
<h3 className="text-sm font-semibold text-gray-800 mb-4">پس زمینه</h3>
+1
View File
@@ -189,6 +189,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
autoPlay: false,
pageFlipSound: true,
leftToRightFlip: false,
smartGuide: true,
backgroundType: 'color',
backgroundColor: '#ffffff',
backgroundGradient: {
@@ -97,6 +97,7 @@ export type DocumentSettings = {
autoPlay: boolean;
pageFlipSound: boolean;
leftToRightFlip: boolean;
smartGuide: boolean;
backgroundType: BackgroundType;
backgroundColor: string;
backgroundGradient?: LinearGradient;