moved logic to canvas-controller.js; log cleanup; prep for load/save logic

1 - Blockcode/index.html

@@ -40,6 +40,7 @@
     <script src="resources/js/elements.js" charset="utf-8"></script>
     <script src="resources/js/globals.js" charset="utf-8"></script>
     <script src="resources/js/ui.js" charset="utf-8"></script>
+    <script src="resources/js/canvas-controller.js" charset="utf-8"></script>
     <script src="resources/js/script-runner.js" charset="utf-8"></script>
     <script src="resources/js/events.js" charset="utf-8"></script>
 </body>

1 - Blockcode/resources/js/canvas-controller.js

@@ -0,0 +1,31 @@
+const resetCanvasState = () => {
+    resetRotation();
+    resetCanvasBrush();
+    clearCanvas();
+}
+
+const resetRotation = () => { Painter.rotation = 0; }
+const clearCanvas   = () => { Painter.canvasContext.clearRect(0, 0, canvas.width, canvas.height); }
+
+const resetCanvasBrush = () => {
+    setDefaultBrushSize();
+    setDefaultBrushColor();
+    setBrushToCenter();
+}
+
+const setDefaultBrushSize = () => {
+    Painter.brushSize                 = BRUSH_SIZE;
+    Painter.canvasContext.lineWidth   = BRUSH_SIZE;
+}
+
+const setDefaultBrushColor = () => {
+    Painter.brushColor                = BRUSH_COLOR;
+    Painter.canvasContext.fillStyle   = BRUSH_COLOR;
+    Painter.canvasContext.strokeStyle = BRUSH_COLOR;
+}
+
+const setBrushToCenter = () => {
+    Painter.x1 = Painter.canvas.width  / 2
+    Painter.y1 = Painter.canvas.height / 2
+    Painter.canvasContext.moveTo( Painter.x1, Painter.y1 );
+}

1 - Blockcode/resources/js/elements.js

@@ -3,11 +3,7 @@ class BaseScriptElement extends HTMLElement {
     constructor() { super(); }
 
     connectedCallback() {
-        this.innerHTML = `
+        this.innerHTML = `<li> <label>${this.prefix}</label> </li>`;
-            <li>
-                <label>${this.prefix}</label>
-            </li>
-        `;
     }
 
     action(...args) { console.log("Hello, World!"); }
@@ -56,7 +52,6 @@ class RepeatElement extends BaseInputScriptElement {
 
     action(Painter) {
         for (let i = 0; i < this.value; i++) {
-            console.log(Painter.rotation)
             for (const elm of this.children) {
                 elm.action(Painter);
             }

1 - Blockcode/resources/js/events.js

@@ -1,6 +1,5 @@
 const dragStartHandler = (eve) => {
     draggedElm = eve.target;
-    console.debug("Node: ", draggedElm);
     eve.dataTransfer.setData("text", eve.target.tagName.toLowerCase());
 }
 
@@ -38,15 +37,6 @@ clearBttn.onclick = (eve) => {
     clearCanvas();
 }
 
-saveBttn.onclick  = (eve) => {
+saveBttn.onclick = (eve) => { saveScript(); }
-    console.log("Save");
+loadBttn.onclick = (eve) => { loadScript;   }
-}
+runBttn.onclick  = (eve) => { runScript();  }
-
-loadBttn.onclick  = (eve) => {
-    console.log("Load");
-}
-
-runBttn.onclick  = (eve) => {
-    console.log("Run");
-    runScript();
-}

1 - Blockcode/resources/js/script-runner.js

@@ -4,46 +4,17 @@ const setupScriptRunner = () => {
     Painter.canvasContext = canvasContext;
 }
 
+const saveScript = () => {
+    console.log("Save");
+}
+
+const loadScript = () => {
+    console.log("Load");
+}
+
 const runScript = () => {
     resetCanvasState();
     for (const elm of script.children) {
         elm.action(Painter);
     }
 }
-
-const resetCanvasState = () => {
-    resetRotation();
-    resetCanvasBrush();
-    clearCanvas();
-}
-
-const resetCanvasBrush = () => {
-    setDefaultBrushSize();
-    setDefaultBrushColor();
-    setBrushToCenter();
-}
-
-const setDefaultBrushSize = () => {
-    Painter.brushSize                 = BRUSH_SIZE;
-    Painter.canvasContext.lineWidth   = BRUSH_SIZE;
-}
-
-const setDefaultBrushColor = () => {
-    Painter.brushColor                = BRUSH_COLOR;
-    Painter.canvasContext.fillStyle   = BRUSH_COLOR;
-    Painter.canvasContext.strokeStyle = BRUSH_COLOR;
-}
-
-const setBrushToCenter = () => {
-    Painter.x1 = Painter.canvas.width  / 2
-    Painter.y1 = Painter.canvas.height / 2
-    Painter.canvasContext.moveTo( Painter.x1, Painter.y1 );
-}
-
-const clearCanvas = () => {
-    Painter.canvasContext.clearRect(0, 0, canvas.width, canvas.height);
-}
-
-const resetRotation = () => {
-    Painter.rotation = 0;
-}