#רינדור 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}
/>

// שימוש במצב תפריט הקשר (קליק ימני)
<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}
/>