titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle entering and exiting fullscreen

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:35 +03:00
parent a2aa12f598
commit ef09ded98c
3 changed files with 155 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
src/components/control_panel.jsx
View File

@ -21,6 +21,7 @@ import {
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { toPng, toJpeg, toSvg } from "html-to-image"; import { toPng, toJpeg, toSvg } from "html-to-image";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import { enterFullscreen, exitFullscreen } from "../utils";
export default function ControlPanel(props) { export default function ControlPanel(props) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@ -193,18 +194,7 @@ export default function ControlPanel(props) {
}, },
Fullscreen: { Fullscreen: {
children: [], children: [],
function: () => { function: enterFullscreen,
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
},
}, },
}, },
Logs: { Logs: {
@ -247,9 +237,7 @@ export default function ControlPanel(props) {
return ( return (
<> <>
{props.layout.header && ( {props.layout.header && header()}
header()
)}
<div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none"> <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
<div className="flex justify-start items-center"> <div className="flex justify-start items-center">
{layoutDropdown()} {layoutDropdown()}
@ -396,113 +384,120 @@ export default function ControlPanel(props) {
); );
function header() { function header() {
return <nav className="flex justify-between pt-1 items-center whitespace-nowrap"> return (
<div className="flex justify-start items-center text-slate-800"> <nav className="flex justify-between pt-1 items-center whitespace-nowrap">
<Link to="/"> <div className="flex justify-start items-center text-slate-800">
<img <Link to="/">
width={54} <img
src={icon} width={54}
alt="logo" src={icon}
className="ms-8 min-w-[54px]" /> alt="logo"
</Link> className="ms-8 min-w-[54px]"
<div className="ms-1 mt-1"> />
<div className="text-xl ms-3">Project1 / Untitled</div> </Link>
<div className="flex justify-between items-center"> <div className="ms-1 mt-1">
<div className="flex justify-start text-md select-none me-2"> <div className="text-xl ms-3">Project1 / Untitled</div>
{Object.keys(menu).map((category) => ( <div className="flex justify-between items-center">
<Dropdown <div className="flex justify-start text-md select-none me-2">
key={category} {Object.keys(menu).map((category) => (
position="bottomLeft" <Dropdown
style={{ width: "200px" }} key={category}
render={<Dropdown.Menu> position="bottomLeft"
{Object.keys(menu[category]).map((item, index) => { style={{ width: "200px" }}
if (menu[category][item].children.length > 0) { render={
return ( <Dropdown.Menu>
<Dropdown {Object.keys(menu[category]).map((item, index) => {
style={{ width: "120px" }} if (menu[category][item].children.length > 0) {
key={item} return (
position={"rightTop"} <Dropdown
render={<Dropdown.Menu> style={{ width: "120px" }}
{menu[category][item].children.map( key={item}
(e, i) => ( position={"rightTop"}
<Dropdown.Item render={
key={i} <Dropdown.Menu>
onClick={Object.values(e)[0]} {menu[category][item].children.map(
> (e, i) => (
{Object.keys(e)[0]} <Dropdown.Item
</Dropdown.Item> key={i}
) onClick={Object.values(e)[0]}
)} >
</Dropdown.Menu>} {Object.keys(e)[0]}
> </Dropdown.Item>
)
)}
</Dropdown.Menu>
}
>
<Dropdown.Item
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
onClick={menu[category][item].function}
>
{item}
<IconChevronRight />
</Dropdown.Item>
</Dropdown>
);
}
return (
<Dropdown.Item <Dropdown.Item
style={{ key={index}
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
onClick={menu[category][item].function} onClick={menu[category][item].function}
> >
{item} {item}
<IconChevronRight />
</Dropdown.Item> </Dropdown.Item>
</Dropdown> );
); })}
} </Dropdown.Menu>
return ( }
<Dropdown.Item >
key={index} <div className="px-3 py-1 hover:bg-gray-100 rounded">
onClick={menu[category][item].function} {category}
> </div>
{item} </Dropdown>
</Dropdown.Item> ))}
); </div>
})} <Button size="small" type="tertiary">
</Dropdown.Menu>} Last saved {new Date().toISOString()}
> </Button>
<div className="px-3 py-1 hover:bg-gray-100 rounded">
{category}
</div>
</Dropdown>
))}
</div> </div>
<Button size="small" type="tertiary">
Last saved {new Date().toISOString()}
</Button>
</div> </div>
</div> </div>
</div> <div className="flex justify-around items-center text-md me-8">
<div className="flex justify-around items-center text-md me-8"> <AvatarGroup maxCount={3} size="default">
<AvatarGroup maxCount={3} size="default"> <Avatar color="red" alt="Lisa LeBlanc">
<Avatar color="red" alt="Lisa LeBlanc"> LL
LL </Avatar>
<Avatar color="green" alt="Caroline Xiao">
CX
</Avatar>
<Avatar color="amber" alt="Rafal Matin">
RM
</Avatar>
<Avatar alt="Zank Lance">ZL</Avatar>
<Avatar alt="Youself Zhang">YZ</Avatar>
</AvatarGroup>
<Button
type="primary"
style={{
fontSize: "16px",
marginLeft: "12px",
marginRight: "12px",
}}
size="large"
icon={<IconShareStroked />}
>
Share
</Button>
<Avatar size="default" alt="Buni Zhang">
BZ
</Avatar> </Avatar>
<Avatar color="green" alt="Caroline Xiao"> </div>
CX </nav>
</Avatar> );
<Avatar color="amber" alt="Rafal Matin">
RM
</Avatar>
<Avatar alt="Zank Lance">ZL</Avatar>
<Avatar alt="Youself Zhang">YZ</Avatar>
</AvatarGroup>
<Button
type="primary"
style={{
fontSize: "16px",
marginLeft: "12px",
marginRight: "12px",
}}
size="large"
icon={<IconShareStroked />}
>
Share
</Button>
<Avatar size="default" alt="Buni Zhang">
BZ
</Avatar>
</div>
</nav>;
} }
function layoutDropdown() { function layoutDropdown() {
@ -657,7 +652,26 @@ export default function ControlPanel(props) {
Services Services
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Divider /> <Dropdown.Divider />
<Dropdown.Item icon={<IconCheckboxTick />}> <Dropdown.Item
icon={
props.layout.fullscreen ? (
<IconCheckboxTick />
) : (
<div className="px-2"></div>
)
}
onClick={() => {
if (props.layout.fullscreen) {
exitFullscreen();
} else {
enterFullscreen();
}
props.setLayout((prev) => ({
...prev,
fullscreen: !prev.fullscreen,
}));
}}
>
Fullscreen Fullscreen
</Dropdown.Item> </Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>

1
src/pages/editor.jsx
View File

@ -22,6 +22,7 @@ export default function Editor(props) {
issues: true, issues: true,
editor: true, editor: true,
shapes: true, shapes: true,
fullscreen: false,
}); });
const dragHandler = (e) => { const dragHandler = (e) => {

26
src/utils/index.js Normal file
View File

@ -0,0 +1,26 @@
const enterFullscreen = () => {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
};
export { enterFullscreen, exitFullscreen };