feat: layer overlay handle (#182)

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

* feat: layer overlay

Author: cshum

web/src/components/image-editor/controls/layer-controls.tsx

@@ -26,6 +26,7 @@ import {
 } from '@/components/ui/select'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import type { BlendMode, ImageLayer } from '@/lib/image-editor'
+import { cn } from '@/lib/utils'
 
 interface LayerControlsProps {
   layer: ImageLayer
@@ -313,6 +314,7 @@ export function LayerControls({
                   onValueChange={handleHAlignChange}
                   variant='outline'
                   className='flex-1 gap-0'
+                  disabled={visualCropEnabled}
                 >
                   <ToggleGroupItem
                     value='left'
@@ -340,7 +342,7 @@ export function LayerControls({
                   type='number'
                   value={hAlign === 'center' ? '' : xOffset}
                   onChange={(e) => handleXOffsetChange(Number(e.target.value) || 0)}
-                  disabled={hAlign === 'center'}
+                  disabled={hAlign === 'center' || visualCropEnabled}
                   placeholder='—'
                   min={0}
                   step={1}
@@ -361,6 +363,7 @@ export function LayerControls({
                   onValueChange={handleVAlignChange}
                   variant='outline'
                   className='flex-1 gap-0'
+                  disabled={visualCropEnabled}
                 >
                   <ToggleGroupItem
                     value='top'
@@ -388,7 +391,7 @@ export function LayerControls({
                   type='number'
                   value={vAlign === 'center' ? '' : yOffset}
                   onChange={(e) => handleYOffsetChange(Number(e.target.value) || 0)}
-                  disabled={vAlign === 'center'}
+                  disabled={vAlign === 'center' || visualCropEnabled}
                   placeholder='—'
                   min={0}
                   step={1}
@@ -411,6 +414,7 @@ export function LayerControls({
                   value={currentWidth}
                   onChange={(e) => handleWidthChange(e.target.value)}
                   onBlur={(e) => handleWidthBlur(e.target.value)}
+                  disabled={visualCropEnabled}
                   min='1'
                   max='10000'
                   className='h-8'
@@ -422,6 +426,7 @@ export function LayerControls({
                 variant='outline'
                 size='sm'
                 onClick={() => onAspectRatioLockChange(!aspectRatioLocked)}
+                disabled={visualCropEnabled}
                 className='h-8 w-8 p-0'
                 title={
                   aspectRatioLocked
@@ -442,6 +447,7 @@ export function LayerControls({
                   value={currentHeight}
                   onChange={(e) => handleHeightChange(e.target.value)}
                   onBlur={(e) => handleHeightBlur(e.target.value)}
+                  disabled={visualCropEnabled}
                   min='1'
                   max='10000'
                   className='h-8'
@@ -459,12 +465,24 @@ export function LayerControls({
             step={1}
             unit='%'
             onChange={handleAlphaChange}
+            disabled={visualCropEnabled}
           />
 
           {/* Blend Mode Control */}
           <div className='space-y-2'>
-            <Label className='text-sm font-medium'>{t('imageEditor.layers.blendMode')}</Label>
-            <Select value={layer.blendMode} onValueChange={handleBlendModeChange}>
+            <Label
+              className={cn(
+                'text-sm font-medium',
+                visualCropEnabled && 'text-muted-foreground opacity-50',
+              )}
+            >
+              {t('imageEditor.layers.blendMode')}
+            </Label>
+            <Select
+              value={layer.blendMode}
+              onValueChange={handleBlendModeChange}
+              disabled={visualCropEnabled}
+            >
               <SelectTrigger>
                 <SelectValue />
               </SelectTrigger>