Skip to content

Add options for direction #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 5, 2025
Merged

Add options for direction #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions core/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)

Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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>
Expand All @@ -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>
</>
Expand Down
29 changes: 26 additions & 3 deletions core/src/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down Expand Up @@ -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
Expand Down