mirror
/
turtlestitch
kopia lustrzana https://github.com/backface/turtlestitch
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

started to migrate input slots

pull/95/head
jmoenig 2020-02-14 11:07:14 +01:00
rodzic 27d623d7be
commit a197fbf9c4
2 zmienionych plików z 288 dodań i 289 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
snap.html
Wyświetl plik

@ -5,9 +5,7 @@
<title>Snap! Build Your Own Blocks 6.0.0 - dev -</title> <title>Snap! Build Your Own Blocks 6.0.0 - dev -</title>
<link rel="shortcut icon" href="src/favicon.ico"> <link rel="shortcut icon" href="src/favicon.ico">
<script type="text/javascript" src="src/morphic.js?version=2020-02-10"></script> <script type="text/javascript" src="src/morphic.js?version=2020-02-10"></script>
<!--
<script type="text/javascript" src="src/widgets.js?version=2020-01-03"></script> <script type="text/javascript" src="src/widgets.js?version=2020-01-03"></script>
//-->
<script type="text/javascript" src="src/blocks.js?version=2020-02-11"></script> <script type="text/javascript" src="src/blocks.js?version=2020-02-11"></script>
<!-- <!--
<script type="text/javascript" src="src/threads.js?version=2019-12-19"></script> <script type="text/javascript" src="src/threads.js?version=2019-12-19"></script>

575
src/blocks.js
Wyświetl plik

@ -29,7 +29,7 @@
prerequisites: prerequisites:
-------------- --------------
needs morphic.js and symbols.js needs morphic.js, symbols.js and widgets.js
hierarchy hierarchy
@ -148,7 +148,7 @@ CustomCommandBlockMorph, SymbolMorph, ToggleButtonMorph, DialMorph*/
// Global stuff //////////////////////////////////////////////////////// // Global stuff ////////////////////////////////////////////////////////
modules.blocks = '2020-February-13'; modules.blocks = '2020-February-14';
var SyntaxElementMorph; var SyntaxElementMorph;
var BlockMorph; var BlockMorph;
@ -2599,7 +2599,9 @@ BlockMorph.prototype.setSpec = function (spec, silently, definition) {
myself.add(part); myself.add(part);
if (!(part instanceof CommandSlotMorph || if (!(part instanceof CommandSlotMorph ||
part instanceof StringMorph)) { part instanceof StringMorph)) {
part.drawNew(); // +++ part.drawNew();
part.fixLayout() // +++ ??
part.rerender(); // +++
} }
if (part instanceof RingMorph) { if (part instanceof RingMorph) {
part.fixBlockColor(); part.fixBlockColor();
@ -7394,6 +7396,7 @@ ArgMorph.prototype.init = function (type, silently) {
this.isHole = false; this.isHole = false;
ArgMorph.uber.init.call(this, silently); ArgMorph.uber.init.call(this, silently);
this.color = new Color(0, 17, 173); this.color = new Color(0, 17, 173);
this.rerender(); // +++ ??
// this.setExtent(new Point(50, 50), silently); // +++ ??? // this.setExtent(new Point(50, 50), silently); // +++ ???
}; };
@ -7448,25 +7451,25 @@ ArgMorph.prototype.getSpec = function () {
// ArgMorph drawing // ArgMorph drawing
ArgMorph.prototype.drawNew = function () { ArgMorph.prototype.render = function (ctx) {
if (this.type === 'list') { if (this.type === 'list') {
this.image = this.listIcon(); this.image = this.listIcon(); // +++ refactor to not use a Canvas or to share a single one
this.silentSetExtent(new Point( this.silentSetExtent(new Point(
this.image.width, this.image.width,
this.image.height this.image.height
)); ));
} else if (this.type === 'object') { } else if (this.type === 'object') { // +++ refactor to not use a Canvas or to share a single one
this.image = this.objectIcon(); this.image = this.objectIcon();
this.silentSetExtent(new Point( this.silentSetExtent(new Point(
this.image.width, this.image.width,
this.image.height this.image.height
)); ));
} else { } else {
ArgMorph.uber.drawNew.call(this); ArgMorph.uber.render.call(this, ctx);
} }
}; };
ArgMorph.prototype.listIcon = function () { ArgMorph.prototype.listIcon = function () { // +++ rafactor to turn into a Symbol?
var frame = new Morph(), var frame = new Morph(),
first = new CellMorph(), first = new CellMorph(),
second = new CellMorph(), second = new CellMorph(),
@ -9550,12 +9553,10 @@ InputSlotMorph.prototype.unflash = function () {
// InputSlotMorph drawing: // InputSlotMorph drawing:
InputSlotMorph.prototype.drawNew = function () { InputSlotMorph.prototype.render = function (ctx) {
var context, borderColor, r; var borderColor, r;
// initialize my surface property // initialize my surface property
this.image = newCanvas(this.extent(), false, this.image);
context = this.image.getContext('2d');
if (this.cachedNormalColor) { // if flashing if (this.cachedNormalColor) { // if flashing
borderColor = this.color; borderColor = this.color;
} else if (this.parent) { } else if (this.parent) {
@ -9563,9 +9564,9 @@ InputSlotMorph.prototype.drawNew = function () {
} else { } else {
borderColor = new Color(120, 120, 120); borderColor = new Color(120, 120, 120);
} }
context.fillStyle = this.color.toString(); ctx.fillStyle = this.color.toString();
if (this.isReadOnly && !this.cachedNormalColor) { // unless flashing if (this.isReadOnly && !this.cachedNormalColor) { // unless flashing
context.fillStyle = borderColor.darker().toString(); ctx.fillStyle = borderColor.darker().toString();
} }
// cache my border colors // cache my border colors
@ -9575,19 +9576,19 @@ InputSlotMorph.prototype.drawNew = function () {
this.cachedClrDark = borderColor.darker(this.contrast).toString(); this.cachedClrDark = borderColor.darker(this.contrast).toString();
if (!this.isNumeric) { if (!this.isNumeric) {
context.fillRect( ctx.fillRect(
this.edge, this.edge,
this.edge, this.edge,
this.width() - this.edge * 2, this.width() - this.edge * 2,
this.height() - this.edge * 2 this.height() - this.edge * 2
); );
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
this.drawRectBorder(context); this.drawRectBorder(ctx);
} }
} else { } else {
r = (this.height() - (this.edge * 2)) / 2; r = (this.height() - (this.edge * 2)) / 2;
context.beginPath(); ctx.beginPath();
context.arc( ctx.arc(
r + this.edge, r + this.edge,
r + this.edge, r + this.edge,
r, r,
@ -9595,7 +9596,7 @@ InputSlotMorph.prototype.drawNew = function () {
radians(-90), radians(-90),
false false
); );
context.arc( ctx.arc(
this.width() - r - this.edge, this.width() - r - this.edge,
r + this.edge, r + this.edge,
r, r,
@ -9603,16 +9604,16 @@ InputSlotMorph.prototype.drawNew = function () {
radians(90), radians(90),
false false
); );
context.closePath(); ctx.closePath();
context.fill(); ctx.fill();
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
this.drawRoundBorder(context); this.drawRoundBorder(ctx);
} }
} }
// draw my "wish" block, if any // draw my "wish" block, if any
if (this.selectedBlock) { if (this.selectedBlock) {
context.drawImage( ctx.drawImage(
this.selectedBlock.fullImageClassic(), this.selectedBlock.fullImageClassic(),
this.edge + this.typeInPadding, this.edge + this.typeInPadding,
this.edge this.edge
@ -9621,19 +9622,19 @@ InputSlotMorph.prototype.drawNew = function () {
}; };
InputSlotMorph.prototype.drawRectBorder = function (context) { InputSlotMorph.prototype.drawRectBorder = function (ctx) {
var shift = this.edge * 0.5, var shift = this.edge * 0.5,
gradient; gradient;
context.lineWidth = this.edge; ctx.lineWidth = this.edge;
context.lineJoin = 'round'; ctx.lineJoin = 'round';
context.lineCap = 'round'; ctx.lineCap = 'round';
context.shadowOffsetY = shift; ctx.shadowOffsetY = shift;
context.shadowBlur = this.edge; ctx.shadowBlur = this.edge;
context.shadowColor = this.color.darker(80).toString(); ctx.shadowColor = this.color.darker(80).toString();
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
0, 0,
0, 0,
@ -9641,15 +9642,15 @@ InputSlotMorph.prototype.drawRectBorder = function (context) {
); );
gradient.addColorStop(0, this.cachedClr); gradient.addColorStop(0, this.cachedClr);
gradient.addColorStop(1, this.cachedClrDark); gradient.addColorStop(1, this.cachedClrDark);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(this.edge, shift); ctx.moveTo(this.edge, shift);
context.lineTo(this.width() - this.edge - shift, shift); ctx.lineTo(this.width() - this.edge - shift, shift);
context.stroke(); ctx.stroke();
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
0, 0,
this.edge, this.edge,
@ -9657,17 +9658,17 @@ InputSlotMorph.prototype.drawRectBorder = function (context) {
); );
gradient.addColorStop(0, this.cachedClr); gradient.addColorStop(0, this.cachedClr);
gradient.addColorStop(1, this.cachedClrDark); gradient.addColorStop(1, this.cachedClrDark);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(shift, this.edge); ctx.moveTo(shift, this.edge);
context.lineTo(shift, this.height() - this.edge - shift); ctx.lineTo(shift, this.height() - this.edge - shift);
context.stroke(); ctx.stroke();
context.shadowOffsetX = 0; ctx.shadowOffsetX = 0;
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = 0; ctx.shadowBlur = 0;
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
this.height() - this.edge, this.height() - this.edge,
0, 0,
@ -9675,13 +9676,13 @@ InputSlotMorph.prototype.drawRectBorder = function (context) {
); );
gradient.addColorStop(0, this.cachedClrBright); gradient.addColorStop(0, this.cachedClrBright);
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(this.edge, this.height() - shift); ctx.moveTo(this.edge, this.height() - shift);
context.lineTo(this.width() - this.edge, this.height() - shift); ctx.lineTo(this.width() - this.edge, this.height() - shift);
context.stroke(); ctx.stroke();
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
this.width() - this.edge, this.width() - this.edge,
0, 0,
this.width(), this.width(),
@ -9689,36 +9690,36 @@ InputSlotMorph.prototype.drawRectBorder = function (context) {
); );
gradient.addColorStop(0, this.cachedClrBright); gradient.addColorStop(0, this.cachedClrBright);
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(this.width() - shift, this.edge); ctx.moveTo(this.width() - shift, this.edge);
context.lineTo(this.width() - shift, this.height() - this.edge); ctx.lineTo(this.width() - shift, this.height() - this.edge);
context.stroke(); ctx.stroke();
}; };
InputSlotMorph.prototype.drawRoundBorder = function (context) { InputSlotMorph.prototype.drawRoundBorder = function (ctx) {
var shift = this.edge * 0.5, var shift = this.edge * 0.5,
r = (this.height() - (this.edge * 2)) / 2, r = (this.height() - (this.edge * 2)) / 2,
start, start,
end, end,
gradient; gradient;
context.lineWidth = this.edge; ctx.lineWidth = this.edge;
context.lineJoin = 'round'; ctx.lineJoin = 'round';
context.lineCap = 'round'; ctx.lineCap = 'round';
// straight top edge: // straight top edge:
start = r + this.edge; start = r + this.edge;
end = this.width() - r - this.edge; end = this.width() - r - this.edge;
if (end > start) { if (end > start) {
context.shadowOffsetX = shift; ctx.shadowOffsetX = shift;
context.shadowOffsetY = shift; ctx.shadowOffsetY = shift;
context.shadowBlur = this.edge; ctx.shadowBlur = this.edge;
context.shadowColor = this.color.darker(80).toString(); ctx.shadowColor = this.color.darker(80).toString();
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
0, 0,
0, 0,
@ -9726,20 +9727,20 @@ InputSlotMorph.prototype.drawRoundBorder = function (context) {
); );
gradient.addColorStop(0, this.cachedClr); gradient.addColorStop(0, this.cachedClr);
gradient.addColorStop(1, this.cachedClrDark); gradient.addColorStop(1, this.cachedClrDark);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(start, shift); ctx.moveTo(start, shift);
context.lineTo(end, shift); ctx.lineTo(end, shift);
context.stroke(); ctx.stroke();
context.shadowOffsetX = 0; ctx.shadowOffsetX = 0;
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = 0; ctx.shadowBlur = 0;
} }
// straight bottom edge: // straight bottom edge:
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
this.height() - this.edge, this.height() - this.edge,
0, 0,
@ -9747,21 +9748,21 @@ InputSlotMorph.prototype.drawRoundBorder = function (context) {
); );
gradient.addColorStop(0, this.cachedClrBright); gradient.addColorStop(0, this.cachedClrBright);
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(r + this.edge, this.height() - shift); ctx.moveTo(r + this.edge, this.height() - shift);
context.lineTo(this.width() - r - this.edge, this.height() - shift); ctx.lineTo(this.width() - r - this.edge, this.height() - shift);
context.stroke(); ctx.stroke();
r = this.height() / 2; r = this.height() / 2;
context.shadowOffsetX = shift; ctx.shadowOffsetX = shift;
context.shadowOffsetY = shift; ctx.shadowOffsetY = shift;
context.shadowBlur = this.edge; ctx.shadowBlur = this.edge;
context.shadowColor = this.color.darker(80).toString(); ctx.shadowColor = this.color.darker(80).toString();
// top edge: left corner // top edge: left corner
gradient = context.createRadialGradient( gradient = ctx.createRadialGradient(
r, r,
r, r,
r - this.edge, r - this.edge,
@ -9771,9 +9772,9 @@ InputSlotMorph.prototype.drawRoundBorder = function (context) {
); );
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
gradient.addColorStop(0, this.cachedClrDark); gradient.addColorStop(0, this.cachedClrDark);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.arc( ctx.arc(
r, r,
r, r,
r - shift, r - shift,
@ -9782,14 +9783,14 @@ InputSlotMorph.prototype.drawRoundBorder = function (context) {
false false
); );
context.stroke(); ctx.stroke();
context.shadowOffsetX = 0; ctx.shadowOffsetX = 0;
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = 0; ctx.shadowBlur = 0;
// bottom edge: right corner // bottom edge: right corner
gradient = context.createRadialGradient( gradient = ctx.createRadialGradient(
this.width() - r, this.width() - r,
r, r,
r - this.edge, r - this.edge,
@ -9799,9 +9800,9 @@ InputSlotMorph.prototype.drawRoundBorder = function (context) {
); );
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
gradient.addColorStop(0, this.cachedClrBright); gradient.addColorStop(0, this.cachedClrBright);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.arc( ctx.arc(
this.width() - r, this.width() - r,
r, r,
r - shift, r - shift,
@ -9809,7 +9810,7 @@ InputSlotMorph.prototype.drawRoundBorder = function (context) {
radians(90), radians(90),
false false
); );
context.stroke(); ctx.stroke();
}; };
// TemplateSlotMorph /////////////////////////////////////////////////// // TemplateSlotMorph ///////////////////////////////////////////////////
@ -9976,6 +9977,7 @@ function BooleanSlotMorph(initialValue) {
BooleanSlotMorph.prototype.init = function (initialValue) { BooleanSlotMorph.prototype.init = function (initialValue) {
this.value = (typeof initialValue === 'boolean') ? initialValue : null; this.value = (typeof initialValue === 'boolean') ? initialValue : null;
this.isUnevaluated = false; this.isUnevaluated = false;
this.progress = 0; // for animation state, not persisted
BooleanSlotMorph.uber.init.call(this); BooleanSlotMorph.uber.init.call(this);
}; };
@ -9999,11 +10001,9 @@ BooleanSlotMorph.prototype.isBinary = function () {
!isNil(this.parentThatIsA(ScriptsMorph)); !isNil(this.parentThatIsA(ScriptsMorph));
}; };
BooleanSlotMorph.prototype.setContents = function (boolOrNull, silently) { BooleanSlotMorph.prototype.setContents = function (boolOrNull) {
this.value = (typeof boolOrNull === 'boolean') ? boolOrNull : null; this.value = (typeof boolOrNull === 'boolean') ? boolOrNull : null;
if (silently) {return; } this.rerender(); // +++
this.drawNew();
this.changed();
}; };
BooleanSlotMorph.prototype.toggleValue = function () { BooleanSlotMorph.prototype.toggleValue = function () {
@ -10028,24 +10028,23 @@ BooleanSlotMorph.prototype.toggleValue = function () {
} }
} }
if (ide && !ide.isAnimating) { if (ide && !ide.isAnimating) {
this.drawNew(); this.rerender(); // +++
this.changed();
return; return;
} }
this.drawNew(3); this.progress = 3;
this.changed(); this.rerender();
this.nextSteps ([ this.nextSteps ([
function () { function () {
this.drawNew(2); this.prgress = 2;
this.changed(); this.rerender();
}, },
function () { function () {
this.drawNew(1); this.prgress = 1;
this.changed(); this.rerender();
}, },
function () { function () {
this.drawNew(); this.prgress = 0;
this.changed(); this.rerender();
}, },
]); ]);
}; };
@ -10063,19 +10062,19 @@ BooleanSlotMorph.prototype.mouseEnter = function () {
if (this.value === false && !this.isBinary()) { if (this.value === false && !this.isBinary()) {
var oldValue = this.value; var oldValue = this.value;
this.value = null; this.value = null;
this.drawNew(3); this.progress = 3; // +++ does this ever get displayed?
this.changed(); this.rerender();
this.value = oldValue; this.value = oldValue;
return; return;
} }
this.drawNew(1); this.progress = 1;
this.changed(); this.rerender();
}; };
BooleanSlotMorph.prototype.mouseLeave = function () { BooleanSlotMorph.prototype.mouseLeave = function () {
if (this.isStatic) {return; } if (this.isStatic) {return; }
this.drawNew(); this.progress = 0;
this.changed(); this.rerender();
}; };
// BooleanSlotMorph menu: // BooleanSlotMorph menu:
@ -10144,27 +10143,31 @@ BooleanSlotMorph.prototype.mappedCode = function () {
return StageMorph.prototype.codeMappings.boolFalse || 'false'; return StageMorph.prototype.codeMappings.boolFalse || 'false';
}; };
// BooleanSlotMorph drawing: // BooleanSlotMorph layout: // +++
BooleanSlotMorph.prototype.drawNew = function (progress) { BooleanSlotMorph.prototype.fixLayout = function () {
// "progress" is an optional number sliding the knob // determine my extent
// on a range between 0 and 4 var textLabel = this.isStatic ? this.textLabel() : null,
var context,
textLabel = this.isStatic ? this.textLabel() : null,
h; h;
if (textLabel) { if (textLabel) {
h = textLabel.height + (this.edge * 3); h = textLabel.height + (this.edge * 3);
this.silentSetExtent(new Point( this.bounds.setWidth(textLabel.width + (h * 1.5) + (this.edge * 2));
textLabel.width + (h * 1.5) + (this.edge * 2), this.bounds.setHeight(h);
h
));
} else { } else {
this.silentSetExtent(new Point( this.bounds.setWidth((this.fontSize + this.edge * 2) * 2);
(this.fontSize + this.edge * 2) * 2, this.bounds.setHeight(this.fontSize + this.edge * 2);
this.fontSize + this.edge * 2
));
} }
console.log('bounds', this.bounds.toString()); // +++
}
// BooleanSlotMorph drawing:
BooleanSlotMorph.prototype.render = function (ctx) {
// "progress" is an optional number sliding the knob // +++ update this comment
// on a range between 0 and 4
var textLabel = this.isStatic ? this.textLabel() : null;
if (!(this.cachedNormalColor)) { // unless flashing if (!(this.cachedNormalColor)) { // unless flashing
this.color = this.parent ? this.color = this.parent ?
this.parent.color : new Color(200, 200, 200); this.parent.color : new Color(200, 200, 200);
@ -10172,14 +10175,12 @@ BooleanSlotMorph.prototype.drawNew = function (progress) {
this.cachedClr = this.color.toString(); this.cachedClr = this.color.toString();
this.cachedClrBright = this.bright(); this.cachedClrBright = this.bright();
this.cachedClrDark = this.dark(); this.cachedClrDark = this.dark();
this.image = newCanvas(this.extent(), false, this.image); this.drawDiamond(ctx, this.progress);
context = this.image.getContext('2d'); this.drawLabel(ctx, textLabel);
this.drawDiamond(context, progress); this.drawKnob(ctx, this.progress);
this.drawLabel(context, textLabel);
this.drawKnob(context, progress);
}; };
BooleanSlotMorph.prototype.drawDiamond = function (context, progress) { BooleanSlotMorph.prototype.drawDiamond = function (ctx, progress) {
var w = this.width(), var w = this.width(),
h = this.height(), h = this.height(),
r = h / 2, r = h / 2,
@ -10189,67 +10190,67 @@ BooleanSlotMorph.prototype.drawDiamond = function (context, progress) {
// draw the 'flat' shape: // draw the 'flat' shape:
if (this.cachedNormalColor) { // if flashing if (this.cachedNormalColor) { // if flashing
context.fillStyle = this.color.toString(); ctx.fillStyle = this.color.toString();
} else { } else {
switch (this.value) { switch (this.value) {
case true: case true:
context.fillStyle = 'rgb(0, 200, 0)'; ctx.fillStyle = 'rgb(0, 200, 0)';
break; break;
case false: case false:
context.fillStyle = 'rgb(200, 0, 0)'; ctx.fillStyle = 'rgb(200, 0, 0)';
break; break;
default: default:
context.fillStyle = this.color.darker(25).toString(); ctx.fillStyle = this.color.darker(25).toString();
} }
} }
if (progress && !this.isEmptySlot()) { if (progress && !this.isEmptySlot()) {
// left half: // left half:
context.fillStyle = 'rgb(0, 200, 0)'; ctx.fillStyle = 'rgb(0, 200, 0)';
context.beginPath(); ctx.beginPath();
context.moveTo(0, r); ctx.moveTo(0, r);
context.lineTo(r, 0); ctx.lineTo(r, 0);
context.lineTo(w2, 0); ctx.lineTo(w2, 0);
context.lineTo(w2, h); ctx.lineTo(w2, h);
context.lineTo(r, h); ctx.lineTo(r, h);
context.closePath(); ctx.closePath();
context.fill(); ctx.fill();
// right half: // right half:
context.fillStyle = 'rgb(200, 0, 0)'; ctx.fillStyle = 'rgb(200, 0, 0)';
context.beginPath(); ctx.beginPath();
context.moveTo(w2, 0); ctx.moveTo(w2, 0);
context.lineTo(w - r, 0); ctx.lineTo(w - r, 0);
context.lineTo(w, r); ctx.lineTo(w, r);
context.lineTo(w - r, h); ctx.lineTo(w - r, h);
context.lineTo(w2, h); ctx.lineTo(w2, h);
context.closePath(); ctx.closePath();
context.fill(); ctx.fill();
} else { } else {
context.beginPath(); ctx.beginPath();
context.moveTo(0, r); ctx.moveTo(0, r);
context.lineTo(r, 0); ctx.lineTo(r, 0);
context.lineTo(w - r, 0); ctx.lineTo(w - r, 0);
context.lineTo(w, r); ctx.lineTo(w, r);
context.lineTo(w - r, h); ctx.lineTo(w - r, h);
context.lineTo(r, h); ctx.lineTo(r, h);
context.closePath(); ctx.closePath();
context.fill(); ctx.fill();
} }
if (MorphicPreferences.isFlat) {return; } if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect: // add 3D-Effect:
context.lineWidth = this.edge; ctx.lineWidth = this.edge;
context.lineJoin = 'round'; ctx.lineJoin = 'round';
context.lineCap = 'round'; ctx.lineCap = 'round';
context.shadowOffsetX = shift; ctx.shadowOffsetX = shift;
context.shadowBlur = shift; ctx.shadowBlur = shift;
context.shadowColor = 'black'; ctx.shadowColor = 'black';
// top edge: left corner // top edge: left corner
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
r, r,
this.edge * 0.6, this.edge * 0.6,
@ -10257,19 +10258,19 @@ BooleanSlotMorph.prototype.drawDiamond = function (context, progress) {
); );
gradient.addColorStop(1, this.cachedClrDark); gradient.addColorStop(1, this.cachedClrDark);
gradient.addColorStop(0, this.cachedClr); gradient.addColorStop(0, this.cachedClr);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(shift, r); ctx.moveTo(shift, r);
context.lineTo(r, shift); ctx.lineTo(r, shift);
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
// top edge: straight line // top edge: straight line
context.shadowOffsetX = 0; ctx.shadowOffsetX = 0;
context.shadowOffsetY = shift; ctx.shadowOffsetY = shift;
context.shadowBlur = this.edge; ctx.shadowBlur = this.edge;
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
0, 0,
0, 0,
@ -10277,18 +10278,18 @@ BooleanSlotMorph.prototype.drawDiamond = function (context, progress) {
); );
gradient.addColorStop(1, this.cachedClrDark); gradient.addColorStop(1, this.cachedClrDark);
gradient.addColorStop(0, this.cachedClr); gradient.addColorStop(0, this.cachedClr);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(r, shift); ctx.moveTo(r, shift);
context.lineTo(w - r, shift); ctx.lineTo(w - r, shift);
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = 0; ctx.shadowBlur = 0;
// bottom edge: right corner // bottom edge: right corner
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
w - r - (this.edge * 0.6), w - r - (this.edge * 0.6),
h - (this.edge * 0.6), h - (this.edge * 0.6),
w - r, w - r,
@ -10296,15 +10297,15 @@ BooleanSlotMorph.prototype.drawDiamond = function (context, progress) {
); );
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
gradient.addColorStop(0, this.cachedClrBright); gradient.addColorStop(0, this.cachedClrBright);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(w - r, h - shift); ctx.moveTo(w - r, h - shift);
context.lineTo(w - shift, r); ctx.lineTo(w - shift, r);
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
// bottom edge: straight line // bottom edge: straight line
gradient = context.createLinearGradient( gradient = ctx.createLinearGradient(
0, 0,
h - this.edge, h - this.edge,
0, 0,
@ -10312,15 +10313,15 @@ BooleanSlotMorph.prototype.drawDiamond = function (context, progress) {
); );
gradient.addColorStop(1, this.cachedClr); gradient.addColorStop(1, this.cachedClr);
gradient.addColorStop(0, this.cachedClrBright); gradient.addColorStop(0, this.cachedClrBright);
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.beginPath(); ctx.beginPath();
context.moveTo(r, h - shift); ctx.moveTo(r, h - shift);
context.lineTo(w - r - shift, h - shift); ctx.lineTo(w - r - shift, h - shift);
context.closePath(); ctx.closePath();
context.stroke(); ctx.stroke();
}; };
BooleanSlotMorph.prototype.drawLabel = function (context, textLabel) { BooleanSlotMorph.prototype.drawLabel = function (ctx, textLabel) {
var w = this.width(), var w = this.width(),
r = this.height() / 2 - this.edge, r = this.height() / 2 - this.edge,
r2 = r / 2, r2 = r / 2,
@ -10339,52 +10340,52 @@ BooleanSlotMorph.prototype.drawLabel = function (context, textLabel) {
x = this.width() - (this.height() / 2) - textLabel.width; x = this.width() - (this.height() / 2) - textLabel.width;
} }
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
context.shadowOffsetX = -shift; ctx.shadowOffsetX = -shift;
context.shadowOffsetY = -shift; ctx.shadowOffsetY = -shift;
context.shadowBlur = shift; ctx.shadowBlur = shift;
context.shadowColor = this.value ? 'rgb(0, 100, 0)' : 'rgb(100, 0, 0)'; ctx.shadowColor = this.value ? 'rgb(0, 100, 0)' : 'rgb(100, 0, 0)';
} }
context.drawImage(textLabel, x, y); ctx.drawImage(textLabel, x, y);
return; return;
} }
// "tick:" // "tick:"
x = r + (this.edge * 2) + shift; x = r + (this.edge * 2) + shift;
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
context.shadowOffsetX = -shift; ctx.shadowOffsetX = -shift;
context.shadowOffsetY = -shift; ctx.shadowOffsetY = -shift;
context.shadowBlur = shift; ctx.shadowBlur = shift;
context.shadowColor = 'rgb(0, 100, 0)'; ctx.shadowColor = 'rgb(0, 100, 0)';
} }
context.strokeStyle = 'white'; ctx.strokeStyle = 'white';
context.lineWidth = this.edge + shift; ctx.lineWidth = this.edge + shift;
context.lineCap = 'round'; ctx.lineCap = 'round';
context.lineJoin = 'miter'; ctx.lineJoin = 'miter';
context.beginPath(); ctx.beginPath();
context.moveTo(x - r2, y); ctx.moveTo(x - r2, y);
context.lineTo(x, y + r2); ctx.lineTo(x, y + r2);
context.lineTo(x + r2, r2 + this.edge); ctx.lineTo(x + r2, r2 + this.edge);
context.stroke(); ctx.stroke();
// "cross:" // "cross:"
x = w - y - (this.edge * 2); x = w - y - (this.edge * 2);
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
context.shadowOffsetX = -shift; ctx.shadowOffsetX = -shift;
context.shadowOffsetY = -shift; ctx.shadowOffsetY = -shift;
context.shadowBlur = shift; ctx.shadowBlur = shift;
context.shadowColor = 'rgb(100, 0, 0)'; ctx.shadowColor = 'rgb(100, 0, 0)';
} }
context.strokeStyle = 'white'; ctx.strokeStyle = 'white';
context.lineWidth = this.edge; ctx.lineWidth = this.edge;
context.lineCap = 'butt'; ctx.lineCap = 'butt';
context.beginPath(); ctx.beginPath();
context.moveTo(x - r2, y - r2); ctx.moveTo(x - r2, y - r2);
context.lineTo(x + r2, y + r2); ctx.lineTo(x + r2, y + r2);
context.moveTo(x - r2, y + r2); ctx.moveTo(x - r2, y + r2);
context.lineTo(x + r2, y - r2); ctx.lineTo(x + r2, y - r2);
context.stroke(); ctx.stroke();
}; };
BooleanSlotMorph.prototype.drawKnob = function (context, progress) { BooleanSlotMorph.prototype.drawKnob = function (ctx, progress) {
var w = this.width(), var w = this.width(),
r = this.height() / 2, r = this.height() / 2,
shift = this.edge / 2, shift = this.edge / 2,
@ -10404,56 +10405,56 @@ BooleanSlotMorph.prototype.drawKnob = function (context, progress) {
case false: case false:
x = r + slideStep; x = r + slideStep;
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
context.shadowOffsetX = shift; ctx.shadowOffsetX = shift;
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = shift; ctx.shadowBlur = shift;
context.shadowColor = 'black'; ctx.shadowColor = 'black';
} }
break; break;
case true: case true:
x = w - r - slideStep; x = w - r - slideStep;
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
context.shadowOffsetX = 0; ctx.shadowOffsetX = 0;
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = 0; ctx.shadowBlur = 0;
} }
break; break;
default: default:
if (!progress) {return; } if (!progress) {return; }
x = r; x = r;
if (!MorphicPreferences.isFlat) { if (!MorphicPreferences.isFlat) {
context.shadowOffsetX = shift; ctx.shadowOffsetX = shift;
context.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
context.shadowBlur = shift; ctx.shadowBlur = shift;
context.shadowColor = 'black'; ctx.shadowColor = 'black';
} }
context.globalAlpha = 0.2 * ((progress || 0) + 1); ctx.globalAlpha = 0.2 * ((progress || 0) + 1);
} }
context.fillStyle = color.toString(); ctx.fillStyle = color.toString();
context.beginPath(); ctx.beginPath();
context.arc(x, y, r, radians(0), radians(360)); ctx.arc(x, y, r, radians(0), radians(360));
context.closePath(); ctx.closePath();
context.fill(); ctx.fill();
if (MorphicPreferences.isFlat) { if (MorphicPreferences.isFlat) {
context.globalAlpha = 1; ctx.globalAlpha = 1;
return; return;
} }
// add 3D-Effect // add 3D-Effect
// outline: // outline:
context.shadowOffsetX = 0; ctx.shadowOffsetX = 0;
context.shadowBlur = 0; ctx.shadowBlur = 0;
context.shadowColor = 'black'; ctx.shadowColor = 'black';
context.lineWidth = outline; ctx.lineWidth = outline;
context.strokeStyle = outlineColor.toString(); ctx.strokeStyle = outlineColor.toString();
context.beginPath(); ctx.beginPath();
context.arc(x, y, r - (outline / 2), radians(0), radians(360)); ctx.arc(x, y, r - (outline / 2), radians(0), radians(360));
context.stroke(); ctx.stroke();
// top-left: // top-left:
gradient = context.createRadialGradient( gradient = ctx.createRadialGradient(
x, x,
y, y,
r - outline - this.edge, r - outline - this.edge,
@ -10464,11 +10465,11 @@ BooleanSlotMorph.prototype.drawKnob = function (context, progress) {
gradient.addColorStop(1, topColor.toString()); gradient.addColorStop(1, topColor.toString());
gradient.addColorStop(0, color.toString()); gradient.addColorStop(0, color.toString());
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.lineCap = 'round'; ctx.lineCap = 'round';
context.lineWidth = this.edge; ctx.lineWidth = this.edge;
context.beginPath(); ctx.beginPath();
context.arc( ctx.arc(
x, x,
y, y,
r - outline - this.edge / 2, r - outline - this.edge / 2,
@ -10476,10 +10477,10 @@ BooleanSlotMorph.prototype.drawKnob = function (context, progress) {
radians(270), radians(270),
false false
); );
context.stroke(); ctx.stroke();
// bottom-right: // bottom-right:
gradient = context.createRadialGradient( gradient = ctx.createRadialGradient(
x, x,
y, y,
r - outline - this.edge, r - outline - this.edge,
@ -10490,11 +10491,11 @@ BooleanSlotMorph.prototype.drawKnob = function (context, progress) {
gradient.addColorStop(1, bottomColor.toString()); gradient.addColorStop(1, bottomColor.toString());
gradient.addColorStop(0, color.toString()); gradient.addColorStop(0, color.toString());
context.strokeStyle = gradient; ctx.strokeStyle = gradient;
context.lineCap = 'round'; ctx.lineCap = 'round';
context.lineWidth = this.edge; ctx.lineWidth = this.edge;
context.beginPath(); ctx.beginPath();
context.arc( ctx.arc(
x, x,
y, y,
r - outline - this.edge / 2, r - outline - this.edge / 2,
@ -10502,8 +10503,8 @@ BooleanSlotMorph.prototype.drawKnob = function (context, progress) {
radians(90), radians(90),
false false
); );
context.stroke(); ctx.stroke();
context.globalAlpha = 1; ctx.globalAlpha = 1;
}; };
BooleanSlotMorph.prototype.textLabel = function () { BooleanSlotMorph.prototype.textLabel = function () {
@ -10538,7 +10539,7 @@ BooleanSlotMorph.prototype.textLabel = function () {
lbl = this.value ? t : f; lbl = this.value ? t : f;
x = (img.width - lbl.width) / 2; x = (img.width - lbl.width) / 2;
y = (img.height - lbl.height) / 2; y = (img.height - lbl.height) / 2;
img.getContext('2d').drawImage(lbl, x, y); img.getctx('2d').drawImage(lbl, x, y);
return img; return img;
}; };
@ -13594,10 +13595,10 @@ ScriptFocusMorph.prototype.reactToKeyEvent = function (key) {
c.setSpec('this is a test'); c.setSpec('this is a test');
ci = new CommandBlockMorph(); ci = new CommandBlockMorph();
ci.setSpec('block with input %s unit'); ci.setSpec('block with input %s unit %n number');
cm = new CommandBlockMorph(); cm = new CommandBlockMorph();
cm.setSpec('number %n'); cm.setSpec('bool %b ?');
BlockMorph.prototype.addToDemoMenu([ BlockMorph.prototype.addToDemoMenu([
'Syntax', 'Syntax',
@ -13607,8 +13608,8 @@ ScriptFocusMorph.prototype.reactToKeyEvent = function (key) {
[new ReporterBlockMorph(), 'Reporter'], [new ReporterBlockMorph(), 'Reporter'],
[new ReporterBlockMorph(true), 'Predicate'], [new ReporterBlockMorph(true), 'Predicate'],
[c, 'with label text'], [c, 'with label text'],
[ci, 'with input'], [ci, 'editable input slots'],
[cm, 'input slots'] [cm, 'symbolic slots']
] ]
]); ]);
})(); })();