diff --git a/1 - Blockcode/resources/js/elements.js b/1 - Blockcode/resources/js/elements.js index b948ad4..4642be0 100644 --- a/1 - Blockcode/resources/js/elements.js +++ b/1 - Blockcode/resources/js/elements.js @@ -93,7 +93,7 @@ class ForwardElement extends BaseInputScriptElement { Painter.x1 = x2 Painter.y1 = y2 - if (Painter.isPenLifted) { + if (Painter.isBrushLifted) { Painter.canvasContext.moveTo(x2, y2); return; } @@ -117,7 +117,7 @@ class BackElement extends BaseInputScriptElement { Painter.x1 = x2 Painter.y1 = y2 - if (Painter.isPenLifted) { + if (Painter.isBrushLifted) { Painter.canvasContext.moveTo(x2, y2); return; } @@ -143,13 +143,13 @@ class CircleElement extends BaseInputScriptElement { class PenUpElement extends BaseScriptElement { get prefix() { return 'Pen Up'; } constructor() { super(); } - action(Painter) { Painter.isPenLifted = true; } + action(Painter) { Painter.isBrushLifted = true; } } class PenDownElement extends BaseScriptElement { get prefix() { return 'Pen Down'; } constructor() { super(); } - action(Painter) { Painter.isPenLifted = false; } + action(Painter) { Painter.isBrushLifted = false; } } class BackToCenterElement extends BaseScriptElement { @@ -162,7 +162,42 @@ class BackToCenterElement extends BaseScriptElement { } } -class HideTurtleElement extends BaseScriptElement { - get prefix() { return 'Hide Turtle'; } - constructor() { super(); } +class BrushSizeElement extends BaseInputScriptElement { + get prefix() { return 'Brush Size'; } + get defaultValue() { return 24; } + get postfix() { return 'px'; } + constructor() { super(); } + connectedCallback() { + this.innerHTML = ` +
  • + + + +
  • + `; + } + action(Painter) { + Painter.brushSize = this.value; + Painter.canvasContext.lineWidth = this.value; + } +} + +class BrushColorElement extends BaseInputScriptElement { + get prefix() { return 'Brush Color'; } + get defaultValue() { return '#000000'; } + constructor() { super(); } + connectedCallback() { + this.innerHTML = ` +
  • + + + +
  • + `; + } + action(Painter) { + Painter.brushColor = this.value; + Painter.canvasContext.fillStyle = this.value; + Painter.canvasContext.strokeStyle = this.value; + } } diff --git a/1 - Blockcode/resources/js/globals.js b/1 - Blockcode/resources/js/globals.js index 311114d..2e20cb9 100644 --- a/1 - Blockcode/resources/js/globals.js +++ b/1 - Blockcode/resources/js/globals.js @@ -1,23 +1,29 @@ const ScriptElms = { - "repeat-element": RepeatElement, - "left-element": LeftElement, - "right-element": RightElement, - "forward-element": ForwardElement, - "back-element": BackElement, + "brush-size-element": BrushSizeElement, + "brush-color-element": BrushColorElement, + "back-to-center-element": BackToCenterElement, "circle-element": CircleElement, "pen-up-element": PenUpElement, "pen-down-element": PenDownElement, - "back-to-center-element": BackToCenterElement, - "hider-turtle-element": HideTurtleElement + "repeat-element": RepeatElement, + "forward-element": ForwardElement, + "back-element": BackElement, + "left-element": LeftElement, + "right-element": RightElement }; -let Painter = { +const BRUSH_SIZE = 2; +const BRUSH_COLOR = "#000000"; + +let Painter = { canvas: null, canvasContext: null, + brushSize: BRUSH_SIZE, + brushColor: BRUSH_COLOR, rotation: 0, x1: 0, y1: 0, - isPenLifted: false + isBrushLifted: false } let draggedElm = null; diff --git a/1 - Blockcode/resources/js/script-runner.js b/1 - Blockcode/resources/js/script-runner.js index b631f1e..6b8f283 100644 --- a/1 - Blockcode/resources/js/script-runner.js +++ b/1 - Blockcode/resources/js/script-runner.js @@ -1,20 +1,40 @@ const setupScriptRunner = () => { - canvasContext = canvas.getContext("2d"); + canvasContext = canvas.getContext("2d"); Painter.canvas = canvas; Painter.canvasContext = canvasContext; } const runScript = () => { - setToCenter(); - resetRotation(); - clearCanvas(); - + resetCanvasState(); for (const elm of script.children) { elm.action(Painter); } } -const setToCenter = () => { +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 );