60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Alert, Slider } from 'antd';
|
|
import React from 'react';
|
|
|
|
import { cx, css } from '@nocobase/client';
|
|
|
|
import { Branch } from './Branch';
|
|
import { useFlowContext } from './FlowContext';
|
|
import { lang } from './locale';
|
|
import useStyles from './style';
|
|
import { TriggerConfig } from './triggers';
|
|
|
|
export function CanvasContent({ entry }) {
|
|
const { styles } = useStyles();
|
|
const { workflow } = useFlowContext();
|
|
const [zoom, setZoom] = React.useState(100);
|
|
|
|
return (
|
|
<div className="workflow-canvas-wrapper">
|
|
<div className="workflow-canvas" style={{ zoom: zoom / 100 }}>
|
|
<div
|
|
className={cx(
|
|
styles.branchBlockClass,
|
|
css`
|
|
margin-top: 0 !important;
|
|
`,
|
|
)}
|
|
>
|
|
<div className={styles.branchClass}>
|
|
{workflow?.executed ? (
|
|
<Alert
|
|
type="warning"
|
|
message={lang('Executed workflow cannot be modified')}
|
|
showIcon
|
|
className={css`
|
|
margin-bottom: 1em;
|
|
`}
|
|
/>
|
|
) : null}
|
|
<TriggerConfig />
|
|
<div
|
|
className={cx(
|
|
styles.branchBlockClass,
|
|
css`
|
|
margin-top: 0 !important;
|
|
`,
|
|
)}
|
|
>
|
|
<Branch entry={entry} />
|
|
</div>
|
|
<div className={styles.terminalClass}>{lang('End')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="workflow-canvas-zoomer">
|
|
<Slider vertical reverse defaultValue={100} step={10} min={10} value={zoom} onChange={setZoom} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|