fix(dashboard): Fix asset focal point positioning

packages/dashboard/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -1,8 +1,7 @@
-import { AssetFocalPointEditor } from '@/vdb/components/shared/asset/asset-focal-point-editor.js';
+import { AssetFocalPointEditor, Point } from '@/vdb/components/shared/asset/asset-focal-point-editor.js';
 import { AssetPreviewSelector } from '@/vdb/components/shared/asset/asset-preview-selector.js';
 import { PreviewPreset } from '@/vdb/components/shared/asset/asset-preview.js';
 import { AssetProperties } from '@/vdb/components/shared/asset/asset-properties.js';
-import { Point } from '@/vdb/components/shared/asset/focal-point-control.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
@@ -111,7 +110,7 @@ function AssetDetailPage() {
                             width={width}
                             height={height}
                             settingFocalPoint={settingFocalPoint}
-                            focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
+                            focalPoint={entity.focalPoint ?? { x: 0.5, y: 0.5 }}
                             onFocalPointChange={point => {
                                 form.setValue('focalPoint.x', point.x, { shouldDirty: true });
                                 form.setValue('focalPoint.y', point.y, { shouldDirty: true });

packages/dashboard/src/lib/components/shared/asset/asset-focal-point-editor.tsx

@@ -17,7 +17,7 @@ export interface AssetFocalPointEditorProps {
     children?: React.ReactNode;
 }
 
-interface Point {
+export interface Point {
     x: number;
     y: number;
 }

packages/dashboard/src/lib/components/shared/asset/focal-point-control.tsx

@@ -1,57 +0,0 @@
-import { cn } from '@/vdb/lib/utils.js';
-import { useEffect, useState } from 'react';
-
-export interface Point {
-    x: number;
-    y: number;
-}
-
-interface FocalPointControlProps {
-    width: number;
-    height: number;
-    point: Point;
-    onChange: (point: Point) => void;
-}
-
-export function FocalPointControl({ width, height, point, onChange }: Readonly<FocalPointControlProps>) {
-    const [dragging, setDragging] = useState(false);
-
-    useEffect(() => {
-        if (!dragging) return;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            const rect = (e.target as HTMLDivElement)?.getBoundingClientRect();
-            const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-            const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-            onChange({ x, y });
-        };
-
-        const handleMouseUp = () => {
-            setDragging(false);
-        };
-
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [dragging, onChange]);
-
-    return (
-        <div className="absolute inset-0 cursor-crosshair" onMouseDown={() => setDragging(true)}>
-            <div
-                className={cn(
-                    'absolute w-6 h-6 border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2',
-                    'shadow-[0_0_0_1px_rgba(0,0,0,0.3)]',
-                    dragging && 'scale-75',
-                )}
-                style={{
-                    left: `${point.x * width}px`,
-                    top: `${point.y * height}px`,
-                }}
-            />
-        </div>
-    );
-}

packages/dashboard/src/lib/index.ts

@@ -70,7 +70,6 @@ export * from './components/shared/asset/asset-preview-dialog.js';
 export * from './components/shared/asset/asset-preview-selector.js';
 export * from './components/shared/asset/asset-preview.js';
 export * from './components/shared/asset/asset-properties.js';
-export * from './components/shared/asset/focal-point-control.js';
 export * from './components/shared/assign-to-channel-bulk-action.js';
 export * from './components/shared/assign-to-channel-dialog.js';
 export * from './components/shared/assigned-facet-values.js';