created brush related elms; added brush resret logic; refactored naming convention around brush lift state

This commit is contained in:
2026-11-01 00:25:24 -05:00
parent 18d28d3174
commit b7cae3f222
3 changed files with 83 additions and 22 deletions
+42 -7
View File
@@ -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 = `
<li>
<label>${this.prefix}</label>
<input type="text" class="script-input" value="${this.defaultValue}"/>
<label>${this.postfix}</label>
</li>
`;
}
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 = `
<li>
<label>${this.prefix}</label>
<input type="color" class="script-input" value="${this.defaultValue}"/>
<label>${this.postfix}</label>
</li>
`;
}
action(Painter) {
Painter.brushColor = this.value;
Painter.canvasContext.fillStyle = this.value;
Painter.canvasContext.strokeStyle = this.value;
}
}