-
Notifications
You must be signed in to change notification settings - Fork 24
/
ModelDesignOutline.tsx
40 lines (35 loc) · 1.36 KB
/
ModelDesignOutline.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { useContext } from 'react';
import { usePanelModel } from '../../hook/usePanelModel';
import { useFWHeaderSlot, useForceUpdate, useListen } from '../../../common';
import { XREditorContext } from '../../XREditorContext';
import { LightTree } from '../../../common/component/LightTree';
import { Header } from './Header';
import { ModelDesignOutlineModel } from './ModelDesignOutlineModel';
export interface IModelDesignOutlineProps {
className?: string;
style?: React.CSSProperties;
}
export const ModelDesignOutline = ({ className, style }: IModelDesignOutlineProps) => {
const fu = useForceUpdate();
const ctx = useContext(XREditorContext);
const headerSlot = useFWHeaderSlot();
const model = usePanelModel<ModelDesignOutlineModel>('ModelDesignOutline');
useListen(model.event, 'afterStateChange', fu.update);
useListen(model.project.event, 'afterActiveSceneChange', fu.update);
const outline = model.outline;
if (!outline) return null;
return (
<>
{headerSlot(<Header model={model} />)}
<div
data-name='ModelDesignOutline'
className={className}
style={{ position: 'relative', height: '100%', width: '100%', ...style }}
onDragOver={ev => ev.preventDefault()}
onDrop={ev => ctx.project.activeScene?.processFileDrop(ev)}
>
<LightTree model={outline} />
</div>
</>
);
};