@nocobase/flow-engine 2.2.0-alpha.1 → 2.2.0-alpha.2

package/src/__tests__/runjsRuntimeFeatures.test.ts

@@ -8,9 +8,9 @@
  */
 
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { FlowContext, FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { RUNJS_OPEN_VIEW_ROUTE_STATE } from '../utils/openViewRouteState';
 import { FlowEngine } from '../flowEngine';
-import { FlowContext } from '../flowContext';
 import { setupRunJSContexts } from '../runjs-context/setup';
 import { createJSRunnerWithVersion } from '..';
 import { RunJSContextRegistry } from '../runjs-context/registry';
@@ -267,6 +267,19 @@ describe('RunJS Runtime Features', () => {
       expect(runCtx.libs.dayjs).toBeDefined();
       expect(runCtx.libs.antdIcons).toBeDefined();
     });
+
+    it('should mark ctx.openView calls with route state only when RunJS passes display overrides', async () => {
+      const parentCtx = new FlowContext();
+      const openView = vi.fn(async () => undefined);
+      parentCtx.defineMethod('openView', openView);
+
+      const runCtx = new FlowRunJSContext(parentCtx);
+      await (runCtx as any).openView('popup', { mode: 'dialog', size: 'large' });
+      await (runCtx as any).openView('popup', { filterByTk: 1 });
+
+      expect(openView.mock.calls[0][1][RUNJS_OPEN_VIEW_ROUTE_STATE]).toEqual({ mode: 'dialog', size: 'large' });
+      expect(Object.prototype.hasOwnProperty.call(openView.mock.calls[1][1], RUNJS_OPEN_VIEW_ROUTE_STATE)).toBe(false);
+    });
   });
 
   describe('Actual code execution', () => {

package/src/components/FieldModelRenderer.tsx

@@ -10,7 +10,7 @@
 import type { FlowModelRendererProps } from './FlowModelRenderer';
 import { FlowModelRenderer } from './FlowModelRenderer';
 import _ from 'lodash';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
   'model',
@@ -28,49 +28,63 @@ const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
 ];
 
 export function FieldModelRenderer(props: any) {
-  const { model, ...rest } = props;
+  const { model, onChange, ...rest } = props;
   const composingRef = useRef(false);
 
-  const handleChange = (e: any) => {
-    let val;
-    if (e && e.target && typeof e.target.value !== 'undefined') {
-      val = e.target.value;
-    } else if (
-      typeof e === 'string' ||
-      typeof e === 'number' ||
-      typeof e === 'boolean' ||
-      (typeof e === 'object' && !(e instanceof Event))
-    ) {
-      val = e;
-    } else {
-      val = null;
-    }
+  const handleChange = useCallback(
+    (e: any) => {
+      let val;
+      if (e && e.target && typeof e.target.value !== 'undefined') {
+        val = e.target.value;
+      } else if (
+        typeof e === 'string' ||
+        typeof e === 'number' ||
+        typeof e === 'boolean' ||
+        (typeof e === 'object' && !(e instanceof Event))
+      ) {
+        val = e;
+      } else {
+        val = null;
+      }
 
-    model.setProps({ value: val });
-    if (!composingRef.current) {
-      props.onChange?.(val);
-    }
-  };
-  const handleCompositionStart = () => {
+      const isComposing = composingRef.current || e?.nativeEvent?.isComposing;
+      if (isComposing) {
+        return;
+      }
+
+      model.setProps({ value: val });
+      if (!composingRef.current) {
+        onChange?.(val);
+      }
+    },
+    [model, onChange],
+  );
+  const handleCompositionStart = useCallback(() => {
     composingRef.current = true;
-  };
+  }, []);
 
-  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
-    composingRef.current = false;
-    if (flag) {
-      props.onChange(e);
-    }
-  };
+  const handleCompositionEnd = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
+      composingRef.current = false;
+      if (flag) {
+        handleChange(e);
+      }
+    },
+    [handleChange],
+  );
 
-  const modelProps = {
-    onCompositionStart: handleCompositionStart,
-    onCompositionEnd: handleCompositionEnd,
-    ..._.omit(rest, flowModelRendererPropKeys),
-    onChange: handleChange,
-  };
+  const modelProps = useMemo(
+    () => ({
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      ..._.omit(rest, flowModelRendererPropKeys),
+      onChange: handleChange,
+    }),
+    [handleChange, handleCompositionEnd, handleCompositionStart, rest],
+  );
   useEffect(() => {
     model && model.setProps(modelProps);
-  }, [modelProps]);
+  }, [model, modelProps]);
 
   return <FlowModelRenderer model={model} {...rest} />;
 }

package/src/components/FlowContextSelector.tsx

@@ -92,6 +92,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   open,
   onlyLeafSelectable = false,
   ignoreFieldNames,
+  dropdownFooter,
   ...cascaderProps
 }) => {
   const { token } = theme.useToken();
@@ -360,12 +361,41 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
     [cascaderOnDropdownVisibleChange, open],
   );
 
+  // Footer hint at the bottom of the dropdown. Defaults to the "double click to choose entire object" hint whenever
+  // non-leaf selection is allowed (double-clicking a non-leaf selects the whole object). Callers can override with
+  // their own node, or pass `null` to hide it.
+  const footerNode = useMemo(() => {
+    if (dropdownFooter !== undefined) {
+      return dropdownFooter;
+    }
+    if (onlyLeafSelectable) {
+      return null;
+    }
+    return (
+      <div
+        className={css`
+          padding: 6px 12px;
+          color: ${token.colorTextDescription};
+          border-top: 1px solid ${token.colorSplit};
+          font-size: ${token.fontSizeSM}px;
+        `}
+      >
+        {flowCtx.t('Double click to choose entire object')}
+      </div>
+    );
+  }, [dropdownFooter, onlyLeafSelectable, token, flowCtx]);
+
   const renderDropdown = useCallback(
     (menu: React.ReactElement) => {
       const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
       const cascaderMenu = React.isValidElement(cascaderMenuNode) ? cascaderMenuNode : <>{cascaderMenuNode}</>;
       if (!isSearchEnabled || children === null) {
-        return cascaderMenu;
+        return (
+          <>
+            {cascaderMenu}
+            {footerNode}
+          </>
+        );
       }
 
       return (
@@ -381,10 +411,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
             />
           </div>
           {cascaderMenu}
+          {footerNode}
         </>
       );
     },
-    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText],
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText, footerNode],
   );
 
   const inlinePlaceholder =

package/src/components/__tests__/FieldModelRenderer.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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 { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { vi } from 'vitest';
+import { FlowEngine } from '../../flowEngine';
+import { FlowModel } from '../../models/flowModel';
+import { FlowEngineProvider } from '../../provider';
+import { FieldModelRenderer } from '../FieldModelRenderer';
+
+class InputModel extends FlowModel {
+  render(): React.ReactNode {
+    return (
+      <input
+        data-testid="field-input"
+        value={this.props.value ?? ''}
+        onChange={this.props.onChange}
+        onCompositionStart={this.props.onCompositionStart}
+        onCompositionEnd={this.props.onCompositionEnd}
+      />
+    );
+  }
+}
+
+describe('FieldModelRenderer', () => {
+  it('updates model and form value for normal input changes', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'normal-input-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    const input = await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    fireEvent.change(input, { target: { value: 'abc' } });
+
+    expect(model.props.value).toBe('abc');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('abc');
+  });
+
+  it('updates model and form value when field components pass values directly', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'direct-value-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    act(() => {
+      model.props.onChange(123);
+    });
+
+    expect(model.props.value).toBe(123);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(123);
+  });
+
+  it('defers model and form value updates while IME composition is active', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'input-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    const input = await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 't' }, nativeEvent: { isComposing: true } });
+
+    expect(model.props.value).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.compositionEnd(input, { target: { value: 'te' } });
+
+    expect(model.props.value).toBe('te');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('te');
+  });
+
+  it('does not commit composition value when composition end opts out', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'composition-opt-out-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+      expect(model.props.onCompositionStart).toBeTypeOf('function');
+      expect(model.props.onCompositionEnd).toBeTypeOf('function');
+    });
+
+    act(() => {
+      model.props.onCompositionStart();
+      model.props.onChange({ target: { value: 'search' }, nativeEvent: { isComposing: true } });
+      model.props.onCompositionEnd({ target: { value: 'search' } }, false);
+    });
+
+    expect(model.props.value).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/dnd/index.tsx

@@ -35,6 +35,10 @@ type ToolbarDragAnchorDetail = {
   point: ToolbarDragAnchorPoint | null;
 };
 
+const getToolbarModelUidFromNode = (node: HTMLElement | null): string | null => {
+  return node?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]')?.getAttribute('data-model-uid') || null;
+};
+
 export const resolveOverlayAnchorTransform = ({
   activeId,
   active,
@@ -62,7 +66,7 @@ export const resolveOverlayAnchorTransform = ({
 const resolveDraggableHostNode = (activatorNode: HTMLElement | null) => {
   const ownerDocument = activatorNode?.ownerDocument;
   const floatToolbarContainer = activatorNode?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]');
-  const toolbarModelUid = floatToolbarContainer?.getAttribute('data-model-uid');
+  const toolbarModelUid = getToolbarModelUidFromNode(activatorNode);
 
   if (!ownerDocument || !toolbarModelUid) {
     return activatorNode;
@@ -95,6 +99,7 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
   const dragHandlerRef = useRef<HTMLSpanElement | null>(null);
   const draggableNodeRef = useRef<HTMLElement | null>(null);
   const pointerPressCleanupRef = useRef<(() => void) | null>(null);
+  const toolbarDragModelUidRef = useRef<string | null>(null);
   const isDraggingRef = useRef(isDragging);
   const isPointerPressActiveRef = useRef(false);
   const isToolbarDragActiveRef = useRef(false);
@@ -126,9 +131,13 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
         return;
       }
 
+      const toolbarModelUid =
+        getToolbarModelUidFromNode(dragHandlerRef.current) || toolbarDragModelUidRef.current || model.uid;
+      toolbarDragModelUidRef.current = active ? toolbarModelUid : null;
+
       ownerDocument.dispatchEvent(
         new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-          detail: { active, modelUid: model.uid },
+          detail: { active, modelUid: toolbarModelUid },
         }),
       );
     },

package/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx

@@ -11,6 +11,7 @@ import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { createPortal } from 'react-dom';
 import { Alert, Space } from 'antd';
 import { css } from '@emotion/css';
+import { useMemoizedFn } from 'ahooks';
 import { FlowModel } from '../../../../models';
 import { ToolbarItemConfig } from '../../../../types';
 import { useFlowModelById } from '../../../../hooks';
@@ -394,6 +395,49 @@ const isModelByIdProps = (props: FlowsFloatContextMenuProps): props is ModelById
   return 'uid' in props && 'modelClassName' in props && Boolean(props.uid) && Boolean(props.modelClassName);
 };
 
+const stopResizeInteractionEvent = (event?: MouseEvent | React.MouseEvent) => {
+  if (!event) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;
+  nativeEvent.stopImmediatePropagation?.();
+};
+
+const pendingResizeClickSuppressions = new WeakMap<
+  Document,
+  { listener: (event: MouseEvent) => void; timer: number }
+>();
+
+const clearPendingResizeClickSuppression = (ownerDocument: Document) => {
+  const pending = pendingResizeClickSuppressions.get(ownerDocument);
+  if (!pending) {
+    return;
+  }
+
+  ownerDocument.removeEventListener('click', pending.listener, true);
+  (ownerDocument.defaultView || window).clearTimeout(pending.timer);
+  pendingResizeClickSuppressions.delete(ownerDocument);
+};
+
+const suppressNextResizeClick = (ownerDocument: Document) => {
+  clearPendingResizeClickSuppression(ownerDocument);
+
+  const listener = (event: MouseEvent) => {
+    stopResizeInteractionEvent(event);
+    clearPendingResizeClickSuppression(ownerDocument);
+  };
+  const timer = (ownerDocument.defaultView || window).setTimeout(() => {
+    clearPendingResizeClickSuppression(ownerDocument);
+  }, 0);
+
+  pendingResizeClickSuppressions.set(ownerDocument, { listener, timer });
+  ownerDocument.addEventListener('click', listener, true);
+};
+
 /**
  * FlowsFloatContextMenu组件 - 悬浮配置工具栏组件
  *
@@ -442,55 +486,80 @@ const ResizeHandles: React.FC<{
   const isDraggingRef = useRef<boolean>(false);
   const dragTypeRef = useRef<'left' | 'right' | null>(null);
   const dragStartPosRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const dragOwnerDocumentRef = useRef<Document | null>(null);
   const { onDragStart, onDragEnd } = props;
 
   // 把拖拽位移转成上层已约定的 resize 事件。
-  const handleDragMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDraggingRef.current || !dragTypeRef.current) return;
-
-      const deltaX = e.clientX - dragStartPosRef.current.x;
-
-      switch (dragTypeRef.current) {
-        case 'left':
-          props.model.parent.emitter.emit('onResizeLeft', { resizeDistance: -deltaX, model: props.model });
-          break;
-        case 'right':
-          props.model.parent.emitter.emit('onResizeRight', { resizeDistance: deltaX, model: props.model });
-          break;
-      }
-    },
-    [props.model],
-  );
+  const handleDragMove = useMemoizedFn((e: MouseEvent) => {
+    if (!isDraggingRef.current || !dragTypeRef.current) return;
+
+    stopResizeInteractionEvent(e);
+    const deltaX = e.clientX - dragStartPosRef.current.x;
+
+    switch (dragTypeRef.current) {
+      case 'left':
+        props.model.parent.emitter.emit('onResizeLeft', { resizeDistance: -deltaX, model: props.model });
+        break;
+      case 'right':
+        props.model.parent.emitter.emit('onResizeRight', { resizeDistance: deltaX, model: props.model });
+        break;
+    }
+  });
+
+  const handleDragEnd = useMemoizedFn((e?: MouseEvent) => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+
+    stopResizeInteractionEvent(e);
+    const ownerDocument = dragOwnerDocumentRef.current || document;
+
+    ownerDocument.removeEventListener('mousemove', handleDragMove, true);
+    ownerDocument.removeEventListener('mouseup', handleDragEnd, true);
+    suppressNextResizeClick(ownerDocument);
 
-  const handleDragEnd = useCallback(() => {
     isDraggingRef.current = false;
     dragTypeRef.current = null;
     dragStartPosRef.current = { x: 0, y: 0 };
-
-    document.removeEventListener('mousemove', handleDragMove);
-    document.removeEventListener('mouseup', handleDragEnd);
+    dragOwnerDocumentRef.current = null;
 
     props.model.parent.emitter.emit('onResizeEnd');
     onDragEnd?.();
-  }, [handleDragMove, onDragEnd, props.model]);
+  });
+
+  useEffect(() => {
+    return () => {
+      const dragOwnerDocument = dragOwnerDocumentRef.current;
+      dragOwnerDocument?.removeEventListener('mousemove', handleDragMove, true);
+      dragOwnerDocument?.removeEventListener('mouseup', handleDragEnd, true);
+
+      if (isDraggingRef.current) {
+        suppressNextResizeClick(dragOwnerDocument || document);
+        props.model.parent.emitter.emit('onResizeEnd');
+        onDragEnd?.();
+      }
 
-  const handleDragStart = useCallback(
-    (e: React.MouseEvent, type: 'left' | 'right') => {
-      e.preventDefault();
-      e.stopPropagation();
+      isDraggingRef.current = false;
+      dragTypeRef.current = null;
+      dragStartPosRef.current = { x: 0, y: 0 };
+      dragOwnerDocumentRef.current = null;
+    };
+  }, [handleDragMove, handleDragEnd, onDragEnd, props.model]);
 
-      isDraggingRef.current = true;
-      dragTypeRef.current = type;
-      dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+  const handleDragStart = useMemoizedFn((e: React.MouseEvent, type: 'left' | 'right') => {
+    stopResizeInteractionEvent(e);
+    const ownerDocument = e.currentTarget.ownerDocument;
 
-      document.addEventListener('mousemove', handleDragMove);
-      document.addEventListener('mouseup', handleDragEnd);
+    isDraggingRef.current = true;
+    dragTypeRef.current = type;
+    dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+    dragOwnerDocumentRef.current = ownerDocument;
 
-      onDragStart?.();
-    },
-    [handleDragMove, handleDragEnd, onDragStart],
-  );
+    ownerDocument.addEventListener('mousemove', handleDragMove, true);
+    ownerDocument.addEventListener('mouseup', handleDragEnd, true);
+
+    onDragStart?.();
+  });
 
   return (
     <>
@@ -601,6 +670,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         getPopupContainer,
         handleSettingsMenuOpenChange,
         model,
+        modelUid,
         settingsMenuLevel,
         showCopyUidButton,
         showDeleteButton,