Refactor creating components

jratke587 · Jul 3, 2024 · e24f736 · e24f736
1 parent 4caa3d8
commit e24f736
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 17 deletions.
diff --git a/webroot/draggable.js b/webroot/draggable.js
@@ -47,22 +47,17 @@ class Workspace {
     return [tx, ty, sx, sy];
   }
 
-  createCircle(x, y, color) {
+  createComponent(x, y, svgElement) {
     const componentGroup = document.createElementNS(SVG_NS, "g");
     componentGroup.setAttribute("draggable", "true");
+    componentGroup.setAttribute("id", crypto.randomUUID());
     this.setTransformation(componentGroup, x, y, 1, 1);
 
-    const circle = document.createElementNS(SVG_NS, "circle");
-    circle.setAttribute("cx", 40);
-    circle.setAttribute("cy", 40);
-    circle.setAttribute("r", 40);
-    circle.setAttribute("fill", color);
-
-    componentGroup.appendChild(circle);
+    componentGroup.appendChild(svgElement);
     this.svgMainGroup.appendChild(componentGroup);
   }
 
-  loadAsset(x, y, url) {
+  createFromURL(x, y, url) {
     let xhr = new XMLHttpRequest();
 
     xhr.open('GET', url, true);
@@ -74,12 +69,7 @@ class Workspace {
         let svgDoc = parser.parseFromString(xhr.responseText, 'image/svg+xml');
         var svgElement = svgDoc.documentElement;
 
-        const componentGroup = document.createElementNS(SVG_NS, "g");
-        componentGroup.setAttribute("draggable", "true");
-        this.setTransformation(componentGroup, x, y, 1, 1);
-
-        componentGroup.appendChild(svgElement);
-        this.svgMainGroup.appendChild(componentGroup);
+        this.createComponent(x, y, svgElement);
       }
     }.bind(this);
 

diff --git a/webroot/index.html b/webroot/index.html
@@ -12,7 +12,7 @@
             const workspace = new Workspace(
                 document.getElementById("canvas")
             );
-            workspace.loadAsset(52.5, 52.5, "images/chessboard.svg");
+            workspace.createFromURL(52.5, 52.5, "images/chessboard.svg");
             const pieces = [
                 ["rdt","ndt","bdt","qdt","kdt","bdt","ndt","rdt"],
                 ["pdt","pdt","pdt","pdt","pdt","pdt","pdt","pdt"],
@@ -22,7 +22,7 @@
             ];
             pieces.forEach((row, y) => {
                 row.forEach((symbol, x) => {
-                    workspace.loadAsset(60*(x+1), 60*(y+1), `images/chess${symbol}.svg`);
+                    workspace.createFromURL(60*(x+1), 60*(y+1), `images/chess${symbol}.svg`);
                 });
             });
         </script>