added source code toggle control to examples
mcyph
parent
404856f819
commit
f0ec7a3157
|
|
@ -828,6 +828,17 @@
|
|||
"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
|
||||
"dev": true
|
||||
},
|
||||
"clipboard": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
|
||||
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"good-listener": "^1.2.2",
|
||||
"select": "^1.1.2",
|
||||
"tiny-emitter": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
|
@ -1092,6 +1103,12 @@
|
|||
"object-keys": "^1.0.12"
|
||||
}
|
||||
},
|
||||
"delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
|
||||
"optional": true
|
||||
},
|
||||
"depd": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
|
||||
|
|
@ -1974,6 +1991,15 @@
|
|||
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
|
||||
"dev": true
|
||||
},
|
||||
"good-listener": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"delegate": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"graceful-fs": {
|
||||
"version": "4.2.6",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
|
||||
|
|
@ -3108,6 +3134,14 @@
|
|||
"fast-diff": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"prismjs": {
|
||||
"version": "1.23.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
|
||||
"integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
|
||||
"requires": {
|
||||
"clipboard": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
|
||||
|
|
@ -3382,6 +3416,12 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
|
||||
"optional": true
|
||||
},
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
|
|
@ -3770,6 +3810,12 @@
|
|||
"setimmediate": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
|
||||
"optional": true
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
"dependencies": {
|
||||
"next": "10.0.9",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1"
|
||||
"react-dom": "17.0.1",
|
||||
"prismjs": "^1.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ijsto/eslint-config": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import SourceCodeDisplay from './SourceCodeDisplay';
|
||||
import examplesListing from './examplesListing.json';
|
||||
|
||||
function Preview({ sourceKey, content }) {
|
||||
const [sourceShown, setSourceShown] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{content}
|
||||
|
||||
{sourceShown ? (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => setSourceShown(false)}
|
||||
style={{ float: 'right', color: 'blue', cursor: 'pointer' }}
|
||||
>
|
||||
hide source
|
||||
</span>
|
||||
<div style={{clear: "both", resize: "both", maxHeight: "50vh", overflow: "auto"}}>
|
||||
<SourceCodeDisplay language="javascript" code={examplesListing[sourceKey]} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => setSourceShown(true)}
|
||||
style={{ float: 'right', color: 'blue', cursor: 'pointer' }}
|
||||
>
|
||||
show source
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Preview;
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import { Component } from 'react';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/themes/prism-okaidia.css';
|
||||
import 'prismjs/components/prism-markup-templating';
|
||||
import 'prismjs/components/prism-handlebars.min.js';
|
||||
import 'prismjs/components/prism-lua.min.js';
|
||||
import 'prismjs/components/prism-c.min.js';
|
||||
import 'prismjs/components/prism-cpp.min.js';
|
||||
import 'prismjs/components/prism-ruby.min.js';
|
||||
import 'prismjs/components/prism-java.min.js';
|
||||
import 'prismjs/components/prism-javascript.min.js';
|
||||
import 'prismjs/components/prism-bash.min.js';
|
||||
import 'prismjs/components/prism-csharp.min.js';
|
||||
import 'prismjs/components/prism-css.min.js';
|
||||
import 'prismjs/components/prism-typescript.min.js';
|
||||
import 'prismjs/components/prism-yaml.min.js';
|
||||
import 'prismjs/components/prism-json.min.js';
|
||||
import 'prismjs/components/prism-swift.min.js';
|
||||
import 'prismjs/components/prism-jsx.min.js';
|
||||
import 'prismjs/components/prism-dart.min.js';
|
||||
import 'prismjs/components/prism-sql.min.js';
|
||||
import 'prismjs/components/prism-rust.min.js';
|
||||
import 'prismjs/components/prism-php.min.js';
|
||||
import 'prismjs/components/prism-perl.min.js';
|
||||
import 'prismjs/components/prism-go.min.js';
|
||||
import 'prismjs/components/prism-docker.min.js';
|
||||
import 'prismjs/components/prism-python.min.js';
|
||||
|
||||
// Adapted from
|
||||
// https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/
|
||||
|
||||
export class SourceCodeDisplay extends Component {
|
||||
/**
|
||||
*
|
||||
* @param code
|
||||
* @param plugins
|
||||
* @param language
|
||||
*/
|
||||
constructor({ code, plugins, language, theme, style }) {
|
||||
if (plugins == null) {
|
||||
plugins = ['line-numbers', 'show-language'];
|
||||
}
|
||||
super({ code, plugins, language, theme, style });
|
||||
}
|
||||
|
||||
render() {
|
||||
// TODO: Support theme!!!
|
||||
return (
|
||||
<>
|
||||
<pre
|
||||
className={this.props.plugins ? this.props.plugins.join(' ') : ''}
|
||||
style={this.props.style}
|
||||
>
|
||||
<code
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
className={`language-${this.props.language}`}
|
||||
>
|
||||
{this.props.code.trim()}
|
||||
</code>
|
||||
</pre>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.el) {
|
||||
Prism.highlightElement(this.el);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.el) {
|
||||
Prism.highlightElement(this.el);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SourceCodeDisplay;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import json
|
||||
import pathlib
|
||||
|
||||
out = {}
|
||||
for js_path in pathlib.Path('').rglob('*.js'):
|
||||
print(js_path)
|
||||
out[js_path.name.rpartition('.')[0]] = js_path.read_text(encoding='utf-8')
|
||||
|
||||
with open("examplesListing.json", "w", encoding="utf-8") as f:
|
||||
f.write(json.dumps(out, ensure_ascii=False, indent=2))
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -2,142 +2,143 @@ import Head from 'next/head';
|
|||
import styles from '../styles/Home.module.css';
|
||||
|
||||
import HelloWorld from './HelloWorld';
|
||||
import Anchors from "./Anchors";
|
||||
import AutoLayout from "./AutoLayout";
|
||||
import Animation from "./Animation";
|
||||
import Boundary from "./Boundary";
|
||||
import Clipboard from "./Clipboard";
|
||||
import DragSource from "./DragSource";
|
||||
import Control from "./Control";
|
||||
import ContextIcons from "./ContextIcons";
|
||||
import Collapse from "./Collapse";
|
||||
import Constituent from "./Constituent";
|
||||
import DynamicLoading from "./DynamicLoading";
|
||||
import Drop from "./Drop";
|
||||
import DynamicStyle from "./DynamicStyle";
|
||||
import DynamicToolbar from "./DynamicToolbar";
|
||||
import EdgeTolerance from "./EdgeTolerance";
|
||||
import Editing from "./Editing";
|
||||
import Tree from "./Tree";
|
||||
import Validation from "./Validation";
|
||||
import SwimLanes from "./SwimLanes";
|
||||
import Wrapping from "./Wrapping";
|
||||
//import Windows from "./Windows";
|
||||
import Visibility from "./Visibility";
|
||||
import UserObject from "./UserObject";
|
||||
import Toolbar from "./Toolbar";
|
||||
import Thread from "./Thread";
|
||||
//import Template from "./Template";
|
||||
import Stylesheet from "./Stylesheet";
|
||||
import Stencils from "./Stencils";
|
||||
import SecondLabel from "./SecondLabel";
|
||||
import Shape from "./Shape";
|
||||
import Resources from "./Resources";
|
||||
import RadialTreeLayout from "./RadialTreeLayout";
|
||||
import PortRefs from "./PortRefs";
|
||||
import Permissions from "./Permissions";
|
||||
import Perimeter from "./Perimeter";
|
||||
import PageBreaks from "./PageBreaks";
|
||||
import Overlays from "./Overlays";
|
||||
import Orthogonal from "./Orthogonal";
|
||||
import OrgChart from "./OrgChart";
|
||||
import OffPage from "./OffPage";
|
||||
import Morph from "./Morph";
|
||||
import Monitor from "./Monitor";
|
||||
import Merge from "./Merge";
|
||||
import Markers from "./Markers";
|
||||
import LOD from "./LOD";
|
||||
import Layers from "./Layers";
|
||||
import Labels from "./Labels";
|
||||
import LabelPosition from "./LabelPosition";
|
||||
import JsonData from "./JsonData";
|
||||
import Indicators from "./Indicators";
|
||||
import Images from "./Images";
|
||||
import HoverIcons from "./HoverIcons";
|
||||
import HoverStyle from "./HoverStyle";
|
||||
import HierarchicalLayout from "./HierarchicalLayout";
|
||||
import HelloPort from "./HelloPort";
|
||||
import Handles from "./Handles";
|
||||
import Guides from "./Guides";
|
||||
import Groups from "./Groups";
|
||||
import Grid from "./Grid";
|
||||
import Folding from "./Folding";
|
||||
import FixedPoints from "./FixedPoints";
|
||||
import FixedIcon from "./FixedIcon";
|
||||
import Anchors from './Anchors';
|
||||
import AutoLayout from './AutoLayout';
|
||||
import Animation from './Animation';
|
||||
import Boundary from './Boundary';
|
||||
import Clipboard from './Clipboard';
|
||||
import DragSource from './DragSource';
|
||||
import Control from './Control';
|
||||
import ContextIcons from './ContextIcons';
|
||||
import Collapse from './Collapse';
|
||||
import Constituent from './Constituent';
|
||||
import DynamicLoading from './DynamicLoading';
|
||||
import Drop from './Drop';
|
||||
import DynamicStyle from './DynamicStyle';
|
||||
import DynamicToolbar from './DynamicToolbar';
|
||||
import EdgeTolerance from './EdgeTolerance';
|
||||
import Editing from './Editing';
|
||||
import Tree from './Tree';
|
||||
import Validation from './Validation';
|
||||
import SwimLanes from './SwimLanes';
|
||||
import Wrapping from './Wrapping';
|
||||
// import Windows from "./Windows";
|
||||
import Visibility from './Visibility';
|
||||
import UserObject from './UserObject';
|
||||
import Toolbar from './Toolbar';
|
||||
import Thread from './Thread';
|
||||
// import Template from "./Template";
|
||||
import Stylesheet from './Stylesheet';
|
||||
import Stencils from './Stencils';
|
||||
import SecondLabel from './SecondLabel';
|
||||
import Shape from './Shape';
|
||||
import Resources from './Resources';
|
||||
import RadialTreeLayout from './RadialTreeLayout';
|
||||
import PortRefs from './PortRefs';
|
||||
import Permissions from './Permissions';
|
||||
import Perimeter from './Perimeter';
|
||||
import PageBreaks from './PageBreaks';
|
||||
import Overlays from './Overlays';
|
||||
import Orthogonal from './Orthogonal';
|
||||
import OrgChart from './OrgChart';
|
||||
import OffPage from './OffPage';
|
||||
import Morph from './Morph';
|
||||
import Monitor from './Monitor';
|
||||
import Merge from './Merge';
|
||||
import Markers from './Markers';
|
||||
import LOD from './LOD';
|
||||
import Layers from './Layers';
|
||||
import Labels from './Labels';
|
||||
import LabelPosition from './LabelPosition';
|
||||
import JsonData from './JsonData';
|
||||
import Indicators from './Indicators';
|
||||
import Images from './Images';
|
||||
import HoverIcons from './HoverIcons';
|
||||
import HoverStyle from './HoverStyle';
|
||||
import HierarchicalLayout from './HierarchicalLayout';
|
||||
import HelloPort from './HelloPort';
|
||||
import Handles from './Handles';
|
||||
import Guides from './Guides';
|
||||
import Groups from './Groups';
|
||||
import Grid from './Grid';
|
||||
import Folding from './Folding';
|
||||
import FixedPoints from './FixedPoints';
|
||||
import FixedIcon from './FixedIcon';
|
||||
import Preview from './Previews';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '900px',
|
||||
margin: '0 auto'
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<HelloWorld />
|
||||
<Anchors />
|
||||
<AutoLayout />
|
||||
<Animation />
|
||||
<Boundary />
|
||||
<Clipboard />
|
||||
<ContextIcons />
|
||||
<Collapse />
|
||||
<Constituent />
|
||||
<ContextIcons />
|
||||
<Control />
|
||||
<DragSource />
|
||||
<Drop />
|
||||
{/*<DynamicLoading />*/}
|
||||
<DynamicStyle />
|
||||
<DynamicToolbar />
|
||||
<EdgeTolerance />
|
||||
<Editing />
|
||||
<FixedIcon />
|
||||
<FixedPoints />
|
||||
<Folding />
|
||||
<Grid />
|
||||
<Groups />
|
||||
<Guides />
|
||||
<Handles />
|
||||
<HelloPort />
|
||||
{/*<HierarchicalLayout />*/}
|
||||
<HoverStyle />
|
||||
<HoverIcons />
|
||||
<Images />
|
||||
<Indicators />
|
||||
<JsonData />
|
||||
<LabelPosition />
|
||||
<Labels />
|
||||
<Layers />
|
||||
<LOD />
|
||||
<Markers />
|
||||
<Merge />
|
||||
<Monitor />
|
||||
<Morph />
|
||||
<OffPage />
|
||||
<OrgChart />
|
||||
<Orthogonal />
|
||||
<Overlays />
|
||||
{/*<PageBreaks />*/}
|
||||
<Perimeter />
|
||||
<Permissions />
|
||||
<PortRefs />
|
||||
<RadialTreeLayout />
|
||||
<Resources />
|
||||
<SecondLabel />
|
||||
<Shape />
|
||||
{/*<Stencils />*/}
|
||||
<Stylesheet />
|
||||
<SwimLanes />
|
||||
{/*<Template />*/}
|
||||
<Thread />
|
||||
<Toolbar />
|
||||
<Tree />
|
||||
<Preview sourceKey="HelloWorld" content={<HelloWorld />} />
|
||||
<Preview sourceKey="Anchors" content={<Anchors />} />
|
||||
<Preview sourceKey="AutoLayout" content={<AutoLayout />} />
|
||||
<Preview sourceKey="Animation" content={<Animation />} />
|
||||
<Preview sourceKey="Boundary" content={<Boundary />} />
|
||||
<Preview sourceKey="Clipboard" content={<Clipboard />} />
|
||||
<Preview sourceKey="ContextIcons" content={<ContextIcons />} />
|
||||
<Preview sourceKey="Collapse" content={<Collapse />} />
|
||||
<Preview sourceKey="Constituent" content={<Constituent />} />
|
||||
<Preview sourceKey="ContextIcons" content={<ContextIcons />} />
|
||||
<Preview sourceKey="Control" content={<Control />} />
|
||||
<Preview sourceKey="DragSource" content={<DragSource />} />
|
||||
<Preview sourceKey="Drop" content={<Drop />} />
|
||||
{/* <Preview sourceKey="DynamicLoading" content={<DynamicLoading />} /> */}
|
||||
<Preview sourceKey="DynamicStyle" content={<DynamicStyle />} />
|
||||
<Preview sourceKey="DynamicToolbar" content={<DynamicToolbar />} />
|
||||
<Preview sourceKey="EdgeTolerance" content={<EdgeTolerance />} />
|
||||
<Preview sourceKey="Editing" content={<Editing />} />
|
||||
<Preview sourceKey="FixedIcon" content={<FixedIcon />} />
|
||||
<Preview sourceKey="FixedPoints" content={<FixedPoints />} />
|
||||
<Preview sourceKey="Folding" content={<Folding />} />
|
||||
<Preview sourceKey="Grid" content={<Grid />} />
|
||||
<Preview sourceKey="Groups" content={<Groups />} />
|
||||
<Preview sourceKey="Guides" content={<Guides />} />
|
||||
<Preview sourceKey="Handles" content={<Handles />} />
|
||||
<Preview sourceKey="HelloPort" content={<HelloPort />} />
|
||||
{/* <Preview sourceKey="HierarchicalLayout" content={<HierarchicalLayout />} /> */}
|
||||
<Preview sourceKey="HoverStyle" content={<HoverStyle />} />
|
||||
<Preview sourceKey="HoverIcons" content={<HoverIcons />} />
|
||||
<Preview sourceKey="Images" content={<Images />} />
|
||||
<Preview sourceKey="Indicators" content={<Indicators />} />
|
||||
<Preview sourceKey="JsonData" content={<JsonData />} />
|
||||
<Preview sourceKey="LabelPosition" content={<LabelPosition />} />
|
||||
<Preview sourceKey="Labels" content={<Labels />} />
|
||||
<Preview sourceKey="Layers" content={<Layers />} />
|
||||
<Preview sourceKey="LOD" content={<LOD />} />
|
||||
<Preview sourceKey="Markers" content={<Markers />} />
|
||||
<Preview sourceKey="Merge" content={<Merge />} />
|
||||
<Preview sourceKey="Monitor" content={<Monitor />} />
|
||||
<Preview sourceKey="Morph" content={<Morph />} />
|
||||
<Preview sourceKey="OffPage" content={<OffPage />} />
|
||||
<Preview sourceKey="OrgChart" content={<OrgChart />} />
|
||||
<Preview sourceKey="Orthogonal" content={<Orthogonal />} />
|
||||
<Preview sourceKey="Overlays" content={<Overlays />} />
|
||||
{/* <Preview sourceKey="PageBreaks" content={<PageBreaks />} /> */}
|
||||
<Preview sourceKey="Perimeter" content={<Perimeter />} />
|
||||
<Preview sourceKey="Permissions" content={<Permissions />} />
|
||||
<Preview sourceKey="PortRefs" content={<PortRefs />} />
|
||||
<Preview sourceKey="RadialTreeLayout" content={<RadialTreeLayout />} />
|
||||
<Preview sourceKey="Resources" content={<Resources />} />
|
||||
<Preview sourceKey="SecondLabel" content={<SecondLabel />} />
|
||||
<Preview sourceKey="Shape" content={<Shape />} />
|
||||
{/* <Preview sourceKey="Stencils" content={<Stencils />} /> */}
|
||||
<Preview sourceKey="Stylesheet" content={<Stylesheet />} />
|
||||
<Preview sourceKey="SwimLanes" content={<SwimLanes />} />
|
||||
{/* <Preview sourceKey="Template" content={<Template />} /> */}
|
||||
<Preview sourceKey="Thread" content={<Thread />} />
|
||||
<Preview sourceKey="Toolbar" content={<Toolbar />} />
|
||||
<Preview sourceKey="Tree" content={<Tree />} />
|
||||
|
||||
<UserObject />
|
||||
<Validation />
|
||||
<Visibility />
|
||||
{/*<Windows />*/}
|
||||
<Wrapping />
|
||||
<Preview sourceKey="UserObject" content={<UserObject />} />
|
||||
<Preview sourceKey="Validation" content={<Validation />} />
|
||||
<Preview sourceKey="Visibility" content={<Visibility />} />
|
||||
{/* <Preview sourceKey="Windows" content={<Windows />} /> */}
|
||||
<Preview sourceKey="Wrapping" content={<Wrapping />} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue