diff --git a/src/index.ts b/src/index.ts index c7c18fbc..05704c11 100644 --- a/src/index.ts +++ b/src/index.ts @@ -34,17 +34,19 @@ export class GlobalContext { private viewport: Viewport = null; private datagraph: DataGraph; private viewgraph: ViewGraph; + private saveIntervalId: NodeJS.Timeout | null = null; initialize(viewport: Viewport) { this.viewport = viewport; - this.datagraph = new DataGraph(); - this.viewgraph = new ViewGraph(this.datagraph, this.viewport); + loadFromLocalStorage(this); } load(datagraph: DataGraph) { this.datagraph = datagraph; this.viewport.clear(); this.viewgraph = new ViewGraph(this.datagraph, this.viewport); + this.setupAutoSave(); + saveToLocalStorage(this); } getViewport() { @@ -58,6 +60,28 @@ export class GlobalContext { getDataGraph() { return this.datagraph; } + + private setupAutoSave() { + this.clearAutoSave(); + + this.datagraph.subscribeChanges(() => { + if (this.saveIntervalId) { + clearInterval(this.saveIntervalId); + } + this.saveIntervalId = setInterval(() => { + saveToLocalStorage(this); + clearInterval(this.saveIntervalId); + }, 100); + }); + } + + private clearAutoSave() { + // Limpia el intervalo y evita duplicados + if (this.saveIntervalId) { + clearInterval(this.saveIntervalId); + this.saveIntervalId = null; + } + } } // > graphics.ts @@ -387,18 +411,5 @@ export class RightBar { // TODO: load from local storage directly, without first generating a context loadFromLocalStorage(ctx); - let saveIntervalId: NodeJS.Timeout | null = null; - - ctx.getDataGraph().subscribeChanges(() => { - // Wait a bit after the last change to save - if (saveIntervalId) { - clearInterval(saveIntervalId); - } - saveIntervalId = setInterval(() => { - saveToLocalStorage(ctx); - clearInterval(saveIntervalId); - }, 100); - }); - console.log("initialized!"); })(); diff --git a/src/style.css b/src/style.css index 1cc1e545..fe58f3a1 100644 --- a/src/style.css +++ b/src/style.css @@ -118,7 +118,8 @@ canvas { /* Hover effect for save and load buttons */ .save-button:hover, -.load-button:hover { +.load-button:hover, +.new-button:hover { background-color: #0056b3; /* Darker background on hover */ }