Remove existing vertexes before loading

igrep · Apr 26, 2022 · e6708e7 · e6708e7
1 parent 5859c93
commit e6708e7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/index.ts b/index.ts
@@ -166,6 +166,15 @@ document
         document.body.removeChild(a);
         break;
       case "load":
+        if (!garage.isEmpty()) {
+          const loadAnyway = confirm(
+            "保存したファイルから再開すると、今あるノードは削除されていまいます。それでも再開しますか？"
+          );
+          if (!loadAnyway) {
+            return;
+          }
+        }
+
         // Ref. (In Japanese) https://qiita.com/kerupani129/items/99fd7a768538fcd33420
         const fileInput = document.createElement("input");
         fileInput.type = "file";

diff --git a/lib.ts b/lib.ts
@@ -198,23 +198,22 @@ export class VertonGarage extends HTMLElement {
 
   toJsObject(): VertonGarageJsObject {
     const vertexes: Required<VertonVertexJsObject>[] = [];
-    const vertexElems = this._getVertexesContainer().getElementsByTagName(
-      "verton-vertex"
-    ) as HTMLCollectionOf<VertonVertex>;
+    const vertexElems = this._collectVertexElements();
     for (let i = 0; i < vertexElems.length; ++i) {
       vertexes.push(vertexElems[i].toJsObject());
     }
 
     const edges: Edge.JsObject[] = [];
-    const edgeElems = this._getEdgesContainer().children;
+    const edgeElems = this._collectEdgeElements();
     for (let i = 0; i < edgeElems.length; ++i) {
       edges.push(Edge.toJsObject(edgeElems[i] as Edge.Type));
     }
     return { vertexes, edges };
   }
 
   loadJsObject({ vertexes, edges }: VertonGarageJsObject) {
-    let maxVertexId = this._lastVertexId;
+    this._clearVertexesAndEdges();
+    let maxVertexId = 0;
     for (const vertex of vertexes) {
       this._getVertexesContainer().append(VertonVertex.build(vertex, this));
       if (vertex._id > maxVertexId) {
@@ -257,6 +256,25 @@ export class VertonGarage extends HTMLElement {
     };
   }
 
+  private _collectVertexElements(): HTMLCollectionOf<VertonVertex> {
+    return this._getVertexesContainer().getElementsByTagName(
+      "verton-vertex"
+    ) as HTMLCollectionOf<VertonVertex>;
+  }
+
+  private _collectEdgeElements(): HTMLCollectionOf<Edge.Type> {
+    return this._getEdgesContainer().getElementsByClassName(
+      "edge"
+    ) as HTMLCollectionOf<Edge.Type>;
+  }
+
+  isEmpty(): boolean {
+    return (
+      this._collectVertexElements().length < 1 &&
+      this._collectEdgeElements().length < 1
+    );
+  }
+
   private _searchPosition(): Point {
     const points: Point[] = [];
     const vertexElems = this._getVertexesContainer().getElementsByTagName(
@@ -288,6 +306,11 @@ export class VertonGarage extends HTMLElement {
     return this.shadowRoot!.getElementById("edges")!;
   }
 
+  private _clearVertexesAndEdges() {
+    this._getVertexesContainer().innerHTML = "";
+    this._getEdgesContainer().innerHTML = "";
+  }
+
   static findNonOverlappingPoint(
     endPoint: Point,
     points: Point[]