@nocobase/client-v2 2.1.28 → 2.1.30

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -9,7 +9,7 @@
 
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import jsQR from 'jsqr';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { CodeFormatsToSupport } from './types';
 
 type ScannerSize = {
@@ -21,7 +21,6 @@ type UseCodeScannerOptions = {
   enabled: boolean;
   elementId: string;
   formatsToSupport?: CodeFormatsToSupport;
-  scanBoxSize?: ScannerSize;
   onScannerSizeChanged?: (size: ScannerSize) => void;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
@@ -38,7 +37,18 @@ type JsQRImageTransform = {
   threshold?: number;
 };
 
+type FocusMediaTrackCapabilities = MediaTrackCapabilities & {
+  focusMode?: string[];
+};
+
+type FocusMediaTrackConstraintSet = MediaTrackConstraintSet & {
+  focusMode?: string;
+};
+
 const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
+const LIVE_QR_SCAN_INTERVAL = 120;
+const LIVE_QR_SCAN_MAX_WIDTH = 960;
+const LIVE_QR_SCAN_MAX_HEIGHT = 540;
 const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
   {},
   { contrast: 3, threshold: 105 },
@@ -66,8 +76,72 @@ export const DEFAULT_CODE_FORMATS: CodeFormatsToSupport = [
 
 export function getCodeScanBoxSize(width: number, height: number) {
   return {
-    width: Math.floor(Math.min(width * 0.82, 520)),
-    height: Math.floor(Math.min(height * 0.32, 240)),
+    width: Math.floor(Math.min((width * 90) / 100, 1152)),
+    height: Math.floor(Math.min((height * 70) / 100, 540)),
+  };
+}
+
+export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
+  if (!video.videoWidth || !video.videoHeight || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+    return;
+  }
+
+  const viewfinderWidth = video.clientWidth || video.videoWidth;
+  const viewfinderHeight = video.clientHeight || video.videoHeight;
+  const scanBoxSize = getCodeScanBoxSize(viewfinderWidth, viewfinderHeight);
+  const sourceWidth = Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth)));
+  const sourceHeight = Math.min(
+    video.videoHeight,
+    Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight)),
+  );
+  const sourceX = Math.floor((video.videoWidth - sourceWidth) / 2);
+  const sourceY = Math.floor((video.videoHeight - sourceHeight) / 2);
+  const targetScale = Math.min(1, LIVE_QR_SCAN_MAX_WIDTH / sourceWidth, LIVE_QR_SCAN_MAX_HEIGHT / sourceHeight);
+  const targetWidth = Math.max(1, Math.floor(sourceWidth * targetScale));
+  const targetHeight = Math.max(1, Math.floor(sourceHeight * targetScale));
+  if (canvas.width !== targetWidth) {
+    canvas.width = targetWidth;
+  }
+  if (canvas.height !== targetHeight) {
+    canvas.height = targetHeight;
+  }
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
+  const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+  return jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })?.data;
+}
+
+function startLiveQrScan(elementId: string, onScanSuccess: (text: string) => void) {
+  const canvas = document.createElement('canvas');
+  let timer: number | undefined;
+  let stopped = false;
+
+  const scan = () => {
+    if (stopped) {
+      return;
+    }
+    const video = document.getElementById(elementId)?.querySelector('video');
+    if (video) {
+      const decodedText = scanQrVideoFrame(video, canvas);
+      if (decodedText) {
+        stopped = true;
+        onScanSuccess(decodedText);
+        return;
+      }
+    }
+    timer = window.setTimeout(scan, LIVE_QR_SCAN_INTERVAL);
+  };
+
+  timer = window.setTimeout(scan, 0);
+  return () => {
+    stopped = true;
+    if (timer !== undefined) {
+      window.clearTimeout(timer);
+    }
   };
 }
 
@@ -92,6 +166,19 @@ async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } =
   }
 }
 
+async function enableContinuousFocus(scanner: Html5Qrcode) {
+  try {
+    const capabilities = scanner.getRunningTrackCapabilities() as FocusMediaTrackCapabilities;
+    if (!capabilities.focusMode?.includes('continuous')) {
+      return;
+    }
+    const focusConstraints: FocusMediaTrackConstraintSet = { focusMode: 'continuous' };
+    await scanner.applyVideoConstraints({ advanced: [focusConstraints] });
+  } catch {
+    // Some browsers expose incomplete camera capability APIs. Scanning should continue without explicit focus control.
+  }
+}
+
 function isSafariBrowser() {
   const { userAgent, vendor } = navigator;
   return /Apple/i.test(vendor) && /Safari/i.test(userAgent) && !/CriOS|FxiOS|EdgiOS|Chrome/i.test(userAgent);
@@ -216,40 +303,95 @@ export function useCodeScanner({
   enabled,
   elementId,
   formatsToSupport,
-  scanBoxSize,
   onScannerSizeChanged,
   onScanSuccess,
   onScanFailure,
   onCameraStartFailure,
 }: UseCodeScannerOptions) {
   const [scanner, setScanner] = useState<Html5Qrcode>();
+  const liveQrScanStopRef = useRef<() => void>();
+  const scanSucceededRef = useRef(false);
+  const scanSessionRef = useRef(0);
+
+  const stopLiveQrScan = useCallback(() => {
+    liveQrScanStopRef.current?.();
+    liveQrScanStopRef.current = undefined;
+  }, []);
+
+  const cancelActiveScan = useCallback(() => {
+    scanSessionRef.current += 1;
+    stopLiveQrScan();
+  }, [stopLiveQrScan]);
+
+  const reportScanSuccess = useCallback(
+    (text: string) => {
+      if (scanSucceededRef.current) {
+        return;
+      }
+      scanSucceededRef.current = true;
+      stopLiveQrScan();
+      onScanSuccess(text);
+    },
+    [onScanSuccess, stopLiveQrScan],
+  );
 
   const startScanCamera = useCallback(
     async (scannerInstance: Html5Qrcode) => {
-      await scannerInstance.start(
-        { facingMode: 'environment' },
-        {
-          fps: 10,
-          qrbox(width, height) {
-            onScannerSizeChanged?.({ width, height });
-            return clampCodeScanBoxSize(scanBoxSize ?? getCodeScanBoxSize(width, height), width, height);
+      cancelActiveScan();
+      const scanSession = scanSessionRef.current;
+      scanSucceededRef.current = false;
+      try {
+        await scannerInstance.start(
+          { facingMode: 'environment' },
+          {
+            fps: 8,
+            disableFlip: false,
+            videoConstraints: {
+              facingMode: { ideal: 'environment' },
+              width: { ideal: 1920 },
+              height: { ideal: 1080 },
+              frameRate: { ideal: 30 },
+            },
+            qrbox(width, height) {
+              onScannerSizeChanged?.({ width, height });
+              return clampCodeScanBoxSize(getCodeScanBoxSize(width, height), width, height);
+            },
+          },
+          (decodedText) => {
+            reportScanSuccess(decodedText);
           },
-        },
-        (decodedText) => {
-          onScanSuccess(decodedText);
-        },
-        undefined,
-      );
+          undefined,
+        );
+      } catch (error) {
+        if (scanSession !== scanSessionRef.current) {
+          return;
+        }
+        throw error;
+      }
+      if (scanSession !== scanSessionRef.current) {
+        try {
+          await stopScanner(scannerInstance, { clear: true });
+        } catch {
+          // The scanner may already have been cleared by the canceled session cleanup.
+        }
+        return;
+      }
+      if (shouldScanQrWithJsQR(formatsToSupport)) {
+        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess);
+      }
+      await enableContinuousFocus(scannerInstance);
     },
-    [onScanSuccess, onScannerSizeChanged, scanBoxSize],
+    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess],
   );
 
   const startScanFile = useCallback(
     async (file: File) => {
+      cancelActiveScan();
+      scanSucceededRef.current = false;
       if (isSafariBrowser() && shouldScanQrWithJsQR(formatsToSupport)) {
         try {
           const decodedText = await scanFileWithJsQR(file, formatsToSupport);
-          onScanSuccess(decodedText);
+          reportScanSuccess(decodedText);
           return;
         } catch {
           // Fall through to html5-qrcode so barcode uploads still work in Safari.
@@ -263,13 +405,13 @@ export function useCodeScanner({
       await stopScanner(scanner);
       try {
         const result = await scanner.scanFileV2(file, false);
-        onScanSuccess(result.decodedText);
+        reportScanSuccess(result.decodedText);
       } catch {
         onScanFailure?.();
         await startScanCamera(scanner);
       }
     },
-    [formatsToSupport, onScanFailure, onScanSuccess, scanner, startScanCamera],
+    [cancelActiveScan, formatsToSupport, onScanFailure, reportScanSuccess, scanner, startScanCamera],
   );
 
   useEffect(() => {
@@ -291,9 +433,10 @@ export function useCodeScanner({
     });
 
     return () => {
+      cancelActiveScan();
       stopScanner(scannerInstance, { clear: true }).catch(() => undefined);
     };
-  }, [elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
+  }, [cancelActiveScan, elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
 
   return {
     startScanFile,

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -421,14 +421,14 @@ describe('FlowRoute', () => {
     });
   });
 
-  it('should show 404 when current route is a legacy page in v2 runtime', async () => {
+  it('should explain how to open a legacy page outside the v2 runtime', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {
       configurable: true,
       value: {
         ...originalLocation,
-        pathname: '/v2/admin/test-page/tab/tab-1',
+        pathname: '/nocobase/v2/apps/jhb20/admin/test-page/tab/tab-1',
         search: '?from=direct',
         hash: '#dialog',
         replace,
@@ -447,9 +447,9 @@ describe('FlowRoute', () => {
       });
       engine.context.defineProperty('app', {
         value: {
-          getPublicPath: () => '/v2/',
+          getPublicPath: () => '/nocobase/v2/',
           router: {
-            getBasename: () => '/v2',
+            getBasename: () => '/nocobase/v2',
           },
         },
       });
@@ -465,15 +465,25 @@ describe('FlowRoute', () => {
 
       render(
         <FlowEngineProvider engine={engine}>
-          <MemoryRouter initialEntries={['/flow/test-page']}>
+          <MemoryRouter initialEntries={['/nocobase/v2/apps/jhb20/admin/test-page/tab/tab-1?from=direct#dialog']}>
             <Routes>
-              <Route path="/flow/:name" element={<FlowRoute />} />
+              <Route path="/nocobase/v2/apps/jhb20/admin/:name/*" element={<FlowRoute />} />
             </Routes>
           </MemoryRouter>
         </FlowEngineProvider>,
       );
 
-      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(await screen.findByText('This page is not supported in the /v2/ branch')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'The /v2/ branch only supports new pages. This page is a legacy page. Please open it from the original entry.',
+        ),
+      ).toBeInTheDocument();
+      expect(screen.queryByText('404')).not.toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Open from the original entry' })).toHaveAttribute(
+        'href',
+        '/nocobase/apps/jhb20/admin/test-page/tab/tab-1?from=direct#dialog',
+      );
       expect(replace).not.toHaveBeenCalled();
       expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
       expect(adminLayoutModel.updateRoutePage).not.toHaveBeenCalled();
@@ -546,6 +556,113 @@ describe('FlowRoute', () => {
     }
   });
 
+  it('should render 404 for missing FlowModel in notFound mode without routeRepository', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/embed/missing-page']}>
+          <Routes>
+            <Route path="/embed/:name" element={<FlowRoute legacyPageBehavior="notFound" />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('404')).toBeInTheDocument();
+    expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+  });
+
+  it('should bridge by default when routeRepository does not exist', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/missing-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('missing-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
+  it('should bridge existing FlowModel in notFound mode without routeRepository', async () => {
+    const engine = new FlowEngine();
+    engine.createModel({ uid: 'test-page', use: 'FlowModel' });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/embed/test-page']}>
+          <Routes>
+            <Route path="/embed/:name" element={<FlowRoute legacyPageBehavior="notFound" />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('test-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
   it('should bridge existing FlowModel when behavior is notFound and routeRepository has no route', async () => {
     const engine = new FlowEngine();
     engine.setModelRepository({
@@ -818,7 +935,7 @@ describe('FlowRoute', () => {
     }
   });
 
-  it('should not redirect when route does not exist', async () => {
+  it('should render 404 when route and FlowModel do not exist', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {
@@ -867,9 +984,8 @@ describe('FlowRoute', () => {
         </FlowEngineProvider>,
       );
 
-      await waitFor(() => {
-        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
-      });
+      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
       expect(replace).not.toHaveBeenCalled();
     } finally {
       Object.defineProperty(window, 'location', {
@@ -879,6 +995,51 @@ describe('FlowRoute', () => {
     }
   });
 
+  it('should bridge existing FlowModel when route metadata does not exist', async () => {
+    const engine = new FlowEngine();
+    engine.createModel({ uid: 'test-page', use: 'FlowModel' });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => undefined),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('test-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
   it('should keep sub app page inside spa when basename does not include /v2/', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();

package/src/flow/actions/__tests__/actionLinkageRules.forkProps.test.ts

@@ -0,0 +1,115 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { ActionModel as ConfiguredActionModel } from '../../models/base/ActionModel';
+import { ActionModel } from '../../models/base/ActionModelCore';
+import { actionLinkageRules, linkageSetActionProps } from '../linkageRules';
+
+class TestActionModel extends ActionModel {}
+
+describe('action linkage rules on action forks', () => {
+  it('does not snapshot unrelated master props when disabling an action', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TestActionModel });
+    const master = engine.createModel<TestActionModel>({
+      use: 'TestActionModel',
+      props: { title: 'Edit' },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    const ctx = {
+      flowKey: 'buttonSettings',
+      model: fork,
+      app: {
+        jsonLogic: {
+          apply: vi.fn(() => true),
+        },
+      },
+      t: (value: string) => value,
+      resolveJsonTemplate: vi.fn(async (value: unknown) => value),
+      getAction: (name: string) => {
+        if (name !== 'linkageSetActionProps') return undefined;
+        return {
+          handler: async (_ctx: unknown, params: { setProps: Function }) => {
+            params.setProps(fork, { disabled: true });
+          },
+        };
+      },
+    } as never;
+
+    await actionLinkageRules.handler(ctx, {
+      value: [
+        {
+          key: 'disable-edit',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+        },
+      ],
+    });
+
+    expect(fork.localProps.title).toBeUndefined();
+    expect(fork.__originalProps.title).toBeUndefined();
+    expect(fork.localProps.disabled).toBe(true);
+
+    master.setProps('title', 'Updated');
+    await actionLinkageRules.handler(ctx, {
+      value: [
+        {
+          key: 'disable-edit',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+        },
+      ],
+    });
+
+    expect(fork.getProps().title).toBe('Updated');
+    expect(fork.serialize().props.title).toBe('Updated');
+
+    const refreshedFork = master.createFork({ className: 'row-action' });
+    expect(refreshedFork.getProps().title).toBe('Updated');
+  });
+
+  it('updates a disabled row action title through the real beforeRender flow', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ ConfiguredActionModel });
+    engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const master = engine.createModel<ConfiguredActionModel>({
+      use: 'ConfiguredActionModel',
+      props: { title: 'Edit' },
+      stepParams: {
+        buttonSettings: {
+          general: { title: 'Edit' },
+          linkageRules: {
+            value: [
+              {
+                key: 'disable-edit',
+                enable: true,
+                condition: { logic: '$and', items: [] },
+                actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+              },
+            ],
+          },
+        },
+      },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+    expect(fork.getProps()).toMatchObject({ title: 'Edit', disabled: true });
+
+    master.setStepParams('buttonSettings', 'general', { title: 'Updated' });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(fork.getProps()).toMatchObject({ title: 'Updated', disabled: true });
+  });
+});