#عرض FlowModel

import { FlowModelRenderer } from '@nocobase/flow-engine';

// الاستخدام الأساسي
<FlowModelRenderer model={myModel} />

import { FieldModelRenderer } from '@nocobase/flow-engine';

// عرض الحقول المتحكَّم بها
<FieldModelRenderer model={fieldModel} />

showFlowSettings={{
  showBackground: true,    // إظهار الخلفية
  showBorder: true,        // إظهار الحدود
  showDragHandle: true,    // إظهار مقبض السحب
  style: {},              // نمط شريط الأدوات المخصص
  toolbarPosition: 'inside' // موضع شريط الأدوات: 'inside' | 'above' | 'below'
}}

import { FlowModelRenderer } from '@nocobase/flow-engine';

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>جاري التحميل...</div>}
    />
  );
}

// إظهار الإعدادات ولكن إخفاء زر الإزالة
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// إظهار الإعدادات والعنوان
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// استخدام وضع قائمة السياق (context menu)
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'إجراء مخصص',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('إجراء مخصص');
      }
    }
  ]}
/>

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
  showErrorFallback={false}
/>

import { FieldModelRenderer } from '@nocobase/flow-engine';

function FormField({ model, onChange, ...props }) {
  return (
    <FieldModelRenderer
      model={model}
      onChange={onChange}
      {...props}
    />
  );
}

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>فشل العرض، يرجى المحاولة مرة أخرى</div>}
/>

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
/>