-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
canvas implementation #15
Conversation
…ragging and zooming
- Adjusted the canvas resize logic to ensure proportional scaling of elements when the window is resized or zoomed. - Fixed issues with sidebars affecting canvas width and height dynamically using offsetWidth and offsetHeight. - Corrected the edge connections between devices to update correctly when dragging and repositioning nodes. - Improved viewport scaling to maintain element proportions during zooming or resizing events.
…evices - Implemented save/load functionality, allowing the graph state to be saved as JSON and reloaded. - Added save and load buttons to trigger the respective functionality. - Adjusted the drawing logic for connections to ensure they don't overlap device icons. - Connections now start and end at the edges of device icons instead of their center points.
src/index.ejs
Outdated
<button id="save-button" class="save-button" title="Save">Save</button> | ||
<button id="load-button" class="load-button" title="Load">Load</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's change this to Guardar
and Cargar
src/index.ejs
Outdated
<div id="right-bar" class="right-bar"> | ||
<h2>Información</h2> | ||
<div id="info-content"> | ||
<!-- Información dinámica sobre el conejo y los routers se mostrará aquí --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's change this comment to english
src/index.ts
Outdated
|
||
// Add router button | ||
leftBar.addButton(RouterSvg, () => { | ||
AddRouter(ctx); // Esta es una función anónima que ejecuta AddRouter cuando se hace clic |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's change these comments to english
src/types/networkgraph.ts
Outdated
console.warn(`El dispositivo con ID ${n2Info.id} no existe en devices.`); | ||
} else { | ||
// Verificar si ya existe una arista entre estos dos dispositivos | ||
for (const edge of this.edges.values()) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's mark this part for later refactoring. This for
goes through ALL edges on the graph. It will probably bring performance issues in the future.
src/types/viewportManager.ts
Outdated
newNode.sprite.x = nodeData.x; | ||
newNode.sprite.y = nodeData.y; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should pass this as a constructor parameter.
src/index.ts
Outdated
const input = document.createElement("input"); | ||
input.type = "file"; | ||
input.accept = ".json"; | ||
|
||
input.onchange = (event) => { | ||
const file = (event.target as HTMLInputElement).files[0]; | ||
const reader = new FileReader(); | ||
reader.readAsText(file); | ||
|
||
reader.onload = (readerEvent) => { | ||
const jsonData = readerEvent.target.result as string; | ||
loadGraph(jsonData, ctx); // Llama a la función loadGraph pasando el JSON y el contexto | ||
}; | ||
}; | ||
|
||
input.click(); // Simula el click para abrir el cuadro de diálogo de selección de archivo | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The saveButton
and loadButton
not being simmetric smells. This should either go inside loadGraph
, or we should take out the save-to-file logic inside saveGraph
.
No description provided.