@/utils#deepCopy TypeScript Examples
The following examples show how to use
@/utils#deepCopy.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.tsx From ant-simple-draw with MIT License | 5 votes |
App: FC = () => {
const { allModuleConfigList } = useGetCompentConfigList();
const { decompose } = useEdit();
const dispatch = useDispatch();
const [isClickComponent, curComponent] = useSelector(
createSelector([(state: storeType) => state.component], (component) => {
return [component.isClickComponent, component.curComponent] as const;
}),
);
const handleDrop: React.DragEventHandler<HTMLDivElement> = async (e) => {
e.preventDefault();
e.stopPropagation();
const id = e.dataTransfer.getData('id');
const rectInfo = $('#editor').getBoundingClientRect();
if (id) {
const component = deepCopy(
getSingleArrayVal<templateDateInterface>(allModuleConfigList, 'id', id),
) as templateDataType;
component.style!.top = e.clientY - rectInfo.y;
component.style!.left = e.clientX - rectInfo.x;
component.propValue.x = component.style!.left;
component.propValue.y = component.style!.top;
component.componentId = getRandomStr();
dispatch(addComponent(component));
dispatch(recordSnapshot());
}
};
const handleDragOver: React.DragEventHandler<HTMLDivElement> = (e) => {
e.preventDefault();
// console.log(`onDragOver------`, e);
};
const handleMouseUp: React.MouseEventHandler<HTMLDivElement> = (e) => {
// 这里点击空白区域的时候,不选中组件,且按键不显示
if (!isClickComponent) {
if (curComponent && curComponent.component === 'Group') {
decompose(curComponent, [curComponent.componentId!]);
}
dispatch(curComponentAction(null));
}
if (e.button !== 2) {
dispatch(hideContextMenuAction());
}
};
return (
<>
<Toolbar />
<div className={styles.main}>
<div className={styles.left}>
<SliderNav />
</div>
<div className={styles.center}>
<div
className={styles.content}
onDrop={handleDrop}
onDragOver={handleDragOver}
onMouseDown={(e) => {
dispatch(isClickComponentAction(false));
}}
onMouseUp={handleMouseUp}
>
<Edit />
</div>
</div>
<div className={styles.right}>
<Attr />
</div>
</div>
</>
);
}