feat: enable svg scale

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.

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.

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"
   },

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<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   graphvizViewer: GraphvizViewer.Props;
   fileTree: FileTree.Props;
@@ -13,30 +25,15 @@ interface EditorProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLD
 const Editor = ({ graphvizViewer, fileTree, current, ...props }: EditorProps) => {
   return (
     <ErrorBoundary.Component>
-      <div style={{ backgroundColor: "#fafbfd", display: "flex" }}>
-        <div style={{ marginRight: 24, minWidth: 192, flex: "0 1 0%" }}>
-          <div style={{ position: "absolute", width: 192, bottom: 0, top: 8, overflowY: "scroll" }}>
-            <FileTree.Component {...fileTree} />
-          </div>
+      <div className={className.editor}>
+        <div className={className.sideNavigation}>
+          <FileTree.Component className={className.fileTree} {...fileTree} />
         </div>
-        <main style={{ display: "flex", flex: "1 1 100%", flexDirection: "column" }}>
-          <div style={{ display: "flex", flexDirection: "row", alignItems: "center", marginBottom: 16 }}>
-            <h1 style={{ color: "#343741", fontSize: 16 }}>{current}</h1>
-          </div>
-          <div
-            style={{
-              padding: 24,
-              boxShadow: "0 2px 2px -1px rgba(152,162,179,.3), 0 1px 5px -2px rgba(152,162,179,.3)",
-              backgroundColor: "#FFF",
-              borderRadius: 4,
-              border: "1px solid #d3dae6",
-              flexGrow: 1,
-            }}
-          >
-            <div style={{}}>
-              <GraphvizViewer.Component {...graphvizViewer} />
-            </div>
+        <main className={className.editorContainer}>
+          <div className={className.title}>
+            <h1 className={className.titleText}>{current}</h1>
           </div>
+          <GraphvizViewer.Component className={className.graphvizViewer} {...graphvizViewer} />
         </main>
       </div>
     </ErrorBoundary.Component>

packages/view/src/component/Editor/editor.scss

@@ -1,2 +1,52 @@
-// @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 {
+  position: relative;
+  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%;
+
+  div {
+    width: 100%;
+  }
+}

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 <SideNav.Component items={items} />;
+export const FileTree = ({ sideNav }: FileTreeProps) => {
+  return <SideNav.Component {...sideNav} />;
 };
 
 export { FileTreeProps as Props, FileTree as Component };

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 (
-    <nav>
-      <TreeItem {...{ items: props.items, depth: 0 }} />
+    <nav {...props}>
+      <TreeItem {...{ items, depth: 0 }} />
     </nav>
   );
 };

packages/view/src/component/FileTree/file_tree.scss

@@ -0,0 +1,7 @@
+.side-navigation-container {
+  position: absolute;
+  width: 192px;
+  bottom: 0;
+  top: 8px;
+  overflow-y: scroll;
+}

packages/view/src/component/GraphvizViewer/GraphvizViewer.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 
-interface GraphvizViewerProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+const classNames = require("./graphviz_viewer");
+
+type DivProps = JSX.IntrinsicElements["div"];
+
+interface GraphvizViewerProps extends DivProps {
   svgElement: string | undefined;
 }
 
@@ -9,11 +14,33 @@ const GraphvizViewer = ({ svgElement, ...props }: GraphvizViewerProps) => {
     return <div>Now loading ....</div>;
   }
   return (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: svgElement,
-      }}
-    />
+    <div {...props}>
+      <TransformWrapper defaultScale={1} options={{ minScale: 0.1 }}>
+        {({ zoomIn, zoomOut, resetTransform, ...rest }: any) => (
+          <React.Fragment>
+            <div className={classNames.tool}>
+              <button className={classNames.button} onClick={zoomIn}>
+                ZOOM IN
+              </button>
+              <button className={classNames.button} onClick={zoomOut}>
+                ZOOM OUT
+              </button>
+              <button className={classNames.button} onClick={resetTransform}>
+                RESET
+              </button>
+            </div>
+            <TransformComponent>
+              <div
+                className={classNames.viewer}
+                dangerouslySetInnerHTML={{
+                  __html: svgElement,
+                }}
+              />
+            </TransformComponent>
+          </React.Fragment>
+        )}
+      </TransformWrapper>
+    </div>
   );
 };
 

packages/view/src/component/GraphvizViewer/graphviz_viewer.scss

@@ -0,0 +1,22 @@
+.tool {
+  position: realtive;
+  top: 0;
+  display: block;
+  text-align: right;
+}
+
+.viewer {
+  /*!*/
+}
+
+.button {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+  position: relative;
+  padding: 0.25em 0.5em;
+  display: inline-block;
+  text-decoration: none;
+  font-weight: bold;
+  outline: none;
+  cursor: pointer;
+}

packages/view/src/component/index.ts

@@ -1,9 +1,6 @@
-import * as FileTree from "./FileTree/FileTree";
+import * as FileTree from "./FileTree/SideNav";
 export { FileTree };
 
-import * as SideNav from "./FileTree/SideNav";
-export { SideNav };
-
 import * as SideNavItem from "./FileTree/SideNavItem";
 export { SideNavItem };
 

yarn.lock

@@ -10870,6 +10870,11 @@ [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-zoom-pan-pinch@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz#da16267c258ab37e8ebcdc7c252794a9633e91ec"
+  integrity sha512-J2eM0gZ04XiUWvmKZrOhSAB2zjyoK7kw2POIeN1X0yTTlmp6HPGV0zYfjnlkhgt8nQwpvXAbsF/oAnkuiwk1kA==
+
 react@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"