mirror of https://gitee.com/cf-fz/WebCAD.git
!2286 看图王添加隐藏抽屉功能, 页面布局修改
j787701730
1 year ago
committed by
ChenX
parent
b53d7f2434
commit
9db05fde2c
@ -1,65 +0,0 @@
|
||||
import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
|
||||
import { ShareViewStore } from "../ShareViewStore";
|
||||
import { ExplosionView } from "../ShareViewUtil";
|
||||
|
||||
interface IProps
|
||||
{
|
||||
ref: React.Ref<any>;
|
||||
loading: (val: boolean) => void;
|
||||
reset: () => void;
|
||||
|
||||
}
|
||||
|
||||
const ExplosionMapWidget: React.FC<IProps> = forwardRef((props, ref) =>
|
||||
{
|
||||
const [state, setState] = useState(false);
|
||||
const loadingRef = useRef(false);
|
||||
const shareViewStore: ShareViewStore = ShareViewStore.GetInstance();
|
||||
|
||||
async function changeDoorState(num: number)
|
||||
{
|
||||
for (const i of shareViewStore.CurSelectCabinetIndexs)
|
||||
{
|
||||
await ExplosionView(i, num);
|
||||
}
|
||||
}
|
||||
|
||||
async function openOrClose()
|
||||
{
|
||||
shareViewStore.SelectedBoard = null;
|
||||
if (loadingRef.current) return;
|
||||
props.loading(true);
|
||||
loadingRef.current = true;
|
||||
await props.reset();
|
||||
if (state)
|
||||
{
|
||||
await changeDoorState(400);
|
||||
} else
|
||||
{
|
||||
await changeDoorState(-400);
|
||||
}
|
||||
|
||||
setState(!state);
|
||||
props.loading(false);
|
||||
loadingRef.current = false;
|
||||
}
|
||||
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
reset: async () =>
|
||||
{
|
||||
if (state)
|
||||
{
|
||||
changeDoorState(400);
|
||||
setState(!state);
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
return (
|
||||
<div onClick={openOrClose} className={`${state ? 'active' : ''}`}>{state ? '聚合图' : '爆炸图'}</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default ExplosionMapWidget;
|
||||
@ -0,0 +1,53 @@
|
||||
.HideComponentsMenu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 44px;
|
||||
background-color: var(--btn-background-color);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
transition: transform var(--transitionTime), opacity var(--transitionTime), visibility var(--transitionTime);
|
||||
pointer-events: none;
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
>div::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
transform: scaleY(0.5);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
>div:last-child::after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
>div:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
import { Observer } from 'mobx-react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { ShareViewStore } from '../../ShareViewStore';
|
||||
import './index.less';
|
||||
|
||||
interface IProps
|
||||
{
|
||||
/** 显示隐藏 门板抽屉 */
|
||||
doorOrDrawerShowOrHide: (isDoor: boolean) => void;
|
||||
/** 爆炸图 */
|
||||
changeExplosion: () => void;
|
||||
}
|
||||
|
||||
const HideComponentsMenu: React.FC<IProps> = (props) =>
|
||||
{
|
||||
const shareViewStore: ShareViewStore = ShareViewStore.GetInstance();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const selectDivRef = useRef();
|
||||
|
||||
const hideSelect = (e: Event) =>
|
||||
{
|
||||
if (e.target != selectDivRef.current)
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
document.addEventListener('click', hideSelect, false);
|
||||
document.addEventListener('touchstart', hideSelect, false);
|
||||
document.addEventListener('mousedown', hideSelect, false);
|
||||
|
||||
return () =>
|
||||
{
|
||||
document.removeEventListener('click', hideSelect, false);
|
||||
document.removeEventListener('touchstart', hideSelect, false);
|
||||
document.removeEventListener('mousedown', hideSelect, false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={selectDivRef}
|
||||
style={{ position: "relative" }}
|
||||
onClick={() => setVisible(!visible)}
|
||||
>
|
||||
隐藏组件
|
||||
<div className={`HideComponentsMenu ${visible ? 'open' : ''}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onTouchStart={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Observer>
|
||||
{
|
||||
() => (
|
||||
<>
|
||||
<div
|
||||
onClick={() =>
|
||||
{
|
||||
props.changeExplosion();
|
||||
}}
|
||||
>{shareViewStore.operations.showExplosion ? '聚合图' : '爆炸图'}</div>
|
||||
<div
|
||||
onClick={() =>
|
||||
{
|
||||
props.doorOrDrawerShowOrHide(true);
|
||||
}}>{shareViewStore.operations.showDoor ? '隐藏' : '显示'}门板</div>
|
||||
<div
|
||||
onClick={() =>
|
||||
{
|
||||
props.doorOrDrawerShowOrHide(false);
|
||||
}}>{shareViewStore.operations.showDrawer ? '隐藏' : '显示'}抽屉</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Observer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HideComponentsMenu;
|
||||
Loading…
Reference in new issue