From be45d4b22b0e51a065f0d3de0740de60ecc39907 Mon Sep 17 00:00:00 2001 From: hujinwei Date: Wed, 30 Nov 2022 12:00:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0examples=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/demo/dxf_4.html | 4 +- src/App.tsx | 4 + src/pages/demo/index.tsx | 1 + src/pages/examples/index.css | 166 +++++++++++++++++++++++++++++++++++ src/pages/examples/index.tsx | 129 +++++++++++++++++++++++++++ 5 files changed, 302 insertions(+), 2 deletions(-) create mode 100644 src/pages/examples/index.css create mode 100644 src/pages/examples/index.tsx diff --git a/public/demo/dxf_4.html b/public/demo/dxf_4.html index 8f05a12..c2b01f8 100644 --- a/public/demo/dxf_4.html +++ b/public/demo/dxf_4.html @@ -69,8 +69,8 @@ const url1 = "./demo/models/dxf/dxf_3.dxf"; const url2 = "./demo/models/dxf/dxf_3_1.dxf"; - const modelConfig1 = { modelId: "dxf_1", name: "dxf 1", src: url1, ignorePaperSpace: true }; - const modelConfig2 = { modelId: "dxf_2", name: "dxf 2", src: url2, ignorePaperSpace: true }; + const modelConfig1 = { modelId: "dxf_3", name: "dxf 1", src: url1, ignorePaperSpace: true }; + const modelConfig2 = { modelId: "dxf_3_1", name: "dxf 2", src: url2, ignorePaperSpace: true }; const config = { containerId: "myCanvas3", enableAxisGizmo: true, diff --git a/src/App.tsx b/src/App.tsx index 00ab6f2..322d413 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,12 +3,16 @@ import { FC } from 'react'; import { RecoilRoot } from "recoil"; import { Routes, Route } from 'react-router-dom'; import Demo from './pages/demo'; +import Examples from "./pages/examples"; const App: FC = () => { return ( } /> + }> + } /> + ) diff --git a/src/pages/demo/index.tsx b/src/pages/demo/index.tsx index 0e59d4a..fa4d659 100644 --- a/src/pages/demo/index.tsx +++ b/src/pages/demo/index.tsx @@ -2,6 +2,7 @@ import NavMenu, {MenusProp} from "./components/NavMenu/NavMenu"; import CodeEditor from "./components/CodeEditor/CodeEditor"; import {useEffect, useState} from "react"; import "./index.css"; +import { useParams } from "react-router-dom"; function Demo() { diff --git a/src/pages/examples/index.css b/src/pages/examples/index.css new file mode 100644 index 0000000..8071ba7 --- /dev/null +++ b/src/pages/examples/index.css @@ -0,0 +1,166 @@ +.examples { + width: 100%; + height: 100%; + overflow: hidden; + background-color: #000000; +} + +.examples .menu { + position: fixed; + top: 0; + left: -500px; + z-index: 10; + width: 460px; + height: 100%; + padding: 0; + transition: all 300ms ease-in-out; +} + +.examples .menu.open { + left: 0; +} + +.examples .index-button { + position: absolute; + font-size: 38px; + top: 15px; + left: 20px; + text-align: center; + vertical-align: middle; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 10; + transition: all 300ms ease-in-out; + border: 0; + background: transparent; +} + +.examples .index-button.open { + left: 485px; + color: white; +} + +.examples .content-container { + position: absolute; + z-index: 0; + padding: 0; + width: 100%; + height: 100%; + margin: 0 auto; + overflow: hidden; + opacity: 1.0; + pointer-events: all; + transition: all 300ms ease-in-out; + background: lightblue; +} + +.examples .content-container.open { + opacity: 0.4; + pointer-events: none; +} + +.examples .content-container iframe { + width: 100%; + height: 100%; + overflow: hidden; +} + +.examples .content-overlay { + position: absolute; + z-index: 7; + padding: 0; + width: 100%; + height: 100%; + margin: 0 auto; + overflow: hidden; + opacity: 1.0; + pointer-events: none; + transition: all 300ms ease-in-out; +} + +.examples .content-overlay.open { + pointer-events: all; +} + +.examples .page-title { + position: absolute; + font-size: 1.6rem; + top: 25px; + left: 75px; + text-align: left; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 5; + transition: all 300ms ease-in-out; + max-width: calc(100% - 450px); + pointer-events: none; +} + +.examples .page-title.open { + left: 545px; + color: white; +} + +.examples .menu #index { + position: absolute; + width: 100%; + height: 100%; + background: #fdfdfd; + overflow: auto; + border-right: 2px solid #212529; + padding: 20px; + padding-bottom: 100px; + user-select: none; + top: 0; + left: 0; +} + +#index h1 { + margin-top: 0; + margin-bottom: 0; + font-size: 1.8rem; + font-weight: normal; + text-decoration: none !important; +} + +#index h2 { + font-size: 1.4rem; + font-weight: normal; + padding-top: 20px; + padding-bottom: 10px; + text-decoration: none; +} + +#index hr { + display: block; + unicode-bidi: isolate; + margin-block-start: 0.5em; + margin-block-end: 0.5em; + margin-inline-start: auto; + margin-inline-end: auto; + overflow: hidden; + border-style: inset; + border-width: 1px; +} + +#index .link { + margin-left: 0 !important; + padding-left: 0 !important; + padding-top: 1px; + text-decoration: none; + font-weight: normal; + background: #fdfdfd; + cursor: pointer; + line-height: 1.5em; + font-size: 1rem; +} + + +element.style { +} +#index .link:hover { + text-decoration: underline; +} + diff --git a/src/pages/examples/index.tsx b/src/pages/examples/index.tsx new file mode 100644 index 0000000..735e420 --- /dev/null +++ b/src/pages/examples/index.tsx @@ -0,0 +1,129 @@ +import "./index.css"; +import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; +import {useEffect, useRef, useState} from "react"; +import {Routes, Route, Link, useParams} from 'react-router-dom'; + +interface MenuProp { + title: string; + url: string; +} + +interface MenusProp { + title: string; + subMenus: MenuProp[]; +} + +function Examples() { + const [collapsed, setCollapsed] = useState(true); + const [title, setTitle] = useState(""); + const [indexData, setIndexData] = useState([]); + const [data, setData] = useState([]); + const iframeRef = useRef(); + const { id } = useParams(); + + const getCode = (url: string) => { + if (!url) return; + fetch(url, {mode: 'cors'}).then(data => data.text()).then((data) => { + run(data); + }) + } + + const run = (code: string) => { + const preview = document.querySelector("#preview") as HTMLElement; + preview.innerHTML = ""; + iframeRef.current = document.createElement("iframe") as HTMLIFrameElement; + preview.appendChild(iframeRef.current); + if(code) { + iframeRef.current.contentWindow?.document.open(); + iframeRef.current.contentWindow?.document.write(code); + iframeRef.current.contentWindow?.document.close(); + } + } + + useEffect(() => { + fetch("./config.json").then(data => data.json()).then((data) => { + const indexMenus:string[] = []; + data.forEach((menu: MenusProp) => { + indexMenus.push(menu.title); + }); + setIndexData(indexMenus); + setData(data); + }); + }, []) + + useEffect(() => { + if (!id) { + return; + } + const subTitle = id.split("_").join(" ");; + data.forEach((menu: MenusProp) => { + menu.subMenus.forEach((subMenu: MenuProp) => { + if (subMenu.title === subTitle) { + getCode(subMenu.url); + setTitle(subMenu.title); + } + }); + }); + }, [id, data]) + + + const toggleCollapsed = () => { + setCollapsed(!collapsed); + } + + const scrollToTarget = (target: string) => { + const element = document.getElementById(target.split(" ").join("_")); + element?.scrollIntoView(); + }; + + return ( +
+ +
{title}
+
+
+
+
+

Examples

+
+

Index

+
+ { + indexData.map((title: string, index: number) => { + return ( +
scrollToTarget(title)}> + {`${index}....${title}`} +
+ ); + }) + } +
+ { + data.map((menu: MenusProp, index: number) => { + return ( +
+

{`${index}.${menu.title}`}

+
+ { + menu.subMenus.map((subMenu: MenuProp, subIndex: number) => { + return ( +
+ {subMenu.title} +
+ ) + }) + } +
+ ) + }) + } +
+
+
+
+ ) +} + +export default Examples; \ No newline at end of file