From fa60cf0804881464f62c271583cfde348082bc0c Mon Sep 17 00:00:00 2001 From: mcyph <20507948+mcyph@users.noreply.github.com> Date: Fri, 26 Mar 2021 17:13:40 +1100 Subject: [PATCH] added different tabs, dividing examples into categories --- src/pages/PageTabs.js | 50 ++++++++++ src/pages/backgrounds/index.js | 14 +++ src/pages/basic/index.js | 9 ++ src/pages/connections/index.js | 22 +++++ src/pages/dnd_copypaste/index.js | 16 ++++ src/pages/editing/index.js | 8 ++ src/pages/effects/index.js | 16 ++++ src/pages/events/index.js | 14 +++ src/pages/icons_images/index.js | 24 +++++ src/pages/index.js | 143 +---------------------------- src/pages/labels/index.js | 20 ++++ src/pages/layout/index.js | 33 +++++++ src/pages/misc/index.js | 25 +++++ src/pages/printing/index.js | 8 ++ src/pages/shapes_stencils/index.js | 14 +++ src/pages/styles/HoverStyle.js | 2 +- src/pages/styles/index.js | 16 ++++ src/pages/toolbars/index.js | 14 +++ src/pages/windows/index.js | 8 ++ src/pages/xml_json/index.js | 16 ++++ src/pages/zoom_offpage/index.js | 14 +++ 21 files changed, 346 insertions(+), 140 deletions(-) create mode 100644 src/pages/PageTabs.js create mode 100644 src/pages/backgrounds/index.js create mode 100644 src/pages/basic/index.js create mode 100644 src/pages/connections/index.js create mode 100644 src/pages/dnd_copypaste/index.js create mode 100644 src/pages/editing/index.js create mode 100644 src/pages/effects/index.js create mode 100644 src/pages/events/index.js create mode 100644 src/pages/icons_images/index.js create mode 100644 src/pages/labels/index.js create mode 100644 src/pages/layout/index.js create mode 100644 src/pages/misc/index.js create mode 100644 src/pages/printing/index.js create mode 100644 src/pages/shapes_stencils/index.js create mode 100644 src/pages/styles/index.js create mode 100644 src/pages/toolbars/index.js create mode 100644 src/pages/windows/index.js create mode 100644 src/pages/xml_json/index.js create mode 100644 src/pages/zoom_offpage/index.js diff --git a/src/pages/PageTabs.js b/src/pages/PageTabs.js new file mode 100644 index 000000000..39ab4df9c --- /dev/null +++ b/src/pages/PageTabs.js @@ -0,0 +1,50 @@ +import Link from 'next/link'; + +const PageTabs = ({ curPageURL, children }) => { + const allPages = [ + ['/basic', 'Basic'], + ['/backgrounds', 'Backgrounds'], + ['/connections', 'Connections'], + ['/dnd_copypaste', 'Drag-and-drop/copy-paste'], + ['/editing', 'Editing'], + ['/effects', 'Effects'], + ['/events', 'Events'], + ['/icons_images', 'Icons/Images'], + ['/labels', 'Labels'], + ['/layout', 'Layout'], + ['/misc', 'Miscellaneous'], + ['/printing', 'Printing'], + ['/shapes_stencils', 'Shapes/stencils'], + ['/styles', 'Styles'], + ['/toolbars', 'Toolbars'], + ['/windows', 'Windows'], + ['/xml_json', 'XML/JSON'], + ['/zoom_offpage', 'Zoom/offpage'], + ]; + + const tabs = []; + for (const [pageURL, pageName] of allPages) { + tabs.push( +
  • + + {pageName} + +
    • + ); + } + + return ( +
    +

    mxGraph Reloaded Examples

    + + {children} +
    + ); +}; + +export default PageTabs; diff --git a/src/pages/backgrounds/index.js b/src/pages/backgrounds/index.js new file mode 100644 index 000000000..4310024a0 --- /dev/null +++ b/src/pages/backgrounds/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Grid from './Grid'; +import Preview from '../Previews'; +import ExtendCanvas from './ExtendCanvas'; +import PageTabs from "../PageTabs"; + +export default function _Backgrounds() { + return ( + + } /> + } /> + + ); +} diff --git a/src/pages/basic/index.js b/src/pages/basic/index.js new file mode 100644 index 000000000..2f7145032 --- /dev/null +++ b/src/pages/basic/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import HelloWorld from "./HelloWorld"; +import Preview from "../Previews"; +import PageTabs from "../PageTabs"; + +export default function _Basic() { + {/* } /> */} + return } />; +} diff --git a/src/pages/connections/index.js b/src/pages/connections/index.js new file mode 100644 index 000000000..e8cfc94b3 --- /dev/null +++ b/src/pages/connections/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import Preview from '../Previews'; +import Anchors from './Anchors'; +import EdgeTolerance from './EdgeTolerance'; +import FixedPoints from './FixedPoints'; +import HelloPort from './HelloPort'; +import Orthogonal from './Orthogonal'; +import PortRefs from './PortRefs'; +import PageTabs from "../PageTabs"; + +export default function _Connections() { + return ( + + } /> + } /> + } /> + } /> + } /> + } /> + + ); +} diff --git a/src/pages/dnd_copypaste/index.js b/src/pages/dnd_copypaste/index.js new file mode 100644 index 000000000..717f8e326 --- /dev/null +++ b/src/pages/dnd_copypaste/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Preview from '../Previews'; +import Clipboard from './Clipboard'; +import DragSource from './DragSource'; +import Drop from './Drop'; +import PageTabs from "../PageTabs"; + +export default function _DnDCopyPaste() { + return ( + + } /> + } /> + } /> + + ); +} diff --git a/src/pages/editing/index.js b/src/pages/editing/index.js new file mode 100644 index 000000000..f4a528843 --- /dev/null +++ b/src/pages/editing/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import Preview from "../Previews"; +import Editing from "./Editing"; +import PageTabs from "../PageTabs"; + +export default function _Editing() { + return } />; +} diff --git a/src/pages/effects/index.js b/src/pages/effects/index.js new file mode 100644 index 000000000..93aed77dd --- /dev/null +++ b/src/pages/effects/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Animation from './Animation'; +import Preview from '../Previews'; +import Morph from './Morph'; +import Overlays from './Overlays'; +import PageTabs from "../PageTabs"; + +export default function Effects() { + return ( + + } /> + } /> + } /> + + ); +} diff --git a/src/pages/events/index.js b/src/pages/events/index.js new file mode 100644 index 000000000..91ce5650f --- /dev/null +++ b/src/pages/events/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Boundary from './Boundary'; +import Preview from '../Previews'; +import Events from "./Events"; +import PageTabs from "../PageTabs"; + +export default function _Events() { + return ( + + } /> + } /> + + ); +} diff --git a/src/pages/icons_images/index.js b/src/pages/icons_images/index.js new file mode 100644 index 000000000..0f338c125 --- /dev/null +++ b/src/pages/icons_images/index.js @@ -0,0 +1,24 @@ +import React from 'react'; +import ContextIcons from './ContextIcons'; +import Preview from '../Previews'; +import Control from './Control'; +import FixedIcon from './FixedIcon'; +import HoverIcons from './HoverIcons'; +import Images from './Images'; +import Indicators from './Indicators'; +import Markers from './Markers'; +import PageTabs from "../PageTabs"; + +export default function _Backgrounds() { + return ( + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ); +} diff --git a/src/pages/index.js b/src/pages/index.js index f515270d9..eff1f4bdc 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,144 +1,9 @@ import Head from 'next/head'; +import Link from 'next/link'; import styles from '../styles/Home.module.css'; - -import HelloWorld from './basic/HelloWorld'; -import Anchors from './connections/Anchors'; -import AutoLayout from './layout/AutoLayout'; -import Animation from './effects/Animation'; -import Boundary from './events/Boundary'; -import Clipboard from './dnd_copypaste/Clipboard'; -import DragSource from './dnd_copypaste/DragSource'; -import Control from './icons_images/Control'; -import ContextIcons from './icons_images/ContextIcons'; -import Collapse from './layout/Collapse'; -import Constituent from './layout/Constituent'; -import DynamicLoading from './misc/DynamicLoading'; -import Drop from './dnd_copypaste/Drop'; -import DynamicStyle from './styles/DynamicStyle'; -import DynamicToolbar from './toolbars/DynamicToolbar'; -import EdgeTolerance from './connections/EdgeTolerance'; -import Editing from './editing/Editing'; -import Tree from './layout/Tree'; -import Validation from './misc/Validation'; -import SwimLanes from './layout/SwimLanes'; -import Wrapping from './labels/Wrapping'; -// import Windows from "./Windows"; -import Visibility from './misc/Visibility'; -import UserObject from './xml_json/UserObject'; -import Toolbar from './toolbars/Toolbar'; -import Thread from './misc/Thread'; -// import Template from "./Template"; -import Stylesheet from './styles/Stylesheet'; -import Stencils from './shapes_stencils/Stencils'; -import SecondLabel from './labels/SecondLabel'; -import Shape from './shapes_stencils/Shape'; -import Resources from './xml_json/Resources'; -import RadialTreeLayout from './layout/RadialTreeLayout'; -import PortRefs from './connections/PortRefs'; -import Permissions from './misc/Permissions'; -import Perimeter from './labels/Perimeter'; -import PageBreaks from './printing/PageBreaks'; -import Overlays from './effects/Overlays'; -import Orthogonal from './connections/Orthogonal'; -import OrgChart from './layout/OrgChart'; -import OffPage from './zoom_offpage/OffPage'; -import Morph from './effects/Morph'; -import Monitor from './misc/Monitor'; -import Merge from './misc/Merge'; -import Markers from './icons_images/Markers'; -import LOD from './zoom_offpage/LOD'; -import Layers from './layout/Layers'; -import Labels from './labels/Labels'; -import LabelPosition from './labels/LabelPosition'; -import JsonData from './xml_json/JsonData'; -import Indicators from './icons_images/Indicators'; -import Images from './icons_images/Images'; -import HoverIcons from './icons_images/HoverIcons'; -import HoverStyle from './styles/HoverStyle'; -import HierarchicalLayout from './layout/HierarchicalLayout'; -import HelloPort from './connections/HelloPort'; -import Handles from './layout/Handles'; -import Guides from './misc/Guides'; -import Groups from './layout/Groups'; -import Grid from './backgrounds/Grid'; -import Folding from './layout/Folding'; -import FixedPoints from './connections/FixedPoints'; -import FixedIcon from './icons_images/FixedIcon'; -import Preview from './Previews'; +import PageTabs from "./PageTabs"; +import Basic from "./basic"; export default function Home() { - return ( -
    - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* } /> */} - } /> - } /> - {/* } /> */} - } /> - } /> - } /> - - } /> - } /> - } /> - {/* } /> */} - } /> -
    - ); + return ; } diff --git a/src/pages/labels/index.js b/src/pages/labels/index.js new file mode 100644 index 000000000..e7fb2b463 --- /dev/null +++ b/src/pages/labels/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Preview from '../Previews'; +import LabelPosition from './LabelPosition'; +import Perimeter from './Perimeter'; +import SecondLabel from './SecondLabel'; +import Wrapping from './Wrapping'; +import Labels from './Labels'; +import PageTabs from "../PageTabs"; + +export default function _Labels() { + return ( + + } /> + } /> + } /> + } /> + } /> + + ); +} diff --git a/src/pages/layout/index.js b/src/pages/layout/index.js new file mode 100644 index 000000000..f6d1c7353 --- /dev/null +++ b/src/pages/layout/index.js @@ -0,0 +1,33 @@ +import React from 'react'; +import Preview from '../Previews'; +import AutoLayout from './AutoLayout'; +import Collapse from './Collapse'; +import Constituent from './Constituent'; +import Folding from './Folding'; +import Groups from './Groups'; +import Handles from './Handles'; +import Layers from './Layers'; +import OrgChart from './OrgChart'; +import RadialTreeLayout from './RadialTreeLayout'; +import SwimLanes from './SwimLanes'; +import Tree from './Tree'; +import PageTabs from "../PageTabs"; + +export default function _Layout() { + return ( + + } /> + } /> + } /> + } /> + } /> + } /> + {/* } /> */} + } /> + } /> + } /> + } /> + } /> + + ); +} diff --git a/src/pages/misc/index.js b/src/pages/misc/index.js new file mode 100644 index 000000000..a3d45fea1 --- /dev/null +++ b/src/pages/misc/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Preview from '../Previews'; +import Guides from './Guides'; +import Merge from './Merge'; +import Monitor from './Monitor'; +import Permissions from './Permissions'; +import Thread from './Thread'; +import Validation from './Validation'; +import Visibility from './Visibility'; +import PageTabs from "../PageTabs"; + +export default function _Misc() { + return ( + + {/* } /> */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ); +} diff --git a/src/pages/printing/index.js b/src/pages/printing/index.js new file mode 100644 index 000000000..58af823e7 --- /dev/null +++ b/src/pages/printing/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import PageTabs from "../PageTabs"; + +export default function _Printing() { + return ( + {/* } /> */} + ); +} diff --git a/src/pages/shapes_stencils/index.js b/src/pages/shapes_stencils/index.js new file mode 100644 index 000000000..bed085782 --- /dev/null +++ b/src/pages/shapes_stencils/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Preview from '../Previews'; +import Shape from './Shape'; +import Stencils from "./Stencils"; +import PageTabs from "../PageTabs"; + +export default function _ShapesStencils() { + return ( + + } /> + {/*} />*/} + + ); +} diff --git a/src/pages/styles/HoverStyle.js b/src/pages/styles/HoverStyle.js index c136d0e77..b59ac77d6 100644 --- a/src/pages/styles/HoverStyle.js +++ b/src/pages/styles/HoverStyle.js @@ -4,10 +4,10 @@ */ import React from 'react'; -import mxEvent from '../../mxgraph/util/mxEvent'; import mxGraph from '../../mxgraph/view/mxGraph'; import mxRubberband from '../../mxgraph/handler/mxRubberband'; import mxConstants from '../../mxgraph/util/mxConstants'; +import mxUtils from "../../mxgraph/util/mxUtils"; class HoverStyle extends React.Component { constructor(props) { diff --git a/src/pages/styles/index.js b/src/pages/styles/index.js new file mode 100644 index 000000000..3bcc3bf48 --- /dev/null +++ b/src/pages/styles/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Preview from '../Previews'; +import DynamicStyle from './DynamicStyle'; +import HoverStyle from './HoverStyle'; +import Stylesheet from './Stylesheet'; +import PageTabs from "../PageTabs"; + +export default function _Styles() { + return ( + + } /> + } /> + } /> + + ); +} diff --git a/src/pages/toolbars/index.js b/src/pages/toolbars/index.js new file mode 100644 index 000000000..fe4eeb3c9 --- /dev/null +++ b/src/pages/toolbars/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Preview from '../Previews'; +import DynamicToolbar from './DynamicToolbar'; +import Toolbar from './Toolbar'; +import PageTabs from "../PageTabs"; + +export default function _Toolbars() { + return ( + + } /> + } /> + + ); +} diff --git a/src/pages/windows/index.js b/src/pages/windows/index.js new file mode 100644 index 000000000..d726226e5 --- /dev/null +++ b/src/pages/windows/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import Windows from "./Windows"; +import Preview from "../Previews"; +import PageTabs from "../PageTabs"; + +export default function _Windows() { + return } />; +} diff --git a/src/pages/xml_json/index.js b/src/pages/xml_json/index.js new file mode 100644 index 000000000..1dfa57161 --- /dev/null +++ b/src/pages/xml_json/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Preview from '../Previews'; +import JsonData from './JsonData'; +import Resources from './Resources'; +import UserObject from './UserObject'; +import PageTabs from "../PageTabs"; + +export default function _XMLJSON() { + return ( + + } /> + } /> + } /> + + ); +} diff --git a/src/pages/zoom_offpage/index.js b/src/pages/zoom_offpage/index.js new file mode 100644 index 000000000..6a2a18431 --- /dev/null +++ b/src/pages/zoom_offpage/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Preview from '../Previews'; +import LOD from './LOD'; +import OffPage from './OffPage'; +import PageTabs from "../PageTabs"; + +export default function _ZoomOffpage() { + return ( + + } /> + } /> + + ); +}