From 7bea7945987c3011074daa4fc1068343e7d3bd09 Mon Sep 17 00:00:00 2001 From: Himenon <6715229+Himenon@users.noreply.github.com> Date: Tue, 11 Feb 2020 22:20:11 +0900 Subject: [PATCH 1/3] docs: update license file --- packages/cli/LICENSE | 31 +++++++++++++++---------------- packages/view/LICENSE | 31 +++++++++++++++---------------- 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/packages/cli/LICENSE b/packages/cli/LICENSE index 9cede8f..c697cf3 100644 --- a/packages/cli/LICENSE +++ b/packages/cli/LICENSE @@ -2,21 +2,20 @@ MIT License Copyright (c) 2020 Himenon -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/view/LICENSE b/packages/view/LICENSE index 9cede8f..c697cf3 100644 --- a/packages/view/LICENSE +++ b/packages/view/LICENSE @@ -2,21 +2,20 @@ MIT License Copyright (c) 2020 Himenon -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From a10d05c52e51f9c8dfbd34839e56934c402b8446 Mon Sep 17 00:00:00 2001 From: Himenon <6715229+Himenon@users.noreply.github.com> Date: Tue, 11 Feb 2020 23:46:24 +0900 Subject: [PATCH 2/3] feat: add react-zoom-pan-pinch --- packages/view/package.json | 1 + packages/view/src/component/Editor/Editor.tsx | 43 ++++++++-------- .../view/src/component/Editor/editor.scss | 49 ++++++++++++++++++- .../view/src/component/FileTree/FileTree.tsx | 12 ++--- .../view/src/component/FileTree/SideNav.tsx | 10 ++-- .../src/component/FileTree/file_tree.scss | 7 +++ .../GraphvizViewer/GraphvizViewer.tsx | 24 ++++++--- .../GraphvizViewer/graphviz_viewer.scss | 7 +++ packages/view/src/component/index.ts | 5 +- yarn.lock | 5 ++ 10 files changed, 115 insertions(+), 48 deletions(-) create mode 100644 packages/view/src/component/FileTree/file_tree.scss create mode 100644 packages/view/src/component/GraphvizViewer/graphviz_viewer.scss diff --git a/packages/view/package.json b/packages/view/package.json index 2e3e81f..7096f9a 100644 --- a/packages/view/package.json +++ b/packages/view/package.json @@ -36,6 +36,7 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", + "react-zoom-pan-pinch": "^1.6.1", "urljoin": "^0.1.5", "viz.js": "^2.1.2" }, diff --git a/packages/view/src/component/Editor/Editor.tsx b/packages/view/src/component/Editor/Editor.tsx index 6e9fb8a..7dd8061 100644 --- a/packages/view/src/component/Editor/Editor.tsx +++ b/packages/view/src/component/Editor/Editor.tsx @@ -1,9 +1,21 @@ import * as React from "react"; import * as ErrorBoundary from "../ErrorBoundary/ErrorBoundary"; import * as GraphvizViewer from "../GraphvizViewer/GraphvizViewer"; -import * as FileTree from "../FileTree/FileTree"; +import * as FileTree from "../FileTree/SideNav"; import "./editor.scss"; +interface ClassName { + editor?: string; + sideNavigation?: string; + fileTree?: string; + editorContainer?: string; + title?: string; + titleText?: string; + graphvizViewer?: string; +} + +const className: ClassName = require("./editor.scss"); + interface EditorProps extends React.DetailedHTMLProps, HTMLDivElement> { graphvizViewer: GraphvizViewer.Props; fileTree: FileTree.Props; @@ -13,30 +25,15 @@ interface EditorProps extends React.DetailedHTMLProps { return ( -
-
-
- -
+
+
+
-
-
-

{current}

-
-
-
- -
+
+
+

{current}

+
diff --git a/packages/view/src/component/Editor/editor.scss b/packages/view/src/component/Editor/editor.scss index 62f0713..e8c03d8 100644 --- a/packages/view/src/component/Editor/editor.scss +++ b/packages/view/src/component/Editor/editor.scss @@ -1,2 +1,47 @@ -// @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i"); -// @import url("https://rsms.me/inter/inter-ui.css"); +.editor { + background-color: #fafbfd; + display: flex; +} + +.side-navigation { + margin-right: 24px; + min-width: 192px; + flex: 0 1 0%; +} + +.file-tree { + position: absolute; + width: 192px; + bottom: 0; + top: 8px; + overflow-y: scroll; +} + +.editor-container { + display: flex; + flex: 1 1 100%; + flex-direction: column; +} + +.title { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 16px; +} + +.title-text { + color: #343741; + font-size: 16px; +} + +.graphviz-viewer { + padding: 24px; + box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); + background-color: #fff; + border-radius: 4px; + border: 1px solid #d3dae6; + flex-grow: 1; + min-width: 500px; + min-height: 100%; +} diff --git a/packages/view/src/component/FileTree/FileTree.tsx b/packages/view/src/component/FileTree/FileTree.tsx index dc75c0b..427e1e9 100644 --- a/packages/view/src/component/FileTree/FileTree.tsx +++ b/packages/view/src/component/FileTree/FileTree.tsx @@ -1,22 +1,16 @@ import * as React from "react"; import * as SideNav from "./SideNav"; -import * as SideNavItem from "./SideNavItem"; export interface FileTreeProps { - items: SideNavItem.Props[]; + sideNav: SideNav.Props; } export interface SelectedState { [key: string]: boolean | undefined; } -export interface RewriteProps { - state: SelectedState; - updateSelectedValue: (key: string) => void; -} - -export const FileTree = ({ items }: FileTreeProps) => { - return ; +export const FileTree = ({ sideNav }: FileTreeProps) => { + return ; }; export { FileTreeProps as Props, FileTree as Component }; diff --git a/packages/view/src/component/FileTree/SideNav.tsx b/packages/view/src/component/FileTree/SideNav.tsx index c272fef..c53f7ee 100644 --- a/packages/view/src/component/FileTree/SideNav.tsx +++ b/packages/view/src/component/FileTree/SideNav.tsx @@ -1,7 +1,9 @@ import * as React from "react"; import * as SideNavItem from "./SideNavItem"; -interface SideNavProps { +type NavProps = JSX.IntrinsicElements["nav"]; + +interface SideNavProps extends NavProps { items: SideNavItem.Props[]; } @@ -23,10 +25,10 @@ const TreeItem = (props: TreeItemProps) => { return <>{elements}; }; -const SideNav = (props: SideNavProps) => { +const SideNav = ({ items, ...props }: SideNavProps) => { return ( -