Add options for direction

Author: ducfilan

core/src/index.jsx

@@ -4,7 +4,7 @@ import { View } from './view'
 import css from './index.module.scss'
 import { SvgMenu, SvgZoomIn, SvgZoomOut } from './icon'
 
-export function useOnnx (url) {
+export function useOnnx(url) {
     const [data, setData] = useState(null)
     useEffect(() => {
         console.log(url)
@@ -17,7 +17,7 @@ export function useOnnx (url) {
     return data
 }
 
-const ReactOnnx = forwardRef(({ width, height, file }, ref) => {
+const ReactOnnx = forwardRef(({ width, height, file, direction }, ref) => {
     const refIns = useRef(null)
     const refFile = useRef(null)
 
@@ -27,6 +27,13 @@ const ReactOnnx = forwardRef(({ width, height, file }, ref) => {
         refIns.current?.start()
     }, [])
 
+    useEffect(() => {
+        if (refIns.current && direction) {
+            refIns.current.setDirection(direction);
+        }
+    }, [direction]);
+
+
     useEffect(() => {
         if (file) {
             refIns.current?.openByBlob(file)
@@ -39,11 +46,11 @@ const ReactOnnx = forwardRef(({ width, height, file }, ref) => {
         }
     }, [])
 
-    function doOpen () {
+    function doOpen() {
         refFile.current?.click()
     }
 
-    function doLoadByFile ({ target }) {
+    function doLoadByFile({ target }) {
         const files = Array.from(target.files)
         const file = files[0]
         refIns.current?.openByFile(file, files)
@@ -53,11 +60,11 @@ const ReactOnnx = forwardRef(({ width, height, file }, ref) => {
     return (
         <>
             <input ref={refFile} type="file" multiple={false} accept=".onnx" onChange={doLoadByFile}
-                   style={{ display: 'none' }}/>
+                style={{ display: 'none' }} />
             <section className={css.onnxGraph} style={{ width: width || '100%', height: height || 400 }}>
                 <div id="graph" className="graph" tabIndex="0">
                     <svg id="canvas" className="canvas" preserveAspectRatio="xMidYMid meet" width="100%"
-                         height="100%"></svg>
+                        height="100%"></svg>
                 </div>
                 <div id="sidebar" className="sidebar">
                     <h1 id="sidebar-title" className="sidebar-title"></h1>
@@ -66,20 +73,20 @@ const ReactOnnx = forwardRef(({ width, height, file }, ref) => {
                 </div>
                 <div id="toolbar" className="toolbar">
                     <button id="sidebar-button" className="toolbar-button" title="Model Properties">
-                        <SvgMenu/>
+                        <SvgMenu />
                     </button>
                     <button id="zoom-in-button" className="toolbar-button" title="Zoom In">
-                        <SvgZoomIn/>
+                        <SvgZoomIn />
                     </button>
                     <button id="zoom-out-button" className="toolbar-button" title="Zoom Out">
-                        <SvgZoomOut/>
+                        <SvgZoomOut />
                     </button>
                     <button id="back-button" className="toolbar-back-button" title="Back">
                         &#x276E;
                     </button>
-                    <button id="name-button" className="toolbar-name-button" title="Name"/>
+                    <button id="name-button" className="toolbar-name-button" title="Name" />
                 </div>
-                <div id="menu" className="menu"/>
+                <div id="menu" className="menu" />
                 <div id="menu-button" className="menu-button">&#9776;</div>
             </section>
         </>

core/src/view.js

@@ -189,6 +189,29 @@ export class View {
         }
     }
 
+    setDirection(direction) {
+        if (direction !== 'vertical' && direction !== 'horizontal') {
+            throw new view.Error('Invalid direction. Must be "vertical" or "horizontal".')
+        }
+        if (this._options.direction !== direction) {
+            this._options.direction = direction
+            this._reload()
+            // Persist the setting
+            const options = {}
+            for (const entry of Object.entries(this._options)) {
+                const name = entry[0]
+                if (this._defaultOptions[name] !== entry[1]) {
+                    options[name] = entry[1]
+                }
+            }
+            if (Object.entries(options).length == 0) {
+                this._host.delete('configuration', 'options')
+            } else {
+                this._host.set('configuration', 'options', options)
+            }
+        }
+    }
+
     openByFile(file, files) {
         this._host._open(file, files)
     }
@@ -748,9 +771,9 @@ export class View {
             if (nodes.length > 2048) {
                 if (!this._host.confirm('Large model detected.', 'This graph contains a large number of nodes and might take a long time to render. Do you want to continue?')) {
                     this._host.event('graph_view', {
-                            graph_node_count: nodes.length,
-                            graph_skip: 1,
-                        },
+                        graph_node_count: nodes.length,
+                        graph_skip: 1,
+                    },
                     )
                     this.show(null)
                     return null