base mask

src/pages/editor/components/sidebar/settings/MaskSettings.tsx

@@ -0,0 +1,77 @@
+import { Switch } from "@/components/ui/switch";
+import { useEditorStore } from "@/pages/editor/store/editorStore";
+
+type MaskSettingsProps = {
+  objectId: string;
+};
+
+/**
+ * MaskSettings - تنظیمات mask mode برای shapes
+ * 
+ * این component اجازه می‌ده کاربر یک shape رو به mask تبدیل کنه
+ * فقط برای shapes قابل استفاده است (rectangle, circle, triangle, abstract)
+ */
+const MaskSettings = ({ objectId }: MaskSettingsProps) => {
+  const { objects, updateObject, selectedObjectId, setSelectedObjectId } = useEditorStore();
+  
+  const object = objects.find((obj) => obj.id === objectId);
+  
+  if (!object) return null;
+  
+  const canBeMask = object.type === "rectangle";
+  
+  if (!canBeMask) return null;
+  
+  const isMask = object.isMask || false;
+  const currentShowGuide = object.showMaskGuide !== false;
+
+  const handleToggleMask = (checked: boolean) => {
+    updateObject(objectId, { isMask: checked, showMaskGuide: checked ? true : undefined });
+    
+    if (checked && selectedObjectId === objectId) {
+      setSelectedObjectId(null);
+    }
+  };
+
+  const handleToggleGuide = (checked: boolean) => {
+    updateObject(objectId, { showMaskGuide: checked });
+  };
+
+  return (
+    <div className="p-4 border-b">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-medium">استفاده به عنوان ماسک</span>
+          <span className="text-xs text-gray-500">
+            ناحیه‌ای که با ماسک همپوشانی دارد مخفی می‌شود
+          </span>
+        </div>
+        <Switch
+          checked={isMask}
+          onCheckedChange={handleToggleMask}
+        />
+      </div>
+      
+      {isMask && (
+        <>
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-sm">نمایش راهنمای ماسک</span>
+            <Switch
+              checked={currentShowGuide}
+              onCheckedChange={handleToggleGuide}
+            />
+          </div>
+          
+          <div className="p-2 bg-blue-50 rounded-md">
+            <p className="text-xs text-blue-700">
+              💡 قسمت‌های همپوشانی با این ماسک مخفی می‌شوند.
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MaskSettings;
+

src/pages/editor/components/sidebar/settings/index.ts

@@ -6,4 +6,5 @@ export { default as LinkSettings } from "./LinkSettings";
 export { default as VideoSettings } from "./VideoSettings";
 export { default as TransformSettings } from "./TransformSettings";
 export { default as GridSettings } from "./GridSettings";
+export { default as MaskSettings } from "./MaskSettings";